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