JavaScript Tutorial

Home / JavaScript Tutorial / JavaScript Multidimensional Array

JavaScript Multidimensional Array

Summary: in this tutorial, you will learn how to work with JavaScript multidimensional array.

Introduction to JavaScript multidimensional array

JavaScript does not provide the multidimensional array natively. However, you can create a multidimensional array by defining an array of elements, where each element is also another array. For this reason, we can say that a JavaScript multidimensional array is an array of arrays.

The easiest way to define a multidimensional array is to use the array literal notation. The following example defines two-dimensional array named activities.

1
2
3
4
5
6
7
var activities = [
    [‘Work’, 9],
    [‘Eat’, 2],
    [‘Commute’, 2],
    [‘Play Game’, 2],
    [‘Sleep’, 7]
];

In the activities array, the first dimension represents the activity and the second one shows the number of hours spent per day for each.

The following figure illustrates the activities array:

JavaScript Multidimensional Array Example

To access an element of the multidimensional array, you first use square brackets to access an element of the outer array which returns an inner array; and the use another square bracket to access the element of the inner array.

The following example returns the second element of the first inner array in the activities array above.

Accessing JavaScript Multidimensional Array Element

1
console.log(activities[0][1]); // 9

Adding an element to the JavaScript multidimensional array

You can use the array methods to manipulate a multidimensional array as normal. For example, to add a new element to a multidimensional array, you use the push() method as in the following example.

1
activities.push([‘Study’,2]);

Adding an Element to JavaScript Multidimensional Array

This example calculates the percentage of the hours spent for each activity and append the percentage to the inner array.

1
2
3
4
5
for (var i = 0; i < activities.length; i++)
    var percentage = ((activities[i][1] / 24) * 100).toFixed();
    activities[i][2] = percentage + ‘%’;
console.log(activities.join(‘\n’));

The following shows the output in the web console.

1
2
3
4
5
6
Work,9,38%
Eat,2,8%
Commute,2,8%
Play Game,2,8%
Sleep,7,29%
Date,2,8%

Adding elements to the inner array

Removing an element from the JavaScript multidimensional array

To remove an element from an array, you use the pop() method.For example, the following statement removes the last element of the activities array.

1
2
activities.pop();
console.log(activities.join(‘\n’));

The output of the script in the web console is as follows:

1
2
3
4
5
Work,9,38%
Eat,2,8%
Commute,2,8%
Play Game,2,8%
Sleep,7,29%

Removing an Element from JavaScript Multidimensional Array

Similarly, you can remove the elements from the inner array of the multidimensional array by using the pop() method.

Here is an example of removing the percentage element from the inner arrays of the activities array.

1
2
3
4
for (var i = 0; i < activities.length; i++)
    activities.pop(2);
console.log(activities.join(‘\n’));
1
2
3
4
5
Work,9
Eat,2
Commute,2
Play Game,2
Sleep,7

Removing Elements from JavaScript Multidimensional Array

Iterating a JavaScript multidimensional array

To iterate a multidimensional array, you use a nested for loop as in the following example.

1
2
3
4
5
6
7
8
9
// loop the outer array
for (var i = 0; i < activities.length; i++)
    // get the size of the inner array
    var innerArrayLength = activities[i].length;
    // loop the inner array
    for (var j = 0; j < innerArrayLength; j++)
        console.log(‘[‘ + i + ‘,’ + j + ‘] = ‘ + activities[i][j]);
    

The first loop iterates over the elements of the outer array, while the nested one iterates over the inner array.

Looping a JavaScript Multidimensional Array

The following shows the output of the script in the web console.

1
2
3
4
5
6
7
8
9
10
[0,0] = Work
[0,1] = 9
[1,0] = Eat
[1,1] = 2
[2,0] = Commute
[2,1] = 2
[3,0] = Play Game
[3,1] = 2
[4,0] = Sleep
[4,1] = 7

In this tutorial, you have learned how to use an array of arrays to create a JavaScript multidimensional array.

  • Was this tutorial helpful ?
  • Yes     No
Previous Tutorial: 3 Pragmatic Uses of JavaScript Array Slice Method
Next Tutorial: JavaScript Function

Getting Started

  • What is JavaScript
  • JavaScript Hello World

JavaScript Fundamentals

  • JavaScript Syntax
  • JavaScript Variables
  • JavaScript Data Types
  • Primitive vs. Reference Values
  • JavaScript Boolean vs. boolean

Control Flow

  • JavaScript if
  • JavaScript switch
  • JavaScript while
  • JavaScript do-while
  • JavaScript for Loop
  • JavaScript break
  • JavaScript continue

JavaScript Array

  • JavaScript Array
  • Javascript Stack: push()  pop()
  • JavaScript Queue: push()  shift()
  • Manipulating Elements: splice()
  • Sorting Elements: sort()
  • Locating Elements: indexOf()
  • Testing Elements: every()  some()
  • Filtering Array Elements: filter()
  • Reducing an Array Into a Value: reduce()
  • Executing a Callback on Elements: forEach()
  • Transforming Array Elements: map()
  • JavaScript Multidimensional Array

JavaScript Function

  • JavaScript Function
  • JavaScript Function Type
  • JavaScript Recursive Function
  • JavaScript Closure
  • JavaScript Passing By Value

JavaScript Objects

  • Understanding JavaScript Objects
  • JavaScript Prototype
  • JavaScript Object Creation Patterns
  • JavaScript Prototypal Inheritance
  • JavaScript this Keyword

About JavaScript Tutorial

The JavaScript Tutorial website helps you learn JavaScript programming from scratch quickly and effectively.

Recent Tutorials

  • Recipes
  • Padding a String to a Certain Length with Another String
  • What is JavaScript
  • Setting Up an ES6 Project Using Babel
  • A Comprehensive Look at ES6 Modules

Site Links

  • About Us
  • Contact Us
  • Privacy Policy
O’Reilly logo

Stay ahead with the world’s most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training,
learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Oops!

404 error

The requested URL was not found on this server.