Skip to content
Laviyx Learn

Try

JavaScript course menu

JavaScript Arrays: Creating, Accessing, Adding and Removing Items

Learn JavaScript arrays: creating arrays, indexes and length, at(), adding and removing with push, pop, unshift and shift, splice, slice, concat and spread, includes and indexOf, nested arrays, copying arrays, and Array.from.

Beginner9 min readUpdated
On this page

An array is an ordered list of values. Arrays hold shopping carts, search results, rows of data, messages in a chat: any time you have several things of the same kind.

Creating arrays#

JavaScript
const fruits = ["mango", "banana", "guava"];
const marks = [92, 85, 78];
const mixed = ["Asha", 21, true, null];
const empty = [];

console.log(fruits);
console.log(marks.length, empty.length);
Output
[ 'mango', 'banana', 'guava' ]
3 0

Arrays can hold any mix of types, but in practice each array usually holds one kind of thing.

Reading items#

Items are numbered from 0:

JavaScript
const fruits = ["mango", "banana", "guava"];

console.log(fruits[0]);
console.log(fruits[2]);
console.log(fruits[fruits.length - 1]);
console.log(fruits.at(-1));
console.log(fruits[10]);
Output
mango
guava
guava
guava
undefined

at(-1) reads from the end. Reading past the end gives undefined, not an error.

Changing items#

JavaScript
const fruits = ["mango", "banana", "guava"];
fruits[1] = "papaya";
console.log(fruits);
Output
[ 'mango', 'papaya', 'guava' ]

const stops you reassigning the variable, not changing the array's contents (Variables).

Adding and removing at the ends#

JavaScript
const queue = ["Asha", "Ravi"];

queue.push("Meera");          // add to the end
queue.unshift("Kiran");       // add to the start
console.log(queue);

const last = queue.pop();     // remove from the end
const first = queue.shift();  // remove from the start
console.log(last, first);
console.log(queue);
Output
[ 'Kiran', 'Asha', 'Ravi', 'Meera' ]
Meera Kiran
[ 'Asha', 'Ravi' ]
MethodDoesReturns
push(x)Adds to the endNew length
pop()Removes the last itemThe removed item
unshift(x)Adds to the startNew length
shift()Removes the first itemThe removed item

These four change the original array.

splice: remove or insert anywhere#

splice(start, deleteCount, ...itemsToInsert) changes the array in place:

JavaScript
const days = ["Mon", "Tue", "Wed", "Thu", "Fri"];

const removed = days.splice(1, 2);      // remove 2 items from index 1
console.log(removed, days);

days.splice(1, 0, "Holiday");           // insert at index 1, remove nothing
console.log(days);
Output
[ 'Tue', 'Wed' ] [ 'Mon', 'Thu', 'Fri' ]
[ 'Mon', 'Holiday', 'Thu', 'Fri' ]

slice: copy part of an array#

slice(start, end) returns a new array from start up to but not including end, without changing the original:

JavaScript
const letters = ["a", "b", "c", "d", "e"];
console.log(letters.slice(1, 3));
console.log(letters.slice(-2));
console.log(letters);
Output
[ 'b', 'c' ]
[ 'd', 'e' ]
[ 'a', 'b', 'c', 'd', 'e' ]

Remember: splice changes the array, slice does not.

Joining arrays#

JavaScript
const veg = ["carrot", "beans"];
const fruit = ["apple", "kiwi"];

console.log(veg.concat(fruit));
console.log([...veg, "onion", ...fruit]);
Output
[ 'carrot', 'beans', 'apple', 'kiwi' ]
[ 'carrot', 'beans', 'onion', 'apple', 'kiwi' ]

The spread syntax ...array expands an array's items in place; it is the most common way to combine and copy arrays.

Searching#

JavaScript
const tags = ["html", "css", "javascript", "css"];

console.log(tags.includes("css"));
console.log(tags.indexOf("css"));
console.log(tags.lastIndexOf("css"));
console.log(tags.indexOf("python"));
Output
true
1
3
-1

To search by a condition, such as "the first price over 100", use find and findIndex (Array Methods).

Copying arrays#

Assigning an array to another variable does not copy it; both names point to the same array:

JavaScript
const original = [1, 2, 3];
const sameArray = original;
const copy = [...original];

sameArray.push(4);
console.log(original);
console.log(copy);
Output
[ 1, 2, 3, 4 ]
[ 1, 2, 3 ]

[...original] (or original.slice()) makes a shallow copy: a new array with the same items. If the items are objects, both arrays still share those objects. For a full deep copy of plain data, use structuredClone(value).

Nested arrays#

Arrays can contain arrays, which is useful for grids and tables:

JavaScript
const board = [
  ["X", "O", "X"],
  ["O", "X", "O"],
  ["O", "X", "X"],
];

console.log(board[1][2]);
for (const row of board) {
  console.log(row.join(" | "));
}
console.log([[1, 2], [3, [4, 5]]].flat(Infinity));
Output
O
X | O | X
O | X | O
O | X | X
[ 1, 2, 3, 4, 5 ]

flat() flattens nested arrays (by one level by default, or completely with Infinity).

Creating arrays from other things#

JavaScript
console.log(Array.from("hello"));
console.log(Array.from({ length: 5 }, (_, i) => i * 10));
console.log(new Array(3).fill(0));
Output
[ 'h', 'e', 'l', 'l', 'o' ]
[ 0, 10, 20, 30, 40 ]
[ 0, 0, 0 ]

Practice#

Practice exercise

Start with const playlist = ["Song A", "Song B", "Song C"]. Add "Song D" at the end, put "Intro" at the start, remove "Song B", and print the playlist and how many songs it has. Then make a copy containing only the first two songs, without changing the original.

Show solution
JavaScript
const playlist = ["Song A", "Song B", "Song C"];

playlist.push("Song D");
playlist.unshift("Intro");
playlist.splice(playlist.indexOf("Song B"), 1);

console.log(playlist, playlist.length);

const firstTwo = playlist.slice(0, 2);
console.log(firstTwo);
console.log(playlist.length);
Output
[ 'Intro', 'Song A', 'Song C', 'Song D' ] 4
[ 'Intro', 'Song A' ]
4

Key takeaway#

Finished this lesson?

Related lessons

JavaScriptJavaScript Array Methods: map, filter, reduce, find, some, every, sort and MoreMaster JavaScript array methods with examples: forEach, map, filter, reduce, find and findIndex, some and every, sort with compare functions, toSorted and other non-mutating methods, flatMap, and chaining methods to transform data.Beginner11 min readJavaScriptJavaScript for...of and for...in Loops: Arrays, Strings and ObjectsLearn the difference between for...of and for...in in JavaScript: looping over array values and string characters with for...of, getting indexes with entries(), looping over object keys with for...in or Object.entries, and why not to use for...in on arrays.Beginner6 min readJavaScriptJavaScript Destructuring and the Spread OperatorLearn JavaScript destructuring and spread: unpacking arrays and objects into variables, default values, renaming, nested destructuring, rest elements, swapping variables, destructuring function parameters, and spreading arrays and objects to copy and merge.Beginner8 min read