In this article, I will share 18 JavaScript tips, as well as some sample code you should know to write concise and efficient code.

let’s start! 🚀

arrow function

You can use arrow functions to simplify function declarations.

function  add ( a, b ) {
   return a + b;
}

// Arrow function 
const  add = ( a, b ) => a + b;

Array.from()

Array.from()Method can be used to convert any iterable object to an array.

const str = "Hello!" ;
 const arr = Array . from (str);

console . log (arr); //Output: ['H', 'e', ​​'l', 'l', 'o', '!']

Use console.table to display data

This can be used if you want to organize your data in the console or display it in tabular format console.table().

const person = {
     name : 'John' , 
     age : 25 ,
     profession : 'Programmer'
}
console .table ( person);

Output effect:

Use const and let

Use const for variables that will not be reassigned

const  PI = 3.14 ;
 let timer = 0 ;

Extract object properties using destructuring

By using destructuring to extract properties from objects, you can enhance the readability of your code.

const person = {
     name : 'John' , 
     age : 25 ,
     profession : 'Programmer'
}

//Instead of this 👇 
console . log (person. name );
 console . log (person. age );

//Use this👇 
const {name, age} = person;
 console . log (name);
 console . log (age);

Set default value using logical OR operator

Use ||operators to easily set default values.

function  greet ( name ) {
  name = name || 'Person' ;
   console . log ( `Hello, ${name} !` );
}

greet (); //Output: Hello, Person! 
greet ( "John" ); //Output: Hello, John!

Clear array

You can easily empty an array using the length property.

let numbers = [ 1 , 2 , 3 , 4 ];
numbers. length = 0 ;
 console . log (numbers); //Output: []

JSON.parse()

Use JSON.parse()JSON strings to JavaScript objects, which ensures seamless data manipulation.

const jsonStr = '{"name": "John", "age": 25}' ;
 const person = JSON . parse (jsonStr);
 console . log (person); 
 //Output: {name: 'John', age : 25}

Map() function

Use map()a function to transform elements in a new array without modifying the original array.

const numbers = [ 1 , 2 , 3 , 4 ];
 const doubled = numbers. map ( num => num * 2 );
 console . log (numbers); //Output: [1, 2, 3, 4] 
console . log (doubled); //Output: [2, 4, 6, 8]

Object.seal()

You can use Object.seal()methods to prevent properties from being added or removed from an object.

const person = {
     name : 'John' , 
     age : 25
};
Object . seal (person);
person. profession = "Programmer" ;
 console . log (person); //Output: {name: 'John', age: 25}

Object.freeze()

You can use Object.freeze()methods to prevent any changes to an object, including adding, modifying, or removing properties.

const person = {
     name : 'John' , 
     age : 25
};
Object . freeze (person);
person. name = "Mark" ;
 console . log (person); //Output: {name: 'John', age: 25}

Remove duplicates from array

You can Setremove duplicate elements from an array using .

const arrWithDuplicates = [ 1 , 12 , 2 , 13 , 4 , 4 , 13 ];
 const arrWithoutDuplicates = [... new  Set (arrWithDuplicates)];
 console . log (arrWithoutDuplicates); 
 //Output: [1, 12, 2 , 13, 4]

Swapping values ​​using destructuring

You can easily swap two variables using destructuring.

let x = 7 , y = 13 ;
[x, y] = [y, x];
console .log ( x); //13

spread operator

You can use the spread operator to efficiently copy or merge arrays.

const arr1 = [ 1 , 2 , 3 ];
 const arr2 = [ 9 , 8 , 7 ];

const arr3 = [...arr2];
 const mergedArr = [...arr1, ...arr2];

console . log (arr3); //[9, 8, 7] 
console . log (mergedArr); //[1, 2, 3, 9, 8, 7]

template string

Leverage template literals for string interpolation and enhanced code readability.

const name = 'John' ;
 const message = `Hello, ${name} !` ;

ternary operator

Conditional statements can be simplified using the ternary operator.

const age = 20 ;

//Instead of this👇 
if (age>= 18 ){
     console . log ( "You can drive" );
} else {
     console . log ( "You cannot drive" );
}

//Use this👇 
age >= 18 ? console . log ( "You can drive" ) : console . log ( "You cannot drive" );

Use === instead of ==

==Prevent type casting problems by using strict equality (===) instead .

const num1 = 5 ;
 const num2 = '5' ;

//Instead of using == 
if (num1 == num2) {
   console . log ( 'True' );
} else {
   console . log ( 'False' );
}

//Use === 
if (num1 === num2) {
   console . log ( 'True' );
} else {
   console . log ( 'False' );
}

Use semantic variable and function names

Use meaningful, descriptive names for variables and functions to enhance code readability and maintainability.

// Don't declare variable like this 
const a = 18 ;

// use descriptive names 
const numberOfTips = 18 ;

That’s it for today, I hope it’s helpful to you.