JavaScript Arrays Methods – Part 1

What is an Array?

An Array is a special object in JavaScript used to store multiple values in a single variable.

Instead of creating separate variables,

let student1 = "John";
let student2 = "David";
let student3 = "Alex";

Enter fullscreen mode Exit fullscreen mode

we can use an array:

let students = ["John", "David", "Alex"];

Enter fullscreen mode Exit fullscreen mode

Each value inside the array is called an element, and every element has an index starting from 0.

Index :   0        1        2
        -------------------------
Array : | John | David | Alex |
        -------------------------

Enter fullscreen mode Exit fullscreen mode

1. Array length

Definition

The length property returns the total number of elements present in an array.

It is not a function. It is a property of an array object.

It is also writable, meaning you can change the length to increase or decrease the array size.

Syntax

array.length

Enter fullscreen mode Exit fullscreen mode

To modify the array length:

array.length = newLength;

Enter fullscreen mode Exit fullscreen mode

Parameters

None.

Returns

Returns a number representing the total number of elements in the array.

Internal Working

Consider this array:

let fruits = ["Apple", "Orange", "Mango"];

Enter fullscreen mode Exit fullscreen mode

Memory representation:

Index

0 → Apple
1 → Orange
2 → Mango

length = 3

Enter fullscreen mode Exit fullscreen mode

When JavaScript creates the array, it internally stores a special property:

{
  0: "Apple",
  1: "Orange",
  2: "Mango",
  length: 3
}

Enter fullscreen mode Exit fullscreen mode

Whenever you access:

fruits.length

Enter fullscreen mode Exit fullscreen mode

JavaScript simply returns the value stored in the length property.

It does not count the elements every time.

This makes length very fast.

Example 1

let fruits = ["Apple", "Orange", "Banana"];

console.log(fruits.length);

Enter fullscreen mode Exit fullscreen mode

Output

3

Enter fullscreen mode Exit fullscreen mode

Example 2 – Updating Length

let numbers = [10,20,30,40];

numbers.length = 2;

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output

[10,20]

Enter fullscreen mode Exit fullscreen mode

JavaScript removes the remaining elements.

Example 3 – Increasing Length

let colors = ["Red","Blue"];

colors.length = 5;

console.log(colors);

Enter fullscreen mode Exit fullscreen mode

Output

["Red","Blue", empty × 3]

Enter fullscreen mode Exit fullscreen mode

The new positions become empty slots.

Real-Time Example

Imagine an E-commerce Shopping Cart.

let cart = ["Laptop", "Mouse", "Keyboard"];

console.log("Total Items:", cart.length);

Enter fullscreen mode Exit fullscreen mode

Output

Total Items: 3

Enter fullscreen mode Exit fullscreen mode

Amazon and Flipkart use similar logic to display:

Cart (3 Items)

Enter fullscreen mode Exit fullscreen mode

Common Mistake

let arr = [1,2,3];

console.log(arr.length());

Enter fullscreen mode Exit fullscreen mode

Output

TypeError

Enter fullscreen mode Exit fullscreen mode

Why?

Because length is a property, not a method.

Correct:

arr.length

Enter fullscreen mode Exit fullscreen mode

Best Practices

✔ Use length inside loops.

for(let i=0;i<arr.length;i++){
    console.log(arr[i]);
}

Enter fullscreen mode Exit fullscreen mode

2. Array toString()

Definition

The toString() method converts an array into a comma-separated string.

The original array is not modified.

Syntax

array.toString()

Enter fullscreen mode Exit fullscreen mode

Parameters

None.

Returns

Returns a string.

Internal Working

Suppose

let fruits = ["Apple","Orange","Banana"];

Enter fullscreen mode Exit fullscreen mode

Internally JavaScript joins every element using commas.

Apple + "," +
Orange + "," +
Banana

Enter fullscreen mode Exit fullscreen mode

Result

Apple,Orange,Banana

Enter fullscreen mode Exit fullscreen mode

Example

let fruits = ["Apple","Orange","Banana"];

let result = fruits.toString();

console.log(result);

Enter fullscreen mode Exit fullscreen mode

Output

Apple,Orange,Banana

Enter fullscreen mode Exit fullscreen mode

Example with Numbers

let numbers = [10,20,30];

console.log(numbers.toString());

Enter fullscreen mode Exit fullscreen mode

Output

10,20,30

Enter fullscreen mode Exit fullscreen mode

Real-Time Example

Sending array data through an API.

let selectedItems = ["Laptop","Mouse","Keyboard"];

let apiData = selectedItems.toString();

console.log(apiData);

Enter fullscreen mode Exit fullscreen mode

Output

Laptop,Mouse,Keyboard

Enter fullscreen mode Exit fullscreen mode

Common Mistake

Many developers think it returns an array.

Wrong.

let result = [1,2,3].toString();

console.log(typeof result);

Enter fullscreen mode Exit fullscreen mode

Output

string

Enter fullscreen mode Exit fullscreen mode

Best Practice

Use join() when you need a custom separator.

3. Array at()

Definition

The at() method returns the element at a specified index.

Unlike bracket notation ([]), it also supports negative indexing.

Syntax

array.at(index)

Enter fullscreen mode Exit fullscreen mode

Parameters

Parameter Description index Position of element

Returns

Returns the element.

Returns undefined if the index is invalid.

Internal Working

Example

let arr = ["A","B","C","D"];

Enter fullscreen mode Exit fullscreen mode

0 → A
1 → B
2 → C
3 → D

Enter fullscreen mode Exit fullscreen mode

When

arr.at(2)

Enter fullscreen mode Exit fullscreen mode

JavaScript returns

C

Enter fullscreen mode Exit fullscreen mode

When

arr.at(-1)

Enter fullscreen mode Exit fullscreen mode

JavaScript converts

length + (-1)

4 + (-1)

=3

Enter fullscreen mode Exit fullscreen mode

Returns

D

Enter fullscreen mode Exit fullscreen mode

Example

let fruits = ["Apple","Orange","Banana"];

console.log(fruits.at(1));

Enter fullscreen mode Exit fullscreen mode

Output

Orange

Enter fullscreen mode Exit fullscreen mode

Negative Index

let fruits = ["Apple","Orange","Banana"];

console.log(fruits.at(-1));

Enter fullscreen mode Exit fullscreen mode

Output

Banana

Enter fullscreen mode Exit fullscreen mode

Real-Time Example

Latest Notification

let notifications = [
    "Order Placed",
    "Order Shipped",
    "Delivered"
];

console.log(notifications.at(-1));

Enter fullscreen mode Exit fullscreen mode

Output

Delivered

Enter fullscreen mode Exit fullscreen mode

Common Mistake

arr[-1]

Enter fullscreen mode Exit fullscreen mode

Output

undefined

Enter fullscreen mode Exit fullscreen mode

Correct

arr.at(-1)

Enter fullscreen mode Exit fullscreen mode

4. Array join()

Definition

The join() method combines all array elements into a single string using a specified separator.

Unlike toString(), you can choose the separator.

The original array is not modified.

Syntax

array.join(separator)

Enter fullscreen mode Exit fullscreen mode

Parameters

Parameter Description separator (optional) String inserted between elements. Default is ",".

Returns

A string containing all array elements joined together.

Internal Working

let fruits = ["Apple", "Orange", "Banana"];

Enter fullscreen mode Exit fullscreen mode

If you call:

fruits.join(" - ");

Enter fullscreen mode Exit fullscreen mode

JavaScript internally performs:

"Apple" + " - " +
"Orange" + " - " +
"Banana"

Enter fullscreen mode Exit fullscreen mode

Result:

Apple - Orange - Banana

Enter fullscreen mode Exit fullscreen mode

Example 1

let fruits = ["Apple", "Orange", "Banana"];

console.log(fruits.join());

Enter fullscreen mode Exit fullscreen mode

Output

Apple,Orange,Banana

Enter fullscreen mode Exit fullscreen mode

Example 2

let fruits = ["Apple", "Orange", "Banana"];

console.log(fruits.join(" | "));

Enter fullscreen mode Exit fullscreen mode

Output

Apple | Orange | Banana

Enter fullscreen mode Exit fullscreen mode

Real-Time Example

Suppose a user selects multiple skills in a job portal.

let skills = ["JavaScript", "React", "Node.js"];

let profile = skills.join(", ");

console.log(profile);

Enter fullscreen mode Exit fullscreen mode

Output

JavaScript, React, Node.js

Enter fullscreen mode Exit fullscreen mode

This is commonly used to display selected skills on a profile page.

Common Mistake

Developers sometimes expect join() to return an array.

let result = ["A", "B"].join("-");

console.log(typeof result);

Enter fullscreen mode Exit fullscreen mode

Output

string

Enter fullscreen mode Exit fullscreen mode

What is the difference between join() and toString()?

join() toString() Allows a custom separator Always uses a comma Returns a string Returns a string Does not modify the array Does not modify the array

Best Practices

✔ Use join() whenever you need a specific separator, such as spaces, hyphens, or pipes.

5. Array pop()

Definition

The pop() method removes the last element from an array and returns that removed element.

The original array is modified.

Syntax

array.pop()

Enter fullscreen mode Exit fullscreen mode

Parameters

None.

Returns

Returns the removed element.

If the array is empty, it returns undefined.

Internal Working

Consider:

let fruits = ["Apple", "Orange", "Banana"];

Enter fullscreen mode Exit fullscreen mode

Memory before pop():

Index

0 → Apple
1 → Orange
2 → Banana
length = 3

Enter fullscreen mode Exit fullscreen mode

When you call:

fruits.pop();

Enter fullscreen mode Exit fullscreen mode

JavaScript:

1. Retrieves the last element (Banana).
2. Removes it from the array.
3. Decreases the length property by 1.
4. Returns the removed element.

Memory after:

Index

0 → Apple
1 → Orange
length = 2

Enter fullscreen mode Exit fullscreen mode

Example

let fruits = ["Apple", "Orange", "Banana"];

let removed = fruits.pop();

console.log(removed);
console.log(fruits);

Enter fullscreen mode Exit fullscreen mode

Output

Banana
["Apple", "Orange"]

Enter fullscreen mode Exit fullscreen mode

Real-Time Example

Imagine a browser’s recent tabs list.

let recentTabs = ["Home", "Products", "Cart"];

let closedTab = recentTabs.pop();

console.log("Closed:", closedTab);
console.log(recentTabs);

Enter fullscreen mode Exit fullscreen mode

Output

Closed: Cart
["Home", "Products"]

Enter fullscreen mode Exit fullscreen mode

Common Mistake

let arr = [];

console.log(arr.pop());

Enter fullscreen mode Exit fullscreen mode

Output

undefined

Enter fullscreen mode Exit fullscreen mode

Always check if the array has elements before calling pop() if your logic depends on a removed value.

1. Array.isArray()

Note: isArray() is not an array method. It is a static method of the Array object.

Definition

The Array.isArray() method checks whether a given value is an array.

It returns:

• true → if the value is an array
• false → otherwise

Why do we need it?

In JavaScript:

typeof []

Enter fullscreen mode Exit fullscreen mode

returns

"object"

Enter fullscreen mode Exit fullscreen mode

So we cannot use typeof to determine whether a variable is an array.

Instead, JavaScript provides:

Array.isArray()

Enter fullscreen mode Exit fullscreen mode

Syntax

Array.isArray(value)

Enter fullscreen mode Exit fullscreen mode

Parameter

Parameter Description value The value to check

Returns

Boolean

true
false

Enter fullscreen mode Exit fullscreen mode

Internal Working

Suppose

let numbers = [10,20,30];

Enter fullscreen mode Exit fullscreen mode

Internally JavaScript checks the object’s internal type.

numbers

↓

Object

↓

Internal Array Type?

↓

Yes

↓

Return true

Enter fullscreen mode Exit fullscreen mode

If

let person = {
    name: "John"
};

Enter fullscreen mode Exit fullscreen mode

then

person

↓

Object

↓

Internal Array Type?

↓

No

↓

Return false

Enter fullscreen mode Exit fullscreen mode

Example 1

let numbers = [10,20,30];

console.log(Array.isArray(numbers));

Enter fullscreen mode Exit fullscreen mode

Output

true

Enter fullscreen mode Exit fullscreen mode

Example 2

let student = {
    name: "David"
};

console.log(Array.isArray(student));

Enter fullscreen mode Exit fullscreen mode

Output

false

Enter fullscreen mode Exit fullscreen mode

Example 3

console.log(Array.isArray("JavaScript"));

console.log(Array.isArray(100));

console.log(Array.isArray(true));

Enter fullscreen mode Exit fullscreen mode

Output

false
false
false

Enter fullscreen mode Exit fullscreen mode

Real-Time Example

Suppose an API returns data.

function displayProducts(products){

    if(Array.isArray(products)){
        console.log("Displaying products...");
    }else{
        console.log("Invalid Data");
    }

}

displayProducts(["Laptop","Mouse"]);

Enter fullscreen mode Exit fullscreen mode

Output

Displaying products...

Enter fullscreen mode Exit fullscreen mode

Without checking, your application could crash when trying to iterate over non-array data.

Common Mistake

Wrong

typeof []

Enter fullscreen mode Exit fullscreen mode

Output

object

Enter fullscreen mode Exit fullscreen mode

Correct

Array.isArray([])

Enter fullscreen mode Exit fullscreen mode

Output

true

Enter fullscreen mode Exit fullscreen mode

Best Practice

Always validate API responses before looping.

if(Array.isArray(data)){
    data.forEach(item=>console.log(item));
}

Enter fullscreen mode Exit fullscreen mode

2. delete Operator (Array delete)

Important: delete is not an array method. It is a JavaScript operator.

Definition

The delete operator removes an element from an array without changing the array length.

Instead of removing the index, it creates an empty slot (hole).

Syntax

delete array[index]

Enter fullscreen mode Exit fullscreen mode

Parameter

Parameter Description index Position of element

Returns

Returns

true

Enter fullscreen mode Exit fullscreen mode

if deletion succeeds.

Internal Working

Array

let fruits = [
"Apple",
"Orange",
"Banana"
];

Enter fullscreen mode Exit fullscreen mode

Memory

0 → Apple

1 → Orange

2 → Banana

length = 3

Enter fullscreen mode Exit fullscreen mode

After

delete fruits[1];

Enter fullscreen mode Exit fullscreen mode

Memory

0 → Apple

1 → Empty

2 → Banana

length = 3

Enter fullscreen mode Exit fullscreen mode

Notice

Length remains

3

Enter fullscreen mode Exit fullscreen mode

Example

let fruits = ["Apple","Orange","Banana"];

delete fruits[1];

console.log(fruits);

console.log(fruits.length);

Enter fullscreen mode Exit fullscreen mode

Output

[
'Apple',
empty,
'Banana'
]

3

Enter fullscreen mode Exit fullscreen mode

Access Deleted Value

console.log(fruits[1]);

Enter fullscreen mode Exit fullscreen mode

Output

undefined

Enter fullscreen mode Exit fullscreen mode

Real-Time Example

Suppose an employee leaves.

let employees = [
"John",
"David",
"Alex"
];

delete employees[1];

console.log(employees);

Enter fullscreen mode Exit fullscreen mode

Instead of shifting everyone,

JavaScript leaves an empty position.

Usually, this is not what we want.

3. Array.concat()

Definition

The concat() method merges two or more arrays into a new array.

The original arrays remain unchanged.

Syntax

array1.concat(array2)

array1.concat(array2,array3,...)

Enter fullscreen mode Exit fullscreen mode

Parameters

One or more arrays or values.

Returns

Returns a new merged array.

Internal Working

let a=[1,2];

let b=[3,4];

Enter fullscreen mode Exit fullscreen mode

JavaScript creates

New Array

↓

Copy a

↓

Append b

↓

Return New Array

Enter fullscreen mode Exit fullscreen mode

Original arrays stay unchanged.

Example

let frontend=["HTML","CSS"];

let backend=["Node","Express"];

let fullstack=frontend.concat(backend);

console.log(fullstack);

Enter fullscreen mode Exit fullscreen mode

Output

["HTML","CSS","Node","Express"]

Enter fullscreen mode Exit fullscreen mode

Multiple Arrays

let a=[1];

let b=[2];

let c=[3];

console.log(a.concat(b,c));

Enter fullscreen mode Exit fullscreen mode

Output

[1,2,3]

Enter fullscreen mode Exit fullscreen mode

Real-Time Example

Suppose a school stores students section-wise.

let sectionA=["John","David"];

let sectionB=["Alex","Sam"];

let students=sectionA.concat(sectionB);

console.log(students);

Enter fullscreen mode Exit fullscreen mode

Output

["John","David","Alex","Sam"]

Enter fullscreen mode Exit fullscreen mode

Common Mistake

Developers think

a.concat(b);

Enter fullscreen mode Exit fullscreen mode

changes a.

Wrong.

It returns a new array.

Correct

let newArray = a.concat(b);

Enter fullscreen mode Exit fullscreen mode

4. Array.copyWithin()

Definition

The copyWithin() method copies part of an array to another position within the same array.

It overwrites existing elements and modifies the original array.

Syntax

array.copyWithin(target)
array.copyWithin(target, start)
array.copyWithin(target, start, end)

Enter fullscreen mode Exit fullscreen mode

Parameters

Parameter Description target Index where copied values will be placed start Start copying from this index end (optional) Stop copying before this index

Returns

The modified original array.

Internal Working

let arr = [10,20,30,40,50];

Enter fullscreen mode Exit fullscreen mode

Calling

arr.copyWithin(0,3);

Enter fullscreen mode Exit fullscreen mode

copies elements from index 3 onward (40,50) to index 0.

Result

[40,50,30,40,50]

Enter fullscreen mode Exit fullscreen mode

Example

let numbers=[10,20,30,40,50];

numbers.copyWithin(0,3);

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output

[40,50,30,40,50]

Enter fullscreen mode Exit fullscreen mode

Real-Time Example

Suppose you maintain a fixed-size buffer for sensor readings and want to overwrite old values with recent ones.

let readings=[10,20,30,40,50];

readings.copyWithin(0,2);

console.log(readings);

Enter fullscreen mode Exit fullscreen mode

Output

[30,40,50,40,50]

Enter fullscreen mode Exit fullscreen mode

Best Practice

Use copyWithin() only when you intentionally want to overwrite elements in the same array.

References:
https://www.w3schools.com/js/js_array_methods.asp