Arrays are one of the most important data structures in JavaScript. They allow us to store multiple values in a single variable instead of creating separate variables for each value.
What Is an Array?
An array is a special variable that can hold multiple values.
Each value inside an array is called an element.
Arrays use zero-based indexing, which means the first element starts at index 0.
Example
let arr = [10, 20, 30];
10 → index 0
20 → index 1
30 → index 2
Different Ways to Create an Array
1. Using Array Literal (Most Common Method)
let arr = [1, 2, 3];
This is the simplest and most commonly used method.
2. Using the Array Constructor
The Array() constructor has two main syntaxes, depending on the arguments provided.
To create an array with specific elements: Pass the elements as arguments.
let arr = new Array(1, 2, 3);
//Result: [1, 2, 3]
“Although this works, using array literals ([]) is usually cleaner and easier to read.
To create an empty array of a specified length: Pass a single, non-negative integer argument.
let arr = new Array(4);
// Result: an array with a length of 4 empty slots, not [undefined, undefined, undefined, undefined]
// arr[0] is undefined, but the slot is "empty" (sparse array)
Key Differences from Array Literals
While new Array() and [] seem similar, they differ in the following ways:
Single Numeric Argument: The most significant difference is how a single numeric argument is handled.
- new Array(5) creates an array with a length of 5 empty slots.
- [5] creates an array with one element, the number 5.
The array literal notation is generally considered more efficient, concise, and easier to read.
3. Creating Empty Array
Creating a empty array and push the values to them.
let arr = [];
Then add values:
arr[0] = 10;
arr.push(20);
4. Using Array.of()
Array.of() creates a new array from the given arguments.
let arr = Array.of(1, 2, 3);
let arr1 = Array.of(3);
console.log(arr);
console.log(arr1);
Output
[1, 2, 3]
[3]
5. Using Array.from()
Creates a new array from an iterable or array-like object.
Used to convert something into array.
Example 1
let str = "Apple";
let arr = Array.from(str);
console.log(arr);
Output
["A", "P", "P", "L", "E"]
Example 2
let arr = Array.from({ length: 5 });
console.log(arr);
Output
[undefined, undefined, undefined, undefined, undefined]
6. Using Spread Operator
Spread operator:
...
We can also create a new array by copying another array using the spread operator (...).
Example 1
let a = [1, 2, 3];
let b = [...a];
console.log(b);
Output
[1, 2, 3]
- Creates a shallow copy
- Does NOT modify original array
Example 2
Merge Arrays
let a = [1, 2];
let b = [3, 4];
let c = [...a, ...b];
console.log(c);
Output
[1, 2, 3, 4]
Accessing Array Elements
We access elements using their index number.
Important: Array index always starts from 0.
let fruits = ["apple", "orange", "guava", "grapes"];
console.log(fruits[0]); // apple
console.log(fruits[1]); // orange
Here:
fruits[0] → First element
fruits[1] → Second element
Accessing the Last Element
To access the last element dynamically:
console.log(names[fruits.length - 1]); // grapes
Why length - 1?
Because:
length is a property
It tells how many elements are inside the array.
- fruits.length gives total number of elements (4)
- But index starts from 0
- So last index = length - 1
Updating Array Elements
Arrays in JavaScript are mutable, which means we can change their values.
We can update an element by assigning a new value to a specific index.
fruits[1] = "Banana";
console.log(fruits);
Output
["apple", "Banana", "guava", "grapes"]
Here, we updated the second element.
Updating All Elements Using Loop
If we want to modify every element, we can use a loop.
Example: Convert all fruits name to uppercase.
for (let i = 0; i < fruits.length; i++) {
fruits[i] = fruits[i].toUpperCase();
}
console.log(fruits);
Output
["APPLE", "BANANA", "GUAVA", "GRAPES"]
Using forEach (Modern Way)
fruits.forEach((value, index) => {
fruits[index] = value.toUpperCase();
});
This method is cleaner and more readable.
Conclusion
Arrays are a fundamental part of JavaScript. They help us store and manage multiple values efficiently. Understanding how to create, access, update, and manipulate arrays is essential for building real-world applications.
Top comments (0)