Arrays in JavaScript — Part 2

📄 Table of Contents

  • find(), some(), every()
  • from(), findIndex(), Array.of()
  • .forEach(), .map(), .filter(), .reduce()

▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Array Methods

◉ check if a variable is an array

variable.constructor === Array

Some other ways are:

Array.isArray(variable)

◉ Clone an Array:

arr.slice(0);

◉ get first element of an Array:

arr.slice(1);

◉ get last element of an Array:

arr.slice(-1);

◉ empty an array

array.length = 0;

◉ join all elements of an array:

//arr = ["A", "B", "C", "D"];
console.log(arr.toString()); // "A,B,C,D"
console.log(arr + ""); // "A,B,C,D"
console.log(arr.join()); // "A,B,C,D"
console.log(arr.join('+')); // A+B+C+D

Append an array to another array

We can use the concat() method, but it will create a new array and then merge the 2 arrays, while the below approach will merge the 2 arrays without creating a 2nd array.

var arr1 = [12 , "foo" , {name "Joe"} , -2458];
var arr2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(arr1, arr2)/* arr1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

◉ Array find() Method

The find() method returns the value of the FIRST element in an array that pass a test (provided as a function).

var ages = [3, 10, 18, 20];

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

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

The find() method executes the function once for each element present in the array.

* find() does NOT change the original array.

◉Array some() Method

The some() method checks if ANY of the elements in an array pass a test (provided as a function).

  • it returns a boolean value. If it finds an array element where the function returns a true value, some() returns true (and does not check the remaining values)
  • Otherwise it returns false

Note: some() does not change the original array.

◉Array.fill()

◉ Array.from()

◉Array.find()

Array.findIndex()

◉Array.of()

◉When to use forEach?

.forEach() is great you need to execute a function for each individual element in an array. Good practice is that you should use .forEach() when you can’t use other array methods to accomplish your goal. I know this may sound vague, but .forEach() is a generic tool… only use it when you can’t use a more specialized tool.

When to use map?

.map() when you want to transform elements in an array.

When to use filter?

.filter() when you want to select a subset of multiple elements from an array.

To remove the duplicates, you use the filter() method to include only elements whose indexes match their indexOf values:

let chars = ['A', 'B', 'A', 'C', 'B'];let uniqueChars = chars.filter((c, index) => {
return chars.indexOf(c) === index;
});
console.log(uniqueChars);

Output:

[ 'A', 'B', 'C' ]Code language: JSON / JSON with Comments (json)

To find the duplicate values, you just need to reverse the condition:

let chars = ['A', 'B', 'A', 'C', 'B'];let dupChars = chars.filter((c, index) => {
return chars.indexOf(c) !== index;
});
console.log(dupChars);Code language: JavaScript (javascript)

Output:

[ 'A', 'B' ]

ref: https://www.javascripttutorial.net/array/javascript-remove-duplicates-from-array/

When to use find?

.find() When you want to select a single element from an array.

When to use reduce?

.reduce() when you want derive a single value from multiple elements in an array.

Quirks and Criticisms

  • forEach returns “undefined”.
  • If you’re transforming the entirety of the array, you’ll probably want to use .map() instead. .map() actually returns an array which is useful, because you can chain other array methods.

Example:

const arr = [1,2,3];
const transformedArr = arr.map(function(){})
.filter(function(){});

A word about speed.

One of the biggest criticisms of .forEach() is the speed of the operation.

In reality, you shouldn’t be using .forEach() unless other methods such as .map() can’t do the trick.

.map() is actually slightly faster than .forEach().

Admittedly, .forEach() and .map() are still slower than a vanilla for loop. But judging a method solely based on execution speed is tunnel-visioned. This argument completely ignores readability and scope.

The key takeaway here is don’t use for loops because you think they are faster, use them when you know you need to.

--

--

--

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Creating a super minimal Vue/React/Polymer lib with Web Components

Setup Express and MySQL on macOS

Access localhost:3000 — ” Welcome to Express”

https://famousdunya.com/how-to-website-traffic-increase/

How are single page applications for SEO?

p2p Databases — Hyperbee — workshop

Flutter vs React Native: in 2021

How to organize and name applications and libraries in an Nx monorepo for immediate team-wide…

BitBox02 JavaScript API

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anil Kumar

Anil Kumar

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

More from Medium

JavaScript & MongoDB

What is NPM and how is it used in Node JS?

Javascript: Basics 101 — Variables & execution context.

Frontend security best practices

Circuit with a padlock