The power of JavaScript with practical examples

Mehdi Aoussiad

Follow

Nov 17 · 4 min read

Introduction

JavaScript is a very powerful programming language, especially in web development. In the last five years, this language has improved a lot and it becomes much easier to write due to the new amazing features it has. So, you need to take advantage of these features because they will allow you to easily do many powerful things in the language.

In this article, we will discover some amazing JavaScript tricks that you need to know. Let’s get right into it.

1. Convert string to number

You can easily convert a string to a number in JavaScript using the unary operator + . I know it is a simple trick but some people don’t know about it.

Have a look at the example below:

the_string = "123";
console.log(+the_string);
// 123

the_string = "hello";
console.log(+the_string);
// NaN

Notice that, it only works with ‘string numbers’ as you can see in the example above.

2. Convert a number to a string

You can also convert a number to a string in JavaScript. The concept of string concatenation makes it easier to do that.

Have a look at the following example:

var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number); 
// string

As you can see, all you need is just an empty string.

3. Extract Unique Values

We can create a new array in JavaScript only with the unique values by using the Set object and the Spread operator.

Have a look at the example below:

var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]

This is a very powerful and much cleaner way to return unique values from an array in JavaScript. If you are not familiar with the spread operator, I have written an article about that. You can check it out if you are interested.

4. Flatten a multidimensional array

You can also simply flat an array in an easy way by using the method concat() and the spread operator.

Have a look at the example below:

var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(...entries); 
// [1, 2, 5, 6, 7, 9]

As you can see, the spread operator makes it much cleaner and easy to read.

5. Replace All

We know that the function string.replace replaces only the first occurrence. However, regular expressions in JavaScript can also be used to replace content on strings.

In the example below, we will replace all the occurrences by adding the flagg at the end of the regex.

You can have a look at the following example:

var example = "potato potato";console.log(example.replace(/pot/, "tom")); 
// "tomato potato"console.log(example.replace(/pot/g, "tom")); 
// "tomato tomato"

6. Short Circuit Conditionals

Let’s take an example of the statement below:

if (available) {
    addToCart();
}

We can easily rewrite the syntax above with a logical && operator.

Have a look at the example below:

available && addToCart()

This will help us shorten the syntax above by simply using the variable together with the function.

7. Use the length to resize and empty an array

In JavaScript, we can overwrite the length of an array. So, we will take this advantage to resize and empty an array.

Here is an example if we want to resize the array:

var entries = [1, 2, 3, 4, 5, 6, 7];  
console.log(entries.length); 
// 7  
entries.length = 4;  
console.log(entries.length); 
// 4  
console.log(entries); 
// [1, 2, 3, 4]

Here is another one if we want to empty the array:

var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length); 
// 7  
entries.length = 0;   
console.log(entries.length); 
// 0 
console.log(entries); 
// []

Conclusion

As you can see, we did many tasks without having to write a lot of code. Using these tips will keep your code much cleaner and easy to maintain.

Thank you for reading this article, I hope you found it useful. If so, get more similar content by subscribing to Decoded, our YouTube channel!