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";

we can use an array:

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

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 |
        -------------------------

---

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

To modify the array length:

array.length = newLength;

---

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"];

Memory representation:

Index

0 → Apple
1 → Orange
2 → Mango

length = 3

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

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

Whenever you access:

fruits.length

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);

Output

3

---

Example 2 - Updating Length

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

numbers.length = 2;

console.log(numbers);

Output

[10,20]

JavaScript removes the remaining elements.

---

Example 3 - Increasing Length

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

colors.length = 5;

console.log(colors);

Output

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

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);

Output

Total Items: 3

Amazon and Flipkart use similar logic to display:

Cart (3 Items)

---

Common Mistake

let arr = [1,2,3];

console.log(arr.length());

Output

TypeError

Why?

Because length is a property, not a method.

Correct:

arr.length

---

Best Practices

✔ Use length inside loops.

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

---

2. Array toString()

Definition

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

The original array is not modified.

---

Syntax

array.toString()

---

Parameters

None.

---

Returns

Returns a string.

---

Internal Working

Suppose

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

Internally JavaScript joins every element using commas.

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

Result

Apple,Orange,Banana

---

Example

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

let result = fruits.toString();

console.log(result);

Output

Apple,Orange,Banana

---

Example with Numbers

let numbers = [10,20,30];

console.log(numbers.toString());

Output

10,20,30

---

Real-Time Example

Sending array data through an API.

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

let apiData = selectedItems.toString();

console.log(apiData);

Output

Laptop,Mouse,Keyboard

---

Common Mistake

Many developers think it returns an array.

Wrong.

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

console.log(typeof result);

Output

string

---

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)

---

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"];

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

When

arr.at(2)

JavaScript returns

C

When

arr.at(-1)

JavaScript converts

length + (-1)

4 + (-1)

=3

Returns

D

---

Example

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

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

Output

Orange

---

Negative Index

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

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

Output

Banana

---

Real-Time Example

Latest Notification

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

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

Output

Delivered

---

Common Mistake

arr[-1]

Output

undefined

Correct

arr.at(-1)

---

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)

---

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"];

If you call:

fruits.join(" - ");

JavaScript internally performs:

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

Result:

Apple - Orange - Banana

---

Example 1

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

console.log(fruits.join());

Output

Apple,Orange,Banana

---

Example 2

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

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

Output

Apple | Orange | Banana

---

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);

Output

JavaScript, React, Node.js

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);

Output

string

---

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()

---

Parameters

None.

---

Returns

Returns the removed element.

If the array is empty, it returns undefined.

---

Internal Working

Consider:

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

Memory before pop():

Index

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

When you call:

fruits.pop();

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

---

Example

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

let removed = fruits.pop();

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

Output

Banana
["Apple", "Orange"]

---

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);

Output

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

---

Common Mistake

let arr = [];

console.log(arr.pop());

Output

undefined

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 []

returns

"object"

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

Instead, JavaScript provides:

Array.isArray()

---

Syntax

Array.isArray(value)

---

Parameter

Parameter	Description
value	The value to check

---

Returns

Boolean

true
false

---

Internal Working

Suppose

let numbers = [10,20,30];

Internally JavaScript checks the object's internal type.

numbers

↓

Object

↓

Internal Array Type?

↓

Yes

↓

Return true

If

let person = {
    name: "John"
};

then

person

↓

Object

↓

Internal Array Type?

↓

No

↓

Return false

---

Example 1

let numbers = [10,20,30];

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

Output

true

---

Example 2

let student = {
    name: "David"
};

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

Output

false

---

Example 3

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

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

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

Output

false
false
false

---

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"]);

Output

Displaying products...

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

---

Common Mistake

Wrong

typeof []

Output

object

Correct

Array.isArray([])

Output

true

---

Best Practice

Always validate API responses before looping.

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

---

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]

---

Parameter

Parameter	Description
index	Position of element

---

Returns

Returns

true

if deletion succeeds.

---

Internal Working

Array

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

Memory

0 → Apple

1 → Orange

2 → Banana

length = 3

After

delete fruits[1];

Memory

0 → Apple

1 → Empty

2 → Banana

length = 3

Notice

Length remains

3

---

Example

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

delete fruits[1];

console.log(fruits);

console.log(fruits.length);

Output

[
'Apple',
empty,
'Banana'
]

3

---

Access Deleted Value

console.log(fruits[1]);

Output

undefined

---

Real-Time Example

Suppose an employee leaves.

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

delete employees[1];

console.log(employees);

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,...)

---

Parameters

One or more arrays or values.

---

Returns

Returns a new merged array.

---

Internal Working

let a=[1,2];

let b=[3,4];

JavaScript creates

New Array

↓

Copy a

↓

Append b

↓

Return New Array

Original arrays stay unchanged.

---

Example

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

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

let fullstack=frontend.concat(backend);

console.log(fullstack);

Output

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

---

Multiple Arrays

let a=[1];

let b=[2];

let c=[3];

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

Output

[1,2,3]

---

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);

Output

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

---

Common Mistake

Developers think

a.concat(b);

changes a.

Wrong.

It returns a new array.

Correct

let newArray = a.concat(b);

---

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)

---

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];

Calling

arr.copyWithin(0,3);

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

Result

[40,50,30,40,50]

---

Example

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

numbers.copyWithin(0,3);

console.log(numbers);

Output

[40,50,30,40,50]

---

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);

Output

[30,40,50,40,50]

---

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