64.96% developers worldwide use JavaScript.
But only a few write quality code.
Here are 16 JavaScript best pratices that you cannot miss :
But only a few write quality code.
Here are 16 JavaScript best pratices that you cannot miss :
Before we proceed,
"Programs must be written for people to read, and only incidentally for machines to execute."
βUnknown
"Programs must be written for people to read, and only incidentally for machines to execute."
βUnknown
{ 1 } Optional Chaining
The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.
The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.
{ 2 } Data Structure
Carefully consider how you choose your data structures, Access on the left snippet here is ~70% faster than the one on the right because the left one requires no iteration. The right does.
Carefully consider how you choose your data structures, Access on the left snippet here is ~70% faster than the one on the right because the left one requires no iteration. The right does.
{ 3 } Add Dynamic Object Properties
While defining an object, there might be a situation where you need to define the object's properties dynamically.
Letβs look at the example below.
While defining an object, there might be a situation where you need to define the object's properties dynamically.
Letβs look at the example below.
{ 4 } Ternary Operators
The conditional (ternary) operator takes three operands:
1. A condition followed by a question mark ( ? )
2. An expression to execute if the condition is truthy followed by a colon ( : )
3. The expression to execute if the condition is falsy
The conditional (ternary) operator takes three operands:
1. A condition followed by a question mark ( ? )
2. An expression to execute if the condition is truthy followed by a colon ( : )
3. The expression to execute if the condition is falsy
{ 5 } Destructuring Assignment
This is a clear blessing to keep the code well-formatted. Unpacking objects or arrays is easier than ever before.
This is a clear blessing to keep the code well-formatted. Unpacking objects or arrays is easier than ever before.
{ 6 } let vs const
Use const even for updating the array, it works as you are not reassigning anything.
Don't use let over const for the array.
Use const even for updating the array, it works as you are not reassigning anything.
Don't use let over const for the array.
{ 7 } Use Template Literals
Strings that we create with double or single quotes have a lot of limitations.
You might want to replace some of your strings with template literals to make working with them a lot easier.
Strings that we create with double or single quotes have a lot of limitations.
You might want to replace some of your strings with template literals to make working with them a lot easier.
{ 8 } Naming conventions
Take a look are below the examples
JavaScript variables are case-sensitive. Therefore, JavaScript variables with lowercase and uppercase characters are different.
Take a look are below the examples
JavaScript variables are case-sensitive. Therefore, JavaScript variables with lowercase and uppercase characters are different.
Naming Convention Continued ...
{ 9 } findIndex
This is the most underrated feature when it comes to finding a property value from an array of an object.
Use this over normal for loops.
This is the most underrated feature when it comes to finding a property value from an array of an object.
Use this over normal for loops.
{ 10 } Write Your Own Javascript Contracts and Docstrings
// Adding comments inside a function or using Docstring in the code makes things easier to understand.
Learn more here: jsdoc.app
// Adding comments inside a function or using Docstring in the code makes things easier to understand.
Learn more here: jsdoc.app
{ 11 } Arrow functions
Arrow functions are another very important feature introduced recently to JavaScript. They come bearing many advantages.
Arrow functions are another very important feature introduced recently to JavaScript. They come bearing many advantages.
{ 12 } Null-ish coalescing
Before introducing the null-ish coalescing operator, we had to use the OR operator || to fall back to a default value if the input was absent.
null coalescing operator ??, offers a better alternative.
Before introducing the null-ish coalescing operator, we had to use the OR operator || to fall back to a default value if the input was absent.
null coalescing operator ??, offers a better alternative.
{ 13 } Make use of shorthand notation(Object Literals)
When designing objects or arrays in JavaScript, line space can be saved by opting for shorthand notation.
This is accomplished by setting the properties or cells of an object or array during declaration rather than after.
When designing objects or arrays in JavaScript, line space can be saved by opting for shorthand notation.
This is accomplished by setting the properties or cells of an object or array during declaration rather than after.
{ 14 } Donβt use delete to remove an item from an array
Use splice instead of using delete to delete an item from an array.
Using delete replaces the item with undefined instead of removing it from the array.
Use splice instead of using delete to delete an item from an array.
Using delete replaces the item with undefined instead of removing it from the array.
{ 15 } Set default values
When creating objects, you can set default values for some or all properties of the object.
Doing so ensures the values of each attribute are not undefined.
When creating objects, you can set default values for some or all properties of the object.
Doing so ensures the values of each attribute are not undefined.
{ 16 } Avoid the use of eval() or the Function constructor
Use of eval or the Function constructor are expensive operations as each time they are called script engine must convert source code to executable code.
Use of eval or the Function constructor are expensive operations as each time they are called script engine must convert source code to executable code.
Thanks for checking this out.
Follow @MakadiaHarsh for more such threads on web development and personal growth.
Retweet the first tweet to help others.
Follow @MakadiaHarsh for more such threads on web development and personal growth.
Retweet the first tweet to help others.
Loading suggestions...