5 useful JavaScript array functions

5 useful JavaScript array functions

JavaScript has always offered many great array functions. Especially with the introduction of ES6 and the Arrow Functions more useful functions have been added. Therefore here are 5 useful JavaScript Array functions!

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.