DEV Community

Cover image for Javascript features that makes coding sweet
Gift Masekere
Gift Masekere

Posted on

Javascript features that makes coding sweet

#javascript #webdev #node

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 }
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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' }
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)