Elevate your JavaScript game with essential ES6 tricks!
Tags: javascript, webdev, programming, beginners
Published: 2023-11-19 17:21:49


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
![Arrow Function](https://miro.medium.com/v2/1*3BK_UMTK8T2GGnrt4nKhxA.png)
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 JS literals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzle2u1uj0vtn5derqx8.png)


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
![Spread and Rest](https://miro.medium.com/v2/resize:fit:1358/1*x70lFgXw_qyuVtn1C1nclg.jpeg)
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](https://blog.dmcindoe.dev/images/js-template-literals.png)
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...