8 Javascript useful techniques
Tags: javascript, programming
Published: 2023-03-15 06:14:54

![js cover](https://ucarecdn.com/01292099-b782-4b74-a05e-f902be3feecd/)

###### 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!!__*