Thread by @swapnakpanda

🦾 11 Modern JavaScript Hacks

⇩

📋 Table of Contents

➊ Conversion to Number
➋ Conversion to Boolean
➌ Conversion to String
➍ Complex String
➎ Short Circuit && / ||
➏ Nullish Check
➐ Default Value
➑ Default Function Parameter
➒ Optional Chaining
➓ Array Resizing
➊➊ Function Rest Parameter

➊ Conversion to Number

To convert any data to a Number type, use

⇥ Unary "+" operator
⇥ Number function
⇥ parseInt function

➋ Conversion to Boolean

To convert any data to a Boolean type, use

⇥ Boolean function
⇥ !! operator (Double Bang Operator)

➌ Conversion to String

Are you converting a value to a String like below? Remember, it's faulty.

⇥ '' + input

Instead use String() function.

➍ Complex String

Are you forming a String using multiple concatenation operators? Remember, it's difficult to write and hard to read.

⇥ 'Hello ' + fName + ' ' + lName

The modern approach is to use String Template Literals.

⇥ `Hello ${fName} ${lName}'

➎ Short Circuit && / ||

Are you still using "if" statements for one-liners?

⇥ if (hungry) eat()

The modern approach in such scenarios is to use Short-Circuits.

⇥ hungry && eat()

➏ Nullish Check

How do you check Nullish values?

The modern and most effective way is doing it using "Nullish Coalescing Operator" (??)

➐ Default Value

How do you assign value to a variable if it's missing?

⇥ x || (x = 10)
⇥ y ?? (y = 10)

The modern approach of doing it is

⇥ x ||= 10
⇥ y ??= 10

➑ Default Function Parameter

Do you often check if a function parameter is missing its value and manually assign a value to it?

The modern approach is to use default function parameters.

➒ Optional Chaining

To avoid TypeError, instead of checking whether a property exists in an object manually, use "Optional Chaining Operator" (?.)

➓ Array Resizing

To remove few last elements from an array, simply modify the array's length property value. Items from the array will automatically be removed.

➊➊ Function Rest Parameter

Are you using "arguments" variable to manipulate your function parameters? The modern approach is to use a "rest parameter".

End of 🧵

Are you looking for modern tricks for web development? I am sharing those on HTML/CSS, JavaScript and React regularly.

If you are interested, Follow me ✅