Thread by @swapnakpanda

🦾 11 Modern JavaScript Hacks

⇩

💭 Why is this Thread?

❑ The code we write should be readable and, maintainable. But that doesn't mean it should be verbose.

❒ With ECMAScript new specifications, many newer syntaxes are available which we should try to use mostly.

❑ Let's explore few such modern tricks.

📋 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".

⚠️ Repost Notice ⚠️

⬘ Though this is my original work, most of these tricks are previously shared by me in [CHIRPBIRDICON]

⬙ If you liked this content and do feel others might learn from it, please support.

End of 🧵

Hey 👋 I am a Tech Educator from India 🇮🇳

I am sharing Tutorials, Tips, Techniques, Infographics, Cheat Sheets, Interview Questions and Roadmaps on Web Development, DSA and, Database.

Are you interested? I am sure, you are.

To never miss anything, Follow Me ✅