JavaScript methods boost your skills

1. Spread operator
2. for…of iterator
3. Includes() method
4. Some() method
5. Every() method
6. Filter() method
7. Map() method
8. Reduce() method

1. Spread operator

The Spread Operator expands an array into its elements. It can also be used for object literals.

Why should I use it?

It’s a simple and fast way to show the items of an array
It works for arrays and object literals
It’s a quick and intuitive way to pass arguments
It only requires three dots…

Example:
Let’s say you want to show a list of favorite foods without creating a loop function. Use a spread operator like this:

function sum(x, y, z) { return x + y + z;}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
// expected output: 6
console.log(sum.apply(null, numbers));
// expected output: 6

2. for…of iterator

The for...of statement loops/iterates through the collection, and provides you the ability to modify specific items. It replaces the conventional way of doing a for-loop.

The for...of statement creates a loop iterating over iterable objects (including the built-in String, Array, e.g. the Array-like arguments or NodeList objects, TypedArray, Map and Set, and user-defined iterables), invoking a custom iteration hook with statements to be executed for the value of each distinct property of the object.

Why should I use it?

It’s a simple way to add or update an item
To perform calculations (sum, multiplication etc)
When using conditional statements (if, while, switch, and so on)
Leads to clean and readable code

Example:
Let’s say you have a toolbox, and you want to show all the tools inside it. The for...of iterator makes it easy.

for…of operator

example
function* foo(){ yield 1; yield 2;}

for (let o of foo()) { console.log(o); // expected output: 1
break; // closes iterator, triggers return
}

3. Includes() method

The includes() method is used to check if a specific string exists in a collection, and returns true or false. Keep in mind that it is case sensitive: if the item inside the collection is SCHOOL, and you search for school, it will return false.

Returns a Boolean value that indicates whether the passed in string is contained in the string object.
Why should I use it?

To build simple search-functionality
It’s an intuitive approach to determine if a string exists
It uses conditional statements to modify, filter, and so on
Leads to readable code

Example:
Let’s say for whatever reason that you are not aware of what cars you have in your garage, and you need a system to check if the car you want exists or not. includes()to the rescue!

includes() method w/ arrow function

example
// Returns true
"abcde".includes("cd")
"abcde".includes("cd", 2)

// Returns false
"abcde".includes("CD")
"abcde".includes("cd", 3)

4. Some() method

The some() method checks if some elements exists in an array, and returns true or false. This is somewhat similar to the concept of the includes() method, except the argument is a function and not a string.

Determines whether the specified callback function returns true for any element of an array.

Why should I use it?

It makes sure some item passes the test
It performs conditional statements using functions
Make your code declarative
Some is good enough

Example:
Let’s say you are a club owner, and don’t care who enters the club. But some are not allowed in, because they have been drinking too much (my creativity at its best). Check out the differences between ES5 and ES6 below:

example
// The callback function.
function CheckIfEven(value, index, ar) {
if (value % 2 == 0)
return true;
}

var numbers = [1, 15, 4, 10, 11, 22];

var evens = numbers.some(CheckIfEven);
document.write(evens);

// Output:
// true

ES5:

some() method

ES6:

some() method w/ arrow function

5. Every() method

The every() method loops through the array, checks every item, and returns true or false. Same concept as some(). Except every item must satisfy the conditional statement, otherwise, it will return false.

Determines whether all the members of an array satisfy the specified test.

Why should I use it?

It makes sure every item passes the test
You can perform conditional statements using functions
Make your code declarative

Example:
The last time you allowed some() underage students to enter the club, someone reported this and the police caught you. This time you won’t let that happen, and you’ll make sure that everyone passes the age limit with the

/ Define the callback function.
function CheckIfEven(value, index, ar) {
document.write(value + " ");

if (value % 2 == 0)
return true;
else
return false;
}

// Create an array.
var numbers = [2, 4, 5, 6, 8];

// Check whether the callback function returns true for all of the
// array values.
if (numbers.every(CheckIfEven))
document.write("All are even.");
else
document.write("Some are not even.");

// Output:
// 2 4 5 Some are not even.

every()operator.

ES5

every() method

ES6

every() method w/ arrow function

6. Filter() method

The filter() method creates a new array with all elements that pass the test.

Why should I use it?

So you can avoid changing the main array
It lets you filter out items you do not need
Gives you more readable code

Example:
Let’s say you want to return only prices that are above or equal to 30. Filter out all those other prices…

var ages = [32, 33, 16, 40];

function checkAdult(age) {
return age >= 18;
}

function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

ES5

filter() method

ES6

filter() method w/ arrow function

7. Map() method

The map() method is similar to the filter() method in terms of returning a new array. However, the only difference is that it is used to modify items.

Return an array with the square root of all the values in the original array:

Why should I use it?

It lets you avoid making changes to the main array
You can modify the items you want
Gives you more readable code

Example:
Let’s say you have a list of products with prices. Your manager needs a list to show the new prices after they have been taxed by 25%. The map() method can help you out.

var numbers = [4, 9, 16, 25];

function myFunction() {
x = document.getElementById("demo")
x.innerHTML = numbers.map(Math.sqrt);
}

ES5

map() method

ES6

map() method w/ arrow function

8. Reduce() method

The reduce() method can be used to transform an array into something else, which could be an integer, an object, a chain of promises ( sequential execution of promises) etc. For practical reasons, a simple use case would be to sum a list of integers. In short, it “reduces” the whole array into one value.

Get the sum of the numbers in the array:

Why should I use it?

Perform calculations
Calculate a value
Count duplicates
Group objects by property
Execute promises sequentially
It’s a quick way to perform calculations

Example:
Let’s say you want to find out your total expenses for a week. Use reduce() to get that value.

var numbers = [65, 44, 12, 4];

function getSum(total, num) {
return total + num;
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

ES5

reduce() method

ES6

reduce() method w/ arrow function