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.