8 Javascript useful techniques

This article collects some common javascript techniques for clean code and better development efficiency

1. Converting string to number.

We might be using Number() and parseInt() to convert string to number. But we can use "+" as well:

Example:

const str = '123';
const num = +str

2. Converting number to string

There is another method to convert number to string.

Example:

const num = 123;
const str = ""+num

But considering readibility and performance, String() and template string are recommended.

3. Ternary operator

The ternary operator is a shorthand way of writing an if-else statement in JavaScript. It is represented by the ? and : symbols, and has the following syntax:

condition ? expression1 : expression2

Example using if/else statement:

let num = 5;
let message;

if (num > 0) {
  message = "Positive";
} else {
  message = "Non-positive";
}
console.log(message); // Output: "Positive"

The same code can be written using the ternary operator as follows:

let num = 5;
let message = (num > 0) ? "Positive" : "Non-positive";
console.log(message); // Output: "Positive"

4. Use object instead of "switch"

We often use switch to handle different things, but have you ever thought of using an object to greatly simplify your code? Let me explain in code.

const n = 1
let result;
switch (n) {
  case 1:
    result = 'res-1'
    break
  case 2:
    result = 'res-2'
    break
  case 3:
    result = 'res-3'
    break  
  // ...There are a lot more
}

We only need to use object map to achieve our goal:

const n = 1
const nMap = {
  1: 'res-1',
  2: 'res-2',
  3: 'res-3'
}
const result = nMap[ n ]

5. Use the "includes" method instead of multiple "if"

We often writes code like this but multiple conditions makes the logic more confusing.

Example:

const n = 1
if (n === 1 || n === 2 || n === 3 || n === 4 || n === 5) {
  // ...
}

Let's use "includes" method to make our code extra clean and maintainable:

const n = 1
const conditions = [ 1, 2, 3, 4, 5 ] // You just need to add new numbers here
if (conditions.includes(n)) {
  // ...
}

6. Use the default parameters of the ES6 function

Example:

const func = (name) => {
  name = name || 'magic'
  console.log(name)
}

Let's use like this instead:

const func = (name = 'magic') => {
  console.log(name)
}

7. Improve variable logging using console.log

Instead of using like this:

const str = "magic"
console.log("str:", str);

We can use like this to improve readability.

const str = "magic"
console.log({str});

This will print like an object with key as "str" and value as "magic".

8. Use of nullish coalescing operator with numbers

The Nullish Coalescing Operator (??) is a logical operator that accepts two values and returns the second value if the first one is null or undefined and otherwise returns the first value.

Example:

let num = 0;
let num2;

console.log(num || 1); // 1
console.log(num2 || 2); // 1

Let's use '??' operator now.

let num = 0;
let num2;

console.log(num ?? 1); // 0
console.log(num2 ?? 2); // 2

Hope you find these techniques useful and able to make your code cleaner. Happy reading!!