Arrays are one of the most fundamental data structures in JavaScript. It allows you to store and manage a collection of items in a single variable. There are various ways to create an array in JavaScript.
1. Using Array Literals
The simplest and most common method to create an array is by using array literals. An array literal is created by placing a list of items inside square brackets ([]
), separated by commas.
// Creating an array with array literal
let arr = [10, 20, 30, 40, 50];
console.log(arr);
// Output: [10, 20, 30, 40, 50]
2. Using Array Constructor
JavaScript provides the Array
constructor, which can be used to create arrays explicitly.
A. Creating an array with predefined values
let arr = new Array(10, 20, 30, 40, 50);
console.log(arr);
// Output: [10, 20, 30, 40, 50]
B. Creating an empty array with a specified length
let emptyArray = new Array(5);
console.log(emptyArray);
// Output: [ <5 empty items> ]
Note: When you pass a single numeric value to the
Array
constructor, it creates an array with that length, but without initialized elements.
3. Using Array.of() Method
The Array.of()
method is used to create arrays when you need to ensure that numerical arguments are treated as elements rather than the length of the array.
let arr = Array.of(5);
console.log(arr); // Output: [5]
let arr2 = Array.of(10, 20, 30, 40);
console.log(arr2);
// Output: [10, 20, 30, 40]
4. Using Array.from() Method
The Array.from()
method creates a new array from an iterable or array-like object, such as strings, sets, or objects with a length
property.
A. Converting a string to an array
let str = 'Hello';
let charArr = Array.from(str);
console.log(charArr);
// Output: ['H', 'e', 'l', 'l', 'o']
B. Converting a set to an array
let uniqueValues = new Set([1, 2, 3]);
let arrayFromSet = Array.from(uniqueValues);
console.log(arrayFromSet); // Output: [1, 2, 3]
C. Using a mapping function
let squareArray = Array.from([1, 2, 3, 4], x => x * x);
console.log(squareArray); // Output: [1, 4, 9, 16]
5. Using Spread Operator (...
)
The spread operator (...
) allows you to create a new array by spreading the elements of an existing array, string, or other iterable.
A. Creating a copy of an array
let arr = [10, 20, 30, 40, 50];
let newArr = [...arr];
console.log(newArr);
// Output: [10, 20, 30, 40, 50]
B. Combining arrays
let arr1 = [10, 20];
let arr2 = [30, 40];
let newArr = [...arr1, ...arr2];
console.log(newArr);
// Output: [10, 20, 30, 40]
C. Converting a string to an array
let str = 'JavaScript';
let charArr = [...str];
console.log(charArr);
// Output: ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']
6. Using Loops
Arrays can also be created dynamically using loops to populate their elements.
let arr = [];
for (let i = 0; i < 5; i++) {
arr.push(i);
}
console.log(arr);
// Output: [0, 1, 2, 3, 4]
7. Using Functional Methods
JavaScript provides functional methods like map()
or fill()
to create arrays programmatically.
A. Using Array.fill()
Method
let arr = new Array(5).fill('X');
console.log(arr);
// Output: ['X', 'X', 'X', 'X', 'X']
B. Using Array.map()
Method
let arr = Array.from({ length: 5 }, (_, index) => index * 2);
console.log(arr);
// Output: [0, 2, 4, 6, 8]