Invalid Left-Hand Side In Assignment Z-Index Css

An assignment operator assigns a value to its left operand based on the value of its right operand.

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.

Overview

The basic assignment operator is equal (), which assigns the value of its right operand to its left operand. That is, assigns the value of to . The other assignment operators are usually shorthand for standard operations, as shown in the following definitions and examples.

Assignment

Simple assignment operator which assigns a value to a variable. The assignment operation evaluates to the assigned value. Chaining the assignment operator is possible in order to assign a single value to multiple variables. See the example.

Syntax

Operator: x = y

Examples

// Assuming the following variables // x = 5 // y = 10 // z = 25 x = y // x is 10 x = y = z // x, y and z are all 25

Addition assignment

The addition assignment operator adds the value of the right operand to a variable and assigns the result to the variable. The types of the two operands determine the behavior of the addition assignment operator. Addition or concatenation is possible. See the addition operator for more details.

Syntax

Operator: x += y Meaning: x = x + y

Examples

// Assuming the following variables // foo = 'foo' // bar = 5 // baz = true // Number + Number -> addition bar += 2 // 7 // Boolean + Number -> addition baz += 1 // 2 // Boolean + Boolean -> addition baz += false // 1 // Number + String -> concatenation bar += 'foo' // "5foo" // String + Boolean -> concatenation foo += false // "foofalse" // String + String -> concatenation foo += 'bar' // "foobar"

Subtraction assignment

The subtraction assignment operator subtracts the value of the right operand from a variable and assigns the result to the variable. See the subtraction operator for more details.

Syntax

Operator: x -= y Meaning: x = x - y

Examples

// Assuming the following variable // bar = 5 bar -= 2 // 3 bar -= 'foo' // NaN

Multiplication assignment

The multiplication assignment operator multiplies a variable by the value of the right operand and assigns the result to the variable. See the multiplication operator for more details.

Syntax

Operator: x *= y Meaning: x = x * y

Examples

// Assuming the following variable // bar = 5 bar *= 2 // 10 bar *= 'foo' // NaN

Division assignment

The division assignment operator divides a variable by the value of the right operand and assigns the result to the variable. See the division operator for more details.

Syntax

Operator: x /= y Meaning: x = x / y

Examples

// Assuming the following variable // bar = 5 bar /= 2 // 2.5 bar /= 'foo' // NaN bar /= 0 // Infinity

Remainder assignment

The remainder assignment operator divides a variable by the value of the right operand and assigns the remainder to the variable. See the remainder operator for more details.

Syntax

Operator: x %= y Meaning: x = x % y

Examples

// Assuming the following variable // bar = 5 bar %= 2 // 1 bar %= 'foo' // NaN bar %= 0 // NaN

Exponentiation assignment

This is an experimental technology, part of the ECMAScript 2016 (ES7) proposal.
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.

The exponentiation assignment operator evaluates to the result of raising first operand to the power second operand. See the exponentiation operator for more details.

Syntax

Operator: x **= y Meaning: x = x ** y

Examples

// Assuming the following variable // bar = 5 bar **= 2 // 25 bar **= 'foo' // NaN

Left shift assignment

The left shift assignment operator moves the specified amount of bits to the left and assigns the result to the variable. See the left shift operator for more details.

Syntax

Operator: x <<= y Meaning: x = x << y

Examples

var bar = 5; // (00000000000000000000000000000101) bar <<= 2; // 20 (00000000000000000000000000010100)

Right shift assignment

The right shift assignment operator moves the specified amount of bits to the right and assigns the result to the variable. See the right shift operator for more details.

Syntax

Operator: x >>= y Meaning: x = x >> y

Examples

var bar = 5; // (00000000000000000000000000000101) bar >>= 2; // 1 (00000000000000000000000000000001) var bar -5; // (-00000000000000000000000000000101) bar >>= 2; // -2 (-00000000000000000000000000000010)

Unsigned right shift assignment

The unsigned right shift assignment operator moves the specified amount of bits to the right and assigns the result to the variable. See the unsigned right shift operator for more details.

Syntax

Operator: x >>>= y Meaning: x = x >>> y

Examples

var bar = 5; // (00000000000000000000000000000101) bar >>>= 2; // 1 (00000000000000000000000000000001) var bar = -5; // (-00000000000000000000000000000101) bar >>>= 2; // 1073741822 (00111111111111111111111111111110)

Bitwise AND assignment

The bitwise AND assignment operator uses the binary representation of both operands, does a bitwise AND operation on them and assigns the result to the variable. See the bitwise AND operator for more details.

Syntax

Operator: x &= y Meaning: x = x & y

Example

var bar = 5; // 5: 00000000000000000000000000000101 // 2: 00000000000000000000000000000010 bar &= 2; // 0

Bitwise XOR assignment

The bitwise XOR assignment operator uses the binary representation of both operands, does a bitwise XOR operation on them and assigns the result to the variable. See the bitwise XOR operator for more details.

Syntax

Operator: x ^= y Meaning: x = x ^ y

Example

var bar = 5; bar ^= 2; // 7 // 5: 00000000000000000000000000000101 // 2: 00000000000000000000000000000010 // ----------------------------------- // 7: 00000000000000000000000000000111

Bitwise OR assignment

The bitwise OR assignment operator uses the binary representation of both operands, does a bitwise OR operation on them and assigns the result to the variable. See the bitwise OR operator for more details.

Syntax

Operator: x |= y Meaning: x = x | y

Example

var bar = 5; bar |= 2; // 7 // 5: 00000000000000000000000000000101 // 2: 00000000000000000000000000000010 // ----------------------------------- // 7: 00000000000000000000000000000111

Examples

Left operand with another assignment operator

In unusual situations, the assignment operator (e.g.) is not identical to the meaning expression (here ). When the left operand of an assignment operator itself contains an assignment operator, the left operand is evaluated only once. For example:

a[i++] += 5 // i is evaluated only once a[i++] = a[i++] + 5 // i is evaluated twice

Specifications

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Addition assignment ()Full support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support Yes ? Full support Yes
Bitwise AND assignment ()Full support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support Yes ? Full support Yes
Bitwise OR assignment ()Full support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support Yes ? Full support Yes
Bitwise XOR assignment ()Full support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support Yes ? Full support Yes
Division assignment ()Full support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support Yes ? Full support Yes
Exponentiation assignment ()Full support 52 ? Full support 52No support NoFull support Yes ? Full support 51Full support 52 ? Full support 52Full support Yes ? ? Full support Yes
Left shift assignment ()Full support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support Yes ? Full support Yes
Multiplication assignment ()Full support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support Yes ? Full support Yes
Remainder assignment ()Full support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support Yes ? Full support Yes
Right shift assignment ()Full support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support Yes ? Full support Yes
Assignment ()Full support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support Yes ? Full support Yes
Subtraction assignment ()Full support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support Yes ? Full support Yes
Unsigned right shift assignment ()Full support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support YesFull support Yes ? Full support Yes

Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown

See also

Document Tags and Contributors

 Contributors to this page:wbamberg, stephaniehobson, fscholz, jameshkramer, nmve, kdex, torazaburo, samuele-artuso, io-ma, Sebastianz, JDurston, phylasnier, Havvy, Delapouite, Meghraj, Sheppy, trevorh, ethertank, Potappo, Mgjbot, Marcoos, Dria

 Last updated by:wbamberg,

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

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.

Syntax

var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 // Stage 3 proposal ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); console.log(a); // 10 console.log(b); // 20 console.log(rest); //{c: 30, d: 40}

Description

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

var x = [1, 2, 3, 4, 5];

The destructuring assignment uses similar syntax, but on the left-hand side of the assignment to define what values to unpack from the sourced variable.

var x = [1, 2, 3, 4, 5]; var [y, z] = x; console.log(y); // 1 console.log(z); // 2

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

Array destructuring

Basic variable assignment

var foo = ['one', 'two', 'three']; var [one, two, three] = foo; console.log(one); // "one" console.log(two); // "two" console.log(three); // "three"

Assignment separate from declaration

A variable can be assigned its value via destructuring separate from the variable's declaration.

var a, b; [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2

Default values

A variable can be assigned a default, in the case that the value unpacked from the array is .

var a, b; [a=5, b=7] = [1]; console.log(a); // 1 console.log(b); // 7

Swapping variables

Two variables values can be swapped in one destructuring expression.

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

var a = 1; var b = 3; [a, b] = [b, a]; console.log(a); // 3 console.log(b); // 1

Parsing an array returned from a function

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

In this example, returns the values as its output, which can be parsed in a single line with destructuring.

function f() { return [1, 2]; } var a, b; [a, b] = f(); console.log(a); // 1 console.log(b); // 2

Ignoring some returned values

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

function f() { return [1, 2, 3]; } var [a, , b] = f(); console.log(a); // 1 console.log(b); // 3

You can also ignore all returned values:

[,,] = f();

Assigning the rest of an array to a variable

When destructuring an array, you can unpack and assign the remaining part of it to a variable using the rest pattern:

var [a, ...b] = [1, 2, 3]; console.log(a); // 1 console.log(b); // [2, 3]

Note that a will be thrown if a trailing comma is used on the left-hand side with a rest element:

var [a, ...b,] = [1, 2, 3]; // SyntaxError: rest element may not have a trailing comma

Unpacking values from a regular expression match

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

function parseProtocol(url) { var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); if (!parsedURL) { return false; } console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"] var [, protocol, fullhost, fullpath] = parsedURL; return protocol; } console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"

Object destructuring

Basic assignment

var o = {p: 42, q: true}; var {p, q} = o; console.log(p); // 42 console.log(q); // true

Assignment without declaration

A variable can be assigned its value with destructuring separate from its declaration.

var a, b; ({a, b} = {a: 1, b: 2});

The round braces  around the assignment statement is required syntax when using object literal destructuring assignment without a declaration.

is not valid stand-alone syntax, as the on the left-hand side is considered a block and not an object literal.

However, is valid, as is

Assigning to new variable names

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

var o = {p: 42, q: true}; var {p: foo, q: bar} = o; console.log(foo); // 42 console.log(bar); // true

Default values

A variable can be assigned a default, in the case that the value unpacked from the object is .

var {a = 10, b = 5} = {a: 3}; console.log(a); // 3 console.log(b); // 5

Assigning to new variables names and providing default values

A property can be both 1) unpacked from an object and assigned to a variable with a different name and 2) assigned a default value in case the unpacked value is .

var {a:aa = 10, b:bb = 5} = {a: 3}; console.log(aa); // 3 console.log(bb); // 5

Setting a function parameter's default value

ES5 version

function drawES5Chart(options) { options = options === undefined ? {} : options; var size = options.size === undefined ? 'big' : options.size; var cords = options.cords === undefined ? {x: 0, y: 0} : options.cords; var radius = options.radius === undefined ? 25 : options.radius; console.log(size, cords, radius); // now finally do some chart drawing } drawES5Chart({ cords: {x: 18, y: 30}, radius: 30 });

ES2015 version

function drawES2015Chart({size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}) { console.log(size, cords, radius); // do some chart drawing } drawES2015Chart({ cords: {x: 18, y: 30}, radius: 30 });

In the function signature for above, the destructured left-hand side is assigned to an empty object literal on the right-hand side: . You could have also written the function without the right-hand side assignment. However, if you leave out the right-hand side assignment, the function will look for at least one argument to be supplied when invoked, whereas in its current form, you can simply call without supplying any parameters. The current design is useful if you want to be able to call the function without supplying any parameters, the other can be useful when you want to ensure an object is passed to the function.

Nested object and array destructuring

var metadata = { title: 'Scratchpad', translations: [ { locale: 'de', localization_tags: [], last_edit: '2014-04-14T08:43:37', url: '/de/docs/Tools/Scratchpad', title: 'JavaScript-Umgebung' } ], url: '/en-US/docs/Tools/Scratchpad' }; var {title: englishTitle, translations: [{title: localeTitle}]} = metadata; console.log(englishTitle); // "Scratchpad" console.log(localeTitle); // "JavaScript-Umgebung"

For of iteration and destructuring

var people = [ { name: 'Mike Smith', family: { mother: 'Jane Smith', father: 'Harry Smith', sister: 'Samantha Smith' }, age: 35 }, { name: 'Tom Jones', family: { mother: 'Norah Jones', father: 'Richard Jones', brother: 'Howard Jones' }, age: 25 } ]; for (var {name: n, family: {father: f}} of people) { console.log('Name: ' + n + ', Father: ' + f); } // "Name: Mike Smith, Father: Harry Smith" // "Name: Tom Jones, Father: Richard Jones"

Unpacking fields from objects passed as function parameter

function userId({id}) { return id; } function whois({displayName, fullName: {firstName: name}}) { console.log(displayName + ' is ' + name); } var user = { id: 42, displayName: 'jdoe', fullName: { firstName: 'John', lastName: 'Doe' } }; console.log('userId: ' + userId(user)); // "userId: 42" whois(user); // "jdoe is John"

This unpacks the , and from the user object and prints them.

Computed object property names and destructuring

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

let key = 'z'; let {[key]: foo} = {z: 'bar'}; console.log(foo); // "bar"

Rest in Object Destructuring

The Rest/Spread Properties for ECMAScript proposal (stage 3) adds the rest syntax to destructuring. Rest properties collect the remaining own enumerable property keys that are not already picked off by the destructuring pattern.

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} a; // 10 b; // 20 rest; // { c: 30, d: 40 }

Invalid JavaScript identifier as a property name

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

const foo = { 'fizz-buzz': true }; const { 'fizz-buzz': fizzBuzz } = foo; console.log(fizzBuzz); // "true"

Specifications

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support4914411 No Yes8
Computed property names491434 No Yes No
Rest in arrays4914234 No Yes No
Rest in objects60 No55 No Yes No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support494914411 Yes8 ?
Computed property names49491434 Yes No ?
Rest in arrays494914234 Yes No ?
Rest in objects6060 No55 Yes No ?

1. Firefox provided a non-standard destructuring implementation from Firefox 2 to 40.

2. From version 14: this feature is behind the preference.

DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic supportFull support 49Full support 14Full support 41

Notes

Full support 41

Notes

Notes Firefox provided a non-standard destructuring implementation from Firefox 2 to 40.
No support NoFull support YesFull support 8Full support 49Full support 49Full support 14Full support 41

Notes

Full support 41

Notes

Notes Firefox provided a non-standard destructuring implementation from Firefox 2 to 40.
Full support YesFull support 8 ? Full support Yes
Computed property namesFull support 49Full support 14Full support 34No support NoFull support YesNo support NoFull support 49Full support 49Full support 14Full support 34Full support YesNo support No ? Full support Yes
Rest in arraysFull support 49Full support 14

Disabled

Full support 14

Disabled

Disabled From version 14: this feature is behind the preference.
Full support 34No support NoFull support YesNo support NoFull support 49Full support 49Full support 14

Disabled

Full support 14

Disabled

Disabled From version 14: this feature is behind the preference.
Full support 34Full support YesNo support No ? Full support Yes
Rest in objects

Experimental

Full support 60No support NoFull support 55No support NoFull support YesNo support NoFull support 60Full support 60No support NoFull support 55Full support YesNo support No ? Full support Yes

Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

Comments

Leave a Reply

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