Nested Arrays in JavaScript with an example

A nested array is simply an array that contains other arrays. To understand nested arrays in JavaScript, let's use the example of modeling a collection of employees, where each employee has properties like id, name, and age.

Each inner array can represent an employee, and within each inner array, we can store the id, name, and age of that employee.

 

Nested array representing a collection of employees

const employees = [
    [1, "Alice", 30],    // Employee 1: [id, name, age]
    [2, "Bob", 25],      // Employee 2: [id, name, age]
    [3, "Charlie", 28]   // Employee 3: [id, name, age]
];

 

Each element of the employees array is the inner array. Each inner array represents a single employee with three elements: id, name, and age.

 

Accessing array elements

employees[0]: Return the first Employee in the array
employee[1][1]: Return second Employee name
employees[2][2]: Third Employee Age

 

Add employee to the new array

employees.push([4, "David", 35]);

Updating first employee age to 45

employees[0][2] = 45;

Remove first employee Alice from the collection

employees.shift();

Find the below working application.

 

nestedArray.js

// Nested array representing a collection of employees
const employees = [
    [1, "Alice", 30],    // Employee 1: [id, name, age]
    [2, "Bob", 25],      // Employee 2: [id, name, age]
    [3, "Charlie", 28]   // Employee 3: [id, name, age]
];

// Accessing the nested arrays
console.log('All employees are');
console.log(employees)

// Accessing specific employee details
console.log(`\nFirst Employee in the array ${employees[0]}`);      
console.log(`Second Employee name ${employees[1][1]}`); 
console.log(`Third Employee Age ${employees[2][2]}`);

// Add new employee to the nested array
// Adding a new employee to the array
employees.push([4, "David", 35]);
console.log('\nAll employees are');
console.log(employees)

// Updating Alice Age to 45
employees[0][2] = 45;
console.log('\nUpdated Alice Age to 45')
console.log(`Alice Details : ${employees[0]}`);  // Prints: [3, "Charlie", 29]

// Remove first employee Alice from the collection
console.log('\nRemove first employee Alice from the collection')
employees.shift();
console.log('All employees are');
console.log(employees)

Output

All employees are
[ [ 1, 'Alice', 30 ], [ 2, 'Bob', 25 ], [ 3, 'Charlie', 28 ] ]

First Employee in the array 1,Alice,30
Second Employee name Bob
Third Employee Age 28

All employees are
[
  [ 1, 'Alice', 30 ],
  [ 2, 'Bob', 25 ],
  [ 3, 'Charlie', 28 ],
  [ 4, 'David', 35 ]
]

Updated Alice Age to 45
Alice Details : 1,Alice,45

Remove first employee Alice from the collection
All employees are
[ [ 2, 'Bob', 25 ], [ 3, 'Charlie', 28 ], [ 4, 'David', 35 ] ]

Note

While nested arrays are simple, using objects inside an array definitely make the code more readable and easier to manage, especially as the data structure becomes more complex.

 

objectsInArray.js

const employees = [
    { id: 1, name: "Alice", age: 30 },
    { id: 2, name: "Bob", age: 25 },
    { id: 3, name: "Charlie", age: 28 }
];

console.log('All employees');
console.log(employees);

// Accessing Bob's age
console.log(`\nBob's age : ${employees[1].age}`);

console.log('\nAdding a new employee');
employees.push({ id: 4, name: "David", age: 35 });
console.log('All employees')
console.log(employees);

Output

All employees
[
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Charlie', age: 28 }
]

Bob's age : 25

Adding a new employee
All employees
[
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Charlie', age: 28 },
  { id: 4, name: 'David', age: 35 }
]

Previous                                                    Next                                                    Home