JavaScript weird things | Part 2

Prerequisite: foundational knowledge in programming.

NOTE: This article will give a brief introduction to various topics in ES6, but each topic has a lot more details that may be discussed in future articles.

[1] Destructuring Objects

Destructuring is a syntax introduced in ES6 that makes it easier to extract values from arrays or properties from objects into distinct variables. For instance:

const user = { name: 'John', age: 25 };
const { name, age } = user;
console.log(name); // John
console.log(age);  // 25        

Isn't that neat? Instead of writing multiple lines to extract properties, we can do it in one line!

You can also use destructuring in function arguments. This is especially useful when a function expects an object as an argument:

function displayUser({ name, age }) {
    console.log(`Name: ${name}`);
    console.log(`Age: ${age}`);
}

const user = { name: 'Jane', age: 30 };
displayUser(user);  // Name: Jane
                    // Age: 30        

[2] What Casting REALLY is in JS

Casting in JavaScript, often referred to as type coercion, is the process of converting one type of variable to another. JavaScript does this implicitly in many cases:

console.log('5' + 5);  // "55"
console.log('5' - 5);  // 0        

In the first case, the number 5 is converted to a string and concatenated. In the second case, the string '5' is converted to a number and subtracted. This automatic type conversion can lead to unexpected results, so be cautious!

[3] Spread Operator

The spread operator ... allows an iterable to expand in places where zero or more arguments are expected. For example, when used with arrays, it can copy array contents or merge arrays:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2);  // [1, 2, 3, 4, 5, 6]        

You can also use it with objects to merge them:

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2);  // { a: 1, b: 2, c: 3 }        

[4] [,,,, num] = array

JavaScript allows for some interesting ways to destructure arrays. One such way is by using empty slots:

const array = [1, 2, 3, 4, 5];
const [,,, num] = array;
console.log(num);  // 4        

Here, the commas skip the first three elements, and num gets the value 4.

[5] Await in Module vs. in a Script

Using await in JavaScript depends on the context. In modules, you can use await at the top level directly:

// In a module
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);        

However, in regular scripts, await must be used inside an async function:

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}
fetchData();        

Understanding where and how you can use await helps avoid errors and makes asynchronous code easier to write and understand.

As someone with a traditional server-side languages background, these are the next set of things I found strange when diving deeper into JavaScript. Stay tuned for more weird and wonderful aspects of JS in future articles!

References:

• Frontend Masters: JavaScript First Steps
• MDN Web Docs