Top JavaScript. Coding Tips with Example Code

Tips for writing better JavaScript code, along with code samples and explanations:

Use let and const instead of var

Use let and const instead of var: Use let and const instead of var to declare variables in JavaScript. This helps to avoid variable hoisting and scope issues.

Example:

// using let

let name = ‘John Doe’;

console.log(name);

// using const

const PI = 3.14;

console.log(PI);

Use template literals 

Use template literals instead of concatenation: Use template literals (` `) instead of concatenation to create strings that contain variables.

Example:

// using template literals

let name = ‘John Doe’;

console.log(`Hello, ${name}!`);

// using concatenation

let name = ‘John Doe’;

console.log(‘Hello, ‘ + name + ‘!’);

Use arrow functions

Use arrow functions for concise syntax: Use arrow functions (=>) to create anonymous functions with a concise syntax.

Example:

// using arrow functions

const square = num => num * num;

console.log(square(5));

// using traditional function syntax

function square(num) {

  return num * num;

}

console.log(square(5));

Use destructuring

Use destructuring to extract values from objects and arrays: Use destructuring to extract values from objects and arrays and assign them to variables.

Example:

// using destructuring with an object

const person = { name: ‘John Doe’, age: 30 };

const { name, age } = person;

console.log(name, age);

// using destructuring with an array

const numbers = [1, 2, 3, 4, 5];

const [first, second, …others] = numbers;

console.log(first, second, others);

Use spread operator

Use spread operator to spread arrays: Use the spread operator (…) to spread arrays into separate values or to concatenate arrays.

Example:

// using spread operator to spread array into separate values

const numbers = [1, 2, 3];

const max = Math.max(…numbers);

console.log(max);

// using spread operator to concatenate arrays

const numbers1 = [1, 2, 3];

const numbers2 = [4, 5, 6];

const allNumbers = […numbers1, …numbers2];

console.log(allNumbers);

Use map, filter, and reduce 

Use map, filter, and reduce to transform arrays: Use map, filter, and reduce to transform arrays and extract information from them.

Example:

// using map to transform an array

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers);

// using filter to extract information from an array

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers);

// using reduce to extract information from an array

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((acc, num) => acc + num, 0

console.log(sum);

In this example, the reduce method takes two arguments: a callback function and an initial value. The callback function takes two arguments: an accumulator (acc) and the current value (num). The reduce method iterates through the array, updating the accumulator with each iteration, and returns the final accumulator value. In this case, the final accumulator value is the sum of all the numbers in the array.