JavaScript Essentials - Arrays

Working with arrays in JavaScript

Arrays are used to store multiple values in a single variable. This tutorial covers how to create, access, and manipulate arrays in JavaScript.

Creating Arrays

Arrays can be created using array literals or the new Array() syntax. Here is an example of each:

// Using array literal
var fruits = ['Apple', 'Banana', 'Cherry'];

// Using new Array() syntax
var fruits = new Array('Apple', 'Banana', 'Cherry');

console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
                

Accessing Array Elements

Array elements are accessed by their index, which starts at 0. Here is an example:

var fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // Output: Apple
console.log(fruits[1]); // Output: Banana
console.log(fruits[2]); // Output: Cherry
                

Modifying Array Elements

Array elements can be modified by accessing the element at a specific index and assigning a new value. Here is an example:

var fruits = ['Apple', 'Banana', 'Cherry'];

fruits[1] = 'Blueberry';

console.log(fruits); // Output: ["Apple", "Blueberry", "Cherry"]
                

Array Properties and Methods

JavaScript provides many built-in properties and methods for array manipulation. Here are some common ones:

• length - Returns the number of elements in the array.
• push() - Adds one or more elements to the end of the array.
• pop() - Removes the last element from the array.
• shift() - Removes the first element from the array.
• unshift() - Adds one or more elements to the beginning of the array.
• slice() - Returns a shallow copy of a portion of the array.
• splice() - Adds or removes elements from the array.
• indexOf() - Returns the first index at which a given element can be found.
• forEach() - Executes a provided function once for each array element.
• map() - Creates a new array with the results of calling a provided function on every element in the array.

Examples of Array Methods

var fruits = ['Apple', 'Banana', 'Cherry'];

// length
console.log(fruits.length); // Output: 3

// push
fruits.push('Date');
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Date"]

// pop
fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// shift
fruits.shift();
console.log(fruits); // Output: ["Banana", "Cherry"]

// unshift
fruits.unshift('Apricot');
console.log(fruits); // Output: ["Apricot", "Banana", "Cherry"]

// slice
var citrus = fruits.slice(1, 2);
console.log(citrus); // Output: ["Banana"]

// splice
fruits.splice(1, 1, 'Blueberry');
console.log(fruits); // Output: ["Apricot", "Blueberry", "Cherry"]

// indexOf
console.log(fruits.indexOf('Cherry')); // Output: 2

// forEach
fruits.forEach(function(fruit) {
    console.log(fruit);
});
// Output: 
// Apricot
// Blueberry
// Cherry

// map
var uppercaseFruits = fruits.map(function(fruit) {
    return fruit.toUpperCase();
});
console.log(uppercaseFruits); // Output: ["APRICOT", "BLUEBERRY", "CHERRY"]
                

Nested Arrays

Arrays can contain other arrays as elements, creating nested arrays. Here is an example:

var nestedArray = [
    ['Apple', 'Banana'],
    ['Cherry', 'Date']
];

console.log(nestedArray[0][1]); // Output: Banana
console.log(nestedArray[1][0]); // Output: Cherry
                

Summary

In this tutorial, you learned about working with arrays in JavaScript, including how to create, access, and modify arrays, and use built-in array methods. Understanding arrays is essential for managing collections of data in your JavaScript programs.