Understanding and Using Arrays in JavaScript

Lesson Overview

In today's lesson, we'll explore arrays in JavaScript, a versatile and fundamental data structure. An array is an ordered collection of elements that can be of mixed data types. Arrays in JavaScript are mutable, meaning their elements can be changed after creation. However, arrays can be made immutable using certain techniques if needed. The beauty of arrays lies in their simplicity and efficiency; they allow for easy storage, access, and manipulation of data. By the end of this lesson, you'll be able to create, manipulate, and understand the unique applications of arrays in JavaScript.

Understanding Arrays

An array in JavaScript is an ordered collection of elements, which can be of any type, including numbers, strings, objects, and even other arrays. Consider this JavaScript array declaration as an example: JavaScript class ArrayExample {createMixedArray() {return ["apple", 42, true, { name: "banana" }, [1, 2, 3]];}} // Create an instance and call the `createMixedArray` method const arrayExample = new ArrayExample(); console.log(arrayExample.createMixedArray()); // Output: ['apple', 42, true, { name: 'banana' }, [1, 2, 3]]

Creating Arrays

Arrays are created by enclosing elements in square brackets [], with commas to separate them — this is known as the array literal syntax. You can also create arrays using the Array constructor function. It is considered a best practice to declare arrays with const in JavaScript because const ensures that the variable holding the array reference cannot be reassigned to a different array or any other value. However, while the reference to the array is immutable, the contents of the array itself are still mutable (i.e., you can change the elements of the array). In the next JavaScript example, we illustrate array creation: JavaScript class ArrayExample {createArrays() {const arrayLiteral = ["apple", "banana", "cherry"]; const fromConstructor = new Array("apple", "banana", "cherry"); return { arrayLiteral, fromConstructor };}} // Create an instance and call the `createArrays` method const arrayExample = new ArrayExample(); console.log(arrayExample.createArrays()); // Output: { arrayLiteral: ['apple', 'banana', 'cherry'], fromConstructor: ['apple', 'banana', 'cherry'] } This example creates arrays via literals and constructors.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Inspecting and Modifying Arrays

Just like strings, array elements are accessible via indexes. Indexes in JavaScript arrays are zero-based, meaning the first element has an index of 0, the second element has an index of 1, and so on. Array indexing in JavaScript allows you to access, modify, and manipulate the elements stored within an array using their respective positions.

The length property of an array returns the number of elements present in the array and can be used to easily determine its size or iterate over the array. Though arrays are mutable by default, you can create new arrays from existing ones or use Object.freeze() to enforce immutability.

Consider the following example that depicts inspecting, modifying arrays, and demonstrating the length property:

JavaScript

class ArrayExample {
    inspectArray() {
        const myArray = ["apple", "banana", "cherry", "durian", "elderberry"];
        console.log(myArray[1]);   // Output: 'banana'
        console.log(myArray[myArray.length - 1]);  // Output: 'elderberry'
        console.log(myArray.slice(2, 4)); // Output: ['cherry', 'durian']

        const newArray = [...myArray.slice(1, 3), "dragonfruit"];
        console.log(newArray);     // Output: ['banana', 'cherry', 'dragonfruit']
        
        Object.freeze(newArray);

        // Attempt to modify the frozen array
        try {
            newArray[0] = "blueberry";
        } catch (error) {
            console.log("Error: Cannot modify a frozen array"); // Output: Error message
        }
        console.log(newArray);     // Output: ['banana', 'cherry', 'dragonfruit']
    }
}

// Create an instance and call the `inspectArray` method
const arrayExample = new ArrayExample();
arrayExample.inspectArray();

class ArrayExample {
    inspectArray() {
        const myArray = ["apple", "banana", "cherry", "durian", "elderberry"];
        console.log(myArray[1]);   // Output: 'banana'
        console.log(myArray[myArray.length - 1]);  // Output: 'elderberry'
        console.log(myArray.slice(2, 4)); // Output: ['cherry', 'durian']

        const newArray = [...myArray.slice(1, 3), "dragonfruit"];
        console.log(newArray);     // Output: ['banana', 'cherry', 'dragonfruit']
        
        Object.freeze(newArray);

        // Attempt to modify the frozen array
        try {
            newArray[0] = "blueberry";
        } catch (error) {
            console.log("Error: Cannot modify a frozen array"); // Output: Error message
        }
        console.log(newArray);     // Output: ['banana', 'cherry', 'dragonfruit']
    }
}

// Create an instance and call the `inspectArray` method
const arrayExample = new ArrayExample();
arrayExample.inspectArray();

Here's a deeper dive into some of the array methods used:

slice(start, end) returns a new array containing the elements from the start index up to but not including the end index.
length is a property that gives the total number of elements in the array.
Object.freeze(array) makes the array immutable, meaning any changes to it will throw an error.

Operations on Arrays

JavaScript arrays allow a range of operations. The concat() method concatenates two arrays, while loops or the Array fill method can be used to repeat elements of an array. The includes() method checks if a particular item is present in the array. Additionally, the map() method creates a new array populated with the results of calling a provided function on every element in the array.

Here's an example demonstrating these operations:

JavaScript

class ArrayExample {
    arrayOperations() {
        const array1 = ["apple", "banana"];
        const array2 = ["cherry", "durian"];
        const array3 = array1.concat(array2);
        console.log(array3);        // Output: ['apple', 'banana', 'cherry', 'durian']

        const array4 = Array(3).fill(array1).flat();
        console.log(array4);        // Output: ['apple', 'banana', 'apple', 'banana', 'apple', 'banana']

        console.log(array1.includes("apple"));  // Output: true
        
        const mappedArray = array1.map(fruit => `${fruit} pie`);
        console.log(mappedArray);   // Output: ['apple pie', 'banana pie']
    }
}

// Create an instance and call the `arrayOperations` method
const arrayExample = new ArrayExample();
arrayExample.arrayOperations();

class ArrayExample {
    arrayOperations() {
        const array1 = ["apple", "banana"];
        const array2 = ["cherry", "durian"];
        const array3 = array1.concat(array2);
        console.log(array3);        // Output: ['apple', 'banana', 'cherry', 'durian']

        const array4 = Array(3).fill(array1).flat();
        console.log(array4);        // Output: ['apple', 'banana', 'apple', 'banana', 'apple', 'banana']

        console.log(array1.includes("apple"));  // Output: true
        
        const mappedArray = array1.map(fruit => `${fruit} pie`);
        console.log(mappedArray);   // Output: ['apple pie', 'banana pie']
    }
}

// Create an instance and call the `arrayOperations` method
const arrayExample = new ArrayExample();
arrayExample.arrayOperations();

Here’s a breakdown of the array methods used:

concat(anotherArray) returns a new array that is the result of joining two or more arrays.
Array(n).fill(value) creates an array with n copies of the value.
flat() is used to flatten nested arrays into a single array.
includes(element) checks if the array includes a certain element and returns true or false.
map(callback) creates a new array populated with the results of calling a provided function on every element in the array. In this case, we use an arrow function fruit => `${fruit} pie` for concise syntax. Arrow functions provide a shorter way to write functions and are especially useful for inline callbacks.

Nested Arrays and Other Advanced Concepts

An array can contain another array, resulting in a nested array. In a nested array, you can access elements by chaining indices. The first index accesses an element within the top-level array, and the subsequent index(es) access elements within the sub-array. Here's an example of creating and indexing a nested array:

JavaScript

class ArrayExample {
    createNestedArray() {
        return ["apple", ["banana", "cherry"]];
    }
}

// Create an instance and call the `createNestedArray` method
const arrayExample = new ArrayExample();
const nestedArray = arrayExample.createNestedArray();
console.log(nestedArray);  // Output: ['apple', ['banana', 'cherry']]

// Access elements in the nested array
console.log(nestedArray[0]); // Output: 'apple' - top-level array element
console.log(nestedArray[1]); // Output: ['banana', 'cherry'] - sub-array
console.log(nestedArray[1][0]); // Output: 'banana' - element within the sub-array
console.log(nestedArray[1][1]); // Output: 'cherry' - another element within the sub-array

class ArrayExample {
    createNestedArray() {
        return ["apple", ["banana", "cherry"]];
    }
}

// Create an instance and call the `createNestedArray` method
const arrayExample = new ArrayExample();
const nestedArray = arrayExample.createNestedArray();
console.log(nestedArray);  // Output: ['apple', ['banana', 'cherry']]

// Access elements in the nested array
console.log(nestedArray[0]); // Output: 'apple' - top-level array element
console.log(nestedArray[1]); // Output: ['banana', 'cherry'] - sub-array
console.log(nestedArray[1][0]); // Output: 'banana' - element within the sub-array
console.log(nestedArray[1][1]); // Output: 'cherry' - another element within the sub-array

Array destructuring allows you to extract values from an array and assign them to individual variables in a single statement. This helps in breaking down complex, nested data structures into more manageable parts for easier access and manipulation.

JavaScript

// Destructuring an array for easier use
const [element1, [element2, element3]] = arrayExample.createNestedArray();
console.log(element1); // Output: 'apple'
console.log(element2); // Output: 'banana'
console.log(element3); // Output: 'cherry'

// Destructuring an array for easier use
const [element1, [element2, element3]] = arrayExample.createNestedArray();
console.log(element1); // Output: 'apple'
console.log(element2); // Output: 'banana'
console.log(element3); // Output: 'cherry'

You can also create complex nested arrays where each element can be an object containing arrays. Consider the following example with car manufacturers and their models:

JavaScript

class ArrayExample {
    createNestedObjectArray() {
        return [
            {name: "Ford", models: ["Fiesta", "Focus", "Mustang"]},
            {name: "BMW", models: ["320", "X3", "X5"]},
            {name: "Fiat", models: ["500", "Panda"]}
        ];
    }
}

// Create an instance and call the `createNestedObjectArray` method
const arrayExample = new ArrayExample();
const cars = arrayExample.createNestedObjectArray();
console.log(cars);
// Output: [
//   {name: "Ford", models: ["Fiesta", "Focus", "Mustang"]},
//   {name: "BMW", models: ["320", "X3", "X5"]},
//   {name: "Fiat", models: ["500", "Panda"]}
// ]

// Access elements in the nested object array
console.log(cars[0].models); // Output: ['Fiesta', 'Focus', 'Mustang']
console.log(cars[1].name);   // Output: 'BMW'
console.log(cars[2].models[1]); // Output: 'Panda'

class ArrayExample {
    createNestedObjectArray() {
        return [
            {name: "Ford", models: ["Fiesta", "Focus", "Mustang"]},
            {name: "BMW", models: ["320", "X3", "X5"]},
            {name: "Fiat", models: ["500", "Panda"]}
        ];
    }
}

// Create an instance and call the `createNestedObjectArray` method
const arrayExample = new ArrayExample();
const cars = arrayExample.createNestedObjectArray();
console.log(cars);
// Output: [
//   {name: "Ford", models: ["Fiesta", "Focus", "Mustang"]},
//   {name: "BMW", models: ["320", "X3", "X5"]},
//   {name: "Fiat", models: ["500", "Panda"]}
// ]

// Access elements in the nested object array
console.log(cars[0].models); // Output: ['Fiesta', 'Focus', 'Mustang']
console.log(cars[1].name);   // Output: 'BMW'
console.log(cars[2].models[1]); // Output: 'Panda'

This demonstrates how nested arrays can be used in complex structures, making it easier to organize and access data.

Understanding and Using Arrays in JavaScript

Lesson Overview

Understanding Arrays

Creating Arrays

Join the 1M+ learners on CodeSignal

Inspecting and Modifying Arrays

Operations on Arrays

Nested Arrays and Other Advanced Concepts

Lesson Summary