Techie BabajiLearn to Code. Build Real Skills.
JavaScript · Data Structures

Arrays

An array is an ordered list. Shopping lists, scores, users, messages — whenever you have “many of something”, you use an array.

Beginner 5 min Lesson 11 of 49 Runnable examples
Before you start:Loops
0/49 in JavaScript
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 27, 2026

Related tutorials

Interview questions

Learning objectives#

  • Create arrays and read items by index
  • Add and remove items at both ends
  • Search arrays with includes and indexOf
  • Copy parts of arrays with slice

Explanation#

Arrays use square brackets: ['red', 'green']. Items are numbered from 0, so the first item is colors[0].

length tells you how many items there are. at(-1) gets the last item.

push adds to the end, pop removes from the end; unshift adds to the start, shift removes from the start.

includes(x) answers “is it there?”, indexOf(x) answers “where?” (or -1). slice(start, end) copies a part without changing the original.

Code example: A colour list#

JavaScriptA colour list Runnable
const colors = ['red', 'green'];
colors.push('blue');
colors.unshift('black');
console.log(colors, colors.length);


console.log(colors[0], colors.at(-1));
console.log(colors.includes('green'), colors.indexOf('blue'));


const last = colors.pop();
console.log(last, colors);
console.log(colors.slice(1, 3));
Expected output
[ 'black', 'red', 'green', 'blue' ] 4
black blue
true 3
blue [ 'black', 'red', 'green' ]
[ 'red', 'green' ]
Opens this example in the full playground

Step-by-step explanation#

  1. push adds "blue" at the end; unshift adds "black" at the start.
  2. Index 0 is the first item; at(-1) is the last.
  3. "blue" is at index 3 (counting from 0).
  4. pop removes and returns the last item.
  5. slice(1, 3) copies indexes 1 and 2 — the end index is not included.

Real-world use case#

A to-do app stores tasks in an array: push to add, filter to remove, map to display.

Common mistakes#

Off-by-one errors

The last index is length - 1, not length. colors[colors.length] is undefined.

Confusing slice and splice

slice copies and leaves the original alone; splice removes or inserts items and changes the original.

Best practices#

  • Use const for arrays (you can still change their contents)
  • Use at(-1) for the last item
  • Use includes for yes/no checks
  • Prefer methods that return new arrays when working with React state

Remember this#

Arrays start counting at 0. Last index = length − 1.

push/pop work at the END (like a stack of plates). shift/unshift work at the START.

sLice = Look (copy). sPlice = sPlit and change.

Practice exercise#

Your task: Start with [10, 20, 30]. Add 40 at the end and 5 at the start, then print the array, its length and whether it includes 25.

Show solution
JavaScript Runnable
const nums = [10, 20, 30];
nums.push(40);
nums.unshift(5);
console.log(nums, nums.length, nums.includes(25)); // [ 5, 10, 20, 30, 40 ] 5 false
Opens this example in the full playground

Mini quiz#

Arrays quizPredict the output Question 1 of 2

What is printed?

const a = ['x', 'y', 'z'];
console.log(a[1], a.length);
Score so far: 0/0

Want more? Practise all JavaScript MCQs · JavaScript interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.