Javascript features that makes coding sweet

Javascript is packed with various methods and properties
that make programming sweet. Learning about these improves
our code quality, thus leading to cleaner code, which is
easier to maintain. In this article, I am going to cover some
of such features.

Optional Chaining

Suppose we want to fetch user data from an api

const user = await fetch('https://api.example.com/user/123');
// the api responds with null 

// This leads to a TypeError
console.log(user.name);

// to safeguard this
// We can use the logical conjunction operator (&&)
user && console.log(user.name);

// check if user is not null
if (user && user.name) {
    // code
}

// Using optional chaining reduces our code
if (user?.name) {
    // code
}

Nullish coalescing

The logical OR operator considers "", 0, null, and undefined to be false values. However, sometimes we need only null or undefined values to be our false values. That's where nullish coalescence can be applied

const age = 0

// outputs 0
console.log(age ?? 'Age is undefined');

// outputs 'Age is undefined' 
console.log(age || 'Age is undefined');

Destructuring

const user = {
    name: 'Gift',
    age: 21
}

const { name = 'Default', surname = 'Masker' } = user

console.log(name, surname); // => Gift Masker

const users = ['Kiroko', 'Sophiana', 'Ted', 'Perul']
const [firstname, ...other] = users

console.log(firstname); // => Kiroko

const [, , thirdname] = users
console.log(thirdname); // => Ted

Spread Syntax

/* 
     █████╗ ██████╗ ██████╗  █████╗ ██╗   ██╗███████╗
   ██╔══██╗██╔══██╗██╔══██╗██╔══██╗╚██╗ ██╔╝██╔════╝
  ███████║██████╔╝██████╔╝███████║ ╚████╔╝ ███████╗
 ██╔══██║██╔══██╗██╔══██╗██╔══██║  ╚██╔╝  ╚════██║
██║  ██║██║  ██║██║  ██║██║  ██║   ██║   ███████║
╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   ╚══════╝
*/

const num = [1, 2, 3, 4, 5]

// spread numbers as args
Math.max(...num) // => 5

// store all paremeters in argz
const details = (...argz) => {
    console.log(argz[0]);
}

let arr1 = [1, 2, 3]
let arr2 = [5, 345, 24]

// spread arr1 into arr2
arr2 = [...arr2, ...arr1] // => [ 5, 345, 24, 1, 2, 3 ]
// or use push with spread 
arr2.push(...arr1) // => [ 5, 345, 24, 1, 2, 3 ]


console.log(arr2);

/* 
 ██████╗ ██████╗      ██╗███████╗ ██████╗████████╗███████╗
██╔═══██╗██╔══██╗     ██║██╔════╝██╔════╝╚══██╔══╝██╔════╝
██║   ██║██████╔╝     ██║█████╗  ██║        ██║   ███████╗
██║   ██║██╔══██╗██   ██║██╔══╝  ██║        ██║   ╚════██║
╚██████╔╝██████╔╝╚█████╔╝███████╗╚██████╗   ██║   ███████║
 ╚═════╝ ╚═════╝  ╚════╝ ╚══════╝ ╚═════╝   ╚═╝   ╚══════╝
*/

const user = { 
    name: 'Gift',
    address: '15th Lorem Avenue',
    age: 21
}

// clone user
const clone = {...user} // => {name: "Gift", address: "15th Lorem Avenue", age: 21}

// clone & add property
const clone2 = {...user, surname: 'Masker'} // => {name: "Gift", address: "15th Lorem Avenue", age: 21, surname: 'Masker}

// clone and update name & age
const clone3 = {...user, name: 'John', age: 30} // => { name: 'John', address: '15th Lorem Avenue', age: 30 }

// merge two objects
const data1 = {name: 'Gift', age: 21}
const data2 = {address: '5th Lorem Avenue'}
const merged = {...data1, ...data2} 
console.log(merged); // => { name: 'Gift', age: 21, address: '5th Lorem Avenue' }

Conclusion

In this article, I only picked a handful of the many cool features JavaScript has. There are a lot of features and operators Javascript has, such as the ternary operator and many more, that improve code readability.

Blog

Javascript features that makes coding sweet

Gift Masekere

Optional Chaining

Nullish coalescing

Spread Syntax

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related