What are Array in JavaScript and their Types

An array is an ordered collection of elements (values) stored in a single variable. Arrays can contain any data type and are zero-indexed (first element is at index 0).
javascript
let fruits = ["apple", "banana", "orange"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "hello", true, {name: "John"}, null];JavaScriptHow to Create Arrays
1. Array Literal (Most Common)
javascript
let arr = [1, 2, 3, 4, 5];
let empty = [];
let mixed = [1, "hello", true, {x: 10}];JavaScript2. Using Array Constructor
javascript
let arr = new Array(1, 2, 3, 4, 5);
let arr2 = new Array(5); // Creates array with 5 empty slotsJavaScript3. Using Array.of()
javascript
let arr = Array.of(1, 2, 3);
console.log(arr); // [1, 2, 3]JavaScript4. Using Array.from()
javascript
let str = "hello";
let arr = Array.from(str);
console.log(arr); // ["h", "e", "l", "l", "o"]
let arr2 = Array.from([1, 2, 3], x => x * 2);
console.log(arr2); // [2, 4, 6]JavaScriptTypes of Arrays
1. Single-Dimensional Array
A simple array with one level of elements.
javascript
let colors = ["red", "green", "blue"];
console.log(colors[0]); // red
console.log(colors.length); // 3JavaScript2. Multi-Dimensional Array (2D Array)
An array containing other arrays.
javascript
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[0][0]); // 1
console.log(matrix[1][2]); // 6 JavaScript3. Multi-Dimensional Array (3D Array)
An array containing 2D arrays.
javascript
let cube = [
[[1, 2], [3, 4]],
[[5, 6], [7, 8]]
];
console.log(cube[0][0][1]); // 2
console.log(cube[1][1][0]); // 7 JavaScript4. Jagged Array (Irregular Array)
An array with arrays of different lengths.
javascript
let jagged = [
[1, 2],
[3, 4, 5],
[6],
[7, 8, 9, 10]
];
console.log(jagged[0].length); // 2
console.log(jagged[1].length); // 3 JavaScript5. Associative Array (Object)
In JavaScript, arrays with named keys are actually objects.
javascript
let person = [];
person["name"] = "John";
person["age"] = 30;
person["city"] = "New York";
console.log(person.name); // John
// Note: Better to use objects for key-value pairs JavaScript6. Sparse Array
An array with empty slots/gaps.
javascript
let sparse = [1, , , 4, 5];
console.log(sparse.length); // 5
console.log(sparse[1]); // undefined JavaScriptArray Properties
length
Returns the number of elements in an array.
javascript
let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 5
arr.length = 3; // Truncates array
console.log(arr); // [1, 2, 3] JavaScriptArray Methods
1. Adding/Removing Elements
push()
Adds elements to the end.
javascript
let arr = [1, 2, 3];
arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]JavaScriptpop()
Removes and returns last element.
javascript
let arr = [1, 2, 3];
let last = arr.pop();
console.log(last); // 3
console.log(arr); // [1, 2] JavaScriptunshift()
Adds elements to the beginning.
javascript
let arr = [2, 3];
arr.unshift(0, 1);
console.log(arr); // [0, 1, 2, 3]JavaScriptshift()
Removes and returns first element.
javascript
let arr = [1, 2, 3];
let first = arr.shift();
console.log(first); // 1
console.log(arr); // [2, 3] JavaScriptsplice()
Adds/removes elements from any position.
javascript
let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, "a", "b"); // Remove 1 element at index 2, add "a", "b"
console.log(arr); // [1, 2, "a", "b", 4, 5] JavaScript2. Accessing Elements
at()
Returns element at specified index (supports negative indices).
javascript
let arr = [1, 2, 3, 4, 5];
console.log(arr.at(0)); // 1
console.log(arr.at(-1)); // 5
console.log(arr.at(-2)); // 4 JavaScriptindexOf()
Returns index of first occurrence.
javascript
let arr = [1, 2, 3, 2, 1];
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(5)); // -1 JavaScriptlastIndexOf()
Returns index of last occurrence.
javascript
let arr = [1, 2, 3, 2, 1];
console.log(arr.lastIndexOf(2)); // 3JavaScriptincludes()
Checks if array contains an element.
javascript
let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
console.log(arr.includes(10)); // false JavaScriptfind()
Returns first element that satisfies condition.
javascript
let arr = [1, 5, 10, 15];
let result = arr.find(x => x > 8);
console.log(result); // 10 JavaScriptfindIndex()
Returns index of first element that satisfies condition.
javascript
let arr = [1, 5, 10, 15];
let index = arr.findIndex(x => x > 8);
console.log(index); // 2JavaScript3. Array Transformation Methods
map()
Creates new array by transforming each element.
javascript
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8]JavaScriptfilter()
Creates new array with elements that pass condition.
javascript
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(x => x % 2 === 0);
console.log(evens); // [2, 4]JavaScriptreduce()
Reduces array to single value.
javascript
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 1JavaScriptreduceRight()
Like reduce but from right to left.
javascript
let arr = [1, 2, 3];
let result = arr.reduceRight((acc, curr) => acc + curr, 0);
console.log(result); // 6JavaScriptflatMap()
Maps and flattens in one operation.
javascript
let arr = [1, 2, 3];
let result = arr.flatMap(x => [x, x * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]JavaScript4. Array Joining Methods
concat()
Combines multiple arrays.
javascript
let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2, [5, 6]);
console.log(combined); // [1, 2, 3, 4, 5, 6]JavaScriptjoin()
Converts array to string with separator.
javascript
let arr = ["a", "b", "c"];
console.log(arr.join()); // a,b,c
console.log(arr.join("-")); // a-b-c
console.log(arr.join("")); // abc JavaScriptflat()
Flattens nested arrays.
javascript
let nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat()); // [1, 2, 3, 4, [5, 6]]
console.log(nested.flat(2)); // [1, 2, 3, 4, 5, 6] JavaScript5. Iteration Methods
forEach()
Executes function for each element.
javascript
let arr = [1, 2, 3];
arr.forEach((element, index) => {
console.log(index, element);
});
// 0 1, 1 2, 2 3JavaScriptfor...of Loop
Iterates through array values.
javascript
let arr = [1, 2, 3];
for (let value of arr) {
console.log(value);
}JavaScriptfor...in Loop
Iterates through array indices.
javascript
let arr = [1, 2, 3];
for (let index in arr) {
console.log(index, arr[index]);
}JavaScript6. Checking Methods
every()
Checks if all elements satisfy condition.
javascript
let numbers = [2, 4, 6, 8];
console.log(numbers.every(x => x % 2 === 0)); // trueJavaScriptsome()
Checks if at least one element satisfies condition.
javascript
let numbers = [1, 3, 4, 5];
console.log(numbers.some(x => x % 2 === 0)); // true (4 is even)JavaScript7. Sorting and Reversing
sort()
Sorts array elements.
javascript
let numbers = [3, 1, 4, 1, 5];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 1, 3, 4, 5]
let strings = ["banana", "apple", "cherry"];
strings.sort();
console.log(strings); // ["apple", "banana", "cherry"] JavaScriptreverse()
Reverses array order.
javascript
let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]JavaScript8. Copying Arrays
slice()
Creates shallow copy of array.
javascript
let arr = [1, 2, 3, 4, 5];
let copy = arr.slice(1, 4);
console.log(copy); // [2, 3, 4]
let fullCopy = arr.slice();
console.log(fullCopy); // [1, 2, 3, 4, 5] JavaScriptSpread Operator (...)
Creates shallow copy using spread syntax.
javascript
let arr = [1, 2, 3];
let copy = [...arr];
console.log(copy); // [1, 2, 3]
let combined = [...arr, 4, 5];
console.log(combined); // [1, 2, 3, 4, 5] JavaScript9. Other Methods
fill()
Fills array with value.
javascript
let arr = new Array(5);
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]JavaScriptkeys(), values(), entries()
Return iterators.
javascript
let arr = ["a", "b", "c"];
console.log([...arr.keys()]); // [0, 1, 2]
console.log([...arr.values()]); // ["a", "b", "c"]
console.log([...arr.entries()]); // [[0,"a"], [1,"b"], [2,"c"]]JavaScripttoString()
Converts array to string.
javascript
let arr = [1, 2, 3];
console.log(arr.toString()); // "1,2,3"JavaScriptcopyWithin()
Copies part of array to another location.
javascript
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3, 5);
console.log(arr); // [4, 5, 3, 4, 5]JavaScriptQuick Reference Table
| Method | Purpose | Mutates | Returns |
| push() | Add to end | Yes | Length |
| pop() | Remove from end | Yes | Element |
| shift() | Remove from start | Yes | Element |
| unshift() | Add to start | Yes | Length |
| splice() | Add/remove anywhere | Yes | Array |
| map() | Transform elements | No | New Array |
| filter() | Keep matching elements | No | New Array |
| reduce() | Single value | No | Value |
| forEach() | Execute for each | No | undefined |
| find() | Find element | No | Element |
| includes() | Check if exists | No | Boolean |
| sort() | Sort elements | Yes | Array |
| reverse() | Reverse order | Yes | Array |
| concat() | Combine arrays | No | New Array |
| flat() | Flatten nested | No | New Array |
| slice() | Extract portion | No | New Array |
Practical Examples
Example 1: Working with Objects in Array
javascript
let users = [
{id: 1, name: "John", age: 30},
{id: 2, name: "Jane", age: 25},
{id: 3, name: "Bob", age: 35}
];
// Get names
let names = users.map(user => user.name);
console.log(names); // ["John", "Jane", "Bob"]
// Filter users above 25
let over25 = users.filter(user => user.age > 25);
console.log(over25); // John and Bob's objects JavaScriptExample 2: Array Chaining
javascript
let numbers = [1, 2, 3, 4, 5, 6];
let result = numbers
.filter(x => x > 2)
.map(x => x * 2)
.reduce((sum, x) => sum + x, 0);
console.log(result); // (3*2 + 4*2 + 5*2 + 6*2) = 36 JavaScriptExample 3: 2D Array Manipulation
javascript
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// Access element
console.log(matrix[1][2]); // 6
// Modify element
matrix[2][0] = 70;
console.log(matrix[2]); // [70, 8, 9] JavaScript

