Below are some of the most commonly used JavaScript array methods. It’s helpful to understand what each method returns and whether the method modifies the original array.
myArray.push(); adds new element to end of array:
|
1 2 3 4 5 |
var arr = ["a", "b", "c"]; arr.push("d")); console.log(arr); // ["a", "b", "c", "d"] (modifies the original array) |
myArray.pop(); removes last element in array and returns that element:
|
1 2 3 4 5 |
var arr = ["a", "b", "c", "d"]; console.log(arr.pop()); // d console.log(arr); // ["a", "b", "c"] (modifies the original array) |
myArray.concat(); concatenates two arrays:
|
1 2 3 4 5 6 7 8 9 |
var arrOne = ["a", "b"]; var arrTwo = ["c", "d"]; console.log(arrOne.concat(arrTwo)); // ["a", "b", "c", "d"] console.log(arrOne); // ["a", "b"] (does not modify original array) console.log(arrTwo); // ["c", "d"] (does not modify original array) |
myArray.join(); joins all elements of array to create a string:
|
1 2 3 4 5 |
var arr = ["a", "b", "c", "d"]; console.log(arr.join("")); // abcd console.log(arr); // ["a", "b", "c", "d"] (does not modify original array) |
myArray.reverse(); reverses the elements in an array:
|
1 2 3 4 5 |
var arr = ["a", "b", "c", "d"]; console.log(arr.reverse()); // ["d", "c", "b", "a"] console.log(arr); // ["d", "c", "b", "a"] (modifies the original array) |
myArray.shift(); removes the first element in array and returns the last element:
|
1 2 3 4 5 |
var arr = ["a", "b", "c"]; console.log(arr.shift()); // a (removes and returns the first element) console.log(arr); // ["b", "c"] (modifies the original array) |
myArray.unshift(); adds new elements to beginning of array and returns the length of the modified array:
|
1 2 3 4 5 |
var arr = ["a", "b", "c"]; console.log(arr.unshift("d")); // 4 (retuns the number of elements after item added) console.log(arr); // ["d", "a", "b", "c"] (modifies the original array) |
myArray.sort(); sorts an array:
|
1 2 3 4 5 |
var arr = ["d", "b", "c", "a"]; console.log(arr.sort()); // ["a", "b", "c", "d"] (retuns sorted array) console.log(arr); // ["a", "b", "c", "d"] (modifies the original array) |
myArray.slice(); selects part of an array and returns a new array. The original array remains unchanged. .slice() accepts two arguments: (1) start and (2) end-1. For example:
|
1 2 3 4 5 |
var arr = ["a", "b", "c"]; console.log(arr.slice(1,2)); // ["b"] console.log(arr); // ["a", "b", "c"] (does not modify original array) |
myArray.splice(); adds or removes elements from array and returns a new array. The original array is modified. .splice() takes at least two arguments: (1) start and (2) number of items to count from starting point. If the second argument is set to 0, no items will be removed. Items can also be added to the array by including them as additional arguments. For example:
|
1 2 3 4 5 6 7 8 9 10 11 |
var arr = ["a", "b", "c"]; console.log(arr.splice(1,2)); // ["b", "c"] (returns what was removed) console.log(arr); // ["a"] (modifies the original array) var fruitArr = ["apple", "orange", "banana"]; console.log(fruitArr.splice(1,0,"peach")); // [] (returns empty array because nothing was removed) console.log(fruitArr); // ["apple", "peach", "orange", "banana"] (modifies original array by adding "peach" in the 1 position) |
Koren Leslie Cohen
Latest posts by Koren Leslie Cohen (see all)
- How to Transition into Product Management - December 26, 2017
- What I’ve Learned in My First Few Months as a Product Manager - October 14, 2015
- Front End Engineer Interview Questions - July 20, 2015
Richard Steinberg says
March 28, 2015 at 12:25 amThanks for this post. It’s very informative.
What did you use to create this website? WordPress?
Btw, how did you learn Git? I don’t have much free time ( My main profession is not CS, I’m pursuing it on the side), so I want a good and quick tutorial.
Your website is beautiful. Love it!
Koren Leslie Cohen says
March 30, 2015 at 5:19 pmThanks!
Site is built on self-hosted WordPress.
I have a couple posts on Git that may be helpful – http://www.korenlc.com/category/git/
Paul Jacobson says
September 13, 2017 at 5:20 amThanks for this! I’m learning JavaScript arrays at the moment and this is a terrific reference.
Koren Leslie Cohen says
October 20, 2017 at 11:55 amHappy to help!
Alfredo Rafael says
February 5, 2018 at 3:30 pmAwesome post…