Table of Contents
Everyone knows that JavaScript is widely used and one of the most famous programming languages. There are a lot of development frameworks based on JS. In JavaScript, we can classify features depending on ECMA scripts. Generally, for a task or a problem, optimized solutions help us to deliver efficient applications development. JS features help us to formulate valuable solutions with proper syntax and better code logics. Here, we will discuss a few features of JavaScript that we probably forget to use. Also, you will get to know how to implement it effortlessly. Here are the top 15 javascript features that are rarely used.
1) Exponentiation ** Operator
This operator is used to find the exponent of a number. Like finding the power of a number raised to a certain degree.
In Math, if we 2 raise to the power of 3.
2 * 2 * 2 // Output => 8
We can do the same in JS using the ** operator:
2**3 // Output => 8 9**3 // Output => 729
2) Reducing Array contents using the length property
The length property in an array indicates the number of elements in the array.
var myArr = [11, 22, 33]; myArr.length // Output => 3
Defining length property JS engines reduce or increase the elements to equal the value of the length property.
var myArr = [11, 22, 33]; myArr.length // Output => 3 myArr.length = 2 myArr // Output => [ 11,22 ] myArr.length = 4 myArr // [ 11,22, <2 empty items> ]
The elements in the arr were only two. Then, we increased the length to 4. So, 2 more items were added to make the contents 4 in number.
3) Function constructor
Generally, we can define the function in the following ways,
const sum = (a, b) => a + b
function sum(a, b) { return a + b }
const sum = function(a, b) { return a + b }
We can still do this using the Function:
const sum = new Function("a", "b", "return a + b")
The params are the arguments and body of the function. The variable sum becomes the function name.
const sum = new Function("a", "b", "return a + b")
console.log(sum(3, 4)) // Output => 7
4) Equality Check against null/undefined values
Whenever you need to check some value and set a default value against null or undefined values, ‘??’ operator is used.
var result = undefined ?? “default value”; console.log(result); // ‘default value’ var age = 0 ??18; console.log(age); // 18
5) The Iterable approach
Iterables are everywhere in javascript. You have been using them unknowingly.
Anything which has a Symbol.iterator property is iterable.
Let us look at the simplest iterable!
var arr = [21,22,23];
const iterator = arr[Symbol.iterator]();
iterator.next(); // gives {value: 21, done: false}
iterator.next(); // gives {value: 22, done: false}
iterator.next(); // gives {value: 23, done: false}
iterator.next(); // gives {value: undefined, done: true}
We can use these iterable to a string also. String type in javascript comes baked in with iteration protocol. This means that we can now say strings are iterable.
ALSO READ: MongoDB In Golang With Examples – A Beginner’s Guide
6) Array replacer in JSON.stringify()
A function that alters the behaviour of the stringification process. If this value is null or not provided, all properties of the object are included in the resulting JSON string.
const user = {
‘username’: ‘Developer’,
‘email’: ‘dev@gmail.com’,
‘password’: ‘dev@1234’,
}
const userString = JSON.stringify(user,[‘username’,’email’],2);
// Output =>
"{
"username": "Developer",
"email": "dev@gmail.com"
}"
2 is the space value. That’s used to insert white space into the output JSON string for readability purposes.
7) Method copyWithin
This method is used to copy a part of an array to another location in the same array and returns it without modifying its length.
var arr = [1,2,3,4,5]; arr.copyWithin(0,3,arr.length); // copyWithin (target, start, end); // Output => arr = [4,5,3,4,5]; /** * target = Targeted index to insert the value * start = Starting index to copy (including start) * end = Ending index to copy (not including end) */
8) The simplest way of findIndex implementation
findIndex used to find an index of an element in the array based on some test case. Here is the basic example of findIndex in the simplest way using ES6 arrow method declaration.
var ages = [3,10,18,30]; var checkAdult = age => age >=18; ages.findIndex(checkAdult); // Output => 2
9) Require Parameters error implementation for the function
To implement error for a parameter in a function call, we can implement as follows.
function requireParam() {
throw new Error('This parameter is required')
}
function sumNumbers(a=requireParam(), b=requireParam()) {
return a+b;
}
sumNumbers(4,5); // Output => 9
sumNumbers(4,null); // Output => 4
sumNumbers(4); // Output => Uncaught Error: This parameter is required
sumNumbers(4,undefined); // Output => Uncaught Error: This parameter is required
10) Caching the array length in loop
While implementing a loop for an array, we can generally check the array length in the loop condition. It will check each iteration. To avoid each time check, we can implement as follows.
var myArr = new Array(5);
for(var i = 0; i < myArr.length; i++) {
// logic implementation
// this will calculate array length in each iteration
}
for(var i = 0, len = myArr.length; i <len; i++) {
// logic implementation
// this will calculate array length only once
}
11) Removing Array Duplicate using ES6 Set
To remove duplicate values from the array, we can use the Set method to achieve it in an efficient way.
var myDupArr = [ 5,5,4,1,1,2,3,3,4]; const myArr = Array.from(new Set(myDupArr)); // Output => [5, 4, 1, 2, 3]
12) Ways to Repeat string values
To repeat values in a string, we can do as follows.
var myStrValue = “Developer”; Method 1: using repeat method myStrValue.repeat(3); // Output => “DeveloperDeveloperDeveloper” Method 2: using Array.fill Array(3).fill(myStrValue).join(‘’); // Output => “DeveloperDeveloperDeveloper”
As we know we can use Array.fill to fill the default string in an Array variable.
var myArr = Array(3).fill("Dev"); // Output => ["Dev", "Dev", "Dev"]
ALSO READ: How To Develop A Healthcare Mobile Application For Hospitals
13) Get Date and Time in Milliseconds
Generally, to compare date and time between two date objects, it’s a good approach that comparing milliseconds. To get milliseconds of date from date object in javascript, do as follows.
new Date().getTime(); // Output => 1583661714678 Date.now(); // Output => 1583661714678 +new Date(); // Output => 1583661714678
14) Different ways to implement setTimeout()
Following are the ways to pass a parameter to a setTimeout() callback.
function mul(a,b) {
console.log(a*b)
}
setTimeout(mul,2000,3,2); // Output => 6
setTimeout(function() { mul(3,2); },2000); // Output => 6
setTimeout(mul.bind(null,3,2),2000); // Output => 6
15) Find the Intersection between Two Arrays using Set
To get an array of common elements that present between two arrays using Set as follows.
function intersection(a, b) {
const s = new Set(b);
return a.filter(x => s.has(x));
};
intersection([5, 6, 7], [4, 3, 5]); // Output => [5]
intersection([1,2,3], [2,1]); // Output => [1,2]
ALSO READ: How To Build A Dating App Like Tinder
These are the top important javascript features and important concepts that every javascript developer should know. If you have any interesting concept that is worth sharing, do share it with us in the comment section below.
If you have a business idea in your mind and searching for a reliable web development company, you are in the right place. Hire the best JS developers in the industry from Agira technologies.
