Flash cards
Review the key moves
What is the main idea behind JavaScript Array Methods?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ fruits = ["Banana", "Orange", "Apple", "Mango"];Put the learning moves in the order that makes the concept easiest to apply.
Basic Array Methods
| Array length Array toString () Array at() Array join() Array pop() Array push() Array shift() Array unshift() | Array isArray() Array delete() Array concat() Array copyWithin() Array flat() Array slice() Array splice() Array toSpliced() |
|---|
Complete JavaScript Array Reference
See Also
JavaScript Array Tutorial JavaScript Array Search Methods JavaScript Array Sort Methods JavaScript Array Iteration Methods
JavaScript Array Search Methods JavaScript Array Sort Methods JavaScript Array Iteration Methods
JavaScript Array Sort Methods JavaScript Array Iteration Methods
JavaScript Array Iteration Methods
JavaScript Array length
The length property returns the length (size) of an array:
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;The length property can also be used to set the length of an array:
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length = 2;JavaScript Array toString()
The toString() method returns the elements of an array as a comma separated string.
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let myList = fruits.toString();Every JavaScript object has a toString() method.
The toString() method is used internally by JavaScript when an object needs to be displayed as a text (like in HTML), or when an object needs to be used as a string.
JavaScript Array at()
Examples
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);ES2022 introduced the array method at()
The at() method returns an indexed element from an array.
The at() method returns the same as [] .
Browser Support
at() is an ECMAScript 2022 feature.
JavaScript 2022 is supported in all modern browsers since March 2022 :
| Chrome 92 | Edge 92 | Firefox 90 | Safari 15.4 | Opera 78 |
|---|---|---|---|---|
| Apr 2021 | Jul 2021 | Jul 2021 | Mar 2022 | Aug 2021 |
Many languages allow negative bracket indexing like [-1] to access elements from the end of an object / array / string.
This is not possible in JavaScript, because [] is used for accessing both arrays and objects. obj[-1] refers to the value of key -1, not to the last property of the object.
The at() method was introduced in ES2022 to solve this problem.
JavaScript Array join()
The join() method also joins all array elements into a string.
It behaves just like toString() , but in addition you can specify the separator:
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");Expected output
Banana * Orange * Apple * Mango
Popping and Pushing
When you work with arrays, it is easy to remove elements and add new elements.
This is what popping and pushing is:
Popping items out of an array, or pushing items into an array.
JavaScript Array pop()
The pop() method removes the last element from an array:
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();The pop() method returns the value that was "popped out":
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();JavaScript Array push()
The push() method adds a new element to an array (at the end):
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");The push() method returns the new array length:
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");Shifting Elements
Shifting is equivalent to popping, but working on the first element instead of the last.
JavaScript Array shift()
The shift() method removes the first array element and "shifts" all other elements to a lower index.
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();The shift() method returns the value that was "shifted out":
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();JavaScript Array unshift()
The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");The unshift() method returns the new array length:
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");Changing Elements
Array elements are accessed using their index number :
Array indexes start with 0
[0] is the first array element [1] is the second [2] is the third ...
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";JavaScript Array length
The length property provides an easy way to append a new element to an array:
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";Array.isArray()
ECMAScript 5 (JavaScript 2009) added the new method Array.isArray() to JavaScript:
Array.isArray(fruits);Warning !
Using delete() leaves undefined holes in the array.
Use pop() or shift() instead.
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];Merging Arrays (Concatenating)
In programming languages, concatenation means joining strings end-to-end.
Concatenation "snow" and "ball" gives "snowball".
Concatenating arrays means joining arrays end-to-end.
JavaScript Array concat()
The concat() method creates a new array by merging (concatenating) existing arrays:
Example (Merging Two Arrays)
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);The concat() method does not change the existing arrays. It always returns a new array.
The concat() method can take any number of array arguments.
Example (Merging Three Arrays)
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);The concat() method can also take strings as arguments:
Example (Merging an Array with Values)
const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");Array copyWithin()
The copyWithin() method copies array elements to another position in an array:
Examples
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);The copyWithin() method overwrites the existing values.
The copyWithin() method does not add items to the array.
The copyWithin() method does not change the length of the array.
Flattening an Array
Flattening an array is the process of reducing the dimensionality of an array.
Flattening is useful when you want to convert a multi-dimensional array into a one-dimensional array.
JavaScript Array flat()
ES2019 Introduced the Array flat() method.
The flat() method creates a new array with sub-array elements concatenated to a specified depth.
Example
const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();Browser Support
flat() is an ECMAScript 2019 feature.
ES2019 is supported in all modern browsers since January 2020 :
| Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
|---|---|---|---|---|
| Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |
JavaScript Array flatMap()
ES2019 added the Array flatMap() method to JavaScript.
The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.
Example
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap(x => [x, x * 10]);Browser Support
flatMap() is an ECMAScript 2019 feature.
ES2019 is supported in all modern browsers since January 2020 :
| Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
|---|---|---|---|---|
| Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |