javascript multiple assignment from object

JS Reference

Html events, html objects, other references, javascript object.assign(), description.

The Object.assign() method copies properties from one or more source objects to a target object.

Related Methods:

Object.assign() copies properties from a source object to a target object.

Object.create() creates an object from an existing object.

Object.fromEntries() creates an object from a list of keys/values.

Return Value

Advertisement

Browser Support

Object.assign() is an ECMAScript6 (ES6) feature.

ES6 (JavaScript 2015) is supported in all modern browsers since June 2017:

Object.assign() is not supported in Internet Explorer.

Object Tutorials

JavaScript Objects

JavaScript Object Definition

JavaScript Object Methods

JavaScript Object Properties

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.

Object.assign() in JavaScript

In JavaScript, the Object.assign() function copies properties from one or more source objects to a target object. It returns the target object.

Object.assign() is commonly used to shallow copy objects, although the spread operator is generally faster than Object.assign() for shallow copying . Shallow copying is most commonly used in Redux reducers .

Multiple Sources

You can pass multiple source objects to Object.assign() . If there's multiple sources with the same property, the last one in the parameter list wins out.

More Fundamentals Tutorials

• How to Get Distinct Values in a JavaScript Array
• Check if a Date is Valid in JavaScript
• Encode base64 in JavaScript
• Check if URL Contains a String
• JavaScript Add Month to Date
• JavaScript Add Days to Date
• 3 Patterns to Merge Arrays in JavaScript

Understanding Object.assign() Method in JavaScript

Cloning an object, merging objects, converting an array to an object, browser compatibility.

The Object.assign() method was introduced in ES6 that copies all enumerable own properties from one or more source objects to a target object, and returns the target object .

The Object.assign() method invokes the getters on the source objects and setters on the target object. It assigns properties only, not copying or defining new properties.

The properties in the target object are overwritten by the properties in source objects if they have the same key. Similarly, the later source objects' properties are overwritten by the earlier ones.

The Object.assign() method handles null and undefined source values gracefully, and doesn't throw any exception.

Here is how the syntax of Object.assign() looks like:

• target — The target object that is modified and returned after applying the sources' properties.
• sources — The source object(s) containing the properties you want to apply to the target object.

The Object.assign() method is one of the four ways, I explained earlier, to clone an object in JavaScript.

The following example demonstrates how you can use Object.assign() to clone an object:

Remember that Object.assign() only creates a shallow clone of the object and not a deep clone.

To create a deep clone, you can either use JSON methods or a 3rd-party library like Lodash .

The Object.assign() method can also merge multiple source objects into a target object. If you do not want to modify the target object, just pass an empty ( {} ) object as target as shown below:

If the source objects have same properties , they are overwritten by the properties of the objects later in the parameters order:

Lastly, you could also use the Object.assign() method to convert an array to an object in JavaScript. The array indexes are converted to object keys, and array values are converted to object values:

As Object.assign() is part of ES6, it only works in modern browsers. To support older browsers like IE, you can use a polyfill available on MDN.

To learn more about JavaScript objects, prototypes, and classes, take a look at this guide .

Read Next: Understanding Array.from() Method in JavaScript

✌️ Like this article? Follow me on Twitter and LinkedIn . You can also subscribe to RSS Feed .

You might also like...

• Get the length of a Map in JavaScript
• Delete an element from a Map in JavaScript
• Get the first element of a Map in JavaScript
• Get an element from a Map using JavaScript
• Update an element in a Map using JavaScript
• Add an element to a Map in JavaScript

The simplest cloud platform for developers & teams. Start with a $200 free credit.

Buy me a coffee ☕

If you enjoy reading my articles and want to help me out paying bills, please consider buying me a coffee ($5) or two ($10). I will be highly grateful to you ✌️

Enter the number of coffees below:

✨ Learn to build modern web applications using JavaScript and Spring Boot

I started this blog as a place to share everything I have learned in the last decade. I write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things web development.

The newsletter is sent every week and includes early access to clear, concise, and easy-to-follow tutorials, and other stuff I think you'd enjoy! No spam ever, unsubscribe at any time.

• JavaScript, Node.js & Spring Boot
• In-depth tutorials
• Super-handy protips
• Cool stuff around the web
• 1-click unsubscribe
• No spam, free-forever!

How to Use Object Destructuring in JavaScript

Object destructuring is a useful JavaScript feature to extract properties from objects and bind them to variables.

Even better, object destructuring can extract multiple properties in a single statement, can access properties from nested objects, and can set a default value if the property doesn't exist.

This post will help you understand how to use object destructuring in JavaScript.

Table of Contents

1. the need for object destructuring, 2. extracting a property, 3. extracting multiple properties, 4. default values, 6. extracting properties from nested objects, 7. extracting a dynamic name property, 8. rest object after destructuring, 9.1 bind properties to variables, 9.2 function parameter destructuring, 10. summary.

Imagine you'd like to extract some properties of an object. In a pre-ES2015 environment, you'd need to write the following code:

Open the demo.

The property hero.name value is assigned to the variable name . Same way hero.realName value is assigned to realName .

By writing var name = hero.name , you have to mention the name binding 2 times, and the same for realName . This way of accessing properties and assigning them to variables requires boilerplate code.

That's where the object destructuring syntax is useful: you can read a property and assign its value to a variable without duplicating the property name. What is more, you can read multiple properties from the same object in just one statement!

Let's refactor the above script and apply the object destructuring to access the properties name and realName :

const { name, realName } = hero is an object destructuring assignment. This statement defines the variables name and realName , then assigns to them the values of properties hero.name and hero.realName correspondingly.

Compare two approaches to accessing the object properties:

it's visible that object destructuring is handier because neither the property names nor the object variable is duplicated.

The syntax of object destructuring is pretty simple:

Where identifier is the name of the property to access and expression should evaluate to an object. After the destructuring, the variable identifier contains the property value.

Here's the equivalent code using a property accessor :

Let's try object destructuring in practice:

The statement const { name } = hero defines the variable name and initializes it with the value of hero.name property.

To destructure the object into multiple properties, enumerate as many properties as you like adding commas , in-between:

Where identifier1 , ..., identifierN are names of properties to access, and expression should evaluate to an object. After the destructuring, the variables identifier1 , ..., identifierN contain corresponding properties values.

Here's the equivalent code:

Let's take a look again at the example from the first section, where 2 properties are extracted:

const { name, realName } = hero creates 2 variables name and realName assigned with values of corresponding properties hero.name and hero.realName .

If the destructured object doesn't have the property specified in the destructuring assignment, then the variable is assigned with undefined . Let's see how it happens:

After destructuring the variable enemies is undefined because the property enemies doesn't exist in the object hero .

Fortunately, you can set a default value if the property doesn't exist in the destructured object:

Where identifier is the name of the property to access and expression should evaluate to an object. After destructuring, the variable identifier contains the property value or is assigned with defaultValue if the property identifier doesn't exist.

Let's change the previous code sample, and use the default value feature:

Now, instead of being undefined , the variable enemies defaults to ['Joker'] .

To create variables of different names than the properties you can use the aliasing feature of object destructuring.

identifier is the name of the property to access, aliasIdentifier is the variable name, and expression should evaluate to an object. After destructuring, the variable aliasIdentifier contains the property value.

The equivalent code:

Here's an example of an object destructuring alias feature:

Looking at const { realName: secretName } = hero , the destructuring defines a new variable secretName (alias variable) and assigns to it the value of hero.realName .

In the previous examples, the objects were plain: the properties have primitive data types (e.g. strings).

But objects can be nested in other objects. In other words, some properties can contain objects.

In such a case, you still can use the object destructuring and access properties from deep. Here's the basic syntax:

nestedObjectProp is the name of the property that holds a nested object. identifier is the property name to access from the nested object. expression should evaluate to the destructured object.

After destructuring, the variable identifier contains the property value of the nested object.

The above syntax is equivalent to:

The level of nesting to extract properties from is unlimited. If you want to extract properties from deep, just add more nested curly braces:

For example, the object hero contains a nested object { city: 'Gotham'} .

The object destructuring const { address: { city } } = hero accesses the property city from the nested object and creates a variable city having the property value.

You can extract into variables properties with a dynamic name (the property name is known at runtime):

propName expression should evaluate to a property name (usually a string), and the identifier should indicate the variable name created after destructuring. expression should evaluate to the object you'd like to destructure.

An equivalent code without object destructuring:

Let's look at an example where prop holds the property name:

const { [prop]: name } = hero is an object destructuring that assigns to variable name the value hero[prop] , where prop is a variable holding the property name.

The rest syntax is useful to collect the remaining properties after destructuring:

Where identifier is the name of the property to access and expression should evaluate to an object. After destructuring, the variable identifier contains the property value. rest variable is a plain object with the remaining properties.

For example, let's extract the property name , but collect the rest of the properties into a variable rest :

The destructuring const { name, ...realHero } = hero extracts the property name . Also, the remaining properties ( realName and company ) are collected into rest .

9. Common use cases

As seen in many examples before, the object destructuring binds property values to variables.

The object destructuring can assign values to variables declared using const , let , and var . Or even assign to an already existing variable.

For example, here's how to destructure using let statement:

How to destructure using var statement:

And how to destructure to an already declared variable:

I find it satisfying to combine for..of cycle with object destructuring to extract the property right away:

Object destructuring can be placed anywhere where an assignment happens.

For example, you could destruct an object right inside the parameter of a function:

function({ name }) destructures the function parameter and creates a variable name holding the value of name property.

Object destructuring is a powerful feature to extract properties from an object and bind these values to variables.

I like object destructuring due to the concise syntax and the ability to extract multiple variables in one statement.

Have questions regarding object destructuring? Ask in a comment below!

Like the post? Please share!

About Dmitri Pavlutin

Popular posts.

Popular Tutorials

Popular examples, reference materials, learn python interactively, javascript object methods.

• JavaScript assign()
• JavaScript create()
• JavaScript defineProperties()
• JavaScript defineProperty()
• JavaScript entries()
• JavaScript freeze()
• JavaScript fromEntries()
• JavaScript getOwnPropertyDescriptor()
• JavaScript getOwnPropertyDescriptors()
• JavaScript getOwnPropertyNames()
• JavaScript getOwnPropertySymbols()
• JavaScript getPrototypeOf()
• JavaScript hasOwnProperty()
• JavaScript is()
• JavaScript isExtensible()
• JavaScript isFrozen()
• JavaScript isPrototypeOf()
• JavaScript isSealed()
• JavaScript keys()
• JavaScript preventExtensions()
• JavaScript propertyIsEnumerable()
• JavaScript seal()
• JavaScript setPrototypeOf()
• JavaScript toLocaleString()
• JavaScript toString()
• JavaScript valueOf()
• JavaScript values()

JavaScript Tutorials

JavaScript Object.keys()

JavaScript Object.values()

JavaScript Object.getOwnPropertyNames()

JavaScript Object.is()

• Javascript Object.defineProperties()
• JavaScript Object.entries()

JavaScript Object.assign()

The Object.assign() method copies all the enumerable properties of the given objects to a single object and returns it.

assign() Syntax

The syntax of the assign() method is:

Here, assign() is a static method. Hence, we need to access the method using the class name, Object .

assign() Parameters

The assign() method takes in:

• target - the target object to which we will copy all the properties of the sources .
• sources - the source object(s) whose properties we want to copy.

assign() Return Value

The assign() method returns the target object.

Note: Properties in the target object are overwritten by properties in the sources if they have the same key.

Example 1: Javascript Object.assign() to Clone Objects

In the above example, we have used the assign() method to assign the contents of obj to newObject .

Since assign() modifies the target object and returns the same object, both copy and newObject are clones of one another. As a result, we get identical outputs when we print them both.

Example 2: assign() to Merge Objects

In the above example, we have used assign() to merge the objects o1 , o2 , and o3 into a new object o4 .

Using the empty object {} as a target object ensures that the properties of the other objects are copied to a new object without modifying any of the source objects.

As can be seen from the output, properties of later objects overwrite that of earlier ones. For example,

• the b key from o1 is overwritten by its counterpart in o2 .
• the c keys from o1 and o2 are overwritten by their counterpart in o3 .

Note: If the source value is a reference to an object, it only copies the reference value.

Sorry about that.

Related Functions

JavaScript Library

A Guide to Variable Assignment and Mutation in JavaScript

Share this article

Variable Assignment

Variable reassignment, variable assignment by reference, copying by reference, the spread operator to the rescue, are mutations bad, frequently asked questions (faqs) about javascript variable assignment and mutation.

Mutations are something you hear about fairly often in the world of JavaScript, but what exactly are they, and are they as evil as they’re made out to be?

In this article, we’re going to cover the concepts of variable assignment and mutation and see why — together — they can be a real pain for developers. We’ll look at how to manage them to avoid problems, how to use as few as possible, and how to keep your code predictable.

If you’d like to explore this topic in greater detail, or get up to speed with modern JavaScript, check out the first chapter of my new book Learn to Code with JavaScript for free.

Let’s start by going back to the very basics of value types …

Every value in JavaScript is either a primitive value or an object. There are seven different primitive data types:

• numbers, such as 3 , 0 , -4 , 0.625
• strings, such as 'Hello' , "World" , `Hi` , ''
• Booleans, true and false
• symbols — a unique token that’s guaranteed never to clash with another symbol
• BigInt — for dealing with large integer values

Anything that isn’t a primitive value is an object , including arrays, dates, regular expressions and, of course, object literals. Functions are a special type of object. They are definitely objects, since they have properties and methods, but they’re also able to be called.

Variable assignment is one of the first things you learn in coding. For example, this is how we would assign the number 3 to the variable bears :

A common metaphor for variables is one of boxes with labels that have values placed inside them. The example above would be portrayed as a box containing the label “bears” with the value of 3 placed inside.

An alternative way of thinking about what happens is as a reference, that maps the label bears to the value of 3 :

If I assign the number 3 to another variable, it’s referencing the same value as bears:

The variables bears and musketeers both reference the same primitive value of 3. We can verify this using the strict equality operator, === :

The equality operator returns true if both variables are referencing the same value.

Some gotchas when working with objects

The previous examples showed primitive values being assigned to variables. The same process is used when assigning objects:

This assignment means that the variable ghostbusters references an object:

A big difference when assigning objects to variables, however, is that if you assign another object literal to another variable, it will reference a completely different object — even if both object literals look exactly the same! For example, the assignment below looks like the variable tmnt (Teenage Mutant Ninja Turtles) references the same object as the variable ghostbusters :

Even though the variables ghostbusters and tmnt look like they reference the same object, they actually both reference a completely different object, as we can see if we check with the strict equality operator:

When the const keyword was introduced in ES6, many people mistakenly believed that constants had been introduced to JavaScript, but this wasn’t the case. The name of this keyword is a little misleading.

Any variable declared with const can’t be reassigned to another value. This goes for primitive values and objects. For example, the variable bears was declared using const in the previous section, so it can’t have another value assigned to it. If we try to assign the number 2 to the variable bears , we get an error:

The reference to the number 3 is fixed and the bears variable can’t be reassigned another value.

The same applies to objects. If we try to assign a different object to the variable ghostbusters , we get the same error:

Variable reassignment using let

When the keyword let is used to declare a variable, it can be reassigned to reference a different value later on in our code. For example, we declared the variable musketeers using let , so we can change the value that musketeers references. If D’Artagnan joined the Musketeers, their number would increase to 4:

This can be done because let was used to declare the variable. We can alter the value that musketeers references as many times as we like.

The variable tmnt was also declared using let , so it can also be reassigned to reference another object (or a different type entirely if we like):

Note that the variable tmnt now references a completely different object ; we haven’t just changed the number property to 5.

In summary , if you declare a variable using const , its value can’t be reassigned and will always reference the same primitive value or object that it was originally assigned to. If you declare a variable using let , its value can be reassigned as many times as required later in the program.

Using const as often as possible is generally considered good practice, as it means that the value of variables remains constant and the code is more consistent and predictable, making it less prone to errors and bugs.

In native JavaScript, you can only assign values to variables. You can’t assign variables to reference another variable, even though it looks like you can. For example, the number of Stooges is the same as the number of Musketeers, so we can assign the variable stooges to reference the same value as the variable musketeers using the following:

This looks like the variable stooges is referencing the variable musketeers , as shown in the diagram below:

However, this is impossible in native JavaScript: a variable can only reference an actual value; it can’t reference another variable . What actually happens when you make an assignment like this is that the variable on the left of the assignment will reference the value the variable on the right references, so the variable stooges will reference the same value as the musketeers variable, which is the number 3. Once this assignment has been made, the stooges variable isn’t connected to the musketeers variable at all.

This means that if D’Artagnan joins the Musketeers and we set the value of the musketeers to 4, the value of stooges will remain as 3. In fact, because we declared the stooges variable using const , we can’t set it to any new value; it will always be 3.

In summary : if you declare a variable using const and set it to a primitive value, even via a reference to another variable, then its value can’t change. This is good for your code, as it means it will be more consistent and predictable.

A value is said to be mutable if it can be changed. That’s all there is to it: a mutation is the act of changing the properties of a value.

All primitive value in JavaScript are immutable : you can’t change their properties — ever. For example, if we assign the string "cake" to variable food , we can see that we can’t change any of its properties:

If we try to change the first letter to “f”, it looks like it has changed:

But if we take a look at the value of the variable, we see that nothing has actually changed:

The same thing happens if we try to change the length property:

Despite the return value implying that the length property has been changed, a quick check shows that it hasn’t:

Note that this has nothing to do with declaring the variable using const instead of let . If we had used let , we could set food to reference another string, but we can’t change any of its properties. It’s impossible to change any properties of primitive data types because they’re immutable .

Mutability and objects in JavaScript

Conversely, all objects in JavaScript are mutable, which means that their properties can be changed, even if they’re declared using const (remember let and const only control whether or not a variable can be reassigned and have nothing to do with mutability). For example, we can change the the first item of an array using the following code:

Note that this change still occurred, despite the fact that we declared the variable food using const . This shows that using const does not stop objects from being mutated .

We can also change the length property of an array, even if it has been declared using const :

Remember that when we assign variables to object literals, the variables will reference completely different objects, even if they look the same:

But if we assign a variable fantastic4 to another variable, they will both reference the same object:

This assigns the variable fantastic4 to reference the same object that the variable tmnt references, rather than a completely different object.

This is often referred to as copying by reference , because both variables are assigned to reference the same object.

This is important, because any mutations made to this object will be seen in both variables.

So, if Spider-Man joins The Fantastic Four, we might update the number value in the object:

This is a mutation, because we’ve changed the number property rather than setting fantastic4 to reference a new object.

This causes us a problem, because the number property of tmnt will also also change, possibly without us even realizing:

This is because both tmnt and fantastic4 are referencing the same object, so any mutations that are made to either tmnt or fantastic4 will affect both of them.

This highlights an important concept in JavaScript: when objects are copied by reference and subsequently mutated, the mutation will affect any other variables that reference that object. This can lead to unintended side effects and bugs that are difficult to track down.

So how do you make a copy of an object without creating a reference to the original object? The answer is to use the spread operator !

The spread operator was introduced for arrays and strings in ES2015 and for objects in ES2018. It allows you to easily make a shallow copy of an object without creating a reference to the original object.

The example below shows how we could set the variable fantastic4 to reference a copy of the tmnt object. This copy will be exactly the same as the tmnt object, but fantastic4 will reference a completely new object. This is done by placing the name of the variable to be copied inside an object literal with the spread operator in front of it:

What we’ve actually done here is assign the variable fantastic4 to a new object literal and then used the spread operator to copy all the enumerable properties of the object referenced by the tmnt variable. Because these properties are values, they’re copied into the fantastic4 object by value, rather than by reference.

Now any changes that are made to either object won’t affect the other. For example, if we update the number property of the fantastic4 variable to 5, it won’t affect the tmnt variable:

The spread operator also has a useful shortcut notation that can be used to make copies of an object and then make some changes to the new object in a single line of code.

For example, say we wanted to create an object to model the Teenage Mutant Ninja Turtles. We could create the first turtle object, and assign the variable leonardo to it:

The other turtles all have the same properties, except for the weapon and color properties, that are different for each turtle. It makes sense to make a copy of the object that leonardo references, using the spread operator, and then change the weapon and color properties, like so:

We can do this in one line by adding the properties we want to change after the reference to the spread object. Here’s the code to create new objects for the variables donatello and raphael :

Note that using the spread operator in this way only makes a shallow copy of an object. To make a deep copy, you’d have to do this recursively, or use a library. Personally, I’d advise that you try to keep your objects as shallow as possible.

In this article, we’ve covered the concepts of variable assignment and mutation and seen why — together — they can be a real pain for developers.

Mutations have a bad reputation, but they’re not necessarily bad in themselves. In fact, if you’re building a dynamic web app, it must change at some point. That’s literally the meaning of the word “dynamic”! This means that there will have to be some mutations somewhere in your code. Having said that, the fewer mutations there are, the more predictable your code will be, making it easier to maintain and less likely to develop any bugs.

A particularly toxic combination is copying by reference and mutations. This can lead to side effects and bugs that you don’t even realize have happened. If you mutate an object that’s referenced by another variable in your code, it can cause lots of problems that can be difficult to track down. The key is to try and minimize your use of mutations to the essential and keep track of which objects have been mutated.

In functional programming, a pure function is one that doesn’t cause any side effects, and mutations are one of the biggest causes of side effects.

A golden rule is to avoid copying any objects by reference. If you want to copy another object, use the spread operator and then make any mutations immediately after making the copy.

Next up, we’ll look into array mutations in JavaScript .

Don’t forget to check out my new book Learn to Code with JavaScript if you want to get up to speed with modern JavaScript. You can read the first chapter for free. And please reach out on Twitter if you have any questions or comments!

What is the difference between variable assignment and mutation in JavaScript?

In JavaScript, variable assignment refers to the process of assigning a value to a variable. For example, let x = 5; Here, we are assigning the value 5 to the variable x. On the other hand, mutation refers to the process of changing the value of an existing variable. For example, if we later write x = 10; we are mutating the variable x by changing its value from 5 to 10.

How does JavaScript handle variable assignment and mutation differently for primitive and non-primitive data types?

JavaScript treats primitive data types (like numbers, strings, and booleans) and non-primitive data types (like objects and arrays) differently when it comes to variable assignment and mutation. For primitive data types, when you assign a variable, a copy of the value is created and stored in a new memory location. However, for non-primitive data types, when you assign a variable, both variables point to the same memory location. Therefore, if you mutate one variable, the change is reflected in all variables that point to that memory location.

What is the concept of pass-by-value and pass-by-reference in JavaScript?

Pass-by-value and pass-by-reference are two ways that JavaScript can pass variables to a function. When JavaScript passes a variable by value, it creates a copy of the variable’s value and passes that copy to the function. Any changes made to the variable inside the function do not affect the original variable. However, when JavaScript passes a variable by reference, it passes a reference to the variable’s memory location. Therefore, any changes made to the variable inside the function also affect the original variable.

How can I prevent mutation in JavaScript?

There are several ways to prevent mutation in JavaScript. One way is to use the Object.freeze() method, which prevents new properties from being added to an object, existing properties from being removed, and prevents changing the enumerability, configurability, or writability of existing properties. Another way is to use the const keyword when declaring a variable. This prevents reassignment of the variable, but it does not prevent mutation of the variable’s value if the value is an object or an array.

What is the difference between shallow copy and deep copy in JavaScript?

In JavaScript, a shallow copy of an object is a copy of the object where the values of the original object and the copy point to the same memory location for non-primitive data types. Therefore, if you mutate the copy, the original object is also mutated. On the other hand, a deep copy of an object is a copy of the object where the values of the original object and the copy do not point to the same memory location. Therefore, if you mutate the copy, the original object is not mutated.

How can I create a deep copy of an object in JavaScript?

One way to create a deep copy of an object in JavaScript is to use the JSON.parse() and JSON.stringify() methods. The JSON.stringify() method converts the object into a JSON string, and the JSON.parse() method converts the JSON string back into an object. This creates a new object that is a deep copy of the original object.

What is the MutationObserver API in JavaScript?

The MutationObserver API provides developers with a way to react to changes in a DOM. It is designed to provide a general, efficient, and robust API for reacting to changes in a document.

How does JavaScript handle variable assignment and mutation in the context of closures?

In JavaScript, a closure is a function that has access to its own scope, the scope of the outer function, and the global scope. When a variable is assigned or mutated inside a closure, it can affect the value of the variable in the outer scope, depending on whether the variable was declared in the closure’s scope or the outer scope.

What is the difference between var, let, and const in JavaScript?

In JavaScript, var, let, and const are used to declare variables. var is function scoped, and if it is declared outside a function, it is globally scoped. let and const are block scoped, meaning they exist only within the block they are declared in. The difference between let and const is that let allows reassignment, while const does not.

How does JavaScript handle variable assignment and mutation in the context of asynchronous programming?

In JavaScript, asynchronous programming allows multiple things to happen at the same time. When a variable is assigned or mutated in an asynchronous function, it can lead to unexpected results if other parts of the code are relying on the value of the variable. This is because the variable assignment or mutation may not have completed before the other parts of the code run. To handle this, JavaScript provides several features, such as promises and async/await, to help manage asynchronous code.

Darren loves building web apps and coding in JavaScript, Haskell and Ruby. He is the author of Learn to Code using JavaScript , JavaScript: Novice to Ninja and Jump Start Sinatra .He is also the creator of Nanny State , a tiny alternative to React. He can be found on Twitter @daz4126.

Multiple Variable Assignment in JavaScript

• JavaScript Howtos
• Multiple Variable Assignment in …

Use the = Operator to Assign Multiple Variable in JavaScript

Multiple variable assignment using destructuring assignment with fill() function in javascript.

This tutorial explains multiple variable assignments in JavaScript because variables are the most important part of our coding.

Sometimes, we have to do many variable declarations and assignments as they have the same value. How? Let’s understand.

Assume we have variable1 , variable2 , and variable3 and want all three variables to have a value of 1 .

They seem equivalent, but they are not. The reason is variables’ scope and assignment precedence .

The assignment operator is right-associative in JavaScript, which means it parses the left-most after parsing the right-most.

Let’s have another example to understand variable scope and assignment precedence .

Focus on the code and see that variable1 , variable2 , and variable3 are in function scope and local to the test1() .

They are not available outside of test1() method that’s why returning undefined . Here, var variable1 = 1, variable2 = 1, varialbe3 = 1; is equivalent to var variable1 = 1; var variable2 = 1; var varialbe3 = 1; .

Now, observe the test2() function. The variable1 is in function scope due to the var keyword, but variable2 and variable3 are leaking because they are not written with the var keyword.

They are globally accessible outside the test2() function. Remember that the variable declarations are hoisted only.

However, the precedence is right-associative which means var variable1 = (window.variable2 =(window.variable3 = 1)); .

Which Means the variable3 will be assigned to 1 first, then the value of variable3 will be allocated to variable2 , and lastly, the value of variable2 will be assigned to variable1 .

To avoid a variable leak in test2() , we can split the variable declaration and assignment into two separate lines. In this way, we can restrict variable1 , variable2 , and variable3 to test2() function scope.

The destructuring assignment helps in assigning multiple variables with the same value without leaking them outside the function.

The fill() method updates all array elements with a static value and returns the modified array. You can read more about fill() here .

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

Destructuring assignment

The two most used data structures in JavaScript are Object and Array .

• Objects allow us to create a single entity that stores data items by key.
• Arrays allow us to gather data items into an ordered list.

However, when we pass these to a function, we may not need all of it. The function might only require certain elements or properties.

Destructuring assignment is a special syntax that allows us to “unpack” arrays or objects into a bunch of variables, as sometimes that’s more convenient.

Destructuring also works well with complex functions that have a lot of parameters, default values, and so on. Soon we’ll see that.

Array destructuring

Here’s an example of how an array is destructured into variables:

Now we can work with variables instead of array members.

It looks great when combined with split or other array-returning methods:

As you can see, the syntax is simple. There are several peculiar details though. Let’s see more examples to understand it better.

It’s called “destructuring assignment,” because it “destructurizes” by copying items into variables. However, the array itself is not modified.

It’s just a shorter way to write:

Unwanted elements of the array can also be thrown away via an extra comma:

In the code above, the second element of the array is skipped, the third one is assigned to title , and the rest of the array items are also skipped (as there are no variables for them).

…Actually, we can use it with any iterable, not only arrays:

That works, because internally a destructuring assignment works by iterating over the right value. It’s a kind of syntax sugar for calling for..of over the value to the right of = and assigning the values.

We can use any “assignables” on the left side.

For instance, an object property:

In the previous chapter, we saw the Object.entries(obj) method.

We can use it with destructuring to loop over the keys-and-values of an object:

The similar code for a Map is simpler, as it’s iterable:

There’s a well-known trick for swapping values of two variables using a destructuring assignment:

Here we create a temporary array of two variables and immediately destructure it in swapped order.

We can swap more than two variables this way.

The rest ‘…’

Usually, if the array is longer than the list at the left, the “extra” items are omitted.

For example, here only two items are taken, and the rest is just ignored:

If we’d like also to gather all that follows – we can add one more parameter that gets “the rest” using three dots "..." :

The value of rest is the array of the remaining array elements.

We can use any other variable name in place of rest , just make sure it has three dots before it and goes last in the destructuring assignment.

Default values

If the array is shorter than the list of variables on the left, there will be no errors. Absent values are considered undefined:

If we want a “default” value to replace the missing one, we can provide it using = :

Default values can be more complex expressions or even function calls. They are evaluated only if the value is not provided.

For instance, here we use the prompt function for two defaults:

Please note: the prompt will run only for the missing value ( surname ).

Object destructuring

The destructuring assignment also works with objects.

The basic syntax is:

We should have an existing object on the right side, that we want to split into variables. The left side contains an object-like “pattern” for corresponding properties. In the simplest case, that’s a list of variable names in {...} .

For instance:

Properties options.title , options.width and options.height are assigned to the corresponding variables.

The order does not matter. This works too:

The pattern on the left side may be more complex and specify the mapping between properties and variables.

If we want to assign a property to a variable with another name, for instance, make options.width go into the variable named w , then we can set the variable name using a colon:

The colon shows “what : goes where”. In the example above the property width goes to w , property height goes to h , and title is assigned to the same name.

For potentially missing properties we can set default values using "=" , like this:

Just like with arrays or function parameters, default values can be any expressions or even function calls. They will be evaluated if the value is not provided.

In the code below prompt asks for width , but not for title :

We also can combine both the colon and equality:

If we have a complex object with many properties, we can extract only what we need:

The rest pattern “…”

What if the object has more properties than we have variables? Can we take some and then assign the “rest” somewhere?

We can use the rest pattern, just like we did with arrays. It’s not supported by some older browsers (IE, use Babel to polyfill it), but works in modern ones.

It looks like this:

In the examples above variables were declared right in the assignment: let {…} = {…} . Of course, we could use existing variables too, without let . But there’s a catch.

This won’t work:

The problem is that JavaScript treats {...} in the main code flow (not inside another expression) as a code block. Such code blocks can be used to group statements, like this:

So here JavaScript assumes that we have a code block, that’s why there’s an error. We want destructuring instead.

To show JavaScript that it’s not a code block, we can wrap the expression in parentheses (...) :

Nested destructuring

If an object or an array contains other nested objects and arrays, we can use more complex left-side patterns to extract deeper portions.

In the code below options has another object in the property size and an array in the property items . The pattern on the left side of the assignment has the same structure to extract values from them:

All properties of options object except extra which is absent in the left part, are assigned to corresponding variables:

Finally, we have width , height , item1 , item2 and title from the default value.

Note that there are no variables for size and items , as we take their content instead.

Smart function parameters

There are times when a function has many parameters, most of which are optional. That’s especially true for user interfaces. Imagine a function that creates a menu. It may have a width, a height, a title, an item list and so on.

Here’s a bad way to write such a function:

In real-life, the problem is how to remember the order of arguments. Usually, IDEs try to help us, especially if the code is well-documented, but still… Another problem is how to call a function when most parameters are ok by default.

That’s ugly. And becomes unreadable when we deal with more parameters.

Destructuring comes to the rescue!

We can pass parameters as an object, and the function immediately destructurizes them into variables:

We can also use more complex destructuring with nested objects and colon mappings:

The full syntax is the same as for a destructuring assignment:

Then, for an object of parameters, there will be a variable varName for the property incomingProperty , with defaultValue by default.

Please note that such destructuring assumes that showMenu() does have an argument. If we want all values by default, then we should specify an empty object:

We can fix this by making {} the default value for the whole object of parameters:

In the code above, the whole arguments object is {} by default, so there’s always something to destructurize.

Destructuring assignment allows for instantly mapping an object or array onto many variables.

The full object syntax:

This means that property prop should go into the variable varName and, if no such property exists, then the default value should be used.

Object properties that have no mapping are copied to the rest object.

The full array syntax:

The first item goes to item1 ; the second goes into item2 , and all the rest makes the array rest .

It’s possible to extract data from nested arrays/objects, for that the left side must have the same structure as the right one.

We have an object:

Write the destructuring assignment that reads:

• name property into the variable name .
• years property into the variable age .
• isAdmin property into the variable isAdmin (false, if no such property)

Here’s an example of the values after your assignment:

The maximal salary

There is a salaries object:

Create the function topSalary(salaries) that returns the name of the top-paid person.

• If salaries is empty, it should return null .
• If there are multiple top-paid persons, return any of them.

P.S. Use Object.entries and destructuring to iterate over key/value pairs.

Open a sandbox with tests.

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

Home » JavaScript Merge Objects

JavaScript Merge Objects

Summary : in this tutorial, you will learn how to merge two or more JavaScript objects and create a new object that combines the properties of all the objects.

To merge objects into a new one that has all properties of the merged objects, you have two options:

• Use a spread operator ( ... )
• Use the Object.assign() method

Merge objects using the spread operator ( ... )

ES6 introduced the spread operator ( ... ) which can be used to merge two or more objects and create a new one that has properties of the merged objects.

The following example uses the spread operator ( ... ) to merge the person and job objects into the employee object:

If objects have a property with the same name, then the right-most object property overwrites the previous one. For example:

In this example, the job and location has the same property country . When we merged these objects, the result object ( remoteJob ) has the country property with the value from the second object ( location ).

Merge objects using Object.assign() method

The Object.assign() method allows you to copy all enumerable own properties from one or more source objects to a target object, and return the target object:

Similar to spread operator ( ... ), if the source objects have the same property name, the later object will overwrite the previous object. See the following example:

The Shallow Merge

Both the spread operator ( ... ) and Object.assign() method perform a shallow merge. It means that if an object has a property that references to another object, the property of the original object and result target object will reference the same object. For example:

In this example, the person object has the contact property that references to an object. After merging, the person and employee object have the contact property that reference to the same object.

The Deep Merge

To recursively merge own and inherited enumerable string keyed properties of source objects to a target object, you can use the Lodash ._merge() method:

In this tutorial, you have learned how to merge objects in JavaScript using the spread operator ( ... ) and Object.assign() method.

• Python Guide

Declare Multiple Variables in a Single Line in JavaScript

By James L.

The most common way to declare multiple variables in JavaScript is to declare each variable individually on its own line.

For example:

However, there are times when you may want to group related variables together to provide a clear context of their usage. This is where declaring multiple variables on one line can be handy.

In JavaScript, there are several ways to declare multiple variables in a single line.

In this blog post, we will discuss the following methods:

Using comma separator

Using destructuring assignment with arrays and objects.

To declare multiple variables in JavaScript, you can use the var , let or const keyword followed by a comma-separated list of variable names, each initialized with corresponding values

var x = 5, y = 10, z = 15;

let x = 5, y = 10, z = 15;

const x = 5, y = 10, z = 15;

Avoid using var unless you absolutely have to, such as when supporting old browsers. This is because var variables can be redeclared and reassigned anywhere in your code, which can lead to unexpected behavior.

Do keep in mind that variables declared with the const keyword cannot be reassigned later in JavaScript. This means that their value cannot be changed once it has been initialized.

You can also declare multiple variables of different data types in a single line.

If you do not know the value of variables at the time of declaration then you can declare multiple variables using var or let keyword and assign their values later as follows:

However, you cannot use const keyword to declare multiple variables in one line and assign their values later.

This is because each variable created with const keyword must be initialized with a value at the time of declaration.

For example, this is not allowed:

Another way to assign multiple variables in JavaScript is to use the destructuring assignment, which allows you to unpack values from arrays or properties from objects into distinct variables.

Destructuring assignment makes sense when you have an array or object and want to extract its values to variables.

In general, it is best to declare each variable on a separate line, with its own assignment statement. This makes your code more readable and easier to maintain.

However, there are cases where it may be convenient to declare multiple variables on one line, such as when you are grouping related together, or when you are extracting values from an object or array using destructuring assignment.

Use single line multiple variable assignment sparingly.

Related Posts

Latest posts.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015 .

• See full compatibility
• Report feedback

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name , and has members for performing common array operations .

Description

In JavaScript, arrays aren't primitives but are instead Array objects with the following core characteristics:

• JavaScript arrays are resizable and can contain a mix of different data types . (When those characteristics are undesirable, use typed arrays instead.)
• JavaScript arrays are not associative arrays and so, array elements cannot be accessed using arbitrary strings as indexes, but must be accessed using nonnegative integers (or their respective string form) as indexes.
• JavaScript arrays are zero-indexed : the first element of an array is at index 0 , the second is at index 1 , and so on — and the last element is at the value of the array's length property minus 1 .
• JavaScript array-copy operations create shallow copies . (All standard built-in copy operations with any JavaScript objects create shallow copies, rather than deep copies ).

Array indices

Array objects cannot use arbitrary strings as element indexes (as in an associative array ) but must use nonnegative integers (or their respective string form). Setting or accessing via non-integers will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array's object property collection . The array's object properties and list of array elements are separate, and the array's traversal and mutation operations cannot be applied to these named properties.

Array elements are object properties in the same way that toString is a property (to be specific, however, toString() is a method). Nevertheless, trying to access an element of an array as follows throws a syntax error because the property name is not valid:

JavaScript syntax requires properties beginning with a digit to be accessed using bracket notation instead of dot notation . It's also possible to quote the array indices (e.g., years['2'] instead of years[2] ), although usually not necessary.

The 2 in years[2] is coerced into a string by the JavaScript engine through an implicit toString conversion. As a result, '2' and '02' would refer to two different slots on the years object, and the following example could be true :

Only years['2'] is an actual array index. years['02'] is an arbitrary string property that will not be visited in array iteration.

Relationship between length and numerical properties

A JavaScript array's length property and numerical properties are connected.

Several of the built-in array methods (e.g., join() , slice() , indexOf() , etc.) take into account the value of an array's length property when they're called.

Other methods (e.g., push() , splice() , etc.) also result in updates to an array's length property.

When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's length property accordingly:

Increasing the length extends the array by adding empty slots without creating any new elements — not even undefined .

Decreasing the length property does, however, delete elements.

This is explained further on the length page.

Array methods and empty slots

Array methods have different behaviors when encountering empty slots in sparse arrays . In general, older methods (e.g. forEach ) treat empty slots differently from indices that contain undefined .

Methods that have special treatment for empty slots include the following: concat() , copyWithin() , every() , filter() , flat() , flatMap() , forEach() , indexOf() , lastIndexOf() , map() , reduce() , reduceRight() , reverse() , slice() , some() , sort() , and splice() . Iteration methods such as forEach don't visit empty slots at all. Other methods, such as concat , copyWithin , etc., preserve empty slots when doing the copying, so in the end the array is still sparse.

Newer methods (e.g. keys ) do not treat empty slots specially and treat them as if they contain undefined . Methods that conflate empty slots with undefined elements include the following: entries() , fill() , find() , findIndex() , findLast() , findLastIndex() , includes() , join() , keys() , toLocaleString() , toReversed() , toSorted() , toSpliced() , values() , and with() .

Copying methods and mutating methods

Some methods do not mutate the existing array that the method was called on, but instead return a new array. They do so by first constructing a new array and then populating it with elements. The copy always happens shallowly — the method never copies anything beyond the initially created array. Elements of the original array(s) are copied into the new array as follows:

• Objects: the object reference is copied into the new array. Both the original and new array refer to the same object. That is, if a referenced object is modified, the changes are visible to both the new and original arrays.
• Primitive types such as strings, numbers and booleans (not String , Number , and Boolean objects): their values are copied into the new array.

Other methods mutate the array that the method was called on, in which case their return value differs depending on the method: sometimes a reference to the same array, sometimes the length of the new array.

The following methods create new arrays by accessing this.constructor[Symbol.species] to determine the constructor to use: concat() , filter() , flat() , flatMap() , map() , slice() , and splice() (to construct the array of removed elements that's returned).

The following methods always create new arrays with the Array base constructor: toReversed() , toSorted() , toSpliced() , and with() .

The following table lists the methods that mutate the original array, and the corresponding non-mutating alternative:

An easy way to change a mutating method into a non-mutating alternative is to use the spread syntax or slice() to create a copy first:

Iterative methods

Many array methods take a callback function as an argument. The callback function is called sequentially and at most once for each element in the array, and the return value of the callback function is used to determine the return value of the method. They all share the same signature:

Where callbackFn takes three arguments:

The current element being processed in the array.

The index of the current element being processed in the array.

The array that the method was called upon.

What callbackFn is expected to return depends on the array method that was called.

The thisArg argument (defaults to undefined ) will be used as the this value when calling callbackFn . The this value ultimately observable by callbackFn is determined according to the usual rules : if callbackFn is non-strict , primitive this values are wrapped into objects, and undefined / null is substituted with globalThis . The thisArg argument is irrelevant for any callbackFn defined with an arrow function , as arrow functions don't have their own this binding .

The array argument passed to callbackFn is most useful if you want to read another index during iteration, because you may not always have an existing variable that refers to the current array. You should generally not mutate the array during iteration (see mutating initial array in iterative methods ), but you can also use this argument to do so. The array argument is not the array that is being built, in the case of methods like map() , filter() , and flatMap() — there is no way to access the array being built from the callback function.

All iterative methods are copying and generic , although they behave differently with empty slots .

The following methods are iterative: every() , filter() , find() , findIndex() , findLast() , findLastIndex() , flatMap() , forEach() , map() , and some() .

In particular, every() , find() , findIndex() , findLast() , findLastIndex() , and some() do not always invoke callbackFn on every element — they stop iteration as soon as the return value is determined.

The reduce() and reduceRight() methods also take a callback function and run it at most once for each element in the array, but they have slightly different signatures from typical iterative methods (for example, they don't accept thisArg ).

The sort() method also takes a callback function, but it is not an iterative method. It mutates the array in-place, doesn't accept thisArg , and may invoke the callback multiple times on an index.

Iterative methods iterate the array like the following (with a lot of technical details omitted):

Note the following:

• Not all methods do the i in this test. The find , findIndex , findLast , and findLastIndex methods do not, but other methods do.
• The length is memorized before the loop starts. This affects how insertions and deletions during iteration are handled (see mutating initial array in iterative methods ).
• The method doesn't memorize the array contents, so if any index is modified during iteration, the new value might be observed.
• The code above iterates the array in ascending order of index. Some methods iterate in descending order of index ( for (let i = length - 1; i >= 0; i--) ): reduceRight() , findLast() , and findLastIndex() .
• reduce and reduceRight have slightly different signatures and do not always start at the first/last element.

Generic array methods

Array methods are always generic — they don't access any internal data of the array object. They only access the array elements through the length property and the indexed elements. This means that they can be called on array-like objects as well.

Normalization of the length property

The length property is converted to an integer and then clamped to the range between 0 and 2 53 - 1. NaN becomes 0 , so even when length is not present or is undefined , it behaves as if it has value 0 .

The language avoids setting length to an unsafe integer . All built-in methods will throw a TypeError if length will be set to a number greater than 2 53 - 1. However, because the length property of arrays throws an error if it's set to greater than 2 32 - 1, the safe integer threshold is usually not reached unless the method is called on a non-array object.

Some array methods set the length property of the array object. They always set the value after normalization, so length always ends as an integer.

Array-like objects

The term array-like object refers to any object that doesn't throw during the length conversion process described above. In practice, such object is expected to actually have a length property and to have indexed elements in the range 0 to length - 1 . (If it doesn't have all indices, it will be functionally equivalent to a sparse array .) Any integer index less than zero or greater than length - 1 is ignored when an array method operates on an array-like object.

Many DOM objects are array-like — for example, NodeList and HTMLCollection . The arguments object is also array-like. You can call array methods on them even if they don't have these methods themselves.

Constructor

Creates a new Array object.

Static properties

Returns the Array constructor.

Static methods

Creates a new Array instance from an iterable or array-like object.

Creates a new Array instance from an async iterable, iterable, or array-like object.

Returns true if the argument is an array, or false otherwise.

Creates a new Array instance with a variable number of arguments, regardless of number or type of the arguments.

Instance properties

These properties are defined on Array.prototype and shared by all Array instances.

The constructor function that created the instance object. For Array instances, the initial value is the Array constructor.

Contains property names that were not included in the ECMAScript standard prior to the ES2015 version and that are ignored for with statement-binding purposes.

These properties are own properties of each Array instance.

Reflects the number of elements in an array.

Instance methods

Returns the array item at the given index. Accepts negative integers, which count back from the last item.

Returns a new array that is the calling array joined with other array(s) and/or value(s).

Copies a sequence of array elements within an array.

Returns a new array iterator object that contains the key/value pairs for each index in an array.

Returns true if every element in the calling array satisfies the testing function.

Fills all the elements of an array from a start index to an end index with a static value.

Returns a new array containing all elements of the calling array for which the provided filtering function returns true .

Returns the value of the first element in the array that satisfies the provided testing function, or undefined if no appropriate element is found.

Returns the index of the first element in the array that satisfies the provided testing function, or -1 if no appropriate element was found.

Returns the value of the last element in the array that satisfies the provided testing function, or undefined if no appropriate element is found.

Returns the index of the last element in the array that satisfies the provided testing function, or -1 if no appropriate element was found.

Returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.

Returns a new array formed by applying a given callback function to each element of the calling array, and then flattening the result by one level.

Calls a function for each element in the calling array.

Determines whether the calling array contains a value, returning true or false as appropriate.

Returns the first (least) index at which a given element can be found in the calling array.

Joins all elements of an array into a string.

Returns a new array iterator that contains the keys for each index in the calling array.

Returns the last (greatest) index at which a given element can be found in the calling array, or -1 if none is found.

Returns a new array containing the results of invoking a function on every element in the calling array.

Removes the last element from an array and returns that element.

Adds one or more elements to the end of an array, and returns the new length of the array.

Executes a user-supplied "reducer" callback function on each element of the array (from left to right), to reduce it to a single value.

Executes a user-supplied "reducer" callback function on each element of the array (from right to left), to reduce it to a single value.

Reverses the order of the elements of an array in place . (First becomes the last, last becomes first.)

Removes the first element from an array and returns that element.

Extracts a section of the calling array and returns a new array.

Returns true if at least one element in the calling array satisfies the provided testing function.

Sorts the elements of an array in place and returns the array.

Adds and/or removes elements from an array.

Returns a localized string representing the calling array and its elements. Overrides the Object.prototype.toLocaleString() method.

Returns a new array with the elements in reversed order, without modifying the original array.

Returns a new array with the elements sorted in ascending order, without modifying the original array.

Returns a new array with some elements removed and/or replaced at a given index, without modifying the original array.

Returns a string representing the calling array and its elements. Overrides the Object.prototype.toString() method.

Adds one or more elements to the front of an array, and returns the new length of the array.

Returns a new array iterator object that contains the values for each index in the array.

Returns a new array with the element at the given index replaced with the given value, without modifying the original array.

An alias for the values() method by default.

This section provides some examples of common array operations in JavaScript.

Note: If you're not yet familiar with array basics, consider first reading JavaScript First Steps: Arrays , which explains what arrays are , and includes other examples of common array operations.

Create an array

This example shows three ways to create new array: first using array literal notation , then using the Array() constructor, and finally using String.prototype.split() to build the array from a string.

Create a string from an array

This example uses the join() method to create a string from the fruits array.

Access an array item by its index

This example shows how to access items in the fruits array by specifying the index number of their position in the array.

Find the index of an item in an array

This example uses the indexOf() method to find the position (index) of the string "Banana" in the fruits array.

Check if an array contains a certain item

This example shows two ways to check if the fruits array contains "Banana" and "Cherry" : first with the includes() method, and then with the indexOf() method to test for an index value that's not -1 .

Append an item to an array

This example uses the push() method to append a new string to the fruits array.

Remove the last item from an array

This example uses the pop() method to remove the last item from the fruits array.

Note: pop() can only be used to remove the last item from an array. To remove multiple items from the end of an array, see the next example.

Remove multiple items from the end of an array

This example uses the splice() method to remove the last 3 items from the fruits array.

Truncate an array down to just its first N items

This example uses the splice() method to truncate the fruits array down to just its first 2 items.

Remove the first item from an array

This example uses the shift() method to remove the first item from the fruits array.

Note: shift() can only be used to remove the first item from an array. To remove multiple items from the beginning of an array, see the next example.

Remove multiple items from the beginning of an array

This example uses the splice() method to remove the first 3 items from the fruits array.

Add a new first item to an array

This example uses the unshift() method to add, at index 0 , a new item to the fruits array — making it the new first item in the array.

Remove a single item by index

This example uses the splice() method to remove the string "Banana" from the fruits array — by specifying the index position of "Banana" .

Remove multiple items by index

This example uses the splice() method to remove the strings "Banana" and "Strawberry" from the fruits array — by specifying the index position of "Banana" , along with a count of the number of total items to remove.

Replace multiple items in an array

This example uses the splice() method to replace the last 2 items in the fruits array with new items.

Iterate over an array

This example uses a for...of loop to iterate over the fruits array, logging each item to the console.

But for...of is just one of many ways to iterate over any array; for more ways, see Loops and iteration , and see the documentation for the every() , filter() , flatMap() , map() , reduce() , and reduceRight() methods — and see the next example, which uses the forEach() method.

Call a function on each element in an array

This example uses the forEach() method to call a function on each element in the fruits array; the function causes each item to be logged to the console, along with the item's index number.

Merge multiple arrays together

This example uses the concat() method to merge the fruits array with a moreFruits array, to produce a new combinedFruits array. Notice that fruits and moreFruits remain unchanged.

Copy an array

This example shows three ways to create a new array from the existing fruits array: first by using spread syntax , then by using the from() method, and then by using the slice() method.

All built-in array-copy operations ( spread syntax , Array.from() , Array.prototype.slice() , and Array.prototype.concat() ) create shallow copies . If you instead want a deep copy of an array, you can use JSON.stringify() to convert the array to a JSON string, and then JSON.parse() to convert the string back into a new array that's completely independent from the original array.

You can also create deep copies using the structuredClone() method, which has the advantage of allowing transferable objects in the source to be transferred to the new copy, rather than just cloned.

Finally, it's important to understand that assigning an existing array to a new variable doesn't create a copy of either the array or its elements. Instead the new variable is just a reference, or alias, to the original array; that is, the original array's name and the new variable name are just two names for the exact same object (and so will always evaluate as strictly equivalent ). Therefore, if you make any changes at all either to the value of the original array or to the value of the new variable, the other will change, too:

Creating a two-dimensional array

The following creates a chessboard as a two-dimensional array of strings. The first move is made by copying the 'p' in board[6][4] to board[4][4] . The old position at [6][4] is made blank.

Here is the output:

Using an array to tabulate a set of values

Creating an array using the result of a match.

The result of a match between a RegExp and a string can create a JavaScript array that has properties and elements which provide information about the match. Such an array is returned by RegExp.prototype.exec() and String.prototype.match() .

For example:

For more information about the result of a match, see the RegExp.prototype.exec() and String.prototype.match() pages.

Mutating initial array in iterative methods

Iterative methods do not mutate the array on which it is called, but the function provided as callbackFn can. The key principle to remember is that only indexes between 0 and arrayLength - 1 are visited, where arrayLength is the length of the array at the time the array method was first called, but the element passed to the callback is the value at the time the index is visited. Therefore:

• callbackFn will not visit any elements added beyond the array's initial length when the call to the iterative method began.
• Changes to already-visited indexes do not cause callbackFn to be invoked on them again.
• If an existing, yet-unvisited element of the array is changed by callbackFn , its value passed to the callbackFn will be the value at the time that element gets visited. Removed elements are not visited.

Warning: Concurrent modifications of the kind described above frequently lead to hard-to-understand code and are generally to be avoided (except in special cases).

The following examples use the forEach method as an example, but other methods that visit indexes in ascending order work in the same way. We will first define a helper function:

Modification to indexes not visited yet will be visible once the index is reached:

Modification to already visited indexes does not change iteration behavior, although the array will be different afterwards:

Inserting n elements at unvisited indexes that are less than the initial array length will make them be visited. The last n elements in the original array that now have index greater than the initial array length will not be visited:

Inserting n elements with index greater than the initial array length will not make them be visited:

Inserting n elements at already visited indexes will not make them be visited, but it shifts remaining elements back by n , so the current index and the n - 1 elements before it are visited again:

Deleting n elements at unvisited indexes will make them not be visited anymore. Because the array has shrunk, the last n iterations will visit out-of-bounds indexes. If the method ignores non-existent indexes (see array methods and empty slots ), the last n iterations will be skipped; otherwise, they will receive undefined :

Deleting n elements at already visited indexes does not change the fact that they were visited before they get deleted. Because the array has shrunk, the next n elements after the current index are skipped. If the method ignores non-existent indexes, the last n iterations will be skipped; otherwise, they will receive undefined :

For methods that iterate in descending order of index, insertion causes elements to be skipped, and deletion causes elements to be visited multiple times. Adjust the code above yourself to see the effects.

Specifications

Browser compatibility.

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

• Indexed collections guide
• ArrayBuffer