Write Minimal ES6 Code
Tags: javascript, webdev, programming, web
Published: 2024-05-29 07:45:56

In the constantly-changing JavaScript ecosystem, designing simple and efficient code is more important than ever. The release of ES6 introduced a slew of new capabilities that simplify and streamline the way we write JavaScript. This article discusses various new ES6 approaches that can replace older, more verbose patterns, resulting in cleaner and more readable code. From Boolean casting to the powerful spread operator, these strategies increase code readability, efficiency, and maintainability. Let's look at some of the essential techniques that any JavaScript writer should follow to build minimum ES6 code.

## 1. Boolean Casting
Today's recommended method according to Airbnb's style guide
```javascript
const age = Boolean(input.value) //old
```

```javascript
const age = !!input.value //new
```

## 2. Nullish Coalescing
Returns its right-hand side when its left-hand side operand is null or undefined
```javascript
//old
const addId = (user, id) => {
     user.id = 
          id !== null && id !== undefined
               ? id
               : "Unknown"
     return user
}
```

```javascript
//new
const addId = (user, id) => {
     user.id = id ?? "Unknown"
     return user
}
```

## 3. Default Parameters
_Description:_ Function Parameters default to undefined, so it's useful to set a value for this eventuality.

```javascript
//old
const createUser = (name, email) => {
     const user = {
          email,
          name: name ?? "Unknown",
     }
     // create user
}
```

```javascript
//new
const createUser = (
     name = "Unknown",
     email
) => {
     const user = { email, name }
     // create user
}
```

## 4. Optional Chaining
_Description:_ Allows you to read the value of a deeply nested property without checking if it's a valid chain.

```javascript
//old
const hasValidPostcode = u => 
     u &&
     u.address &&
     u.address.postcode &&
     u.address.postcode.valid
```

```javascript
//new
const hasValidPostcode = u => u?.address?.postcode?.valid
```

## 5. Destructuring Objects
_Description:_ Write less code by unpacking properties from objects into distinct variables.

```javascript
//old
const save = params => {
     saveData(
          params.name,
          params.email,
          params.dob
     )
}
```

```javascript
//new
const save = ({name, email, dob}) => {
     saveData(name, email, dob)
}
```

## 6. Destructuring Arrays
_Description:_ Write less code by unpacking values from arrays into distinct variables.

```javascript
//old
const data = [
     ["axios", "recharts"],
     ["flocked", "flick"]
]

const plugins = data[0], apps = data[1]
```

```javascript
//new
const data = [
     ["axios", "recharts"],
     ["flocked", "flick"]
]

const [plugins, apps] = data
```

## 7. Spread Operator
_Description:_ Merge two objects into one using this cool syntax, also very clean when coding objects.

```javascript
//old
const details = {name: "Man Utd"}
const stats = {games: 7, points: 21}

const team = Object.assign(
     {},
     details,
     stats
)
```

```javascript
//new
const details = {name: "Man Utd"}
const stats = {games: 7, points: 21}

const team = {
     ...details,
     ...stats
}
```

## 8. For(of)
_Description:_ Arguably the same amount of code required but for(of) is known to be 24% faster than forEach.

```javascript
//old
const array = []
const fillArray = items => {
     items.forEach(i => array.push(i))
}
```

```javascript
//new
const array = []
const fillArray = items => {
     for (let i of items) {
          array.push(i)
     }
}
```

## Conclusion
To summarize, using ES6 features may significantly simplify your JavaScript code, making it more brief, legible, and efficient. Integrating these current methods will result in cleaner and more maintainable code, improving both development and performance. Implement these approaches to improve your code standards and simplify your tasks.

# Happy Coding 👨‍💻