javascript create array nested

Simple Javascript Nested Array (Create Push Pop Loop Check)

Welcome to a quick tutorial on the nested array in Javascript. So you have finally met the worthy opponent called the multidimensional array, and this “array in an array” thing sure is confusing. How do we create one? Add elements to it? Find an element inside? Let us walk through some examples – Read on!

TABLE OF CONTENTS

Nested array examples.

All right, let us now get into the various examples on how to work with a nested array in Javascript.

1) HOW TO DEFINE A NESTED ARRAY

Please enable JavaScript

When it comes to creating a nested array, some beginners immediately foam in the mouth and go on a “very difficult trance”. No idea why.

• We can literally put almost anything in an array – Strings, numbers, boolean, objects, functions, and other arrays.
• A nested array is still an array – It just so happens that we put another array or object inside it.

2) HOW TO ACCESS A NESTED ARRAY

When it comes to accessing a nested array, some beginners immediately go into brain freeze. No idea why. In this example:

• arr[0] is an array. So “as usual”, arr[0][0] refers to the first element, arr[0][1] refers to the second element.
• arr[1] is an object. So “as usual”, use arr[1]["PROPERTY"] to access it.
• arr[2] is a function. So “as usual”, we call the function using arr[2]() .

If it is too confusing, think this way – let nested = arr[0] . Yep, nested is now referring to the nested array. Work on it as if it were a “flat array”.

3) NESTED ARRAY PUSH & POP

Nested arrays are still arrays. There’s nothing “special” about it, we can push() and pop() as usual. Of course, the many other functions and properties will also work – length , splice() , shift() , and unshift() .

4) LOOP OR TRAVERSE A NESTED ARRAY

Sadly, running through a nested array is not as simple as using a for loop… To traverse a nested array, we will have to use a recursive function.

5) CHECK IF VALUE EXIST IN A NESTED ARRAY

Yep – If you are looking to check if a value exists in a nested array, the usual ARRAY.find() will not quite work. We have to use a recursive function to check through all the elements again.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist , just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

LINKS & REFERENCES

• Javascript Array – MDN
• JavaScript: Multidimensional Array With Push Pop – Tutsmake
• Multidimensional Array – Javascript Tutorial
• How To Flatten Arrays In Javascript – Code Boxx

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “Simple Javascript Nested Array (Create Push Pop Loop Check)”

This is the most useful tutorial about arrays in js I’ve ever found! Thank you

Leave a Comment Cancel Reply

Your email address will not be published. Required fields are marked *

DEV Community

Posted on Jan 5, 2021

Understanding Nested Arrays in JavaScript

An array is an ordered collection of values : each value is called an element , and each element has a numeric position in the array, known as its index .

JavaScript lets us create arrays inside array called Nested Arrays . Nested Arrays have one or many arrays as the element of an array. This might be little confusing in definition but it is very interesting once we dig inside.

Creating a Nested Array:

There are three syntax to create an array in JavaScript. Let’s create nested arrays using those three methods to get an idea of Nested Arrays. This one is just equating the variable to the array.

Second one is using the array method new Array() .

And the last one is using the Array() which is similar to the new Array() .

Note that all these methods yield the same result. Now that we know how to create the nested arrays, let’s see how to access the elements of the Nested Arrays.

Understanding how indices are assigned to the elements:

Similarly we can access any element with the help of index.

Flatten the nested Array:

There are ways to flatten the nested array. We can turn it into normal array by using the below methods.

1) Using the method Array.flat()

Array.flat() method produces a new array by concatenating all sub arrays recursively up to the depth you specify. Simply put, if you have an array of arrays (maybe more arrays within them), flat() will help you to join all entries together into a single array .

2) Using Array.toString() and String.split() methods

We can convert the array to string and the split it using .split() method. That way we get the array.

Top comments (3)

Templates let you quickly answer FAQs or store snippets for re-use.

• Location Milford, TX 76670
• Joined Dec 28, 2022

After creating a JavaScript nested array, We can use the “push()” and “splice()” method for adding elements. Thanks for sharing. Saas vashikaran mantra

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Android's `monospace` font is not monospace

Maxim Saplin - Oct 23

Asynchronous JavaScript: Promises vs. Callbacks

Rowsan Ali - Oct 27

Building a Simple Note-Taking App with React

Kartik Budhraja - Oct 26

Web Scraping For Finance Data

Serpdog - Oct 22

Once suspended, sanchithasr will not be able to comment or publish posts until their suspension is removed.

Once unsuspended, sanchithasr will be able to comment and publish posts again.

Once unpublished, all posts by sanchithasr will become hidden and only accessible to themselves.

If sanchithasr is not suspended, they can still re-publish their posts from their dashboard.

Once unpublished, this post will become invisible to the public and only accessible to Sanchithasr.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community safe. Here is what you can do to flag sanchithasr:

sanchithasr consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy.

Unflagging sanchithasr will restore default visibility to their posts.

We're a place where coders share, stay up-to-date and grow their careers.

• Skip to main content
• Skip to primary sidebar
• Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

Nested Arrays in JavaScript

10 June 2008 / 14 Comments

In previous tutorials we’ve taken a look at JavaScript array basics , manipulating arrays , and sorting arrays . So far, all the arrays we’ve dealt with have been “flat” arrays; each array element contains a single value, such as a number, string, or object.

However, like most programming languages, JavaScript lets you create arrays inside arrays, known as nested arrays . In a nested array, the elements of one array are themselves arrays. For example:

Here we’ve created an array of 2 elements. Each element is in turn an array containing 3 elements. To access the elements of the inner arrays, you simply use two sets of square brackets. For example, pets[1][2] accesses the 3rd element of the array inside the 2nd element of the pets array.

You can nest arrays as deeply as you like. For example, here we’ve created a top-level array called animals , into which we’ve placed the above pets array, as well as a similar dinosaurs array — that’s 3 levels of nesting in total:

Looping through nested arrays

Of course, once you start nesting arrays you quickly end up with lots of array elements. The easiest way to work with large arrays is to use loops . And in order to process nested arrays, you need to use nested loops.

For example, the following code loops through the animals nested array we created above, displaying each of the animals, along with their ages and types:

You now know how to create and use nested arrays in JavaScript. You’ll find nested arrays are useful when you want to store highly structured data — such as our animals example above — and when you’re creating multidimensional data structures (commonly used in games and graphics applications). Enjoy!

Reader Interactions

31 January 2013 at 1:25 pm

19 March 2020 at 11:13 pm

Mr Matt you only put down the solution for your nested loop.. can u break it down in detail so some of us can really understand and apply .. thanks alot.

18 April 2019 at 11:56 am

Imagine something like:

const newItem = [‘item 1’, ‘item 0’, ‘item 1’, ‘item 2’, ‘item 1’, ‘item 0’];

If I want to remove all ‘item 1’ I can use:

for(let i = newItem.length-1; i–;){ if (newItem[i] === “item 1”) newItem.splice(i, 1); }

The question is if I have an array inside another array how can I do? const newItem = [ [‘item 1’, ‘item 0’, ‘item 1’], [‘item 2’, ‘item 1’, ‘item 0’] ];

29 April 2019 at 11:44 pm

Nested loops should do the trick. Place a for loop inside another for loop. The outer loop iterates though the items in the outer array; the inner loop iterates through the items in the inner arrays.

26 February 2020 at 6:55 pm

@Toni, You may want to use nested loop like,

15 April 2020 at 11:17 am

Hi Mat, I got a trick problem. I extract from two differen Databases in different environments Data to arrays. I merge this two arrays an get a wrong json . The content ist there as

If I read the result

Same problem I have when I get the result in TWO Arrays like

15 April 2020 at 11:26 am

Can you post the full code on something like https://codesandbox.io so I can see the problem?

16 April 2020 at 6:12 am

I load a zip with all informatios on my server. you can download it here.

http://dmdg.io/dmdg.zip

Hope the errordescription gave you all information yo need.

Kind regards Gert

5 November 2020 at 4:49 pm

How i can print all the elements array. For example: Input: Let arr= [1,2,[3,4,[5,6,7]]]; Output : 1234567

30 June 2021 at 4:22 pm

[1,2,[3,4,[5,6,7]]].flat(Infinity).join(“”); // 1234567

4 October 2021 at 2:33 pm

var = arr [[{},{},{}],[{},{},{}],[{},{},{}],[{},{},{}],[{},{},{}],]; how to access inside of obj name etc

10 November 2021 at 2:22 pm

Very helpful. Thank you!

18 January 2022 at 4:15 am

I could kiss you!! LOL. A whole day to discover you…

21 March 2023 at 7:03 am

I have a question EmpList[{“key”:”value”, “key1″:”value1”},{“firstname”:”lastname”}];

How do I get details of value and lastname.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Contact Matt

• Call Me: +61 2 8006 0622

Follow Matt

Copyright © 1996-2023 Elated Communications. All rights reserved. Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits

Maker's Aid

Nested Arrays in JavaScript, Explained

You asked for it, we delivered. We explain nested arrays in a way that anyone, from beginner to expert, can understand.

The Array in JavaScript, as with arrays in other scripting and programming languages, is an object that lets you store multiple items in an ordered list, with each item having its own index.

Suppose you’re making a grocery list with apples, bananas, and oranges. Instead of storing each item in its own variable, you can store them in an array:

Since the array is an ordered list of items, each of the items in your groceryList array are assigned indices within it, starting at 0 and progressing in the order in which they were stored.

Respectively, “apples” would be assigned an index of 0, “bananas” an index of 1, and “oranges” an index of 2. Here’s how this looks like in terms of code:

You can try the above code out for yourself by inspecting this page right now and copy/pasting it into your browser’s console.

Nested Arrays

With JavaScript, you can also nest an Array inside an Array.

Suppose you wanted to sort the items in your groceryList array in three categories: fruits and vegetables.

This time, to make things understandable, we will populate our groceryList array with items in two steps.

First, we’ll declare an empty JavaScript array. Then, we’ll nest two arrays under it—one for fruits, the other for vegetables—and store the category in the zeroth index of each.

Take a peek at the code snippet below to see what exactly this looks like:

With this, we just nested two arrays, fruits and vegetables , under our groceryList array.

Another, more visual way to think about it is as a structured list with items and subitems:

• [1] bananas
• [2] oranges
• [1] vegetables

We can access the items in the child array in a similar way as we’d do for the parent array:

Nested Arrays Within Nested Arrays

Another thing we can do is nest arrays under nested arrays.

Suppose we wanted to split the list of vegetables into fresh and frozen , then add tomatoes and cucumbers to fresh , and baby carrots and broccoli to frozen .

To achieve this, notice how we’re nesting an array under a nested array in line 6, again using the zeroth index for the category names ( fresh and frozen ):

Once again, the structure of our list evolved. We now have items, subitems, and subs of the subitems:

• [0] tomatoes
• [1] cucumbers
• [0] baby carrots
• [1] broccoli

And, once again, we can access these by nesting the indexes in our statements:

You can then use all of JavaScript’s Array methods to perform actions on your nested arrays.

In Conclusion

Thank you for reading this far and I hoped this explanation, which I tried to make as simple and as beginner-friendly as possible, helped.

Newcomers to JavaScript are often intimidated by the concept of nested arrays because it sounds complicated. But, once you get the hang of it, it’s as simple as creating bulleted lists in Google Docs or working with tables in Google Sheets.

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

To provide the best experiences, we and our partners use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us and our partners to process personal data such as browsing behavior or unique IDs on this site and show (non-) personalized ads. Not consenting or withdrawing consent, may adversely affect certain features and functions.

Click below to consent to the above or make granular choices. Your choices will be applied to this site only. You can change your settings at any time, including withdrawing your consent, by using the toggles on the Cookie Policy, or by clicking on the manage consent button at the bottom of the screen.

Understanding Nested Arrays in JavaScript

By Sanchitha SR on Jan 4th, 2021

An array is an ordered collection of values: each value is called an element, and each element has a numeric position in the array, known as its index.

JavaScript lets us create arrays inside array called Nested Arrays . Nested Arrays have one or many arrays as the element of an array. This might be little confusing in definition but it is very interesting once we dig inside.

Creating a Nested Array

There are three syntax to create an array in JavaScript. Let's create nested arrays using those three methods to get an idea of Nested Arrays.

This one is just _equating _ the variable to the array .

Second one is using the array method new Array().

And the last one is using the Array() which is similar to the new Array() .

Note that all these methods yield the same result. Now that we know how to create the nested arrays, let's see how to access the elements of the Nested Arrays.mn

Understanding how indices is assigned to the elements

The arrays are listed according to the index. Below diagram explains how the indices are assigned to the elements in Nested Array.

Say we want to access the value 'Tangled' , we can navigate to it using this table.

Similarly we can access any element with the help of index.

Output from the console (console.table(favMovies))

Flatten the nested Array

There are ways to flatten the nested array. We can turn it into normal array by using the below methods.

1. Using the method Array.flat()

Array.flat() method produces a new array by concatenating all sub arrays recursively up to the depth you specify.

Simply put, if you have an array of arrays (maybe more arrays within them), flat() will help you to join all entries together into a single array.

2. Using Array.toString() and String.split() methods

We can convert the array to string and the split it using .split() method. That way we get the array.

And there we have it! I hope you found this useful. Thanks!

Continue Learning

11 python tricks to boost your python skills significantly.

You won't believe how much easier things will become in Python with these tricks!

How To Pass Data From One Component To Another In Angular

How to create Components, Routes, and send/receive data via those Routes in Angular

Build a Fast Food Order Taker in Python

Learn Python while making a program that takes your order!

How to Store Login Sessions with LocalStorage and SessionStorage

Save Current LoggedIn user in SessionStorage and information of all the users from LocalStorage, all using plain JavaScript!

Fixing the "can't resolve all parameters" exception with Angular DI

Yesterday, I’ve stumbled on a puzzling issue while implementing a new service in the application

SIEM on AWS: What are the Options?

JavaScript Array Tutorial – Array Methods in JS

Arrays are data structures that are extremely useful and versatile. They're present in many programming languages, and they allow you to store multiple values in a single variable.

In this tutorial, we will explore how arrays work in JavaScript, their characteristics, and how to manipulate them using the most common array methods.

Table of Contents

How to create an array in javascript, array indexing, how to use the length property, multidimensional arrays, sparse arrays, how to compare arrays in javascript, the spread operator vs the rest parameter, destructuring assignment, how to add and remove elements from an array, how to combine arrays, how to convert an array into a string, how to compare arrays, how to copy an array, how to search inside an array, how to check if array elements meet a condition, how to sort an array, how to perform an operation on every array element, an introduction to arrays in js.

In JavaScript, an array is an object constituted by a group of items having a specific order . Arrays can hold values of mixed data types and their size is not fixed .

You can create an array using a literal syntax – specifying its content inside square brackets, with each item separated by a comma.

Let's create an array of strings, called nobleGases :

Alternatively, you can use the Array() constructor , passing the elements to put inside the array as arguments.

Each element inside an array is identified by its numeric index or position – starting from zero (not 1) in JavaScript, as in many programming languages. We can access elements through bracket notation , specifying the index inside square brackets.

When you try to access a value out of the index range, you get undefined as the return value. As you can see, in the example above no value is stored at index 5.

JavaScript arrays are not fixed in size . They can grow and shrink according to their content. You can easily verify this by trying to assign nobleGases[5] a value:

Now, nobleGases holds one more value, as you can see in the output.

You can check the number of elements contained inside an array using the length property, through dot notation :

The array length will be the value of the index of the last element inside the array + 1, since the indexing starts at zero.

JavaScript arrays can hold any allowed values, arrays included. An array inside another array is called a nested array. This situation creates the possibility of many array objects nested at different depths. Here's an example of a three-dimensional array:

You can access the different elements by repeating the bracket syntax with the indexes corresponding to the elements you are interested in, to go deeper and deeper. Like so:

Sparse arrays are arrays containing empty slots . For example, if you mistype two consecutive commas when creating an array, you will end up with a sparse array:

As you can see, between 'Na' and 'K' there is an empty value. This can be shown in different ways, depending on the coding environment. But it's not the same as having an undefined value.

Sparse arrays can also be created by directly changing the length property or by assignment to an index greater than the length:

Depending on the operation performed on a sparse array, empty slots can act as undefined or can be skipped .

JavaScript arrays are objects, and if you try to compare two objects, the comparison takes place considering their references – and not their actual values .

This means that you could try to compare two arrays containing the same elements – and so, that are apparently equal – like this:

But, according to JavaScript, they are not equal. And even the comparison of two empty arrays, no matter how they're created, would return the same result:

As I mentioned, this happens because object references are compared , and not their actual content. And each time you create a new array object, it will have a different reference in memory.

The only way to make this comparison evaluate to true is to make the two arrays point to the same reference. For example:

In the code above, let dough2 = dough1 does not mean you are making a copy of dough1 . It means the dough2 variable will point exactly to the same reference as dough1 . They are the same array object.

Having said that, if you want to compare two arrays, you will need to adopt a different strategy. A good approach would be iterating through the array and comparing each element one by one. You can do this with a for loop and some conditional statements:

In the code snippet above, you can see a function to check if the two arrays are equal.

• The first step is verifying if the arrays have the same length. If the length is different, they cannot be equal for sure:
• Then, a for loop iterates through the array and an if statement checks if each element of the first array is different from the element at the corresponding index in the second array:
• If no difference is caught, the arrays are equal and the function returns true .

Here's the result of comparing the two arrays from the beginning of this section with our function:

Note that we can apply this function only to an array containing primitive values . If an array contains objects, you should try to figure out the solution that fits your specific problem and deepen the check.

For example, if you know your arrays are nested, like these:

One possible solution would be the following:

With respect to the previous function, we added an additional for loop. This is enough to compare elements inside the inner arrays.

If you need to compare two arrays of objects:

You can do something like this:

• Again, the first step is verifying if the arrays have the same length. If the length is different, they cannot be equal.
• A for loop iterates through the array and an if statement checks if each object of the first array has a different length from the object at the corresponding index in the second array:
• Then a for ... in loop iterates through the properties of the i-th object of the first array. And an if statement checks if the value of each key is different from the value of the corresponding key in the i-th object of the other array:

In the end, the result would be:

Because the year value in the third object of albums2 is different. If we change it, the result will be true :

The spread operator and the rest parameter have similar syntax ( ... ) but they perform fundamentally different operations.

The spread operator enables you to expand an array – more generally an iterable object – into its elements. The rest parameter allows you to collect an undefined number of arguments into a single array .

How to Use the Spread Operator

Later on in this article, we will see some methods to copy an array or to merge different arrays. But using the spread operator is a valid alternative to do the same things.

In the example below, the alkali and alkEarth arrays are merged into a single array using the spread syntax. To do this, you need to list the arrays you want to merge between square brackets, prepending three dots to each one.

Also, you can use the same syntax with only one array, to create a copy of an array:

How to Use the Rest Parameter

The rest parameter allows you to collect an undefined number of elements into a single array. The rest parameter needs to be the last in a sequence of function parameters. Also, a function can have only one rest parameter.

In the example above, the f1 function is called with six string arguments. And the arguments after the third one are gathered inside the others array by using the rest syntax.

In general, the arguments passed to a function are collected in the arguments object, which is an array-like object and does not support the iterative methods we will see in the next section macro-section of this article.

So, the rest parameter provides a way to easily access the arguments passed to a function in array form, instead of using the arguments object:

In the example above, we have simply printed the args array, but the advantage here is being able to implement an iterative method on it.

The destructing syntax provides a simple way to assign values by unpacking them from an array object. Let's see a practical example:

The variables on the left side of the assignment operator are assigned to the value of the corresponding elements of the array on the right. You can skip array elements and go to the next ones by typing more than one comma between each variable name.

Common Array Methods in JS

In JavaScript, arrays are objects and possess properties and methods .

In this section, we will discuss some of the most common array methods you need to know to work efficiently with arrays in JavaScript.

In this section, you will see the most common ways to add and remove elements from an array in JavaScript. All the following methods mutate the original array.

How to Use the push() Method

Let's consider the example from the indexing section:

We have assigned Rn to index 5 of the nobleGases array using the bracket notation. At the end of the day, we have simply added Rn at the end of that array.

You can obtain the same result using the push() method, and you don't need to know the length of the array for that. You use the dot notation to call push() , indicating the element(s) to append inside the parenthesis. Like this:

The specified element will be added at the end of the array, returning the new array length. For example:

You can append multiple elements with push() , indicating their values separated by a comma:

How to Use the unshift() Method

Similar to push() , the unshift() method adds one or more elements to the beginning of an array and returns the length of the modified array.

For example:

How to Use the pop() Method

If you need to remove the last element of an array, you can use the pop() method.

It removes only the last element and returns it.

How to Use the shift() Method

Similarly, the shift() method removes the first element from an array and returns it.

Here's an example:

How to Use the splice() Method

If you need to remove one or more elements from a specific position of an array, you can use the splice() method.

The first parameter of splice() is the starting index , while the second is the number of items to remove from the array.

So .splice(1, 3) means "start at index = 1 and remove 3 elements". The method returns an array containing the elements removed from the original array.

If the second argument is not supplied, the elements are removed until the end.

Using splice() you can add elements, too.

If you specify additional arguments – after the starting index and the number of elements to remove – those will be inserted in the indicated position. For example:

Here, .splice(2, 1, 'Ar', 'Kr', 'Xn') means "start at index = 2 , remove 1 element and add the strings 'Ar' , 'Kr' , 'Xn' ". The array returned by the method contains the element 'Cl' , which was at index = 2 in the original array.

If you don't need to remove any elements from the array, you can simply use zero as the second argument. The elements will be added starting at the specified index, without removing any item:

How to Use the concat() Method

If you need to combine two or more arrays – that is create a single array containing each element of the arrays you want to merge – you can use the concat() method. This method does not change the original arrays and returns a new array.

You need to call .concat() on the array that should come first, passing as arguments the arrays you want it to merge with. The order will be reflected in the resulting array.

Here's an example of combining two and three arrays:

How to Use the push() Method & the Spread Operator

If you don't mind changing the original array you can combine a .push() call to the spread syntax ( ... ) to add all the elements in one or more arrays to the original array. For example:

You cannot use push() without the spread syntax in its arguments, unless you want to nest the whole array moreAlkali as the last element of alkali . In that case, the result would be ['Li', 'Na', 'K', ['Rb', 'Cs', 'Fr']] – an array composed of 4 elements with the last being an array.

Note that, as we have seen previously, the spread operator alone allows you to merge two or more arrays without causing any mutation. As a continuation of the previous example:

If you need to convert an array into a string, you have different options. And now, we are going to see some of them. Note that the following methods do not mutate the original array.

How to Use the toString() & join() Methods

These methods enable you to convert arrays into strings.

The toString() method is called without a parameter and returns a string representing the content of the array.

The join() method takes a separator as the argument, which is used to separate the array elements, in order to form the string.

These two methods have some limitations. If we consider the array in the following example, we can observe a couple of interesting things:

First, null and undefined result in the same string output (an empty substring).

Second, the string representation of an object is [object Object] . So if you are trying to convert an array containing objects into a string, you should employ another method. Otherwise, you will not be able to see the object content properly.

How to Use the JSON.stringify() Method

If you want to convert an array containing objects into a string, the JSON.stringify() method is what you need. Where the previous methods fail, JSON.stringify() enables you to handle objects properly.

This method takes a JavaScript value as the argument – in this case the albums array – and converts it to a JSON string.

As you can see, the square brackets are retained, so it is often desirable to use this method to create a string from an array.

Since arrays are objects, their comparison is based on references . Not on the actual values.

Before, we have seen some ways to compare arrays by looping through an array and comparing each element.

Another approach for comparing arrays is converting them into strings with one of the previous methods, and then comparing the string representations of the original arrays.

This is quite fast and easy, but sometimes it can lead to unexpected behavior. For example, when null and undefined values are compared.

You might think that the comparison between the string representation of a and b would return false , since null and undefined are not equal. But in practice, they are both stringified to null.

In light of this aspect, it would be better to use an iterative technique.

How to Use the every() Method

every() is an iterative method that verifies if all the elements in the array pass a condition implemented by a callback function and it returns true or false .

Among its many uses, you can build a simple function to compare arrays containing primitive values with every() , like this:

• First, the lengths are compared. If they are not equal, the arrays are not equal as well.
• Then, every() is called on the first array. The callback checks if every element of arr1 is equal to the element at the corresponding index in arr2 .

The AND operator ensures that true is returned only when both conditions are true.

Here's the function applied to the arrays from before:

All common operations to copy an array in JavaScript generate a shallow copy – instead of a deep copy – of the original array. This means that by mutating the copy, you can change the original array, too. We will see why this happens in a while.

How to Use the slice() Method

The slice() method allows you to copy an entire array – or just a portion of it – without mutating it.

As parameters, it takes the starting index and the final index (not included) to copy. When called without arguments, slice() create a duplicate of the whole array. For example:

If you try to change doughCopy in some way, for example, assigning doughCopy[1] a new value, you would see that no change is reflected in the original array:

This happens because the array is filled with primitive values. However, the story is quite different if you handle an array containing non-primitive values.

Let's consider the following array, with two objects:

You copy the array using the slice() method, like this:

Now, albumsCopy represents a shallow copy of albums and the elements inside each array point to the same objects. In other words, both albums[0] === albumsCopy[0] and albums[1] === albumsCopy[1] return true – remember that this comparison involves object references – because they are the very same objects.

If you change one of them by mutating a property value, the modification involves the other array, too.

Note that if you reassign an element to a different object – that is without mutating any of the existent objects – the modification does not involve the other array:

How to Use the map() Method

The map() method generates a new array containing the result of calling a callback function on every element of an array.

The function takes the current element, its index, and the array on which the method is called, as parameters.

You can use map() to copy an array by specifying a function that returns each array element:

How to Create a Deep Copy

If you want to create a deep clone of an array, you can convert the array into a string with JSON.stringify() and pass its return value to the JSON.parse() method.

In this way, the copy will be completely independent of the original array and you will not risk an unintentional modification.

Depending on what you are looking for, there are several ways to search inside an array. Let's explore some methods to search inside an array by index and by value.

How to Use the includes() Method

If you need to know whether a value is included in an array, you can call the includes() method on it, passing the value you are interested in as the argument.

This method returns true if the value is found. Otherwise, false .

It accepts also a second parameter, representing the index where to begin to search – the default is zero.

How to Use the indexOf() Method

If you need to know the index at which a specific value can be found in an array, you should use the indexOf() method.

It returns only the first index at which the specified value is found, otherwise, it returns -1. The second parameter is the index for where to start searching for the value – the default is zero.

How to Use the find() & findLast() Methods

find() and findLast() enable you to search for the first and the last element that satisfies a certain condition in an array, respectively.

They both accept a callback function, whose parameters are the current element, its index, and the array the method is called upon.

find() and findLast() return the first/last element that satisfies the function, or undefined when the no value matches the specified condition.

In the example above, only the first and the last objects containing 'Pigs' are found. The middle object {no: 3, track: 'Pigs (Three Different Ones)'} cannot be reached by these two methods.

How to Use the findIndex() & findLastIndex() Methods

The findIndex() and findLastIndex() methods work similarly to the previous ones.

But they return the index of the first and the last element that satisfies the provided condition, respectively, or undefined when the no value matches the specified condition.

How to Use the every() & some() Methods

Sometimes you want to verify if the elements inside an array satisfy a specific condition. We have already seen the every() method in a previous section. It loops through the array and returns true if all the elements meet the specified condition. Otherwise, it returns false .

The some() method is very similar. It iterates through the array, testing if some elements – not all of them – meet the requirements implemented by a callback function.

The last call returns false since none of the array elements is equal to the string 'Rn' .

How to Use the filter() Method

This method provides you a way to filter the array elements that satisfy a certain criterion.

filter() takes a callback function, whose parameters are the current element, its index, and the array the method is called upon.

It creates a shallow copy of the original array containing only the values for which the callback returns a truthy value, and it neglects the others.

Above, only the elements including 'Pigs' are inserted in the filtered array.

How to Use the sort() Method

If you want to sort an array, you can use sort() . This method sorts the array elements in place . It changes the array which it's acting on.

The default sorting procedure evaluates Unicode point values and sometimes may lead to unexpected outcomes. For this reason, it is better to pass sort() a callback function so that the elements can be sorted according to the return value of the callback.

The following table sums up the sorting criterion at the base of sort() .

The elements – represented by a and b parameters – are compared two at a time. If the return value is positive, a is placed after b. If it is negative, b is placed after a. While if the return value is zero the original order is kept.

Here's an example of sorting an array of strings in ascending and descending order:

The callback function is implemented by a ternary operator, in order to consider the three possible outcomes of the comparison.

Previously, we used map() to duplicate an array. But by using a different callback function you can perform many different operations.

In the example above, we have used map() to create an array populated with the values of the track key of each object in the animals array.

How to Use the forEach() Method

The forEach() method is similar to map() . It executes a function on every array element, but it has no return value. For this reason, a forEach() call can be used only at the end of a chain.

In the example below, forEach() is used to delete the no property from each array element:

How to Use the reduce() Method

The reduce() method accepts a callback function, which is executed on each array element. The callback takes an accumulator as the first parameter, followed by the current element, its index, and the array which the method is called on.

The return value of each iteration is passed to the next one. So that the array is reduced to a single value. The second parameter of reduce() is the starting value of the accumulator . If not specified, accumulator takes the first array value and the iteration starts at index 1.

In the example below, the reduce() method is used to count the number of tracks that include 'Pigs' in the title. The method iterates through the array, and when the track property includes 'Pigs', the value of count is incremented and passed to the next iteration.

In this case, it's important to specify the initial value as zero. Otherwise, the initial value will be the whole {no: 1, track: 'Pigs on the Wing (Part One)'} object, and this will lead to an unexpected result.

In JavaScript, arrays are data structures that contain multiple values in a specific order. They can hold values of different data types and they are re-sizable.

In this tutorial, we started with the basics of arrays in JavaScript and then we discussed some of the most common methods that allow you to manipulate arrays.

We have only begun to scratch the surface of this wide topic, but I hope this is a good starting point for you.

Thanks for reading, and happy coding.

Read more posts .

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

JavaScript Arrays

Nested javascript objects and arrays..

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

JSON.stringify()

The JSON.stringify() static method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

The value to convert to a JSON string.

A function that alters the behavior of the stringification process, or an array of strings and numbers that specifies properties of value to be included in the output. If replacer is an array, all elements in this array that are not strings or numbers (either primitives or wrapper objects), including Symbol values, are completely ignored. If replacer is anything other than a function or an array (e.g. null or not provided), all string-keyed properties of the object are included in the resulting JSON string.

A string or number that's used to insert white space (including indentation, line break characters, etc.) into the output JSON string for readability purposes.

If this is a number, it indicates the number of space characters to be used as indentation, clamped to 10 (that is, any number greater than 10 is treated as if it were 10 ). Values less than 1 indicate that no space should be used.

If this is a string, the string (or the first 10 characters of the string, if it's longer than that) is inserted before every nested object or array.

If space is anything other than a string or number (can be either a primitive or a wrapper object) — for example, is null or not provided — no white space is used.

Return value

A JSON string representing the given value, or undefined.

Thrown in one of the following cases:

• value contains a circular reference.
• A BigInt value is encountered.

Description

JSON.stringify() converts a value to the JSON notation that the value represents. Values are stringified in the following manner:

• Boolean , Number , String , and BigInt (obtainable via Object() ) objects are converted to the corresponding primitive values during stringification, in accordance with the traditional conversion semantics. Symbol objects (obtainable via Object() ) are treated as plain objects.
• Attempting to serialize BigInt values will throw. However, if the BigInt has a toJSON() method (through monkey patching: BigInt.prototype.toJSON = ... ), that method can provide the serialization result. This constraint ensures that a proper serialization (and, very likely, its accompanying deserialization) behavior is always explicitly provided by the user.
• undefined , Function , and Symbol values are not valid JSON values. If any such values are encountered during conversion, they are either omitted (when found in an object) or changed to null (when found in an array). JSON.stringify() can return undefined when passing in "pure" values like JSON.stringify(() => {}) or JSON.stringify(undefined) .
• The numbers Infinity and NaN , as well as the value null , are all considered null . (But unlike the values in the previous point, they would never be omitted.)
• Arrays are serialized as arrays (enclosed by square brackets). Only array indices between 0 and length - 1 (inclusive) are serialized; other properties are ignored.
• All Symbol -keyed properties will be completely ignored, even when using the replacer parameter.
• if this object is a property value, the property name
• if it is in an array, the index in the array, as a string
• if JSON.stringify() was directly called on this object, an empty string
• Only enumerable own properties are visited. This means Map , Set , etc. will become "{}" . You can use the replacer parameter to serialize them to something more useful. Properties are visited using the same algorithm as Object.keys() , which has a well-defined order and is stable across implementations. For example, JSON.stringify on the same object will always produce the same string, and JSON.parse(JSON.stringify(obj)) would produce an object with the same key ordering as the original (assuming the object is completely JSON-serializable).

The replacer parameter

The replacer parameter can be either a function or an array.

As an array, its elements indicate the names of the properties in the object that should be included in the resulting JSON string. Only string and number values are taken into account; symbol keys are ignored.

As a function, it takes two parameters: the key and the value being stringified. The object in which the key was found is provided as the replacer 's this context.

The replacer function is called for the initial object being stringified as well, in which case the key is an empty string ( "" ). It is then called for each property on the object or array being stringified. Array indices will be provided in its string form as key . The current property value will be replaced with the replacer 's return value for stringification. This means:

• If you return a number, string, boolean, or null , that value is directly serialized and used as the property's value. (Returning a BigInt will throw as well.)
• If you return a Function , Symbol , or undefined , the property is not included in the output.
• If you return any other object, the object is recursively stringified, calling the replacer function on each property.

Note: When parsing JSON generated with replacer functions, you would likely want to use the reviver parameter to perform the reverse operation.

Typically, array elements' index would never shift (even when the element is an invalid value like a function, it will become null instead of omitted). Using the replacer function allows you to control the order of the array elements by returning a different array.

The space parameter

The space parameter may be used to control spacing in the final string.

• If it is a number, successive levels in the stringification will each be indented by this many space characters.
• If it is a string, successive levels will be indented by this string.

Each level of indentation will never be longer than 10. Number values of space are clamped to 10, and string values are truncated to 10 characters.

Using JSON.stringify

Using a function as replacer.

If you wish the replacer to distinguish an initial object from a key with an empty string property (since both would give the empty string as key and potentially an object as value), you will have to keep track of the iteration count (if it is beyond the first iteration, it is a genuine empty string key).

Using an array as replacer

Using the space parameter.

Indent the output with one space:

Using a tab character mimics standard pretty-print appearance:

toJSON() behavior

Defining toJSON() for an object allows overriding its serialization behavior.

Issue with serializing circular references

Since the JSON format doesn't support object references (although an IETF draft exists ), a TypeError will be thrown if one attempts to encode an object with circular references.

To serialize circular references, you can use a library that supports them (e.g. cycle.js by Douglas Crockford) or implement a solution yourself, which will require finding and replacing (or removing) the cyclic references by serializable values.

If you are using JSON.stringify() to deep-copy an object, you may instead want to use structuredClone() , which supports circular references. JavaScript engine APIs for binary serialization, such as v8.serialize() , also support circular references.

Using JSON.stringify() with localStorage

In a case where you want to store an object created by your user and allow it to be restored even after the browser has been closed, the following example is a model for the applicability of JSON.stringify() :

Well-formed JSON.stringify()

Engines implementing the well-formed JSON.stringify specification will stringify lone surrogates (any code point from U+D800 to U+DFFF) using Unicode escape sequences rather than literally (outputting lone surrogates). Before this change, such strings could not be encoded in valid UTF-8 or UTF-16:

But with this change JSON.stringify() represents lone surrogates using JSON escape sequences that can be encoded in valid UTF-8 or UTF-16:

This change should be backwards-compatible as long as you pass the result of JSON.stringify() to APIs such as JSON.parse() that will accept any valid JSON text, because they will treat Unicode escapes of lone surrogates as identical to the lone surrogates themselves. Only if you are directly interpreting the result of JSON.stringify() do you need to carefully handle JSON.stringify() 's two possible encodings of these code points.

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Polyfill of modern JSON.stringify behavior (symbol and well-formed unicode) in core-js
• JSON.parse()