Array Basics and Methods0%
Array Basics and Methods
Beginner12 min read•Updated: Jul 11, 2026
Array Basics and Methods in JavaScript
An Array is an ordered, zero-indexed list of values. Arrays in JavaScript are dynamic: they can grow or shrink in size and hold any mixture of data types (strings, numbers, objects, even other arrays).
1. Creating and Accessing Arrays
JavaScript
// Array literal syntax (Standard):
const fruits = ["Apple", "Banana", "Mango", "Orange"];
// Accessing elements (Zero-indexed):
console.log(fruits[0]); // "Apple"
console.log(fruits[2]); // "Mango"
// Array length:
console.log(fruits.length); // 4
// Modern .at() method for negative indexing:
console.log(fruits.at(-1)); // "Orange" (Last element!)
2. Mutating Arrays: Add & Remove Elements
Git, games, and web forms frequently add and remove list items. JavaScript provides four primary stack/queue methods:
Output
unshift() [Add to Front] push() [Add to End]
\ /
[ Item 1 , Item 2 , Item 3 ]
/ \
shift() [Remove Front] pop() [Remove End]
Methods Summary:
JavaScript
const tasks = ["Study HTML", "Learn CSS"];
// 1. push() - Adds one or more elements to the END (Returns new length)
tasks.push("Master JS");
console.log(tasks); // ["Study HTML", "Learn CSS", "Master JS"]
// 2. pop() - Removes and returns the LAST element
const removedLast = tasks.pop();
console.log(removedLast); // "Master JS"
// 3. unshift() - Adds one or more elements to the BEGINNING
tasks.unshift("Morning Yoga");
console.log(tasks); // ["Morning Yoga", "Study HTML", "Learn CSS"]
// 4. shift() - Removes and returns the FIRST element
const removedFirst = tasks.shift();
console.log(removedFirst); // "Morning Yoga"
3. Searching in Arrays
A. .includes()
Checks if an item exists; returns true or false:
JavaScript
const colors = ["red", "green", "blue"];
console.log(colors.includes("green")); // true
console.log(colors.includes("yellow"));// false
B. .indexOf()
Returns index of item, or -1 if not found:
JavaScript
console.log(colors.indexOf("blue")); // 2
console.log(colors.indexOf("purple")); // -1
4. Subarrays: .slice() vs. .splice() (Crucial Difference!)
| Method | Mutates Original Array? | Purpose |
|---|---|---|
.slice(start, end) | NO (Pure) | Extracts a shallow copy of a portion of the array |
.splice(start, deleteCount, ...items) | YES (Mutates) | Deletes, replaces, or inserts items in place! |
JavaScript
const letters = ["A", "B", "C", "D", "E"];
// .slice does NOT change original:
const sub = letters.slice(1, 4);
console.log(sub); // ["B", "C", "D"]
console.log(letters); // ["A", "B", "C", "D", "E"] (Intact!)
// .splice DELETES items from original:
// Remove 2 items starting from index 1, and insert "X":
letters.splice(1, 2, "X");
console.log(letters); // ["A", "X", "D", "E"] (Mutated!)
5. Joining Arrays into Strings: .join()
JavaScript
const breadcrumbs = ["Home", "Courses", "JavaScript"];
console.log(breadcrumbs.join(" > ")); // "Home > Courses > JavaScript"
Interactive Quiz
Practice Quiz
Question 1
What does
arr.push("item") do?Question 2
What does
arr.shift() do?Question 3
What is the fundamental difference between
arr.slice() and arr.splice()?Question 4
If
const arr = ["A", "B", "C"], what does arr.indexOf("D") return?Question 5
How do you concatenate all elements of
["2026", "09", "15"] with hyphens into a string "2026-09-15"?Next Lesson
Object Basics and Properties
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
| Previous Lesson | Next Lesson |
|---|---|
| Arrow Functions (Basic) | Object Basics and Properties |
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.