object assignment js

Home » JavaScript Object Methods » JavaScript Object.assign()

JavaScript Object.assign()

Summary : in this tutorial, you will learn how to use the JavaScript Object.assign() method in ES6.

The following shows the syntax of the Object.assign() method:

The Object.assign() copies all enumerable and own properties from the source objects to the target object. It returns the target object.

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

Using JavaScript Object.assign() to clone an object

The following example uses the Object.assign() method to clone an object .

Note that the Object.assign() only carries a shallow clone, not a deep clone.

Using JavaScript Object.assign() to merge objects

The Object.assign() can merge source objects into a target object which has properties consisting of all the properties of the source objects. For example:

If the source objects have the same property, the property of the later object overwrites the earlier one:

• Object.assign() assigns enumerable and own properties from a source object to a target object.
• Object.assign() can be used to clone an object or merge objects .

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!

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

• Skip to main content
• Select language
• Skip to search
• Object.assign()

Return value

Copying accessors.

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

The target object.

Description

Properties in the target object will be overwritten by properties in the sources if they have the same key.  Later sources' properties will similarly overwrite earlier ones.  

The Object.assign() method only copies enumerable and own properties from a source object to a target object. It uses [[Get]] on the source and [[Set]] on the target, so it will invoke getters and setters. Therefore it assigns properties versus just copying or defining new properties. This may make it unsuitable for merging new properties into a prototype if the merge sources contain getters. For copying property definitions, including their enumerability, into prototypes Object.getOwnPropertyDescriptor() and Object.defineProperty() should be used instead.

Both String and Symbol properties are copied.

In case of an error, for example if a property is non-writable, a TypeError will be raised, and the target object can be changed if any properties are added before error is raised.

Note that Object.assign() does not throw on null or undefined source values.

Cloning an object

Warning for deep clone.

For deep cloning, we need to use other alternatives because Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.

Merging objects

Merging objects with same properties.

The properties are overwritten by other objects that have the same properties later in the parameters order.

Copying symbol-typed properties

Properties on the prototype chain and non-enumerable properties cannot be copied, primitives will be wrapped to objects, exceptions will interrupt the ongoing copying task.

This polyfill doesn't support symbol properties, since ES5 doesn't have symbols anyway:

Specifications

Browser compatibility.

• Object.defineProperties()
• Enumerability and ownership of properties

Document Tags and Contributors

• ECMAScript 2015
• Standard built-in objects
• Object.prototype
• Object.prototype.__count__
• Object.prototype.__noSuchMethod__
• Object.prototype.__parent__
• Object.prototype.__proto__
• Object.prototype.constructor
• Object.create()
• Object.defineProperty()
• Object.entries()
• Object.freeze()
• Object.getNotifier()
• Object.getOwnPropertyDescriptor()
• Object.getOwnPropertyDescriptors()
• Object.getOwnPropertyNames()
• Object.getOwnPropertySymbols()
• Object.getPrototypeOf()
• Object.is()
• Object.isExtensible()
• Object.isFrozen()
• Object.isSealed()
• Object.keys()
• Object.observe()
• Object.preventExtensions()
• Object.prototype.__defineGetter__()
• Object.prototype.__defineSetter__()
• Object.prototype.__lookupGetter__()
• Object.prototype.__lookupSetter__()
• Object.prototype.eval()
• Object.prototype.hasOwnProperty()
• Object.prototype.isPrototypeOf()
• Object.prototype.propertyIsEnumerable()
• Object.prototype.toLocaleString()
• Object.prototype.toSource()
• Object.prototype.toString()
• Object.prototype.unwatch()
• Object.prototype.valueOf()
• Object.prototype.watch()
• Object.seal()
• Object.setPrototypeOf()
• Object.unobserve()
• Object.values()
• Inheritance:
• Function.arguments
• Function.arity
• Function.caller
• Function.displayName
• Function.length
• Function.name
• Function.prototype
• Function.prototype.apply()
• Function.prototype.bind()
• Function.prototype.call()
• Function.prototype.isGenerator()
• Function.prototype.toSource()
• Function.prototype.toString()

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

• 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
• Convert a BigInt to a Number in JavaScript

DEV Community

Posted on May 8, 2020 • Updated on May 14, 2020

JS Fundamentals: Object Assignment vs. Primitive Assignment

Introduction.

Something I wish I had understood early on in my JavaScript programming career is how object assignment works and how it's different from primitive assignment. This is my attempt to convey the distinction in the most concise way possible!

Learn JS Fundamentals

Looking to learn more JS fundamentals? Consider signing up for my free mailing list !

Primitives vs. Objects

As a review, let's recall the different primitive types and objects in JavaScript.

Primitive types: Boolean, Null, Undefined, Number, BigInt (you probably won't see this much), String, Symbol (you probably won't see this much)

Object types: Object, Array, Date, Many others

How Primitive and Object Assignment Differ

Primitive assignment.

Assigning a primitive value to a variable is fairly staightforward: the value is assigned to the variable. Let's look at an example.

In this case, a is set to the value hello and b is also set to the value hello . This means if we set b to a new value, a will remain unchanged; there is no relationship between a and b .

Object Assignment

Object assignment works differently. Assigning an object to a variable does the following:

• Creates the object in memory
• Assigns a reference to the object in memory to the variable

Why is this a big deal? Let's explore.

The first line creates the object { name: 'Joe' } in memory and then assigns a reference to that object to variable a . The second line assigns a reference to that same object in memory to b !

So to answer the "why is this a big deal" question, let's mutate a property of the object assigned to b :

That's right! Since a and b are assigned a reference to the same object in memory, mutating a property on b is really just mutating a property on the object in memory that both a and b are pointing to.

To be thorough, we can see this in action with arrays as well.

This Applies to Function Arguments too!

These assignment rules apply when you pass objects to functions too! Check out the following example:

The moral of the story: beware of mutating objects you pass to functions unless this is intended (I don't think there are many instances you'd really want to do this).

Preventing Unintended Mutation

In a lot of cases, this behavior can be desired. Pointing to the same object in memory helps us pass references around and do clever things. However, this is not always the desired behavior, and when you start mutating objects unintentionally you can end up with some very confusing bugs.

There are a few ways to make sure your objects are unique. I'll go over some of them here, but rest assured this list will not be comprehensive.

The Spread Operator (...)

The spread operator is a great way to make a shallow copy of an object or array. Let's use it to copy an object.

A note on "shallow" copying

It's important to understand shallow copying versus deep copying. Shallow copying works well for object that are only one level deep, but nested object become problematic. Let's use the following example:

We successfully copied a one level deep, but the properties at the second level are still referencing the same objects in memory! For this reason, people have invented ways to do "deep" copying, such as using a library like deep-copy or serializing and de-serializing an object.

Using Object.assign

Object.assign can be used to create a new object based on another object. The syntax goes like this:

Beware; this is still a shallow copy!

Serialize and De-serialize

One method that can be used to deep copy an object is to serialize and de-serialize the object. One common way to do this is using JSON.stringify and JSON.parse .

This does have its downsides though. Serializing an de-serializing doesn't preserve complex objects like functions.

A Deep Copy Library

It's fairly common to bring in a deep copy library to do the heavy lifting on this task, especially if your object has an unknown or particularly deep hierarchy. These libraries are typically functions that perform one of the aforementioned shallow copy methods recursively down the object tree.

While this can seem like a complex topic, you'll be just fine if you maintain awareness about how primitive types and objects are assigned differently. Play around with some of these examples and, if you're up for it, attempt writing your own deep copy function!

Top comments (5)

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

• Location Online
• Joined Nov 28, 2018

Great article Nick! Well-written, clear, and concise. Really appreciate the images and examples to go along with your main points. This will help a number of devs for sure! Thanks for sharing with us :)

• Location Hamburg, Germany
• Work Senior Frontend Developer at Freelance
• Joined Mar 27, 2020

Great article, thanks alot!!

• Joined Apr 7, 2020

const b = JSON.parse(JSON.serialize(a));

serialize? maybe stringify

• Work DevOps Architect
• Joined Jan 27, 2022

• Location York
• Education Self-taught
• Work Backend Engineer at RotaCloud
• Joined Mar 6, 2018

Nice work 🤩easily explained! Thanks.

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

Hide child comments as well

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

To create a new Node.js project and work with dependencies, you'll need to follow these steps

Olatunji Ayodele Abidemi - Apr 11

Calculator with GUI Using Python Tkinter

Ebikara Dandeson Spiff - Apr 11

Setup NGINX

Akbar Nafisa - Apr 15

Finding Which Columns Value Has Actually Changed in PostgreSQL Trigger Functions

blugreenspace - Apr 7

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

Mastering Object.assign() in JavaScript – A Comprehensive Guide for Efficiently Assigning Objects

Introduction.

JavaScript is a versatile programming language that offers various ways to assign and manipulate objects. Object.assign() is one such powerful method that allows you to efficiently assign values from one or more source objects to a target object. Understanding and mastering the ins and outs of Object.assign() can greatly enhance your ability to work with objects in JavaScript.

Understanding Object.assign()

Object.assign() is a built-in JavaScript method that enables you to copy the values of all enumerable properties from one or more source objects to a target object. It takes the properties from the source objects and assigns them to the target object. This method does not create a new object; rather, it modifies the target object in place.

Under the hood, Object.assign() performs a shallow copy of the properties from the source objects to the target object. A shallow copy means that while the properties are directly copied, any nested objects within the source objects will still retain their original references in the target object.

Syntax and Parameters

The basic syntax of Object.assign() is as follows:

The target parameter is the object to which the properties will be assigned. It is important to note that the target object is modified directly and the method returns the modified target object.

The sources parameter is one or more objects whose properties will be assigned to the target object. You can pass multiple source objects separated by commas, and their properties will be assigned in the order they are listed. The sources are provided as rest parameters, denoted by the spread operator (…).

Mastering Object.assign() Basics

Assigning objects.

One of the fundamental use cases of Object.assign() is assigning the properties of one object to another. By using this method, you can easily copy the properties from a source object to a target object in a concise manner.

For example, let’s say we have two objects:

To assign the properties of the source object to the target object, we can make use of Object.assign() as follows:

After the assignment, the target object now contains the properties name and age from the source object.

Shallow copying vs. Deep copying

When using Object.assign(), it’s important to understand the concept of shallow copying versus deep copying.

Shallow copying means that while the top-level properties are copied from the source object to the target object, any nested objects within the source object will still refer to the same objects in memory. This means that if you modify a nested object in the target object, it will affect both the target and source objects.

On the other hand, deep copying creates entirely new objects for each nested object within the source object. This ensures that modifying a nested object in the target object won’t affect the source object, as they now refer to different objects in memory.

Handling Object Mutations

When working with objects in JavaScript, it’s important to be aware of object mutability. Object assign() mutates the target object, meaning it modifies the target object directly instead of creating a new object. This behavior can lead to unintended consequences if not handled properly.

Identifying and dealing with mutable objects is crucial to avoid unexpected behavior. By understanding the mutability of objects, you can prevent unintended object mutations and create more predictable code.

Identifying and dealing with mutable objects

In JavaScript, objects and arrays are mutable, which means their values can be changed after they are created. This can sometimes cause issues when assigning objects using Object.assign().

To identify mutable objects, you can make use of the Array.isArray() method to check if a value is an array. Additionally, you can use the typeof operator to check if the value is an object:

If a property of the source object is mutable, any changes made to it in the target object will also affect the original source object.

Preventing unintended object mutations

To prevent unintended object mutations, you can make use of the spread operator to perform a shallow copy of the properties from the source object.

In the example above, the spread operator is used to create a new object target that copies the properties from source . Now, any changes made to the target object will not affect the properties of the source object.

Advanced Techniques with Object.assign()

Merging multiple objects.

Object.assign() can also be used to merge properties from multiple source objects into a single target object. This allows you to consolidate properties and create a new object that contains the combined properties from all the sources.

In the above example, properties from both the source1 and source2 objects are merged into the target object. The resulting target object now contains the properties name and age .

When merging multiple objects, it’s important to be aware of property conflicts and overwriting rules.

Handling property conflicts and overwriting rules

If there are overlapping properties in the source objects, the property from the last source object will overwrite any conflicting properties in the target object.

Consider the following example:

In this case, the name property from source2 overwrites the name property from source1 . The resulting target object contains the updated name property along with the age property.

Cloning Objects

Object.assign() can also be used to create replica objects, commonly known as cloning. By assigning the properties of an existing object to a new empty object using Object.assign(), you can create a copy of the original object without any reference to the original object.

There are two types of cloning: deep cloning and shallow cloning.

Deep cloning vs. Shallow cloning

Deep cloning involves creating an entirely new object with all the properties and nested objects copied from the original object. This ensures that modifying the cloned object does not affect the original object.

Shallow cloning, on the other hand, only creates a copy of the properties from the original object. If there are nested objects within the original object, the nested objects will still have references to the same objects in memory.

Here’s an example of deep cloning using Object.assign():

In this example, the JSON.stringify() method is used to convert the original object to a JSON string representation, and then JSON.parse() is used to parse the JSON string and create a new object. This effectively creates a deep clone of the original object.

Common Use Cases and Best Practices

Applying object.assign() in real-world scenarios.

Object.assign() has a wide range of applications in real-world scenarios.

One common use case is modifying and updating object properties. If you have an existing object and you want to update some of its properties with new values, you can simply use Object.assign() to copy the updated properties to the existing object:

In this example, the properties of the user object are copied to a new empty object along with the updated age property. The resulting object, updatedUser , contains the original name and the updated age.

Another use case is when you want to create new objects based on existing ones. Instead of creating a new object from scratch, you can use Object.assign() to assign the properties from an existing object to the new object, while also adding additional properties:

In this example, the properties from the baseCar object are copied to a new object along with the additional model property.

Performance Considerations and Optimization

While Object.assign() is a powerful method for object assignment, it’s important to consider performance and optimization when working with large objects or in performance-critical scenarios.

Here are a few tips to optimize the usage of Object.assign():

• Minimize the number of source objects: As the number of source objects increases, the time to process them and assign the properties to the target object also increases. Try to limit the number of source objects to improve performance.
• Use destructuring assignment: Instead of using Object.assign(), consider using destructuring assignment to assign properties to the target object. Destructuring assignment can be more performant in certain scenarios, especially when assigning a few properties.
• Consider alternative strategies: Depending on your specific use case, there might be alternative strategies that offer better performance. For example, if you primarily need to merge objects, you can explore libraries like Lodash that provide optimized merging methods.

In conclusion, mastering Object.assign() in JavaScript is essential for efficient object assignment. Understanding the basics of Object.assign(), such as its syntax and parameters, enables you to assign properties from one or more source objects to a target object.

By exploring advanced techniques, including merging multiple objects and cloning objects, you can leverage Object.assign() to achieve more complex tasks and streamline your code.

Remember to apply best practices, such as being aware of object mutability, preventing unintended object mutations, and considering performance optimizations, to ensure your code is efficient and maintainable.

Practice and experiment with Object.assign() in different scenarios to solidify your understanding of this powerful method and unlock its full potential in your JavaScript projects.

Mastering Object.assign() will not only enhance your abilities in working with objects but also empower you to write clean, maintainable, and efficient code in JavaScript.

Related posts:

• Understanding the Difference – Shallow Copy vs Deep Copy in Java Explained
• Mastering JS Object Assign – The Ultimate Guide for Effortless Property Assignments
• Mastering Javascript – A Comprehensive Guide to Comparing Two Objects
• Understanding Object.assign() in JavaScript – A Complete Guide and Examples
• Demystifying Deep Copy vs Shallow Copy in Java – What You Need to Know

Hiring? Flexiple helps you build your dream team of  developers   and  designers .

Javascript object.assign - uses and limitations

What is Javascript Object.assign?

Vinayaka tadepalli.

Last updated on 21 Feb 2024

In this article, we look at what the Javascript Object.assign method is and what it does. Post which, we shall dive into the code, and lastly, we shall look at its limitations.

Table of Contents

• Code and its Explanation

Cloning an Object using Javascript Object.assign

• Limitation of Using Javascript Object. assign

The Javascript Object.assign is a method that copies all the properties from one or more source objects and stores them into a target object. And while working with multiple sources, the latter source properties overwrite the earlier ones. However, bear in mind that the Object.assign method only copies enumerable and own properties from the source object.

In case you are curious about how the Object.assign method assigns properties, it involves getters and setters subsequently it gets the properties from the source using [[Get]] and stores them in the target using [[Set]].

Syntax of Javascript Object.assign

The parameters used are explained below:

Target - The Target Object is where the copied source properties are stored and returned when the object.assign is used.

Source - The Source Objects are the objects from which the values and properties have to be copied. Unlike the Target, multiple source objects parameters can be passed.

Code and its explanation:

Since it copies values and properties, Object.assign can be used to clone objects.

Limitations and caveats

• A TypeError is thrown in case the property is non-writable, however, in such case, the target object would still contain properties of the previously added values
• Object.assign() does not throw errors on null or undefined sources
• Ensure that the source object you are trying to clone is not a reference to an object, since it would only copy the reference values

Description

Specifications, browser compatibility.

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Return value

The target object.

Properties in the target object will be overwritten by properties in the sources if they have the same key. Later sources' properties will similarly overwrite earlier ones.

The Object.assign() method only copies enumerable and own properties from a source object to a target object. It uses [[Get]] on the source and [[Set]] on the target, so it will invoke getters and setters. Therefore it assigns properties versus just copying or defining new properties. This may make it unsuitable for merging new properties into a prototype if the merge sources contain getters. For copying property definitions, including their enumerability, into prototypes Object.getOwnPropertyDescriptor() and Object.defineProperty() should be used instead.

Both String and Symbol properties are copied.

In case of an error, for example if a property is non-writable, a TypeError will be raised, and the target object can be changed if any properties are added before error is raised.

Note that Object.assign() does not throw on null or undefined source values.

Cloning an object

Warning for deep clone.

For deep cloning, we need to use other alternatives because Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.

Merging objects

Merging objects with same properties.

The properties are overwritten by other objects that have the same properties later in the parameters order.

Copying symbol-typed properties

Properties on the prototype chain and non-enumerable properties cannot be copied, primitives will be wrapped to objects, exceptions will interrupt the ongoing copying task, copying accessors.

This polyfill doesn't support symbol properties, since ES5 doesn't have symbols anyway:

• Object.defineProperties()
• Enumerability and ownership of properties
• Spread in object literals

Document Tags and Contributors

• ECMAScript 2015
• Standard built-in objects
• Object.prototype
• Object.prototype.__count__
• Object.prototype.__noSuchMethod__
• Object.prototype.__parent__
• Object.prototype.__proto__
• Object.prototype.constructor
• Object.create()
• Object.defineProperty()
•  b[0].localeCompare(a[0]));."> Object.entries()
• Object.freeze()
• Object.fromEntries()
• Object.getNotifier()
• Object.getOwnPropertyDescriptor()
• Object.getOwnPropertyDescriptors()
• Object.getOwnPropertyNames()
• Object.getOwnPropertySymbols()
• Object.getPrototypeOf()
• Object.is()
• Object.isExtensible()
• Object.isFrozen()
• Object.isSealed()
• Object.keys()
• Object.observe()
• Object.preventExtensions()
• Object.prototype.__defineGetter__()
• Object.prototype.__defineSetter__()
• Object.prototype.__lookupGetter__()
• Object.prototype.__lookupSetter__()
• Object.prototype.eval()
• Object.prototype.hasOwnProperty()
• Object.prototype.isPrototypeOf()
• Object.prototype.propertyIsEnumerable()
• Object.prototype.toLocaleString()
• Object.prototype.toSource()
• Object.prototype.toString()
• Object.prototype.unwatch()
• Object.prototype.valueOf()
• Object.prototype.watch()
• Object.seal()
• Object.setPrototypeOf()
• Object.unobserve()
• Object.values()
• Inheritance:
• Function.arguments
• Function.arity
• Function.caller
• Function.displayName
• Function.length
• Function.prototype
• Function.prototype.name
• Function.prototype.apply()
• Function.prototype.bind()
• Function.prototype.call()
• Function.prototype.isGenerator()
• Function.prototype.toSource()
• Function.prototype.toString()

Learn the best of web development

Get the latest and greatest from MDN delivered straight to your inbox.

Thanks! Please check your inbox to confirm your subscription.

If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.

Objects in Javascript

What is an object.

Objects are key to understanding object-oriented technology Real-world objects share two characteristics: They all have state and behavior . Dogs have state (name, color, hungry) and behavior (barking, fetching, wagging tail).

Java Docs // Object

"In javascript", everything is an object

It's "almost" true

The simple types of JavaScript are numbers , strings , booleans , null , undefined

All other values are objects.

Let's check:

How weird is that?

Is null an object ?

null is often used to assign an empty reference to an object.

In fact, the ECMAScript specification defines null as the primitive value that represents the intentional absence of any object value .

However, it's still widely considered as an "official mistake" of the language.

ECMA Spec // The typeof Operator

Note: as in javascript everything is an object assigned by reference , a defined but "empty" value is considered as a reference to an object. In case of null , it's an empty reference.

So let's check everything else

https://stackblitz.com/github/we-learn-js/js-training-code/tree/master/src/Objects/zojele?embed

Again weird...

The Function constructor creates a new Function object. In JavaScript every function is actually a Function object.

MDN // Objects -> Function

A functions is still an object (inherits from Object )

hasOwnProperty is a method of Object

An object is not a function, though...

Note: Object.prototype.hasOwnProperty()

Last but not least...

String literals and strings returned from String calls in a non-constructor context are primitive strings. JavaScript automatically converts primitives to String objects , so that it's possible to use String object methods for primitive strings.

MDN // Objects / String

Object convertion

Same happens with numbers.

You can always retrieve the primitive value of an object with valueOf()

MDN // Object.prototype.valueOf()

An object is a container of properties, where a property has a name and a value.

A property has a name and a value . A property name can be any string, including the empty string. A property value can be any JavaScript value except for undefined.

All property names are converted to string

Properties can also be assign by variable name (shorthand)

is the same as

When a property has a function as a value, it's called a method. Properties are like nouns. They have a value or state. Methods are like verbs. They perform actions.

Stackoverflow // properties vs methods

Working with objects

Updating objects, change a value.

Value in an object can be updated by assignment. If the property name already exists in the object, the property value is replaced .

Add a value

If the object does not already have that property name, the object is augmented .

Assigning objects to variables

Objects are passed around by reference . They are never copied .

Note: user and user2 are both references to object { name: 'Evan', lastName: 'Graham' }, which is stored in memory (heap).

Objects are always passed around by reference , even when they are assign to an object´s property.

Creating objects

There are two ways to create an object: Using literals Using Object constructor function

Objects literals

Object literals provide a very convenient notation for creating new object values.

Note: quotes around a property’s name in an object literal are optional

Object constructor

Object is a function , which is an object . If a function is invoked with the new prefix, then a new object will be created. It's called the constructor invocation pattern .

this code...

is the same as...

Creating objects constructors

Function is an object. When invoked with new keyword, the function creates a new object. It's called the constructor invocation pattern . Invoked with new keywords, any function can be a constructor .

Same code without the constructor invocation pattern :

Note: "new" is not used, so no new instance of animal is created, the function animal (which is also an object) is just assigned by reference.

Object is a function. As a function, Object is an object, which can contain properties and methods. As a function, Object is a constructor and can be invoked with new keyword to create new instances. As a constructor, Object contains a prototype object that will be linked to any instances of Object .

Structure of Object

MDN // Object.prototype

Note: this is a simplified representation.

Object as an object

Object is an object, then it contains properties and methods.

Object as a constructor

As a function, Object is a constructor and can be invoked with new keyword to create instances.

Inheritance of objects

JavaScript is a prototypal inheritance language. Every object is linked to a prototype object from which it can "inherit" properties. All objects created from object literals (or constructor) are linked to Object.prototype , an object that comes standard with JavaScript.

Object.prototype

Note: this is a simplified representation of Object and its prototype object.

All objects created are linked to its constructor prototype, Object.prototype , so any properties or methods of Object.prototype are available in any object. As objects are created with the Object constructor function , they are called instances of Object .

Note: Both obj and emptyObj are instances of Object

Object 's instances

As a constructor, Object contains a prototype object that will be linked to any instances of Object .

Note: hasOwnProperty is a method of Object.prototype , available in any instance of Object .

Array is a function. As a function, Array is an object, which can contain properties and methods. As a function, Array is a constructor and can be invoked with new to create new instances. As a constructor, Array contains a prototype object that will be linked to any instances of Array .

Structure of Array

MDN // Array.prototype

Array as an object

Array is an object, thus it contains properties and methods.

Array as a constructor

As a function, Array is a constructor and can be invoked with new to create instances.

Array 's instances

As a constructor, Array contains a prototype object that will be linked to any instances of Array .

Note: push is a method of Array.prototype , available in any instance of Array .

Array extends Object

Array is an extension of Object It means that Array.prototype has a prototype that points to Object.prototype

Structure of Array , extended

Array inherits from Object

Note: As Array inherits from Object , it only has access to Object 's prototype, not Object 's properties and methods.

The __proto__ property

It's the property used to link instances to their prototype Then, prototype is a property belonging only to functions. It is used to build __proto__ when the function happens to be used as a constructor with the new keyword.

Instances of Array are linked to Object.prototype also

Array has a prototype object, Array.prototype Array.prototype is linked to Object.prototype through __proto__ Instances of Array are linked to Array.prototype , which is linked to Object.prototype .

Any Array instance implements Object.prototype 's methods

The prototype chain of Array

Array does not implement Object methods

Array.prototype methods override

Array.prototype has a method toString() Object.prototype has a method toString() Array.prototype.toString() overrides Object.prototype.toString()

The Prototype Chain

Inheritance is possible thanks to the prototype chain. When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.

Any instance of Object has a property named __proto__ . The __proto__ property of an object is an accessor property that exposes the internal prototype (either an object or null) of the object through which it is accessed. As prototypes are objects, they are assigned by reference. __proto__ is a reference to the constructor's prototype

Note: user.__proto__ and Object.prototype 2 references to the same object.

When trying to access a property of an object: if the object (instance of Object ) has the property, it's returned else if the prototype has the property, it's returned else if the prototype has a prototype which has the property, it's returned and so on, accessing prototypes of prototypes

Let's see it in action:

https://stackblitz.com/github/we-learn-js/js-training-code/tree/master/src/Objects/nazefo?embed

Note: This is a programatic representation of the prototype chain

Extending prototype on runtime

Prototype is an object As an object, it's assign by reference If prototype is modified, all reference to it will access its modifications

Note: printType is accessible on user even if the function was added to prototype after user was created.

this keyword is accessible in functions executions The value of this is determined by how a function is called. When a function is called as a method of an object, its this is set to the object the method is called on.

Using this in prototype methods

Note: forEach is accessible on user even if the function was added to prototype after user was created

Using this in constructors

In constructors, this refers to the current instance being created.

Note: as this refers to the instance being created, we are defining properties of the instance.

Practice: Mutating Array

Implement new method on arrays, so the following output matches

https://stackblitz.com/github/we-learn-js/js-training-code/tree/master/src/Objects/fovasetuse-1?embed

Caution! Don't mutate prototypes

Prototype mutation can slow your app. Harming javaScript engines optimization.

MDN // The performance hazards of Prototype mutation

Creating new constructors

A constructor is a function If the constructor is called with new , an instance of the constructor is created. A constructor has a prototype which defines accessible methods and properties for its instances.

We need a premium user object. It behaves same as user, but has a shorter delivery delay.

We can extend User constructor to create a PremiumUser constructor.

Instance of User is assigned to PremiumUser.prototype , so any instance of PremiumUser will be linked to User.prototype as part of its prototype chain orderItem() is assigned to PremiumUser.prototype , so it will override User.prototype.orderItem in the chain.

Structure of PremiumUser

user1 is an instance of User user2 is an instance of PremiumUser , which inherits from User , like Array inherits from Object

https://stackblitz.com/github/we-learn-js/js-training-code/tree/master/src/Objects/bajura?embed

Test objects prototypes with instanceof operator

The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.

Practice: Mutating Array prototype

Implement Collection , as an array of objects, so the following output matches

https://stackblitz.com/github/we-learn-js/js-training-code/tree/master/src/Objects/naqogu?embed

Mastering Objects

Object.getprototypeof().

The Object.getPrototypeOf() method returns the prototype of the specified instance. Object . getPrototypeOf ( obj ) ;

Object.assign()

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object. Object . assign ( target , ... sources ) ;

MDN // Object.assign()

Merging objects

Caution! Not suitable for deep objects

Object.defineproperty().

The Object.defineProperty() method defines a new property directly on an object, or modifies an existing property on an object, and returns the object. Object . defineProperty ( obj , prop , descriptor ) ; obj : The object on which to define the property. prop : The name of the property to be defined or modified. descriptor : The descriptor for the property being defined or modified.

MDN // Object.defineProperty()

descriptor.enumerable

true if and only if this property shows up during enumeration of the properties on the corresponding object. Defaults to false .

descriptor.value

The value associated with the property. Can be any valid JavaScript value (number, object, function, etc). Defaults to undefined .

descriptor.writable

true if and only if the value associated with the property may be changed with an assignment operator. Defaults to false .

descriptor.get

A function which serves as a getter for the property

descriptor.set

A function which serves as a setter for the property

This code...

Is the same as...

Object.defineProperties()

The Object.defineProperties() method defines new or modifies existing properties directly on an object, returning the object. Object . defineProperties ( obj , props ) ;

MDN // Object.defineProperties()

Retrieving values from checkboxes is tricky. Let's make it easier

https://stackblitz.com/github/we-learn-js/js-training-code/tree/master/src/Objects/nerila?embed

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 objects, real life objects, properties, and methods.

In real life, a car is an object .

A car has properties like weight and color, and methods like start and stop:

All cars have the same properties , but the property values differ from car to car.

All cars have the same methods , but the methods are performed at different times .

You have already learned that JavaScript variables are containers for data values.

This code assigns a simple value (Fiat) to a variable named car:

Objects are variables too. But objects can contain many values.

This code assigns many values (Fiat, 500, white) to a variable named car:

The values are written as name:value pairs (name and value separated by a colon).

It is a common practice to declare objects with the const keyword.

Learn more about using const with objects in the chapter: JS Const .

Advertisement

Object Definition

You define (and create) a JavaScript object with an object literal:

Spaces and line breaks are not important. An object definition can span multiple lines:

Object Properties

The name:values pairs in JavaScript objects are called properties :

Accessing Object Properties

You can access object properties in two ways:

JavaScript objects are containers for named values called properties.

Object Methods

Objects can also have methods .

Methods are actions that can be performed on objects.

Methods are stored in properties as function definitions .

A method is a function stored as a property.

In the example above, this refers to the person object :

this.firstName means the firstName property of person .

this.lastName means the lastName property of person .

What is this ?

In JavaScript, the this keyword refers to an object .

Which object depends on how this is being invoked (used or called).

The this keyword refers to different objects depending on how it is used:

The JavaScript this Tutorial

The this Keyword

In a function definition, this refers to the "owner" of the function.

In the example above, this is the person object that "owns" the fullName function.

In other words, this.firstName means the firstName property of this object .

Learn more about this in The JavaScript this Tutorial .

Accessing Object Methods

You access an object method with the following syntax:

If you access a method without the () parentheses, it will return the function definition :

Do Not Declare Strings, Numbers, and Booleans as Objects!

When a JavaScript variable is declared with the keyword " new ", the variable is created as an object:

Avoid String , Number , and Boolean objects. They complicate your code and slow down execution speed.

You will learn more about objects later in this tutorial.

Test Yourself With Exercises

Alert "John" by extracting information from the person object.

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]

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 that 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, items 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 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 , 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

• 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
• Method Chaining in JavaScript
• Functional Programming in JavaScript
• PugJS Basic Tags
• Phases of JavaScript Event
• How to remove CSS style of <style> tag using JavaScript/jQuery ?
• How to validate email address using RegExp in JavaScript ?
• How to zoom-in and zoom-out image using JavaScript ?
• How to replace plain URL with link using JavaScript ?
• How to determine which element the mouse pointer move over using JavaScript ?
• How to convert list of elements in an array using jQuery ?
• Service Workers in Javascript
• How to remove portion of a string after certain character in JavaScript ?
• How to check if string contains only digits in JavaScript ?
• How to sort a list alphabetically using jQuery ?
• How to print the content of an object in JavaScript ?
• Introduction to KnockoutJS
• Sound generation on clicking the button using JavaScript
• JavaScript | WebAPI | File | File.size Property
• JavaScript | WebAPI | File | File.type Property

JavaScript Program to Implement Own Object Assign Method

Let’s create a custom function called assign that does exactly what Object.assign() does. It will take one or more objects as sources and a target object. Then, it will copy all the properties we can loop over (called enumerable properties) from the source objects to the target object. If a property already exists in the target with the same name, its value will be overwritten.

These are the following methods to Implement Own Object Assign Method:

Table of Content

Using Basic Looping

Using object.keys and foreach.

This method iterates through the source objects using a for loop and uses a conditional statement to determine whether the property is already present in the target object before assigning it.

Example: The keyword is assigned. The assign function is used to merge properties from multiple source objects into a single target object.

This method retrieves all of the keys from the source objects using Object.keys, then loops through them using forEach. After that, bracket notation is used to access dynamic properties during assignment.

Example: JavaScript’s `assign` function merges properties from multiple source objects into a target object, exemplified by the code snippet merging `obj1` and `obj2`.

Please Login to comment...

Similar reads.

• JavaScript Programs
• Web Technologies
• Otter.ai vs. Fireflies.ai: Which AI Transcribes Meetings More Accurately?
• Google Chrome Will Soon Let You Talk to Gemini In The Address Bar
• AI Interior Designer vs. Virtual Home Decorator: Which AI Can Transform Your Home Into a Pinterest Dream Faster?
• Top 10 Free Webclipper on Chrome Browser in 2024
• 30 OOPs Interview Questions and Answers (2024)

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Firefox is no longer supported on Windows 8.1 and below.

Please download Firefox ESR (Extended Support Release) to use Firefox.

Download Firefox ESR 64-bit

Download Firefox ESR 32-bit

Firefox is no longer supported on macOS 10.14 and below.

Mozilla Foundation Security Advisory 2024-18

Security vulnerabilities fixed in firefox 125.

• Firefox 125

# CVE-2024-3852: GetBoundName in the JIT returned the wrong object

Description.

GetBoundName could return the wrong version of an object when JIT optimizations were applied.

• Bug 1883542

# CVE-2024-3853: Use-after-free if garbage collection runs during realm initialization

A use-after-free could result if a JavaScript realm was in the process of being initialized when a garbage collection started.

• Bug 1884427

# CVE-2024-3854: Out-of-bounds-read after mis-optimized switch statement

In some code patterns the JIT incorrectly optimized switch statements and generated code with out-of-bounds-reads.

• Bug 1884552

# CVE-2024-3855: Incorrect JIT optimization of MSubstr leads to out-of-bounds reads

In certain cases the JIT incorrectly optimized MSubstr operations, which led to out-of-bounds reads.

• Bug 1885828

# CVE-2024-3856: Use-after-free in WASM garbage collection

A use-after-free could occur during WASM execution if garbage collection ran during the creation of an array.

• Bug 1885829

# CVE-2024-3857: Incorrect JITting of arguments led to use-after-free during garbage collection

The JIT created incorrect code for arguments in certain cases. This led to potential use-after-free crashes during garbage collection.

• Bug 1886683

# CVE-2024-3858: Corrupt pointer dereference in js::CheckTracedThing<js::Shape>

It was possible to mutate a JavaScript object so that the JIT could crash while tracing it.

• Bug 1888892

# CVE-2024-3859: Integer-overflow led to out-of-bounds-read in the OpenType sanitizer

On 32-bit versions there were integer-overflows that led to an out-of-bounds-read that potentially could be triggered by a malformed OpenType font.

• Bug 1874489

# CVE-2024-3860: Crash when tracing empty shape lists

An out-of-memory condition during object initialization could result in an empty shape list. If the JIT subsequently traced the object it would crash.

• Bug 1881417

# CVE-2024-3861: Potential use-after-free due to AlignedBuffer self-move

If an AlignedBuffer were assigned to itself, the subsequent self-move could result in an incorrect reference count and later use-after-free.

• Bug 1883158

# CVE-2024-3862: Potential use of uninitialized memory in MarkStack assignment operator on self-assignment

The MarkStack assignment operator, part of the JavaScript engine, could access uninitialized memory if it were used in a self-assignment.

• Bug 1884457

# CVE-2024-3863: Download Protections were bypassed by .xrm-ms files on Windows

The executable file warning was not presented when downloading .xrm-ms files. Note: This issue only affected Windows operating systems. Other operating systems are unaffected.

• Bug 1885855

# CVE-2024-3302: Denial of Service using HTTP/2 CONTINUATION frames

There was no limit to the number of HTTP/2 CONTINUATION frames that would be processed. A server could abuse this to create an Out of Memory condition in the browser.

• Bug 1881183
• VU#421644 - HTTP/2 CONTINUATION frames can be utilized for DoS attacks

# CVE-2024-3864: Memory safety bug fixed in Firefox 125, Firefox ESR 115.10, and Thunderbird 115.10

Memory safety bug present in Firefox 124, Firefox ESR 115.9, and Thunderbird 115.9. This bug showed evidence of memory corruption and we presume that with enough effort this could have been exploited to run arbitrary code.

• Memory safety bug fixed in Firefox 125, Firefox ESR 115.10, and Thunderbird 115.10

# CVE-2024-3865: Memory safety bugs fixed in Firefox 125

Memory safety bugs present in Firefox 124. Some of these bugs showed evidence of memory corruption and we presume that with enough effort some of these could have been exploited to run arbitrary code.

• Memory safety bugs fixed in Firefox 125