Hello Artisans,
In today’s blog post is about the JavaScript ES6 (ECMAScript 2015) introduced a plenty of new features and syntax enhancements that revolutionized the way developers write JavaScript code. Among these additions are numerous methods that simplify common tasks and streamline development workflows.
So let’s dive into some of the most frequently used ES6 methods, along with practical examples for each.
1. map()
The map() method creates a new array by applying a function to each element of the original array.
const numbers = [1, 2, 3, 4, 5];
const multiply = numbers.map(num => num * 2);
console.log(multiply); // Output: [2, 4, 6, 8, 10]
2. filter()
The filter() method creates a new array with elements that pass a certain condition.
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // Output: [2, 4]
3. reduce()
The reduce() method applies a function against an accumulator and each element in the array to reduce it to a single value.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(
(accumulator, currentValue) => accumulator + currentValue,
0
);
console.log(sum); // Output: 15
4. find()
The find() method returns the first element in the array that satisfies a provided testing function.
const users = [
{ id: 1, name: "Snehal" },
{ id: 2, name: "Rajeev" },
{ id: 3, name: "Moon" },
];
const user = users.find(user => user.id === 2);
console.log(user); // Output: { id: 2, name: 'Rajeev' }
5. includes()
The includes() method (Array.prototype.includes()) determines whether an array includes a certain value among its entries.
const numbers = [1, 2, 3, 4, 5, 14];
const includesFive = numbers.includes(5);
console.log(includesFive); // Output: true
6. includes()
Similarly, includes() method (String.prototype.includes()) can be used with strings to check for the presence of a substring.
const str = "Hello Artisans!, I am Rajeev Moon.";
const isStringIncluded = str.includes("Artisans");
console.log(isStringIncluded); // Output: true
7. Object.keys()
The Object.keys() method returns an array of a given object’s own enumerable property names.
const person = {
name: "Rajeev Moon",
age: 30,
job: "Developer",
};
const keys = Object.keys(person);
console.log(keys); // Output: ['name', 'age', 'Rajeev Moon']
8. Object.entries()
The Object.entries() method returns an array of a given object’s own enumerable string-keyed property [key, value] pairs.
const person = {
name: "Rajeev Moon",
age: 30,
job: "Developer",
};
const entries = Object.entries(person);
console.log(entries); // Output: [['name', 'Rajeev Moon'], ['age', 30],
9. Arrow Functions (=>)
A concise way to write anonymous functions, providing a more readable syntax and lexical scoping of this.
const add = (a, b) => a + b;
10. Template Literals
Enable string interpolation and multiline strings using backticks.
// backticks (``)
const name = "Rajeev Moon";
const greeting = `Hello, ${name}! nice to meet you.`;
console.log(greeting); // Output: Hello Rajeev Moon nice to meet you.
11. Destructuring Assignment
Easily extract values from arrays and objects into variables.
const person = { name: "Rajeev Moon", age: 30 };
const { name, age } = person;
12. Spread Syntax (…)
Expand iterable objects like arrays or objects into individual elements.
const numbers = [1, 2, 3];
const newNumberList = [...numbers, 4, 5];
console.log(newNumberList); // Output: [1, 2, 3, 4, 5]
13. Rest Parameters (…)
Gather remaining function arguments into an array.
function sum(...args) {
return args.reduce((acc, val) => acc + val, 0);
}
14. Object Literal Enhancements
Shorter syntax for defining object properties.
const x = 10,
y = 20;
const point = { x, y }; // { x: 10, y: 20 }