assignment on javascript array

Arrays in JavaScript

Learn how to work with arrays in JavaScript with this comprehensive tutorial. Explore the creation, modification, and iteration of arrays, and discover the power of multidimensional arrays. Take your programming skills to the next level with this beginner-friendly guide.

Updated: March 11, 2023

This YouTube channel is packed with awesome videos for coders!

Tons of videos teaching JavaScript and coding. Cool live streams!

Welcome to the world of JavaScript programming! In this tutorial, we’re going to explore arrays in JavaScript in depth.

Arrays are a powerful feature of JavaScript that allow you to store multiple values in a single variable. They are essential for organizing and manipulating data in your programs.

Creating Arrays

To create an array in JavaScript, use square brackets [] and separate each value with a comma. For example:

This code creates an array called “fruits” that contains four strings: “Apple”, “Banana”, “Orange”, and “Mango”.

Accessing Array Values

You can access the values in an array using their index number. In JavaScript, arrays are zero-indexed, which means that the first value in an array is at index 0, the second value is at index 1, and so on. For example:

This code sets the variable “firstFruit” to the value at index 0 in the “fruits” array (which is “Apple”), and then logs that value to the console.

Modifying Array Values

You can modify the values in an array by assigning a new value to a specific index. For example:

This code changes the value at index 1 in the “fruits” array from “Banana” to “Grapes”, and then logs the updated array to the console.

Adding and Removing Array Values

You can add or remove values from an array using various methods. For example, the “push” method adds a value to the end of an array:

This code adds the value “Pineapple” to the end of the “fruits” array and logs the updated array to the console.

The “pop” method removes the last value from an array:

This code removes the last value from the “fruits” array (which is “Pineapple”) and logs the updated array to the console.

Iterating Over Arrays

You can iterate over the values in an array using a loop. For example, the following code logs each value in the “fruits” array to the console:

This code uses a “for” loop to iterate over each index in the “fruits” array. It then logs the value at each index to the console.

Declaration

There are two syntaxes for creating an empty array:

Almost all the time, the second syntax is used. We can supply initial elements in the brackets:

Array elements are numbered, starting with zero.

We can get an element by its number in square brackets:

We can replace an element:

…Or add a new one to the array:

The total count of the elements in the array is its length :

We can also use alert to show the whole array.

An array can store elements of any type.

For instance:

An array, just like an object, may end with a comma:

The “trailing comma” style makes it easier to insert/remove items, because all lines become alike.

Get last elements with “at”

Let’s say we want the last element of the array.

Some programming languages allow the use of negative indexes for the same purpose, like fruits[-1] .

Although, in JavaScript it won’t work. The result will be undefined , because the index in square brackets is treated literally.

We can explicitly calculate the last element index and then access it: fruits[fruits.length - 1] .

A bit cumbersome, isn’t it? We need to write the variable name twice.

Luckily, there’s a shorter syntax: fruits.at(-1) :

In other words, arr.at(i) :

• is exactly the same as arr[i] , if i >= 0 .
• for negative values of i , it steps back from the end of the array.

Methods pop/push, shift/unshift

A queue is one of the most common uses of an array. In computer science, this means an ordered collection of elements which supports two operations:

• push appends an element to the end.
• shift get an element from the beginning, advancing the queue, so that the 2nd element becomes the 1st.

Arrays support both operations.

In practice we need it very often. For example, a queue of messages that need to be shown on-screen.

There’s another use case for arrays – the data structure named stack .

It supports two operations:

• push adds an element to the end.
• pop takes an element from the end.

So new elements are added or taken always from the “end”.

A stack is usually illustrated as a pack of cards: new cards are added to the top or taken from the top:

For stacks, the latest pushed item is received first, that’s also called LIFO (Last-In-First-Out) principle. For queues, we have FIFO (First-In-First-Out).

Arrays in JavaScript can work both as a queue and as a stack. They allow you to add/remove elements, both to/from the beginning or the end.

In computer science, the data structure that allows this, is called deque .

Methods that work with the end of the array:

Extracts the last element of the array and returns it:

Both fruits.pop() and fruits.at(-1) return the last element of the array, but fruits.pop() also modifies the array by removing it.

Append the element to the end of the array:

The call fruits.push(...) is equal to fruits[fruits.length] = ... .

Methods that work with the beginning of the array:

Extracts the first element of the array and returns it:

Add the element to the beginning of the array:

Methods push and unshift can add multiple elements at once:

An array is a special kind of object. The square brackets used to access a property arr[0] actually come from the object syntax. That’s essentially the same as obj[key] , where arr is the object, while numbers are used as keys.

They extend objects providing special methods to work with ordered collections of data and also the length property. But at the core it’s still an object.

Remember, there are only eight basic data types in JavaScript (see the Data types chapter for more info). Array is an object and thus behaves like an object.

For instance, it is copied by reference:

…But what makes arrays really special is their internal representation. The engine tries to store its elements in the contiguous memory area, one after another, just as depicted on the illustrations in this chapter, and there are other optimizations as well, to make arrays work really fast.

But they all break if we quit working with an array as with an “ordered collection” and start working with it as if it were a regular object.

For instance, technically we can do this:

That’s possible, because arrays are objects at their base. We can add any properties to them.

But the engine will see that we’re working with the array as with a regular object. Array-specific optimizations are not suited for such cases and will be turned off, their benefits disappear.

The ways to misuse an array:

• Add a non-numeric property like arr.test = 5 .
• Make holes, like: add arr[0] and then arr[1000] (and nothing between them).
• Fill the array in the reverse order, like arr[1000] , arr[999] and so on.

Please think of arrays as special structures to work with the ordered data . They provide special methods for that. Arrays are carefully tuned inside JavaScript engines to work with contiguous ordered data, please use them this way. And if you need arbitrary keys, chances are high that you actually require a regular object {} .

Performance

Methods push/pop run fast, while shift/unshift are slow.

Why is it faster to work with the end of an array than with its beginning? Let’s see what happens during the execution:

It’s not enough to take and remove the element with the index 0 . Other elements need to be renumbered as well.

The shift operation must do 3 things:

• Remove the element with the index 0 .
• Move all elements to the left, renumber them from the index 1 to 0 , from 2 to 1 and so on.
• Update the length property.

The more elements in the array, the more time to move them, more in-memory operations.

The similar thing happens with unshift : to add an element to the beginning of the array, we need first to move existing elements to the right, increasing their indexes.

And what’s with push/pop ? They do not need to move anything. To extract an element from the end, the pop method cleans the index and shortens length .

The actions for the pop operation:

The pop method does not need to move anything, because other elements keep their indexes. That’s why it’s blazingly fast.

The similar thing with the push method.

One of the oldest ways to cycle array items is the for loop over indexes:

But for arrays there is another form of loop, for..of :

The for..of doesn’t give access to the number of the current element, just its value, but in most cases that’s enough. And it’s shorter.

Technically, because arrays are objects, it is also possible to use for..in :

But that’s actually a bad idea. There are potential problems with it:

The loop for..in iterates over all properties , not only the numeric ones.

There are so-called “array-like” objects in the browser and in other environments, that look like arrays . That is, they have length and indexes properties, but they may also have other non-numeric properties and methods, which we usually don’t need. The for..in loop will list them though. So if we need to work with array-like objects, then these “extra” properties can become a problem.

The for..in loop is optimized for generic objects, not arrays, and thus is 10-100 times slower. Of course, it’s still very fast. The speedup may only matter in bottlenecks. But still we should be aware of the difference.

Generally, we shouldn’t use for..in for arrays.

A word about “length”

The length property automatically updates when we modify the array. To be precise, it is actually not the count of values in the array, but the greatest numeric index plus one.

For instance, a single element with a large index gives a big length:

Note that we usually don’t use arrays like that.

Another interesting thing about the length property is that it’s writable.

If we increase it manually, nothing interesting happens. But if we decrease it, the array is truncated. The process is irreversible, here’s the example:

So, the simplest way to clear the array is: arr.length = 0; .

new Array()

There is one more syntax to create an array:

It’s rarely used, because square brackets [] are shorter. Also, there’s a tricky feature with it.

If new Array is called with a single argument which is a number, then it creates an array without items, but with the given length .

Let’s see how one can shoot themselves in the foot:

To avoid such surprises, we usually use square brackets, unless we really know what we’re doing.

Multidimensional arrays

Arrays can have items that are also arrays. We can use it for multidimensional arrays, for example to store matrices:

Arrays have their own implementation of toString method that returns a comma-separated list of elements.

Also, let’s try this:

Arrays do not have Symbol.toPrimitive , neither a viable valueOf , they implement only toString conversion, so here [] becomes an empty string, [1] becomes "1" and [1,2] becomes "1,2" .

When the binary plus "+" operator adds something to a string, it converts it to a string as well, so the next step looks like this:

Don’t compare arrays with ==

Arrays in JavaScript, unlike some other programming languages, shouldn’t be compared with operator == .

This operator has no special treatment for arrays, it works with them as with any objects.

Let’s recall the rules:

• Two objects are equal == only if they’re references to the same object.
• If one of the arguments of == is an object, and the other one is a primitive, then the object gets converted to primitive, as explained in the chapter Object to primitive conversion .
• …With an exception of null and undefined that equal == each other and nothing else.

The strict comparison === is even simpler, as it doesn’t convert types.

So, if we compare arrays with == , they are never the same, unless we compare two variables that reference exactly the same array.

For example:

These arrays are technically different objects. So they aren’t equal. The == operator doesn’t do item-by-item comparison.

Comparison with primitives may give seemingly strange results as well:

Here, in both cases, we compare a primitive with an array object. So the array [] gets converted to primitive for the purpose of comparison and becomes an empty string '' .

Then the comparison process goes on with the primitives, as described in the chapter Type Conversions :

So, how to compare arrays?

That’s simple: don’t use the == operator. Instead, compare them item-by-item in a loop or using iteration methods explained in the next chapter.

Array is a special kind of object, suited to storing and managing ordered data items.

The declaration:

The call to new Array(number) creates an array with the given length, but without elements.

• The length property is the array length or, to be precise, its last numeric index plus one. It is auto-adjusted by array methods.
• If we shorten length manually, the array is truncated.

Getting the elements:

• we can get element by its index, like arr[0]
• also we can use at(i) method that allows negative indexes. For negative values of i , it steps back from the end of the array. If i >= 0 , it works same as arr[i] .

We can use an array as a deque with the following operations:

• push(...items) adds items to the end.
• pop() removes the element from the end and returns it.
• shift() removes the element from the beginning and returns it.
• unshift(...items) adds items to the beginning.

To loop over the elements of the array:

• for (let i=0; i<arr.length; i++) – works fastest, old-browser-compatible.
• for (let item of arr) – the modern syntax for items only,
• for (let i in arr) – never use.

To compare arrays, don’t use the == operator (as well as > , < and others), as they have no special treatment for arrays. They handle them as any objects, and it’s not what we usually want.

Instead you can use for..of loop to compare arrays item-by-item.

We will continue with arrays and study more methods to add, remove, extract elements and sort arrays in the next chapter Array methods .

Is array copied?

What is this code going to show?

The result is 4 :

That’s because arrays are objects. So both shoppingCart and fruits are the references to the same array.

Array operations.

Let’s try 5 array operations.

• Create an array styles with items “Jazz” and “Blues”.
• Append “Rock-n-Roll” to the end.
• Replace the value in the middle with “Classics”. Your code for finding the middle value should work for any arrays with odd length.
• Strip off the first value of the array and show it.
• Prepend Rap and Reggae to the array.

The array in the process:

Calling in an array context

What is the result? Why?

The call arr[2]() is syntactically the good old obj[method]() , in the role of obj we have arr , and in the role of method we have 2 .

So we have a call of the function arr[2] as an object method. Naturally, it receives this referencing the object arr and outputs the array:

The array has 3 values: initially it had two, plus the function.

Sum input numbers

Write the function sumInput() that:

• Asks the user for values using prompt and stores the values in the array.
• Finishes asking when the user enters a non-numeric value, an empty string, or presses “Cancel”.
• Calculates and returns the sum of array items.

P.S. A zero 0 is a valid number, please don’t stop the input on zero.

Run the demo

Please note the subtle, but important detail of the solution. We don’t convert value to number instantly after prompt , because after value = +value we would not be able to tell an empty string (stop sign) from the zero (valid number). We do it later instead.

A maximal subarray

The input is an array of numbers, e.g. arr = [1, -2, 3, 4, -9, 6] .

The task is: find the contiguous subarray of arr with the maximal sum of items.

Write the function getMaxSubSum(arr) that will return that sum.

If all items are negative, it means that we take none (the subarray is empty), so the sum is zero:

Please try to think of a fast solution: O(n 2 ) or even O(n) if you can.

Open a sandbox with tests.

Slow solution

We can calculate all possible subsums.

The simplest way is to take every element and calculate sums of all subarrays starting from it.

For instance, for [-1, 2, 3, -9, 11] :

The code is actually a nested loop: the external loop over array elements, and the internal counts subsums starting with the current element.

The solution has a time complexity of O(n 2 ) . In other words, if we increase the array size 2 times, the algorithm will work 4 times longer.

For big arrays (1000, 10000 or more items) such algorithms can lead to serious sluggishness.

Fast solution

Let’s walk the array and keep the current partial sum of elements in the variable s . If s becomes negative at some point, then assign s=0 . The maximum of all such s will be the answer.

If the description is too vague, please see the code, it’s short enough:

The algorithm requires exactly 1 array pass, so the time complexity is O(n).

You can find more detailed information about the algorithm here: Maximum subarray problem . If it’s still not obvious why that works, then please trace the algorithm on the examples above, see how it works, that’s better than any words.

Open the solution with tests in a sandbox.

• If you have suggestions what to improve - please submit a GitHub issue or a pull request instead of commenting.
• If you can't understand something in the article – please elaborate.
• To insert few words of code, use the <code> tag, for several lines – wrap them in <pre> tag, for more than 10 lines – use a sandbox ( plnkr , jsbin , codepen …)

Lesson navigation

• © 2007—2024  Ilya Kantor
• about the project
• terms of usage
• privacy policy

Popular Tutorials

Popular examples, reference materials, learn python interactively, js introduction.

• Getting Started
• JS Variables & Constants
• JS console.log
• JavaScript Data types
• JavaScript Operators
• JavaScript Comments
• JS Type Conversions

JS Control Flow

• JS Comparison Operators
• JavaScript if else Statement
• JavaScript for loop
• JavaScript while loop
• JavaScript break Statement
• JavaScript continue Statement
• JavaScript switch Statement

JS Functions

• JavaScript Function
• Variable Scope
• JavaScript Hoisting
• JavaScript Recursion
• JavaScript Objects
• JavaScript Methods & this
• JavaScript Constructor
• JavaScript Getter and Setter
• JavaScript Prototype

JavaScript Array

• JS Multidimensional Array
• JavaScript String
• JavaScript for...in loop
• JavaScript Number
• JavaScript Symbol

Exceptions and Modules

• JavaScript try...catch...finally
• JavaScript throw Statement
• JavaScript Modules
• JavaScript ES6
• JavaScript Arrow Function
• JavaScript Default Parameters
• JavaScript Template Literals

JavaScript Spread Operator

• JavaScript Map
• JavaScript Set
• Destructuring Assignment
• JavaScript Classes
• JavaScript Inheritance
• JavaScript for...of
• JavaScript Proxies

JavaScript Asynchronous

• JavaScript setTimeout()
• JavaScript CallBack Function
• JavaScript Promise
• Javascript async/await
• JavaScript setInterval()

Miscellaneous

• JavaScript JSON
• JavaScript Date and Time
• JavaScript Closure
• JavaScript this
• JavaScript use strict
• Iterators and Iterables
• JavaScript Generators
• JavaScript Regular Expressions
• JavaScript Browser Debugging
• Uses of JavaScript

JavaScript Tutorials

JavaScript Multidimensional Array

• JavaScript Array splice()
• JavaScript Array shift()
• JavaScript Array unshift()
• JavaScript Array pop()
• JavaScript Array slice()

An array is an object that can store multiple values at once.

In the above example, we created an array to record the age of five students.

Why Use Arrays?

Arrays allow us to organize related data by grouping them within a single variable.

Suppose you want to store a list of fruits. Using only variables, this process might look like this:

Here, we've only listed a few fruits. But what if we need to store 100 fruits?

For such a case, the easiest solution is to store them in an array.

An array can store many values in a single variable, making it easy to access them by referring to the corresponding index number.

• Create an Array

We can create an array by placing elements inside an array literal [] , separated by commas. For example,

• numbers - Name of the array.
• [10, 30, 40, 60, 80] - Elements of the array.

Here are a few examples of JavaScript arrays:

Note: Unlike many other programming languages, JavaScript allows us to create arrays with mixed data types.

• Access Elements of an Array

Each element of an array is associated with a number called an index , which specifies its position inside the array.

Consider the following array:

Here is the indexing of each element:

We can use an array index to access the elements of the array.

Let's look at an example.

Remember: Array indexes always start with 0 , not 1.

• Add Element to an Array

We can add elements to an array using built-in methods like push() and unshift() .

1. Using the push() Method

The push() method adds an element at the end of the array.

2. Using the unshift() Method

The unshift() method adds an element at the beginning of the array.

To learn more, visit Array push() and Array unshift() .

• Change the Elements of an Array

We can add or change elements by accessing the index value. For example,

Here, we changed the array element in index 1 (second element) from work to exercise .

• Remove Elements From an Array

We can remove an element from any specified index of an array using the splice() method.

In this example, we removed the element at index 2 (the third element) using the splice() method.

Notice the following code:

Here, (2, 1) means that the splice() method deletes one element starting from index 2 .

Note: Suppose you want to remove the second, third, and fourth elements. You can use the following code to do so:

To learn more, visit JavaScript Array splice() .

• Array Methods

JavaScript has various array methods to perform useful operations. Some commonly used array methods in JavaScript are:

To learn more, visit JavaScript Array Methods .

More on Javascript Array

You can also create an array using JavaScript's new keyword. For example,

Note : It's better to create an array using an array literal [] for greater readability and execution speed.

We can remove an element from an array using built-in methods like pop() and shift() .

1. Remove the last element using pop().

2. Remove the first element using shift().

To learn more, visit Array pop() and Array shift() .

We can find the length of an array using the length property. For example,

In JavaScript, arrays are a type of object. However,

• Arrays use numbered indexes to access elements.
• Objects use named indexes (keys) to access values.

Since arrays are objects, the array elements are stored by reference . Hence, when we assign an array to another variable, we are just pointing to the same array in memory.

So, changing one will change the other because they're essentially the same array. For example,

Here, we modified the copied array arr1 , which also modified the original array arr .

• JavaScript forEach

Table of Contents

• Introduction

Sorry about that.

Related Tutorials

JavaScript Tutorial

JavaScript forEach()

JavaScript Set and WeakSet

Home » JavaScript Tutorial » JavaScript Arrays

JavaScript Arrays

Summary : in this tutorial, you’ll learn about JavaScript arrays and their basic operations.

Introduction to JavaScript arrays

In JavaScript, an array is an ordered list of values. Each value is called an element specified by an index :

A JavaScript array has the following characteristics:

• First, an array can hold values of mixed types. For example, you can have an array that stores elements with the types number, string, boolean, and null.
• Second, the size of an array is dynamic and auto-growing. In other words, you don’t need to specify the array size up front.

Creating JavaScript arrays

JavaScript provides you with two ways to create an array.  The first one is to use the Array constructor as follows:

The scores  array is empty, which does hold any elements.

If you know the number of elements that the array will hold, you can create an array with an initial size as shown in the following example:

To create an array and initialize it with some elements, you pass the elements as a comma-separated list into the Array() constructor.

For example, the following creates the scores array that has five elements (or numbers):

Note that if you use the Array() constructor to create an array and pass a number into it, you are creating an array with an initial size.

However, when you pass a value of another type like string into the Array() constructor, you create an array with an element of that value. For example:

JavaScript allows you to omit the new operator when you use the Array() constructor. For example, the following statement creates the  artists array.

In practice, you’ll rarely use the Array() constructor to create an array.

The more preferred way to create an array is to use the array literal notation:

The array literal form uses the square brackets [] to wrap a comma-separated list of elements.

The following example creates the colors array that holds string elements:

To create an empty array, you use square brackets without specifying any element like this:

Accessing JavaScript array elements

JavaScript arrays are zero-based indexed. In other words, the first element of an array starts at index 0, the second element starts at index 1, and so on.

To access an element in an array, you specify an index in the square brackets [] :

The following shows how to access the elements of the mountains array:

To change the value of an element, you assign that value to the element like this:

Getting the array size

Typically, the length property of an array returns the number of elements. The following example shows how to use the length property:

Basic operations on arrays

The following explains some basic operations on arrays. You’ll learn advanced operations such as map() , filter() , and reduce() in the next tutorials.

1) Adding an element to the end of an array

To add an element to the end of an array, you use the push() method:

2) Adding an element to the beginning of an array

To add an element to the beginning of an array, you use the unshift() method:

3) Removing an element from the end of an array

To remove an element from the end of an array, you use the pop() method:

4) Removing an element from the beginning of an array

To remove an element from the beginning of an array, you use the shift() method:

5) Finding an index of an element in the array

To find the index of an element, you use the indexOf() method:

6) Check if a value is an array

To check if a value is an array, you use Array.isArray() method:

• In JavaScript, an array is an order list of values. Each value is called an element specified by an index.
• An array can hold values of mixed types.
• JavaScript arrays are dynamic, which means that they grow or shrink as needed.

JavaScript Arrays: Create, Access, Add & Remove Elements

We have learned that a variable can hold only one value. We cannot assign multiple values to a single variable. JavaScript array is a special type of variable, which can store multiple values using a special syntax.

The following declares an array with five numeric values.

In the above array, numArr is the name of an array variable. Multiple values are assigned to it by separating them using a comma inside square brackets as [10, 20, 30, 40, 50] . Thus, the numArr variable stores five numeric values. The numArr array is created using the literal syntax and it is the preferred way of creating arrays.

Another way of creating arrays is using the Array() constructor, as shown below.

Every value is associated with a numeric index starting with 0. The following figure illustrates how an array stores values.

The following are some more examples of arrays that store different types of data.

It is not required to store the same type of values in an array. It can store values of different types as well.

Get Size of an Array

Use the length property to get the total number of elements in an array. It changes as and when you add or remove elements from the array.

Accessing Array Elements

Array elements (values) can be accessed using an index. Specify an index in square brackets with the array name to access the element at a particular index like arrayName[index] . Note that the index of an array starts from zero.

For the new browsers, you can use the arr.at(pos) method to get the element from the specified index. This is the same as arr[index] except that the at() returns an element from the last element if the specified index is negative.

You can iterate an array using Array.forEach() , for, for-of, and for-in loop, as shown below.

Update Array Elements

You can update the elements of an array at a particular index using arrayName[index] = new_value syntax.

Adding New Elements

You can add new elements using arrayName[index] = new_value syntax. Just make sure that the index is greater than the last index. If you specify an existing index then it will update the value.

In the above example, cities[9] = "Pune" adds "Pune" at 9th index and all other non-declared indexes as undefined.

The recommended way of adding elements at the end is using the push() method. It adds an element at the end of an array.

Use the unshift() method to add an element to the beginning of an array.

Remove Array Elements

The pop() method returns the last element and removes it from the array.

The shift() method returns the first element and removes it from the array.

You cannot remove middle elements from an array. You will have to create a new array from an existing array without the element you do not want, as shown below.

Learn about array methods and properties in the next chapter.

We are a team of passionate developers, educators, and technology enthusiasts who, with their combined expertise and experience, create in -depth, comprehensive, and easy to understand tutorials.We focus on a blend of theoretical explanations and practical examples to encourages hands - on learning. Visit About Us page for more information.

• JavaScript Minifier
• JSON Formatter
• XML Formatter

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

Destructuring assignment

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Description

The object and array literal expressions provide an easy way to create ad hoc packages of data.

The destructuring assignment uses similar syntax but uses it on the left-hand side of the assignment instead. It defines which values to unpack from the sourced variable.

Similarly, you can destructure objects on the left-hand side of the assignment.

This capability is similar to features present in languages such as Perl and Python.

For features specific to array or object destructuring, refer to the individual examples below.

Binding and assignment

For both object and array destructuring, there are two kinds of destructuring patterns: binding pattern and assignment pattern , with slightly different syntaxes.

In binding patterns, the pattern starts with a declaration keyword ( var , let , or const ). Then, each individual property must either be bound to a variable or further destructured.

All variables share the same declaration, so if you want some variables to be re-assignable but others to be read-only, you may have to destructure twice — once with let , once with const .

In many other syntaxes where the language binds a variable for you, you can use a binding destructuring pattern. These include:

• The looping variable of for...in for...of , and for await...of loops;
• Function parameters;
• The catch binding variable.

In assignment patterns, the pattern does not start with a keyword. Each destructured property is assigned to a target of assignment — which may either be declared beforehand with var or let , or is a property of another object — in general, anything that can appear on the left-hand side of an assignment expression.

Note: The parentheses ( ... ) around the assignment statement are required when using object literal destructuring assignment without a declaration.

{ a, b } = { a: 1, b: 2 } is not valid stand-alone syntax, as the { a, b } on the left-hand side is considered a block and not an object literal according to the rules of expression statements . However, ({ a, b } = { a: 1, b: 2 }) is valid, as is const { a, b } = { a: 1, b: 2 } .

If your coding style does not include trailing semicolons, the ( ... ) expression needs to be preceded by a semicolon, or it may be used to execute a function on the previous line.

Note that the equivalent binding pattern of the code above is not valid syntax:

You can only use assignment patterns as the left-hand side of the assignment operator. You cannot use them with compound assignment operators such as += or *= .

Default value

Each destructured property can have a default value . The default value is used when the property is not present, or has value undefined . It is not used if the property has value null .

The default value can be any expression. It will only be evaluated when necessary.

Rest property

You can end a destructuring pattern with a rest property ...rest . This pattern will store all remaining properties of the object or array into a new object or array.

The rest property must be the last in the pattern, and must not have a trailing comma.

Array destructuring

Basic variable assignment, destructuring with more elements than the source.

In an array destructuring from an array of length N specified on the right-hand side of the assignment, if the number of variables specified on the left-hand side of the assignment is greater than N , only the first N variables are assigned values. The values of the remaining variables will be undefined.

Swapping variables

Two variables values can be swapped in one destructuring expression.

Without destructuring assignment, swapping two values requires a temporary variable (or, in some low-level languages, the XOR-swap trick ).

Parsing an array returned from a function

It's always been possible to return an array from a function. Destructuring can make working with an array return value more concise.

In this example, f() returns the values [1, 2] as its output, which can be parsed in a single line with destructuring.

Ignoring some returned values

You can ignore return values that you're not interested in:

You can also ignore all returned values:

Using a binding pattern as the rest property

The rest property of array destructuring assignment can be another array or object binding pattern. The inner destructuring destructures from the array created after collecting the rest elements, so you cannot access any properties present on the original iterable in this way.

These binding patterns can even be nested, as long as each rest property is the last in the list.

On the other hand, object destructuring can only have an identifier as the rest property.

Unpacking values from a regular expression match

When the regular expression exec() method finds a match, it returns an array containing first the entire matched portion of the string and then the portions of the string that matched each parenthesized group in the regular expression. Destructuring assignment allows you to unpack the parts out of this array easily, ignoring the full match if it is not needed.

Using array destructuring on any iterable

Array destructuring calls the iterable protocol of the right-hand side. Therefore, any iterable, not necessarily arrays, can be destructured.

Non-iterables cannot be destructured as arrays.

Iterables are only iterated until all bindings are assigned.

The rest binding is eagerly evaluated and creates a new array, instead of using the old iterable.

Object destructuring

Basic assignment, assigning to new variable names.

A property can be unpacked from an object and assigned to a variable with a different name than the object property.

Here, for example, const { p: foo } = o takes from the object o the property named p and assigns it to a local variable named foo .

Assigning to new variable names and providing default values

A property can be both

• Unpacked from an object and assigned to a variable with a different name.
• Assigned a default value in case the unpacked value is undefined .

Unpacking properties from objects passed as a function parameter

Objects passed into function parameters can also be unpacked into variables, which may then be accessed within the function body. As for object assignment, the destructuring syntax allows for the new variable to have the same name or a different name than the original property, and to assign default values for the case when the original object does not define the property.

Consider this object, which contains information about a user.

Here we show how to unpack a property of the passed object into a variable with the same name. The parameter value { id } indicates that the id property of the object passed to the function should be unpacked into a variable with the same name, which can then be used within the function.

You can define the name of the unpacked variable. Here we unpack the property named displayName , and rename it to dname for use within the function body.

Nested objects can also be unpacked. The example below shows the property fullname.firstName being unpacked into a variable called name .

Setting a function parameter's default value

Default values can be specified using = , and will be used as variable values if a specified property does not exist in the passed object.

Below we show a function where the default size is 'big' , default co-ordinates are x: 0, y: 0 and default radius is 25.

In the function signature for drawChart above, the destructured left-hand side has a default value of an empty object = {} .

You could have also written the function without that default. However, if you leave out that default value, the function will look for at least one argument to be supplied when invoked, whereas in its current form, you can call drawChart() without supplying any parameters. Otherwise, you need to at least supply an empty object literal.

For more information, see Default parameters > Destructured parameter with default value assignment .

Nested object and array destructuring

For of iteration and destructuring, computed object property names and destructuring.

Computed property names, like on object literals , can be used with destructuring.

Invalid JavaScript identifier as a property name

Destructuring can be used with property names that are not valid JavaScript identifiers by providing an alternative identifier that is valid.

Destructuring primitive values

Object destructuring is almost equivalent to property accessing . This means if you try to destruct a primitive value, the value will get wrapped into the corresponding wrapper object and the property is accessed on the wrapper object.

Same as accessing properties, destructuring null or undefined throws a TypeError .

This happens even when the pattern is empty.

Combined array and object destructuring

Array and object destructuring can be combined. Say you want the third element in the array props below, and then you want the name property in the object, you can do the following:

The prototype chain is looked up when the object is deconstructed

When deconstructing an object, if a property is not accessed in itself, it will continue to look up along the prototype chain.

Specifications

Browser compatibility.

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

• Assignment operators
• ES6 in Depth: Destructuring on hacks.mozilla.org (2015)

• DSA with JS - Self Paced
• JS Tutorial
• JS Exercise
• JS Interview Questions
• JS Operator
• JS Projects
• JS Examples
• JS Free JS Course
• JS A to Z Guide
• JS Formatter
• JavaScript RangeError - Repeat count must be less than infinity
• Call by Value Vs Call by Reference in JavaScript
• JavaScript Call a function after a fixed time
• How to use Regex to get the string between curly braces using JavaScript ?
• Introduction to Handsontable.js
• How to detect If textbox content has changed using JavaScript ?
• JavaScript program to print Alphabets from A to Z using Loop
• How to detect the device is an Android device using JavaScript ?
• How to get the first key name of a JavaScript object ?
• How to Get Current Value of a CSS Property in JavaScript ?
• How to wait for multiple Promises in JavaScript ?
• JavaScript RangeError - Invalid array length
• JavaScript RangeError - Radix must be an integer
• How to pass image as a parameter in JavaScript function ?
• Stream Netflix Videos for Free using IMDB, TMDB and 2Embed APIs
• How to access variables from another file using JavaScript ?
• How to Execute JavaScript Code ?
• Difference between Debouncing and Throttling
• How to access first value of an object using JavaScript ?

Destructuring Assignment in JavaScript

Destructuring Assignment is a JavaScript expression that allows to unpack values from arrays, or properties from objects, into distinct variables data can be extracted from arrays, objects, nested objects and assigning to variables . In Destructuring Assignment on the left-hand side defined that which value should be unpacked from the sourced variable. In general way implementation of the extraction of the array is as shown below:  Example:  

• Array destructuring:

Object destructuring:

Array destructuring: Using the Destructuring Assignment in JavaScript array possible situations, all the examples are listed below:

• Example 1: When using destructuring assignment the same extraction can be done using below implementations. 
• Example 2: The array elements can be skipped as well using a comma separator. A single comma can be used to skip a single array element. One key difference between the spread operator and array destructuring is that the spread operator unpacks all array elements into a comma-separated list which does not allow us to pick or choose which elements we want to assign to variables. To skip the whole array it can be done using the number of commas as there is a number of array elements. 
• Example 3: In order to assign some array elements to variable and rest of the array elements to only a single variable can be achieved by using rest operator (…) as in below implementation. But one limitation of rest operator is that it works correctly only with the last elements implying a subarray cannot be obtained leaving the last element in the array. 
• Example 4: Values can also be swapped using destructuring assignment as below: 
• Example 5: Data can also be extracted from an array returned from a function. One advantage of using a destructuring assignment is that there is no need to manipulate an entire object in a function but just the fields that are required can be copied inside the function. 
• Example 6: In ES5 to assign variables from objects its implementation is 
• Example 7: The above implementation in ES6 using destructuring assignment is. 
• Example1: The Nested objects can also be destructured using destructuring syntax. 
• Example2: Nested objects can also be destructuring

Please Login to comment...

Similar reads.

• JavaScript-Questions
• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

JS Tutorial

Js versions, js functions, js html dom, js browser bom, js web apis, js vs jquery, js graphics, js examples, js references, javascript array methods, basic array methods, javascript array length.

The length property returns the length (size) of an array:

JavaScript Array toString()

The JavaScript method toString() converts an array to a string of (comma separated) array values.

JavaScript Array at()

ES2022 intoduced the array method at() :

Get the third element of fruits using at():

Get the third element of fruits using []:

The at() method returns an indexed element from an array.

The at() method returns the same as [] .

The at() method is supported in all modern browsers since March 2022:

Many languages allows negative bracket indexing like [-1] to access elements from the end of an object / array / string.

This is not possible in JavaScript, because [] is used for accessing both arrays and objects. obj[-1] refers to the value of key -1, not to the last property of the object.

The at() method was introduced in ES2022 to solve this problem.

JavaScript Array join()

The join() method also joins all array elements into a string.

It behaves just like toString() , but in addition you can specify the separator:

Popping and Pushing

When you work with arrays, it is easy to remove elements and add new elements.

This is what popping and pushing is:

Popping items out of an array, or pushing items into an array.

Advertisement

JavaScript Array pop()

The pop() method removes the last element from an array:

The pop() method returns the value that was "popped out":

JavaScript Array push()

The push() method adds a new element to an array (at the end):

The push() method returns the new array length:

Shifting Elements

Shifting is equivalent to popping, but working on the first element instead of the last.

JavaScript Array shift()

The shift() method removes the first array element and "shifts" all other elements to a lower index.

The shift() method returns the value that was "shifted out":

JavaScript Array unshift()

The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:

The unshift() method returns the new array length:

Changing Elements

Array elements are accessed using their index number :

Array indexes start with 0:

[0] is the first array element [1] is the second [2] is the third ...

The length property provides an easy way to append a new element to an array:

JavaScript Array delete()

Using delete() leaves undefined holes in the array.

Use pop() or shift() instead.

Merging Arrays (Concatenating)

In programming languages, concatenation means joining strings end-to-end.

Concatenation "snow" and "ball" gives "snowball".

Concatenating arrays means joining arrays end-to-end.

JavaScript Array concat()

The concat() method creates a new array by merging (concatenating) existing arrays:

Example (Merging Two Arrays)

The concat() method does not change the existing arrays. It always returns a new array.

The concat() method can take any number of array arguments.

Example (Merging Three Arrays)

The concat() method can also take strings as arguments:

Example (Merging an Array with Values)

Array copywithin().

The copyWithin() method copies array elements to another position in an array:

Copy to index 2, all elements from index 0:

Copy to index 2, the elements from index 0 to 2:

The copyWithin() method overwrites the existing values.

The copyWithin() method does not add items to the array.

The copyWithin() method does not change the length of the array.

Flattening an Array

Flattening an array is the process of reducing the dimensionality of an array.

Flattening is useful when you want to convert a multi-dimensional array into a one-dimensional array.

JavaScript Array flat()

ES2019 Introduced the Array flat() method.

The flat() method creates a new array with sub-array elements concatenated to a specified depth.

Browser Support

JavaScript Array flat() is supported in all modern browsers since January 2020:

Splicing and Slicing Arrays

The splice() method adds new items to an array.

The slice() method slices out a piece of an array.

JavaScript Array splice()

The splice() method can be used to add new items to an array:

The first parameter (2) defines the position where new elements should be added (spliced in).

The second parameter (0) defines how many elements should be removed .

The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added .

The splice() method returns an array with the deleted items:

Using splice() to Remove Elements

With clever parameter setting, you can use splice() to remove elements without leaving "holes" in the array:

The first parameter (0) defines the position where new elements should be added (spliced in).

The second parameter (1) defines how many elements should be removed .

The rest of the parameters are omitted. No new elements will be added.

JavaScript Array toSpliced()

ES2023 added the Array toSpliced() method as a safe way to splice an array without altering the original array.

The difference between the new toSpliced() method and the old splice() method is that the new method creates a new array, keeping the original array unchanged, while the old method altered the original array.

JavaScript Array slice()

The slice() method slices out a piece of an array into a new array:

Slice out a part of an array starting from array element 1 ("Orange"):

The slice() method creates a new array.

The slice() method does not remove any elements from the source array.

Slice out a part of an array starting from array element 3 ("Apple"):

The slice() method can take two arguments like slice(1, 3) .

The method then selects elements from the start argument, and up to (but not including) the end argument.

If the end argument is omitted, like in the first examples, the slice() method slices out the rest of the array.

Automatic toString()

JavaScript automatically converts an array to a comma separated string when a primitive value is expected.

This is always the case when you try to output an array.

These two examples will produce the same result:

All JavaScript objects have a toString() method.

Searching Arrays

Searching arrays are covered in the next chapter of this tutorial.

Sorting Arrays

Sorting arrays covers the methods used to sort arraysg.

Iterating Arrays

Iterating arrays covers methods that operate on all array elements.

Complete Array Reference

For a complete Array reference, go to our:

Complete JavaScript Array Reference .

The reference contains descriptions and examples of all Array properties and methods.

Test Yourself With Exercises

Use the correct Array method to remove the last item of the fruits array.

Start the Exercise

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

JavaScript Arrays - How to Create an Array in JavaScript

An array is a type of data structure where you can store an ordered list of elements.

In this article, I will show you 3 ways you can create an array using JavaScript.  I will also show you how to create an array from a string using the split() method.

How to create an array in JavaScript using the assignment operator

The most common way to create an array in JavaScript would be to assign that array to a variable like this:

If we console.log the array, then it will show us all 4 elements listed in the array.

How to create an array in JavaScript using the new operator and Array constructor

Another way to create an array is to use the new keyword with the Array constructor.

Here is the basic syntax:

If a number parameter is passed into the parenthesis, that will set the length for the new array.

In this example, we are creating an array with a length of 3 empty slots.

If we use the length property on the new array, then it will return the number 3.

But if we try to access any elements of the array, it will come back undefined because all of those slots are currently empty.

We can modify our example to take in multiple parameters and create an array of food items.

How to create an array in JavaScript using Array.of()

Another way to create an array is to use the Array.of() method. This method takes in any number of arguments and creates a new array instance.

We can modify our earlier food example to use the Array.of() method like this.

This method is really similar to using the Array constructor. The key difference is that if you pass in a single number using   Array.of() it will return an array with that number in it. But the Array constructor creates x number of empty slots for that number.

In this example it would return an array with the number 4 in it.

But if I changed this example to use the Array constructor, then it would return an array of 4 empty slots.

How to create an array from a string using the split() method

Here is the syntax for the JavaScript split() method.

The optional separator is a type of pattern that tells the computer where each split should happen.

The optional limit parameter is a positive number that tells the computer how many substrings should be in the returned array value.

In this example, I have the string "I love freeCodeCamp" . If I were to use the split() method without the separator, then the return value would be an array of the entire string.

If I wanted to change it so the string is split up into individual characters, then I would need to add a separator. The separator would be an empty string.

Notice how the spaces are considered characters in the return value.

If I wanted to change it so the string is split up into individual words, then the separator would be an empty string with a space.

In this article I showed you three ways to create an array using the assignment operator, Array constructor, and Array.of() method.

If a number parameter is passed into the parenthesis, that will set the length for the new array with that number of empty slots.

For example, this code will create an array with a length of 3 empty slots.

We can also pass in multiple parameters like this:

You can also take a string and create an array using the split() method

I hope you enjoyed this article on JavaScript arrays.

I am a musician and a programmer.

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