JavaScript Basic Array Methods — Complete Guide

Phase 4 — Arrays

Module 10.1 — Basic Array Methods

Arrays are one of the most frequently used data structures in JavaScript, and array methods are the tools that make them powerful. Whether you're building a React application, a Node.js API, an e-commerce cart, or processing API data, you'll use these methods almost every day.

In this module, you'll learn the ten foundational array methods that every JavaScript developer must master.

Overview of Basic Array Methods

push()

What is push()?

The push() method adds one or more elements to the end of an array and returns the new array length.

Syntax

javascriptCopy
1array.push(element1, element2, ...);

Example

javascriptCopy
1const fruits = ["Apple", "Banana"];
2
3fruits.push("Orange");
4
5console.log(fruits);

Output

textCopy
1["Apple", "Banana", "Orange"]

Multiple Elements

javascriptCopy
1fruits.push("Mango", "Kiwi");

Result

textCopy
1["Apple","Banana","Orange","Mango","Kiwi"]

Return Value

javascriptCopy
1const length = fruits.push("Grapes");
2
3console.log(length);

Output

textCopy
16

Time Complexity

textCopy
1O(1)

pop()

What is pop()?

Removes the last element from an array.

Syntax

javascriptCopy
1array.pop();

Example

javascriptCopy
1const numbers = [10,20,30];
2
3const removed = numbers.pop();
4
5console.log(numbers);
6console.log(removed);

Output

textCopy
1[10,20]
230

If array is empty

javascriptCopy
1[].pop();

Returns

textCopy
1undefined

Time Complexity

textCopy
1O(1)

shift()

Removes the first element.

javascriptCopy
1const colors = [
2    "Red",
3    "Green",
4    "Blue"
5];
6
7const first = colors.shift();
8
9console.log(first);
10console.log(colors);

Output

textCopy
1Red
2
3["Green","Blue"]

Time Complexity

textCopy
1O(n)

Because every remaining element shifts left.

unshift()

Adds elements at the beginning.

javascriptCopy
1const colors = [
2    "Green",
3    "Blue"
4];
5
6colors.unshift("Red");
7
8console.log(colors);

Output

textCopy
1["Red","Green","Blue"]

Multiple Elements

javascriptCopy
1colors.unshift("Black","White");

Output

textCopy
1["Black","White","Red","Green","Blue"]

Time Complexity

textCopy
1O(n)

splice()

One of the most powerful JavaScript array methods.

Used to

• Remove elements
• Insert elements
• Replace elements

Syntax

javascriptCopy
1array.splice(start, deleteCount, item1, item2);

Remove Elements

javascriptCopy
1const numbers = [
2    1,2,3,4,5
3];
4
5numbers.splice(2,1);
6
7console.log(numbers);

Output

textCopy
1[1,2,4,5]

Add Elements

javascriptCopy
1const numbers = [
2    1,2,5
3];
4
5numbers.splice(2,0,3,4);
6
7console.log(numbers);

Output

textCopy
1[1,2,3,4,5]

Replace Elements

javascriptCopy
1const numbers = [
2    1,2,3
3];
4
5numbers.splice(1,1,100);
6
7console.log(numbers);

Output

textCopy
1[1,100,3]

Time Complexity

textCopy
1O(n)

slice()

Creates a new array without changing the original.

Syntax

javascriptCopy
1array.slice(start,end);

Example

javascriptCopy
1const numbers = [
2    10,20,30,40,50
3];
4
5const result = numbers.slice(1,4);
6
7console.log(result);

Output

textCopy
1[20,30,40]

Original array

textCopy
1[10,20,30,40,50]

Negative Index

javascriptCopy
1numbers.slice(-2);

Output

textCopy
1[40,50]

Time Complexity

textCopy
1O(n)

splice() vs slice()

concat()

Combines arrays.

javascriptCopy
1const frontend = [
2    "HTML",
3    "CSS"
4];
5
6const backend = [
7    "Node",
8    "MongoDB"
9];
10
11const fullstack = frontend.concat(backend);
12
13console.log(fullstack);

Output

textCopy
1["HTML","CSS","Node","MongoDB"]

Three Arrays

javascriptCopy
1a.concat(b,c);

Original arrays remain unchanged.

join()

Converts an array into a string.

javascriptCopy
1const words = [
2    "Learn",
3    "JavaScript",
4    "Today"
5];
6
7console.log(words.join(" "));

Output

textCopy
1Learn JavaScript Today

Comma

javascriptCopy
1words.join(",");

Output

textCopy
1Learn,JavaScript,Today

Hyphen

javascriptCopy
1words.join("-");

Output

textCopy
1Learn-JavaScript-Today

reverse()

Reverses an array.

javascriptCopy
1const numbers = [
2    1,2,3,4
3];
4
5numbers.reverse();
6
7console.log(numbers);

Output

textCopy
1[4,3,2,1]

⚠️ reverse() modifies the original array.

sort()

Sorts array elements.

Default behavior

javascriptCopy
1const numbers = [
2    100,
3    5,
4    20
5];
6
7numbers.sort();
8
9console.log(numbers);

Output

textCopy
1[100,20,5]

Why?

Because JavaScript sorts strings alphabetically by default.

Numeric Sort

Ascending

javascriptCopy
1numbers.sort((a,b)=>a-b);

Output

textCopy
1[5,20,100]

Descending

javascriptCopy
1numbers.sort((a,b)=>b-a);

Output

textCopy
1[100,20,5]

Sort Objects

javascriptCopy
1const students = [
2
3    {
4        name:"Rahul",
5        marks:70
6    },
7
8    {
9        name:"Ankit",
10        marks:95
11    }
12
13];
14
15students.sort(
16    (a,b)=>b.marks-a.marks
17);
18
19console.log(students);

Mutation Summary

Real-World Example — Shopping Cart

javascriptCopy
1const cart = [];
2
3cart.push("Laptop");
4cart.push("Mouse");
5cart.push("Keyboard");
6
7cart.pop();
8
9cart.unshift("Monitor");
10
11console.log(cart);

Output

textCopy
1["Monitor","Laptop","Mouse"]

Real-World Example — Student List

javascriptCopy
1const students = [
2    "Rahul",
3    "Priya",
4    "Amit"
5];
6
7students.splice(1,1,"Ankit");
8
9students.sort();
10
11console.log(students.join(", "));

Output

textCopy
1Amit, Ankit, Rahul

Performance Comparison

Common Mistakes

Using sort() Without a Compare Function

javascriptCopy
1[100,20,5].sort();

Wrong Output

textCopy
1[100,20,5]

Correct

javascriptCopy
1[100,20,5].sort((a,b)=>a-b);

Confusing slice() and splice()

javascriptCopy
1array.slice();

Does not modify the original array.

javascriptCopy
1array.splice();

Modifies the original array.

Forgetting That reverse() Mutates

javascriptCopy
1const reversed = numbers.reverse();

Both numbers and reversed reference the same reversed array.

Best Practices

• Use push() and pop() for stack-like operations.
• Use shift() and unshift() sparingly on large arrays because they are slower.
• Prefer slice() when you need a copy instead of modifying the original array.
• Always provide a compare function when sorting numbers or objects.
• Use concat() or the spread operator (...) to merge arrays without mutation.
• Use join() to generate CSV strings, URLs, file paths, or readable text.
• Be mindful that reverse(), sort(), and splice() modify the original array.

Mini Project — Task Manager

index.html

htmlCopy
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Task Manager</title>
5</head>
6<body>
7
8<h2>Task Manager</h2>
9
10<div id="tasks"></div>
11
12<script src="script.js"></script>
13
14</body>
15</html>

script.js

javascriptCopy
1const tasks = [
2    "Learn HTML",
3    "Learn CSS"
4];
5
6// Add Tasks
7tasks.push("Learn JavaScript");
8
9// Remove Last Task
10tasks.pop();
11
12// Add First Task
13tasks.unshift("Setup Environment");
14
15// Replace Task
16tasks.splice(1,1,"Master CSS");
17
18// Sort Tasks
19tasks.sort();
20
21// Display
22document.getElementById("tasks").innerHTML =
23tasks.join("<br>");

Summary

In this module, you learned:

• How to add elements using push() and unshift().
• How to remove elements using pop() and shift().
• How splice() can add, remove, and replace array elements.
• How slice() creates a new array without modifying the original.
• How concat() merges arrays.
• How join() converts arrays into strings.
• How reverse() changes the order of elements.
• How sort() works with strings, numbers, and objects.
• Which methods mutate the original array and which return new arrays.
• Time complexity and performance considerations for each method.

Next Module: Module 10.2 — Search & Access Array Methods, where you'll learn at(), includes(), indexOf(), lastIndexOf(), find(), findIndex(), findLast(), and findLastIndex() with practical examples and real-world use cases.