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.
Top comments (0)