File size: 5,795 Bytes
780c9fe |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 |
---
title: Assignment (=)
slug: Web/JavaScript/Reference/Operators/Assignment
page-type: javascript-operator
browser-compat: javascript.operators.assignment
sidebar: jssidebar
---
The **assignment (`=`)** operator is used to assign a value to a variable or property. The assignment expression itself has a value, which is the assigned value. This allows multiple assignments to be chained in order to assign a single value to multiple variables.
{{InteractiveExample("JavaScript Demo: Assignment (=) operator")}}
```js interactive-example
let x = 2;
const y = 3;
console.log(x);
// Expected output: 2
console.log((x = y + 1)); // 3 + 1
// Expected output: 4
console.log((x = x * y)); // 4 * 3
// Expected output: 12
```
## Syntax
```js-nolint
x = y
```
### Parameters
- `x`
- : A valid assignment target, including an [identifier](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#identifiers) or a [property accessor](/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors). It can also be a [destructuring pattern](/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring).
- `y`
- : An expression specifying the value to be assigned to `x`.
### Return value
The value of `y`.
### Exceptions
- {{jsxref("ReferenceError")}}
- : Thrown in strict mode if assigning to an identifier that is not declared in the scope.
- {{jsxref("TypeError")}}
- : Thrown in strict mode if assigning to a [property that is not modifiable](/en-US/docs/Web/JavaScript/Reference/Strict_mode#failing_to_assign_to_object_properties).
## Description
The assignment operator is completely different from the equals (`=`) sign used as syntactic separators in other locations, which include:
- Initializers of [`var`](/en-US/docs/Web/JavaScript/Reference/Statements/var), [`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](/en-US/docs/Web/JavaScript/Reference/Statements/const) declarations
- Default values of [destructuring](/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring#default_value)
- [Default parameters](/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)
- Initializers of [class fields](/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields)
All these places accept an assignment expression on the right-hand side of the `=`, so if you have multiple equals signs chained together:
```js-nolint
const x = y = 5;
```
This is equivalent to:
```js
const x = (y = 5);
```
Which means `y` must be a pre-existing variable, and `x` is a newly declared `const` variable. `y` is assigned the value `5`, and `x` is initialized with the value of the `y = 5` expression, which is also `5`. If `y` is not a pre-existing variable, a global variable `y` is implicitly created in [non-strict mode](/en-US/docs/Web/JavaScript/Reference/Strict_mode), or a {{jsxref("ReferenceError")}} is thrown in strict mode. To declare two variables within the same declaration, use:
```js
const x = 5,
y = 5;
```
## Examples
### Basic assignment and chaining
```js
let x = 5;
let y = 10;
let z = 25;
x = y; // x is 10
x = y = z; // x, y and z are all 25
```
### Value of assignment expressions
The assignment expression itself evaluates to the value of the right-hand side, so you can log the value and assign to a variable at the same time.
```js-nolint
let x;
console.log(x); // undefined
console.log(x = 2); // 2
console.log(x); // 2
```
### Unqualified identifier assignment
The global object sits at the top of the scope chain. When attempting to resolve a name to a value, the scope chain is searched. This means that properties on the global object are conveniently visible from every scope, without having to qualify the names with `globalThis.` or `window.` or `global.`.
Because the global object has a `String` property (`Object.hasOwn(globalThis, "String")`), you can use the following code:
```js
function foo() {
String("s"); // The function `String` is globally available
}
```
So the global object will ultimately be searched for unqualified identifiers. You don't have to type `globalThis.String`; you can just type the unqualified `String`. To make this feature more conceptually consistent, assignment to unqualified identifiers will assume you want to create a property with that name on the global object (with `globalThis.` omitted), if there is no variable of the same name declared in the scope chain.
```js
foo = "f"; // In non-strict mode, assumes you want to create a property named `foo` on the global object
Object.hasOwn(globalThis, "foo"); // true
```
In [strict mode](/en-US/docs/Web/JavaScript/Reference/Strict_mode#assigning_to_undeclared_variables), assignment to an unqualified identifier in strict mode will result in a `ReferenceError`, to avoid the accidental creation of properties on the global object.
Note that the implication of the above is that, contrary to popular misinformation, JavaScript does not have implicit or undeclared variables. It just conflates the global object with the global scope and allows omitting the global object qualifier during property creation.
### Assignment with destructuring
The left-hand side can also be an assignment pattern. This allows assigning to multiple variables at once.
```js
const result = /(a+)(b+)(c+)/.exec("aaabcc");
let a = "",
b = "",
c = "";
[, a, b, c] = result;
console.log(a, b, c); // "aaa" "b" "cc"
```
For more information, see [Destructuring](/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring).
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [Assignment operators in the JS guide](/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators#assignment_operators)
- [Destructuring](/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring)
|