8 neat Javascript tricks you didn't know in 4 minutes.
Tags: javascript, webdev, react
Published: 2020-12-10 13:23:18

**Introduction**
Javascript is a powerful programming language especially in web development that is used to create and control dynamic website content, i.e. anything that moves, refreshes, or otherwise changes on your screen without requiring you to manually reload a web page. During the last 5 years Javascript is becoming famous because of it's simplicity and many feautres it has and also many packages out there. So without further ado let's dive right into it.

**1. String to a number**
Now you can easily convert a string to a number by just only using `+` sign. Unlike the old method, using `+` operator is much cleaner and easier.

```javascript
my_string = "123";
console.log(+my_string);
// 123

my_string = "amazing";
console.log(+my_string);
// NaN
```
Please note that, it only works with `string numbers` as you can see in the example above.

**2. A number to a string**
You can convert a number to a string in a simpler way without using JavaScript built in `toString()` method.

Have a look at this:
```javascript
let converted_number = 5 + "";
console.log(converted_number);
// 5

console.log(typeof converted_number); 
// string
```

**3. Get unique values**
We can extract unique values from an array i.e removing duplicate values in an array by simply using the `Set object` and `Spread operator`.

Here's a simple demo

```javascript
let array_values = [1, 3, 3, 4, 5, 6, 6, 6,8, 4, 1]
let unique_values = [...new Set(array_values )];
console.log(unique_values );
// [1,3, 4, 5, 6, 8]
```

**4. Replace all**
We usually know `string.replace` method replaces on the first occurence. In any case, regular expressions in Javascript can be used to replace certain content on strings.

In our example we'll use global regex `/g` to replace all occurrences of of a string.

```javascript
let replace_string = "Visit stunnitysoft. stunnitysoft is a software company";
console.log(replace_string.replace(/stunnity/, "Micro")); 
// "Visit Microsoft. stunnitysoft is a software company"
console.log(replace_string.replace(/stunnity/g, "Micro")); 
// "Visit Microsoft. Microsoft is a software company"
```

**5. Optional Chaining**
The optional chaining operator `(?.)` permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid.

* _Taken from [MDN DOCS] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)_

Let's consider the expression `a?.b`.

This expression evaluates to `a.b` if `a` is `not null` and `not undefined`, otherwise, it evaluates to `undefined`.

You can also chain this multiple times like `a?.b?.c`

If `a` is `undefined` or `null`, then this expression evaluates to `undefined`
Else if `b` is `undefined` or `null`, then this expression evaluates to `undefined`
Else this evaluates to `a.b.c`

**Syntax**
```javascript
obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)
```

**6. Nullish Coalescing Operator**
The nullish coalescing operator `(??)` is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

* _Taken from [MDN DOCS] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)_

Consider the expression `a ?? b`. This evaluates to `b` if `a` is `null` or `undefined`, otherwise, it evaluates to `a`

**7. Logical AND (&&) and Logical OR (||) Operators**

**Logical AND (&&) Operator**
Let's say we have the following expression where `b` and `c` are expressions.
```javascript
b && c
```
This will be evaluated to the value of `c` only if `b` is truthy, otherwise, it will be evaluated to the value of `b`.

* If `b` is `falsy`, then the expression `c` is not even going to be evaluated.
* This is called short-circuit evaluation.
* This is very useful while using React.

**Logical OR (||) Operator**
Let's say we have the following expression where `b` and `c` are expressions.

```javascript
b || c
```
This will be evaluated to the value of `b` if `b` is `truthy`, otherwise, it will be evaluated to the value of `c`.

* Short-circuit evaluation happens here too.
* If `b` is `truthy`, then the expression `c` is not even going to be evaluated.
* This is also used often in React.

**8. Using length to resize and emptying an array**
In javascript we can override a built in method called `length` and assign it a value of your choice.

Let's consider the following example:

```javascript
let array_values= [1, 2, 3, 4, 5, 6, 7, 8];  
console.log(array_values.length); 
// 8  
array_values.length = 5;  
console.log(array_values.length); 
// 5  
console.log(array_values); 
// [1, 2, 3, 4,5]
```

Emptying an array

```javascript
let array_values= [1, 2, 3, 4, 5, 6, 7,8]; 
console.log(array_values.length); 
// 8  
array_values.length = 0;   
console.log(array_values.length); 
// 0 
console.log(array_values); 
// []
```
**Note:** Setting the length to `0` is not advisable as it can lead to a memory leak. In order to clean objects in an array from memory, they need to be explicitly removed.

**Conclusion**
As you can see, we did a lot of powerful stuff without writing too many lines of code. Go ahead and use these JavaScript skills as they will keep your code more cleaner and maintainable.

This was too long but thank you for holding on until the last line
😊, I hope this article was helpful, and if so please share it to other people who can find it useful. Feel free to give a suggestion or shoot me a message on [Twitter] (https://twitter.com/graphicblessing) or [Linkedin](https://www.linkedin.com/in/hirwa-blessing-086749188/).