Loading...

JavaScript Array Methods

The color list from the previous page kept its count when you overwrote a slot. This page uses a grocery cart, and a call is allowed to change how many items are in it.

The count is allowed to move

push, pop, unshift, shift, and splice edit the array you already hold. String methods handed back fresh text and left the old characters in place. A function you stored on an object was your own tool, not one of these list calls.

Five calls on one card

Keep the card next to the demos. Quite often the value that comes back is not the cart.

📊 Five array calls

Call Where it acts What comes back length
push the end the new length grows by the number of items you passed
pop the end the removed item drops by one
unshift the front the new length grows by the number of items you passed
shift the front the removed item drops by one
splice an index you choose a small array of removed items drops by the delete count

Calls that add report a number, the new length. Calls that take from an end report the item that left. splice reports a tiny array even when a single slot was deleted, so the word itself sits at index 0 of that result.

Tea at the end

The cart starts as bread, milk, and eggs. push places tea after eggs and reports how many slots exist now.

Add tea at the end

javascript 
let cart = ["bread", "milk", "eggs"];
let n = cart.push("tea");
console.log(n);
console.log(cart[3]);
console.log(cart.length);

n is 4. That number is the new length, not the word tea. Index 3 holds tea, and length agrees because one item was appended. Two arguments would grow the cart by two. This page passes one argument so the number stays easy to read.

Take the last item

javascript 
let cart = ["bread", "milk", "eggs"];
let gone = cart.pop();
console.log(gone);
console.log(cart.length);

The last item leaves

pop lifts eggs off the end and hands that string back. length falls to 2. The cart is bread, then milk. The call does not hand back the new length. An empty cart would hand back undefined, and these demos never start empty.

Put tea in front

javascript 
let cart = ["bread", "milk", "eggs"];
let n = cart.unshift("tea");
console.log(n);
console.log(cart[0]);
console.log(cart[1]);

A new front

unshift also returns 4, the new length. Index 0 is now tea. Bread slid to index 1. Nothing was overwritten. Every older item moved one step toward the end.

Take the front item

javascript 
let cart = ["bread", "milk", "eggs"];
let gone = cart.shift();
console.log(gone);
console.log(cart[0]);
console.log(cart.length);

The front leaves

shift returns bread, the item that left, not a length. Index 0 is milk afterward. length is 2. Eggs is still last. It simply sits at index 1 now.

Cut the middle slot

javascript 
let cart = ["bread", "milk", "eggs"];
let removed = cart.splice(1, 1);
console.log(removed[0]);
console.log(cart.length);
console.log(cart[1]);

Cut one slot you chose

The first argument is the start index. The second is how many slots to delete. Milk leaves, and removed is a one-item array, so removed[0] is milk rather than the call itself being the string milk. length is 2. Index 1 is eggs, because bread stayed at 0 and eggs closed the gap. Passing 0 as the delete count would insert without deleting. That form can wait.

The page prints the new length

Push tea, then write length into the paragraph. The line should be the count, not the shopping list.

Page demo — length after push

html 
<!DOCTYPE html>
<html>
<head>
<title>array-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let cart = ["bread", "milk", "eggs"];
cart.push("tea");
let box = document.getElementById("line");
box.textContent = cart.length;
</script>
</body>
</html>

The paragraph shows 4. Swap the pushed string from tea to jam and refresh. The line stays 4, because you still added one item. The word changed. The count did not. Bread, milk, and eggs remain in front of whatever you pushed.

Try it on a fresh cart

  1. Push tea onto bread, milk, and eggs, then read the returned number and index 3.
  2. Pop once and read both the removed word and the new length.
  3. Unshift tea, then read index 0 and index 1.
  4. Shift once and read the removed word plus the new index 0.
  5. Splice index 1, deleting one slot, then read removed[0] and the length.
  6. On the page, push tea, refresh, and read the line. Change tea to jam and refresh again.

Misses that cost a mark

  • Writing cart[1] = "tea" when you meant to add a slot
  • Forgetting the parentheses on push or pop
  • Treating the value from pop as the new length
  • Expecting splice to return the bare string milk
  • Assuming index 0 stays bread after unshift
  • Reaching for a walk over every item, or a search by value, on this page

What to keep

  • These calls edit the same array
  • push and unshift return the new length
  • pop and shift return the item that left
  • splice returns a small array of removed items
  • The paragraph can show the length after push
  • Next you walk every item. Searching by value comes after that

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 39 of 41
Javascript Tutorial