8 neat Javascript tricks you didn't know in 4 minutes.

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.

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:

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

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.

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

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

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

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.

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.

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:

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

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 or Linkedin.