MSDN Documentation

Arrays are one of the most fundamental data structures in JavaScript. They are ordered lists of values, where each value can be of any data type. Arrays are incredibly versatile and are used extensively in JavaScript programming.

What is a JavaScript Array?

A JavaScript array is a special variable that can hold more than one value at a time. Think of it as a list of items. For example, you could have a list of car names:

const cars = ["Volvo", "BMW", "Ford"];

You can access elements of an array using their index, which starts at 0. So, the first element is at index 0, the second at index 1, and so on.

let car1 = cars[0]; // car1 will be "Volvo"
let car2 = cars[1]; // car2 will be "BMW"

Creating Arrays

There are several ways to create arrays in JavaScript:

1. Using Array Literal (Most Common)

This is the simplest and most common way to create an array:

const fruits = ["Apple", "Banana", "Orange"];
const numbers = [1, 2, 3, 4, 5];
const mixed = ["Hello", 42, true, { name: "John" }];

2. Using the `Array()` Constructor

While less common, you can also use the `Array()` constructor:

const colors = new Array("Red", "Green", "Blue");
const emptyArray = new Array(); // Creates an empty array

Note: Using the Array() constructor with a single numeric argument creates an array with that many empty slots, which can be confusing. It's generally recommended to use array literals.

Array Properties and Methods

JavaScript arrays come with many useful built-in properties and methods.

The length Property

The length property returns the number of elements in an array:

const animals = ["Dog", "Cat", "Bird"];
console.log(animals.length); // Output: 3

Common Array Methods

• push(): Adds one or more elements to the end of an array.
• pop(): Removes the last element from an array.
• shift(): Removes the first element from an array.
• unshift(): Adds one or more elements to the beginning of an array.
• splice(): Adds or removes elements from an array at a specified index.
• slice(): Returns a shallow copy of a portion of an array into a new array.
• concat(): Joins two or more arrays.
• indexOf(): Returns the first index at which a given element can be found.
• includes(): Determines whether an array includes a certain value.

Example: Using push() and pop()

const colors = ["Red", "Green"];
console.log(colors); // ["Red", "Green"]

colors.push("Blue");
console.log(colors); // ["Red", "Green", "Blue"]

const lastColor = colors.pop();
console.log(colors);     // ["Red", "Green"]
console.log(lastColor); // "Blue"

Example: Using splice()

The splice() method can be used to add or remove elements.

const fruits = ["Apple", "Banana", "Cherry", "Date"];
console.log(fruits); // ["Apple", "Banana", "Cherry", "Date"]

// Remove 1 element starting from index 2 (Cherry)
fruits.splice(2, 1);
console.log(fruits); // ["Apple", "Banana", "Date"]

// Add "Orange" and "Grape" starting at index 1
fruits.splice(1, 0, "Orange", "Grape");
console.log(fruits); // ["Apple", "Orange", "Grape", "Banana", "Date"]

Example: Using slice()

The slice() method creates a new array containing a subset of elements.

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const subset = numbers.slice(3, 7); // Elements from index 3 up to (but not including) index 7
console.log(subset); // [3, 4, 5, 6]
console.log(numbers); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] (original array is unchanged)

Iterating Over Arrays

There are many ways to loop through the elements of an array:

1. Using a for Loop

const letters = ["a", "b", "c"];
for (let i = 0; i < letters.length; i++) {
    console.log(`Element at index ${i}: ${letters[i]}`);
}

2. Using a for...of Loop (Modern)

This is a cleaner way to iterate over array values.

const colors = ["Red", "Green", "Blue"];
for (const color of colors) {
    console.log(color);
}
// Output:
// Red
// Green
// Blue

3. Using forEach() Method

The forEach() method executes a provided function once for each array element.

const numbers = [10, 20, 30];
numbers.forEach(function(number, index) {
    console.log(`Index ${index}: ${number * 2}`);
});
// Output:
// Index 0: 20
// Index 1: 40
// Index 2: 60

Multidimensional Arrays

Arrays can contain other arrays, creating multidimensional arrays (like matrices).

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // Output: 6 (accessing the element at row 1, column 2)

Conclusion

Arrays are a cornerstone of JavaScript development. Mastering their creation, properties, methods, and iteration techniques is crucial for writing effective and efficient code. Continue to the next section to learn about JavaScript Objects.