Compound Data Structures in JavaScript

Introduction

Welcome to our exploration of Compound Data Structures in JavaScript . Having navigated through Maps, Sets, and Arrays, we'll delve into nested Maps and arrays . These structures enable us to handle complex and hierarchical data, which is typical in real-world scenarios. Nested data structures are commonly used to represent data models like organizational charts, product categories, and multi-dimensional datasets. This lesson will guide you through a recap of the basics, as well as the creation and modification of nested Maps and arrays.

Recap: Maps, Arrays, and Understanding Nested Structures

As a quick recap, Arrays are mutable, ordered collections, while Maps are collections of key-value pairs with maintained insertion order. These structures can be nested. Here's a simple example of a school directory: JavaScript // Map with grades as keys and arrays of students as values const schoolDirectory = new Map([['Grade1', ['Amy', 'Bobby', 'Charlie']], ['Grade2', ['David', 'Eve', 'Frank']], ['Grade3', ['George', 'Hannah', 'Ivy']]]); // Logs the Grade1 array in the Map console.log(schoolDirectory.get('Grade1')); // Output: ['Amy', 'Bobby', 'Charlie'] // Map with grades as keys and arrays of students as values const schoolDirectory = new Map([['Grade1', ['Amy', 'Bobby', 'Charlie']], ['Grade2', ['David', 'Eve', 'Frank']], ['Grade3', ['George', 'Hannah', 'Ivy']]]); // Logs the Grade1 array in the Map console.log(schoolDirectory.get('Grade1')); // Output: ['Amy', 'Bobby', 'Charlie']

Creating Nested Maps and Arrays

Just like their non-nested versions, creating nested structures is straightforward. Nested Map: JavaScript // Map within a Map const nestedMap = new Map([['fruit', new Map([['apple', 'red'], // key-value pair within the 'fruit' map ['banana', 'yellow'] // another key-value pair within the 'fruit' map])], ['vegetable', new Map([['carrot', 'orange'], ['spinach', 'green']])]]); // Logs the nested map console.log(nestedMap); // Map within a Map const nestedMap = new Map([['fruit', new Map([['apple', 'red'], // key-value pair within the 'fruit' map ['banana', 'yellow'] // another key-value pair within the 'fruit' map])], ['vegetable', new Map([['carrot', 'orange'], ['spinach', 'green']])]]); // Logs the nested map console.log(nestedMap); Nested Array: JavaScript // Arrays within an array const nestedArray = [[1, 2, 3], // inner array within the outer array [4, 5, 6], // another inner array within the outer array [7, 8, 9] // third inner array within the outer array]; // Logs the nested array console.log(nestedArray); // Arrays within an array const nestedArray = [[1, 2, 3], // inner array within the outer array [4, 5, 6], // another inner array within the outer array [7, 8, 9] // third inner array within the outer array]; // Logs the nested array console.log(nestedArray); Nested Maps and Arrays: JavaScript // Arrays within a Map const arrayMap = new Map([['numbers', [1, 2, 3]], // keys associated with arrays ['letters', ['a', 'b', 'c']]]); // Logs the Map of arrays console.log(arrayMap); // Arrays within a Map const arrayMap = new Map([['numbers', [1, 2, 3]], // keys associated with arrays ['letters', ['a', 'b', 'c']]]); // Logs the Map of arrays console.log(arrayMap);

Accessing Values in Nested Structures

Join the 1M+ learners on CodeSignal

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

JavaScript

// Map with grades as keys and arrays of students as values
const schoolDirectory = new Map([
    ['Grade1', ['Amy', 'Bobby', 'Charlie']],
    ['Grade2', ['David', 'Eve', 'Frank']],
    ['Grade3', ['George', 'Hannah', 'Ivy']]
]);

// Logs the Grade1 array in the Map
console.log(schoolDirectory.get('Grade1')); // Output: ['Amy', 'Bobby', 'Charlie']

JavaScript

// Map within a Map
const nestedMap = new Map([
    ['fruit', new Map([
        ['apple', 'red'],  // key-value pair within the 'fruit' map
        ['banana', 'yellow']  // another key-value pair within the 'fruit' map
    ])],
    ['vegetable', new Map([
        ['carrot', 'orange'],
        ['spinach', 'green']
    ])]
]);

// Logs the nested map
console.log(nestedMap);

JavaScript

// Arrays within an array
const nestedArray = [
    [1, 2, 3],  // inner array within the outer array
    [4, 5, 6],  // another inner array within the outer array
    [7, 8, 9]   // third inner array within the outer array
];

// Logs the nested array
console.log(nestedArray);

JavaScript

// Arrays within a Map
const arrayMap = new Map([
    ['numbers', [1, 2, 3]],  // keys associated with arrays
    ['letters', ['a', 'b', 'c']]
]);

// Logs the Map of arrays
console.log(arrayMap);

JavaScript

// Map within a Map
const nestedMap = new Map([
    ['fruit', new Map([
        ['apple', 'red'],  // key-value pair within the 'fruit' map
        ['banana', 'yellow']  // another key-value pair within the 'fruit' map
    ])],
    ['vegetable', new Map([
        ['carrot', 'orange'],
        ['spinach', 'green']
    ])]
]);

// Accessing apple's color from the nested Map
console.log(nestedMap.get('fruit').get('apple')); // Output: 'red'

// Map within a Map
const nestedMap = new Map([
    ['fruit', new Map([
        ['apple', 'red'],  // key-value pair within the 'fruit' map
        ['banana', 'yellow']  // another key-value pair within the 'fruit' map
    ])],
    ['vegetable', new Map([
        ['carrot', 'orange'],
        ['spinach', 'green']
    ])]
]);

// Accessing apple's color from the nested Map
console.log(nestedMap.get('fruit').get('apple')); // Output: 'red'

JavaScript

// Arrays within an array
const nestedArray = [
    [1, 2, 3],  // inner array within the outer array
    [4, 5, 6],  // another inner array within the outer array
    [7, 8, 9]  // third inner array within the outer array
];

// Accessing the 3rd value from the 2nd array in the nested array
console.log(nestedArray[1][2]); // Output: 6

// Arrays within an array
const nestedArray = [
    [1, 2, 3],  // inner array within the outer array
    [4, 5, 6],  // another inner array within the outer array
    [7, 8, 9]  // third inner array within the outer array
];

// Accessing the 3rd value from the 2nd array in the nested array
console.log(nestedArray[1][2]); // Output: 6

JavaScript

// Arrays within a Map
const arrayMap = new Map([
    ['numbers', [1, 2, 3]],  // keys associated with arrays
    ['letters', ['a', 'b', 'c']]
]);

// Accessing the second letter in the 'letters' array in arrayMap
console.log(arrayMap.get('letters')[1]); // Output: 'b'

// Arrays within a Map
const arrayMap = new Map([
    ['numbers', [1, 2, 3]],  // keys associated with arrays
    ['letters', ['a', 'b', 'c']]
]);

// Accessing the second letter in the 'letters' array in arrayMap
console.log(arrayMap.get('letters')[1]); // Output: 'b'

JavaScript

// Safely accessing the color of apple
if (nestedMap.has('fruit') && nestedMap.get('fruit').has('apple')) {
    console.log(nestedMap.get('fruit').get('apple')); // Output: 'red'
} else {
    console.error('The key "apple" or "fruit" does not exist.');
}

// Safely accessing the 3rd value from the 2nd array
if (nestedArray[1] && nestedArray[1][2] !== undefined) {
    console.log(nestedArray[1][2]); // Output: 6
} else {
    console.error('The index is out of bounds.');
}

// Safely accessing the second letter in the 'letters' array
if (arrayMap.has('letters') && arrayMap.get('letters')[1] !== undefined) {
    console.log(arrayMap.get('letters')[1]); // Output: 'b'
} else {
    console.error('The key "letters" or index is out of bounds.');
}

// Safely accessing the color of apple
if (nestedMap.has('fruit') && nestedMap.get('fruit').has('apple')) {
    console.log(nestedMap.get('fruit').get('apple')); // Output: 'red'
} else {
    console.error('The key "apple" or "fruit" does not exist.');
}

// Safely accessing the 3rd value from the 2nd array
if (nestedArray[1] && nestedArray[1][2] !== undefined) {
    console.log(nestedArray[1][2]); // Output: 6
} else {
    console.error('The index is out of bounds.');
}

// Safely accessing the second letter in the 'letters' array
if (arrayMap.has('letters') && arrayMap.get('letters')[1] !== undefined) {
    console.log(arrayMap.get('letters')[1]); // Output: 'b'
} else {
    console.error('The key "letters" or index is out of bounds.');
}

JavaScript

try {
    console.log(nestedMap.get('fruit').get('apple')); // Output: 'red'
} catch (error) {
    console.error('Error accessing nested key:', error.message);
}

try {
    console.log(nestedArray[1][2]); // Output: 6
} catch (error) {
    console.error('Error accessing nested array:', error.message);
}

try {
    console.log(arrayMap.get('letters')[1]); // Output: 'b'
} catch (error) {
    console.error('Error accessing map with array:', error.message);
}

try {
    console.log(nestedMap.get('fruit').get('apple')); // Output: 'red'
} catch (error) {
    console.error('Error accessing nested key:', error.message);
}

try {
    console.log(nestedArray[1][2]); // Output: 6
} catch (error) {
    console.error('Error accessing nested array:', error.message);
}

try {
    console.log(arrayMap.get('letters')[1]); // Output: 'b'
} catch (error) {
    console.error('Error accessing map with array:', error.message);
}

JavaScript

// Modifying spinach's color to red
nestedMap.get('vegetable').set('spinach', 'red');

// Adding 10 to the first array in nested array
nestedArray[0].push(10);

// Adding cherry to the 'fruit' Map in nestedMap
nestedMap.get('fruit').set('cherry', 'red');

// Deleting the 2nd value from the 3rd array in nested array
nestedArray[2].splice(1, 1); // Remove 1 element at index 1

// Deleting apple from the 'fruit' Map in nestedMap
nestedMap.get('fruit').delete('apple');

// Modifying spinach's color to red
nestedMap.get('vegetable').set('spinach', 'red');

// Adding 10 to the first array in nested array
nestedArray[0].push(10);

// Adding cherry to the 'fruit' Map in nestedMap
nestedMap.get('fruit').set('cherry', 'red');

// Deleting the 2nd value from the 3rd array in nested array
nestedArray[2].splice(1, 1); // Remove 1 element at index 1

// Deleting apple from the 'fruit' Map in nestedMap
nestedMap.get('fruit').delete('apple');

JavaScript

// Map within a Map
const nestedMap = new Map([
    ['fruit', new Map([
        ['apple', 'red'],  // key-value pair within the 'fruit' map
        ['banana', 'yellow']  // another key-value pair within the 'fruit' map
    ])],
    ['vegetable', new Map([
        ['carrot', 'orange'],
        ['spinach', 'green']
    ])]
]);

// Accessing apple's color from the nested Map
console.log(nestedMap.get('fruit').get('apple')); // Output: 'red'

JavaScript

// Arrays within an array
const nestedArray = [
    [1, 2, 3],  // inner array within the outer array
    [4, 5, 6],  // another inner array within the outer array
    [7, 8, 9]  // third inner array within the outer array
];

// Accessing the 3rd value from the 2nd array in the nested array
console.log(nestedArray[1][2]); // Output: 6

JavaScript

// Arrays within a Map
const arrayMap = new Map([
    ['numbers', [1, 2, 3]],  // keys associated with arrays
    ['letters', ['a', 'b', 'c']]
]);

// Accessing the second letter in the 'letters' array in arrayMap
console.log(arrayMap.get('letters')[1]); // Output: 'b'

JavaScript

// Safely accessing the color of apple
if (nestedMap.has('fruit') && nestedMap.get('fruit').has('apple')) {
    console.log(nestedMap.get('fruit').get('apple')); // Output: 'red'
} else {
    console.error('The key "apple" or "fruit" does not exist.');
}

// Safely accessing the 3rd value from the 2nd array
if (nestedArray[1] && nestedArray[1][2] !== undefined) {
    console.log(nestedArray[1][2]); // Output: 6
} else {
    console.error('The index is out of bounds.');
}

// Safely accessing the second letter in the 'letters' array
if (arrayMap.has('letters') && arrayMap.get('letters')[1] !== undefined) {
    console.log(arrayMap.get('letters')[1]); // Output: 'b'
} else {
    console.error('The key "letters" or index is out of bounds.');
}

JavaScript

try {
    console.log(nestedMap.get('fruit').get('apple')); // Output: 'red'
} catch (error) {
    console.error('Error accessing nested key:', error.message);
}

try {
    console.log(nestedArray[1][2]); // Output: 6
} catch (error) {
    console.error('Error accessing nested array:', error.message);
}

try {
    console.log(arrayMap.get('letters')[1]); // Output: 'b'
} catch (error) {
    console.error('Error accessing map with array:', error.message);
}

JavaScript

// Modifying spinach's color to red
nestedMap.get('vegetable').set('spinach', 'red');

// Adding 10 to the first array in nested array
nestedArray[0].push(10);

// Adding cherry to the 'fruit' Map in nestedMap
nestedMap.get('fruit').set('cherry', 'red');

// Deleting the 2nd value from the 3rd array in nested array
nestedArray[2].splice(1, 1); // Remove 1 element at index 1

// Deleting apple from the 'fruit' Map in nestedMap
nestedMap.get('fruit').delete('apple');