Essential JavaScript Methods Every Developer Should Know

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

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((acc, current) => acc + current, 0);
console.log(total); // Output: 15

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' }

const numbers = [1, 2, 3, 4, 5];
const hasFive = numbers.includes(5);
console.log(hasFive); // Output: true

const greeting = 'Hello Artisans!, I am Rajeev Moon.';
const hasArtisans = greeting.includes('Artisans');
console.log(hasArtisans); // Output: true

const person = { name: 'Rajeev Moon', age: 30, job: 'Developer' };
const personKeys = Object.keys(person);
console.log(personKeys); // Output: ['name', 'age', 'job']

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']]

const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

const name = 'Rajeev Moon';
const message = `Hello, ${name}! Nice to meet you.`;
console.log(message); // Output: Hello, Rajeev Moon! Nice to meet you.

const person = { name: 'Rajeev Moon', age: 30 };
const { name, age } = person;
console.log(name, age); // Output: Rajeev Moon 30

const numbers = [1, 2, 3];
const extendedNumbers = [...numbers, 4, 5];
console.log(extendedNumbers); // Output: [1, 2, 3, 4, 5]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // Output: { a: 1, b: 2, c: 3 }

function sum(...numbers) {
  return numbers.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10

const x = 10, y = 20;
const point = { x, y }; // Equivalent to { x: 10, y: 20 }
console.log(point); // Output: { x: 10, y: 20 }

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}
console.log(greet()); // Output: Hello, Guest!
console.log(greet('Rajeev')); // Output: Hello, Rajeev!

const user = { address: { city: 'New York' } };
console.log(user.address?.city); // Output: New York
console.log(user.profile?.email); // Output: undefined

const count = null ?? 5;
console.log(count); // Output: 5

const name = '' ?? 'Guest';
console.log(name); // Output: (empty string)

const arrayLike = document.querySelectorAll('div');
const realArray = Array.from(arrayLike);

console.log('5'.padStart(3, '0')); // Output: '005'
console.log('Hello'.padEnd(10, '.')); // Output: 'Hello.....'

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
Promise.all([promise1, promise2])
  .then(results => console.log(results)); // Output: [1, 2]

Related Posts

Jam.dev – An Effective Tool for Bug Reproduction

Feb 25, 2025  0

Mar 6, 2025  0

Hugging Face Launches Free AI Agents Course with Certif...

Feb 16, 2025  0