Essential Javascript Concepts

When JavaScript executes code, it first goes through a “compilation” phase before the actual “execution” phase. During compilation, JavaScript looks through the code for function declarations and “hoists” them to the top of their scope, initialising them before any other code executes.

This is why function can be called before even declaring in the code - by the time the execution phase starts, the function has already been initialised thanks to hoisting.

However, hoisting does not work the same way for variables declared with var, let, or const. Only the declaration gets hoisted, not the initialisation.

Let’s explore what issues it causes with the following example.

function fetchData() {
    var urls = ['api/user/1', 'api/user/2', 'api/user/3'];
    for (var i = 0; i < urls.length; i++) {
        setTimeout(() => {
            console.log(`Fetching data for: ${urls[i]}`);
        }, 100);
    }
}

fetchData();

Here the intended behaviour is the loop will go through each url and the setTimeout function will fetch data from each url with 100ms delay. However, the actual output will be

Fetching data for: undefined

The loop variable i declared with var keyword has function-level scope, i.e. can be modified anywhere inside fetchData function. When the code executes, in each iteration it sends the variable i inside the setTimeout function which waits for 100ms. After 100ms, when it’s time to run the console.log the value of i is already updated to 3 as the loop continue to run updating the value of i. Since, position 3 in the array urls does not have any value it returns undefined.

Arrow functions provide a few key benefits over traditional function expressions:

• Implicit returns: If an arrow function has a single expression as its body, the expression result is implicitly returned (no return keyword needed).

let sum = (a, b) => a + b;

• Lexically bound this: Arrow functions do not have their own this binding. Instead, they inherit the this value from the enclosing scope. This is often desirable behavior and can help avoid issues with this in callback functions.

const person = {
    name: 'John',
    greet: function() {
        setTimeout(function() {
            console.log(`Hello, my name is ${this.name}`); // `this` is `window`, not `person`
        }, 1000);
    }
};

const person2 = {
    name: 'John',
    greet: function() {
        setTimeout(() => {
            console.log(`Hello, my name is ${this.name}`); // `this` is `person2`
        }, 1000);
    }
};

While callbacks and promises are valid approaches to handling asynchronous operations, async/await has become the preferred method for a few reasons:

• Readability: Async/await allows one to write asynchronous code that looks very similar to synchronous code. This makes the flow of the program easier to follow and reason about.

• Error handling: With async/await, one can use regular try/catch blocks to handle errors. This is much more intuitive than chaining .catch() calls on promises.

• Concurrency: It’s easy to perform multiple asynchronous operations concurrently with Promise.all() and await:

async function fetchData() {
    const [user, posts] = await Promise.all([
        fetch('/api/user'),
        fetch('/api/posts')
    ]);

    const userData = await user.json();
    const postsData = await posts.json();

    // Use userData and postsData
}

• Debugging: Debugging promises can be tricky because the debugger will not step over asynchronous code. With async/await, one can step through their asynchronous code line by line, just like synchronous code.

While async/await is built on top of promises, it provides a cleaner, more readable syntax and is generally easier to reason about. It’s a powerful tool for writing clear, maintainable asynchronous code.

Destructuring provides a few key benefits:

• Function parameters: Destructuring is often used to extract properties from objects passed as function parameters. This can make the function signature more clear and self-documenting.

// Without destructuring
function greet(person) {
    console.log(`Hello, my name is ${person.name} and I'm ${person.age} years old.`);
}

// With destructuring
function greet({ name, age }) {
    console.log(`Hello, my name is ${name} and I'm ${age} years old.`);
}

• Default values: One can provide default values for variables when destructuring, in case the property or element is undefined.

const { count = 0 } = {}; // count will be 0 if not present in the object

• Renaming variables: If one want to extract a property but the property name is already used for something else in their current scope, one can rename the variable.

const { name: firstName } = person; // `name` is extracted into a variable named `firstName`

• Nested destructuring: Destructuring can be nested to extract values from nested objects or arrays.

const person = {
    name: 'John',
    age: 30,
    address: {
        city: 'New York',
        country: 'USA'
    }
};

const { address: { city } } = person; // `city` is 'New York'