Elevate your JavaScript game with essential ES6 tricks!

#javascript #webdev #programming #beginners

Embracing ES6 (ECMAScript 2015) is like unlocking a treasure trove of features that not only elevate your JavaScript game but also transform your coding journey into a more enjoyable and efficient experience. In this blog, we'll dive into some of the best ES6 tricks that will not only enhance the readability of your code but also empower you to write more concise and expressive programs.

Arrow functions

ES6 introduces arrow functions, providing a more concise syntax for writing anonymous functions.

// Traditional Function
function add(a, b) {
  return a + b;
}

// Arrow Function
const add = (a, b) => a + b;

Getting the previous value of the state in the setState call using the useState hook.

// A useState hook initialisation
const [state, setState] = useState(0)

// Updating the state w.r.t to previous value
setState(prev => prev + 1)

let arr = ['one','two','three']

// Map through the array
arr.map(number => (
   console.log(number)
)}

Destructuring Literals

Destructuring allows you to extract values from arrays or objects and assign them to variables in a more intuitive way.

// Array Destructuring
const [first, second] = [1, 2];

// Object Destructuring
const { name, age } = { name: 'John', age: 30 };

Destructuring function parameters and return value, also incase you are using some date being returned asynchronously/API call make sure to handle the case when the value you are trying to destructure from is undefined

const doSomething = ({name, age}) => {
 return {name , age}
}

const {name, age} = doSomething({name: 'John Doe', age: 24})

// Data returned from an API call
const data = getDate()

//Destructuring
const {name, age} = data || {}

//Directly destructuring 
const {name, age} = getData() || {}

Spread and Rest operator

The spread operator (...) allows you to spread elements of an array or object, while the rest parameter collects remaining arguments into an array.

// Spread Operator
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

// Rest Parameter
const sum = (...numbers) => {
  return numbers.reduce((acc, num) => acc + num, 0);
}

⭐️ One of the most useful application of the spread operator is while updating/altering one value of an object, retaining all the other values as it is

const [obj, setObj] = useState({ name: 'John Doe', location: { city: "Bengaluru", state: "Karnataka" } })

//Update only the city from 'Bengaluru' to 'Mysuru'
setObj(prev => ({...prev, location: {...prev.location, city: 'Mysuru'}}))

Template Literals

Template literals provide a more flexible and readable way to concatenate strings, including variables and expressions. This can be used to declare a multiline string.

const name = 'World';
console.log(`Hello, ${name}!`);

const description = `My name is ${name}
I am from Bengaluru
I'm stuck in traffic`

These are a few tricks that can make your code cleaner, maintainable and easier to write overall. I might have missed out on a few of them, but these are the ones that actually make my life easier on an everyday basis. Happy Coding...