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:

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:

[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:

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:

You can also use it with objects to merge them:

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

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

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

[5] Await in Module vs. in a Script

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

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

Understanding where and how you can use 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