Forum Donate
Learn to code — free 3,000-hour curriculum
JANUARY 17, 2023 / #ARRAYS
JavaScript 2D Array – Two
Dimensional Arrays in JS
Joel Olawanle
In JavaScript programming, we are all used to creating
and working with one-dimensional arrays. These are
arrays that contain elements (elements of similar data
types or multiple data types).
But it’s also good to know that two-dimensional arrays (2D arrays)
exist in JS.
In this article, you will learn what two-dimensional arrays
Forumare and Donate
how they work in JavaScript. It is quite different from other
Learn to code — free 3,000-hour curriculum
programming languages because, technically, there is no two-
dimensional array in JavaScript.
What is a Two-Dimensional
Array?
A two-dimensional array, also known as a 2D array, is a collection of
data elements arranged in a grid-like structure with rows and
columns. Each element in the array is referred to as a cell and can be
accessed by its row and column indices/indexes.
[ a1, a2, a3, ..., an,
b1, b2, b3, ..., bn,
c1, c2, c3, ..., cn,
.
.
.
z1, z2, z3, ..., zn ]
In JavaScript, there is no direct syntax for creating 2D arrays as with
other commonly used programming languages like C, C++, and Java.
You can create two-dimensional arrays in JavaScript through jagged
arrays — an array of arrays. For example, below is what a jagged
array looks like:
let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
Forum Donate
[ z1, z2, z3, ..., zn ] ];
Learn to code — free 3,000-hour curriculum
But there is a limitation. It is important to note that two-
dimensional arrays have a fixed size. This means that once they are
created, the number of rows and columns should be fixed. Also, each
row should have a similar number of elements (columns).
For example, the array below has three rows and four elements:
let myArray = [
[0, 1, 2, 3],
[4, 5, 6, 7],
[8, 9, 0, 0]
];
The limitation is that with jagged arrays, you don't get to specify a
fixed row and column. This means that a jagged array could have m
rows, each having different numbers of elements.
let myArray = [
[0, 1, 2, 3],
[4, 5, 6, 7],
[8, 9]
];
Why Use a 2D Array in
JavaScript?
At this point, you may ask yourself about the importance of a 2D
array, especially if this is your first time reading about 2D arrays.
In JavaScript, we use two-dimensional arrays, also known as
Forum Donate
matrices, to store and manipulate data in a structured and
Learn to code — free 3,000-hour curriculum
organized manner.
They allow for the efficient storage and manipulation of large
amounts of data, such as in image or video processing,
scientific simulations, and spreadsheet applications.
Two-dimensional arrays also enable the use of matrix
operations, such as matrix multiplication and transposition,
which can simplify complex calculations and make code more
readable.
Two-dimensional arrays can represent mathematical
matrices in linear algebra and a wide range of data, such as
graphs, maps, and tables.
Two-dimensional arrays are commonly used in applications
that involve data tables, image processing, and game
development.
How to Access Elements in a
JavaScript 2D Array
Before you learn how to create 2D arrays in JavaScript, let’s first
learn how to access elements in 2D arrays.
You can access the elements of a two-dimensional array using two
indices, one for the row and one for the column. Suppose you have
the following two-dimensional array:
let MathScore = [
['John Doe', 20, 60, 'A'],
['Jane Doe', 10, 52, 'B'],
['Petr Chess', 5, 24, 'F'],
['Ling Jess', 28, 43, 'A'],
['Ben Liard', 16, 51, 'B']
Forum Donate
];
Learn to code — free 3,000-hour curriculum
The above is a jagged array in which each element holds the
student's name, test score, exam score, and grade. You can access
specific elements using the row and column index as seen in the
syntax below:
arrayName[rowIndex][columnIndex]
To better understand this, let’s convert the two-dimensional array
above to a table using [Link](arrayName) .
Note: make sure that you replace arrayName with the name of
your 2D array. In my case, it is MathScore .
You will get an output like this, showing the row and column index.
Remember that arrays are zero-indexed, meaning items are
referenced from 0, not 1.
Please note that the (index) column and row are for the
illustration that indicates the indices/indexes of the inner array.
You use two square brackets to access an element of the two-
Forum Donate
dimensional or multi-dimensional array. The first accesses the rows,
Learn to code — free 3,000-hour curriculum
while the second accesses the element in the specified row.
[Link](MathScore[4][0]); // returns 'Ben Liard'
[Link](MathScore[2][1]); // returns 5
[Link](MathScore[1][3]); // returns 'B'
[Link](MathScore[2][2]); // returns 24
How to access the first and last elements
of a 2D array
Sometimes you might need to find the first and last elements of a
two-dimensional array. You can do this using the first and last index
of both the rows and columns.
The first element will always have the row and column index of 0,
meaning you will use arrayName[0][0], .
The index of the last element can be tricky, however. For example, in
the example above, the first element is ‘John Doe’ while the last is
‘B’:
[Link](MathScore[0][0]); // returns 'John Doe'
[Link](MathScore[[Link]-1][(MathScore[[Link] -
How to add all elements of a 2D array
In some situations, all the elements of your 2D array can be
numbers, so you may need to add them together and arrive at just
one digit. You can do this using a nested loop. You will Forum
first loop Donate
through the rows, then, for each row, you loop through its elements.
Learn to code — free 3,000-hour curriculum
let numberArr = [
[10, 20, 60],
[8, 10, 52],
[15, 5, 24],
[26, 28, 43],
[12, 16, 51]
];
var sum = 0;
[Link]((row) => {
[Link]((element) => {
sum += element;
});
});
[Link]("The sum of all elements in the array is:" + sum); // retur
How to Manipulate 2D Arrays in
JavaScript
You can manipulate 2D arrays just like one-dimensional arrays using
general array methods like pop, push, splice and lots more.
Let’s start by learning how to add/insert a new row and element to
the 2D array.
How to insert an element into a 2D array
You can add an element or many elements to a 2D array with the
push() and unshift() methods.
The push() method adds elements(s) to the end of the 2D array,
while the unshift() method adds element(s) to the beginning of the
2D array.
Forum Donate
Learn to code — free 3,000-hour curriculum
let MathScore = [
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
];
[Link](["Tom Right", 30, 32, "B"]);
[Link](["Alice George", 28, 62, "A"]);
When you [Link]() or [Link]() the array, you will
see that the new rows have been added:
[
["Alice George", 28, 62, "A"],
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"],
["Tom Right", 30, 32, "B"]
]
You can also add elements to the inner array, but it’s wrong to push
to just one inner array without affecting all the array elements. This
is because two-dimensional arrays are meant to have the same
number of elements in each element array.
MathScore[0].push("B");
Instead of affecting one array element, you can add elements
Forum to allDonate
element arrays at once:
Learn to code — free 3,000-hour curriculum
let MathScore = [
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
];
[Link]((score) => {
let totalScore = score[1] + score[2];
[Link](totalScore);
});
[Link](MathScore);
This will return:
[
["John Doe", 20, 60, "A", 80],
["Jane Doe", 10, 52, "B", 62],
["Petr Chess", 5, 24, "F", 29],
["Ling Jess", 28, 43, "A", 71],
["Ben Liard", 16, 51, "B", 67]
]
You can also use the unshift() method to insert the element at the
beginning and the splice() method to insert at the middle of the
array:
let MathScore = [
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
Forum Donate
["Ben Liard", 16, 51, "B"]
];
Learn to code — free 3,000-hour curriculum
[Link](2, 0, ["Alice George", 28, 62, "A"]);
In the above, 1 is the position where you want the new array to be
inserted (remember it is zero-indexed), 0 is used so it removes no
element, and then the third parameter is the array to be added.
This is the output:
[
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Alice George", 28, 62, "A"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
]
How to remove an element from a 2D
array
You can also remove element(s) from the beginning and end of a 2D
array with the pop() and shift() methods. This is similar to how
the push() and unshift() methods work, but you do not add any
parameters to the methods this time.
let MathScore = [
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
];
Forum Donate
[Link]();
Learn to code — free 3,000-hour curriculum
[Link]();
When you [Link]() or [Link]() the array, you will
see that the first and last array elements have been removed:
[
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
]
You can also remove elements from each array element:
let MathScore = [
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
];
[Link]((score) => {
[Link]();
});
[Link](MathScore);
This will return:
[
["John Doe", 20, 60],
["Jane Doe", 10, 52],
["Petr Chess", 5, 24],
Forum Donate
["Ling Jess", 28, 43],
["Ben Liard", 16, 51]
Learn to code — free 3,000-hour curriculum
]
You can also use the shift() method to remove the element at the
beginning and the splice() method to remove array elements from
specific positions:
let MathScore = [
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
];
[Link](2, 1);
In the code above, you remove one item from position index 2 of
the MathScore 2D array. This will output:
[
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
]
Note: All JavaScript array methods will operate on a 2D array
because it is an array of arrays. You only have to be mindful when
adjusting individual elements in the elements array. You make a
similar change on all elements by looping through, even though 2D
arrays in JavaScript are not strict.
Forum Donate
How toLearn
Create 2D
to code — free Arrays
3,000-hour in
curriculum
JavaScript
There are two options for creating a multi-dimensional array. You
can create the array manually with the array literal notation, which
uses square brackets [] to wrap a list of elements separated by
commas. You can also use a nested loop.
How to create a 2D array using an array
literal
This is just like the examples we have been considering using the
following syntax:
let arrayName = [
[ elements ],
[ elements ],
[ elements ], ... ];
For example, below is a 2D array that holds information about each
student’s math score and grade:
let MathScore = [
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
];
How to create a 2D array using a nested
for loop
There are many approaches to doing this. But generally, you createDonate
Forum a
nested loop where the first loop will loop through the rows while the
Learn to code — free 3,000-hour curriculum
second loop will loop through the elements in the inner array
(columns):
let arr = [];
let rows = 4;
let columns = 3;
// creating two-dimensional array
for (let i = 0; i < rows; i++) {
arr[i] = [];
for (let j = 0; j < columns; j++) {
arr[i][j] = j;
}
}
[Link](arr);
In the code above, you will first loop through the rows. For each row,
it will create an empty array within the original array declared and
stored in variable arr . You will then create a nested loop to loop
through the columns and add individual elements.
In this example, the index for j is used and will output:
[
[0, 1, 2],
[0, 1, 2],
[0, 1, 2],
[0, 1, 2]
]
You can decide to create a number, initialize with 0, and then
increase as you loop through so you don’t have the same number for
all elements: Forum Donate
Learn to code — free 3,000-hour curriculum
let arr = [];
let rows = 4;
let columns = 3;
let value = 0;
// creating two-dimensional array
for (let i = 0; i < rows; i++) {
arr[i] = [];
for (let j = 0; j < columns; j++) {
arr[i][j] = value++;
}
}
[Link](arr);
This will return:
[
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[9, 10, 11]
]
You can also decide to create a function that accepts these values as
arguments:
const create2Darr = (rows, columns) => {
let arr = [];
let value = 0;
// creating two-dimensional array
for (let i = 0; i < rows; i++) {
arr[i] = [];
for (let j = 0; j < columns; j++) {
arr[i][j] = value++;
Forum Donate
}
}
Learn to code — free 3,000-hour curriculum
[Link](arr);
};
let rows = 4;
let columns = 3;
create2Darr(rows, columns);
How to Update Elements in 2D
Arrays in JavaScript
This is very similar to how you do it with one-dimensional arrays,
where you can update an array’s value by using the index to assign
another value.
let array = [1, 2, 3];
array[1] = 5;
[Link](array); // returns [1, 5, 3]
You can use the same approach to change an entire row or even
individual elements:
let MathScore = [
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
];
MathScore[1] = ["Alice George", 28, 62, "A"];
[Link](MathScore);
Forum Donate
This will replace the value of index 1 with this new array:
Learn to code — free 3,000-hour curriculum
[
["John Doe", 20, 60, "A"],
["Alice George", 28, 62, "A"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
]
You can update individual elements by tracking the row and column
indices and updating their values:
let MathScore = [
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
];
MathScore[2][0] = "Jack Jim";
[Link](MathScore);
This will change the name on the row with index 2 to “Jack Jim”, as
seen below:
[
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Jack Jim", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
]
Forum Donate
Wrapping Up
Learn to code — free 3,000-hour curriculum
In this article, you have learned what two-dimensional arrays are
and how they work in JavaScript.
It’s important to know that 2D arrays in JavaScript still work very
much like one-dimensional arrays, so feel free to tweak and
manipulate them with JavaScript methods.
Have fun coding!
You can access over 150 of my articles by visiting my website. You
can also use the search field to see if I've written a specific article.
Joel Olawanle
Joel Olawanle is a Software Engineer & Technical Writer
If you read this far, thank the author to show them you care.
Say Thanks
Learn to code for free. freeCodeCamp's open source curriculum has
helped more than 40,000 people get jobs as developers.
Get started
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States
Federal Tax Identification Number: 82-0779546)
Our mission: to help people learn to code for free. We accomplish this by creating thousands
Forum Donate of
videos, articles, and interactive coding lessons - all freely available to the public.
Learn to code — free 3,000-hour curriculum
Donations to freeCodeCamp go toward our education initiatives, and help pay for servers,
services, and staff.
You can make a tax-deductible donation here .
Trending Books and Handbooks
REST APIs Clean Code TypeScript
JavaScript AI Chatbots Command Line
GraphQL APIs CSS Transforms Access Control
REST API Design PHP Java
Linux React CI/CD
Docker Golang Python
[Link] Todo APIs JavaScript Classes
Front-End Libraries Express and [Link] Python Code Examples
Clustering in Python Software Architecture Programming Fundamentals
Coding Career Preparation Full-Stack Developer Guide Python for JavaScript Devs
Mobile App
Our Charity
Publication powered by Hashnode About Alumni Network Open Source Shop Support
Sponsors Academic Honesty Code of Conduct Privacy Policy Terms of Service Copyright Policy