avatar
Asta Nguyen

Common Javascript

#javascript#web
22 May 2023
image

Use arrow functions for concise syntax: Arrow functions provide a shorter syntax compared to traditional function expressions. They are especially useful for callbacks and in cases where you want to maintain the lexical this value.

1 2 3 4 5 6 7 // Traditional function expression function multiply(a, b) { return a * b; } // Arrow function const multiply = (a, b) => a * b;

Use template literals for string interpolation: Template literals allow you to embed expressions within strings using backticks. This provides a convenient way to concatenate strings and variables.

1 2 3 const name = 'John'; const message = `Hello, ${name}!`; // Interpolate variables console.log(message); // Output: Hello, John!

Destructure objects and arrays: Destructuring allows you to extract values from objects or arrays and assign them to variables. It provides a concise way to access nested properties or extract multiple values at once.

1 2 3 4 5 6 7 8 9 // Destructuring objects const person = { name: 'John', age: 30 }; const { name, age } = person; console.log(name, age); // Output: John 30 // Destructuring arrays const numbers = [1, 2, 3, 4, 5]; const [first, second, ...rest] = numbers; console.log(first, second, rest); // Output: 1 2 [3, 4, 5]

Use spread syntax for array/object operations: The spread syntax (...) allows you to spread elements of an array or properties of an object into another array or object. It is handy for merging arrays, cloning objects, or passing multiple arguments.

1 2 3 4 5 6 7 8 9 // Spread syntax with arrays const numbers = [1, 2, 3]; const newNumbers = [...numbers, 4, 5]; console.log(newNumbers); // Output: [1, 2, 3, 4, 5] // Spread syntax with objects const person = { name: 'John', age: 30 }; const updatedPerson = { ...person, age: 31 }; console.log(updatedPerson); // Output: { name: 'John', age: 31 }

Use map() for transforming arrays: The map() method applies a provided function to each element of an array and returns a new array with the transformed values. It is useful for creating a modified version of an array without modifying the original.

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

Use filter() for filtering arrays: The filter() method creates a new array containing elements that pass a certain condition defined by a provided function. It is handy for filtering out specific values from an array.

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

Use reduce() for aggregating values in an array: The reduce() method applies a function to each element of an array, accumulating a single value. It is useful for calculating a sum, finding the maximum value, or performing any other aggregation.

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

Handle asynchronous operations with async/await: The async/await syntax simplifies working with asynchronous operations by allowing you to write asynchronous code that looks synchronous. It uses Promises under the hood.

1 2 3 4 5 6 7 8 9 10 11 12 // Example using async/await with a Promise 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); } } fetchData();

These are just a few tips to get you started. JavaScript is a versatile language with many features and possibilities. Keep exploring, experimenting, and learning to become more proficient in JavaScript!