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.
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:
JavaScript1// Map with grades as keys and arrays of students as values 2const schoolDirectory = new Map([ 3 ['Grade1', ['Amy', 'Bobby', 'Charlie']], 4 ['Grade2', ['David', 'Eve', 'Frank']], 5 ['Grade3', ['George', 'Hannah', 'Ivy']] 6]); 7 8// Logs the Grade1 array in the Map 9console.log(schoolDirectory.get('Grade1')); // Output: ['Amy', 'Bobby', 'Charlie']
Just like their non-nested versions, creating nested structures is straightforward.
Nested Map:
JavaScript1// Map within a Map 2const nestedMap = new Map([ 3 ['fruit', new Map([ 4 ['apple', 'red'], // key-value pair within the 'fruit' map 5 ['banana', 'yellow'] // another key-value pair within the 'fruit' map 6 ])], 7 ['vegetable', new Map([ 8 ['carrot', 'orange'], 9 ['spinach', 'green'] 10 ])] 11]); 12 13// Logs the nested map 14console.log(nestedMap);
Nested Array:
JavaScript1// Arrays within an array 2const nestedArray = [ 3 [1, 2, 3], // inner array within the outer array 4 [4, 5, 6], // another inner array within the outer array 5 [7, 8, 9] // third inner array within the outer array 6]; 7 8// Logs the nested array 9console.log(nestedArray);
Nested Maps and Arrays:
JavaScript1// Arrays within a Map 2const arrayMap = new Map([ 3 ['numbers', [1, 2, 3]], // keys associated with arrays 4 ['letters', ['a', 'b', 'c']] 5]); 6 7// Logs the Map of arrays 8console.log(arrayMap);
The retrieval of values from nested Maps or arrays follows rules similar to those for their non-nested counterparts.
From Nested Map:
JavaScript1// Map within a Map 2const nestedMap = new Map([ 3 ['fruit', new Map([ 4 ['apple', 'red'], // key-value pair within the 'fruit' map 5 ['banana', 'yellow'] // another key-value pair within the 'fruit' map 6 ])], 7 ['vegetable', new Map([ 8 ['carrot', 'orange'], 9 ['spinach', 'green'] 10 ])] 11]); 12 13// Accessing apple's color from the nested Map 14console.log(nestedMap.get('fruit').get('apple')); // Output: 'red'
From Nested Array:
JavaScript1// Arrays within an array 2const nestedArray = [ 3 [1, 2, 3], // inner array within the outer array 4 [4, 5, 6], // another inner array within the outer array 5 [7, 8, 9] // third inner array within the outer array 6]; 7 8// Accessing the 3rd value from the 2nd array in the nested array 9console.log(nestedArray[1][2]); // Output: 6
From Both:
JavaScript1// Arrays within a Map 2const arrayMap = new Map([ 3 ['numbers', [1, 2, 3]], // keys associated with arrays 4 ['letters', ['a', 'b', 'c']] 5]); 6 7// Accessing the second letter in the 'letters' array in arrayMap 8console.log(arrayMap.get('letters')[1]); // Output: 'b'
While retrieving data from nested Maps or arrays, it's important to handle potential errors gracefully. This can be done using conditional checks or try-catch blocks.
Error Handling with Nested Maps and Arrays:
For nested Maps and arrays, check the existence of keys and valid indices.
JavaScript1// Safely accessing the color of apple 2if (nestedMap.has('fruit') && nestedMap.get('fruit').has('apple')) { 3 console.log(nestedMap.get('fruit').get('apple')); // Output: 'red' 4} else { 5 console.error('The key "apple" or "fruit" does not exist.'); 6} 7 8// Safely accessing the 3rd value from the 2nd array 9if (nestedArray[1] && nestedArray[1][2] !== undefined) { 10 console.log(nestedArray[1][2]); // Output: 6 11} else { 12 console.error('The index is out of bounds.'); 13} 14 15// Safely accessing the second letter in the 'letters' array 16if (arrayMap.has('letters') && arrayMap.get('letters')[1] !== undefined) { 17 console.log(arrayMap.get('letters')[1]); // Output: 'b' 18} else { 19 console.error('The key "letters" or index is out of bounds.'); 20}
Using try-catch for Error Handling:
Alternatively, you can use try-catch blocks to handle errors.
JavaScript1try { 2 console.log(nestedMap.get('fruit').get('apple')); // Output: 'red' 3} catch (error) { 4 console.error('Error accessing nested key:', error.message); 5} 6 7try { 8 console.log(nestedArray[1][2]); // Output: 6 9} catch (error) { 10 console.error('Error accessing nested array:', error.message); 11} 12 13try { 14 console.log(arrayMap.get('letters')[1]); // Output: 'b' 15} catch (error) { 16 console.error('Error accessing map with array:', error.message); 17}
By implementing these error handling techniques, you can ensure your code is more robust and resilient against common issues with nested data structures.
The modification of nested arrays and Maps is similar to that of non-nested versions.
JavaScript1// Modifying spinach's color to red 2nestedMap.get('vegetable').set('spinach', 'red'); 3 4// Adding 10 to the first array in nested array 5nestedArray[0].push(10); 6 7// Adding cherry to the 'fruit' Map in nestedMap 8nestedMap.get('fruit').set('cherry', 'red'); 9 10// Deleting the 2nd value from the 3rd array in nested array 11nestedArray[2].splice(1, 1); // Remove 1 element at index 1 12 13// Deleting apple from the 'fruit' Map in nestedMap 14nestedMap.get('fruit').delete('apple');
Bravo! You've made a journey through nested arrays and Maps, terms that are becoming increasingly common in the data-intensive programming world. We've learned how to create, access, and modify values in these complex structures. Up next, we have hands-on practice sessions to solidify your understanding of these concepts. Hold on to your hats!