Originally published  at webdeasy.de on 10. July 2019

Why only five functions!? Quite simple: I have used these functions a lot lately and personally find them most useful. (Apart from standard functions like push()).

Array.map()

This function performs a desired operation on each element in the array. We get back a new array with the changed entries. This saves us programming a loop and at best we can implement our function as a one-liner.

Usage

For illustration we have an element with fruits, which we want to change.

var fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];
const fruitsLongerSix = fruits.map(fruit => 'Fruit: ’ + fruit);
console.log(fruitsLongerSix); // Output: [“Fruit: banana”, “Fruit: apple”, “Fruit: avocado”, “Fruit: cherry”, “Fruit: grapefruit”, “Fruit: melon”]

If our statement becomes more complicated, we can also outsource the callback in a separate function. That would look like this:

var fruits = [

‘banana’,

‘apple’,

‘avocado’,

‘cherry’,

‘grapefruit’,

‘melon’

];

const fruitsLongerSix = fruits.map(addPrefix);
function addPrefix(entry) {

return 'Fruit: ’ + entry;

}
console.log(fruitsLongerSix); // Output: [“Fruit: banana”, “Fruit: apple”, “Fruit: avocado”, “Fruit: cherry”, “Fruit: grapefruit”, “Fruit: melon”]

Docu

Array.filter()

This function creates a new array with all elements that pass the implemented test. This means we can filter our array to our liking. This is a simple and clean method to filter list entries.

Usage

We have our array of fruits here again and only need entries with an “o” in the name. With a single line we can implement this function.

var fruits = [

‘banana’,

‘apple’,

‘avocado’,

‘cherry’,

‘grapefruit’,

‘melon’

];

var filtered = fruits.filter(fruit => fruit.indexOf(‘o’) > -1);
console.log(filtered); // Output: [“avocado”, “melon”]

If the filtering gets a bit more complex, we can again outsource the callback of the filter() function to an extra function, as in the following example:

var fruits = [

‘banana’,

‘apple’,

‘avocado’,

‘cherry’,

‘grapefruit’,

‘melon’

];

var filtered = fruits.filter(getO);
function getO(entry) {

return entry.indexOf(‘o’) > -1;

}
console.log(filtered); // Output: [“avocado”, “melon”]

Docu

Array.forEach()

This function can replace our for loop. With less code, we can iterate over any element of an array. In principle, it works like the map() function, except that it doesn’t create a new array.

Usage

This is what a normal loop looks like. Much simpler than a for loop, isn’t it?

var fruits = [

‘banana’,

‘apple’,

‘avocado’,

‘cherry’,

‘grapefruit’,

‘melon’

];

fruits.forEach((fruit) => {

console.log(fruit);

});
// Output:

// banana

// apple

// avocado

// cherry

// grapefruit

// melon

Sometimes we need an additional index, or as I like to call it “Counter”. This can also be done with this function. To do this, we specify an additional variable in the function header.

var fruits = [

‘banana’,

‘apple’,

‘avocado’,

‘cherry’,

‘grapefruit’,

‘melon’

];

fruits.forEach((fruit, index) => {

console.log(index, fruit);

});
// Output:

// 0 “banana”

// 1 “apple”

// 2 “avocado”

// 3 “cherry”

// 4 “grapefruit”

// 5 “melon”

Docu

Array.indexOf()

The function returns the index – the position – of an element in an array. So we can also check if there is a certain element in the array. If it does not exist, the function returns -1.

Usage

If we have the result of the function displayed to us, we get the respective index back. If an element does not exist, we get -1 back.

var fruits = [

‘banana’,

‘apple’,

‘avocado’,

‘cherry’,

‘grapefruit’,

‘melon’

];

console.log(fruits.indexOf(‘banana’)); // Output: 0 (it’s the first index)
console.log(fruits.indexOf(‘cherry’)); // Output: 3
onsole.log(fruits.indexOf(‘toast’)); // Output: -1

Furthermore, we can use this query to check whether there is a certain element in the array:

if (fruits.indexOf(‘avocado’) > -1) {

console.log(‘We have an avocado!’);

}

Docu

Array.find()

With this function we can also check if there is a certain element in the array. It always returns the first occurrence of our condition in the array.

Usage

Our instruction is: “Give me back an element with “o” in its name”. We get the first result in our result variable.

var fruits = [

‘banana’,

‘apple’,

‘avocado’,

‘cherry’,

‘grapefruit’,

‘melon’

];

const result = fruits.find((fruit) => {

return fruit.indexOf(‘o’) > -1;

});
console.log(result); // Output: avocado

Here, too, we can outsource more complex statements to an extra callback function.

Docu

If you would like to read more interesting articles about JavaScript, you can find out how to use the JavaScript Console correctly here.

Originally published  at webdeasy.de on 10. July 2019

===========================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Svelte.js - The Complete Guide

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ JavaScript: Understanding the Weird Parts

☞ JavaScript: Coding Challenges Bootcamp - 2019

☞ The Complete Node.js Developer Course (3rd Edition)

☞ Angular & NodeJS - The MEAN Stack Guide

☞ NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)

☞ Node.js Absolute Beginners Guide - Learn Node From Scratch

#javascript #web-development