In today's blog post, we'll explore some of the most powerful JavaScript ES6 (ECMAScript 2015) features and methods that have transformed modern JavaScript development. These additions have simplified common tasks, improved code readability, and made JavaScript more expressive and functional.
Let's examine these essential methods with practical examples:
Array Methods
1. map()
Creates a new array by applying a transformation function to each element of the original array.
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]
2. filter()
Creates a new array containing only elements that pass a specified condition.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
3. reduce()
Applies a function against an accumulator and each element to reduce the array to a single value.
const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((acc, current) => acc + current, 0);
console.log(total); // Output: 15
4. find()
Returns the first element in the array that satisfies a 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()
Checks if an array contains a specific value.
const numbers = [1, 2, 3, 4, 5];
const hasFive = numbers.includes(5);
console.log(hasFive); // Output: true
String Methods
6. String.includes()
Checks if a string contains a specified substring.
const greeting = 'Hello Artisans!, I am Rajeev Moon.';
const hasArtisans = greeting.includes('Artisans');
console.log(hasArtisans); // Output: true
Object Methods
7. Object.keys()
Returns an array of a object's own enumerable property names.
const person = { name: 'Rajeev Moon', age: 30, job: 'Developer' };
const personKeys = Object.keys(person);
console.log(personKeys); // Output: ['name', 'age', 'job']
8. Object.entries()
Returns an array of a object's own enumerable property [key, value] pairs.
const person = { name: 'Rajeev Moon', age: 30, job: 'Developer' };
const personEntries = Object.entries(person);
console.log(personEntries);
// Output: [['name', 'Rajeev Moon'], ['age', 30], ['job', 'Developer']]
Language Features
9. Arrow Functions
Provide a concise syntax for functions with lexical this binding.
const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5
10. Template Literals
Enable string interpolation and multiline strings using backticks.
const name = 'Rajeev Moon';
const message = `Hello, ${name}! Nice to meet you.`;
console.log(message); // Output: Hello, Rajeev Moon! Nice to meet you.
11. Destructuring Assignment
Extract values from arrays and objects into variables.
const person = { name: 'Rajeev Moon', age: 30 };
const { name, age } = person;
console.log(name, age); // Output: Rajeev Moon 30
12. Spread Syntax (...)
For Arrays
Expands elements of an iterable.
const numbers = [1, 2, 3];
const extendedNumbers = [...numbers, 4, 5];
console.log(extendedNumbers); // Output: [1, 2, 3, 4, 5]
For Objects
Copies own enumerable properties from a source object to a target.
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // Output: { a: 1, b: 2, c: 3 }
13. Rest Parameters
Collects remaining function parameters into an array.
function sum(...numbers) {
return numbers.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10
14. Object Literal Enhancements
Allows shorter syntax for defining object properties.
const x = 10, y = 20;
const point = { x, y }; // Equivalent to { x: 10, y: 20 }
console.log(point); // Output: { x: 10, y: 20 }
15. Default Parameters
Allows function parameters to have default values.
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet()); // Output: Hello, Guest!
console.log(greet('Rajeev')); // Output: Hello, Rajeev!
16. Optional Chaining (?.)
Safely accesses nested properties without worrying about undefined references.
const user = { address: { city: 'New York' } };
console.log(user.address?.city); // Output: New York
console.log(user.profile?.email); // Output: undefined
17. Nullish Coalescing (??)
Returns the right-hand side operand if the left-hand side is null or undefined.
const count = null ?? 5;
console.log(count); // Output: 5
const name = '' ?? 'Guest';
console.log(name); // Output: (empty string)
Additional Important Methods
18. Array.from()
Creates a new array from an array-like or iterable object.
const arrayLike = document.querySelectorAll('div');
const realArray = Array.from(arrayLike);
19. String.padStart() and String.padEnd()
Pads a string with another string until it reaches a specified length.
console.log('5'.padStart(3, '0')); // Output: '005'
console.log('Hello'.padEnd(10, '.')); // Output: 'Hello.....'
20. Promise.all()
Waits for all promises in an iterable to settle.
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
Promise.all([promise1, promise2])
.then(results => console.log(results)); // Output: [1, 2]
These ES6 features and methods form the foundation of modern JavaScript development. Mastering them will make your code more concise, readable, and efficient while reducing the amount of boilerplate code you need to write.
Top comments (0)