Retour aux articles
Friday, December 13, 202442 vues3

The 5 Things You Must Master in Modern JavaScript (ES6+)

Mike Codeur

ESNext
Astuces
Cheat Sheet
JavaScript

Since the release of ECMAScript 6 (ES6), JavaScript has undergone a spectacular evolution. New features make the language more powerful, expressive, and easy to use. If you want to be an effective developer, mastering these modern features is essential.

In this article, we will explore five must-know features of modern JavaScript with explanations and practical examples.


1. The .map() Method for Array Manipulation

The .map() method is a must-have tool for working with arrays. It allows you to transform each element of an array using a given function and returns a new array without modifying the original one.

Practical Example:

JAVASCRIPT
const numbers = [1, 2, 3, 4];
const doubled = numbers.map((number) => number * 2);

console.log(doubled); // [2, 4, 6, 8]

Here, each element of the numbers array is multiplied by 2. The result is a new array, adhering to functional programming principles.


2. Optional Chaining ?. for Secure Access

Optional chaining simplifies accessing deeply nested properties in objects without having to check if each level exists.

Practical Example:

JAVASCRIPT
const user = {
  profile: {
    name: 'Mike',
  },
};

console.log(user.profile?.name); // 'Mike'
console.log(user.address?.city); // undefined

If address doesn’t exist, optional chaining prevents an error and returns undefined.


3. Null Coalescing ?? for Default Values

The nullish coalescing operator allows you to define a default value only if the left-hand value is null or undefined.

Practical Example:

JAVASCRIPT
const userName = null;
const displayName = userName ?? 'Guest';

console.log(displayName); // 'Guest'

Unlike the || operator, ?? does not treat falsy values (like 0 or "") as null.


4. Destructuring for Cleaner Code

Destructuring allows you to easily extract data from objects or arrays.

Practical Example:

Object Destructuring:

JAVASCRIPT
const user = {
  name: 'Mike',
  age: 30,
};

const { name, age } = user;

console.log(name); // 'Mike'
console.log(age); // 30

Array Destructuring:

JAVASCRIPT
const colors = ['red', 'green', 'blue'];
const [first, , third] = colors;

console.log(first); // 'red'
console.log(third); // 'blue'

5. Promises and async/await for Clear Asynchronous Code

Working with asynchronous code can often be challenging. Promises and async/await make it much more intuitive.

Practical Example:

Using a Promise:

JAVASCRIPT
fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('Error:', error));

Using async/await:

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

fetchData();

async/await avoids the chaining of .then() calls, making the code more readable.


Conclusion

These five modern JavaScript features (.map(), ?., ??, destructuring, and async/await) are essential for any developer aiming to write clean, readable, and efficient code. By incorporating them into your toolkit, you’ll significantly improve your productivity and technical skills.

Feel free to try these concepts in your next project and share your experiences in the comments!

Abonnes-toi à la NewsLetter

Apprends les meilleures pratiques pour devenir un développeur web moderne (JavaScript / React / Next).

Gagner sa vie grâce au code
Devenir développeur Freelance
+35 000 développeurs déjà inscrits.

Accès instantané. Aucune carte de crédit requise.

Rejoins +35 000 développeurs déjà inscrits.