JavaScript weird things | Part 2
Photo credits to https://snipcart.com/blog/why-javascript-benefits

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:

Mahmoud Abdel Hakam

Software Engineering Lead STC | Ex-Jumia | Ex-Siliconexpert | Ex-Etisalat

7 个月

要查看或添加评论,请登录

Aya Ragab的更多文章

  • ALX SE — How I Survived In This Journey of Ups and Downs

    ALX SE — How I Survived In This Journey of Ups and Downs

    Introduction: My Start with ALX SE I was a fresh student in my faculty—Computer science faculty—when I joined the ALX…

    19 条评论
  • JavaScript weird things | Part 1

    JavaScript weird things | Part 1

    Prerequisite: foundational knowledge in programming. NOTE: This article will give a brief introduction to various…

    2 条评论
  • Mutability and Immutability of Variables and their values in JS

    Mutability and Immutability of Variables and their values in JS

    Prerequisites: A few programming basics (Variables, data types, and arrays) IMPORTANT NOTE: When taking a JS course and…

    1 条评论
  • JavaScript landscape | beginner guide

    JavaScript landscape | beginner guide

    Prerequisites for this article: none. Have you ever felt overwhelmed by the JavaScript jargon? Or asked yourself, "What…

    2 条评论
  • Objects nature in JavaScript (1) | for beginners

    Objects nature in JavaScript (1) | for beginners

    This is the first article I wrote in my newsletter "Intro to JavaScript" and I want to point out that having a strong…

    1 条评论

社区洞察

其他会员也浏览了