Skip to content

3.9 Summary

Arrays

An array is a list of things. It is enclosed in square brackets []. It can contain items of different data types.

var arr1 = [1, 2, 3];
var arr2 = [false, 1, "hello"];
var arr3 = ["a", "b", "c", "d"];

We can access an array item by enclosing its position in square brackets. The first item of an array has position 0, the second has position 1, the third has position 2, and so on.

var colors = ["red", "white", "green"];
console.log(colors[0]); //red
console.log(colors[1]); //white
console.log(colors[2]); //green

array.length returns the number of array items.

var arr1 = [1, 2, 3];
console.log(arr1.length); //3

Modifying Arrays

Adding items to an array

array.push(item) method adds an item to the end of an array.

array.unshift(item) method adds an item to the start of an array.

Use array[position]=value to add an item at a specific position in an array.

var arr = [1, 2, 3, 4];

arr.push(5); //[1, 2, 3, 4, 5]
arr.unshift(0); //[0, 1, 2, 3, 4, 5]
arr[6] = 6; //[0, 1, 2, 3, 4, 5, 6]

Removing items from an array

array.pop() method removes the last item from an array.

array.shift() method removes the first item from an array.

var arr = [1, 2, 3, 4];

arr.pop(); //[1, 2, 3]
arr.shift(0); //[2, 3]

Display Array Items

You can display array items using:

  1. for loop.
  2. for...of loop.
  3. forEach() array helper.
var colors = ["red", "green", "white", "black"];

//for loop
for(var i =0; i < colors.length; i++){
  console.log(colors[i]);
}

//for...of
for(color of colors){
  console.log(color);
}

//forEach helper
colors.forEach(function(current){
  console.log(current);
});

Array Helpers

map()

Using array.map(), we can create a new array from an array without changing the original array.

array.map() takes a function as an input, and it returns a new array.

This input function accepts up to three arguments:

  1. currentValue: the current element being processed in the array. It is required.
  2. index: the index of the current element. It is optional.
  3. array: the array itself. It is optional.

Example:

var numbers = [1, 2, 3];
var result = numbers.map(num => num + 1);
//[2, 3, 4]

filter()

Using array.filter(), we can create a new array from an array without changing the original array. The new array contains all the elements that satisfy the condition provided by the input function.

array.filter() takes a function as an input, and it returns a new array.

This input function accepts up to three arguments:

  1. currentValue: the current element being processed in the array. It is required.
  2. index: the index of the current element. It is optional.
  3. array: the array itself. It is optional.

Example:

var numbers = [1, 2, 3];
var result = numbers.filter(num => num >= 2);
//[2, 3]

every()

Using array.every(), we can check if all the array element satisfy a certain condition.

array.every() takes a function as an input, and it returns either true or false.

This input function accepts up to three arguments:

  1. currentValue: the current element being processed in the array. It is required.
  2. index: the index of the current element. It is optional.
  3. array: the array itself. It is optional.

Example:

var numbers = [1, 2, 3];
var result = numbers.every(num => num > 0);
//true

some()

Using array.some(), we can check if at least one element of an array satisfies a certain condition.

array.some() takes a function as an input, and it returns either true or false.

This input function accepts up to three arguments:

  1. currentValue: the current element being processed in the array. It is required.
  2. index: the index of the current element. It is optional.
  3. array: the array itself. It is optional.

Example:

var numbers = [1, 2, 3];
var result = numbers.some(num => num < 0);
//false

find()

Using array.find(), we can retrieve the first element in an array that satisfies a given condition.

array.find() takes a function as an input, and it returns the value of the first element that satisfies the condition.

This input function accepts up to three arguments:

  1. currentValue: the current element being processed in the array. It is required.
  2. index: the index of the current element. It is optional.
  3. array: the array itself. It is optional.

Example:

var numbers = [1, 2, 3];
var result = numbers.find(num => num > 0);
//1

reduce()

Using array.reduce(), we can reduce the array to a single value.

array.reduce() takes a function and an initial value as input. It returns the value that the function returns.

This input function accepts up to four arguments:

  1. previousValue: the previously returned value of the function. It is required.
  2. currentValue: the current element being processed in the array. It is required.
  3. index: the index of the current element. It is optional.
  4. array: the array itself. It is optional.

Example:

var numbers = [1, 2, 3];
var result = numbers.reduce((sum, val) => sum + val);
//6

Spread Operator

The spread operator ... expands the array into individual elements.

Spread Operator uses:

  1. It is used to merge arrays.
  2. It is used to copy arrays.
  3. It is useful in math functions

Examples:

//combine two arrays
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr1arr2 = [...arr1, ...arr2]; //[1, 2, 3, 4, 5, 6]

//copying an array
var arr3 = [1, 2];
var arr4 = [...arr3]; // [1, 2]

//in math functions
var arr5 = [5, 6, 7];
var arr5Min = Math.min(...arr5); //5
var arr5Max = Math.max(...arr5); //7

Some useful array methods

isArray()

Array.isArray(arr) returns true if arr is an array. Otherwise; it returns false.

Example:

var numbers = [1, 2, 3];
var result = Array.isArray(numbers); //true

reverse()

arr.reverse() returns the reversed array of arr. arr.reverse() does change the original array.

Example:

var numbers = [1, 2, 3];
numbers.reverse(); //[3, 2, 1]

sort()

arr.sort() returns the sorted array. arr.sort() does change the original array.

Example:

var numbers = [5, 7, 4, 1];
numbers.sort(); //[1, 4, 5, 7]