---
title: Variables
chapter: Variables
---

Variables are declared with the `var` keyword. JavaScript is
_dynamically typed_ so every variable can hold a value of any data type.

Variables can be declared _without an initial value_.

Some example declarations:

```javascript
var foo;
var bar = 42;
var foo, bar, baz;
var foo = 42,
    bar = 'baz',
    z;
```

Variables that don't explicitly get assigned an initial value have the value
`undefined`.

<div class="callout secondary">

<i class="fa fa-info-circle" aria-hidden="true"></i> **ES2015**

Since ES2015, `let` and `const` can be used in addition to `var`. We will learn
how they differ from `var` later. For now, lets have a look how `const` differs
from `var` or `let`: `const` can be assigned a value only _once_ (*const*ant).  
Reassigning a value will either throw an error (in strict mode, see below) or
is silently ignored:

```js
const foo = 42;
foo = 21; // error or ignored
```

`const`s _must_ be initialized with a value:

```js
const foo; // error
foo = 42;
```

</div>

---

## Variable names

Valid characters for variable names include [a wide range of _unicode
characters_](http://mathiasbynens.be/notes/javascript-identifiers).
However, the name _must_ start with a letter, `_` or `$`. Not doing so will
result in a syntax error.

Examples:

```javascript
var π = 3.141;
var _foo = π;
var 0_bar = '...'; // Syntax error
```

---

## Variable access

Trying to _read_ an _undeclared variable_ results in a runtime error:

```javascript
var foo;
console.log(bar); // ReferenceError: bar is not defined.
```

However, _writing_ to an undeclared variable is valid by default. It will
create an _implicit global variable_ and should thus be avoided:

```javascript
function foo() {
    bar = 42;
}
foo();
console.log(bar); // no error
```

<div class="callout primary">

If code runs in _[strict mode][]_, assigning to an undeclared variable throws
an _error_.

</div>

<div class="callout primary">

### Strict mode

[Strict mode][] is a mode of evaluating JavaScript that enforces stricter
rules. It was introduced to "deprecate" certain patterns/behaviors that are
considered bad or confusing.

Strict mode can be enabled for a JavaScript or a function by putting

```js
'use strict';
```

at the beginning of it.

</div>

[strict mode]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode

---
title: Scope
chapter: Scope
---

Unlike other programming languages, JavaScript only has **function scope**, not
block scope. In the following example, all variables are visible throughout the
function:

```javascript
function foo() {
    var bar = 42;
    // loop
    for (var i = 0; i < 10; i++) {
        var j = i;
    }

    console.log(bar); // 42
    console.log(i); // 10
    console.log(j); // 9
}
```

In other languages, like Java, the variables `i` or `j` would not be available
where the above code tries to access them.

<div class="callout secondary">

<i class="fa fa-info-circle" aria-hidden="true"></i> **ES2015**

The big difference between `let`, `const`, and `var` is that `let` and `const`
are _[block scoped][block scope]_. If we would use `let` instead of `var` in
the above example, we would get the following result:

```javascript
function foo() {
    let bar = 42; // or var or const, doesn't matter
    // loop
    for (let i = 0; i < 10; i++) {
        // i is scoped to the loop body block
        let j = i; // j is scoped to the loop body block
    }

    console.log(bar); // 42
    console.log(i); // ReferenceError
    console.log(j); // ReferneceError
}
```

---
toc: What is this?
chapter: this
style: |
    h1 {
      text-align: center
    }
---

# What is `this`?

[**`this`**][mdn] is a special "variable" which implicitly exists in every
function. It can be thought of being similar to Java's `this` and Python's
`self`, but it's much more flexible than that.

<div class="callout warning">

**Important**: The value of `this` is determined when the
function is **called**, not when the function is
_defined_.

</div>

Given the following function:

```javascript
function foo() {
    console.log(this);
}
```

these would be the values of `this` if called in those specific ways:

```javascript
// "normal call": global object / window in browsers
//                undefined in strict mode
foo();

// as object "method": to the object
var obj = { method: foo };
obj.method();

// via .call / .apply: To the value passed as first argument
foo.call(bar);
```

[mdn]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

---
title: JavaScript Basics
toc: Title
chapter: Intro
layout: Center
style: |
    .exerslide-slide .Center-wrapper {
      text-align: left;
    }
    .exerslide-slide h1 {
      color: #444;
      font-size: 400%;
      margin-bottom: 50px;
      text-align: center;
    }
scale:
    content_width: 39
    column_width: 0.6
---

A quick introduction to basic and important concepts of JavaScript

Use the arrow keys (**&larr;, &rarr;**) to navigate through the page.

You should use Google Chrome and make yourself
familiar with the [developer tools][], especially with the console.
You will need it for the exercises.

---

## Contribute

Found a problem with style or content? Or do you have suggestions for improving
the content? Please [file an issue on GitHub][jsbasics-issues].

---
title: Booleans, numbers and strings
---

The **Boolean** data type has two values, `true` and `false`.

```js
var foo = true;
var bar = false;
```

---

**Numbers** are [double precision floating point][float] numbers, following the
[IEEE 754 standard][ieee754]

This makes it very easy to work with them, since you don't have to
differentiate between integer values and floating point values.

There are various ways that numeric value can be expressed:

```javascript
var x = 5; // "integer"
var y = -4.2; // "float"
var z = 5e3; // = 5 * 10^3
```

An issue with floating point numbers is the loss of precision, which of course
occurs in JavaScript as well:

```javascript
0.1 + 0.2; // 0.30000000000000004
```

The maximum integer value that can be used without loss of precision is
2<sup>53</sup>.

```javascript
Math.pow(2, 53); // 9007199254740992
Math.pow(2, 53) + 1; // 9007199254740992
```

---

**Strings** are sequences of unicode characters and can either be delimited with
a **single** or **double** quotation mark. Unlike in other languages, such as PHP,
both are interpreted in the exact same way.

Example:

```javascript
var foo = 'bar';
var bar = 'baz';
```

[float]: http://en.wikipedia.org/wiki/Double-precision_floating-point_format
[ieee754]: http://en.wikipedia.org/wiki/IEEE_floating_point

---
title: Demo
layout_data:
    description: Run the code and have a look at the output. Is it what you expect?
        Try some other values / operators and look at the output (remember to open
        the console).
---

var a = 10;
var b = 5;
var c = "1";

log(a + b);
log(a + c);
log(b + Number(c));

---
title: Constructor functions
chapter: Constructors/Classes
---

JavaScript doesn't have classes like class-based OOP languages have, but it has
something similar: _constructor functions_.

Constructor functions are functions which _construct objects_. Technically
_every_ function can be used as a constructor function, it just has to be
called with the [`new` operator][new]:

```javascript
function Person(name) {
    this.name = name;
}

var felix = new Person('Felix');
console.log(felix.name);
```

Inside the constructor function, `this` refers to a new, empty object. The
result of the whole `new` expression (`new Person(...)`) is that object. You can
think about it as if the function would implicitly `return this;`.

Calling a function with `new` has another effect: The prototype of the new object
is the object referred to by the function's `prototype` property.

Example:

```javascript
function Person(name) {
    this.name = name;
}
Person.prototype.sayName = function () {
    return this.name;
};

var felix = new Person('Felix');
console.log(felix.sayName());
```

Given the example above, use `console.dir(felix);` to get a better understanding
of the structure of the object (including it's prototype chain).

[new]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new

---
title: Exercise
layout_data:
    description: |
        Create a local variable with name `foo` and value `42`.
        Use `log(foo)` to log the value of `foo`.
        Remember to open your browser's *developer tools* to view the log output.
    assertion: |
        assert(
          /var foo\s*=.+;?$/m.test(source),
          "It doesn't look like you have declared a variable (hint: var)."
        );
        assert(output[0] === 42, "Don't forget to log the value");
---

// Create variable

//
log(foo);

---
title: Hoisting
---

This behavior becomes more understandable after we introduce **hoisting**.
Before a JavaScript function is even executed, the engine finds all variable and
function declarations and creates a binding for them in the functions scope.

Thus, the example of the previous slide is equivalent to the following:

```javascript
function foo() {
    var bar, i, j;

    bar = 42;
    // loop
    for (i = 0; i < 10; i++) {
        j = i;
    }

    console.log(bar); // 42
    console.log(i); // 10
    console.log(j); // 9
}
```

Note how all variable declarations are put at the top of the function. The
_value_ will still be assigned only when the execution reaches the line of the
assignment expression.

One of the practical implications of the hoisting concept is _mutually recursive
functions_. Consider the following example:

```javascript
function isEven(n) {
    if (n == 0) {
        return true;
    }
    return isOdd(n - 1);
}

// Normally may call `isEven` even though it's mutually
// dependent on the `isOdd` which is defined below.
console.log(isEven(2)); // true

function isOdd(n) {
    if (n == 0) {
        return false;
    }
    return isEven(n - 1);
}
```

To get more details on hoisting see [this article][hoisting].

[hoisting]: http://dmitrysoshnikov.com/notes/note-4-two-words-about-hoisting/

---
toc: this - an example
style: |
    h1 {
      text-align: center
    }
---

# `this` - an example

```javascript
function say() {
    console.log('My name is ' + this.name);
}

var felix = {
    name: 'Felix',
    sayName: say
};

var sarah = {
    name: 'Sarah',
    sayName: say
};

felix.sayName(); // My name is Felix
sarah.sayName(); // My name is Sarah
say.call({ name: 'Anonymous' }); // My name is Anonymous
say(); // My names is undefined
```

In this example we define a single function that uses `this` internally. The
function is then assigned to different objects as property. The output the
function produces depends on which object the function is called (_how_ it is
called).

---
title: What this presentation is not about
layout: Center
style: |
    .exerslide-slide .Center-wrapper {
      text-align: left;
    }
    .exerslide-slide h1 {
      text-align: center;
    }
---

JavaScript is predominantly run in browsers to make websites interactive. In
order to do that, the browser provides access to other technologies, such as
[CSS][] and the [DOM][].

This presentation is exclusively about JavaScript, the _language_, not the
environment in which the JavaScript code runs!

---
title: Exercise
layout_data:
    description: Create three variables `x`, `y`, `z`, where `x` contains a string value,
        `y` a number and `z` a boolean value. Log the values with `log`.
    assertion: |
        assert(
          output.some(function(x) { return typeof x === 'string' }),
          'Your log must contain a string.'
        );
        assert(
          output.some(function(x) { return typeof x === 'number' }),
          'Your log must contain a number.'
        );
        assert(
          output.some(function(x) { return typeof x === 'boolean' }),
          'Your log must contain a boolean.'
        );
---

// Hint: You can pass multiple arguments to log:
// log(a, b)

---
toc: "ES6's class declarations"
---

# Syntactic sugar: ES6's `class` declarations

Setting up more complex constructor functions with their prototypes can be
cumbersome. For that reason ES2015 [introduced a new syntax][classes].
With the syntax, the example from the previous slide would look like

```javascript
class Person {
    constructor(name) {
        this.name = name;
    }

    sayName() {
        return name;
    }
}

var felix = new Person('Felix');
```

<div class="callout warning">

I want to be very clear that this is mostly just _syntactic
sugar_. While there are some differences between `class` declarations
and constructor functions + prototype, the underlying paradigm (prototypes)
does not change.

</div>

[classes]: http://wiki.ecmascript.org/doku.php?id=strawman:maximally_minimal_classes

---
title: Comparison operators
---

As already established at the beginning, JavaScript is _dynamically typed_. It
also performs _type conversion_, if a specific data type is expected and not
provided. For example in `a * b`, the values of `a` and `b` will be converted
to numbers first.

Even though there are [well defined rules][conversion rules] for converting one
data type into another, these rules can be quite surprising.

[conversion rules]: http://www.ecma-international.org/ecma-262/5.1/#sec-9

What does this have to do with comparison? JavaScript has two kind of comparison
operators:

-   **Loose comparison** (`a == b`, `a != b`)
-   **Strict comparison** (`a === b`, `a !== b`)

The difference is that _loose_ comparison will _convert both values_ to the same
data type if they are of different data types. _Strict_ comparison immediately
returns `false` if both values _don't have the same type_.

Examples:

```javascript
'42' == 42; // true
(('42' ===
    (42)[ // false
        // Objects are compared by reference
        (1, 2)
    ]) ==
    [1, 2][(1, 2)]) === // false
    [1, 2]; // false
```

The following tool visualizes the steps of the _[abstract equality
comparison](http://www.ecma-international.org/ecma-262/7.0/#sec-abstract-equality-comparison)_
algorithm, which is used for loose comparison.

You can select some predefined examples and see which steps are performed
during the comparison. The results will probably surprise you. You can also
provide your own values.

```react comparison
[
  ["[1,2]", "'1,2'"],
  ["[0]", "false"],
  ["'\\n'", "false"],
  ["'0XA19'", "2585"]
]
```

Also have a look at [this table][comparison table] to get a quick overview of
the differences between `==` and `===`.

The above examples hopefully showed you that loose comparison isn't that
"simple" and it's not always clear what ends up being compared in the end. For
that reason you should follow this advice:

<div class="callout warning">

**You should _always_ use strict comparison**, unless you
explicitly want to make use of the type conversion (i.e. you know what you are
doing).

If you write an API, make it clear which data type it expects (e.g. through
comments).

</div>

[comparison table]: https://dorey.github.io/JavaScript-Equality-Table/

---
title: ES5, ES2015 and beyond
layout: Center

style: |
    .exerslide-slide .Center-wrapper {
      text-align: left;
    }
    .exerslide-slide h1 {
      text-align: center;
    }
---

This tutorial primarily focuses on JavaScript following the [ECMAScript 5][es5]
(ES5) specification. [ES2015][] (also known as ES6) was released in 2015 and
brings many new features to the language, including new syntax constructs.

While this tutorial won't go into detail about new features in ES2015 and newer
versions, it will point differences to/alternatives for certain ES5 features if
they exist.

---
title: Demo
layout_data:
    description: Which value does this code log and why? Think about the answer *before* you
        run the code.
---

var bar = 42;
function foo() {
log(bar);
var bar = 21;
log(bar);
}
foo();

---
title: Exercise
layout_data:
    description: Which value does the code log and why? How can it be changed to log the value
        of `obj.foo`?
    assertion: |
        assert(output[0] === 42, 'The code should only log 42');
        assert(/log\s*\(\s*this\.foo\s*\)/.test(source), "Looks like you tried to be clever. Don't modify log(this.foo).");
---

var obj = {
foo: 42,
bar: function () {
log(this.foo);
}
};

var foo = obj.bar;
foo();

---
title: Closures
---

[Wikipedia describes closures as][closures]:

> In programming languages, a closure (also lexical closure or function closure)
> is a function or reference to a function together with a referencing environment
> — a table storing a reference to each of the non-local variables (also called
> free variables or upvalues) of that function.

According to this definition, **every** function in JavaScript is a
closure, because [every function has an (internal) reference to the
environment][functions] it was created in. The simplest example is:

```javascript
var foo = 42;

function bar() {
    console.log(foo);
}
```

Here the function `bar` has access to `foo`, which is defined outside of it.

<div class="callout warning">

**Important**: The value of a free variable is determined when the
function is **executed**, not when the function is
_defined_. Read the previous sentence three times to make sure you really
understand what it implies.

</div>

[closures]: http://en.wikipedia.org/wiki/Closure_%28computer_programming%29
[functions]: http://www.ecma-international.org/ecma-262/5.1/#sec-13

---
title: Exercise
layout_data:
    description: Run the code and have a look at the output. Is it what you expect?
        What are reasons for this output? Modify the code, so that it prints
        the result you would expect.
    assertion: |
        var values = [" ", "0", 0];

        var c = 1;
        for (var i = 0, l = values.length; i < l; i++) {
          for (var j = i; j <  l; j++) {
            var expectedResult = values[i] === values[j];
            assert(
              expectedResult === output[c],
              'Comparing ' +  JSON.stringify(values[i]) + ' and ' +
              JSON.stringify(values[j]) + ' should yield ' + expectedResult.toString() +
              ' not ' + output[c]
            );
            c += 2;
          }
        }
---

var values = [" ", "0", 0];

for (var i = 0, l = values.length; i < l; i++) {
for (var j = i; j < l; j++) {
log(
JSON.stringify(values[i]) + ' == ' + JSON.stringify(values[j]) + ': ',
values[i] == values[j]
);
}
}

---
title: null and undefined
---

JavaScript has two data types to express the **absence of a value**, null and
undefined.

**null** has the only value `null` and **undefined** has the only value
`undefined`.

The difference between those two is subtle and is best explained by how to use
them:

-   `undefined` is the value JavaScript itself uses to indicate the absence of a
    value.
-   `null` is the value the engineer should use to indicate the absence of a
    value.

Examples:

```javascript
var foo; // no value is assigned, foo has the value undefined
var bar = null; // bar is explicitly set to null
console.log(foo); // logs "undefined"
console.log(bar); // logs "null"
```

There are other native occurrence of `undefined` which we will mention later.

<div class="callout primary">

**Remember:** A variable that doesn't exist cannot be accessed at all (it will
throw a reference error). Instead of saying "the variable is undefined" we
rather say "the variable is not _declared_" to avoid confusion.

```js
var foo;
console.log(foo); // logs `undefined`
console.log(bar); // reference error
```

</div>

---
title: Demo
layout_data:
    description: Which value does this code log and why? Think about the solution *before* you
        run the code.
---

var foo = 42;
function bar() {
log(foo);
}
foo = 21;
bar();

---
title: Exercise
layout_data:
    description: Which values does this code log and why? Modify the code so that it logs the
        values as "expected".
    assertion: assert(
        output.every(function(x, i) {
        return x === i;
        }),
        'The code should output the loop variable of each iteration, i.e. 0, 1, 2'
        );
---

var functionArray = [];
for (var i = 0; i < 3; i++) {
functionArray[i] = function() {
log(i);
};
}

for (var j = 0; j < 3; j++) {
functionArray[j]();
}

---
title: Exercise
layout_data:
    description: Log the values `null` and `undefined`.
    assertion: |
        assert(
          output.some(function(x) { return x === null }),
          'Your log must contain null.'
        );
        assert(
          output.some(function(x) { return x === void 0; }),
          'Your log must contain undefined.'
        );
        assert(
          source.indexOf('undefined') === -1,
          'Try to log undefined without writing it in the source code.'
        );
---

---
title: Property access
---

Properties of objects can be accessed in two ways:

-   **Dot notation** (`obj.prop`)
-   **Bracket notation** (`obj["prop"]`)

You should always prefer dot notation, unless you _have_ to use bracket notation.
This could be if the property name is not a valid identifier or if it comes from
a variable. You can use any _expression_ inside the brackets.

Examples:

```javascript
obj['test-field']; // test-field is not a valid identifier
var field = 'test';
obj[field];
obj['example' + i];
```

Because you can only use dot notation if the property name is a valid identifier
name, array objects can only be accessed via bracket notation, `arr[0]`, not dot
notation, `a.0`.

---

You can **assign to properties** by putting the member expression on the left
hand side of an assignment expression:

```javascript
obj.prop = value;
```

---

If you have nested objects/arrays, you simply use a valid property accessor
repeatedly:

```javascript
var obj = { foo: { bar: [42, 21] } };
console.log(obj.foo.bar[0]); // which is evaluated as ((obj.foo).bar)[0]
```

---

Accessing a non existing property does not throw an error, it returns
`undefined`:

```javascript
var obj = {};
console.log(obj.foo);
```

---
title: Objects
---

Everything else besides primitive data type values is an _object_.

Objects are _key-value_ stores, more specifically _stringkey-value_ stores. The
"keys" of an object are called _properties_.

The syntax to create a plain object is `{key: value, ...}`, which is called an
object literal. For example:

```javascript
var obj = {
    foo: 'bar',
    baz: 42
};
```

Note that the above example doesn't use _quotation marks_ around the property
names. In an object literal, quotation marks can be be omitted if the property
name would also be a _valid variable name_. If not, they need to be quoted.
_Number literals_ are valid an object literal as well.

Here are some more examples of valid and invalid property names in object
literals:

```js
var obj = {
  foo: 0,        // valid, could be variable name
  'bar': 0,      // string literals are always valid
  123: 0,        // number literals are always valid
  1.5: 0,        // ^
  foo-bar: 0,    // invalid, would not be a valid variable name
  'foo-bar': 0,  // string literals are alwaus valid
};
```

<div class="callout warning">

**Important:** No matter which value or syntax you use for a property name, the
value will always be converted to a **string**.

</div>

<div class="callout secondary">

<i class="fa fa-info-circle" aria-hidden="true"></i> **ES2015**

ES2015 adds two extensions to object values and object literals:

-   _Symbols_ are can be used as property names. They are not converted to
    strings.

-   Object literals can contain _[computed property names][computed properties]_:
    ```js
    var foo = 42;
    var obj = {
        [foo]: 0
    };
    // creates {42: 0}
    ```

</div>

## References

Just like in Java and other object-oriented programming languages, objects are
represented as _references_. That means if a variable has an object as a value,
it really has a reference to that object.

```js
var user = {name: 'Tom'}:
```

:::ascii

```
                         ┌──────────────┐
┌─────┬──────────┐       │  Object#123  │
│user │ ref:123 ◆┼──────▶├──────┬───────┤
└─────┴──────────┘       │ name │ "Tom" │
                         └──────┴───────┘
```

:::

Assigning the value to another variable makes both variables point to the same
object:

```js
var owner = user;
```

:::ascii

```
┌─────┬──────────┐       ┌──────────────┐
│user │ ref:123 ◆┼──┐    │  Object#123  │
├─────┼──────────┤  ├───▶├──────┬───────┤
│owner│ ref:123 ◆┼──┘    │ name │ "Tom" │
└─────┴──────────┘       └──────┴───────┘
```

:::

Assigning to `user.name` will therefore also "change" `owner.name`:

```js
user.name = 'Joe';
console.log(user.name, owner.name);
// Joe, Joe
```

:::ascii

```
┌─────┬──────────┐       ┌──────────────┐
│user │ ref:123 ◆┼──┐    │  Object#123  │
├─────┼──────────┤  ├───▶├──────┬───────┤
│owner│ ref:123 ◆┼──┘    │ name │ "Joe" │
└─────┴──────────┘       └──────┴───────┘
```

:::

But assigning a new value to either `user` or `owner` will result in only that
variable referring to the new value. The other variable will still refer to the
same value.

```js
owner = { name: 'Kim' };
```

:::ascii

```
                         ┌──────────────┐
                         │  Object#123  │
                    ┌───▶├──────┬───────┤
┌─────┬──────────┐  │    │ name │ "Joe" │
│user │ ref:123 ◆┼──┘    └──────┴───────┘
├─────┼──────────┤
│owner│ ref:456 ◆┼──┐    ┌──────────────┐
└─────┴──────────┘  │    │  Object#456  │
                    └───▶├──────┬───────┤
                         │ name │ "Kim" │
                         └──────┴───────┘
```

:::

---

The JavaScript standard defines a couple of [built-in objects][] with additional
properties and special internal behavior, must notably _arrays_ and
_functions_, which are explained in the next slides.

[built-in objects]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

---
title: Exercise
layout_data:
    description: Log the two properties of the object using dot and bracket notation.
    assertion: assert(
        source.indexOf('obj.foo') > -1,
        'Access property foo with dot notation'
        );
        assert(
        /obj\[(42|'42'|"42")\]/.test(source),
        'How exactly did you want to access property 42?'
        );
---

var obj = {foo: 'bar', 42: 'answer'};

---
title: Prototypes (1)
---

You may have heard that JavaScript is a _"[prototype-based
language][prototype]"_, unlike other languages, such as Java, which are
_"[class-based languages][class]"_.

## What exactly is a prototype?

In short: A prototype is just another object. If an object `A` has this special
connection to object `B`, then we say that "`B` is the prototype of `A`".

In addition to having "external" properties that can be accessed from code,
objects also have _internal/private_ properties/state. These cannot be accessed
from code and their concrete implementation depends on the JavaScript engine.

Every object has an _internal_ property `[[Prototype]]` (internal properties
are usually denoted with `[[...]]` around the name). This property points to
another object.

:::ascii

```
┌───────────────────────┐       ┌────────────────────────┐
│           A           │       │           B            │
├───────────────┬───────┤       ├───────────────┬────────┤
│ name          │ "Tom" │   ┌──▶│ toString      │ <func> │
├───────────────┼───────┤   │   ├───────────────┼────────┤
│ [[Prototype]] │   ◆───┼───┘   │ [[Prototype]] │  null  │
└───────────────┴───────┘       └───────────────┴────────┘
```

:::

Multiple objects can have the same prototype.

:::ascii

```
┌───────────────────────┐       ┌────────────────────────┐
│           A           │       │           B            │
├───────────────┬───────┤       ├───────────────┬────────┤
│ name          │ "Tom" │   ┌──▶│ toString      │ <func> │
├───────────────┼───────┤   │   ├───────────────┼────────┤
│ [[Prototype]] │   ◆───┼───┘   │ [[Prototype]] │  null  │
└───────────────┴───────┘       └───────────────┴────────┘
                                             ▲
┌───────────────────────┐                    │
│           C           │                    │
├───────────────┬───────┤                    │
│ time          │ "day" │                    │
├───────────────┼───────┤                    │
│ [[Prototype]] │   ◆───┼────────────────────┘
└───────────────┴───────┘
```

:::

Since a prototype is an object, it might itself have a prototype, which may have
a prototype, and so forth.

:::ascii

```
┌───────────────────┐
│         A         │
├───────────────┬───┤
│ [[Prototype]] │ ◆─┼────┐
└───────────────┴───┘    │
                         ▼
               ┌───────────────────┐
               │         B         │
               ├───────────────┬───┤
               │ [[Prototype]] │ ◆─┼────┐
               └───────────────┴───┘    │
                                        ▼
                              ┌───────────────────┐
                              │         C         │
                              ├───────────────┬───┤
                              │ [[Prototype]] │ ◆─│─ ─ ─ ▷
                              └───────────────┴───┘
```

:::

This is called the _prototype chain_. Almost all objects have the same object
at the end of the prototype chain, which doesn't have a prototype itself.

An object created using literal notation will have the object
`Object.prototype` as its prototype. You can verify this using the following
commands:

```js
var testObject = {};
Object.getPrototypeOf(testObject) === Object.prototype; // true
```

:::ascii

```
                            ┌────────────────────────┐
┌───────────────────┐       │    Object.prototype    │
│    testObject     │       ├───────────────┬────────┤
├───────────────┬───┤       │ toString      │ <func> │
│ [[Prototype]] │ ◆─┼──────▶├───────────────┼────────┤
└───────────────┴───┘       │ hasOwnProperty│ <func> │
                            ├───────────────┼────────┤
                            │ [[Prototype]] │  null  │
                            └───────────────┴────────┘
```

:::

In order to create an object with an object other than `Object.prototype` as
prototype, one can use [`Object.create`][object.create]:

```js
var a = {};
var b = Object.create(a);
Object.getPrototypeOf(b) === a; // true
```

[prototype]: https://en.wikipedia.org/wiki/Prototype-based_programming
[class]: https://en.wikipedia.org/wiki/Class-based_programming
[object.create]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

---
title: Prototypes (2)
---

Now we know what prototypes are, but not what they _do_ or which problem they
solve.

## What does a prototype do?

Prototypes come in play when we are accessing the property of an object.

<div class="callout">

Whenver an object property is accessed, the object and its prototype chain are
traversed until the property is found. If the end of the prototype chain is
reached without finding the property, `undefined` is returned.

</div>

Consider the following structure:

:::ascii

```
┌───────────────────────┐
│           a           │
├───────────────┬───────┤
│ name          │ "Tom" │
├───────────────┼───────┤
│ [[Prototype]] │   ◆───┼───┐
└───────────────┴───────┘   │
                            ▼
                ┌───────────────────────┐
                │           b           │
                ├───────────────┬───────┤
                │ name          │ "Joe" │
                ├───────────────┼───────┤
                │ age           │   42  │
                ├───────────────┼───────┤
                │ [[Prototype]] │   ◆───┼───┐
                └───────────────┴───────┘   │
                                            ▼
                                ┌───────────────────────┐
                                │           c           │
                                ├───────────────┬───────┤
                                │ height        │  180  │
                                ├───────────────┼───────┤
                                │ [[Prototype]] │  null │
                                └───────────────┴───────┘
```

:::

These are the results for accessing different properties on A:

```js
a.name; // Tom        `a` itself has this property, it shadows `b.name`
a.age; // 42         `a`'s prototype has this property
a.height; // 180        `a`'s prototype's prototype has this property
a.eyeColor; // undefined  this property doesn't exist
```

---

This is also the reason why we can access `.toString()` on almost every object:
It is defined in `Object.prototype`, which sits at the end of every prototype
chain.

```js
var user = { name: 'Tom' };
user.toString();
// "[object Object]"
```

<div class="callout primary">

**Note**: _Assignments_ to properties will (almost) always
create or update a property on object itself, even if a property with the same
name already exists in the prototype chain. The property in the prototype
chain is then _shadowed_, similar to variable shadowing in scopes.

</div>

---
title: 'Built-in objects: Arrays and functions'
---

## Arrays

Arrays are objects, which treat properties with numeric keys (i.e. `0`,
`1`, `2`, ...) in a special way. For all purposes, they behave like arrays in
other languages.

JavaScript has a special syntax for creating arrays, `[value, value, ...]`:

```javascript
var arr = [1, 2];
```

If you run `console.dir([1, 2])` in your browser's console, you can inspect the
structure of the array object in more detail.

Unlike "plain" objects, array objects have `Array.prototype` as prototype,
which provides all the array methods, such as `.push`, `.map`, etc.

:::ascii

```
┌──────────┐       [[Prototype]]        ┌──────────────────┐
│  obj {}  │───────────────────────────▶│ Object.prototype │
└──────────┘                            └──────────────────┘
                                                  ▲
                                                  │
                                            [[Prototype]]
                                                  │
┌──────────┐ [[Prototype]]  ┌─────────────────┐   │
│  arr []  │───────────────▶│ Array.prototype │───┘
└──────────┘                └─────────────────┘
```

:::

---

## Functions

Functions are the only kind of objects that are _callable_, and JavaScript
also has a special syntax for defining them:

```javascript
function foo() {
    console.log("I'm a function");
}
```

There are other ways to create functions, which will be explained later.

<div class="callout">

The most important implication of functions being objects is that "work" just
like any other value. Functions can be _passed to_ functions and _returned
from_ functions, allowing to creation of **higher-order functions**.

</div>

Similar to arrays, function objects also have a dedicated prototype,
`Function.prototype`:

:::ascii

```
┌──────────┐         [[Prototype]]          ┌──────────────────┐
│  obj {}  │───────────────────────────────▶│ Object.prototype │
└──────────┘                                └──────────────────┘
                                                ▲         ▲
                                                │         │
                                          [[Prototype]]   │
┌──────────┐ [[Prototype]]  ┌─────────────────┐ │         │
│  arr []  │───────────────▶│ Array.prototype │─┘         │
└──────────┘                └─────────────────┘     [[Prototype]]
                                                          │
                                                          │
┌──────────────────┐ [[Prototype]]  ┌──────────────────┐  │
│func function(){} │───────────────▶│Function.prototype│──┘
└──────────────────┘                └──────────────────┘
```

:::

---
title: Control structures
---

JavaScript provides the same control structures known from other C-like
languages:

-   `if (...) { ... } else if (...) { ... } else { ... }`

-   `while (...) { ... }` and `do { ... } while (...)`

-   `for (...; ...; ...) { ... }`

-   `switch (...) { case ...: ... }`

Additionally, JavaScript provides the `for...in` loop to iterate over properties
of objects:

```javascript
for (var prop in obj) {
    console.log(prop, obj[prop]);
}
```

`prop` is a variable containing the property _name_. You can use bracket
notation to access the property values.

<div class="callout secondary">

<i class="fa fa-info-circle" aria-hidden="true"></i> **ES2015**

ES2015 introduces [`for/of`][forof] statements for iterating over
_[iterables][]_:

```js
var arr = [1, 2, 3];
for (var v of arr) {
    console.log(v);
}
// 1
// 2
// 3
```

</div>

---
title: Demo
layout_data:
    description: Run this code and look at the output. Do you notice anything unexpected?
        If yes, why do you think this is the case?
---

var obj = {foo: 0, bar: 1, 42: 2};

for (var prop in obj) {
log('property: ' + prop, 'value: ' + obj[prop]);
}

---
title: Exercise
layout_data:
    description: |
        Log two value: an object which has a property `foo` and a value `"bar"`,
        and an array with the values `1`, `2` and `42`.
    assertion: |
        assert(
          output.some(function(x) {
            return JSON.stringify(x) === JSON.stringify({foo: 'bar'});
          }),
          'Your log must contain an object with property "foo" and value "bar". Hint: `{key: value}`.'
        );

        assert(
          output.some(function(x) {
            return JSON.stringify(x) === JSON.stringify([1, 2, 42]);
          }),
          'Your log must contain an array with values 1, 2 and 42. Hint: `[value, ...]`.'
        );
---

---
title: Resources
---

-   [MDN JavaScript Guide][mdn], [Eloquent JavaScript][eloquent] &mdash; basic
    JavaScript introduction.

-   [You don't know JS][ydkjs] &mdash; another JavaScript introduction, more
    focus on advanced concepts and technical details

-   [ECMAScript 5 specification][ecma] &mdash; only if you _really_ like
    JavaScript.

-   [ECMAScript 2015 specification][es2015]

-   [quirksmode.org - JavaScript][quirksmode] &mdash; basic introduction and
    excellent explanation of event handling.

-   [Learning Advanced JavaScript][lajs] &mdash; "strange" JavaScript concepts
    explored.

-   [jsFiddle][] &mdash; an online "editor" to quickly prototype JavaScript
    examples (with HTML, CSS and a selection of JS libraries).

-   [Learn how to **debug** JavaScript][debug] &mdash; knowing how to debug a
    program written in a specific language is as as important as knowing the
    language itself.

[mdn]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
[eloquent]: http://eloquentjavascript.net/
[ydkjs]: https://github.com/getify/You-Dont-Know-JS
[quirksmode]: http://quirksmode.org/js/contents.html
[lajs]: http://ejohn.org/apps/learn/
[ecma]: http://www.ecma-international.org/ecma-262/5.1/
[jsfiddle]: http://jsfiddle.net/
[debug]: https://developers.google.com/chrome-developer-tools/docs/javascript-debugging

---
title: Function definitions
---

There are two syntactic constructs to create functions: function **declaration**
and function **expressions**.

**Function declarations** start with the `function` keyword followed by a
**name**, the parameter list and the function body:

```javascript
function foo(a, b, c) {
    // do something
}
```

**Function expressions** have the same structure, but their name is optional:

```javascript
var foo = function (a, b, c) {
    // do something
};
```

<div class="callout primary">

<strong>Note:</strong> Since functions are objects, they can be treated like any
other value. They can be assigned to variables, passed to other functions and
returned from functions. The code above is just an assignment expression with a
function as value.

</div>

All function objects created either way behave exactly the same. Whether the
parser treats a function definition as declaration or expression depends on
where the definition is placed. If it is an expression context, it is
interpreted as an expression, otherwise as a declaration. That's why

```javascript
function () { }
```

generates an error (function declaration without name), but

```javascript
(function () {});
```

does not, because the grouping operator (`(...)`) can only contain expressions.

---
title: Function Calls
---

Like other C-like languages, functions are called by putting `()` after the
function reference:

```javascript
myFunction();
```

Unlike other languages, functions can be called with any number of arguments,
no matter how many formal parameters they have:

```javascript
function myFunction(foo, bar) {
    console.log(foo, bar);
}

myFunction(); // undefined undefined
myFunction(1); // 1 undefined
myFunction(1, 2); // 1 2
myFunction(1, 2, 3); // 1 2
```

Each function has access to the special [`arguments`][arguments] variable,
which is an _array-like_ value. This allows you to access all the arguments
passed to a function, even if there are more than formal parameters:

```javascript
function myFunction(foo, bar) {
    console.log(foo, bar, arguments);
}

myFunction(); // undefined undefined []
myFunction(1); // 1 undefined [1]
myFunction(1, 2); // 1 2 [1, 2]
myFunction(1, 2, 3); // 1 2 [1, 2, 3]
```

[arguments]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

title: Insert item inside an Array

tip-number: 00
tip-username: loverajoel
tip-username-profile: https://github.com/loverajoel
tip-tldr: Inserting an item into an existing array is a daily common task. You can add elements to the end of an array using push, to the beginning using unshift, or to the middle using splice.
tip-writer-support: https://www.coinbase.com/loverajoel

-   /en/insert-item-inside-an-array/

# Inserting an item into an existing array

Inserting an item into an existing array is a daily common task. You can add elements to the end of an array using push, to the beginning using unshift, or to the middle using splice.

Those are known methods, but it doesn't mean there isn't a more performant way. Here we go:

## Adding an element at the end

Adding an element at the end of the array is easy with push(), but it can be done in different ways.

```javascript
var arr = [1, 2, 3, 4, 5];
var arr2 = [];

arr.push(6);
arr[arr.length] = 6;
arr2 = arr.concat([6]);
```

Both first methods modify the original array. Don't believe me? Check the [jsperf](http://jsperf.com/push-item-inside-an-array)

### Performance on mobile :

#### Android (v4.2.2)

1. _arr.push(6);_ and _arr[arr.length] = 6;_ have the same performance // 3 319 694 ops/sec
2. _arr2 = arr.concat([6]);_ 50.61 % slower than the other two methods

#### Chrome Mobile (v33.0.0)

1. _arr[arr.length] = 6;_ // 6 125 975 ops/sec
2. _arr.push(6);_ 66.74 % slower
3. _arr2 = arr.concat([6]);_ 87.63 % slower

#### Safari Mobile (v9)

1. _arr[arr.length] = 6;_ // 7 452 898 ops/sec
2. _arr.push(6);_ 40.19 % slower
3. _arr2 = arr.concat([6]);_ 49.78 % slower

```javascript
Final victor

1. arr[arr.length] = 6; // with an average of 5 632 856 ops/sec
2. arr.push(6); // 35.64 % slower
3. arr2 = arr.concat([6]); // 62.67 % slower
```

### Performance on desktop

#### Chrome (v48.0.2564)

1. _arr[arr.length] = 6;_ // 21 602 722 ops/sec
2. _arr.push(6);_ 61.94 % slower
3. _arr2 = arr.concat([6]);_ 87.45 % slower

#### Firefox (v44)

1. _arr.push(6);_ // 56 032 805 ops/sec
2. _arr[arr.length] = 6;_ 0.52 % slower
3. _arr2 = arr.concat([6]);_ 87.36 % slower

#### IE (v11)

1. _arr[arr.length] = 6;_ // 67 197 046 ops/sec
2. _arr.push(6);_ 39.61 % slower
3. _arr2 = arr.concat([6]);_ 93.41 % slower

#### Opera (v35.0.2066.68)

1. _arr[arr.length] = 6;_ // 30 775 071 ops/sec
2. _arr.push(6);_ 71.60 % slower
3. _arr2 = arr.concat([6]);_ 83.70 % slower

#### Safari (v9.0.3)

1. _arr.push(6);_ // 42 670 978 ops/sec
2. _arr[arr.length] = 6;_ 0.80 % slower
3. _arr2 = arr.concat([6]);_ 76.07 % slower

```javascript
Final victor

1. arr[arr.length] = 6; // with an average of 42 345 449 ops/sec
2. arr.push(6); // 34.66 % slower
3. arr2 = arr.concat([6]); // 85.79 % slower
```

## Add an element at the beginning

Now if we are trying to add an item to the beginning of the array:

```javascript
var arr = [1, 2, 3, 4, 5];

arr.unshift(0);
[0].concat(arr);
```

Here is a little more detail: unshift edits the original array; concat returns a new array. [jsperf](http://jsperf.com/unshift-item-inside-an-array)

### Performance on mobile :

#### Android (v4.2.2)

1. _[0].concat(arr);_ // 1 808 717 ops/sec
2. _arr.unshift(0);_ 97.85 % slower

#### Chrome Mobile (v33.0.0)

1. _[0].concat(arr);_ // 1 269 498 ops/sec
2. _arr.unshift(0);_ 99.86 % slower

#### Safari Mobile (v9)

1. _arr.unshift(0);_ // 3 250 184 ops/sec
2. _[0].concat(arr);_ 33.67 % slower

```javascript
Final victor

1. [0].concat(arr); // with an average of 4 972 622 ops/sec
2. arr.unshift(0); // 64.70 % slower
```

### Performance on desktop

#### Chrome (v48.0.2564)

1. _[0].concat(arr);_ // 2 656 685 ops/sec
2. _arr.unshift(0);_ 96.77 % slower

#### Firefox (v44)

1. _[0].concat(arr);_ // 8 039 759 ops/sec
2. _arr.unshift(0);_ 99.72 % slower

#### IE (v11)

1. _[0].concat(arr);_ // 3 604 226 ops/sec
2. _arr.unshift(0);_ 98.31 % slower

#### Opera (v35.0.2066.68)

1. _[0].concat(arr);_ // 4 102 128 ops/sec
2. _arr.unshift(0);_ 97.44 % slower

#### Safari (v9.0.3)

1. _arr.unshift(0);_ // 12 356 477 ops/sec
2. _[0].concat(arr);_ 15.17 % slower

```javascript
Final victor

1. [0].concat(arr); // with an average of 6 032 573 ops/sec
2. arr.unshift(0); // 78.65 % slower
```

## Add an element in the middle

Adding items in the middle of an array is easy with splice, and it's the most performant way to do it.

```javascript
var items = ['one', 'two', 'three', 'four'];
items.splice(items.length / 2, 0, 'hello');
```

I tried to run these tests in various Browsers and OS and the results were similar. I hope these tips will be useful for you and encourage to perform your own tests!

title: Improve Nested Conditionals
tip-number: 03
tip-username: AlbertoFuente
tip-username-profile: https://github.com/AlbertoFuente
tip-tldr: How can we improve and make a more efficient nested `if` statement in javascript?

-   /en/improve-nested-conditionals/

How can we improve and make a more efficient nested `if` statement in javascript?

```javascript
if (color) {
    if (color === 'black') {
        printBlackBackground();
    } else if (color === 'red') {
        printRedBackground();
    } else if (color === 'blue') {
        printBlueBackground();
    } else if (color === 'green') {
        printGreenBackground();
    } else {
        printYellowBackground();
    }
}
```

One way to improve the nested `if` statement would be using the `switch` statement. Although it is less verbose and is more ordered, it's not recommended to use it because it's so difficult to debug errors. Here's [why](https://toddmotto.com/deprecating-the-switch-statement-for-object-literals).

```javascript
switch (color) {
    case 'black':
        printBlackBackground();
        break;
    case 'red':
        printRedBackground();
        break;
    case 'blue':
        printBlueBackground();
        break;
    case 'green':
        printGreenBackground();
        break;
    default:
        printYellowBackground();
}
```

But what if we have a conditional with several checks in each statement? In this case, if we want it less verbose and more ordered, we can use the conditional `switch`.
If we pass `true` as a parameter to the `switch` statement, it allows us to put a conditional in each case.

```javascript
switch (true) {
    case typeof color === 'string' && color === 'black':
        printBlackBackground();
        break;
    case typeof color === 'string' && color === 'red':
        printRedBackground();
        break;
    case typeof color === 'string' && color === 'blue':
        printBlueBackground();
        break;
    case typeof color === 'string' && color === 'green':
        printGreenBackground();
        break;
    case typeof color === 'string' && color === 'yellow':
        printYellowBackground();
        break;
}
```

If refactoring is an option, we can try to simplify the functions themselves. For example instead of having a function for each background color we could have an function that takes the color as an argument.

```javascript
function printBackground(color) {
    if (!color || typeof color !== 'string') {
        return; // Invalid color, return immediately
    }
}
```

But if refactoring is not an option, we must always avoid having several checks in every condition and avoid using `switch` as much as possible. We also must take into account that the most efficient way to do this is through an `object`.

```javascript
var colorObj = {
    black: printBlackBackground,
    red: printRedBackground,
    blue: printBlueBackground,
    green: printGreenBackground,
    yellow: printYellowBackground
};

if (color in colorObj) {
    colorObj[color]();
}
```

Here you can find more information about [this](http://www.nicoespeon.com/en/2015/01/oop-revisited-switch-in-js/).

title: Sorting strings with accented characters
tip-number: 04
tip-username: loverajoel
tip-username-profile: https://github.com/loverajoel
tip-tldr: Javascript has a native method **sort** that allows sorting arrays. Doing a simple `array.sort()` will treat each array entry as a string and sort it alphabetically. But when you try order an array of non ASCII characters you will obtain a strange result.
tip-writer-support: https://www.coinbase.com/loverajoel

-   /en/sorting-strings-with-accented-characters/

Javascript has a native method **[sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)** that allows sorting arrays. Doing a simple `array.sort()` will treat each array entry as a string and sort it alphabetically. Also you can provide your [own custom sorting](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Parameters) function.

```javascript
['Shanghai', 'New York', 'Mumbai', 'Buenos Aires'].sort();
// ["Buenos Aires", "Mumbai", "New York", "Shanghai"]
```

But when you try order an array of non ASCII characters like this `['é', 'a', 'ú', 'c']`, you will obtain a strange result `['c', 'e', 'á', 'ú']`. That happens because sort works only with the English language.

See the next example:

```javascript
// Spanish
['único', 'árbol', 'cosas', 'fútbol'].sort();
// ["cosas", "fútbol", "árbol", "único"] // bad order

// German
['Woche', 'wöchentlich', 'wäre', 'Wann'].sort();
// ["Wann", "Woche", "wäre", "wöchentlich"] // bad order
```

Fortunately, there are two ways to overcome this behavior [localeCompare](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) and [Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator) provided by ECMAScript Internationalization API.

> Both methods have their own custom parameters in order to configure it to work adequately.

### Using `localeCompare()`

```javascript
['único', 'árbol', 'cosas', 'fútbol'].sort(function (a, b) {
    return a.localeCompare(b);
});
// ["árbol", "cosas", "fútbol", "único"]

['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(function (a, b) {
    return a.localeCompare(b);
});
// ["Wann", "wäre", "Woche", "wöchentlich"]
```

### Using `Intl.Collator()`

```javascript
['único', 'árbol', 'cosas', 'fútbol'].sort(Intl.Collator().compare);
// ["árbol", "cosas", "fútbol", "único"]

['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(Intl.Collator().compare);
// ["Wann", "wäre", "Woche", "wöchentlich"]
```

-   For each method you can customize the location.
-   According to [Firefox](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#Performance) Intl.Collator is faster when comparing large numbers of strings.

So when you are working with arrays of strings in a language other than English, remember to use this method to avoid unexpected sorting.

title: Differences between `undefined` and `null`
tip-number: 05
tip-username: loverajoel
tip-username-profile: https://github.com/loverajoel
tip-tldr: Understanding the differences between `undefined` and `null`.
tip-writer-support: https://www.coinbase.com/loverajoel

-   /en/differences-between-undefined-and-null/

-   `undefined` means a variable has not been declared, or has been declared but has not yet been assigned a value
-   `null` is an assignment value that means "no value"
-   Javascript sets unassigned variables with a default value of `undefined`
-   Javascript never sets a value to `null`. It is used by programmers to indicate that a `var` has no value.
-   `undefined` is not valid in JSON while `null` is
-   `undefined` typeof is `undefined`
-   `null` typeof is an `object`. [Why?](http://www.2ality.com/2013/10/typeof-null.html)
-   Both are primitives
-   Both are [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)
    (`Boolean(undefined) // false`, `Boolean(null) // false`)
-   You can know if a variable is [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)

    ```javascript
    typeof variable === 'undefined';
    ```

````
- You can check if a variable is [null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null)

  ```javascript
  variable === null
````

-   The **equality** operator considers them equal, but the **identity** doesn't

    ```javascript
    null == undefined; // true

    null === undefined; // false
    ```

```

```

title: Writing a single method for arrays and a single element
tip-number: 06
tip-username: mattfxyz
tip-username-profile: https://twitter.com/mattfxyz
tip-tldr: Rather than writing separate methods to handle an array and a single element parameter, write your functions so they can handle both. This is similar to how some of jQuery's functions work (`css` will modify everything matched by the selector).

-   /en/writing-a-single-method-for-arrays-and-a-single-element/

Rather than writing separate methods to handle an array and a single element parameter, write your functions so they can handle both. This is similar to how some of jQuery's functions work (`css` will modify everything matched by the selector).

You just have to concat everything into an array first. `Array.concat` will accept an array or a single element.

```javascript
function printUpperCase(words) {
    var elements = [].concat(words || []);
    for (var i = 0; i < elements.length; i++) {
        console.log(elements[i].toUpperCase());
    }
}
```

`printUpperCase` is now ready to accept a single node or an array of nodes as its parameter. It also avoids the potential `TypeError` that would be thrown if no parameter was passed.

```javascript
printUpperCase('cactus');
// => CACTUS
printUpperCase(['cactus', 'bear', 'potato']);
// => CACTUS
//  BEAR
//  POTATO
```

title: use strict and get lazy
tip-number: 07
tip-username: nainslie
tip-username-profile: https://twitter.com/nat5an
tip-tldr: Strict-mode JavaScript makes it easier for the developer to write "secure" JavaScript.

-   /en/use-strict-and-get-lazy/

Strict-mode JavaScript makes it easier for the developer to write "secure" JavaScript.

By default, JavaScript allows the programmer to be pretty careless, for example, by not requiring us to declare our variables with "var" when we first introduce them. While this may seem like a convenience to the unseasoned developer, it's also the source of many errors when a variable name is misspelled or accidentally referred to out of its scope.

Programmers like to make the computer do the boring stuff for us, and automatically check our work for mistakes. That's what the JavaScript "use strict" directive allows us to do, by turning our mistakes into JavaScript errors.

We add this directive either by adding it at the top of a js file:

```javascript
// Whole-script strict mode syntax
'use strict';
var v = "Hi!  I'm a strict mode script!";
```

or inside a function:

```javascript
function f() {
    // Function-level strict mode syntax
    'use strict';
    function nested() {
        return 'And so am I!';
    }
    return "Hi!  I'm a strict mode function!  " + nested();
}
function f2() {
    return "I'm not strict.";
}
```

By including this directive in a JavaScript file or function, we will direct the JavaScript engine to execute in strict mode which disables a bunch of behaviors that are usually undesirable in larger JavaScript projects. Among other things, strict mode changes the following behaviors:

-   Variables can only be introduced when they are preceded with "var"
-   Attempting to write to read-only properties generates a noisy error
-   You have to call constructors with the "new" keyword
-   "this" is not implicitly bound to the global object
-   Very limited use of eval() allowed
-   Protects you from using reserved words or future reserved words as variable names

Strict mode is great for new projects, but can be challenging to introduce into older projects that don't already use it in most places. It also can be problematic if your build chain concatenates all your js files into one big file, as this may cause all files to execute in strict mode.

It is not a statement, but a literal expression, ignored by earlier versions of JavaScript.
Strict mode is supported in:

-   Internet Explorer from version 10.
-   Firefox from version 4.
-   Chrome from version 13.
-   Safari from version 5.1.
-   Opera from version 12.

[See MDN for a fuller description of strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode).

title: Converting a Node List to an Array
tip-number: 08
tip-username: Tevko
tip-username-profile: https://twitter.com/tevko
tip-tldr: Here's a quick, safe, and reusable way to convert a node list into an array of DOM elements.

-   /en/converting-a-node-list-to-an-array/

The `querySelectorAll` method returns an array-like object called a node list. These data structures are referred to as "Array-like", because they appear as an array, but can not be used with array methods like `map` and `forEach`. Here's a quick, safe, and reusable way to convert a node list into an array of DOM elements:

```javascript
const nodelist = document.querySelectorAll('div');
const nodelistToArray = Array.apply(null, nodelist);

//later on ..

nodelistToArray.forEach(...);
nodelistToArray.map(...);
nodelistToArray.slice(...);

//etc...
```

The `apply` method is used to pass an array of arguments to a function with a given `this` value. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) states that `apply` will take an array-like object, which is exactly what `querySelectorAll` returns. Since we don't need to specify a value for `this` in the context of the function, we pass in `null` or `0`. The result is an actual array of DOM elements which contains all of the available array methods.

Alternatively you can use `Array.prototype.slice` combined with `Function.prototype.call` or `Function.prototype.apply` passing the array-like object as the value of `this`:

```javascript
const nodelist = document.querySelectorAll('div');
const nodelistToArray = Array.prototype.slice.call(nodelist); // or equivalently Array.prototype.slice.apply(nodelist);

//later on ..

nodelistToArray.forEach(...);
nodelistToArray.map(...);
nodelistToArray.slice(...);

//etc...
```

Or if you are using ES2015 you can use the [spread operator `...`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)

```js
const nodelist = [...document.querySelectorAll('div')]; // returns a real array

//later on ..

nodelist.forEach(...);
nodelist.map(...);
nodelist.slice(...);

//etc...
```

title: Template Strings
tip-number: 09
tip-username: JakeRawr
tip-username-profile: https://github.com/JakeRawr
tip-tldr: As of ES6, JS now has template strings as an alternative to the classic end quotes strings.

-   /en/template-strings/

As of ES6, JS now has template strings as an alternative to the classic end quotes strings.

Ex:
Normal string

```javascript
var firstName = 'Jake';
var lastName = 'Rawr';
console.log('My name is ' + firstName + ' ' + lastName);
// My name is Jake Rawr
```

Template String

```javascript
var firstName = 'Jake';
var lastName = 'Rawr';
console.log(`My name is ${firstName} ${lastName}`);
// My name is Jake Rawr
```

You can do multi-line strings without `\n`, perform simple logic (ie 2+3) or even use the [ternary operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) inside `${}` in template strings.

```javascript
var val1 = 1,
    val2 = 2;
console.log(`${val1} is ${val1 < val2 ? 'less than' : 'greater than'} ${val2}`);
// 1 is less than 2
```

You are also able to modify the output of template strings using a function; they are called [tagged template strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings#Tagged_template_strings) for example usages of tagged template strings.

You may also want to [read](https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2) to understand template strings more.

title: Check if a property is in a Object
tip-number: 10
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: These are ways to check if a property is present in an object.
tip-writer-support: https://www.coinbase.com/loverajoel

-   /en/check-if-a-property-is-in-a-object/

When you have to check if a property is present in an [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects), you probably are doing something like this:

```javascript
var myObject = {
  name: '@tips_js'
};

if (myObject.name) { ... }

```

That's ok, but you have to know that there are two native ways for this kind of thing, the [`in` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in) and [`Object.hasOwnProperty`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty). Every object descended from `Object`, has both ways available.

### See the big Difference

```javascript
var myObject = {
    name: '@tips_js'
};

myObject.hasOwnProperty('name'); // true
'name' in myObject; // true

myObject.hasOwnProperty('valueOf'); // false, valueOf is inherited from the prototype chain
'valueOf' in myObject; // true
```

Both differ in the depth at which they check the properties. In other words, `hasOwnProperty` will only return true if key is available on that object directly. However, the `in` operator doesn't discriminate between properties created on an object and properties inherited from the prototype chain.

Here's another example:

```javascript
var myFunc = function () {
    this.name = '@tips_js';
};
myFunc.prototype.age = '10 days';

var user = new myFunc();

user.hasOwnProperty('name'); // true
user.hasOwnProperty('age'); // false, because age is from the prototype chain
```

Check the [live examples here](https://jsbin.com/tecoqa/edit?js,console)!

I also recommend reading [this discussion](https://github.com/loverajoel/jstips/issues/62) about common mistakes made when checking a property's existence in objects.

title: Hoisting
tip-number: 11
tip-username: squizzleflip
tip-username-profile: https://twitter.com/squizzleflip
tip-tldr: Understanding hoisting will help you organize your function scope.

Understanding [hoisting](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting) will help you organize your function scope. Just remember, variable declarations and function definitions are hoisted to the top. Variable definitions are not, even if you declare and define a variable on the same line. Also, a variable **declaration** lets the system know that the variable exists while **definition** assigns it a value.

```javascript
function doTheThing() {
    // ReferenceError: notDeclared is not defined
    console.log(notDeclared);

    // Outputs: undefined
    console.log(definedLater);
    var definedLater;

    definedLater = 'I am defined!';
    // Outputs: 'I am defined!'
    console.log(definedLater);

    // Outputs: undefined
    console.log(definedSimulateneously);
    var definedSimulateneously = 'I am defined!';
    // Outputs: 'I am defined!'
    console.log(definedSimulateneously);

    // Outputs: 'I did it!'
    doSomethingElse();

    function doSomethingElse() {
        console.log('I did it!');
    }

    // TypeError: undefined is not a function
    functionVar();

    var functionVar = function () {
        console.log('I did it!');
    };
}
```

To make things easier to read, declare all of your variables at the top of your function scope so it is clear which scope the variables are coming from. Define your variables before you need to use them. Define your functions at the bottom of your scope to keep them out of your way.

title: Pseudomandatory parameters in ES6 functions
tip-number: 12
tip-username: Avraam Mavridis
tip-username-profile: https://github.com/AvraamMavridis
tip-tldr: In many programming languages the parameters of a function are by default mandatory and the developer has to explicitly define that a parameter is optional.

-   /en/pseudomandatory-parameters-in-es6-functions/

In many programming languages the parameters of a function are by default mandatory and the developer has to explicitly define that a parameter is optional. In Javascript, every parameter is optional, but we can enforce this behavior without messing with the actual body of a function, taking advantage of [**es6's default values for parameters**] (http://exploringjs.com/es6/ch_parameter-handling.html#sec_parameter-default-values) feature.

```javascript
const _err = function (message) {
    throw new Error(message);
};

const getSum = (a = _err('a is not defined'), b = _err('b is not defined')) => a + b;

getSum(10); // throws Error, b is not defined
getSum(undefined, 10); // throws Error, a is not defined
```

`_err` is a function that immediately throws an Error. If no value is passed for one of the parameters, the default value is going to be used, `_err` will be called and an Error will be thrown. You can see more examples for the **default parameters feature** on [Mozilla's Developer Network ](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/default_parameters)

title: Tip to measure performance of a javascript block
tip-number: 13
tip-username: manmadareddy
tip-username-profile: https://twitter.com/manmadareddy
tip-tldr: For quickly measuring performance of a javascript block, we can use the console functions like `console.time(label)` and `console.timeEnd(label)`

-   /en/tip-to-measure-performance-of-a-javascript-block/

For quickly measuring performance of a javascript block, we can use the console functions like
[`console.time(label)`](https://developer.chrome.com/devtools/docs/console-api#consoletimelabel) and [`console.timeEnd(label)`](https://developer.chrome.com/devtools/docs/console-api#consoletimeendlabel)

```javascript
console.time('Array initialize');
var arr = new Array(100),
    len = arr.length,
    i;

for (i = 0; i < len; i++) {
    arr[i] = new Object();
}
console.timeEnd('Array initialize'); // Outputs: Array initialize: 0.711ms
```

More info:
[Console object](https://github.com/DeveloperToolsWG/console-object),
[Javascript benchmarking](https://mathiasbynens.be/notes/javascript-benchmarking)

Demo: [jsfiddle](https://jsfiddle.net/meottb62/) - [codepen](http://codepen.io/anon/pen/JGJPoa) (outputs in browser console)

> Note: As [Mozilla](https://developer.mozilla.org/en-US/docs/Web/API/Console/time) suggested don't use this for production sites, use it for development purposes only.

title: Fat Arrow Functions
tip-number: 14
tip-username: pklinger
tip-username-profile: https://github.com/pklinger/
tip-tldr: Introduced as a new feature in ES6, fat arrow functions may come as a handy tool to write more code in fewer lines

-   /en/fat-arrow-functions/

Introduced as a new feature in ES6, fat arrow functions may come as a handy tool to write more code in fewer lines. The name comes from its syntax, `=>`, which is a 'fat arrow', as compared to a thin arrow `->`. Some programmers might already know this type of function from different languages such as Haskell, as 'lambda expressions', or as 'anonymous functions'. It is called anonymous, as these arrow functions do not have a descriptive function name.

### What are the benefits?

-   Syntax: fewer LOC; no more typing `function` keyword over and over again
-   Semantics: capturing the keyword `this` from the surrounding context

### Simple syntax example

Have a look at these two code snippets, which do the exact same job, and you will quickly understand what fat arrow functions do:

```javascript
// general syntax for fat arrow functions
param => expression

// may also be written with parentheses
// parentheses are required on multiple params
(param1 [, param2]) => expression


// using functions
var arr = [5,3,2,9,1];
var arrFunc = arr.map(function(x) {
  return x * x;
});
console.log(arr)

// using fat arrow
var arr = [5,3,2,9,1];
var arrFunc = arr.map((x) => x*x);
console.log(arr)
```

As you can see, the fat arrow function in this case can save you time typing out the parentheses as well as the function and return keywords. I would advise you to always write parentheses around the parameter inputs, as the parentheses will be needed for multiple input parameters, such as in `(x,y) => x+y`. It is just a way to cope with forgetting them in different use cases. But the code above would also work like this: `x => x*x`. So far, these are only syntactical improvements, which lead to fewer LOC and better readability.

### Lexically binding `this`

There is another good reason to use fat arrow functions. There is the issue with the context of `this`. With arrow functions, you don't need to worry about `.bind(this)` or setting `that = this` anymore, as fat arrow functions pick the context of `this` from the lexical surrounding. Have a look at the next [example] (https://jsfiddle.net/pklinger/rw94oc11/):

```javascript
// globally defined this.i
this.i = 100;

var counterA = new CounterA();
var counterB = new CounterB();
var counterC = new CounterC();
var counterD = new CounterD();

// bad example
function CounterA() {
    // CounterA's `this` instance (!! gets ignored here)
    this.i = 0;
    setInterval(function () {
        // `this` refers to global object, not to CounterA's `this`
        // therefore starts counting with 100, not with 0 (local this.i)
        this.i++;
        document.getElementById('counterA').innerHTML = this.i;
    }, 500);
}

// manually binding that = this
function CounterB() {
    this.i = 0;
    var that = this;
    setInterval(function () {
        that.i++;
        document.getElementById('counterB').innerHTML = that.i;
    }, 500);
}

// using .bind(this)
function CounterC() {
    this.i = 0;
    setInterval(
        function () {
            this.i++;
            document.getElementById('counterC').innerHTML = this.i;
        }.bind(this),
        500
    );
}

// fat arrow function
function CounterD() {
    this.i = 0;
    setInterval(() => {
        this.i++;
        document.getElementById('counterD').innerHTML = this.i;
    }, 500);
}
```

Further information about fat arrow functions may be found at [MDN] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). To see different syntax options visit [this site] (http://jsrocks.org/2014/10/arrow-functions-and-their-scope/).

title: Even simpler way of using `indexOf` as a contains clause
tip-number: 15
tip-username: jhogoforbroke
tip-username-profile: https://twitter.com/jhogoforbroke
tip-tldr: JavaScript by default does not have a contains method. And for checking existence of a substring in a string or an item in an array you may do this.

-   /en/even-simpler-way-of-using-indexof-as-a-contains-clause/

JavaScript by default does not have a contains method. And for checking existence of a substring in a string or an item in an array you may do this:

```javascript
var someText = 'javascript rules';
if (someText.indexOf('javascript') !== -1) {
}

// or
if (someText.indexOf('javascript') >= 0) {
}
```

But let's look at these [Expressjs](https://github.com/strongloop/express) code snippets.

[examples/mvc/lib/boot.js](https://github.com/strongloop/express/blob/2f8ac6726fa20ab5b4a05c112c886752868ac8ce/examples/mvc/lib/boot.js#L26)

```javascript
for (var key in obj) {
  // "reserved" exports
  if (~['name', 'prefix', 'engine', 'before'].indexOf(key)) continue;
```

[lib/utils.js](https://github.com/strongloop/express/blob/2f8ac6726fa20ab5b4a05c112c886752868ac8ce/lib/utils.js#L93)

```javascript
exports.normalizeType = function (type) {
    return ~type.indexOf('/') ? acceptParams(type) : { value: mime.lookup(type), params: {} };
};
```

[examples/web-service/index.js](https://github.com/strongloop/express/blob/2f8ac6726fa20ab5b4a05c112c886752868ac8ce/examples/web-service/index.js#L35)

```javascript
// key is invalid
if (!~apiKeys.indexOf(key)) return next(error(401, 'invalid api key'));
```

The gotcha is the [bitwise operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) **~**, "Bitwise operators perform their operations on binary representations, but they return standard JavaScript numerical values."

It transforms `-1` into `0`, and `0` evaluates to `false` in JavaScript:

```javascript
var someText = 'text';
!!~someText.indexOf('tex'); // someText contains "tex" - true
!~someText.indexOf('tex'); // someText NOT contains "tex" - false
~someText.indexOf('asd'); // someText doesn't contain "asd" - false
~someText.indexOf('ext'); // someText contains "ext" - true
```

### String.prototype.includes()

ES6 introduced the [includes() method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes) and you can use it to determine whether or not a string includes another string:

```javascript
'something'.includes('thing'); // true
```

With ECMAScript 2016 (ES7) it is even possible to use these techniques with Arrays:

```javascript
!!~[1, 2, 3].indexOf(1); // true
[1, 2, 3].includes(1); // true
```

**Unfortunately, it is only supported in Chrome, Firefox, Safari 9 or above and Edge; not IE11 or lower.**
**It's better used in controlled environments.**

title: Passing arguments to callback functions
tip-number: 16
tip-username: minhazav
tip-username-profile: https://twitter.com/minhazav
tip-tldr: By default you cannot pass arguments to a callback function, but you can take advantage of the closure scope in Javascript to pass arguments to callback functions.

-   /en/passing-arguments-to-callback-functions/

By default you cannot pass arguments to a callback function. For example:

```js
function callback() {
    console.log('Hi human');
}

document.getElementById('someelem').addEventListener('click', callback);
```

You can take advantage of the closure scope in Javascript to pass arguments to callback functions. Check this example:

```js
function callback(a, b) {
    return function () {
        console.log('sum = ', a + b);
    };
}

var x = 1,
    y = 2;
document.getElementById('someelem').addEventListener('click', callback(x, y));
```

### What are closures?

Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created. [Check MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) to learn more.

So this way the arguments `x` and `y` are in scope of the callback function when it is called.

Another method to do this is using the `bind` method. For example:

```js
var alertText = function (text) {
    alert(text);
};

document.getElementById('someelem').addEventListener('click', alertText.bind(this, 'hello'));
```

There is a very slight difference in performance of both methods, checkout [jsperf](http://jsperf.com/bind-vs-closure-23).

title: Node.js - Run a module if it is not `required`
tip-number: 17
tip-username: odsdq
tip-username-profile: https://twitter.com/odsdq
tip-tldr: In node, you can tell your program to do two different things depending on whether the code is run from `require('./something.js')` or `node something.js`. This is useful if you want to interact with one of your modules independently.

-   /en/nodejs-run-a-module-if-it-is-not-required/

In node, you can tell your program to do two different things depending on whether the code is run from `require('./something.js')` or `node something.js`. This is useful if you want to interact with one of your modules independently.

```js
if (!module.parent) {
    // ran with `node something.js`
    app.listen(8088, function () {
        console.log('app listening on port 8088');
    });
} else {
    // used with `require('/.something.js')`
    module.exports = app;
}
```

See [the documentation for modules](https://nodejs.org/api/modules.html#modules_module_parent) for more info.

title: Truncating the fast (but risky) way
tip-number: 18
tip-username: pklinger
tip-username-profile: https://github.com/pklinger
tip-tldr: .`~~X` is usually a faster `Math.trunc(X)`, but can also make your code do nasty things.

-   /en/rounding-the-fast-way/

This tip is about performance...with a hidden price tag.

Have you ever come across the [double tilde `~~` operator](http://stackoverflow.com/questions/5971645/what-is-the-double-tilde-operator-in-javascript)? It's also often called the "double bitwise NOT" operator. You can often use it as a faster substitute for `Math.trunc()`. Why is that?

One bitwise shift `~` first truncates `input` to 32 bits, then transforms it into `-(input+1)`. The double bitwise shift therefore transforms the input into `-(-(input + 1)+1)` making it a great tool to round towards zero. For numeric input, it therefore mimics `Math.trunc()`. On failure, `0` is returned, which might come in handy sometimes instead of `Math.trunc()`, which returns `NaN` on failure.

```js
// single ~
console.log(~1337); // -1338

// numeric input
console.log(~~47.11); // -> 47
console.log(~~1.9999); // -> 1
console.log(~~3); // -> 3
```

However, while `~~` is probably a better performer, experienced programmers often stick with `Math.trunc()` instead. To understand why, here's a clinical view on this operator.

### INDICATIONS

##### When every CPU cycle counts

`~~` is probably faster than `Math.trunc()` across the board, though you should [test that assumption](https://jsperf.com/jsfvsbitnot/10) on whichever platforms matter to you. Also, you'd generally have to perform millions of such operations to have any visible impact at run time.

##### When code clarity is not a concern

If you're trying to confuse others, or get maximum utility from your minifier/uglifier, this is a relatively cheap way to do it.

### CONTRAINDICATIONS

##### When your code needs to be maintained

Code clarity is of great importance in the long term, whether you work in a team, contribute to public code repos, or fly solo. As [the oft-quoted saying](http://c2.com/cgi/wiki?CodeForTheMaintainer) goes:

> Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.

For a solo programmer, that psychopath is inevitably "you in six months".

##### When you forget that `~~` always rounds to zero

Newbie programmers may fixate on the cleverness of `~~`, forgetting the significance of "just drop the fractional portion of this number". This can easily lead to **fencepost errors** (a.k.a. "off-by-one") when transforming floats to array indices or related ordinal values, where a different kind of fractional rounding may actually be called for. (Lack of code clarity usually contributes to this problem.)

For instance, if you're counting numbers on a "nearest integer" basis, you should use `Math.round()` instead of `~~`, but programmer laziness and the impact of **_10 whole characters saved per use_** on human fingers often triumph over cold logic, leading to incorrect results.

In contrast, the very names of the `Math.xyz()` functions clearly communicate their effect, reducing the probability of accidental errors.

##### When dealing with large-magnitude numbers

Because `~` first does a 32-bit conversion, `~~` results in bogus values around &plusmn;2.15 billion. If you don't properly range-check your input, a user could trigger unexpected behavior when the transformed value ends up being a great distance from the original:

```js
a = 2147483647.123; // maximum positive 32-bit integer, plus a bit more
console.log(~~a); // ->  2147483647     (ok)
a += 10000; // ->  2147493647.123 (ok)
console.log(~~a); // -> -2147483648     (huh?)
```

One particularly vulnerable area involves dealing with Unix epoch timestamps (measured in seconds from 1 Jan 1970 00:00:00 UTC). A quick way to get such values is:

```js
epoch_int = ~~(+new Date() / 1000); // Date() epochs in milliseconds, so we scale accordingly
```

However, when dealing with timestamps after 19 Jan 2038 03:14:07 UTC (sometimes called the **Y2038 limit**), this breaks horribly:

```js
// epoch timestamp for 1 Jan 2040 00:00:00.123 UTC
epoch = +new Date('2040-01-01') / 1000 + 0.123; // ->  2208988800.123

// back to the future!
epoch_int = ~~epoch; // -> -2085978496
console.log(new Date(epoch_int * 1000)); // ->  Wed Nov 25 1903 17:31:44 UTC

// that was fun, now let's get real
epoch_flr = Math.floor(epoch); // ->  2208988800
console.log(new Date(epoch_flr * 1000)); // ->  Sun Jan 01 2040 00:00:00 UTC
```

##### When the original input wasn't sanitized

Because `~~` transforms every non-number into `0`:

```js
console.log(~~[]); // -> 0
console.log(~~NaN); // -> 0
console.log(~~null); // -> 0
```

some programmers treat it as alternative to proper input validation. However, this can lead to strange logic bugs down the line, since you're no longer distinguishing between invalid inputs and actual `0` values. This is therefore _not_ a recommended practice.

##### When so many people think `~~X == Math.floor(X)`

Most people who write about "double bitwise NOT" incorrectly equate it with `Math.floor()` for some reason. If you can't write about it accurately, odds are good you'll eventually misuse it.

Others are more careful to mention `Math.floor()` for positive inputs and `Math.ceil()` for negative ones, but that forces you to stop and think about the values you're dealing with. This defeats the purpose of `~~` as a handy no-gotchas shortcut.

### DOSAGE

Avoid where possible. Use sparingly otherwise.

### ADMINISTRATION

1. Apply cautiously.
2. Sanitize values before applying.
3. Carefully document relevant assumptions about the values being transformed.
4. Review code to deal with, at minimum:
    - logic bugs where invalid inputs are instead passed to other code modules as valid `0` values
    - range errors on transformed inputs
    - fencepost errors due to incorrect rounding direction

title: Safe string concatenation
tip-number: 19
tip-username: gogainda
tip-username-profile: https://twitter.com/gogainda
tip-tldr: Suppose you have a couple of variables with unknown types and you want to concatenate them in a string. To be sure that the arithmetical operation is not be applied during concatenation, use concat

-   /en/safe-string-concatenation/

Suppose you have a couple of variables with unknown types and you want to concatenate them in a string. To be sure that the arithmetical operation is not be applied during concatenation, use `concat`:

```javascript
var one = 1;
var two = 2;
var three = '3';

var result = ''.concat(one, two, three); //"123"
```

This way of concatenting does exactly what you'd expect. In contrast, concatenation with pluses might lead to unexpected results:

```javascript
var one = 1;
var two = 2;
var three = '3';

var result = one + two + three; //"33" instead of "123"
```

Speaking about performance, compared to the `join` [type](http://www.sitepoint.com/javascript-fast-string-concatenation/) of concatenation, the speed of `concat` is pretty much the same.

You can read more about the `concat` function on MDN [page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat).

title: Return objects to enable chaining of functions
tip-number: 20
tip-username: WakeskaterX
tip-username-profile: https://twitter.com/WakeStudio
tip-tldr: When creating functions on an object in Object Oriented Javascript, returning the object in the function will enable you to chain functions together.

-   /en/return-objects-to-enable-chaining-of-functions/

When creating functions on an object in Object Oriented Javascript, returning the object in the function will enable you to chain functions together.

```js
function Person(name) {
    this.name = name;

    this.sayName = function () {
        console.log('Hello my name is: ', this.name);
        return this;
    };

    this.changeName = function (name) {
        this.name = name;
        return this;
    };
}

var person = new Person('John');
person.sayName().changeName('Timmy').sayName();
```

title: Shuffle an Array
tip-number: 21
tip-username: 0xmtn
tip-username-profile: https://github.com/0xmtn/
tip-tldr: Fisher-Yates Shuffling it's an algorithm to shuffle an array.

-   /en/shuffle-an-array/

This snippet here uses [Fisher-Yates Shuffling](https://www.wikiwand.com/en/Fisher%E2%80%93Yates_shuffle) Algorithm to shuffle a given array.

```javascript
function shuffle(arr) {
    var i, j, temp;
    for (i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}
```

An example:

```javascript
var a = [1, 2, 3, 4, 5, 6, 7, 8];
var b = shuffle(a);
console.log(b);
// [2, 7, 8, 6, 5, 3, 1, 4]
```

title: Two ways to empty an array
tip-number: 22
tip-username: microlv
tip-username-profile: https://github.com/microlv
tip-tldr: In JavaScript when you want to empty an array, there are a lot ways, but this is the most performant.

-   /en/two-ways-to-empty-an-array/

You define an array and want to empty its contents.
Usually, you would do it like this:

```javascript
// define Array
var list = [1, 2, 3, 4];
function empty() {
    //empty your array
    list = [];
}
empty();
```

But there is another way to empty an array that is more performant.

You should use code like this:

```javascript
var list = [1, 2, 3, 4];
function empty() {
    //empty your array
    list.length = 0;
}
empty();
```

-   `list = []` assigns a reference to a new array to a variable, while any other references are unaffected.
    which means that references to the contents of the previous array are still kept in memory, leading to memory leaks.

-   `list.length = 0` deletes everything in the array, which does hit other references.

In other words, if you have two references to the same array (`a = [1,2,3]; a2 = a;`), and you delete the array's contents using `list.length = 0`, both references (a and a2) will now point to the same empty array. (So don't use this technique if you don't want a2 to hold an empty array!)

Think about what this will output:

```js
var foo = [1, 2, 3];
var bar = [1, 2, 3];
var foo2 = foo;
var bar2 = bar;
foo = [];
bar.length = 0;
console.log(foo, bar, foo2, bar2);

// [] [] [1, 2, 3] []
```

Stackoverflow more detail:
[difference-between-array-length-0-and-array](http://stackoverflow.com/questions/4804235/difference-between-array-length-0-and-array)

title: Converting to number fast way
tip-number: 23
tip-username: sonnyt
tip-username-profile: http://twitter.com/sonnyt
tip-tldr: Converting strings to numbers is extremely common. The easiest and fastest way to achieve that would be using the + operator.

-   /en/converting-to-number-fast-way/

Converting strings to numbers is extremely common. The easiest and fastest ([jsPerf](https://jsperf.com/number-vs-parseint-vs-plus/29)) way to achieve that would be using the `+` (plus) operator.

```javascript
var one = '1';

var numberOne = +one; // Number 1
```

You can also use the `-` (minus) operator which type-converts the value into number but also negates it.

```javascript
var one = '1';

var negativeNumberOne = -one; // Number -1
```

title: Use === instead of ==
tip-number: 24
tip-username: bhaskarmelkani
tip-username-profile: https://www.twitter.com/bhaskarmelkani
tip-tldr: The `==` (or `!=`) operator performs an automatic type conversion if needed. The `===` (or `!==`) operator will not perform any conversion. It compares the value and the type, which could be considered faster ([jsPref](http://jsperf.com/strictcompare)) than `==`.

-   /en/use*===\_instead_of*==/

The `==` (or `!=`) operator performs an automatic type conversion if needed. The `===` (or `!==`) operator will not perform any conversion. It compares the value and the type, which could be considered faster ([jsPref](http://jsperf.com/strictcompare)) than `==`.

```js
[10] ==  10      // is true
[10] === 10      // is false

'10' ==  10      // is true
'10' === 10      // is false

 []  ==  0       // is true
 []  === 0       // is false

 ''  ==  false   // is true but true == "a" is false
 ''  === false   // is false

```

title: Using immediately invoked function expression
tip-number: 25
tip-username: rishantagarwal
tip-username-profile: https://github.com/rishantagarwal
tip-tldr: Called as "Iffy" ( IIFE - immediately invoked function expression) is an anonymous function expression that is immediately invoked and has some important uses in Javascript.

-   /en/Using-immediately-invoked-function-expression/

Called as "Iffy" ( IIFE - immediately invoked function expression) is an anonymous function expression that is immediately invoked and has some important uses in Javascript.

```javascript
(function () {
    // Do something​
})();
```

It is an anonymous function expression that is immediately invoked, and it has some particularly important uses in JavaScript.

The pair of parenthesis surrounding the anonymous function turns the anonymous function into a function expression or variable expression. So instead of a simple anonymous function in the global scope, or wherever it was defined, we now have an unnamed function expression.

Similarly, we can even create a named, immediately invoked function expression:

```javascript
(someNamedFunction = function(msg) {
	console.log(msg || "Nothing for today !!")
	}) (); // Output --> Nothing for today !!​
​
someNamedFunction("Javascript rocks !!"); // Output --> Javascript rocks !!
someNamedFunction(); // Output --> Nothing for today !!​
```

For more details, check the following URL's -

1. [Link 1](https://blog.mariusschulz.com/2016/01/13/disassembling-javascripts-iife-syntax)
2. [Link 2](http://javascriptissexy.com/12-simple-yet-powerful-javascript-tips/)

Performance:
[jsPerf](http://jsperf.com/iife-with-call)

title: Filtering and Sorting a List of Strings
tip-number: 26
tip-username: davegomez
tip-username-profile: https://github.com/davegomez
tip-tldr: You may have a big list of names you need to filter in order to remove duplicates and sort them alphabetically.

c

-   /en/filtering-and-sorting-a-list-of-strings/

You may have a big list of names you need to filter in order to remove duplicates and sort them alphabetically.

In our example we are going to use the list of **JavaScript reserved keywords** we can find across the different versions of the language, but as you can notice, there is a lot of duplicated keywords and they are not alphabetically organized. So this is a perfect list ([Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)) of strings to test out this JavaScript tip.

```js
var keywords = [
    'do',
    'if',
    'in',
    'for',
    'new',
    'try',
    'var',
    'case',
    'else',
    'enum',
    'null',
    'this',
    'true',
    'void',
    'with',
    'break',
    'catch',
    'class',
    'const',
    'false',
    'super',
    'throw',
    'while',
    'delete',
    'export',
    'import',
    'return',
    'switch',
    'typeof',
    'default',
    'extends',
    'finally',
    'continue',
    'debugger',
    'function',
    'do',
    'if',
    'in',
    'for',
    'int',
    'new',
    'try',
    'var',
    'byte',
    'case',
    'char',
    'else',
    'enum',
    'goto',
    'long',
    'null',
    'this',
    'true',
    'void',
    'with',
    'break',
    'catch',
    'class',
    'const',
    'false',
    'final',
    'float',
    'short',
    'super',
    'throw',
    'while',
    'delete',
    'double',
    'export',
    'import',
    'native',
    'public',
    'return',
    'static',
    'switch',
    'throws',
    'typeof',
    'boolean',
    'default',
    'extends',
    'finally',
    'package',
    'private',
    'abstract',
    'continue',
    'debugger',
    'function',
    'volatile',
    'interface',
    'protected',
    'transient',
    'implements',
    'instanceof',
    'synchronized',
    'do',
    'if',
    'in',
    'for',
    'let',
    'new',
    'try',
    'var',
    'case',
    'else',
    'enum',
    'eval',
    'null',
    'this',
    'true',
    'void',
    'with',
    'break',
    'catch',
    'class',
    'const',
    'false',
    'super',
    'throw',
    'while',
    'yield',
    'delete',
    'export',
    'import',
    'public',
    'return',
    'static',
    'switch',
    'typeof',
    'default',
    'extends',
    'finally',
    'package',
    'private',
    'continue',
    'debugger',
    'function',
    'arguments',
    'interface',
    'protected',
    'implements',
    'instanceof',
    'do',
    'if',
    'in',
    'for',
    'let',
    'new',
    'try',
    'var',
    'case',
    'else',
    'enum',
    'eval',
    'null',
    'this',
    'true',
    'void',
    'with',
    'await',
    'break',
    'catch',
    'class',
    'const',
    'false',
    'super',
    'throw',
    'while',
    'yield',
    'delete',
    'export',
    'import',
    'public',
    'return',
    'static',
    'switch',
    'typeof',
    'default',
    'extends',
    'finally',
    'package',
    'private',
    'continue',
    'debugger',
    'function',
    'arguments',
    'interface',
    'protected',
    'implements',
    'instanceof'
];
```

Since we don't want to change our original list, we are going to use a high order function named [`filter`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), which will return a new filter array based in a predicate (_function_) we pass to it. The predicate will compare the index of the current keyword in the original list with its `index` in the new list and will push it to the new array only if the indexes match.

Finally we are going to sort the filtered list using the [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) function which takes a comparison function as the only argument, returning a alphabetically sorted list.

```js
var filteredAndSortedKeywords = keywords
    .filter(function (keyword, index) {
        return keywords.lastIndexOf(keyword) === index;
    })
    .sort(function (a, b) {
        return a < b ? -1 : 1;
    });
```

The **ES6** (ECMAScript 2015) version using [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) looks a little simpler:

```js
const filteredAndSortedKeywords = keywords.filter((keyword, index) => keywords.lastIndexOf(keyword) === index).sort((a, b) => (a < b ? -1 : 1));
```

And this is the final filtered and sorted list of JavaScript reserved keywords:

```js
console.log(filteredAndSortedKeywords);

// ['abstract', 'arguments', 'await', 'boolean', 'break', 'byte', 'case', 'catch', 'char', 'class', 'const', 'continue', 'debugger', 'default', 'delete', 'do', 'double', 'else', 'enum', 'eval', 'export', 'extends', 'false', 'final', 'finally', 'float', 'for', 'function', 'goto', 'if', 'implements', 'import', 'in', 'instanceof', 'int', 'interface', 'let', 'long', 'native', 'new', 'null', 'package', 'private', 'protected', 'public', 'return', 'short', 'static', 'super', 'switch', 'synchronized', 'this', 'throw', 'throws', 'transient', 'true', 'try', 'typeof', 'var', 'void', 'volatile', 'while', 'with', 'yield']
```

_Thanks to [@nikshulipa](https://github.com/nikshulipa), [@kirilloid](https://twitter.com/kirilloid), [@lesterzone](https://twitter.com/lesterzone), [@tracker1](https://twitter.com/tracker1), [@manuel_del_pozo](https://twitter.com/manuel_del_pozo) for all the comments and suggestions!_

title: Short circuit evaluation in JS.
tip-number: 27
tip-username: bhaskarmelkani
tip-username-profile: https://www.twitter.com/bhaskarmelkani
tip-tldr: Short-circuit evaluation says, the second argument is executed or evaluated only if the first argument does not suffice to determine the value of the expression, when the first argument of the AND `&&` function evaluates to false, the overall value must be false, and when the first argument of the OR `||` function evaluates to true, the overall value must be true.

-   /en/short-circuit-evaluation-in-js/

[Short-circuit evaluation](https://en.wikipedia.org/wiki/Short-circuit_evaluation) says, the second argument is executed or evaluated only if the first argument does not suffice to determine the value of the expression: when the first argument of the AND (`&&`) function evaluates to false, the overall value must be false; and when the first argument of the OR (`||`) function evaluates to true, the overall value must be true.

For the following `test` condition and `isTrue` and `isFalse` function.

```js
var test = true;
var isTrue = function () {
    console.log('Test is true.');
};
var isFalse = function () {
    console.log('Test is false.');
};
```

Using logical AND - `&&`.

```js
// A normal if statement.
if (test) {
    isTrue(); // Test is true
}

// Above can be done using '&&' as -

test && isTrue(); // Test is true
```

Using logical OR - `||`.

```js
test = false;
if (!test) {
    isFalse(); // Test is false.
}

test || isFalse(); // Test is false.
```

The logical OR could also be used to set a default value for function argument.

```js
function theSameOldFoo(name) {
    name = name || 'Bar';
    console.log("My best friend's name is " + name);
}
theSameOldFoo(); // My best friend's name is Bar
theSameOldFoo('Bhaskar'); // My best friend's name is Bhaskar
```

The logical AND could be used to avoid exceptions when using properties of undefined.
Example:

```js
var dog = {
    bark: function () {
        console.log('Woof Woof');
    }
};

// Calling dog.bark();
dog.bark(); // Woof Woof.

// But if dog is not defined, dog.bark() will raise an error "Cannot read property 'bark' of undefined."
// To prevent this, we can use &&.

dog && dog.bark(); // This will only call dog.bark(), if dog is defined.
```

title: Currying vs partial application
tip-number: 28
tip-username: bhaskarmelkani
tip-username-profile: https://www.twitter.com/bhaskarmelkani
tip-tldr: Currying and partial application are two ways of transforming a function into another function with a generally smaller arity.

-   /en/curry-vs-partial-application/

**Currying**

Currying takes a function

f: X \* Y -> R

and turns it into a function

f': X -> (Y -> R)

Instead of calling f with two arguments, we invoke f' with the first argument. The result is a function that we then call with the second argument to produce the result.

Thus, if the uncurried f is invoked as

f(3,5)

then the curried f' is invoked as

f(3)(5)

For example:
Uncurried add()

```javascript
function add(x, y) {
    return x + y;
}

add(3, 5); // returns 8
```

Curried add()

```javascript
function addC(x) {
    return function (y) {
        return x + y;
    };
}

addC(3)(5); // returns 8
```

**The algorithm for currying.**

Curry takes a binary function and returns a unary function that returns a unary function.

curry: (X × Y → R) → (X → (Y → R))

Javascript Code:

```javascript
function curry(f) {
    return function (x) {
        return function (y) {
            return f(x, y);
        };
    };
}
```

**Partial application**

Partial application takes a function

f: X \* Y -> R

and a fixed value for the first argument to produce a new function

f`: Y -> R

f' does the same as f, but only has to fill in the second parameter which is why its arity is one less than the arity of f.

For example: Binding the first argument of function add to 5 produces the function plus5.

```javascript
function plus5(y) {
    return 5 + y;
}

plus5(3); // returns 8
```

**The algorithm of partial application.\***

partApply takes a binary function and a value and produces a unary function.

partApply : ((X × Y → R) × X) → (Y → R)

Javascript Code:

```javascript
function partApply(f, x) {
    return function (y) {
        return f(x, y);
    };
}
```

title: Speed up recursive functions with memoization
tip-number: 29
tip-username: hingsir
tip-username-profile: https://github.com/hingsir
tip-tldr: Fibonacci sequence is very familiar to everybody. we can write the following function in 20 seconds.it works, but not efficient. it did lots of duplicate computing works, we can cache its previously computed results to speed it up.

-   /en/speed-up-recursive-functions-with-memoization/

Fibonacci sequence is very familiar to everybody. We can write the following function in 20 seconds.

```js
var fibonacci = function (n) {
    return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);
};
```

It works, but is not efficient. It did lots of duplicate computing works, we can cache its previously computed results to speed it up.

```js
var fibonacci = (function () {
    var cache = [0, 1]; // cache the value at the n index
    return function (n) {
        if (cache[n] === undefined) {
            for (var i = cache.length; i <= n; ++i) {
                cache[i] = cache[i - 1] + cache[i - 2];
            }
        }
        return cache[n];
    };
})();
```

Also, we can define a higher-order function that accepts a function as its argument and returns a memoized version of the function.

```js
var memoize = function (func) {
    var cache = {};
    return function () {
        var key = JSON.stringify(Array.prototype.slice.call(arguments));
        return key in cache ? cache[key] : (cache[key] = func.apply(this, arguments));
    };
};
fibonacci = memoize(fibonacci);
```

And this is an ES6 version of the memoize function.

```js
var memoize = function (func) {
    const cache = {};
    return (...args) => {
        const key = JSON.stringify(args);
        return key in cache ? cache[key] : (cache[key] = func(...args));
    };
};
fibonacci = memoize(fibonacci);
```

we can use `memoize()` in many other situations

-   GCD(Greatest Common Divisor)

```js
var gcd = memoize(function (a, b) {
    var t;
    if (a < b) (t = b), (b = a), (a = t);
    while (b != 0) (t = b), (b = a % b), (a = t);
    return a;
});
gcd(27, 183); //=> 3
```

-   Factorial calculation

```js
var factorial = memoize(function (n) {
    return n <= 1 ? 1 : n * factorial(n - 1);
});
factorial(5); //=> 120
```

Learn more about memoization:

-   [Memoization - Wikipedia](https://en.wikipedia.org/wiki/Memoization)
-   [Implementing Memoization in JavaScript](https://www.sitepoint.com/implementing-memoization-in-javascript/)

title: Converting truthy/falsy values to boolean
tip-number: 30
tip-username: hakhag
tip-username-profile: https://github.com/hakhag
tip-tldr: Logical operators are a core part of JavaScript, here you can see a a way you always get a true or false no matter what was given to it.

-   /en/converting-truthy-falsy-values-to-boolean/

You can convert a [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) or [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) value to true boolean with the `!!` operator.

```js
!!''; // false
!!0; // false
!!null; // false
!!undefined; // false
!!NaN; // false

!!'hello'; // true
!!1; // true
!!{}; // true
!![]; // true
```

title: Avoid modifying or passing `arguments` into other functions — it kills optimization
tip-number: 31
tip-username: berkana
tip-username-profile: https://github.com/berkana
tip-tldr: Within JavaScript functions, the variable name `arguments` lets you access all of the arguments passed to the function. `arguments` is an _array-like object_; `arguments` can be accessed using array notation, and it has the _length_ property, but it doesn't have many of the built-in methods that arrays have such as `filter` and `map` and `forEach`. Because of this, it is a fairly common practice to convert `arguments` into an array using the following snipet

-   /en/avoid-modifying-or-passing-arguments-into-other-functions-it-kills-optimization/

###Background

Within JavaScript functions, the variable name [`arguments`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments) lets you access all of the arguments passed to the function. `arguments` is an _array-like object_; `arguments` can be accessed using array notation, and it has the _length_ property, but it doesn't have many of the built-in methods that arrays have such as `filter` and `map` and `forEach`. Because of this, it is a fairly common practice to convert `arguments` into an array using the following:

```js
var args = Array.prototype.slice.call(arguments);
```

This calls the `slice` method from the `Array` prototype, passing it `arguments`; the `slice` method returns a shallow copy of `arguments` as a new array object. A common shorthand for this is :

```js
var args = [].slice.call(arguments);
```

In this case, instead of calling `slice` from the `Array` prototype, it is simply being called from an empty array literal.

###Optimization

Unfortunately, passing `arguments` into any function call will cause the V8 JavaScript engine used in Chrome and Node to skip optimization on the function that does this, which can result in considerably slower performance. See this article on [optimization killers](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers). Passing `arguments` to any other function is known as _leaking `arguments`_.

Instead, if you want an array of the arguments that lets you use you need to resort to this:

```js
var args = new Array(arguments.length);
for (var i = 0; i < args.length; ++i) {
    args[i] = arguments[i];
}
```

Yes it is more verbose, but in production code, it is worth it for the performance optimization.

title: Map() to the rescue; adding order to Object properties
tip-number: 32
tip-username: loverajoel
tip-username-profile: https://twitter.com/loverajoel
tip-tldr: An Object it is an unordered collection of properties... that means that if you are trying to save ordered data inside an Object, you have to review it because properties order in objects are not guaranteed.
tip-writer-support: https://www.coinbase.com/loverajoel

-   /en/map-to-the-rescue-adding-order-to-object-properties/

## Object properties order

> An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method. [ECMAScript](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf)

Take a look in action

```js
var myObject = {
	z: 1,
	'@': 2,
	b: 3,
	1: 4,
	5: 5
};
console.log(myObject) // Object {1: 4, 5: 5, z: 1, @: 2, b: 3}

for (item in myObject) {...
// 1
// 5
// z
// @
// b
```

Each browser have his own rules about the order in objects bebause technically, order is unspecified.

## How to solve this?

### Map

Using a new ES6 feature called Map. A [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object iterates its elements in insertion order — a `for...of` loop returns an array of [key, value] for each iteration.

```js
var myObject = new Map();
myObject.set('z', 1);
myObject.set('@', 2);
myObject.set('b', 3);
for (var [key, value] of myObject) {
  console.log(key, value);
...
// z 1
// @ 2
// b 3
```

### Hack for old browsers

Mozilla suggest:

> So, if you want to simulate an ordered associative array in a cross-browser environment, you are forced to either use two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.

```js
// Using two separate arrays
var objectKeys = [z, @, b, 1, 5];
for (item in objectKeys) {
	myObject[item]
...

// Build an array of single-property objects
var myData = [{z: 1}, {'@': 2}, {b: 3}, {1: 4}, {5: 5}];
```

title: Create array sequence `[0, 1, ..., N-1]` in one line
tip-number: 33
tip-username: SarjuHansaliya
tip-username-profile: https://github.com/SarjuHansaliya
tip-tldr: Compact one-liners that generate ordinal sequence arrays

-   /en/create-range-0...n-easily-using-one-line/

Here are two compact code sequences to generate the `N`-element array `[0, 1, ..., N-1]`:

### Solution 1 (requires ES5)

```js
Array.apply(null, { length: N }).map(Function.call, Number);
```

#### Brief explanation

1. `Array.apply(null, {length: N})` returns an `N`-element array filled with `undefined` (i.e. `A = [undefined, undefined, ...]`).
2. `A.map(Function.call, Number)` returns an `N`-element array, whose index `I` gets the result of `Function.call.call(Number, undefined, I, A)`
3. `Function.call.call(Number, undefined, I, A)` collapses into `Number(I)`, which is naturally `I`.
4. Result: `[0, 1, ..., N-1]`.

For a more thorough explanation, go [here](https://github.com/gromgit/jstips-xe/blob/master/tips/33.md).

### Solution 2 (requires ES6)

It uses `Array.from` [https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

```js
Array.from(new Array(N), (val, index) => index);
```

### Solution 3 (requires ES6)

```js
Array.from(Array(N).keys());
```

#### Brief explanation

1. `A = new Array(N)` returns an array with `N` _holes_ (i.e. `A = [,,,...]`, but `A[x] = undefined` for `x` in `0...N-1`).
2. `F = (val,index)=>index` is simply `function F (val, index) { return index; }`
3. `Array.from(A, F)` returns an `N`-element array, whose index `I` gets the results of `F(A[I], I)`, which is simply `I`.
4. Result: `[0, 1, ..., N-1]`.

### One More Thing

If you actually want the sequence [1, 2, ..., N], **Solution 1** becomes:

```js
Array.apply(null, { length: N }).map(function (value, index) {
    return index + 1;
});
```

and **Solution 2**:

```js
Array.from(new Array(N), (val, index) => index + 1);
```

title: Implementing asynchronous loop
tip-number: 34
tip-username: madmantalking
tip-username-profile: https://github.com/madmantalking
tip-tldr: You may run into problems while implementing asynchronous loops.

-   /en/implementing-asynchronous-loops/

Let's try out writing an asynchronous function which prints the value of the loop index every second.

```js
for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000 * (i + 1));
}
```

The output of the above programs turns out to be

```js
> 5
> 5
> 5
> 5
> 5
```

So this definitely doesn't work.

**Reason**

Each timeout refers to the original `i`, not a copy. So the for loop increments `i` until it gets to 5, then the timeouts run and use the current value of `i` (which is 5).

Well , this problem seems easy. An immediate solution that strikes is to cache the loop index in a temporary variable.

```js
for (var i = 0; i < 5; i++) {
    var temp = i;
    setTimeout(function () {
        console.log(temp);
    }, 1000 * (i + 1));
}
```

But again the output of the above programs turns out to be

```js
> 4
> 4
> 4
> 4
> 4
```

So , that doesn't work either , because blocks don't create a scope and variables initializers are hoisted to the top of the scope. In fact, the previous block is the same as:

```js
var temp;
for (var i = 0; i < 5; i++) {
    temp = i;
    setTimeout(function () {
        console.log(temp);
    }, 1000 * (i + 1));
}
```

**Solution**

There are a few different ways to copy `i`. The most common way is creating a closure by declaring a function and passing `i` as an argument. Here we do this as a self-calling function.

```js
for (var i = 0; i < 5; i++) {
    (function (num) {
        setTimeout(function () {
            console.log(num);
        }, 1000 * (i + 1));
    })(i);
}
```

In JavaScript, arguments are passed by value to a function. So primitive types like numbers, dates, and strings are basically copied. If you change them inside the function, it does not affect the outside scope. Objects are special: if the inside function changes a property, the change is reflected in all scopes.

Another approach for this would be with using `let`. With ES6 the `let` keyword is useful since it's block scoped unlike `var`

```js
for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000 * (i + 1));
}
```

title: Assignment Operators
tip-number: 35
tip-username: hsleonis
tip-username-profile: https://github.com/hsleonis
tip-tldr: Assigning is very common. Sometimes typing becomes time consuming for us 'Lazy programmers'. So, we can use some tricks to help us and make our code cleaner and simpler.

-   /en/assignment-shorthands/

Assigning is very common. Sometimes typing becomes time consuming for us 'Lazy programmers'.
So, we can use some tricks to help us and make our code cleaner and simpler.

This is the similar use of

```javascript
x += 23; // x = x + 23;
y -= 15; // y = y - 15;
z *= 10; // z = z * 10;
k /= 7; // k = k / 7;
p %= 3; // p = p % 3;
d **= 2; // d = d ** 2;
m >>= 2; // m = m >> 2;
n <<= 2; // n = n << 2;
n++; // n = n + 1;
n--;
n = n - 1;
```

### `++` and `--` operators

There is a special `++` operator. It's best to explain it with an example:

```javascript
var a = 2;
var b = a++;
// Now a is 3 and b is 2
```

The `a++` statement does this:

1. return the value of `a`
2. increment `a` by 1

But what if we wanted to increment the value first? It's simple:

```javascript
var a = 2;
var b = ++a;
// Now both a and b are 3
```

See? I put the operator _before_ the variable.

The `--` operator is similar, except it decrements the value.

### If-else (Using ternary operator)

This is what we write on regular basis.

```javascript
var newValue;
if (value > 10) newValue = 5;
else newValue = 2;
```

We can user ternary operator to make it awesome:

```javascript
var newValue = value > 10 ? 5 : 2;
```

### Null, Undefined, Empty Checks

```javascript
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
    var variable2 = variable1;
}
```

Shorthand here:

```javascript
var variable2 = variable1 || '';
```

P.S.: If variable1 is a number, then first check if it is 0.

### Object Array Notation

Instead of using:

```javascript
var a = new Array();
a[0] = 'myString1';
a[1] = 'myString2';
```

Use this:

```javascript
var a = ['myString1', 'myString2'];
```

### Associative array

Instead of using:

```javascript
var skillSet = new Array();
skillSet['Document language'] = 'HTML5';
skillSet['Styling language'] = 'CSS3';
```

Use this:

```javascript
var skillSet = {
    'Document language': 'HTML5',
    'Styling language': 'CSS3'
};
```

title: Observe DOM changes in extensions
tip-number: 36
tip-username: beyondns
tip-username-profile: https://github.com/beyondns
tip-tldr: When you develop extensions to existent sites it's not so easy to play with DOM 'cause of modern dynamic javascript.

-   /en/observe-dom-changes/

[MutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver) is a solution to listen DOM changes and do what you want to do with elements when they changed. In following example there is some emulation of dynamic content loading with help of timers, after first "target" element creation goes "subTarget".
In extension code firstly rootObserver works till targetElement appearance then elementObserver starts. This cascading observing helps finally get moment when subTargetElement found.
This useful to develop extensions to complex sites with dynamic content loading.

```js
const observeConfig = {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
};

function initExtension(rootElement, targetSelector, subTargetSelector) {
    var rootObserver = new MutationObserver(function (mutations) {
        console.log('Inside root observer');
        targetElement = rootElement.querySelector(targetSelector);
        if (targetElement) {
            rootObserver.disconnect();
            var elementObserver = new MutationObserver(function (mutations) {
                console.log('Inside element observer');
                subTargetElement = targetElement.querySelector(subTargetSelector);
                if (subTargetElement) {
                    elementObserver.disconnect();
                    console.log('subTargetElement found!');
                }
            });
            elementObserver.observe(targetElement, observeConfig);
        }
    });
    rootObserver.observe(rootElement, observeConfig);
}

(function () {
    initExtension(document.body, 'div.target', 'div.subtarget');

    setTimeout(function () {
        del = document.createElement('div');
        del.innerHTML = "<div class='target'>target</div>";
        document.body.appendChild(del);
    }, 3000);

    setTimeout(function () {
        var el = document.body.querySelector('div.target');
        if (el) {
            del = document.createElement('div');
            del.innerHTML = "<div class='subtarget'>subtarget</div>";
            el.appendChild(del);
        }
    }, 5000);
})();
```

title: Deduplicate an Array
tip-number: 37
tip-username: danillouz
tip-username-profile: https://www.twitter.com/danillouz
tip-tldr: How to remove duplicate elements, of different data types, from an Array.

-   /en/deduplicate-an-array/

# Primitives

If an Array only contains primitive values, we can deduplicate it by
only using the [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) and [`indexOf`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) methods.

```javascript
var deduped = [1, 1, 'a', 'a'].filter(function (el, i, arr) {
    return arr.indexOf(el) === i;
});

console.log(deduped); // [ 1, 'a' ]
```

## ES2015

We can write this in a more compact way using an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions).

```javascript
var deduped = [1, 1, 'a', 'a'].filter((el, i, arr) => arr.indexOf(el) === i);

console.log(deduped); // [ 1, 'a' ]
```

But with the introduction of [Sets](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and the [`from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from) method, we can achieve the same
result in a more concise way.

```javascript
var deduped = Array.from(new Set([1, 1, 'a', 'a']));

console.log(deduped); // [ 1, 'a' ]
```

# Objects

We can't use the same approach when the elements are Objects,
because Objects are stored by reference and primitives are stored
by value.

```javascript
1 === 1 // true

'a' === 'a' // true

{ a: 1 } === { a: 1 } // false
```

Therefore we need to change our approach and use a hash table.

```javascript
function dedup(arr) {
    var hashTable = {};

    return arr.filter(function (el) {
        var key = JSON.stringify(el);
        var match = Boolean(hashTable[key]);

        return match ? false : (hashTable[key] = true);
    });
}

var deduped = dedup([{ a: 1 }, { a: 1 }, [1, 2], [1, 2]]);

console.log(deduped); // [ {a: 1}, [1, 2] ]
```

Because a hash table in javascript is simply an `Object`, the keys
will always be of the type `String`. This means that normally we can't
distinguish between strings and numbers of the same value, i.e. `1` and
`'1'`.

```javascript
var hashTable = {};

hashTable[1] = true;
hashTable['1'] = true;

console.log(hashTable); // { '1': true }
```

However, because we're using [`JSON.stringify`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify), keys that are of the
type `String`, will be stored as an escaped string value, giving us unique
keys in our `hashTable`.

```javascript
var hashTable = {};

hashTable[JSON.stringify(1)] = true;
hashTable[JSON.stringify('1')] = true;

console.log(hashTable); // { '1': true, '\'1\'': true }
```

This means duplicate elements of the same value, but of a different type,
will still be deduplicated using the same implementation.

```javascript
var deduped = dedup([{ a: 1 }, { a: 1 }, [1, 2], [1, 2], 1, 1, '1', '1']);

console.log(deduped); // [ {a: 1}, [1, 2], 1, '1' ]
```

# Resources

## Methods

-   [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
-   [`indexOf`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
-   [`from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
-   [`JSON.stringify`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)

## ES2015

-   [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
-   [Sets](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)

## Stack overflow

-   [remove duplicates from array](http://stackoverflow.com/questions/9229645/remove-duplicates-from-javascript-array/9229821#9229821)

title: Flattening multidimensional Arrays in JavaScript
tip-number: 38
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: Three different solutions to merge multidimensional array into a single array.
tip-writer-support: https://www.coinbase.com/loverajoel

-   /en/flattening-multidimensional-arrays-in-javascript/

These are the three known ways to merge multidimensional array into a single array.

Given this array:

```js
var myArray = [
    [1, 2],
    [3, 4, 5],
    [6, 7, 8, 9]
];
```

We wanna have this result:

```js
[1, 2, 3, 4, 5, 6, 7, 8, 9];
```

### Solution 1: Using [`concat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) and [`apply()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)

```js
var myNewArray = [].concat.apply([], myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

### Solution 2: Using [`reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce#Flatten_an_array_of_arrays)

```js
var myNewArray = myArray.reduce(function (prev, curr) {
    return prev.concat(curr);
});
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

### Solution 3:

```js
var myNewArray3 = [];
for (var i = 0; i < myArray.length; ++i) {
    for (var j = 0; j < myArray[i].length; ++j) myNewArray3.push(myArray[i][j]);
}
console.log(myNewArray3);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

### Solution 4: Using [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) in ES6

```js
var myNewArray4 = [].concat(...myArray);
console.log(myNewArray4);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

### Solution 5: Using [`flat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) in ES10

```js
var myNewArray5 = myArray.flat();
console.log(myNewArray5);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

Take a look [here](https://jsbin.com/janana/edit?js,console) these 4 algorithms in action.

For infinitely nested array try Lodash [flattenDeep()](https://lodash.com/docs#flattenDeep).

If you are curious about performance, [here](http://jsperf.com/flatten-an-array-loop-vs-reduce/6) a test for check how it works.

title: Advanced Javascript Properties
tip-number: 39
tip-username: mallowigi
tip-username-profile: https://github.com/mallowigi
tip-tldr: How to add private properties, getters and setters to objects.

-   /en/advanced-properties/

It is possible to configure object properties in Javascript for example to set properties to be pseudo-private or readonly. This feature is available since ECMAScript 5.1, therefore supported by all recent browsers.

To do so, you need to use the method `defineProperty` of the `Object` prototype like so:

```js
var a = {};
Object.defineProperty(a, 'readonly', {
    value: 15,
    writable: false
});

a.readonly = 20;
console.log(a.readonly); // 15
```

The syntax is as follows:

```js
Object.defineProperty(dest, propName, options);
```

or for multiple definitions:

```js
Object.defineProperties(dest, {
    propA: optionsA,
    propB: optionsB //...
});
```

where options include the following attributes:

-   _value_: if the property is not a getter (see below), value is a mandatory attribute. `{a: 12}` === `Object.defineProperty(obj, 'a', {value: 12})`
-   _writable_: set the property as readonly. Note that if the property is a nested objects, its properties are still editable.
-   _enumerable_: set the property as hidden. That means that `for ... of` loops and `stringify` will not include the property in their result, but the property is still there. Note: That doesn't mean that the property is private! It can still be accessible from the outside, it just means that it won't be printed.
-   _configurable_: set the property as non modifiable, e.g. protected from deletion or redefinition. Again, if the property is a nested object, its properties are still configurable.

So in order to create a private constant property, you can define it like so:

```js
Object.defineProperty(obj, 'myPrivateProp', { value: val, enumerable: false, writable: false, configurable: false });
```

Besides configuring properties, `defineProperty` allows us to define _dynamic properties_, thanks to the second parameter being a string. For instance, let's say that I want to create properties according to some external configuration:

```js

var obj = {
  getTypeFromExternal(): true // illegal in ES5.1
}

Object.defineProperty(obj, getTypeFromExternal(), {value: true}); // ok

// For the example sake, ES6 introduced a new syntax:
var obj = {
  [getTypeFromExternal()]: true
}
```

But that's not all! Advanced properties allows us to create **getters** and **setters**, just like other OOP languages! In that case, one cannot use the `writable`, `enumerable` and `configurable` properties, but instead:

```js
function Foobar () {
  var _foo; //  true private property

  Object.defineProperty(obj, 'foo', {
    get: function () { return _foo; }
    set: function (value) { _foo = value }
  });

}

var foobar = new Foobar();
foobar.foo; // 15
foobar.foo = 20; // _foo = 20
```

Aside for the obvious advantage of encapsulation and advanced accessors, you will notice that we didn't "call" the getter, instead we just "get" the property without parentheses! This is awesome! For instance, let's imagine that we have an object with long nested properties, like so:

```js
var obj = { a: { b: { c: [{ d: 10 }, { d: 20 }] } } };
```

Now instead of doing `a.b.c[0].d` (where one of the properties can resolve to `undefined` and throw an error), we can instead create an alias:

```js
Object.defineProperty(obj, 'firstD', {
    get: function () {
        return a && a.b && a.b.c && a.b.c[0] && a.b.c[0].d;
    }
});

console.log(obj.firstD); // 10
```

### Note

If you define a getter without a setter and still try to set a value, you will get an error! This is particularly important when using helper functions such as `$.extend` or `_.merge`. Be careful!

### Links

-   [defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)
-   [Defining properties in JavaScript](http://bdadam.com/blog/defining-properties-in-javascript.html)

title: Using JSON.Stringify
tip-number: 40
tip-username: vamshisuram
tip-username-profile: https://github.com/vamshisuram
tip-tldr: Create string from selected properties of JSON object.

-   /en/using-json-stringify/

Let's say there is an object with properties "prop1", "prop2", "prop3".
We can pass **additional params** to **JSON.stringify** to selectively write properties of the object to string like:

```javascript
var obj = {
    prop1: 'value1',
    prop2: 'value2',
    prop3: 'value3'
};

var selectedProperties = ['prop1', 'prop2'];

var str = JSON.stringify(obj, selectedProperties);

// str
// {"prop1":"value1","prop2":"value2"}
```

The **"str"** will contain only info on selected properties only.

Instead of array we can pass a function also.

```javascript
function selectedProperties(key, val) {
    // the first val will be the entire object, key is empty string
    if (!key) {
        return val;
    }

    if (key === 'prop1' || key === 'prop2') {
        return val;
    }

    return;
}
```

The last optional param it takes is to modify the way it writes the object to string.

```javascript
var str = JSON.stringify(obj, selectedProperties, '\t\t');

/* str output with double tabs in every line.
{
        "prop1": "value1",
        "prop2": "value2"
}
*/
```

title: Array average and median
tip-number: 41
tip-username: soyuka
tip-username-profile: https://github.com/soyuka
tip-tldr: Calculate the average and median from array values

-   /en/array-average-and-median/

The following examples will be based on the following array:

```javascript
let values = [2, 56, 3, 41, 0, 4, 100, 23];
```

To get the average, we have to sum up numbers and then divide by the number of values. Steps are:

-   get the array length
-   sum up values
-   get the average (`sum/length`)

```javascript
let values = [2, 56, 3, 41, 0, 4, 100, 23];
let sum = values.reduce((previous, current) => (current += previous));
let avg = sum / values.length;
// avg = 28
```

Or:

```javascript
let values = [2, 56, 3, 41, 0, 4, 100, 23];
let count = values.length;
values = values.reduce((previous, current) => (current += previous));
values /= count;
// avg = 28
```

Now, to get the median steps are:

-   sort the array
-   get the arethmic mean of the middle values

```javascript
let values = [2, 56, 3, 41, 0, 4, 100, 23];
values.sort((a, b) => a - b);
let lowMiddle = Math.floor((values.length - 1) / 2);
let highMiddle = Math.ceil((values.length - 1) / 2);
let median = (values[lowMiddle] + values[highMiddle]) / 2;
// median = 13,5
```

With a bitwise operator:

```javascript
let values = [2, 56, 3, 41, 0, 4, 100, 23];
values.sort((a, b) => a - b);
let median = (values[(values.length - 1) >> 1] + values[values.length >> 1]) / 2;
// median = 13,5
```

title: Preventing Unapply Attacks
tip-number: 42
tip-username: emars
tip-username-profile: https://twitter.com/marseltov
tip-tldr: Freeze the builtin prototypes.

-   /en/preventing-unapply-attacks/

By overriding the builtin prototypes, external code can cause code to break by rewriting code to expose and change bound arguments. This can be an issue that seriously breaks applications that works by using polyfill es5 methods.

```js
// example bind polyfill
function bind(fn) {
    var prev = Array.prototype.slice.call(arguments, 1);
    return function bound() {
        var curr = Array.prototype.slice.call(arguments, 0);
        var args = Array.prototype.concat.apply(prev, curr);
        return fn.apply(null, args);
    };
}

// unapply-attack
function unapplyAttack() {
    var concat = Array.prototype.concat;
    Array.prototype.concat = function replaceAll() {
        Array.prototype.concat = concat; // restore the correct version
        var curr = Array.prototype.slice.call(arguments, 0);
        var result = concat.apply([], curr);
        return result;
    };
}
```

The above function discards the `prev` array from the bind meaning that any `.concat` the first concat call following using the unapply attack will throw an error.

By using [Object.freeze](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze), making an object immutable, you prevent any overriding of the builtin object prototypes.

```js
(function freezePrototypes() {
    if (typeof Object.freeze !== 'function') {
        throw new Error('Missing Object.freeze');
    }
    Object.freeze(Object.prototype);
    Object.freeze(Array.prototype);
    Object.freeze(Function.prototype);
})();
```

You can read more about unapply attacks [here](https://glebbahmutov.com/blog/unapply-attack/).
Although this concept is called an 'unapply attack' due to some code being able to access closures that normally wouldn't be in scope, it is mostly wrong to consider this a security feature due to it not preventing an attacker with code execution from extending prototypes before the freezing happens and also still having the potential to read all scopes using various language features. ECMA modules would give realm based isolation which is much stronger than this solution however still doesn't fix the issues of third party scripts.

title: Use destructuring in function parameters
tip-number: 43
tip-username: dislick
tip-username-profile: https://github.com/dislick
tip-tldr: Did you know that you can use destructuring in function parameters?

-   /en/use-destructuring-in-function-parameters/

I am sure many of you are already familiar with the [ES6 Destructuring Assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment). Did you know that you can also use it in function parameters?

```js
var sayHello = function ({ name, surname }) {
    console.log(`Hello ${name} ${surname}! How are you?`);
};

sayHello({ name: 'John', surname: 'Smith' });
// -> Hello John Smith! How are you?
```

This is great for functions which accept an options object. For this use case, you can also add [default parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters) to fill in whatever values the caller leaves out, or if the caller forgets to pass one at all:

```js
var sayHello2 = function ({ name = 'Anony', surname = 'Moose' } = {}) {
    console.log(`Hello ${name} ${surname}! How are you?`);
};
```

The `= {}` says that the default object to be destructured for this parameter is `{}`, in case the caller forgets to pass the parameter, or passes one of the wrong type (more on this below).

```js
sayHello2();
// -> Hello Anony Moose! How are you?
sayHello2({ name: 'Bull' });
// -> Hello Bull Moose! How are you?
```

##### Argument Handling

With plain destructuring assignment, if the the input parameter can't be matched with the function's specified object arguments, all the unmatched arguments are `undefined`, so you need to add code that handles this properly:

```js
var sayHelloTimes = function ({ name, surname }, times) {
    console.log(`Hello ${name} ${surname}! I've seen you ${times} times before.`);
};

sayHelloTimes({ name: 'Pam' }, 5678);
// -> Hello Pam undefined! I've seen you 5678 times before.
sayHelloTimes(5678);
// -> Hello undefined undefined! I've seen you undefined times before.
```

Worse, if the parameter to be destructured is missing, an exception is thrown, probably bringing your app to a screeching halt:

```js
sayHelloTimes();
// -> Uncaught TypeError: Cannot match against 'undefined' or 'null'...
```

It's conceptually similar to accessing a property of an undefined object, just with a different exception type.

Destructuring assignment with default parameters hides all the above to a certain extent:

```js
var sayHelloTimes2 = function ({ name = 'Anony', surname = 'Moose' } = {}, times) {
    console.log(`Hello ${name} ${surname}! I've seen you ${times} times before.`);
};

sayHelloTimes2({ name: 'Pam' }, 5678);
// -> Hello Pam Moose! I've seen you 5678 times before.
sayHelloTimes2(5678);
// -> Hello Anony Moose! I've seen you undefined times before.
sayHelloTimes2();
// -> Hello Anony Moose! I've seen you undefined times before.
```

As for `= {}`, it covers the case of a missing _object_, for which individual property defaults won't help at all:

```js
var sayHelloTimes2a = function ({ name = 'Anony', surname = 'Moose' }, times) {
    console.log(`Hello ${name} ${surname}! I've seen you ${times} times before.`);
};

sayHelloTimes2a({ name: 'Pam' }, 5678);
// -> Hello Pam Moose! I've seen you 5678 times before.
sayHelloTimes2a(5678);
// -> Hello Anony Moose! I've seen you undefined times before.
sayHelloTimes2a();
// -> Uncaught TypeError: Cannot match against 'undefined' or 'null'.
```

##### Availability

Note that destructuring assignment may not yet be available by default, in the version of Node.js or browser that you're using. For Node.js, you can try using the `--harmony-destructuring` flag on startup to activate this feature.

title: Know the passing mechanism
tip-number: 44
tip-username: bmkmanoj
tip-username-profile: https://github.com/bmkmanoj
tip-tldr: JavaScript technically only passes by value for both primitives and object (or reference) types. In case of reference types the reference value itself is passed by value.

-   /en/know-the-passing-mechanism/

JavaScript is pass-by-value, technically. It is neither pass-by-value nor pass-by-reference, going by the truest sense of these terms. To understand this passing mechanism, take a look at the following two example code snippets and the explanations.

### Example 1

```js
var me = {
    // 1
    partOf: 'A Team'
};

function myTeam(me) {
    // 2

    me = {
        // 3
        belongsTo: 'A Group'
    };
}

myTeam(me);
console.log(me); // 4  : {'partOf' : 'A Team'}
```

In above example, when the `myTeam` gets invoked, JavaScript is _passing the reference to_ `me` _object as value, as it is an object_ and invocation itself creates two independent references to the same object, (though the name being same here i.e. `me`, is misleading and gives us an impression that it is the single reference) and hence, the reference variable themselves are independent.

When we assigned a new object at #`3`, we are changing this reference value entirely within the `myTeam` function, and it will not have any impact on the original object outside this function scope, from where it was passed and the reference in the outside scope is going to retain the original object and hence the output from #`4`.

### Example 2

```js
var me = {
    // 1
    partOf: 'A Team'
};

function myGroup(me) {
    // 2
    me.partOf = 'A Group'; // 3
}

myGroup(me);
console.log(me); // 4  : {'partOf' : 'A Group'}
```

In the case of `myGroup` invocation, we are passing the object `me`. But unlike the example 1 scenario, we are not assigning this `me` variable to any new object, effectively meaning the object reference value within the `myGroup` function scope still is the original object's reference value and when we are modifying the property within this scope, it is effectively modifying the original object's property. Hence, you get the output from #`4`.

So does this later case not prove that javascript is pass-by-reference? No, it does not. Remember, _JavaScript passes the reference as value, in case of objects_. The confusion arises as we tend not to understand fully what pass by reference is. This is the exact reason, some prefer to call this as _call-by-sharing_.

_Initially posted by the author on [js-by-examples](https://github.com/bmkmanoj/js-by-examples/blob/master/examples/js_pass_by_value_or_reference.md)_

title: Calculate the Max/Min value from an array
tip-number: 45
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: Ways to use the built-in functions Math.max() and Math.min() with arrays of numbers
tip-writer-support: https://www.coinbase.com/loverajoel

-   /en/calculate-the-max-min-value-from-an-array/

The built-in functions [Math.max()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max) and [Math.min()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min) find the maximum and minimum value of the arguments, respectively.

```js
Math.max(1, 2, 3, 4); // 4
Math.min(1, 2, 3, 4); // 1
```

These functions will not work as-is with arrays of numbers. However, there are some ways around this.

[`Function.prototype.apply()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) allows you to call a function with a given `this` value and an _array_ of arguments.

```js
var numbers = [1, 2, 3, 4];
Math.max.apply(null, numbers); // 4
Math.min.apply(null, numbers); // 1
```

Passing the `numbers` array as the second argument of `apply()` results in the function being called with all values in the array as parameters.

A simpler, ES2015 way of accomplishing this is with the new [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator).

```js
var numbers = [1, 2, 3, 4];
Math.max(...numbers); // 4
Math.min(...numbers); // 1
```

This operator causes the values in the array to be expanded, or "spread", into the function's arguments.

title: Detect document ready in pure JS
tip-number: 46
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: The cross-browser way to check if the document has loaded in pure JavaScript
tip-writer-support: https://www.coinbase.com/loverajoel

-   /en/detect-document-ready-in-pure-js/

The cross-browser way to check if the document has loaded in pure JavaScript is using [`readyState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState).

```js
if (document.readyState === 'complete') {
    // The page is fully loaded
}
```

You can detect when the document is ready...

```js
let stateCheck = setInterval(() => {
    if (document.readyState === 'complete') {
        clearInterval(stateCheck);
        // document ready
    }
}, 100);
```

or with [onreadystatechange](https://developer.mozilla.org/en-US/docs/Web/Events/readystatechange)...

```js
document.onreadystatechange = () => {
    if (document.readyState === 'complete') {
        // document ready
    }
};
```

Use `document.readyState === 'interactive'` to detect when the DOM is ready.

title: Basics declarations
tip-number: 47
tip-username: adaniloff
tip-username-profile: https://github.com/adaniloff
tip-tldr: Understand and work with declarations.

-   /en/basics-declarations/

Below, different ways to declare variables in JavaScript.
Comments and console.log should be enough to explain what's happening here:

```js
var y,
    x = (y = 1); //== var x; var y; x = y = 1
console.log('--> 1:', `x = ${x}, y = ${y}`);

// Will print
//--> 1: x = 1, y = 1
```

First, we just set two variables. Nothing much here.

```js
(() => {
    var x = (y = 2); // == var x; x = y = 2;
    console.log('2.0:', `x = ${x}, y = ${y}`);
})();
console.log('--> 2.1:', `x = ${x}, y = ${y}`);

// Will print
//2.0: x = 2, y = 2
//--> 2.1: x = 1, y = 2
```

As you can see, the code has only changed the global y, as we haven't declared the variable in the closure.

```js
(() => {
    var x,
        y = 3; // == var x; var y = 3;
    console.log('3.0:', `x = ${x}, y = ${y}`);
})();
console.log('--> 3.1:', `x = ${x}, y = ${y}`);

// Will print
//3.0: x = undefined, y = 3
//--> 3.1: x = 1, y = 2
```

Now we declare both variables through var. Meaning they only live in the context of the closure.

```js
(() => {
    var y,
        x = (y = 4); // == var x; var y; x = y = 4
    console.log('4.0:', `x = ${x}, y = ${y}`);
})();
console.log('--> 4.1:', `x = ${x}, y = ${y}`);

// Will print
//4.0: x = 4, y = 4
//--> 4.1: x = 1, y = 2
```

Both variables have been declared using var and only after that we've set their values. As local > global, x and y are local in the closure, meaning the global x and y are untouched.

```js
x = 5; // == x = 5
console.log('--> 5:', `x = ${x}, y = ${y}`);

// Will print
//--> 5: x = 5, y = 2
```

This last line is explicit by itself.

You can test this and see the result [thanks to babel](<https://babeljs.io/repl/#?experimental=false&evaluate=true&loose=false&spec=false&code=var%20y%2C%20x%20%3D%20y%20%3D%201%20%2F%2F%3D%3D%20var%20x%3B%20var%20y%3B%20x%20%3D%20y%20%3D%201%0Aconsole.log('--%3E%201%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%0A%2F%2F%20Will%20print%0A%2F%2F--%3E%201%3A%20x%20%3D%201%2C%20y%20%3D%201%0A%0A%3B(()%20%3D%3E%20%7B%20%0A%20%20var%20x%20%3D%20y%20%3D%202%20%2F%2F%20%3D%3D%20var%20x%3B%20y%20%3D%202%3B%0A%20%20console.log('2.0%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%7D)()%0Aconsole.log('--%3E%202.1%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%0A%2F%2F%20Will%20print%0A%2F%2F2.0%3A%20x%20%3D%202%2C%20y%20%3D%202%0A%2F%2F--%3E%202.1%3A%20x%20%3D%201%2C%20y%20%3D%202%0A%0A%3B(()%20%3D%3E%20%7B%20%0A%20%20var%20x%2C%20y%20%3D%203%20%2F%2F%20%3D%3D%20var%20x%3B%20var%20y%20%3D%203%3B%0A%20%20console.log('3.0%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%7D)()%0Aconsole.log('--%3E%203.1%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%0A%2F%2F%20Will%20print%0A%2F%2F3.0%3A%20x%20%3D%20undefined%2C%20y%20%3D%203%0A%2F%2F--%3E%203.1%3A%20x%20%3D%201%2C%20y%20%3D%202%0A%0A%3B(()%20%3D%3E%20%7B%20%0A%20%20var%20y%2C%20x%20%3D%20y%20%3D%204%20%2F%2F%20%3D%3D%20var%20x%3B%20var%20y%3B%20x%20%3D%20y%20%3D%203%0A%20%20console.log('4.0%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%7D)()%0Aconsole.log('--%3E%204.1%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%0A%2F%2F%20Will%20print%0A%2F%2F4.0%3A%20x%20%3D%204%2C%20y%20%3D%204%0A%2F%2F--%3E%204.1%3A%20x%20%3D%201%2C%20y%20%3D%202%0A%0Ax%20%3D%205%20%2F%2F%20%3D%3D%20x%20%3D%205%0Aconsole.log('--%3E%205%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%0A%2F%2F%20Will%20print%0A%2F%2F--%3E%205%3A%20x%20%3D%205%2C%20y%20%3D%202>).

More informations available on the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var).

Special thanks to @kurtextrem for his collaboration :)!

title: How to `reduce()` arrays
tip-number: 48
tip-username: darul75
tip-username-profile: https://twitter.com/darul75
tip-tldr: Some reminders about using `reduce()`

-   /en/reminders-about-reduce-function-usage/

As written in documentation the `reduce()` method applies a function against an accumulator and each value of the array (from left-to-right) to reduce it to a single value.

### Signature

[reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) function accepts 2 parameters (M: mandatory, O: optional):

-   (M) a callback **reducer function** to be applied that deals with a pair of previous (result of previous computation) and next element until end of the list.
-   (O) an **initial value** to be used as the first argument to the first call of the callback.

So let's see a common usage and later a more sophisticated one.

### Common usage (accumulation, concatenation)

We are on Amazon website (prices in $) and our caddy is quite full, let's compute total.

```javascript
// my current amazon caddy purchases
var items = [{ price: 10 }, { price: 120 }, { price: 1000 }];

// our reducer function
var reducer = function add(sumSoFar, item) {
    return sumSoFar + item.price;
};

// do the job
var total = items.reduce(reducer, 0);

console.log(total); // 1130
```

Optional reduce function parameter was primitive integer type 0 in that first case, but it could have been an Object, an Array...instead of a primitive type,
but we will see that later.

Now, cool I received a discount coupon of 20$.

```javascript
var total = items.reduce(reducer, -20);

console.log(total); // 1110
```

### Advanced usage (combination)

This second usage example is inspired by Redux [combineReducers](http://redux.js.org/docs/api/combineReducers.html) function [source](https://github.com/reactjs/redux/blob/master/src/combineReducers.js#L93).

Idea behind is to separate reducer function into separate individual functions and at the end compute a new _single big reducer function_.

To illustrate this, let's create a single object literal with some reducers function able to compute total prices in different currency $, €...

```javascript
var reducers = {
    totalInDollar: function (state, item) {
        // specific statements...
        return (state.dollars += item.price);
    },
    totalInEuros: function (state, item) {
        return (state.euros += item.price * 0.897424392);
    },
    totalInPounds: function (state, item) {
        return (state.pounds += item.price * 0.692688671);
    },
    totalInYen: function (state, item) {
        return (state.yens += item.price * 113.852);
    }
    // more...
};
```

Then, we create a new swiss knife function

-   responsible for applying each partial reduce functions.
-   that will return a new callback reducer function

```javascript
var combineTotalPriceReducers = function (reducers) {
    return function (state, item) {
        return Object.keys(reducers).reduce(function (nextState, key) {
            reducers[key](state, item);
            return state;
        }, {});
    };
};
```

Now let's see how using it.

```javascript
var bigTotalPriceReducer = combineTotalPriceReducers(reducers);

var initialState = { dollars: 0, euros: 0, yens: 0, pounds: 0 };

var totals = items.reduce(bigTotalPriceReducer, initialState);

console.log(totals);

/*
Object {dollars: 1130, euros: 1015.11531904, yens: 127524.24, pounds: 785.81131152}
*/
```

I hope this approach can give you another idea of using reduce() function for your own needs.

Your reduce function could handle an history of each computation by instance as it is done in Ramdajs with [scan](http://ramdajs.com/docs/#scan) function

[JSFiddle to play with](https://jsfiddle.net/darul75/81tgt0cd/)

title: Easiest way to extract unix timestamp in JS
tip-number: 49
tip-username: nmrony
tip-username-profile: https://github.com/nmrony
tip-tldr: In Javascript you can easily get the unix timestamp

-   /en/extract-unix-timestamp-easily/

We frequently need to calculate with unix timestamp. There are several ways to grab the timestamp. For current unix timestamp easiest and fastest way is

```js
const dateTime = Date.now();
const timestamp = Math.floor(dateTime / 1000);
```

or

```js
const dateTime = new Date().getTime();
const timestamp = Math.floor(dateTime / 1000);
```

To get unix timestamp of a specific date pass `YYYY-MM-DD` or `YYYY-MM-DDT00:00:00Z` as parameter of `Date` constructor. For example

```js
const dateTime = new Date('2012-06-08').getTime();
const timestamp = Math.floor(dateTime / 1000);
```

You can just add a `+` sign also when declaring a `Date` object like below

```js
const dateTime = +new Date();
const timestamp = Math.floor(dateTime / 1000);
```

or for specific date

```js
const dateTime = +new Date('2012-06-08');
const timestamp = Math.floor(dateTime / 1000);
```

Under the hood the runtime calls `valueOf` method of the `Date` object. Then the unary `+` operator calls `toNumber()` with that returned value. For detailed explanation please check the following links

-   [Date.prototype.valueOf](http://es5.github.io/#x15.9.5.8)
-   [Unary + operator](http://es5.github.io/#x11.4.6)
-   [toNumber()](http://es5.github.io/#x9.3)
-   [Date Javascript MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
-   [Date.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse)

title: Helpful Console Logging Tricks
tip-number: 50
tip-username: zackhall
tip-username-profile: https://twitter.com/zthall
tip-tldr: Helpful logging techniques using coercion and conditonal breakpoints.

-   /en/helpful-console-log-hacks/

## Using conditional breakpoints to log data

If you wanted to log to the console a value each time a function is called, you can use conditional break points to do this. Open up your dev tools, find the function where you'd like to log data to the console and set a breakpoint with the following condition:

```js
console.log(data.value) && false;
```

A conditional breakpoint pauses the page thread only if the condition for the breakpoint evaluates to true. So by using a condition like console.log('foo') && false it's guaranteed to evaluate to false since you're putting the literal false in the AND condition. So this will not pause the page thread when it's hit, but it will log data to the console. This can also be used to count how many times a function or callback is called.

Here's how you can set a conditional breakpoint in [Edge](https://dev.windows.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/debugger/#setting-and-managing-breakpoints 'Managing Breakpoints in Edge'), [Chrome](https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints 'Managing Breakpoints in Chrome'), [Firefox](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint 'Managing Breakpoints in Firefox') and [Safari](https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Debugger/Debugger.html 'Managing Breakpoints in Safari').

## Printing a function variable to console

Have you ever logged a function variable to the console and weren't able to just view the function's code? The quickest way to see the function's code is to coerce it to a string using concatenation with an empty string.

```js
console.log(funcVariable + '');
```

title: DOM event listening made easy
tip-number: 51
tip-username: octopitus
tip-username-profile: https://github.com/octopitus
tip-tldr: An elegant and easy way to handle DOM events

-   /en/DOM-event-listening-made-easy/

Many of us are still doing these things:

-   `element.addEventListener('type', obj.method.bind(obj))`
-   `element.addEventListener('type', function (event) {})`
-   `element.addEventListener('type', (event) => {})`

The above examples all create new anonymous event handlers that can't be removed when no longer needed. This may cause performance problems or unexpected logic bugs, when handlers that you no longer need still get accidentally triggered through unexpected user interactions or [event bubbling](http://www.javascripter.net/faq/eventbubbling.htm).

Safer event-handling patterns include the following:

Use a reference:

```js
const handler = function () {
    console.log('Tada!');
};
element.addEventListener('click', handler);
// Later on
element.removeEventListener('click', handler);
```

Named function that removes itself:

```js
element.addEventListener('click', function click(e) {
    if (someCondition) {
        return e.currentTarget.removeEventListener('click', click);
    }
});
```

A better approach:

```js
function handleEvent(eventName, { onElement, withCallback, useCapture = false } = {}, thisArg) {
    const element = onElement || document.documentElement;

    function handler(event) {
        if (typeof withCallback === 'function') {
            withCallback.call(thisArg, event);
        }
    }

    handler.destroy = function () {
        return element.removeEventListener(eventName, handler, useCapture);
    };

    element.addEventListener(eventName, handler, useCapture);
    return handler;
}

// Anytime you need
const handleClick = handleEvent('click', {
    onElement: element,
    withCallback: (event) => {
        console.log('Tada!');
    }
});

// And anytime you want to remove it
handleClick.destroy();
```

title: Return Values with the 'new' Operator
tip-number: 52
tip-username: Morklympious
tip-username-profile: https://github.com/morklympious
tip-tldr: Understand what gets returned when using new vs. not using new.

-   /en/return-values-with-the-new-operator/

You're going to run into some instances where you'll be using `new` to allocate new objects in JavaScript. It's going to blow your mind unless you read this tip to understand what's happening behind the scenes.

The `new` operator in JavaScript is an operator that, under reasonable circumstances, returns a new instance of an object. Let's say we have a constructor function:

```js
function Thing() {
    this.one = 1;
    this.two = 2;
}

var myThing = new Thing();

myThing.one; // 1
myThing.two; // 2
```

**Note**: `this` refers to the new object created by `new`. Otherwise if `Thing()` is called without `new`, **no object is created**, and `this` is going to point to the global object, which is `window`. This means that:

1. You'll suddenly have two new global variables named `one` and `two`.
2. `myThing` is now undefined, since nothing is returned in `Thing()`.

Now that you get that example, here's where things get a little bit wonky. Let's say I add something to the constructor function, a little SPICE:

```js
function Thing() {
    this.one = 1;
    this.two = 2;

    return 5;
}

var myThing = new Thing();
```

Now, what does myThing equal? Is it 5? is it an object? Is it my crippled sense of self-worth? The world may never know!

Except the world does know:

```js
myThing.one; // 1
myThing.two; // 2
```

Interestingly enough, we never actually see the five that we supposedly 'returned' from our constructor. That's weird, isn't it? What are you doing function? WHERE'S THE FIVE? Let's try it with something else.

Let's return a non-primitive type instead, something like an object.

```js
function Thing() {
    this.one = 1;
    this.two = 2;

    return {
        three: 3,
        four: 4
    };
}

var myThing = new Thing();
```

Let's check it out. A quick console.log reveals all:

```js
console.log(myThing);
/*
  Object {three: 3, four: 4}
  What happened to this.one and this.two!?
  They've been stomped, my friend.
*/
```

**Here's where we learn:** When you invoke a function with the `new` keyword, you can set properties on it using the keyword `this` (but you probably already knew that). Returning a primitive value from a function you called with the `new` keyword will not return the value you specified, but instead will return the `this` instance of the function (the one you put properties on, like `this.one = 1;`).

However, returning a non-primitive, like an `object`, `array`, or `function` will stomp on the `this` instance, and return that non-primitive instead, effectively ruining all the hard work you did assigning everything to `this`.

title: Get File Extension
tip-number: 53
tip-username: richzw
tip-username-profile: https://github.com/richzw
tip-tldr: How to get the file extension more efficiently?

-   /en/get-file-extension/

categories: - en - javascript

---

### Question: How to get the file extension?

```javascript
var file1 = '50.xsl';
var file2 = '30.doc';
getFileExtension(file1); //returs xsl
getFileExtension(file2); //returs doc

function getFileExtension(filename) {
    /*TODO*/
}
```

### Solution 1: Regular Expression

```js
function getFileExtension1(filename) {
    return /[.]/.exec(filename) ? /[^.]+$/.exec(filename)[0] : undefined;
}
```

### Solution 2: String `split` method

```js
function getFileExtension2(filename) {
    return filename.split('.').pop();
}
```

Those two solutions couldnot handle some edge cases, here is another more robust solution.

### Solution3: String `slice`, `lastIndexOf` methods

```js
function getFileExtension3(filename) {
    return filename.slice(((filename.lastIndexOf('.') - 1) >>> 0) + 2);
}

console.log(getFileExtension3('')); // ''
console.log(getFileExtension3('filename')); // ''
console.log(getFileExtension3('filename.txt')); // 'txt'
console.log(getFileExtension3('.hiddenfile')); // ''
console.log(getFileExtension3('filename.with.many.dots.ext')); // 'ext'
```

_How does it works?_

-   [String.lastIndexOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf) method returns the last occurrence of the specified value (`'.'` in this case). Returns `-1` if the value is not found.
-   The return values of `lastIndexOf` for parameter `'filename'` and `'.hiddenfile'` are `-1` and `0` respectively. [Zero-fill right shift operator (>>>)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E%3E_%28Zero-fill_right_shift%29) will transform `-1` to `4294967295` and `-2` to `4294967294`, here is one trick to insure the filename unchanged in those edge cases.
-   [String.prototype.slice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) extracts file extension from the index that was calculated above. If the index is more than the length of the filename, the result is `""`.

### Comparison

| Solution                                  |                                          Paramters                                          |                                Results                                |
| ----------------------------------------- | :-----------------------------------------------------------------------------------------: | :-------------------------------------------------------------------: |
| Solution 1: Regular Expression            | ''<br> 'filename' <br> 'filename.txt' <br> '.hiddenfile' <br> 'filename.with.many.dots.ext' | undefined <br> undefined <br> 'txt' <br> 'hiddenfile' <br> 'ext' <br> |
| Solution 2: String `split`                | ''<br> 'filename' <br> 'filename.txt' <br> '.hiddenfile' <br> 'filename.with.many.dots.ext' |    '' <br> 'filename' <br> 'txt' <br> 'hiddenfile' <br> 'ext' <br>    |
| Solution 3: String `slice`, `lastIndexOf` | ''<br> 'filename' <br> 'filename.txt' <br> '.hiddenfile' <br> 'filename.with.many.dots.ext' |             '' <br> '' <br> 'txt' <br> '' <br> 'ext' <br>             |

### Live Demo and Performance

[Here](https://jsbin.com/tipofu/edit?js,console) is the live demo of the above codes.

[Here](http://jsperf.com/extract-file-extension) is the performance test of those 3 solutions.

### Source

[How can I get file extensions with JavaScript](http://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript)

title: How to use optional arguments in functions (with optional callback)
tip-number: 54
tip-username: alphashuro
tip-username-profile: https://github.com/alphashuro
tip-tldr: You can make function arguments and callback optional

-   /en/use-optional-arguments/

categories: - en - javascript

---

Example function where arguments 2 and 3 are optional

```javascript
function example(err, optionalA, optionalB, callback) {
    // retrieve arguments as array
    var args = new Array(arguments.length);
    for (var i = 0; i < args.length; ++i) {
        args[i] = arguments[i];
    }

    // first argument is the error object
    // shift() removes the first item from the
    // array and returns it
    err = args.shift();

    // if last argument is a function then its the callback function.
    // pop() removes the last item in the array
    // and returns it
    if (typeof args[args.length - 1] === 'function') {
        callback = args.pop();
    }

    // if args still holds items, these are
    // your optional items which you could
    // retrieve one by one like this:
    if (args.length > 0) optionalA = args.shift();
    else optionalA = null;
    if (args.length > 0) optionalB = args.shift();
    else optionalB = null;

    // continue as usual: check for errors
    if (err) {
        return callback && callback(err);
    }

    // for tutorial purposes, log the optional parameters
    console.log('optionalA:', optionalA);
    console.log('optionalB:', optionalB);
    console.log('callback:', callback);

    /* do your thing */
}

// ES6 with shorter, more terse code
function example(...args) {
    // first argument is the error object
    const err = args.shift();
    // if last argument is a function then its the callback function
    const callback = typeof args[args.length - 1] === 'function' ? args.pop() : null;

    // if args still holds items, these are your optional items which you could retrieve one by one like this:
    const optionalA = args.length > 0 ? args.shift() : null;
    const optionalB = args.length > 0 ? args.shift() : null;
    // ... repeat for more items

    if (err && callback) return callback(err);

    /* do your thing */
}

// invoke example function with and without optional arguments

example(null, 'AA');

example(null, function (err) {
    /* do something */
});

example(null, 'AA', function (err) {});

example(null, 'AAAA', 'BBBB', function (err) {});
```

### How do you determine if optionalA or optionalB is intended?

Design your function to require optionalA in order to accept optionalB

title: Create an easy loop using an array
tip-number: 55
tip-username: jamet-julien
tip-username-profile: https://github.com/jamet-julien
tip-tldr: Sometimes, we need to loop endlessly over an array of items, like a carousel of images or an audio playlist. Here's how to take an array and give it "looping powers”

-   /en/make-easy-loop-on-array/

categories: - en - javascript

---

Sometimes, we need to loop endlessly over an array of items, like a carousel of images or an audio playlist. Here's how to take an array and give it "looping powers":

```js
var aList = ['A', 'B', 'C', 'D', 'E'];

function make_looper(arr) {
    arr.loop_idx = 0;

    // return current item
    arr.current = function () {
        if (this.loop_idx < 0) {
            // First verification
            this.loop_idx = this.length - 1; // update loop_idx
        }

        if (this.loop_idx >= this.length) {
            // second verification
            this.loop_idx = 0; // update loop_idx
        }

        return arr[this.loop_idx]; //return item
    };

    // increment loop_idx AND return new current
    arr.next = function () {
        this.loop_idx++;
        return this.current();
    };
    // decrement loop_idx AND return new current
    arr.prev = function () {
        this.loop_idx--;
        return this.current();
    };
}

make_looper(aList);

aList.current(); // -> A
aList.next(); // -> B
aList.next(); // -> C
aList.next(); // -> D
aList.next(); // -> E
aList.next(); // -> A
aList.pop(); // -> E
aList.prev(); // -> D
aList.prev(); // -> C
aList.prev(); // -> B
aList.prev(); // -> A
aList.prev(); // -> D
```

Using the `%` ( Modulus ) operator is prettier.The modulus return division's rest ( ` 2 % 5 = 1` and ` 5 % 5 = 0`):

```js
var aList = ['A', 'B', 'C', 'D', 'E'];

function make_looper(arr) {
    arr.loop_idx = 0;

    // return current item
    arr.current = function () {
        this.loop_idx = this.loop_idx % this.length; // no verification !!
        return arr[this.loop_idx];
    };

    // increment loop_idx AND return new current
    arr.next = function () {
        this.loop_idx++;
        return this.current();
    };

    // decrement loop_idx AND return new current
    arr.prev = function () {
        this.loop_idx += this.length - 1;
        return this.current();
    };
}

make_looper(aList);

aList.current(); // -> A
aList.next(); // -> B
aList.next(); // -> C
aList.next(); // -> D
aList.next(); // -> E
aList.next(); // -> A
aList.pop(); // -> E
aList.prev(); // -> D
aList.prev(); // -> C
aList.prev(); // -> B
aList.prev(); // -> A
aList.prev(); // -> D
```

title: Copy to Clipboard
tip-number: 56
tip-username: loverajoel
tip-username-profile: https://twitter.com/loverajoel
tip-tldr: This week I had to create a common "Copy to Clipboard" button, I've never created one before and I want to share how I made it.
tip-writer-support: https://www.coinbase.com/loverajoel

-   /en/copy-to-clipboard/

categories: - en - javascript

---

This is a simple tip, this week I had to create a common "Copy to Clipboard" button, I've never created one before and I want to share how I made it.
It's easy, the bad thing is that we must add an `<input/>` with the text to be copied to the DOM. Then, we selected the content and execute the copy command with [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand).
`execCommand('copy')` will copy the actual selected content.

Also, this command that now is [supported](http://caniuse.com/#search=execCommand) by all the latest version of browsers, allows us to execute another system commands like `copy`, `cut`, `paste`, and make changes like fonts color, size, and much more.

```js
document.querySelector('#input').select();
document.execCommand('copy');
```

##### Playground

<div>
  <a class="jsbin-embed" href="http://jsbin.com/huhozu/embed?js,output">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.39.11"></script>
</div>

title: Comma operator in JS
tip-number: 57
tip-username: bhaskarmelkani
tip-username-profile: https://www.twitter.com/bhaskarmelkani
tip-tldr: When placed in an expression, it evaluates every expression from left to right and returns the last one.

-   /en/comma-operaton-in-js/

categories: - en - javascript

---

Apart from being just a delimiter, the comma operator allows you to put multiple statements in a place where one statement is expected.
Eg:-

```js
for (var i = 0, j = 0; i < 5; i++, j++, j++) {
    console.log('i:' + i + ', j:' + j);
}
```

Output:-

```js
i:0, j:0
i:1, j:2
i:2, j:4
i:3, j:6
i:4, j:8
```

When placed in an expression, it evaluates every expression from left to right and returns the right most expression.

Eg:-

```js
function a() {
    console.log('a');
    return 'a';
}
function b() {
    console.log('b');
    return 'b';
}
function c() {
    console.log('c');
    return 'c';
}

var x = (a(), b(), c());

console.log(x); // Outputs "c"
```

Output:-

```js
'a';
'b';
'c';

'c';
```

-   Note: The comma(`,`) operator has the lowest priority of all javascript operators, so without the parenthesis the expression would become: `(x = a()), b(), c();`.

##### Playground

<div>
  <a class="jsbin-embed" href="http://jsbin.com/vimogap/embed?js,console">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.39.11"></script>
</div>

title: Breaking or continuing loop in functional programming
tip-number: 58
tip-username: vamshisuram
tip-username-profile: https://github.com/vamshisuram
tip-tldr: A common task for us is iterate over a list looking for a value or values, but we can't return from inside a loop so we will have to iterate the whole array, even if the item we search is the first in the list, in this tip we will see how to short circuit with `.some` and `.every`.

-   /en/break-continue-loop-functional/

categories: - en - javascript

---

A common requirement of iteration is cancelation. Using `for` loops we can `break` to end iteration early.

```javascript
const a = [0, 1, 2, 3, 4];
for (var i = 0; i < a.length; i++) {
    if (a[i] === 2) {
        break; // stop the loop
    }
    console.log(a[i]);
}
//> 0, 1
```

Another common requirement is to close over our variables.

A quick approach is to use `.forEach` but
then we lack the ability to `break`. In this situation the closest we get is `continue` functionality through `return`.

```javascript
[0, 1, 2, 3, 4].forEach(function (val, i) {
    if (val === 2) {
        // how do we stop?
        return true;
    }
    console.log(val); // your code
});
//> 0, 1, 3, 4
```

The `.some` is a method on Array prototype. It tests whether some element in the array passes the test implemented by the provided function. If any value is returning true, then it stops executing. Here is a [MDN link](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/some) for more details.

An example quoted from that link

```javascript
const isBiggerThan10 = (numb) => numb > 10;

[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
```

Using `.some` we get iteration functionally similar to `.forEach` but with the ability to `break` through `return` instead.

```javascript
[0, 1, 2, 3, 4].some(function (val, i) {
    if (val === 2) {
        return true;
    }
    console.log(val); // your code
});
//> 0, 1
```

You keep returning `false` to make it `continue` to next item. When you return `true`, the loop will `break` and `a.some(..)` will `return` `true`.

```javascript
// Array contains 2
const isTwoPresent = [0, 1, 2, 3, 4].some(function (val, i) {
    if (val === 2) {
        return true; // break
    }
});
console.log(isTwoPresent);
//> true
```

Also there is `.every`, which can be used. We have to return the opposite boolean compared to `.some`.

##### Playground

<div>
  <a class="jsbin-embed" href="http://jsbin.com/jopeji/embed?js,console">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.39.11"></script>
</div>

title: ES6, var vs let
tip-number: 59
tip-username: richzw
tip-username-profile: https://github.com/richzw
tip-tldr: In this tip, I will introduce the block-scope difference between keyword var and let. Should I replace var by let? let's take a look

-   /en/keyword-var-vs-let/

categories: - en - javascript

---

### Overview

-   The scope of a variable defined with `var` is function scope or declared outside any function, global.
-   The scope of a variable defined with `let` is block scope.

```js
function varvslet() {
    console.log(i); // i is undefined due to hoisting
    // console.log(j); // ReferenceError: j is not defined

    for (var i = 0; i < 3; i++) {
        console.log(i); // 0, 1, 2
    }

    console.log(i); // 3
    // console.log(j); // ReferenceError: j is not defined

    for (let j = 0; j < 3; j++) {
        console.log(j);
    }

    console.log(i); // 3
    // console.log(j); // ReferenceError: j is not defined
}
```

### Difference Details

-   Variable Hoisting

    `let` will not hoist to the entire scope of the block they appear in. By contrast, `var` could hoist as below.

```js
{
    console.log(c); // undefined. Due to hoisting
    var c = 2;
}

{
    console.log(b); // ReferenceError: b is not defined
    let b = 3;
}
```

-   Closure in Loop

    `let` in the loop can re-binds it to each iteration of the loop, making sure to re-assign it the value from the end of the previous loop iteration, so it can be used to avoid issue with closures.

```js
for (var i = 0; i < 5; ++i) {
    setTimeout(function () {
        console.log(i); // output '5' 5 times
    }, 100);
}
```

After replacing `var` with `let`

```js
// print 1, 2, 3, 4, 5
for (let i = 0; i < 5; ++i) {
    setTimeout(function () {
        console.log(i); // output 0, 1, 2, 3, 4
    }, 100);
}
```

### Should I replace `var` with `let`?

> NO, `let` is the new block scoping `var`. That statement emphasizes that `let` should replace `var` only when `var` was already signaling
> block scoping stylistically. Otherwise, leave `var` alone. `let` improves scoping options in JS, not replaces. `var` is still a useful signal for variables that are used throughout the function.

### `let` compatibility

-   In server side, such as Node.js, you can safely use the `let` statement now.
-   In client side, through a transpiler (like [Traceur](https://github.com/google/traceur-compiler)), you can safely use the `let` statement. Otherwise, please consider the browser support [here](http://caniuse.com/#search=let)

### Playground

<div>
  <a class="jsbin-embed" href="http://jsbin.com/yumaye/embed?js,console">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.39.11"></script>
</div>

### More info

-   [Let keyword vs var keyword](http://stackoverflow.com/questions/762011/let-keyword-vs-var-keyword)
-   [For and against let](https://davidwalsh.name/for-and-against-let)
-   [Explanation of `let` and block scoping with for loops](http://stackoverflow.com/questions/30899612/explanation-of-let-and-block-scoping-with-for-loops/30900289#30900289).

title: Three useful hacks
tip-number: 60
tip-username: leandrosimoes
tip-username-profile: https://github.com/leandrosimoes
tip-tldr: Three very useful and syntax sugar hacks to speed up your development.

-   /en/three-useful-hacks/

categories: - en - javascript

---

#### Getting array items from behind to front

If you want to get the array items from behind to front, just do this:

```javascript
var newArray = [1, 2, 3, 4];

console.log(newArray.slice(-1)); // [4]
console.log(newArray.slice(-2)); // [3, 4]
console.log(newArray.slice(-3)); // [2, 3, 4]
console.log(newArray.slice(-4)); // [1, 2, 3, 4]
```

#### Short-circuits conditionals

If you have to execute a function just if a condition is `true`, like this:

```javascript
if (condition) {
    dosomething();
}
```

You can use a short-circuit just like this:

```javascript
condition && dosomething();
```

#### Set variable default values using "||"

If you have to set a default value to variables, you can simple do this:

```javascript
var a;

console.log(a); //undefined

a = a || 'default value';

console.log(a); //default value

a = a || 'new value';

console.log(a); //default value
```

title: Binding objects to functions
tip-number: 61
tip-username: loverajoel
tip-username-profile: https://github.com/loverajoel
tip-tldr: Understanding how to use `Bind` method with objects and functions in JavaScript

-   /en/binding-objects-to-functions/

categories: - en - javascript

---

More than often, we need to bind an object to a function's this object. JS uses the bind method when this is specified explicitly and we need to invoke desired method.

### Bind syntax

```js
fun.bind(thisArg[, arg1[, arg2[, ...]]])
```

## Parameters

**thisArg**

`this` parameter value to be passed to target function while calling the `bound` function.

**arg1, arg2, ...**

Prepended arguments to be passed to the `bound` function while invoking the target function.

**Return value**

A copy of the given function along with the specified `this` value and initial arguments.

### Bind method in action in JS

```js
const myCar = {
    brand: 'Ford',
    type: 'Sedan',
    color: 'Red'
};

const getBrand = function () {
    console.log(this.brand);
};

const getType = function () {
    console.log(this.type);
};

const getColor = function () {
    console.log(this.color);
};

getBrand(); // object not bind,undefined

getBrand(myCar); // object not bind,undefined

getType.bind(myCar)(); // Sedan

let boundGetColor = getColor.bind(myCar);
boundGetColor(); // Red
```

title: Working With Websocket Timeout
tip-number: 63
tip-username: loverajoel
tip-username-profile: https://github.com/loverajoel
tip-tldr: A trick to control the timeout

categories: - en - javascript

---

In case of established websocket connection, server or firewall could timeout and terminate the connection after a period of inactivity. To deal with this situation, we send periodic message to the server. To control the timeout we will add two functions in our code : one to make sure connection keep alive and another one to cancel the keep alive. Also we need a common `timerID` variable.
Let's have a look on implementation-

```js
var timerID = 0;
function keepAlive() {
    var timeout = 20000;
    if (webSocket.readyState == webSocket.OPEN) {
        webSocket.send('');
    }
    timerId = setTimeout(keepAlive, timeout);
}
function cancelKeepAlive() {
    if (timerId) {
        clearTimeout(timerId);
    }
}
```

Now as we have both of our desired function for the task, we will place `keepAlive()` function at the end of `onOpen()` method of websocket connection and `cancelKeepAlive()` function at the end of `onClose()` method of websocket connection.

Yes! We have perfectly implemented hack for websocket timeout problem.

title: 3 Array Hacks
tip-number: 64
tip-username: hassanhelfi
tip-username-profile: https://twitter.com/hassanhelfi
tip-tldr: Arrays are everywhere and with the new spread operators introduced in ECMAScript 6, you can do awesome things with them. In this post I will show you 3 useful tricks you can use when programming.

categories: - en - javascript

---

Arrays are everywhere in JavaScript and with the new [spread operators](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator) introduced in ECMAScript 6, you can do awesome things with them. In this post I will show you 3 useful tricks you can use when programming.

### 1. Iterating through an empty array

JavaScript arrays are sparse in nature in that there are a lot of holes in them. Try creating an array using the Array's constructor and you will see what I mean.

```javascript
> const arr = new Array(4);
[undefined, undefined, undefined, undefined]
```

You may find that iterating over a sparse array to apply a certain transformation is hard.

```javascript
> const arr = new Array(4);
> arr.map((elem, index) => index);
[undefined, undefined, undefined, undefined]
```

To solve this, you can use `Array.apply` when creating the array.

```javascript
> const arr = Array.apply(null, new Array(4));
> arr.map((elem, index) => index);
[0, 1, 2, 3]
```

### 2. Passing an empty parameter to a method

If you want to call a method and ignore one of its parameters, then JavaScript will complain if you keep it empty.

```javascript
> method('parameter1', , 'parameter3');
Uncaught SyntaxError: Unexpected token ,
```

A workaround that people usually resort to is to pass either `null` or `undefined`.

```javascript
> method('parameter1', null, 'parameter3') // or
> method('parameter1', undefined, 'parameter3');
```

I personally don't like using `null` since JavaScript treats it as an object and that's just weird. With the introduction of spread operators in ES6, there is a neater way of passing empty parameters to a method. As previously mentioned, arrays are sparse in nature and so passing empty values to it is totally okay. We'll use this to our advantage.

```javascript
> method(...['parameter1', , 'parameter3']); // works!
```

### 3. Unique array values

I always wonder why the Array constructor does not have a designated method to facilitate the use of unique array values. Spread operators are here for the rescue. Use spread operators with the `Set` constructor to generate unique array values.

```javascript
> const arr = [...new Set([1, 2, 3, 3])];
[1, 2, 3]
```

title: Tapping for quick debugging
tip-number: 65
tip-username: loverajoel
tip-username-profile: https://twitter.com/loverajoel
tip-tldr: This little beastie here is tap. A really useful function for quick-debugging chains of function calls, anonymous functions and, actually, whatever you just want to print.
tip-md-link: https://github.com/loverajoel/jstips/blob/master/_posts/en/javascript/2017-03-16-tapping-for-quick-debugging.md

categories: - en - javascript

---

This little beastie here is tap. A really useful function for quick-debugging
chains of function calls, anonymous functions and, actually, whatever you just
want to print.

```javascript
function tap(x) {
    console.log(x);
    return x;
}
```

Why would you use instead of good old `console.log`? Let me show you an example:

```javascript
bank_totals_by_client(bank_info(1, banks), table)
    .filter((c) => c.balance > 25000)
    .sort((c1, c2) => (c1.balance <= c2.balance ? 1 : -1))
    .map((c) => console.log(`${c.id} | ${c.tax_number} (${c.name}) => ${c.balance}`));
```

Now, suppose you're getting nothing from this chain (possibly an error).
Where is it failing? Maybe `bank_info` isn't returning anything, so we'll tap it:

```javascript
bank_totals_by_client(tap(bank_info(1, banks)), table);
```

Depending on our particular implementation, it might print something or not.
I'll assume the information that we got from our tapping was correct and
therefore, bank_info isn't causing anything.

We must then move on to the next chain, filter.

```javascript
            .filter(c => tap(c).balance > 25000)
```

Are we receiving any c's (clients actually)? If so, then bank_totals_by_client
works alright. Maybe it's the condition within the filter?

```javascript
            .filter(c => tap(c.balance > 25000))
```

Ah! Sweet, we see nothing but `false` printed, so there's no client with >25000,
that's why the function was returning nothing.

## (Bonus) A more advanced tap.

```javascript
function tap(x, fn = (x) => x) {
    console.log(fn(x));
    return x;
}
```

Now we're talking about a more advanced beast, what if we wanted to perform a
certain operation _prior_ to tapping? i.e, we want to access a certain object
property, perform a logical operation, etc. with our tapped object? Then we
call old good tap with an extra argument, a function to be applied at the moment
of tapping.

```javascript
tap(3, (x) => x + 2) === 3; // prints 5, but expression evaluates to true, why :-)?
```

title: Recursion, iteration and tail calls in JS
tip-number: 67
tip-username: loverajoel
tip-username-profile: https://twitter.com/loverajoel
tip-tldr: If you've been on the business for some time, you have, most likely, come across the definition of recursion, for which the factorial of a given number `n! = n * n - 1 * ... * 1` is a standard example...
tip-md-link: https://github.com/loverajoel/jstips/blob/master/_posts/en/javascript/2017-03-29-recursion-iteration-and-tail-calls-in-js.md

categories: - en - javascript

---

If you've been on the business for some time, you have, most likely,
come across the definition of recursion, for which the factorial of
a given number `n! = n * (n - 1) * ... * 1` is a standard example.

```javascript
function factorial(n) {
    if (n === 0) {
        return 1;
    }
    return n * factorial(n - 1);
}
```

The example shown above is but the most naive implementation of the
factorial function.

For the sake of completeness, let's look at how this executes for
`n = 6`:

-   factorial(6)
    -   6 \* factorial(5)
        -   5 \* factorial (4)
            -   4 \* factorial(3)
                -   3 \* factorial(2)
                    -   2 \* factorial(1)
                        -   1 \* factorial(0)
                            -   1
                        -   (resuming previous execution) 1 \* 1 = 1
                    -   (resuming...) 2 \* 1 = 2
                -   (...) 3 \* 2 = 6
            -   ... 4 \* 6 = 24
        -   5 \* 24 = 120
    -   6 \* 120 = 720
-   factorial(6) = 720

Now, we must be very cautious as to what's happening so we can understand
what is to come next.

When we invoke a function, several things happen at once. The location to
which we must return to after calling the function is saved, along with
the information of the current frame (i.e, the value of n). Then space is
allocated for the new function and a new frame is born.

This goes on and on, we keep stacking these frames and then we unwind that
stack, replacing function calls with values returned by them.

Another thing to notice is the shape of the process generated by our function.
You might not be surprised if I call this shape _recursive_. We have, thus, a
_recursive process_.

Let's take a look at a second implementation of this function.

```javascript
function factorial(n, res) {
    if (n === 0) {
        return res;
    }
    return factorial(n - 1, res * n);
}
```

We can encapsulate functionality a bit further by defining an inner function.

```javascript
function factorial(n) {
    function inner_factorial(n, res) {
        if (n === 0) {
            return res;
        }
        return inner_factorial(n - 1, res * n);
    }
    return inner_factorial(n, 1);
}
```

Let's take a look at how this gets executed:

-   factorial(6)
    -   inner anonymous function (iaf) gets called with (n = 6, res = 1)
        -   iaf(5, 1 \* 6)
            -   iaf(4, 6 \* 5)
                -   iaf(3, 30 \* 4)
                    -   iaf(2, 120 \* 3)
                        -   iaf(1, 360 \* 2)
                            -   iaf(0, 720)
                                -   720
                            -   720
                        -   720
                    -   720
                -   720
            -   720
        -   720
    -   iaf (6, 1) = 720
-   factorial(6) = 720

You might notice that we didn't need to perform any calculation after unwinding
the stack. We just returned a value. But, according to our rules, we had to save
the state as a stack frame, even if it weren't of any use later in the chain.

Our rules, however, are not applied to every language out there. In fact, in
Scheme it's mandatory for such chains to be optimized with tail call
optimization. This ensures that our stack is not filled with unnecessary frames.
Our previous calculation would look, thus, this way:

-   factorial(6)
-   iaf(6, 1)
-   iaf(5, 6)
-   iaf(4, 30)
-   iaf(3, 120)
-   iaf(2, 360)
-   iaf(1, 720)
-   iaf(0, 720)
-   720

Which in turns, looks an awfully lot like

```javascript
res = 1;
n = 6;

while (n > 1) {
    res = res * n;
    n--;
}
```

This means, we actually have an _iterative process_, even if we're using
recursion. How cool is that?

The good news is, this is a feature in ES6. As long as your recursive call
is in tail position and your function has strict mode, tail call optimization
will kick in and save you from having a `maximum stack size exceeded` error.

UPDATE Dec 1, 2017:
The only major browser with tail call optimization is Safari.<sup id="a1">1</sup> V8 has an implentation<sup>2</sup> but has not shipped it yet<sup>3</sup> for the reasons listed.

1: https://kangax.github.io/compat-table/es6/#test-proper_tail_calls_(tail_call_optimisation)

2: https://bugs.chromium.org/p/v8/issues/detail?id=4698

3: https://v8project.blogspot.com/2016/04/es6-es7-and-beyond.html

title: Why you should use Object.is() in equality comparison
tip-number: 68
tip-username: TarekAlQaddy
tip-username-profile: https://github.com/TarekAlQaddy
tip-tldr: A good solution for the looseness of equality comparisons in javascript

categories: - en - javascript

---

We all know that JavaScript is loosely typed and in some cases it fall behind specially when it comes to quality comparison with '==', comparing with '==' gives unexpected results due to whats called coercion or casting "converting one of the 2 operands to the other's type then compare".

```javascript
0 == ' '; //true
(null == undefined[1]) == //true
    true; //true
```

So they provided us with the triple equal operator '===' which is more strict and does not coerce operands, However comparing with '===' is not the best solution you can get:

```javascript
NaN === NaN; //false
```

The great news that in ES6 there is the new 'Object.is()' which is better and more precise it has the same features as '===' and moreover it behaves well in some special cases:

```javascript
Object.is(0, ' '); //false
Object.is(null, undefined); //false
Object.is([1], true); //false
Object.is(NaN, NaN); //true
```

Mozilla team doesn't think that Object.is is "stricter" than '===', they say that we should think of how this method deal with NaN, -0 and +0 but overall I think it is now a good practice in real applications.

Now this table illustrates..

![differences of operators in equality comparisons javascript](http://i.imgur.com/pCyqkLc.png)

## References:

[Equality comparisons and sameness](http://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness)

title: Picking and rejecting object properties
tip-number: 70
tip-username: loverajoel
tip-username-profile: https://github.com/loverajoel
tip-tldr: Sometimes we need to whitelist certain attributes from an object, say we've got an array representation of a database table and we need to `select` just a few fields for some function.

categories: - en - javascript

---

Sometimes we need to whitelist certain attributes from an object, say we've
got an array representation of a database table and we need to `select` just
a few fields for some function:

```javascript
function pick(obj, keys) {
    return keys.map((k) => (k in obj ? { [k]: obj[k] } : {})).reduce((res, o) => Object.assign(res, o), {});
}

const row = {
    'accounts.id': 1,
    'client.name': 'John Doe',
    'bank.code': 'MDAKW213'
};

const table = [row, { 'accounts.id': 3, 'client.name': 'Steve Doe', 'bank.code': 'STV12JB' }];

pick(row, ['client.name']); // Get client name

table.map((row) => pick(row, ['client.name'])); // Get a list of client names
```

There's a bit of skulduggery going on in pick. First, we `map` a function over
the keys that will return, each time, an object with only the attribute pointed
by the current key (or an empty object if there's no such attribute in the
object). Then, we `reduce` this collection of single-attribute objects by
merging the objects.

But what if we want to `reject` the attributes? Well, the function changes a bit

```javascript
function reject(obj, keys) {
    return Object.keys(obj)
        .filter((k) => !keys.includes(k))
        .map((k) => Object.assign({}, { [k]: obj[k] }))
        .reduce((res, o) => Object.assign(res, o), {});
}

// or, reusing pick
function reject(obj, keys) {
    const vkeys = Object.keys(obj).filter((k) => !keys.includes(k));
    return pick(obj, vkeys);
}

reject({ a: 2, b: 3, c: 4 }, ['a', 'b']); // => {c: 4}
```

title: Protocols for the Brave
tip-number: 73
tip-username: loverajoel
tip-username-profile: https://github.com/loverajoel
tip-tldr: You might have heard about the old ways gaining hype recently, and we don't mean praying to the gods of the north. Today we're introducing a feature found in Clojure which allows you to define interfaces for your classes.

categories: - en - javascript

---

You might have heard about the old ways gaining hype recently, and we don't
mean praying to the gods of the north.

Functional programming is the rediscovered toy which is bringing some sanity
to the world of mutable state and global bindings.

Today we're introducing a feature found in Clojure which allows you to define
interfaces for your classes. Let's look at one-off implementation:

```javascript
const protocols = (...ps) => ps.reduce((c, p) => p(c), Object);

const Mappable = (klass) => {
    return class extends klass {
        map() {
            throw 'Not implemented';
        }
    };
};

const Foldable = (klass) => {
    return class extends klass {
        fold() {
            throw 'Not implemented';
        }
    };
};

class NaturalNumbers extends protocols(Mappable, Foldable) {
    constructor() {
        super();
        this.elements = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    }

    map(f) {
        return this.elements.map(f);
    }

    fold(f) {
        return this.elements.reduce(f, this.elements, 0);
    }
}
```

Yes, we're building a chain of class inheritance up there with that reduce boy.
It's pretty cool. We're doing it dynamically! You see, each protocol receives
a base class (Object) and extends it somehow returning the new class. The idea
is similar to that of interfaces.

We supply method signatures for the protocol and make sure we provide
implementations for it on our base classes.

What's so cool about it? We get to write things like these:

```javascript
const map = (f) => (o) => o.map(f);
const fold = (f) => (o) => o.fold(f);
const compose = (...fns) => fns.reduce((acc, f) => (x) => acc(f(x)), id);
```

Ok, maybe we could have written those two functions without the above fuzz but,
now that we know `NaturalNumbers` are `Mappable`, we can call `map` on them
and trust it will return the right result. Furthermore, with our third function,
we can _compose_ any number of operations defined in protocols cleanly:

```javascript
const plus1 = (x) => x + 1;
const div5 = (x) => x / 5;
const plus_then_div = compose(map(div5), map(plus1));
console.log(plus_then_div(new NaturalNumbers()));
// => [ 0.4, 0.6, 0.8, 1, 1.2, 1.4, 1.6, 1.8, 2 ]
```

More important, if we know that an object of ours is `Mappable`, we know `map`
will work on it. Protocols gives us an idea of what we can do with an object and
help us abstract common operations between data types, thus reducing the
overhead of dealing with a hundred functions.

What is easier? To have a hundred functions for every different object or ten
functions that work on a hundred objects?

title: Improving your Async functions with WebWorkers
tip-number: 74
tip-username: loverajoel
tip-username-profile: https://github.com/loverajoel
tip-tldr: JS runs in a single thread in the browser, this is the truth. In this tip I'll show you how to unleash the full power of asynchronous processing with Web Workers.

categories: - en - javascript

---

> JS shall have but one Thread (in the browser at least)
>
> -- Thus spoke the master programmer.

JS runs in a single thread in the browser, this is the truth.

Somewhere in its own universe, there exists a Queue which holds messages
and functions associated with them.

Every time an event (i.e, a user clicks a button) is registered, there's
a runtime check to see whether there's any listener attached to that event.
If there's one, it will enqueue the message. Otherwise, it will be lost
forever.

Now, our event loop processes one message at a time, meaning that if you
do some CPU intensive operation (i.e, number crunching) this will indeed
'block' the one Thread, rendering our application useless.

This is true even for `async` functions, which will be queued as soon as
invoked and executed as soon as possible (immediately given the queue is
empty).

I/O such as requests to external resources are non-blocking though, so you
can request a file as large as you want without fear. The associated
callback, however, will show the same characteristics of an `async` function.

Strategies for processing lots of data vary a lot. You could partition data
and set timeouts for processing bits of it a time for example. But to unleash
the full power of asynchronous processing, you should use Web Workers.

To do so, you separate the processing part in a different file (possibly
'my_worker.js'), create a worker with `newWorker = new Worker('my_worker.js');`
and offload the processing to it.

```javascript
// my_worker.js
const do_a_lot_of_processing = (data) => {
    ....
}

onmessage = (e) => {
    postMessage(do_a_lot_of_processing(e.data));
}

// main.js
const myWorker = new Worker('my_worker.js');

async function get_useful_data() {
    const raw_data = await request(some_url);
    myWorker.postmessage(raw_data);
}

const show_data => (e) {
    const data = e.data;
    ...
}

myWorker.onmessage(show_data);
get_useful_data();
```

Your mileage may vary of course, and there are many abstractions that can be
built upon this model.

title: Closures inside loops
tip-number: 76
tip-username: loverajoel
tip-username-profile: https://github.com/loverajoel
tip-tldr: Closure in a loop is an interesting topic and this is the tip to be a master of it

categories: - en - javascript

---

If you ever come across the likes of

```javascript
var funcs = [];
for (var i = 0; i < 3; i++) {
    funcs[i] = function () {
        console.log('i value is ' + i);
    };
}

for (var k = 0; k < 3; k++) {
    funcs[k]();
}
```

You will notice that the expected output of

```
i value is 0
i value is 1
i value is 2
```

Doesn't match the actual output which will resemble

```
i value is 3
i value is 3
i value is 3
```

This is because of how the capturing mechanism of closures work and how `i` is represented internally.

To solve this situation you can do as follows:

```javascript
for (var i = 0; i < 3; i++) {
    funcs[i] = (function (value) {
        console.log('i value is ' + i);
    })(i);
}
```

Which effectively copies i by value by handing it to our closure or

```javascript
for (let i = 0; i < 3; i++) {
    funcs[i] = function () {
        console.log('i value is ' + i);
    };
}
```

Where `let` scopes the variable to our `for` loop and produces a new value each iteration, thus `i` will be bound to different values on our closures as expected.

title: Immutable structures and cloning
tip-number: 78
tip-username: loverajoel
tip-username-profile: https://github.com/loverajoel
tip-tldr: Object cloning is a tricky, full of edge-cases, endeavor. The reason is simple enough. Objects maintain internal state, and that is much abused. There are countless techniques, or better phrased, countless derivations of the same technique.

categories: - en - javascript

---

Object cloning is a tricky, full of edge-cases, endeavor. The reason is simple
enough. Objects maintain internal state, and that is much abused. There are
countless techniques, or better phrased, countless derivations of the same
technique.

Cloning an object is an indicator that your application is growing, and that
you've got a complex object which you'd want to treat as an immutable value, i.e
operate on it while maintaining a previous state.

If the object is in your control, you're lucky. A bit of refactoring here and
there might lead you to a point where you avoid the problem entirely by
rethinking your object's structure and behavior.

With the rediscovering of functional programming techniques, a myriad of debates
have been held about immutable structures and how they offer exactly what you
seek for. Mutable state is the root of all evil, some might argue.

We encourage to reach **ImmutableJS** by Facebook which provides a nice set of
immutable structures free for use. By rethinking your object's inner workings
and separating state from behavior, making each function consume a state to
produce a new one - much like the Haskell's **State** monad - you will
reduce many nuisances.

If the object is outside your control, you're partly out of luck. This can be
circumvented by creating convoluted computations where you solve for yourself
circular references and reach enlightenment. However, as you're using external
objects anyways, and they must come, as their name says, from external sources,
then you might be more comfortable handling the matter to yet another external
library and focus on what matters the most, i.e, your application itself.

One such library is [pvorb/clone](https://github.com/pvorb/clone), which has a
very simple API. To clone an object you only have to

```javascript
var clone = require('clone');

var a = { foo: { bar: 'baz' } };
var b = clone(a);
a.foo.bar = 'foo';
console.log(a); // {foo: {bar: 'foo'}}
console.log(b); // {foo: {bar: 'baz'}}
```

There are, of course, many more libraries that allow you to do the same such as
[Ramda](http://ramdajs.com/docs/#clone), [lodash.clonedeep](https://www.npmjs.com/package/lodash.clonedeep)
and [lodash.clone](https://www.npmjs.com/package/lodash.clone).

As an end note, if you are serious about dealing with immutable structures, you
might want to check **ClojureScript** or (for those that feel that Haskell's
worth a shot) **PureScript**.

We neither encourage, nor condemn, the use of self made cloning mechanisms. Only
noting that considerable work has been done on the area and that you'd probably
be better of reusing than reinventing the wheel.

title: Looping over arrays
tip-number: 79
tip-username: loverajoel
tip-username-profile: https://github.com/loverajoel
tip-tldr: There's a few methods for looping over arrays in Javascript. We'll start with the classical ones and move towards additions made to the standard.

categories: - en - javascript

---

# Looping over arrays

There's a few methods for looping over arrays in Javascript. We'll start
with the classical ones and move towards additions made to the standard.

## while

```javascript
let index = 0;
const array = [1, 2, 3, 4, 5, 6];

while (index < array.length) {
    console.log(array[index]);
    index++;
}
```

## for (classical)

```javascript
const array = [1, 2, 3, 4, 5, 6];
for (let index = 0; index < array.length; index++) {
    console.log(array[index]);
}
```

## forEach

```javascript
const array = [1, 2, 3, 4, 5, 6];

array.forEach(function (current_value, index, array) {
    console.log(`At index ${index} in array ${array} the value is ${current_value}`);
});
// => undefined
```

## map

The last construct was useful, however, it doesn't return a new array which might
be undesirable for your specific case. `map` solves this by applying a function
over every element and then returning the new array.

```javascript
const array = [1, 2, 3, 4, 5, 6];
const square = (x) => Math.pow(x, 2);
const squares = array.map(square);
console.log(`Original array: ${array}`);
console.log(`Squared array: ${squares}`);
```

The full signature for `map` is `.map(current_value, index, array)`.

## reduce

From MDN:

> The reduce() method applies a function against an accumulator and each element
> in the array (from left to right) to reduce it to a single value.

```javascript
const array = [1, 2, 3, 4, 5, 6];
const sum = (x, y) => x + y;
const array_sum = array.reduce(sum, 0);
console.log(`The sum of array: ${array} is ${array_sum}`);
```

## filter

Filters elements on an array based on a boolean function.

```javascript
const array = [1, 2, 3, 4, 5, 6];
const even = (x) => x % 2 === 0;
const even_array = array.filter(even);
console.log(`Even numbers in array ${array}: ${even_array}`);
```

## every

Got an array and want to test if a given condition is met in every element?

```javascript
const array = [1, 2, 3, 4, 5, 6];
const under_seven = (x) => x < 7;

if (array.every(under_seven)) {
    console.log('Every element in the array is less than 7');
} else {
    console.log('At least one element in the array was bigger than 7');
}
```

## some

Test if at least one element matches our boolean function.

```javascript
const array = [1, 2, 3, 9, 5, 6, 4];
const over_seven = (x) => x > 7;

if (array.some(over_seven)) {
    console.log('At least one element bigger than 7 was found');
} else {
    console.log('No element bigger than 7 was found');
}
```

title: Hash maps without side effects
tip-number: 73
tip-username: bhaskarmelkani
tip-username-profile: https://www.twitter.com/bhaskarmelkani
tip-tldr: Create hash maps(without side effects) using `Object.create(null)`.

categories: - en - javascript

---

# Hash maps without side effects

When you want to use javascript object as a hash map(purely for storing data), you might want to create it as follows.

```javascript
const map = Object.create(null);
```

When creating a map using object literal(`const map = {}`), the map inherits properties from Object by default. It is equivalent to `Object.create(Object.prototype)`.

But by doing `Object.create(null)`, we explicitly specify `null` as its prototype. So it have absolutely no properties, not even constructor, toString, hasOwnProperty, etc. so you're free to use those keys in your data structure if you need to.

## Rationale:

```javascript
const dirtyMap = {};
const cleanMap = Object.create(null);

dirtyMap.constructor    // function Object() { [native code] }

cleanMap.constructor    // undefined

// Iterating maps

const key;
for(key in dirtyMap){
  if (dirtyMap.hasOwnProperty(key)) {   // Check to avoid iterating over inherited properties.
    console.log(key + " -> " + dirtyMap[key]);
  }
}

for(key in cleanMap){
  console.log(key + " -> " + cleanMap[key]);    // No need to add extra checks, as the object will always be clean
}
```

## Notes:

-   Object.create() was introduced in ES5: [Compatibility](http://kangax.github.io/compat-table/es5/)
-   ES6 introduced some new structures: [Map](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map), [WeakMap](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap), [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and [Weak Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet)

title: Creating immutable objects in native JavaScript
tip-number: 74
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: With the latest versions of JavaScript it's possible to create immutable objects. I'll walk you through how to do it in three different ways.

categories: - en - javascript

---

# Creating immutable objects in native JavaScript

Javascript it's a flexible language, you can redefine anything. But when projects get complex we find problems with mutable data structures.
With the latest versions of JavaScript this situation changed. Now it's possible to create immutable objects. I'll walk you through how to do it in three different ways.

### Wait, what means immutable?

> Immutability in object means we don't want our objects to change in any ways once we create them i.e make them read-only type.

Let's suppose we need to define a car [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) and use its properties to perform operations throughout our entire project.
We can't allow modifying by mistake any data.

```
const myTesla = {
	maxSpeed: 250,
	batteryLife: 300,
	weight: 023
};
```

## [Object.preventExtensions()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions)

This method prevents the addition of new properties to our existing object.
`preventExtensions()` is a irreversible operation. We can never add extra properties to the object again.

```
Object.isExtensible(myTesla); // true
Object.preventExtensions(myTesla);
Object.isExtensible(myTesla); // false
myTesla.color = 'blue';
console.log(myTesla.color) // undefined
```

## [Object.seal()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal)

It prevents additions or deletion of properties. `seal()` also prevents the modification of property descriptors.

```
Object.isSealed(myTesla); // false
Object.seal(myTesla);
Object.isSealed(myTesla); // true

myTesla.color = 'blue';
console.log(myTesla.color); // undefined

delete myTesla.batteryLife; // false
console.log(myTesla.batteryLife); // 300

Object.defineProperty(myTesla, 'batteryLife'); // TypeError: Cannot redefine property: batteryLife
```

## [Object.freeze()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)

It does the same that `Object.seal()` plus it makes the properties non-writable.

```
Object.isFrozen(myTesla); // false
Object.freeze(myTesla);
Object.isFrozen(myTesla); // true

myTesla.color = 'blue';
console.log(myTesla.color); // undefined

delete myTesla.batteryLife;
console.log(myTesla.batteryLife); // 300

Object.defineProperty(myTesla, 'batteryLife'); // TypeError: Cannot redefine property: batteryLife

myTesla.batteryLife = 400;
console.log(myTesla.batteryLife); // 300
```

## Extra

Use `strict mode` if you want to throw an error when trying to modify an immutable object.

title: What is Functional Inheritance?
tip-number: 75
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: Functional inheritance is the process of inheriting features by applying an augmenting function to an object instance.

categories: - en - javascript

---

Functional inheritance is the process of inheriting features by applying an augmenting function to an object instance. The function supplies a closure scope which you can use to keep some data private. The augmenting function uses dynamic object extension to extend the object instance with new properties and methods.

Functional mixins are composable factory functions that add properties and behaviors to objects like stations in an assembly line.

```javascript
// Base object constructor function
function Animal(data) {
    var that = {}; // Create an empty object
    that.name = data.name; // Add it a "name" property
    return that; // Return the object
}

// Create achild object, inheriting from the base Animal
function Cat(data) {
    // Create the Animal object
    var that = Animal(data);
    // Extend base object
    that.sayHello = function () {
        return "Hello, I'm " + that.name;
    };
    return that;
}

// Usage
var myCat = Cat({ name: 'Rufi' });
console.log(myCat.sayHello());
// Output: "Hello, I'm Rufi"
```

title: What is a currying function?
tip-number: 75
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: A currying function is a function that takes multiple arguments and turns it into a sequence of functions having only one argument at a time.

categories: - en - javascript

---

A currying function is a function that takes multiple arguments and turns it into a sequence of functions having only one argument at a time.

In this way, an n-ary function becomes a unary function, and the last function returns the result of all the arguments together in a function.

```javascript
// Normal definition
function multiply(a, b, c) {
    return a * b * c;
}
console.log(multiply(1, 2, 3));
// Output: 6

// Simple curry function definition
function multiply(a) {
    return (b) => {
        return (c) => {
            return a * b * c;
        };
    };
}
console.log(multiply(1)(2)(3));
// Output: 6
```

### Further readings:

-   [Currying in JavaScript](https://dev.to/suprabhasupi/currying-in-javascript-1k3l)
-   [Lodash curry](https://lodash.com/docs/#curry)
-   [JavaScript currying](http://zetcode.com/javascript/currying/)

title: What is the Temporal Dead Zone?
tip-number: 76
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: Temporal Dead Zone is a JavaScript behavior while using variables declared using `let` and `const` keywords.

categories: - en - javascript

---

Temporal Dead Zone is a JavaScript behavior while using variables declared using `let` and `const` keywords. Since the keywords are block-scoped, the variables declared these keywords could not be accessed before the declaration, and then you will have to witness where variables will be said to be `undefined`.

```javascript
function myFunc() {
    console.log(greeting);
    var greeting = 'Hello World!';
}
myFunc(); // Output: undefined

function myFunc() {
    console.log(greeting);
    let greeting = 'Hello World!';
}
myFunc(); // Output: ReferenceError: greeting is not defined

function myFunc() {
    console.log(greeting);
    const greeting = 'Hello World!';
}
myFunc(); // Output: ReferenceError: greeting is not defined
```

title: What is the difference between Target and currentTarget in the event context?
tip-number: 77
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: target refers to the element that triggers an event. currentTarget to the element that the event listener is listening on.

categories: - en - javascript

---

`target` refers to the DOM element that triggers an event. Otherwise, `currentTarget` refers to the DOM element that the event listener is listening on.

```html
<ul class="todo-list">
    <li class="item">Walk your dog</li>
</ul>
```

```js
const list = document.querySelector('.todo-list');

list.addEventListener('click', (e) => {
    console.log(e.target);
    // Output: <li class="item">Walk your dog</li>
    console.log(e.currentTarget);
    // Output: <ul class="todo-list"></ul>
});
```

title: What is a spread operator?
tip-number: 78
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: The spread operator is a useful syntax for manipulating arrays and objects.

categories: - en - javascript

---

The spread operator in JavaScript is a useful syntax for adding elements to an array, combining arrays into one larger one, spreading an array inside the arguments of a function, and more.

```js
// Concatenating arrays and objects
let arr1 = [1, 2, 3];
let arr2 = [4, 5];
let newArray = [...arr1, ...arr2];
console.log(newArray);
// Output: [ 1, 2, 3, 4, 5 ]

// Copying array elements
let arr = ['a', 'b', 'c'];
let newArray = [...arr];
console.log(newArray);
// Output: ["a", "b", "c"]

// Expanding arrays
let arr = ['a', 'b'];
let newArray = [...arr, 'c', 'd'];
console.log(newArray);
// Output: ["a", "b", "c", "d"]

// Merging objects
const userBasic = {
    name: 'Jen',
    age: 22
};
const userMoreInfo = {
    country: 'Argentina',
    city: 'Córdoba'
};
const user = { ...userBasic, ...userMoreInfo };
// Output: {  name: "Jen",  age: 22, country: "Argentina", city: "Córdoba" }
```

title: What is a void operator?
tip-number: 79
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: The void operator returns an undefined value from an evaluated expression

categories: - en - javascript

---

The `void` operator returns an `undefined` value from an evaluated expression, or in other words; the `void` operator specifies an expression to be evaluated without returning a value. It is commonly used in client-side JavaScript, where the browser should not display the value.

```js
function getYear() {
    return 2020;
}

console.log(getYear());
// Output: 2020

console.log(void getYear());
// Output: undefined

// Useful use case
button.onclick = () => void getYear();
```

---
layout: post

title: What is the promise executor?
tip-number: 80
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: The method received as an argument for the promise.

categories:
    - en
    - javascript
---

All `Promise` instances accept a method as an argument called the executor. This executor takes two methods as arguments: resolve and reject. Within the executor, if resolve is called, the `Promise` instance becomes fulfilled. If an exception is thrown, reject is called instead, and the `Promise` instance becomes rejected.

```js
const executor = (resolve, reject) => {
    setTimeout(() => resolve("I'm done"), 1000);
};

new Promise(executor).then((result) => {
    console.log(result);
    // Output after 1000ms: I'm done
});
```

---
layout: post

title: What is the JavaScript ternary operator?
tip-number: 81
tip-username: loverajoel
tip-username-profile: https://www.twitter.com/loverajoel
tip-tldr: The ternary operator is a shortcut for the if statement.

categories:
    - en
    - javascript
---

The ternary operator is a shortcut for the `if` statement. It consists of three operands; a question mark, a condition, and an expression to execute if the condition is true, followed by a colon and another expression to execute if it's false.

```js
let age = 26;

// condition ? expression if true : expression if false
let drink = age >= 21 ? 'Beer' : 'Juice';

console.log(drink); // "Beer"

// Equivalent to:
let drink;
if (age >= 21) {
    drink = 'Beer';
} else {
    drink = 'Juice';
}

console.log(drink); // "Beer"
```

# About the JavaScript reference

The JavaScript reference serves as a repository of facts about the JavaScript language. The entire language is described here in detail. As you write JavaScript code, you'll refer to these pages often (thus the title "JavaScript reference"). If you're learning JavaScript, or need help understanding some of its capabilities or features, check out the [JavaScript guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide).

The JavaScript language is intended to be used within some larger environment, be it a browser, server-side scripts, or similar. For the most part, this reference attempts to be environment-agnostic and does not target a web browser environment.

## Where to find JavaScript information

JavaScript documentation of core language features (pure [ECMAScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources), for the most part) includes the following:

-   The [JavaScript guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
-   The [JavaScript reference](index)

If you are new to JavaScript, start with the [guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide). Once you have a firm grasp of the fundamentals, you can use the [reference](index) to get more details on individual objects and language constructs.

## Structure of the reference

In the JavaScript reference you can find the following chapters:

[Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)  
This chapter documents all the JavaScript standard built-in objects, along with their methods and properties.

[Statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)  
JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.

[Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)  
This chapter documents all the JavaScript language operators, expressions and keywords.

Functions  
Chapter about JavaScript functions.

[Classes](classes)  
Chapter about JavaScript classes introduced in ECMAScript 2015.

[Errors](errors)  
Chapter about specific errors, exceptions and warnings thrown by JavaScript.

[New in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript)  
Chapter about JavaScript version history.

### More reference pages

-   [Deprecated and obsolete features](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features)
-   [Lexical grammar](lexical_grammar)
-   [Data types and data structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/About" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/About</a>

# Math.abs()

The `Math.abs()` function returns the absolute value of a number. That is, it returns `x` if `x` is positive or zero, and the negation of `x` if `x` is negative.

## Syntax

    Math.abs(x)

### Parameters

`x`  
A number.

### Return value

The absolute value of the given number.

## Description

Because `abs()` is a static method of `Math`, you always use it as `Math.abs()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Behavior of Math.abs()

Passing an empty object, an array with more than one member, a non-numeric string or [`undefined`](../undefined)/empty variable returns [`NaN`](../nan). Passing [`null`](../null), an empty string or an empty array returns 0.

    Math.abs('-1');     // 1
    Math.abs(-2);       // 2
    Math.abs(null);     // 0
    Math.abs('');       // 0
    Math.abs([]);       // 0
    Math.abs([2]);      // 2
    Math.abs([1,2]);    // NaN
    Math.abs({});       // NaN
    Math.abs('string'); // NaN
    Math.abs();         // NaN

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.abs">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Math.abs' in that specification.</span></a></td></tr></tbody></table>

`abs`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.ceil()`](ceil)
-   [`Math.floor()`](floor)
-   [`Math.round()`](round)
-   [`Math.sign()`](sign)
-   [`Math.trunc()`](trunc)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/abs" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/abs</a>

# Math.acos()

The `Math.acos()` function returns the arccosine (in radians) of a number, that is

∀*x* ∈ \[ − 1; 1\], `Math.acos` ` (``x``) ` = arccos (_x_) = the unique *y* ∈ \[0; *π*\] such that cos (_y_) = *x*

## Syntax

    Math.acos(x)

### Parameters

`x`  
A number representing a cosine, where `x` is between `-1` and `1`.

### Return value

The arccosine (angle in radians) of the given number if it's between `-1` and `1`; otherwise, [`NaN`](../nan).

## Description

The `Math.acos()` method returns a numeric value between 0 and π radians for `x` between -1 and 1. If the value of `x` is outside this range, it returns [`NaN`](../nan).

Because `acos()` is a static method of `Math`, you always use it as `Math.acos()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.acos()

    Math.acos(-2);  // NaN
    Math.acos(-1);  // 3.141592653589793
    Math.acos(0);   // 1.5707963267948966
    Math.acos(0.5); // 1.0471975511965979
    Math.acos(1);   // 0
    Math.acos(2);   // NaN

For values less than -1 or greater than 1, `Math.acos()` returns [`NaN`](../nan).

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.acos">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.acos</span></a></td></tr></tbody></table>

`acos`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.asin()`](asin)
-   [`Math.atan()`](atan)
-   [`Math.atan2()`](atan2)
-   [`Math.cos()`](cos)
-   [`Math.sin()`](sin)
-   [`Math.tan()`](tan)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/acos" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/acos</a>

# Math.acosh()

The `Math.acosh()` function returns the hyperbolic arc-cosine of a number, that is

∀*x* ≥ 1, `Math.acosh` ` (``x``) ` = arcosh (_x_) = the unique *y* ≥ 0 such that cosh (_y_) = *x*

## Syntax

    Math.acosh(x)

### Parameters

`x`  
A number.

### Return value

The hyperbolic arc-cosine of the given number. If the number is less than **1**, [`NaN`](../nan).

## Description

Because `acosh()` is a static method of `Math`, you always use it as `Math.acosh()`, rather than as a method of a `Math` object you created (`Math` is no constructor).

## Examples

### Using Math.acosh()

    Math.acosh(-1);  // NaN
    Math.acosh(0);   // NaN
    Math.acosh(0.5); // NaN
    Math.acosh(1);   // 0
    Math.acosh(2);   // 1.3169578969248166

For values less than 1 `Math.acosh()` returns [`NaN`](../nan).

## Polyfill

For all *x* ≥ 1, we have $\\operatorname{arcosh}(x) = \\ln\\left( {x + \\sqrt{x^{2} - 1}} \\right)$ and so this can be emulated with the following function:

    Math.acosh = Math.acosh || function(x) {
      return Math.log(x + Math.sqrt(x * x - 1));
    };

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.acosh">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.acosh</span></a></td></tr></tbody></table>

`acosh`

38

12

25

No

25

8

38

38

25

25

8

3.0

## See also

-   [`Math.asinh()`](asinh)
-   [`Math.atanh()`](atanh)
-   [`Math.cosh()`](cosh)
-   [`Math.sinh()`](sinh)
-   [`Math.tanh()`](tanh)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/acosh" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/acosh</a>

# Atomics.add()

The static ` Atomics``.add() ` method adds a given value at a given position in the array and returns the old value at that position. This atomic operation guarantees that no other write happens until the modified value is written back.

## Syntax

    Atomics.add(typedArray, index, value)

### Parameters

`typedArray`  
An integer typed array. One of [`Int8Array`](../int8array), [`Uint8Array`](../uint8array), [`Int16Array`](../int16array), [`Uint16Array`](../uint16array), [`Int32Array`](../int32array), [`Uint32Array`](../uint32array), [`BigInt64Array`](../bigint64array), or [`BigUint64Array`](../biguint64array).

`index`  
The position in the `typedArray` to add a `value` to.

`value`  
The number to add.

### Return value

The old value at the given position (`typedArray[index]`).

### Exceptions

-   Throws a [`TypeError`](../typeerror), if `typedArray` is not one of the allowed integer types.
-   Throws a [`RangeError`](../rangeerror), if `index` is out of bounds in the `typedArray`.

## Examples

### Using add()

    const sab = new SharedArrayBuffer(1024);
    const ta = new Uint8Array(sab);

    Atomics.add(ta, 0, 12); // returns 0, the old value
    Atomics.load(ta, 0); // 12

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-atomics.add">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-atomics.add</span></a></td></tr></tbody></table>

`add`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

## See also

-   [`Atomics`](../atomics)
-   [`Atomics.sub()`](sub)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/add" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/add</a>

# Addition (+)

The addition operator (`+`) produces the sum of numeric operands or string concatenation.

## Syntax

    Operator: x + y

## Examples

### Numeric addition

    // Number + Number -> addition
    1 + 2 // 3

    // Boolean + Number -> addition
    true + 1 // 2

    // Boolean + Boolean -> addition
    false + false // 0

### String concatenation

    // String + String -> concatenation
    'foo' + 'bar' // "foobar"

    // Number + String -> concatenation
    5 + 'foo' // "5foo"

    // String + Boolean -> concatenation
    'foo' + false // "foofalse"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-addition-operator-plus">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Addition operator' in that specification.</span></a></td></tr></tbody></table>

`Addition`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Subtraction operator](subtraction)
-   [Division operator](division)
-   [Multiplication operator](multiplication)
-   [Remainder operator](remainder)
-   [Exponentiation operator](exponentiation)
-   [Increment operator](increment)
-   [Decrement operator](decrement)
-   [Unary negation operator](unary_negation)
-   [Unary plus operator](unary_plus)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition</a>

# AggregateError

The `AggregateError` object represents an error when several errors need to be wrapped in a single error. It is thrown when multiple errors need to be reported by an operation, for example by [`Promise.any()`](promise/any), when all promises passed to it reject.

## Constructor

[`AggregateError()`](aggregateerror/aggregateerror)  
Creates a new `AggregateError` object.

## Instance properties

[`AggregateError.prototype.message`](error/message)  
Error message, defaults to `""`.

[`AggregateError.prototype.name`](error/name)  
Error name, defaults to `AggregateError`.

## Examples

### Catching an AggregateError

    Promise.any([
      Promise.reject(new Error("some error")),
    ]).catch(e => {
      console.log(e instanceof AggregateError); // true
      console.log(e.message);                   // "All Promises rejected"
      console.log(e.name);                      // "AggregateError"
      console.log(e.errors);                    // [ Error: "some error" ]
    });

### Creating an AggregateError

    try {
      throw new AggregateError([
        new Error("some error"),
      ], 'Hello');
    } catch (e) {
      console.log(e instanceof AggregateError); // true
      console.log(e.message);                   // "Hello"
      console.log(e.name);                      // "AggregateError"
      console.log(e.errors);                    // [ Error: "some error" ]
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-aggregate-error-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-aggregate-error-objects</span></a></td></tr></tbody></table>

`AggregateError`

85

85

79

No

No

14

85

85

79

No

14

No

`AggregateError`

85

85

79

No

No

14

85

85

79

No

14

No

## See also

-   [`Error`](error)
-   [`Promise.any`](promise/any)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError</a>

# Promise.all()

The `Promise.all()` method takes an iterable of promises as an input, and returns a single [`Promise`](../promise) that resolves to an array of the results of the input promises. This returned promise will resolve when all of the input's promises have resolved, or if the input iterable contains no promises. It rejects immediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error.

## Syntax

    Promise.all(iterable);

### Parameters

`iterable`  
An [iterable](../../iteration_protocols#the_iterable_protocol) object such as an [`Array`](../array).

### Return value

-   An **already resolved** [`Promise`](../promise) if the iterable passed is empty.
-   An **asynchronously resolved** [`Promise`](../promise) if the iterable passed contains no promises. Note, Google Chrome 58 returns an **already resolved** promise in this case.
-   A **pending** [`Promise`](../promise) in all other cases. This returned promise is then resolved/rejected **asynchronously** (as soon as the stack is empty) when all the promises in the given iterable have resolved, or if any of the promises reject. See the example about "Asynchronicity or synchronicity of Promise.all" below. Returned values will be in order of the Promises passed, regardless of completion order.

## Description

This method can be useful for aggregating the results of multiple promises. It is typically used when there are multiple related asynchronous tasks that the overall code relies on to work successfully — all of whom we want to fulfill before the code execution continues.

`Promise.all()` will reject immediately upon **any** of the input promises rejecting. In comparison, the promise returned by [`Promise.allSettled()`](allsettled) will wait for all input promises to complete, regardless of whether or not one rejects. Consequently, it will always return the final result of every promise and function from the input iterable.

### Fulfillment

The returned promise is fulfilled with an array containing **all** the resolved values (including non-promise values) in the iterable passed as the argument.

-   If an empty iterable is passed, then the promise returned by this method is fulfilled synchronously. The resolved value is an empty array.
-   If a nonempty _iterable_ is passed, and **all** of the promises fulfill, or are not promises, then the promise returned by this method is fulfilled asynchronously.

### Rejection

If any of the passed-in promises reject, `Promise.all` asynchronously rejects with the value of the promise that rejected, whether or not the other promises have resolved.

## Examples

### Using `Promise.all`

`Promise.all` waits for all fulfillments (or the first rejection).

    var p1 = Promise.resolve(3);
    var p2 = 1337;
    var p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("foo");
      }, 100);
    });

    Promise.all([p1, p2, p3]).then(values => {
      console.log(values); // [3, 1337, "foo"]
    });

If the iterable contains non-promise values, they will be ignored, but still counted in the returned promise array value (if the promise is fulfilled):

    // this will be counted as if the iterable passed is empty, so it gets fulfilled
    var p = Promise.all([1,2,3]);
    // this will be counted as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled
    var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
    // this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected
    var p3 = Promise.all([1,2,3, Promise.reject(555)]);

    // using setTimeout we can execute code after the stack is empty
    setTimeout(function() {
        console.log(p);
        console.log(p2);
        console.log(p3);
    });

    // logs
    // Promise { <state>: "fulfilled", <value>: Array[3] }
    // Promise { <state>: "fulfilled", <value>: Array[4] }
    // Promise { <state>: "rejected", <reason>: 555 }

### Asynchronicity or synchronicity of `Promise.all`

This following example demonstrates the asynchronicity (or synchronicity, if the iterable passed is empty) of `Promise.all`:

    // we are passing as argument an array of promises that are already resolved,
    // to trigger Promise.all as soon as possible
    var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];

    var p = Promise.all(resolvedPromisesArray);
    // immediately logging the value of p
    console.log(p);

    // using setTimeout we can execute code after the stack is empty
    setTimeout(function() {
        console.log('the stack is now empty');
        console.log(p);
    });

    // logs, in order:
    // Promise { <state>: "pending" }
    // the stack is now empty
    // Promise { <state>: "fulfilled", <value>: Array[2] }

The same thing happens if `Promise.all` rejects:

    var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
    var p = Promise.all(mixedPromisesArray);
    console.log(p);
    setTimeout(function() {
        console.log('the stack is now empty');
        console.log(p);
    });

    // logs
    // Promise { <state>: "pending" }
    // the stack is now empty
    // Promise { <state>: "rejected", <reason>: 44 }

But, `Promise.all` resolves synchronously **if and only if** the iterable passed is empty:

    var p = Promise.all([]); // will be immediately resolved
    var p2 = Promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously
    console.log(p);
    console.log(p2)
    setTimeout(function() {
        console.log('the stack is now empty');
        console.log(p2);
    });

    // logs
    // Promise { <state>: "fulfilled", <value>: Array[0] }
    // Promise { <state>: "pending" }
    // the stack is now empty
    // Promise { <state>: "fulfilled", <value>: Array[2] }

### `Promise.all` fail-fast behavior

`Promise.all` is rejected if any of the elements are rejected. For example, if you pass in four promises that resolve after a timeout and one promise that rejects immediately, then `Promise.all` will reject immediately.

    var p1 = new Promise((resolve, reject) => {
      setTimeout(() => resolve('one'), 1000);
    });
    var p2 = new Promise((resolve, reject) => {
      setTimeout(() => resolve('two'), 2000);
    });
    var p3 = new Promise((resolve, reject) => {
      setTimeout(() => resolve('three'), 3000);
    });
    var p4 = new Promise((resolve, reject) => {
      setTimeout(() => resolve('four'), 4000);
    });
    var p5 = new Promise((resolve, reject) => {
      reject(new Error('reject'));
    });

    // Using .catch:
    Promise.all([p1, p2, p3, p4, p5])
    .then(values => {
      console.log(values);
    })
    .catch(error => {
      console.error(error.message)
    });

    //From console:
    //"reject"

It is possible to change this behavior by handling possible rejections:

    var p1 = new Promise((resolve, reject) => {
      setTimeout(() => resolve('p1_delayed_resolution'), 1000);
    });

    var p2 = new Promise((resolve, reject) => {
      reject(new Error('p2_immediate_rejection'));
    });

    Promise.all([
      p1.catch(error => { return error }),
      p2.catch(error => { return error }),
    ]).then(values => {
      console.log(values[0]) // "p1_delayed_resolution"
      console.error(values[1]) // "Error: p2_immediate_rejection"
    })

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-promise.all">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-promise.all</span></a></td></tr></tbody></table>

`all`

32

12

29

No

19

8

4.4.3

32

29

19

8

2.0

## See also

-   [`Promise`](../promise)
-   [`Promise.race()`](race)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all</a>

# Promise.allSettled()

The `Promise.allSettled()` method returns a promise that resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.

It is typically used when you have multiple asynchronous tasks that are not dependent on one another to complete successfully, or you'd always like to know the result of each promise.

In comparison, the Promise returned by [`Promise.all()`](all) may be more appropriate if the tasks are dependent on each other / if you'd like to immediately reject upon any of them rejecting.

## Syntax

    Promise.allSettled(iterable);

### Parameters

`iterable`  
An [iterable](../../iteration_protocols) object, such as an [`Array`](../array), in which each member is a `Promise`.

### Return value

A **pending** [`Promise`](../promise) that will be **asynchronously** fulfilled once every promise in the specified collection of promises has completed, either by successfully being fulfilled or by being rejected. At that time, the returned promise's handler is passed as input an array containing the outcome of each promise in the original set of promises.

However, **if and only if** an empty iterable is passed as an argument, `Promise.allSettled()` returns a `Promise` object that has **already been resolved** as an empty array.

For each outcome object, a `status` string is present. If the status is `fulfilled`, then a `value` is present. If the status is `rejected`, then a `reason` is present. The value (or reason) reflects what value each promise was fulfilled (or rejected) with.

## Examples

### Using Promise.allSettled

    Promise.allSettled([
      Promise.resolve(33),
      new Promise(resolve => setTimeout(() => resolve(66), 0)),
      99,
      Promise.reject(new Error('an error'))
    ])
    .then(values => console.log(values));

    // [
    //   {status: "fulfilled", value: 33},
    //   {status: "fulfilled", value: 66},
    //   {status: "fulfilled", value: 99},
    //   {status: "rejected",  reason: Error: an error}
    // ]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-promise.allsettled">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-promise.allsettled</span></a></td></tr></tbody></table>

`allSettled`

76

79

71

No

63

13

76

76

79

54

13

12.0

## See also

-   [Promises](https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Techniques/Promises)
-   [Using promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)
-   [Graceful asynchronous programming with promises](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises)
-   [`Promise`](../promise)
-   [`Promise.all()`](all)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled</a>

# Warning: -file- is being assigned a //\# sourceMappingURL, but already has one

The JavaScript warning "-file- is being assigned a //\# sourceMappingURL, but already has one." occurs when a source map has been specified more than once for a given JavaScript source.

## Message

    Warning: -file- is being assigned a //# sourceMappingURL, but already has one.

## Error type

A warning. JavaScript execution won't be halted.

## What went wrong?

A source map has been specified more than once for a given JavaScript source.

JavaScript sources are often combined and minified to make delivering them from the server more efficient. With [source maps](https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/), the debugger can map the code being executed to the original source files. There are two ways to assign a source map, either by using a comment or by setting a header to the JavaScript file.

## Examples

### Setting source maps

Setting a source map by using a comment in the file:

    //# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

Or, alternatively, you can set a header to your JavaScript file:

    X-SourceMap: /path/to/file.js.map

## See also

-   [How to use a source map – Firefox Tools documentation](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map)
-   [Introduction to source maps – HTML5 rocks](https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Already_has_pragma" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Already_has_pragma</a>

# String.prototype.anchor()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `anchor()` method creates a string beginning with an `<a name="...">` start tag, then some text, and then an `</a>` end tag.

**Warning:** Don't use this method. Use [DOM APIs](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) instead. Also, the HTML specification no longer allows the [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) element to have a `name` attribute, so this method doesn't even create valid markup.

## Syntax

    anchor(name)

### Parameters

`name`  
A string representing a `name` value to put into the generated `<a name="...">` start tag.

### Return value

A string beginning with an `<a name="name">` start tag, then the text str, and then an `</a>` end tag.

## Description

Don't use this method. Use [DOM APIs](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) instead. Also, the HTML specification no longer allows the [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) element to have a `name` attribute, so this method doesn't even create valid markup.

## Examples

### Using anchor()

    var myString = 'Table of Contents';

    document.body.innerHTML = myString.anchor('contents_anchor');

will output the following HTML:

    <a name="contents_anchor">Table of Contents</a>

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.anchor">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.anchor</span></a></td></tr></tbody></table>

`anchor`

1

12

1

Starting with version 17, the quotation mark (") is replaced by its HTML reference character (`"`) in strings supplied for the `name` parameter.

No

3

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.link()`](link)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/anchor" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/anchor</a>

# Atomics.and()

The static ` Atomics``.and() ` method computes a bitwise AND with a given value at a given position in the array, and returns the old value at that position. This atomic operation guarantees that no other write happens until the modified value is written back.

## Syntax

    Atomics.and(typedArray, index, value)

### Parameters

`typedArray`  
An integer typed array. One of [`Int8Array`](../int8array), [`Uint8Array`](../uint8array), [`Int16Array`](../int16array), [`Uint16Array`](../uint16array), [`Int32Array`](../int32array), [`Uint32Array`](../uint32array), [`BigInt64Array`](../bigint64array), or [`BigUint64Array`](../biguint64array).

`index`  
The position in the `typedArray` to compute the bitwise AND.

`value`  
The number to compute the bitwise AND with.

### Return value

The old value at the given position (`typedArray[index]`).

### Exceptions

-   Throws a [`TypeError`](../typeerror), if `typedArray` is not one of the allowed integer types.
-   Throws a [`RangeError`](../rangeerror), if `index` is out of bounds in the `typedArray`.

## Description

The bitwise AND operation only yields 1, if both `a` and `b` are 1. The truth table for the AND operation is:

<table><thead><tr class="header"><th><code>a</code></th><th><code>b</code></th><th><code>a &amp; b</code></th></tr></thead><tbody><tr class="odd"><td>0</td><td>0</td><td>0</td></tr><tr class="even"><td>0</td><td>1</td><td>0</td></tr><tr class="odd"><td>1</td><td>0</td><td>0</td></tr><tr class="even"><td>1</td><td>1</td><td>1</td></tr></tbody></table>

For example, a bitwise AND of `5 & 1` results in `0001` which is 1 in decimal.

    5  0101
    1  0001
       ----
    1  0001

## Examples

### Using and()

    const sab = new SharedArrayBuffer(1024);
    const ta = new Uint8Array(sab);
    ta[0] = 5;

    Atomics.and(ta, 0, 1); // returns 0, the old value
    Atomics.load(ta, 0);  // 1

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-atomics.and">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-atomics.and</span></a></td></tr></tbody></table>

`and`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

## See also

-   [`Atomics`](../atomics)
-   [`Atomics.or()`](or)
-   [`Atomics.xor()`](xor)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/and" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/and</a>

# Promise.any()

`Promise.any()` takes an iterable of [`Promise`](../promise) objects and, as soon as one of the promises in the iterable fulfills, returns a single promise that resolves with the value from that promise. If no promises in the iterable fulfill (if all of the given promises are rejected), then the returned promise is rejected with an [`AggregateError`](../aggregateerror), a new subclass of [`Error`](../error) that groups together individual errors. Essentially, this method is the opposite of [`Promise.all()`](all).

## Syntax

    Promise.any(iterable);

### Parameters

`iterable`  
An [iterable](../../iteration_protocols#the_iterable_protocol) object, such as an [`Array`](../array).

### Return value

-   An **already rejected** [`Promise`](../promise) if the iterable passed is empty.
-   An **asynchronously resolved** [`Promise`](../promise) if the iterable passed contains no promises.
-   A **pending** [`Promise`](../promise) in all other cases. This returned promise is then resolved/rejected **asynchronously** (as soon as the stack is empty) when any of the promises in the given iterable resolve, or if all the promises have rejected.

## Description

This method is useful for returning the first promise that fulfills. It short-circuits after a promise fulfills, so it does not wait for the other promises to complete once it finds one. Unlike [`Promise.all()`](all), which returns an _array_ of fulfillment values, we only get one fulfillment value (assuming at least one promise fulfills). This can be beneficial if we need only one promise to fulfill but we do not care which one does. Note another difference: This method rejects upon receiving an _empty iterable_, since, truthfully, the iterable contains no items that fulfill.

Also, unlike [`Promise.race()`](race), which returns the first _settled_ value (either fulfillment or rejection), this method returns the first _fulfilled_ value. This method will ignore all rejected promises up until the first promise that fulfils.

### Fulfillment

The returned promise is fulfilled with **the first** resolved value (or non-promise value) in the iterable passed as the argument, whether or not the other promises have rejected.

-   If a nonempty _iterable_ is passed, and **any** of the promises fulfill, or are not promises, then the promise returned by this method is fulfilled asynchronously.

### Rejection

If all of the passed-in promises reject, `Promise.any` asynchronously rejects with an [`AggregateError`](../aggregateerror) object, which extends [`Error`](../error), and contains an `errors` property with an array of rejection values.

-   If an empty iterable is passed, then the promise returned by this method is rejected synchronously. The rejected reason is an `AggregateError` object whose `errors` property is an empty array.

## Examples

### First to fulfil

`Promise.any()` resolves with the first promise to fulfil, even if a promise rejects first. This is in contrast to [`Promise.race()`](race), which resolves or rejects with the first promise to settle.

    const pErr = new Promise((resolve, reject) => {
      reject("Always fails");
    });

    const pSlow = new Promise((resolve, reject) => {
      setTimeout(resolve, 500, "Done eventually");
    });

    const pFast = new Promise((resolve, reject) => {
      setTimeout(resolve, 100, "Done quick");
    });

    Promise.any([pErr, pSlow, pFast]).then((value) => {
      console.log(value);
      // pFast fulfils first
    })
    // expected output: "Done quick"

### Rejections with AggregateError

`Promise.any()` rejects with an [`AggregateError`](../aggregateerror) if no promise fulfils.

    const pErr = new Promise((resolve, reject) => {
      reject('Always fails');
    });

    Promise.any([pErr]).catch((err) => {
      console.log(err);
    })
    // expected output: "AggregateError: No Promise in Promise.any was resolved"

### Displaying the first image loaded

In this example, we have a function that fetches an image and returns a blob. We use `Promise.any()` to fetch a couple of images and display the first one available (i.e. whose promise has resolved).

    function fetchAndDecode(url) {
      return fetch(url).then(response => {
        if(!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        } else {
          return response.blob();
        }
      })
    }

    let coffee = fetchAndDecode('coffee.jpg');
    let tea = fetchAndDecode('tea.jpg');

    Promise.any([coffee, tea]).then(value => {
      let objectURL = URL.createObjectURL(value);
      let image = document.createElement('img');
      image.src = objectURL;
      document.body.appendChild(image);
    })
    .catch(e => {
      console.log(e.message);
    });

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-promise.any">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-promise.any</span></a></td></tr></tbody></table>

`any`

85

85

79

No

No

14

85

85

79

No

14

No

## See also

-   [`Promise`](../promise)
-   [`Promise.allSettled()`](allsettled)
-   [`Promise.all()`](all)
-   [`Promise.race()`](race)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/any" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/any</a>

# Function.prototype.apply()

The `apply()` method calls a function with a given `this` value, and `arguments` provided as an array (or an [array-like object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#working_with_array-like_objects)).

## Syntax

    apply(thisArg)
    apply(thisArg, argsArray)

### Parameters

`thisArg`  
The value of `this` provided for the call to `func`.

Note that `this` may not be the actual value seen by the method: if the method is a function in [non-strict mode](../../strict_mode) code, [`null`](../null) and [`undefined`](../undefined) will be replaced with the global object, and primitive values will be boxed. This argument is required.

`argsArray` <span class="badge inline optional">Optional</span>  
An array-like object, specifying the arguments with which `func` should be called, or [`null`](../null) or [`undefined`](../undefined) if no arguments should be provided to the function.

Starting with ECMAScript 5 these arguments can be a generic array-like object instead of an array. See below for [browser compatibility](#browser_compatibility) information.

### Return value

The result of calling the function with the specified `this` value and arguments.

## Description

**Note:** While the syntax of this function is almost identical to that of [`call()`](call), the fundamental difference is that `call()` accepts an **argument list**, while `apply()` accepts a **single array of arguments**.

**Note:** When the first argument is undefined or null a similar outcome can be achieved using the array [spread syntax](../../operators/spread_syntax).

You can assign a different `this` object when calling an existing function. `this` refers to the current object (the calling object). With `apply`, you can write a method once, and then inherit it in another object, without having to rewrite the method for the new object.

`apply` is very similar to [`call()`](call), except for the type of arguments it supports. You use an arguments array instead of a list of arguments (parameters). With `apply`, you can also use an array literal, for example, `func.apply(this, ['eat', 'bananas'])`, or an [`Array`](../array) object, for example, `func.apply(this, new Array('eat', 'bananas'))`.

You can also use [`arguments`](../../functions/arguments) for the `argsArray` parameter. [`arguments`](../../functions/arguments) is a local variable of a function. It can be used for all unspecified arguments of the called object. Thus, you do not have to know the arguments of the called object when you use the `apply` method. You can use `arguments` to pass all the arguments to the called object. The called object is then responsible for handling the arguments.

Since ECMAScript 5<sup>th</sup> Edition, you can also use any kind of object which is array-like. In practice, this means it's going to have a `length` property, and integer ("index") properties in the range `(0..length - 1)`. For example, you could use a [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), or a custom object like `{ 'length': 2, '0': 'eat', '1': 'bananas' }`.

**Note:** Many older browsers—including Chrome &lt;17 and Internet Explorer &lt;9—don't accept array-like objects, and will throw an exception.

## Examples

### Using apply to append an array to another

You can use `push` to append an element to an array. And, because `push` accepts a variable number of arguments, you can also push multiple elements at once.

But, if you pass an array to `push`, it will actually add that array as a single element, instead of adding the elements individually. So you end up with an array inside an array.

What if that is not what you want? `concat` does have the desired behavior in this case, but it does not append to the _existing_ array—it instead creates and returns a new array.

But you wanted to append to the existing array... So what now? Write a loop? Surely not?

`apply` to the rescue!

    const array = ['a', 'b'];
    const elements = [0, 1, 2];
    array.push.apply(array, elements);
    console.info(array); // ["a", "b", 0, 1, 2]

### Using apply and built-in functions

Clever usage of `apply` allows you to use built-in functions for some tasks that would probably have otherwise been written by looping over the array values.

As an example, here are `Math.max`/`Math.min`, used to find out the maximum/minimum value in an array.

    // min/max number in an array
    const numbers = [5, 6, 2, 3, 7];

    // using Math.min/Math.max apply
    let max = Math.max.apply(null, numbers);
    // This about equal to Math.max(numbers[0], ...)
    // or Math.max(5, 6, ...)

    let min = Math.min.apply(null, numbers);

    // vs. simple loop based algorithm
    max = -Infinity, min = +Infinity;

    for (let i = 0; i < numbers.length; i++) {
      if (numbers[i] > max) {
        max = numbers[i];
      }
      if (numbers[i] < min) {
        min = numbers[i];
      }
    }

But beware: by using `apply` this way, you run the risk of exceeding the JavaScript engine's argument length limit. The consequences of applying a function with too many arguments (that is, more than tens of thousands of arguments) varies across engines. (The JavaScriptCore engine has hard-coded [argument limit of 65536](https://bugs.webkit.org/show_bug.cgi?id=80797).

This is because the limit (and indeed, even the nature of any excessively-large-stack behavior) is unspecified. Some engines will throw an exception. More perniciously, others will arbitrarily limit the number of arguments actually passed to the applied function. To illustrate this latter case: if such an engine had a limit of four arguments (actual limits are of course significantly higher), it would be as if the arguments `5, 6, 2, 3` had been passed to `apply` in the examples above, rather than the full array.

If your value array might grow into the tens of thousands, use a hybrid strategy: apply your function to chunks of the array at a time:

    function minOfArray(arr) {
      let min = Infinity;
      let QUANTUM = 32768;

      for (var i = 0, len = arr.length; i < len; i += QUANTUM) {
        var submin = Math.min.apply(null,
                                    arr.slice(i, Math.min(i+QUANTUM, len)));
        min = Math.min(submin, min);
      }

      return min;
    }

    let min = minOfArray([5, 6, 2, 3, 7]);

### Using apply to chain constructors

You can use `apply` to chain [constructors](../../operators/new) for an object (similar to Java).

In the following example we will create a global [`Function`](../function) method called `construct`, which will enable you to use an array-like object with a constructor instead of an arguments list.

    Function.prototype.construct = function(aArgs) {
      let oNew = Object.create(this.prototype);
      this.apply(oNew, aArgs);
      return oNew;
    };

Example usage:

    function MyConstructor() {
      for (let nProp = 0; nProp < arguments.length; nProp++) {
        this['property' + nProp] = arguments[nProp];
      }
    }

    let myArray = [4, 'Hello world!', false];
    let myInstance = MyConstructor.construct(myArray);

    console.log(myInstance.property1);                // logs 'Hello world!'
    console.log(myInstance instanceof MyConstructor); // logs 'true'
    console.log(myInstance.constructor);              // logs 'MyConstructor'

**Note:** This non-native `Function.construct` method will not work with some native constructors; like [`Date`](../date), for example. In these cases you have to use the [`Function.prototype.bind`](bind) method.

For example, imagine having an array like the following, to be used with [`Date`](../date) constructor: `[2012, 11, 4]`; in this case you have to write something like: `new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()`.

This is not the best way to do things, and probably not to be used in any production environment.

# The arguments object

<span class="summary">`arguments` is an `Array`-like object accessible inside [functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) that contains the values of the arguments passed to that function.</span>

## Description

**Note:** If you're writing ES6 compatible code, then [rest parameters](rest_parameters) should be preferred.

**Note:** "Array-like” means that `arguments` has a [`length`](arguments/length) property and properties indexed from zero, but it doesn't have [`Array`](../global_objects/array)'s built-in methods like [`forEach()`](../global_objects/array/foreach) or [`map()`](../global_objects/array/map). See [§Description](#description) for details.

The `arguments` object is a local variable available within all non-[arrow](arrow_functions) functions. You can refer to a function's arguments inside that function by using its `arguments` object. It has entries for each argument the function was called with, with the first entry's index at `0`.

For example, if a function is passed 3 arguments, you can access them as follows:

    arguments[0] // first argument
    arguments[1] // second argument
    arguments[2] // third argument

Each argument can also be set or reassigned:

    arguments[1] = 'new value';

The `arguments` object is not an [`Array`](../global_objects/array). It is similar, but lacks all `Array` properties except [`length`](../global_objects/array/length). For example, it does not have the [`pop()`](../global_objects/array/pop) method.

However, it can be converted to a real `Array`:

    var args = Array.prototype.slice.call(arguments);
    // Using an array literal is shorter than above but allocates an empty array
    var args = [].slice.call(arguments);

As you can do with any Array-like object, you can use ES2015's [`Array.from()`](../global_objects/array/from) method or [spread syntax](../operators/spread_syntax) to convert `arguments` to a real Array:

    let args = Array.from(arguments);
    // or
    let args = [...arguments];

The `arguments` object is useful for functions called with more arguments than they are formally declared to accept. This technique is useful for functions that can be passed a variable number of arguments, such as [`Math.min()`](../global_objects/math/min). This example function accepts any number of string arguments and returns the longest one:

    function longestString() {
      var longest = '';
      for (var i=0; i < arguments.length; i++) {
        if (arguments[i].length > longest.length) {
          longest = arguments[i];
        }
      }
      return longest;
    }

You can use [`arguments.length`](arguments/length) to count how many arguments the function was called with. If you instead want to count how many parameters a function is declared to accept, inspect that function's [`length`](../global_objects/function/length) property.

### Using typeof with arguments

The [`typeof`](../operators/typeof) operator returns `'object'` when used with `arguments`

    console.log(typeof arguments); // 'object'

The type of individual arguments can be determined by indexing `arguments`:

    console.log(typeof arguments[0]); // returns the type of the first argument

## Properties

[`arguments.callee`](arguments/callee)  
Reference to the currently executing function that the arguments belong to. Forbidden in strict mode.

[`arguments.length`](arguments/length)  
The number of arguments that were passed to the function.

[`arguments[@@iterator]`](arguments/@@iterator)  
Returns a new [Array iterator](../global_objects/array/@@iterator) object that contains the values for each index in `arguments`.

## Examples

### Defining a function that concatenates several strings

This example defines a function that concatenates several strings. The function's only formal argument is a string containing the characters that separate the items to concatenate.

    function myConcat(separator) {
      let args = Array.prototype.slice.call(arguments, 1);
      return args.join(separator);
    }

You can pass as many arguments as you like to this function. It returns a string list using each argument in the list:

    // returns "red, orange, blue"
    myConcat(', ', 'red', 'orange', 'blue');

    // returns "elephant; giraffe; lion; cheetah"
    myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');

    // returns "sage. basil. oregano. pepper. parsley"
    myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');

### Defining a function that creates HTML lists

This example defines a function that creates a string containing HTML for a list. The only formal argument for the function is a string that is "`u`" if the list is to be [unordered (bulleted)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul), or "`o`" if the list is to be [ordered (numbered)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol). The function is defined as follows:

    function list(type) {
      var html = '<' + type + 'l><li>';
      var args = Array.prototype.slice.call(arguments, 1);
      html += args.join('</li><li>');
      html += '</li></' + type + 'l>'; // end list
      return html;
    }

You can pass any number of arguments to this function, and it adds each argument as a list item to a list of the type indicated. For example:

    let listHTML = list('u', 'One', 'Two', 'Three');

    /* listHTML is:
    "<ul><li>One</li><li>Two</li><li>Three</li></ul>"
    */

### Rest, default, and destructured parameters

The `arguments` object can be used in conjunction with [rest](rest_parameters), [default](default_parameters), and [destructured](../operators/destructuring_assignment) parameters.

    function foo(...args) {
      return args;
    }
    foo(1, 2, 3); // [1, 2, 3]

While the presence of rest, default, or destructured parameters does not alter [the behavior of the `arguments` object in strict mode code](../strict_mode#making_eval_and_arguments_simpler), there are subtle differences for non-strict code.

In strict-mode code, the `arguments` object behaves the same whether or not a function is passed rest, default, or destructured parameters. That is, assigning new values to variables in the body of the function will not affect the `arguments` object. Nor will assigning new variables to the `arguments` object affect the value of variables.

**Note:** You cannot write a `"use strict";` directive in the body of a function definition that accepts rest, default, or destructured parameters. Doing so will throw [a syntax error](../errors/strict_non_simple_params).

Non-strict functions that are passed only simple parameters (that is, not rest, default, or restructured parameters) will sync the value of variables new values in the body of the function with the `arguments` object, and vice versa:

    function func(a) {
      arguments[0] = 99; // updating arguments[0] also updates a
      console.log(a);
    }
    func(10); // 99

And also:

    function func(a) {
      a = 99; // updating a also updates arguments[0]
      console.log(arguments[0]);
    }
    func(10); // 99

Conversely, non-strict functions that **are** passed rest, default, or destructured parameters **will not** sync new values assigned to argument variables in the function body with the `arguments` object. Instead, the `arguments` object in non-strict functions with complex parameters **will always** reflect the values passed to the function when the function was called (this is the same behavior as exhibited by all strict-mode functions, regardless of the type of variables they are passed):

    function func(a = 55) {
      arguments[0] = 99; // updating arguments[0] does not also update a
      console.log(a);
    }
    func(10); // 10

And also:

    function func(a = 55) {
      a = 99; // updating a does not also update arguments[0]
      console.log(arguments[0]);
    }
    func(10); // 10

And also:

    // An untracked default parameter
    function func(a = 55) {
      console.log(arguments[0]);
    }
    func(); // undefined

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-arguments-exotic-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-arguments-exotic-objects</span></a></td></tr></tbody></table>

`arguments`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`callee`

1

12

1

6

4

1

1

18

4

10.1

1

1.0

`length`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`@@iterator`

52

12

46

No

39

9

52

52

46

41

9

6.0

## See also

-   [`Function`](../global_objects/function)
-   [Rest parameters](rest_parameters)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments</a>

# Array

The JavaScript `Array` class is a global object that is used in the construction of arrays; which are high-level, list-like objects.

## Description

Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.

Arrays cannot use strings as element indexes (as in an [associative array](https://en.wikipedia.org/wiki/Associative_array)) but must use integers. Setting or accessing via non-integers using [bracket notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#objects_and_properties) (or [dot notation](../operators/property_accessors)) will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array's [object property collection](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#properties). The array's object properties and list of array elements are separate, and the array's [traversal and mutation operations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#array_methods) cannot be applied to these named properties.

### Common operations

**Create an Array**

    let fruits = ['Apple', 'Banana']

    console.log(fruits.length)
    // 2

**Access an Array item using the index position**

    let first = fruits[0]
    // Apple

    let last = fruits[fruits.length - 1]
    // Banana

**Loop over an Array**

    fruits.forEach(function(item, index, array) {
      console.log(item, index)
    })
    // Apple 0
    // Banana 1

**Add an item to the end of an Array**

    let newLength = fruits.push('Orange')
    // ["Apple", "Banana", "Orange"]

**Remove an item from the end of an Array**

    let last = fruits.pop() // remove Orange (from the end)
    // ["Apple", "Banana"]

**Remove an item from the beginning of an Array**

    let first = fruits.shift() // remove Apple from the front
    // ["Banana"]

**Add an item to the beginning of an Array**

    let newLength = fruits.unshift('Strawberry') // add to the front
    // ["Strawberry", "Banana"]

**Find the index of an item in the Array**

    fruits.push('Mango')
    // ["Strawberry", "Banana", "Mango"]

    let pos = fruits.indexOf('Banana')
    // 1

**Remove an item by index position**

    let removedItem = fruits.splice(pos, 1) // this is how to remove an item

    // ["Strawberry", "Mango"]

**Remove items from an index position**

    let vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']
    console.log(vegetables)
    // ["Cabbage", "Turnip", "Radish", "Carrot"]

    let pos = 1
    let n = 2

    let removedItems = vegetables.splice(pos, n)
    // this is how to remove items, n defines the number of items to be removed,
    // starting at the index position specified by pos and progressing toward the end of array.

    console.log(vegetables)
    // ["Cabbage", "Carrot"] (the original array is changed)

    console.log(removedItems)
    // ["Turnip", "Radish"]

**Copy an Array**

    let shallowCopy = fruits.slice() // this is how to make a copy
    // ["Strawberry", "Mango"]

### Accessing array elements

JavaScript arrays are zero-indexed. The first element of an array is at index `0`, and the last element is at the index value equal to the value of the array's [`length`](array/length) property minus `1`.

Using an invalid index number returns `undefined`.

    let arr = ['this is the first element', 'this is the second element', 'this is the last element']
    console.log(arr[0])              // logs 'this is the first element'
    console.log(arr[1])              // logs 'this is the second element'
    console.log(arr[arr.length - 1]) // logs 'this is the last element'

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

    console.log(arr.0) // a syntax error

There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation and must be accessed using bracket notation.

For example, if you had an object with a property named `3d`, it can only be referenced using bracket notation.

    let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
    console.log(years.0)   // a syntax error
    console.log(years[0])  // works properly

    renderer.3d.setTexture(model, 'character.png')     // a syntax error
    renderer['3d'].setTexture(model, 'character.png')  // works properly

In the `3d` example, `'3d'` _had_ to be quoted (because it begins with a digit). But it's also possible to quote the array indexes as well (e.g., `years['2']` instead of `years[2]`), although it's not necessary.

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

    console.log(years['2'] != years['02'])

### Relationship between length and numerical properties

A JavaScript array's [`length`](array/length) property and numerical properties are connected.

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

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

    const fruits = []
    fruits.push('banana', 'apple', 'peach')

    console.log(fruits.length) // 3

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

    fruits[5] = 'mango'
    console.log(fruits[5])            // 'mango'
    console.log(Object.keys(fruits))  // ['0', '1', '2', '5']
    console.log(fruits.length)        // 6

Increasing the [`length`](array/length).

    fruits.length = 10
    console.log(fruits)              // ['banana', 'apple', 'peach', empty x 2, 'mango', empty x 4]
    console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
    console.log(fruits.length)       // 10
    console.log(fruits[8])           // undefined

Decreasing the [`length`](array/length) property does, however, delete elements.

    fruits.length = 2
    console.log(Object.keys(fruits)) // ['0', '1']
    console.log(fruits.length)       // 2

This is explained further on the [`Array.length`](array/length) page.

### Creating an array using the result of a match

The result of a match between a [`RegExp`](regexp) and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by [`RegExp.exec()`](regexp/exec), [`String.match()`](string/match), and [`String.replace()`](string/replace).

To help explain these properties and elements, see this example and then refer to the table below:

    // Match one d followed by one or more b's followed by one d
    // Remember matched b's and the following d
    // Ignore case

    const myRe = /d(b+)(d)/i
    const myArray = myRe.exec('cdbBdbsbz')

The properties and elements returned from this match are as follows:

<table><thead><tr class="header"><th>Property/Element</th><th>Description</th><th>Example</th></tr></thead><tbody><tr class="odd"><td><code>input</code> 
<br/>

<span class="badge inline readonly">Read only </span></td><td>The original string against which the regular expression was matched.</td><td><code>"cdbBdbsbz"</code></td></tr><tr class="even"><td><code>index</code>
<br/>

<span class="badge inline readonly">Read only </span></td><td>The zero-based index of the match in the string.</td><td><code>1</code></td></tr><tr class="odd"><td><code>[0]</code>
<br/>

<span class="badge inline readonly">Read only </span></td><td>The last matched characters.</td><td><code>"dbBd"</code></td></tr><tr class="even"><td><code>[1], ...[n]</code>
<br/>

<span class="badge inline readonly">Read only </span></td><td>Elements that specify the parenthesized substring matches (if included) in the regular expression. The number of possible parenthesized substrings is unlimited.</td><td><code>[1]: "bB" [2]: "d"</code></td></tr></tbody></table>

## Constructor

[`Array()`](array/array)  
Creates a new `Array` object.

## Static properties

[`get Array[@@species]`](array/@@species)  
The constructor function is used to create derived objects.

## Static methods

[`Array.from()`](array/from)  
Creates a new `Array` instance from an array-like or iterable object.

[`Array.isArray()`](array/isarray)  
Returns `true` if the argument is an array, or `false` otherwise.

[`Array.of()`](array/of)  
Creates a new `Array` instance with a variable number of arguments, regardless of number or type of the arguments.

## Instance properties

[`Array.prototype.length`](array/length)  
Reflects the number of elements in an array.

[`Array.prototype[@@unscopables]`](array/@@unscopables)  
A symbol containing property names to exclude from a [`with`](../statements/with) binding scope.

## Instance methods

[`Array.prototype.at()`](array/at)<span class="icon experimental" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img"> This is an experimental API that should not be used in production code. </span>  
Returns the array item at the given index. Accepts negative integers, which count back from the last item.

[`Array.prototype.concat()`](array/concat)  
Returns a new array that is this array joined with other array(s) and/or value(s).

[`Array.prototype.copyWithin()`](array/copywithin)  
Copies a sequence of array elements within the array.

[`Array.prototype.entries()`](array/entries)  
Returns a new `Array Iterator` object that contains the key/value pairs for each index in the array.

[`Array.prototype.every()`](array/every)  
Returns `true` if every element in this array satisfies the testing function.

[`Array.prototype.fill()`](array/fill)  
Fills all the elements of an array from a start index to an end index with a static value.

[`Array.prototype.filter()`](array/filter)  
Returns a new array containing all elements of the calling array for which the provided filtering function returns `true`.

[`Array.prototype.find()`](array/find)  
Returns the found `element` in the array, if some element in the array satisfies the testing function, or `undefined` if not found.

[`Array.prototype.findIndex()`](array/findindex)  
Returns the found index in the array, if an element in the array satisfies the testing function, or `-1` if not found.

[`Array.prototype.forEach()`](array/foreach)  
Calls a function for each element in the array.

[`Array.prototype.includes()`](array/includes)  
Determines whether the array contains a value, returning `true` or `false` as appropriate.

[`Array.prototype.indexOf()`](array/indexof)  
Returns the first (least) index of an element within the array equal to an element, or `-1` if none is found.

[`Array.prototype.join()`](array/join)  
Joins all elements of an array into a string.

[`Array.prototype.keys()`](array/keys)  
Returns a new `Array Iterator` that contains the keys for each index in the array.

[`Array.prototype.lastIndexOf()`](array/lastindexof)  
Returns the last (greatest) index of an element within the array equal to an element, or `-1` if none is found.

[`Array.prototype.map()`](array/map)  
Returns a new array containing the results of calling a function on every element in this array.

[`Array.prototype.pop()`](array/pop)  
Removes the last element from an array and returns that element.

[`Array.prototype.push()`](array/push)  
Adds one or more elements to the end of an array, and returns the new `length` of the array.

[`Array.prototype.reduce()`](array/reduce)  
Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.

[`Array.prototype.reduceRight()`](array/reduceright)  
Apply a function against an accumulator&gt; and each value of the array (from right-to-left) as to reduce it to a single value.

[`Array.prototype.reverse()`](array/reverse)  
Reverses the order of the elements of an array _in place_. (First becomes the last, last becomes first.)

[`Array.prototype.shift()`](array/shift)  
Removes the first element from an array and returns that element.

[`Array.prototype.slice()`](array/slice)  
Extracts a section of the calling array and returns a new array.

[`Array.prototype.some()`](array/some)  
Returns `true` if at least one element in this array satisfies the provided testing function.

[`Array.prototype.sort()`](array/sort)  
Sorts the elements of an array in place and returns the array.

[`Array.prototype.splice()`](array/splice)  
Adds and/or removes elements from an array.

[`Array.prototype.toLocaleString()`](array/tolocalestring)  
Returns a localized string representing the array and its elements. Overrides the [`Object.prototype.toLocaleString()`](object/tolocalestring) method.

[`Array.prototype.toString()`](array/tostring)  
Returns a string representing the array and its elements. Overrides the [`Object.prototype.toString()`](object/tostring) method.

[`Array.prototype.unshift()`](array/unshift)  
Adds one or more elements to the front of an array, and returns the new `length` of the array.

[`Array.prototype.values()`](array/values)  
Returns a new `Array Iterator` object that contains the values for each index in the array.

[`Array.prototype[@@iterator]()`](array/@@iterator)  
Returns a new `Array Iterator` object that contains the values for each index in the array.

## Examples

### Creating an array

The following example creates an array, `msgArray`, with a length of `0`, then assigns values to `msgArray[0]` and `msgArray[99]`, changing the `length` of the array to `100`.

    let msgArray = []
    msgArray[0] = 'Hello'
    msgArray[99] = 'world'

    if (msgArray.length === 100) {
      console.log('The length is 100.')
    }

### Creating a two-dimensional array

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

    let board = [
      ['R','N','B','Q','K','B','N','R'],
      ['P','P','P','P','P','P','P','P'],
      [' ',' ',' ',' ',' ',' ',' ',' '],
      [' ',' ',' ',' ',' ',' ',' ',' '],
      [' ',' ',' ',' ',' ',' ',' ',' '],
      [' ',' ',' ',' ',' ',' ',' ',' '],
      ['p','p','p','p','p','p','p','p'],
      ['r','n','b','q','k','b','n','r'] ]

    console.log(board.join('\n') + '\n\n')

    // Move King's Pawn forward 2
    board[4][4] = board[6][4]
    board[6][4] = ' '
    console.log(board.join('\n'))

Here is the output:

    R,N,B,Q,K,B,N,R
    P,P,P,P,P,P,P,P
     , , , , , , ,
     , , , , , , ,
     , , , , , , ,
     , , , , , , ,
    p,p,p,p,p,p,p,p
    r,n,b,q,k,b,n,r

    R,N,B,Q,K,B,N,R
    P,P,P,P,P,P,P,P
     , , , , , , ,
     , , , , , , ,
     , , , ,p, , ,
     , , , , , , ,
    p,p,p,p, ,p,p,p
    r,n,b,q,k,b,n,r

### Using an array to tabulate a set of values

    values = []
    for (let x = 0; x < 10; x++){
     values.push([
      2 ** x,
      2 * x ** 2
     ])
    }
    console.table(values)

Results in

    // The first column is the index
    0   1   0
    1   2   2
    2   4   8
    3   8   18
    4   16  32
    5   32  50
    6   64  72
    7   128 98
    8   256 128
    9   512 162

# TypeError: invalid Array.prototype.sort argument

The JavaScript exception "invalid Array.prototype.sort argument" occurs when the argument of [`Array.prototype.sort()`](../global_objects/array/sort) isn't either [`undefined`](../global_objects/undefined) or a function which compares its operands.

## Message

    TypeError: argument is not a function object (Edge)
    TypeError: invalid Array.prototype.sort argument (Firefox)

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

The argument of [`Array.prototype.sort()`](../global_objects/array/sort) is expected to be either [`undefined`](../global_objects/undefined) or a function which compares its operands.

## Examples

### Invalid cases

    [1, 3, 2].sort(5);  // TypeError

    var cmp = { asc: (x, y) => x >= y, dsc: (x, y) => x <= y };
    [1, 3, 2].sort(cmp[this.key] || 'asc');  // TypeError

### Valid cases

    [1, 3, 2].sort();   // [1, 2, 3]

    var cmp = { asc: (x, y) => x >= y, dsc: (x, y) => x <= y };
    [1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3]

## See also

-   [`Array.prototype.sort()`](../global_objects/array/sort)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Array_sort_argument" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Array_sort_argument</a>

# ArrayBuffer

The `ArrayBuffer` object is used to represent a generic, fixed-length raw binary data buffer.

It is an array of bytes, often referred to in other languages as a "byte array".You cannot directly manipulate the contents of an `ArrayBuffer`; instead, you create one of the [typed array objects](typedarray) or a [`DataView`](dataview) object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.

The `ArrayBuffer()` constructor creates a new `ArrayBuffer` of the given length in bytes. You can also get an array buffer from existing data, for example [from a Base64 string](https://developer.mozilla.org/en-US/docs/Glossary/Base64#appendix_to_solution_1_decode_a_base64_string_to_uint8array_or_arraybuffer) or [from a local file](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer).

## Constructor

[`ArrayBuffer()`](arraybuffer/arraybuffer)  
Creates a new `ArrayBuffer` object.

## Static properties

[`get ArrayBuffer[@@species]`](arraybuffer/@@species)  
The constructor function that is used to create derived objects.

## Static methods

[`ArrayBuffer.isView(arg)`](arraybuffer/isview)  
Returns `true` if `arg` is one of the ArrayBuffer views, such as [typed array objects](typedarray) or a [`DataView`](dataview). Returns `false` otherwise.

## Instance properties

[`ArrayBuffer.prototype.byteLength`](arraybuffer/bytelength)  
The read-only size, in bytes, of the `ArrayBuffer`. This is established when the array is constructed and cannot be changed.

## Instance methods

[`ArrayBuffer.prototype.slice()`](arraybuffer/slice)  
Returns a new `ArrayBuffer` whose contents are a copy of this `ArrayBuffer`'s bytes from `begin` (inclusive) up to `end` (exclusive). If either `begin` or `end` is negative, it refers to an index from the end of the array, as opposed to from the beginning.

## Examples

### Creating an ArrayBuffer

In this example, we create a 8-byte buffer with a [`Int32Array`](int32array) view referring to the buffer:

    const buffer = new ArrayBuffer(8);
    const view = new Int32Array(buffer);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-arraybuffer-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-arraybuffer-objects</span></a></td></tr></tbody></table>

`ArrayBuffer`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

`ArrayBuffer`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

`byteLength`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

`isView`

32

12

29

11

19

7

≤37

32

29

19

7

2.0

`slice`

17

12

12

The non-standard `ArrayBuffer.slice()` method has been removed in Firefox 53 (but the standardized version `ArrayBuffer.prototype.slice()` is kept.

11

12.1

6

≤37

18

14

The non-standard `ArrayBuffer.slice()` method has been removed in Firefox 53 (but the standardized version `ArrayBuffer.prototype.slice()` is kept.

12.1

6

1.0

`@@species`

51

13

48

No

38

10

51

51

48

41

10

5.0

## See also

-   [JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)
-   [`SharedArrayBuffer`](sharedarraybuffer)
-   [RangeError: invalid array length](../errors/invalid_array_length)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer</a>

# Arrow function expressions

An **arrow function expression** is a compact alternative to a traditional [function expression](../operators/function), but is limited and can't be used in all situations.

**Differences & Limitations:**

-   Does not have its own bindings to `this` or `super`, and should not be used as `methods`.
-   Does not have `arguments`, or `new.target` keywords.
-   Not suitable for `call`, `apply` and [`bind`](../global_objects/function/bind) methods, which generally rely on establishing a [scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope).
-   Can not be used as [constructors](https://developer.mozilla.org/en-US/docs/Glossary/Constructor).
-   Can not use `yield`, within its body.

### Comparing traditional functions to arrow functions

Let's decompose a "traditional function" down to the simplest "arrow function" step-by-step:  
NOTE: Each step along the way is a valid "arrow function"

    // Traditional Function
    function (a){
      return a + 100;
    }

    // Arrow Function Break Down

    // 1. Remove the word "function" and place arrow between the argument and opening body bracket
    (a) => {
      return a + 100;
    }

    // 2. Remove the body brackets and word "return" -- the return is implied.
    (a) => a + 100;

    // 3. Remove the argument parentheses
    a => a + 100;

**Note:** As shown above, the { brackets } and ( parentheses ) and "return" are optional, but may be required.

For example, if you have **multiple arguments** or **no arguments**, you'll need to re-introduce parentheses around the arguments:

    // Traditional Function
    function (a, b){
      return a + b + 100;
    }

    // Arrow Function
    (a, b) => a + b + 100;

    // Traditional Function (no arguments)
    let a = 4;
    let b = 2;
    function (){
      return a + b + 100;
    }

    // Arrow Function (no arguments)
    let a = 4;
    let b = 2;
    () => a + b + 100;

Likewise, if the body requires **additional lines** of processing, you'll need to re-introduce brackets **PLUS the "return"** (arrow functions do not magically guess what or when you want to "return"):

    // Traditional Function
    function (a, b){
      let chuck = 42;
      return a + b + chuck;
    }

    // Arrow Function
    (a, b) => {
      let chuck = 42;
      return a + b + chuck;
    }

And finally, for **named functions** we treat arrow expressions like variables

    // Traditional Function
    function bob (a){
      return a + 100;
    }

    // Arrow Function
    let bob = a => a + 100;

## Syntax

### Basic syntax

One param. With simple expression return is not needed:

    param => expression

Multiple params require parentheses. With simple expression return is not needed:

    (param1, paramN) => expression

Multiline statements require body brackets and return:

    param => {
      let a = 1;
      return a + param;
    }

Multiple params require parentheses. Multiline statements require body brackets and return:

    (param1, paramN) => {
       let a = 1;
       return a + param1 + paramN;
    }

### Advanced syntax

To return an object literal expression requires parentheses around expression:

    params => ({foo: "a"}) // returning the object {foo: "a"}

[Rest parameters](rest_parameters) are supported:

    (a, b, ...r) => expression

[Default parameters](default_parameters) are supported:

    (a=400, b=20, c) => expression

[Destructuring](../operators/destructuring_assignment) within params supported:

    ([a, b] = [10, 20]) => a + b;  // result is 30
    ({ a, b } = { a: 10, b: 20 }) => a + b; // result is 30

## Description

### Arrow functions used as methods

As stated previously, arrow function expressions are best suited for non-method functions. Let's see what happens when we try to use them as methods:

    'use strict';

    var obj = { // does not create a new scope
      i: 10,
      b: () => console.log(this.i, this),
      c: function() {
        console.log(this.i, this);
      }
    }

    obj.b(); // prints undefined, Window {...} (or the global object)
    obj.c(); // prints 10, Object {...}

Arrow functions do not have their own `this`. Another example involving [`Object.defineProperty()`](../global_objects/object/defineproperty):

    'use strict';

    var obj = {
      a: 10
    };

    Object.defineProperty(obj, 'b', {
      get: () => {
        console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object)
        return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
      }
    });

### call, apply and bind

The `call`, `apply` and [`bind`](../global_objects/function/bind) methods are **NOT suitable** for Arrow functions -- as they were designed to allow methods to execute within different scopes -- because **Arrow functions establish "this" based on the scope the Arrow function is defined within.**

For example `call`, `apply` and [`bind`](../global_objects/function/bind) work as expected with Traditional functions, because we establish the scope for each of the methods:

    // ----------------------
    // Traditional Example
    // ----------------------
    // A simplistic object with its very own "this".
    var obj = {
        num: 100
    }

    // Setting "num" on window to show how it is NOT used.
    window.num = 2020; // yikes!

    // A simple traditional function to operate on "this"
    var add = function (a, b, c) {
      return this.num + a + b + c;
    }

    // call
    var result = add.call(obj, 1, 2, 3) // establishing the scope as "obj"
    console.log(result) // result 106

    // apply
    const arr = [1, 2, 3]
    var result = add.apply(obj, arr) // establishing the scope as "obj"
    console.log(result) // result 106

    // bind
    var result = add.bind(obj) // establishing the scope as "obj"
    console.log(result(1, 2, 3)) // result 106

With Arrow functions, since our `add` function is essentially created on the `window` (global) scope, it will assume `this` is the window.

    // ----------------------
    // Arrow Example
    // ----------------------

    // A simplistic object with its very own "this".
    var obj = {
        num: 100
    }

    // Setting "num" on window to show how it gets picked up.
    window.num = 2020; // yikes!

    // Arrow Function
    var add = (a, b, c) => this.num + a + b + c;

    // call
    console.log(add.call(obj, 1, 2, 3)) // result 2026

    // apply
    const arr = [1, 2, 3]
    console.log(add.apply(obj, arr)) // result 2026

    // bind
    const bound = add.bind(obj)
    console.log(bound(1, 2, 3)) // result 2026

Perhaps the greatest benefit of using Arrow functions is with DOM-level methods (setTimeout, setInterval, addEventListener) that usually required some kind of closure, call, apply or bind to ensure the function executed in the proper scope.

**Traditional Example:**

    var obj = {
        count : 10,
        doSomethingLater : function (){
            setTimeout(function(){ // the function executes on the window scope
                this.count++;
                console.log(this.count);
            }, 300);
        }
    }

    obj.doSomethingLater(); // console prints "NaN", because the property "count" is not in the window scope.

**Arrow Example:**

    var obj = {
        count : 10,
        doSomethingLater : function(){ // of course, arrow functions are not suited for methods
            setTimeout( () => { // since the arrow function was created within the "obj", it assumes the object's "this"
                this.count++;
                console.log(this.count);
            }, 300);
        }
    }

    obj.doSomethingLater();

### No binding of `arguments`

Arrow functions do not have their own [`arguments` object](arguments). Thus, in this example, `arguments` is a reference to the arguments of the enclosing scope:

    var arguments = [1, 2, 3];
    var arr = () => arguments[0];

    arr(); // 1

    function foo(n) {
      var f = () => arguments[0] + n; // foo's implicit arguments binding. arguments[0] is n
      return f();
    }

    foo(3); // 3 + 3 = 6

In most cases, using [rest parameters](rest_parameters) is a good alternative to using an `arguments` object.

    function foo(n) {
      var f = (...args) => args[0] + n;
      return f(10);
    }

    foo(1); // 11

### Use of the `new` operator

Arrow functions cannot be used as constructors and will throw an error when used with `new`.

    var Foo = () => {};
    var foo = new Foo(); // TypeError: Foo is not a constructor

### Use of `prototype` property

Arrow functions do not have a `prototype` property.

    var Foo = () => {};
    console.log(Foo.prototype); // undefined

### Use of the `yield` keyword

The `yield` keyword may not be used in an arrow function's body (except when permitted within functions further nested within it). As a consequence, arrow functions cannot be used as generators.

### Function body

Arrow functions can have either a "concise body" or the usual "block body".

In a concise body, only an expression is specified, which becomes the implicit return value. In a block body, you must use an explicit `return` statement.

    var func = x => x * x;
    // concise body syntax, implied "return"

    var func = (x, y) => { return x + y; };
    // with block body, explicit "return" needed

### Returning object literals

Keep in mind that returning object literals using the concise body syntax `params => {object:literal}` will not work as expected.

    var func = () => { foo: 1 };
    // Calling func() returns undefined!

    var func = () => { foo: function() {} };
    // SyntaxError: function statement requires a name

This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. `foo` is treated like a label, not a key in an object literal).

You must wrap the object literal in parentheses:

    var func = () => ({ foo: 1 });

### Line breaks

An arrow function cannot contain a line break between its parameters and its arrow.

    var func = (a, b, c)
      => 1;
    // SyntaxError: expected expression, got '=>'

However, this can be amended by putting the line break after the arrow or using parentheses/braces as seen below to ensure that the code stays pretty and fluffy. You can also put line breaks between arguments.

    var func = (a, b, c) =>
      1;

    var func = (a, b, c) => (
      1
    );

    var func = (a, b, c) => {
      return 1
    };

    var func = (
      a,
      b,
      c
    ) => 1;

    // no SyntaxError thrown

### Parsing order

Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with [operator precedence](../operators/operator_precedence) compared to regular functions.

    let callback;

    callback = callback || function() {}; // ok

    callback = callback || () => {};
    // SyntaxError: invalid arrow-function arguments

    callback = callback || (() => {});    // ok

## Examples

### Basic usage

    // An empty arrow function returns undefined
    let empty = () => {};

    (() => 'foobar')();
    // Returns "foobar"
    // (this is an Immediately Invoked Function Expression)

    var simple = a => a > 15 ? 15 : a;
    simple(16); // 15
    simple(10); // 10

    let max = (a, b) => a > b ? a : b;

    // Easy array filtering, mapping, ...

    var arr = [5, 6, 13, 0, 1, 18, 23];

    var sum = arr.reduce((a, b) => a + b);
    // 66

    var even = arr.filter(v => v % 2 == 0);
    // [6, 0, 18]

    var double = arr.map(v => v * 2);
    // [10, 12, 26, 0, 2, 36, 46]

    // More concise promise chains
    promise.then(a => {
      // ...
    }).then(b => {
      // ...
    });

    // Parameterless arrow functions that are visually easier to parse
    setTimeout( () => {
      console.log('I happen sooner');
      setTimeout( () => {
        // deeper code
        console.log('I happen later');
      }, 1);
    }, 1);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-arrow-function-definitions">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-arrow-function-definitions</span></a></td></tr></tbody></table>

`Arrow_functions`

45

12

22

\["The initial implementation of arrow functions in Firefox made them automatically strict. This has been changed as of Firefox 24. The use of `'use strict';` is now required.", "Prior to Firefox 39, a line terminator (`\\n`) was incorrectly allowed after arrow function arguments. This has been fixed to conform to the ES2015 specification and code like `() \\n => {}` will now throw a `SyntaxError` in this and later versions."\]

No

32

10

45

45

22

\["The initial implementation of arrow functions in Firefox made them automatically strict. This has been changed as of Firefox 24. The use of `'use strict';` is now required.", "Prior to Firefox 39, a line terminator (`\\n`) was incorrectly allowed after arrow function arguments. This has been fixed to conform to the ES2015 specification and code like `() \\n => {}` will now throw a `SyntaxError` in this and later versions."\]

32

10

5.0

`trailing_comma`

58

12

52

No

45

10

58

58

52

43

10

7.0

## See also

-   ["ES6 In Depth: Arrow functions" on hacks.mozilla.org](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions</a>

# Math.asin()

The `Math.asin()` function returns the arcsine (in radians) of a number, that is

$$\\forall x \\in \\lbrack{- 1};1\\rbrack,\\;\\mathtt{\\operatorname{Math.asin}(x)} = \\arcsin(x) = \\text{the\\ unique}\\; y \\in \\left\\lbrack {- \\frac{\\pi}{2};\\frac{\\pi}{2}} \\right\\rbrack\\,\\text{such\\ that}\\;\\sin(y) = x$$

## Syntax

    Math.asin(x)

### Parameters

`x`  
A number.

### Return value

The arcsine (in radians) of the given number if it's between **-1** and **1**; otherwise, [`NaN`](../nan).

## Description

The `Math.asin()` method returns a numeric value between $- \\frac{\\pi}{2}$ and $\\frac{\\pi}{2}$ radians for x between -1 and 1. If the value of x is outside this range, it returns [`NaN`](../nan).

Because `asin()` is a static method of `Math`, you always use it as `Math.asin()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.asin()

    Math.asin(-2);  // NaN
    Math.asin(-1);  // -1.5707963267948966 (-pi/2)
    Math.asin(0);   // 0
    Math.asin(0.5); // 0.5235987755982989
    Math.asin(1);   // 1.5707963267948966 (pi/2)
    Math.asin(2);   // NaN

For values less than -1 or greater than 1, `Math.asin()` returns [`NaN`](../nan).

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.asin">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.asin</span></a></td></tr></tbody></table>

`asin`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.acos()`](acos)
-   [`Math.atan()`](atan)
-   [`Math.atan2()`](atan2)
-   [`Math.cos()`](cos)
-   [`Math.sin()`](sin)
-   [`Math.tan()`](tan)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/asin" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/asin</a>

# Math.asinh()

The `Math.asinh()` function returns the hyperbolic arcsine of a number, that is

`Math.asinh` ` (``x``) ` = arsinh (_x_) = the unique *y* such that sinh (_y_) = *x*

## Syntax

    Math.asinh(x)

### Parameters

`x`  
A number.

### Return value

The hyperbolic arcsine of the given number.

## Description

Because `asinh()` is a static method of `Math`, you always use it as `Math.asinh()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.asinh()

    Math.asinh(1);  // 0.881373587019543
    Math.asinh(0);  // 0

## Polyfill

`Math.asinh` can be emulated with the following function:

    if (!Math.asinh) Math.asinh = function(x) {
        var absX = Math.abs(x), w
        if (absX < 3.725290298461914e-9) // |x| < 2^-28
            return x
        if (absX > 268435456) // |x| > 2^28
            w = Math.log(absX) + Math.LN2
        else if (absX > 2) // 2^28 >= |x| > 2
            w = Math.log(2 * absX + 1 / (Math.sqrt(x * x + 1) + absX))
        else
            var t = x * x, w = Math.log1p(absX + t / (1 + Math.sqrt(1 + t)))

        return x > 0 ? w : -w
    }

`Math.log1p` may also have to be polyfilled; see [Math.log1p](log1p) for details.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.asinh">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.asinh</span></a></td></tr></tbody></table>

`asinh`

38

12

25

No

25

8

38

38

25

25

8

3.0

## See also

-   [`Math.acosh()`](acosh)
-   [`Math.atanh()`](atanh)
-   [`Math.cosh()`](cosh)
-   [`Math.sinh()`](sinh)
-   [`Math.tanh()`](tanh)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/asinh" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/asinh</a>

# BigInt.asIntN()

The `BigInt.asIntN` static method clamps a BigInt value to a signed integer value, and returns that value.

## Syntax

    BigInt.asIntN(bits, bigint);

### Parameters

`bits`  
The amount of bits available for the integer size.

`bigint`  
The BigInt value to clamp to fit into the supplied bits.

### Returns

The value of `bigint` modulo 2<sup>`bits`</sup>, as a signed integer.

## Examples

### Staying in 64-bit ranges

The `BigInt.asIntN()` method can be useful to stay in the range of 64-bit arithmetic.

    const max = 2n ** (64n - 1n) - 1n;

    BigInt.asIntN(64, max);
    // ↪ 9223372036854775807n

    BigInt.asIntN(64, max + 1n);
    // ↪ -9223372036854775808n
    // negative because of overflow

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-bigint.asintn">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-bigint.asintn</span></a></td></tr></tbody></table>

`asIntN`

67

79

68

No

54

14

67

67

68

48

14

9.0

## See also

-   [`BigInt`](../bigint)
-   [`BigInt.asUintN()`](asuintn)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asIntN" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asIntN</a>

# Object.assign()

The `Object.assign()` method copies all [enumerable](propertyisenumerable) [own properties](hasownproperty) from one or more _source objects_ to a _target object_. It returns the target object.

## Syntax

    Object.assign(target, ...sources)

### Parameters

`target`  
The target object — what to apply the sources' properties to, which is returned after it is modified.

`sources`  
The source object(s) — objects containing the properties you want to apply.

### Return value

The target object.

## Description

Properties in the target object are overwritten by properties in the sources if they have the same [key](keys). Later sources' properties 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](../../functions/get) and [setters](../../functions/set). Therefore it _assigns_ properties, versus 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, use [`Object.getOwnPropertyDescriptor()`](getownpropertydescriptor) and [`Object.defineProperty()`](defineproperty) instead.

Both [`String`](../string) and [`Symbol`](../symbol) properties are copied.

In case of an error, for example if a property is non-writable, a [`TypeError`](../typeerror) is raised, and the `target` object is changed if any properties are added before the error is raised.

**Note:** `Object.assign()` does not throw on [`null`](../null) or [`undefined`](../undefined) sources.

## Polyfill

This [polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill) doesn't support symbol properties, since ES5 doesn't have symbols anyway:

    if (typeof Object.assign !== 'function') {
      // Must be writable: true, enumerable: false, configurable: true
      Object.defineProperty(Object, "assign", {
        value: function assign(target, varArgs) { // .length of function is 2
          'use strict';
          if (target === null || target === undefined) {
            throw new TypeError('Cannot convert undefined or null to object');
          }

          var to = Object(target);

          for (var index = 1; index < arguments.length; index++) {
            var nextSource = arguments[index];

            if (nextSource !== null && nextSource !== undefined) {
              for (var nextKey in nextSource) {
                // Avoid bugs when hasOwnProperty is shadowed
                if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
                  to[nextKey] = nextSource[nextKey];
                }
              }
            }
          }
          return to;
        },
        writable: true,
        configurable: true
      });
    }

## Examples

### Cloning an object

    const obj = { a: 1 };
    const copy = Object.assign({}, obj);
    console.log(copy); // { a: 1 }

### Warning for Deep Clone

For deep cloning, we need to use alternatives, because `Object.assign()` copies property values.

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

    function test() {
      'use strict';

      let obj1 = { a: 0 , b: { c: 0}};
      let obj2 = Object.assign({}, obj1);
      console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}

      obj1.a = 1;
      console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}}
      console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}

      obj2.a = 2;
      console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}}
      console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 0}}

      obj2.b.c = 3;
      console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 3}}
      console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 3}}

      // Deep Clone
      obj1 = { a: 0 , b: { c: 0}};
      let obj3 = JSON.parse(JSON.stringify(obj1));
      obj1.a = 4;
      obj1.b.c = 4;
      console.log(JSON.stringify(obj3)); // { "a": 0, "b": { "c": 0}}
    }

    test();

### Merging objects

    const o1 = { a: 1 };
    const o2 = { b: 2 };
    const o3 = { c: 3 };

    const obj = Object.assign(o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    console.log(o1);  // { a: 1, b: 2, c: 3 }, target object itself is changed.

### Merging objects with same properties

    const o1 = { a: 1, b: 1, c: 1 };
    const o2 = { b: 2, c: 2 };
    const o3 = { c: 3 };

    const obj = Object.assign({}, o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }

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

### Copying symbol-typed properties

    const o1 = { a: 1 };
    const o2 = { [Symbol('foo')]: 2 };

    const obj = Object.assign({}, o1, o2);
    console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
    Object.getOwnPropertySymbols(obj); // [Symbol(foo)]

### Properties on the prototype chain and non-enumerable properties cannot be copied

    const obj = Object.create({ foo: 1 }, { // foo is on obj's prototype chain.
      bar: {
        value: 2  // bar is a non-enumerable property.
      },
      baz: {
        value: 3,
        enumerable: true  // baz is an own enumerable property.
      }
    });

    const copy = Object.assign({}, obj);
    console.log(copy); // { baz: 3 }

### Primitives will be wrapped to objects

    const v1 = 'abc';
    const v2 = true;
    const v3 = 10;
    const v4 = Symbol('foo');

    const obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
    // Primitives will be wrapped, null and undefined will be ignored.
    // Note, only string wrappers can have own enumerable properties.
    console.log(obj); // { "0": "a", "1": "b", "2": "c" }

### Exceptions will interrupt the ongoing copying task

    const target = Object.defineProperty({}, 'foo', {
      value: 1,
      writable: false
    }); // target.foo is a read-only property

    Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
    // TypeError: "foo" is read-only
    // The Exception is thrown when assigning target.foo

    console.log(target.bar);  // 2, the first source was copied successfully.
    console.log(target.foo2); // 3, the first property of the second source was copied successfully.
    console.log(target.foo);  // 1, exception is thrown here.
    console.log(target.foo3); // undefined, assign method has finished, foo3 will not be copied.
    console.log(target.baz);  // undefined, the third source will not be copied either.

### Copying accessors

    const obj = {
      foo: 1,
      get bar() {
        return 2;
      }
    };

    let copy = Object.assign({}, obj);
    console.log(copy);
    // { foo: 1, bar: 2 }
    // The value of copy.bar is obj.bar's getter's return value.

    // This is an assign function that copies full descriptors
    function completeAssign(target, ...sources) {
      sources.forEach(source => {
        let descriptors = Object.keys(source).reduce((descriptors, key) => {
          descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
          return descriptors;
        }, {});

        // By default, Object.assign copies enumerable Symbols, too
        Object.getOwnPropertySymbols(source).forEach(sym => {
          let descriptor = Object.getOwnPropertyDescriptor(source, sym);
          if (descriptor.enumerable) {
            descriptors[sym] = descriptor;
          }
        });
        Object.defineProperties(target, descriptors);
      });
      return target;
    }

    copy = completeAssign({}, obj);
    console.log(copy);
    // { foo:1, get bar() { return 2 } }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.assign">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.assign</span></a></td></tr></tbody></table>

`assign`

45

12

34

No

32

9

45

45

34

32

9

5.0

## See also

-   [`Object.defineProperties()`](defineproperties)
-   [Enumerability and ownership of properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
-   [Spread in object literals](../../operators/spread_syntax#spread_in_object_literals)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign</a>

# BigInt.asUintN()

The `BigInt.asUintN` static method clamps a BigInt value to an unsigned integer value, and returns that value.

## Syntax

    BigInt.asUintN(bits, bigint);

### Parameters

`bits`  
The amount of bits available for the integer size.

`bigint`  
The BigInt value to clamp to fit into the supplied bits.

### Returns

The value of `bigint` modulo 2<sup>`bits`</sup>, as an unsigned integer.

## Examples

### Staying in 64-bit ranges

The `BigInt.asUintN()` method can be useful to stay in the range of 64-bit arithmetic.

    const max = 2n ** 64n - 1n;

    BigInt.asUintN(64, max);
    // ↪ 18446744073709551615n

    BigInt.asUintN(64, max + 1n);
    // ↪ 0n
    // zero because of overflow

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-bigint.asuintn">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-bigint.asuintn</span></a></td></tr></tbody></table>

`asUintN`

67

79

68

No

54

14

67

67

68

48

14

9.0

## See also

-   [`BigInt`](../bigint)
-   [`BigInt.asIntN()`](asintn)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asUintN" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asUintN</a>

# async function

An async function is a function declared with the `async` keyword, and the `await` keyword is permitted within them. The `async` and `await` keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

Async functions may also be defined [as expressions](../operators/async_function).

## Syntax

    async function name([param[, param[, ...param]]]) {
       statements
    }

### Parameters

`name`  
The function's name.

`param`  
The name of an argument to be passed to the function.

`statements`  
The statements comprising the body of the function. The `await` mechanism may be used.

### Return value

A [`Promise`](../global_objects/promise) which will be resolved with the value returned by the async function, or rejected with an exception thrown from, or uncaught within, the async function.

## Description

Async functions can contain zero or more [`await`](../operators/await) expressions. Await expressions make promise-returning functions behave as though they're synchronous by suspending execution until the returned promise is fulfilled or rejected. The resolved value of the promise is treated as the return value of the await expression. Use of `async` and `await` enables the use of ordinary `try` / `catch` blocks around asynchronous code.

**Note:** The `await` keyword is only valid inside async functions within regular JavaScript code. If you use it outside of an async function's body, you will get a [`SyntaxError`](../global_objects/syntaxerror).

`await` can be used on its own with [JavaScript modules.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)

**Note:** The purpose of `async`/`await` is to simplify the syntax necessary to consume promise-based APIs. The behavior of `async`/`await` is similar to combining [generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) and promises.

Async functions always return a promise. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.

For example, the following:

    async function foo() {
       return 1
    }

...is similar to:

    function foo() {
       return Promise.resolve(1)
    }

**Checking equality with `Promise.resolve` vs `async` return**

Even though the return value of an async function behaves as if it's wrapped in a `Promise.resolve`, they are not equivalent.

An async function will return a different _reference_, whereas `Promise.resolve` returns the same reference if the given value is a promise.

It can be a problem when you want to check the equality of a promise and a return value of an async function.

    const p = new Promise((res, rej) => {
      res(1);
    })

    async function asyncReturn() {
      return p;
    }

    function basicReturn() {
      return Promise.resolve(p);
    }

    console.log(p === basicReturn()); // true
    console.log(p === asyncReturn()); // false

The body of an async function can be thought of as being split by zero or more await expressions. Top-level code, up to and including the first await expression (if there is one), is run synchronously. In this way, an async function without an await expression will run synchronously. If there is an await expression inside the function body, however, the async function will always complete asynchronously.

For example:

    async function foo() {
       await 1
    }

...is equivalent to:

    function foo() {
       return Promise.resolve(1).then(() => undefined)
    }

Code after each await expression can be thought of as existing in a `.then` callback. In this way a promise chain is progressively constructed with each reentrant step through the function. The return value forms the final link in the chain.

In the following example, we successively await two promises. Progress moves through function `foo` in three stages.

1.  The first line of the body of function `foo` is executed synchronously, with the await expression configured with the pending promise. Progress through `foo` is then suspended and control is yielded back to the function that called `foo`.
2.  Some time later, when the first promise has either been fulfilled or rejected, control moves back into `foo`. The result of the first promise fulfillment (if it was not rejected) is returned from the await expression. Here `1` is assigned to `result1`. Progress continues, and the second await expression is evaluated. Again, progress through `foo` is suspended and control is yielded.
3.  Some time later, when the second promise has either been fulfilled or rejected, control re-enters `foo`. The result of the second promise resolution is returned from the second await expression. Here `2` is assigned to `result2`. Control moves to the return expression (if any). The default return value of `undefined` is returned as the resolution value of the current promise.

<!-- -->

    async function foo() {
       const result1 = await new Promise((resolve) => setTimeout(() => resolve('1')))
       const result2 = await new Promise((resolve) => setTimeout(() => resolve('2')))
    }
    foo()

Note how the promise chain is not built-up in one go. Instead, the promise chain is constructed in stages as control is successively yielded from and returned to the async function. As a result, we must be mindful of error handling behavior when dealing with concurrent asynchronous operations.

For example, in the following code an unhandled promise rejection error will be thrown, even if a `.catch` handler has been configured further along the promise chain. This is because `p2` will not be "wired into" the promise chain until control returns from `p1`.

    async function foo() {
       const p1 = new Promise((resolve) => setTimeout(() => resolve('1'), 1000))
       const p2 = new Promise((_,reject) => setTimeout(() => reject('2'), 500))
       const results = [await p1, await p2] // Do not do this! Use Promise.all or Promise.allSettled instead.
    }
    foo().catch(() => {}) // Attempt to swallow all errors...

## Examples

### Async functions and execution order

    function resolveAfter2Seconds() {
      console.log("starting slow promise")
      return new Promise(resolve => {
        setTimeout(function() {
          resolve("slow")
          console.log("slow promise is done")
        }, 2000)
      })
    }

    function resolveAfter1Second() {
      console.log("starting fast promise")
      return new Promise(resolve => {
        setTimeout(function() {
          resolve("fast")
          console.log("fast promise is done")
        }, 1000)
      })
    }

    async function sequentialStart() {
      console.log('==SEQUENTIAL START==')

      // 1. Execution gets here almost instantly
      const slow = await resolveAfter2Seconds()
      console.log(slow) // 2. this runs 2 seconds after 1.

      const fast = await resolveAfter1Second()
      console.log(fast) // 3. this runs 3 seconds after 1.
    }

    async function concurrentStart() {
      console.log('==CONCURRENT START with await==');
      const slow = resolveAfter2Seconds() // starts timer immediately
      const fast = resolveAfter1Second() // starts timer immediately

      // 1. Execution gets here almost instantly
      console.log(await slow) // 2. this runs 2 seconds after 1.
      console.log(await fast) // 3. this runs 2 seconds after 1., immediately after 2., since fast is already resolved
    }

    function concurrentPromise() {
      console.log('==CONCURRENT START with Promise.all==')
      return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => {
        console.log(messages[0]) // slow
        console.log(messages[1]) // fast
      })
    }

    async function parallel() {
      console.log('==PARALLEL with await Promise.all==')

      // Start 2 "jobs" in parallel and wait for both of them to complete
      await Promise.all([
          (async()=>console.log(await resolveAfter2Seconds()))(),
          (async()=>console.log(await resolveAfter1Second()))()
      ])
    }

    sequentialStart() // after 2 seconds, logs "slow", then after 1 more second, "fast"

    // wait above to finish
    setTimeout(concurrentStart, 4000) // after 2 seconds, logs "slow" and then "fast"

    // wait again
    setTimeout(concurrentPromise, 7000) // same as concurrentStart

    // wait again
    setTimeout(parallel, 10000) // truly parallel: after 1 second, logs "fast", then after 1 more second, "slow"

#### await and parallelism

In `sequentialStart`, execution suspends 2 seconds for the first `await`, and then another second for the second `await`. The second timer is not created until the first has already fired, so the code finishes after 3 seconds.

In `concurrentStart`, both timers are created and then `await`ed. The timers run concurrently, which means the code finishes in 2 rather than 3 seconds, i.e. the slowest timer.  
However, the `await` calls still run in series, which means the second `await` will wait for the first one to finish. In this case, the result of the fastest timer is processed after the slowest.

If you wish to safely perform two or more jobs in parallel, you must await a call to `Promise.all`, or `Promise.allSettled`.

**Warning:** The functions `concurrentStart` and `concurrentPromise` are not functionally equivalent.

In `concurrentStart`, if promise `fast` rejects before promise `slow` is fulfilled, then an unhandled promise rejection error will be raised, regardless of whether the caller has configured a catch clause.

In `concurrentPromise,` `Promise.all` wires up the promise chain in one go, meaning that the operation will fail-fast regardless of the order of rejection of the promises, and the error will always occur within the configured promise chain, enabling it to be caught in the normal way.

### Rewriting a Promise chain with an async function

An API that returns a [`Promise`](../global_objects/promise) will result in a promise chain, and it splits the function into many parts. Consider the following code:

    function getProcessedData(url) {
      return downloadData(url) // returns a promise
        .catch(e => {
          return downloadFallbackData(url)  // returns a promise
        })
        .then(v => {
          return processDataInWorker(v)  // returns a promise
        })
    }

it can be rewritten with a single async function as follows:

    async function getProcessedData(url) {
      let v
      try {
        v = await downloadData(url)
      } catch(e) {
        v = await downloadFallbackData(url)
      }
      return processDataInWorker(v)
    }

In the above example, notice there is no `await` statement after the `return` keyword, although that would be valid too: The return value of an `async function` is implicitly wrapped in [`Promise.resolve`](../global_objects/promise/resolve) - if it's not already a promise itself (as in this example).

**Note:** The implicit wrapping of return values in [`Promise.resolve`](../global_objects/promise/resolve) does not imply that `return await promiseValue` is functionally equivalent to `return promiseValue`.

Consider the following rewrite of the above code. It returns `null` if `processDataInWorker` rejects with an error:

    async function getProcessedData(url) {
      let v
      try {
        v = await downloadData(url)
      } catch(e) {
        v = await downloadFallbackData(url)
      }
      try {
        return await processDataInWorker(v)  // Note the `return await` vs. just `return`
      } catch (e) {
        return null
      }
    }

Writing `return processDataInWorker(v)` would have caused the [`Promise`](../global_objects/promise) returned by the function to reject, instead of resolving to `null` if `processDataInWorker(v)` rejects.

This highlights the subtle difference between `return foo;` and `return await foo;` — `return foo` immediately returns `foo` and never throws, even if `foo` is a Promise that rejects. `return await foo` will _wait_ for `foo` to resolve or reject if it's a Promise, and throws **before returning** if it rejects.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-async-function-definitions">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-async-function-definitions</span></a></td></tr></tbody></table>

`async_function`

55

15

52

No

42

10.1

55

55

52

42

10.3

6.0

## See also

-   [`async function expression`](../operators/async_function)
-   [`AsyncFunction`](../global_objects/asyncfunction) object
-   [`await`](../operators/await)
-   ["Decorating Async Javascript Functions" on "innolitics.com"](https://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function</a>

# AsyncFunction

The `AsyncFunction` creates a new [async function](../statements/async_function) object. In JavaScript, every asynchronous function is actually an `AsyncFunction` object.

Note that `AsyncFunction` is _not_ a global object. It can be obtained with the following code:

    Object.getPrototypeOf(async function(){}).constructor

## Syntax

    new AsyncFunction(arg0, functionBody)
    new AsyncFunction(arg0, arg1, functionBody)
    new AsyncFunction(arg0, arg1, ...argN, functionBody)

### Parameters

`arg1, arg2, ... argN`  
Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "`x`", "`theValue`", or "`a,b`".

`functionBody`  
A string containing the JavaScript statements comprising the function definition.

## Description

[`async function`](../statements/async_function) objects created with the `AsyncFunction` constructor are parsed when the function is created. This is less efficient than declaring an async function with an [`async function expression`](../statements/async_function) and calling it within your code, because such functions are parsed with the rest of the code.

All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.

**Note:** [async functions](../statements/async_function) created with the `AsyncFunction` constructor do not create closures to their creation contexts; they are always created in the global scope.

When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the `AsyncFunction` constructor was called.

This is different from using [`eval`](eval) with code for an async function expression.

Invoking the `AsyncFunction` constructor as a function (without using the `new` operator) has the same effect as invoking it as a constructor.

## Examples

### Creating an async function from an AsyncFunction() constructor

    function resolveAfter2Seconds(x) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(x);
        }, 2000);
      });
    }

    let AsyncFunction = Object.getPrototypeOf(async function(){}).constructor

    let a = new AsyncFunction('a',
                              'b',
                              'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');

    a(10, 20).then(v => {
      console.log(v); // prints 30 after 4 seconds
    });

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-async-function-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-async-function-objects</span></a></td></tr></tbody></table>

`AsyncFunction`

55

15

52

No

42

10.1

55

55

52

42

10.3

6.0

## See also

-   [async function function](../statements/async_function)
-   [async function expression](../operators/async_function)
-   [`Function`](function)
-   [function statement](../statements/function)
-   [function expression](../operators/function)
-   [Functions and function scope](../functions)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction</a>

# Symbol.asyncIterator

The `Symbol.asyncIterator` well-known symbol specifies the default AsyncIterator for an object. If this property is set on an object, it is an async iterable and can be used in a `for await...of` loop.

## Description

The `Symbol.asyncIterator` symbol is a builtin symbol that is used to access an object's `@@asyncIterator` method. In order for an object to be async iterable, it must have a `Symbol.asyncIterator` key.

Property attributes of `Symbol.asyncIterator`

Writable

no

Enumerable

no

Configurable

no

## Examples

### User-defined Async Iterables

You can define your own async iterable by setting the `[Symbol.asyncIterator]` property on an object.

    const myAsyncIterable = {
        async* [Symbol.asyncIterator]() {
            yield "hello";
            yield "async";
            yield "iteration!";
        }
    };

    (async () => {
        for await (const x of myAsyncIterable) {
            console.log(x);
            // expected output:
            //    "hello"
            //    "async"
            //    "iteration!"
        }
    })();

When creating an API, remember that async iterables are designed to represent something _iterable_ — like a stream of data or a list —, not to completely replace callbacks and events in most situations.

### Built-in Async Iterables

There are currently no built-in JavaScript objects that have the `[Symbol.asyncIterator]` key set by default. However, WHATWG Streams are set to be the first built-in object to be async iterable, with `[Symbol.asyncIterator]` recently landing in the spec.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-symbol.asynciterator">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-symbol.asynciterator</span></a></td></tr></tbody></table>

`asyncIterator`

63

79

57

No

50

11.1

63

63

57

46

No

8.0

## See also

-   [Iteration protocols](../../iteration_protocols)
-   [for await... of](../../statements/for-await...of)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator</a>

# Array.prototype.at()

The `at()` method takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.

This is not to suggest there is anything wrong with using the square bracket notation. For example `array[0]` would return the first item. However instead of using [`array.length`](length) for latter items; e.g. `array[array.length-1]` for the last item, you can call `array.at(-1)`. [(See the examples below)](#examples)

## Syntax

    at(index)

### Parameters

`index`  
The index (position) of the array element to be returned. Supports relative indexing from the end of the array when passed a negative index; i.e. if a negative number is used, the element returned will be found by counting back from the end of the array.

### Return value

The element in the array matching the given index. Returns [`undefined`](../undefined) if the given index can not be found.

## Examples

### Return the last value of an array

The following example provides a function which returns the last element found in a specified array.

    // Our array with items
    const cart = ['apple', 'banana', 'pear'];

    // A function which returns the last item of a given array
    function returnLast(arr) {
      return arr.at(-1);
    }

    // Get the last item of our array 'cart'
    const item1 = returnLast(cart);
    console.log(item1); // Logs: 'pear'

    // Add an item to our 'cart' array
    cart.push('orange');
    const item2 = returnLast(cart);
    console.log(item2); // Logs: 'orange'

### Comparing methods

This example compares different ways to select the penultimate (last but one) item of an [`Array`](../array). While all the methods shown below are valid, this example highlights the succinctness and readability of the `at()` method.

    // Our array with items
    const colors = ['red', 'green', 'blue'];

    // Using length property
    const lengthWay = colors[colors.length-2];
    console.log(lengthWay); // Logs: 'green'

    // Using slice() method. Note an array is returned
    const sliceWay = colors.slice(-2, -1);
    console.log(sliceWay[0]); // Logs: 'green'

    // Using at() method
    const atWay = colors.at(-2);
    console.log(atWay); // Logs: 'green'

# Math.atan()

The `Math.atan()` function returns the arctangent (in radians) of a number, that is

$$\\mathtt{\\operatorname{Math.atan}(x)} = \\arctan(x) = \\text{the\\ unique}\\; y \\in \\left\\lbrack {- \\frac{\\pi}{2};\\frac{\\pi}{2}} \\right\\rbrack\\,\\text{such\\ that}\\;\\tan(y) = x$$

## Syntax

    Math.atan(x)

### Parameters

`x`  
A number.

### Return value

The arctangent (in radians) of the given number.

## Description

The `Math.atan()` method returns a numeric value between $- \\frac{\\pi}{2}$ and $\\frac{\\pi}{2}$ radians.

Because `atan()` is a static method of `Math`, you always use it as `Math.atan()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.atan()

    Math.atan(1);   // 0.7853981633974483
    Math.atan(0);   // 0
    Math.atan(-0);  // -0

    Math.atan(Infinity);   //  1.5707963267948966
    Math.atan(-Infinity);  // -1.5707963267948966

    // The angle that the line [(0,0);(x,y)] forms with the x-axis in a Cartesian coordinate system
    Math.atan(y / x);

Note that you may want to avoid using **±**`Infinity` for stylistic reasons. In this case, [`Math.atan2()`](atan2) with `0` as the second argument may be a better solution.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.atan">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.atan</span></a></td></tr></tbody></table>

`atan`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.acos()`](acos)
-   [`Math.asin()`](asin)
-   [`Math.atan2()`](atan2)
-   [`Math.cos()`](cos)
-   [`Math.sin()`](sin)
-   [`Math.tan()`](tan)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan</a>

# Math.atan2()

The `Math.atan2()` function returns the angle in the plane (in radians) between the positive x-axis and the ray from (0,0) to the point (x,y), for `Math.atan2(y,x)`.

## Syntax

    Math.atan2(y, x)

### Parameters

`y`  
The y coordinate of the point.

`x`  
The x coordinate of the point

### Return value

The angle in radians (in \[ − *π*, *π*\]) between the positive x-axis and the ray from (0,0) to the point (x,y).

## Description

The `Math.atan2()` method returns a numeric value between -π and π representing the angle theta of an `(x, y)` point. This is the counterclockwise angle, measured in radians, between the positive X axis, and the point `(x, y)`. Note that the arguments to this function pass the y-coordinate first and the x-coordinate second.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAMAAABOo35HAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAEIUExURUdwTP8AAP8AAP8AAP8AAP8AAP8AAAAAAP8AAP8AAAAA//8AAP8AAAAA//8AAAAA//8AAAAA//8AAAAA//8AAP8AAP8AAP8AAP8AAAAA//8AAP8AAAAA/wAA/wAA//8AAP8AAAAA//kACQAA//8AAAAA//8AAAAA//8AAAAA//8AAAAA/wAA/wAA/wAA/wAA/wAA//8AAP8AAAAA//8AAP8AAP8AAP8AAP8AAAAA/wAA//8AAAAA/wAA//8AAAAA//8AAAAA//8AAAAA//8AAAAA//8AAAgAAP8AAAAA/wAAVOIAHLIATDwAwnUAACkAAFYAAAAAAP8AAAAA/38AAAAAfxQA6z8AAAj3Pb0AAABRdFJOUwDjCBXsHASAAf1lv/kBz7uB+HBPxhH0OT1vLQ2x4SpLqM1EDHmN2sUhBYgdWT8k8+laX3qRrzRTJ/zXuJiEmqlpM7MUYxiixp6iv/382+6Zwr76z0sAAAeWSURBVHja7d15U+JIGMfxAIEhcgiIoHgAiveF14zHOOM515527+y+/3eyHRQIiNhItsrt/v7+GMpIWVOfSj95cnTHcd5g3t3fv3MIWGCBBRZYYBGwwAILLLDAImCBBRZYYIFFwAILLLDAAouABZYdWPvZT0n1kTgurj9uKWdzrc9KtmE31lx5qZLo2ZI8FwX1cdT6t5VEpDTnf34TZZux1mueEMJt9HDFIl7ZqYpal68hLtXHdClr8zBcKvlWwhPF6eDmcjpScbPRAF96VY3MgjiwGOsk3bLyuVLJ4C8KIu2uBzfUxIyTXHWjFmOdt61U9nvKVkRs9nxzRg3KqshZfDRc71KpXSto1RCu11vLs+nYtRe3GGs/gCXSgXFY9WonpUgs+N1b8cmr2dxnXQaxRLcexd3VOedApPxDZFyI9/62qCtU2bIY60PQqtTZs6LZtO/zpVW2DkTxYeuRyDo2Y8UD9d077xrWWsV+7kst7pN9aB8gb+0+3TkOaFUHfyUSeehX/0d9w3+EFdi1jgd/oyIa7SG7afmJdK49BsX1M7tNIf14TEx563ZjLakdq6iOciJ7kHzmK7HH1mpu89LySzTHwm8P4ifTjmn5D7ASm72NJ1jPxr9CNe2ApXWuEyk7xiZkrEpJpJfA0sr0qjoGRsHSSVIdCEsnDEOtzKjm6oMDll6q7qYDllZ/5Z8WJsDSskrlko7ZCQ/rSIgaWJrdqCruBbC0clIS4phhqJeiEKtzDlhaiRdLFQcs3YPhewcsnbOcmfOYY0PCwIq7IlIBS28AquLuxsHS7Ua9GYahVpZUN9pwwNIbhTnP+G40xAJfnXPA0ipYZceejIlVEF4BLL2U00IcgaWVWESIYgIsraRs6UbDwFpyvSUHLM2sHzhg6eSkkXQsy6uxollxPQ2WXr4Ika6ApRV/ZsABw1Ar71U3+skBS68dTZn8aFHYwzCxGXfA0slBzLEyr8GqepElsDTbdleIX7fB0uxGxS9/y5UMWC/nm+pGf5NSzi+D9VKSm0LcLs8rrfoNWC/X9yPHyVworbMtsIY2o527qROnUi7sgjVkDJ57nQdHp/JSNhfBejY5Ibz2o0WZnT3b9q2RsPxpl7nujy2tLbAGJu6Kh1UZOlpqJJ7dgTUoM67om3bpa9Wf6bfuLurNhcntDVuHYbzY+yxkJjOljonzA3t5f4z6WVu2Easy8P7EhPJYGbB9a08uTFztrJzKeQuxKqXzgfcnVpTWxNPNn2WzVfpnpZyyDsufdnk96BcZdeaTv+rfenMqDx9+vWDQrqWJNWTa5XJdNRD9hWlbysX2nreXsQyrMWTa5e7e0yLfJZqSctcurERKDFk0RnnI2f6SVX8cpYsGFS3NPSuxmRryaJEq8vnes8Q1OdlutwbWf3Oxon4nOuwxrA1VttZ6BmJdNicf82SvMxvr04sLWyyqTv6wFysQm7D2hfBeeqrhsG8g1mV94iGzVmFVShrzeTNrvQOxW7NubKpZc6ta0y4X1UnidvBouNb+hU1Hw31PbxGQlZ7WdEU2u33Foj3DsOpqLQKy3JTyItjBP7aiF3JvwxKsEVbDUj75zmXTu9N2WT+z5twwFtFe2CLj1/iPnR/nZfPmkdCSqw7+tEv9R9Z2pDztnAbu5uXZ1N3uYb6vWzUXa6Rpl5mMata/d08Y8w8dqUl3YodhjboIyJUMXmFY/L4g82eHJj0RMQQroTqs2kjPuk8Gq5Z/zuiYlWF7Vrw44iIgqmrtmfy0yLNYSbVPJUZ9bnSt73zaFqxC6hUPjqpGoblhH9aMJyKjrxG9sWBSW6WL9dpplxfSpPuEeliJ10673FLdw5ZlWJeqG33d09uTJpf4Z/asnPfKRUBUiT+zrsCXXznzcmPPoOtXGljR1DjzJz4bPA4HYNXGWthCjcO6PViF8aZdLucNul//EtbYi4DMG3Q75wWsqN+NjjXtclbKz7bsWTOuO96rcBbV+WHGEiwnPuaSdJmmlFc2YFXDWNjiu0E37J/HSq67YSxsMWFs0Qpi+dMuQ3i/0JWxZzxBLH/aZQiL/m6oTmvZdKxb1Y2G8mbGupQ7pmPFUiEtAvLR1AofHIaJQjiLgMz23REzDiuZC29hiynZeZTNTKycCO+NaLtSLpiMVe2ddjnm4fBUyg1zsZ5MuxwvC4ZepWlhhdSNdrJmaO/Qwko2vHSYr6CYN/RWa7tmhbok3UdDr/8prD9Cf03AhaE3LRTW717Ib0TLzA6eCmwC1l+hL5BsNFbYb7ucCOF8590bzNf7+3/+DPuP/vj588eYf8K5J9oBaxSsNzoMv77F/9ebv55FwAILLLDAAouABRZYYIEFFgELLLDAAgssAhZYYIEFFlgELLDAAgsssAhYYIEFFlhgEbDAAgsssMAiYIEFFlhggUXAAgsssMACi4AFFlhggQUWAQsssMACCywCFlhggQUWWAQssMACCyywCFhggQUWWGARsMACCyywwCJggQUWWGCBRcACCyywwAKLgAUWWGCBBRYBCyywwAILLAIWWGCBBRZYBCywwAILLLAIWGCBBRZYYBGwwAILLLDAImCBBRZYYIFFwAILrED+BYunj5XslxVDAAAAAElFTkSuQmCC" alt="A simple diagram showing the angle returned by atan2(y, x)" width="300" height="300" />

`Math.atan2()` is passed separate `x` and `y` arguments, and `Math.atan()` is passed the ratio of those two arguments.

Because `atan2()` is a static method of `Math`, you always use it as `Math.atan2()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.atan2()

    Math.atan2(90, 15); // 1.4056476493802699
    Math.atan2(15, 90); // 0.16514867741462683

    Math.atan2(±0, -0);               // ±PI.
    Math.atan2(±0, +0);               // ±0.
    Math.atan2(±0, -x);               // ±PI for x > 0.
    Math.atan2(±0, x);                // ±0 for x > 0.
    Math.atan2(-y, ±0);               // -PI/2 for y > 0.
    Math.atan2(y, ±0);                // PI/2 for y > 0.
    Math.atan2(±y, -Infinity);        // ±PI for finite y > 0.
    Math.atan2(±y, +Infinity);        // ±0 for finite y > 0.
    Math.atan2(±Infinity, x);         // ±PI/2 for finite x.
    Math.atan2(±Infinity, -Infinity); // ±3*PI/4.
    Math.atan2(±Infinity, +Infinity); // ±PI/4.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.atan2">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.atan2</span></a></td></tr></tbody></table>

`atan2`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.acos()`](acos)
-   [`Math.asin()`](asin)
-   [`Math.atan()`](atan)
-   [`Math.cos()`](cos)
-   [`Math.sin()`](sin)
-   [`Math.tan()`](tan)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2</a>

# Math.atanh()

The `Math.atanh()` function returns the hyperbolic arctangent of a number, that is

∀*x* ∈ (−1,1), `Math.atanh` ` (``x``) ` = arctanh (_x_) = the unique *y* such that tanh (_y_) = *x*

## Syntax

    Math.atanh(x)

### Parameters

`x`  
A number.

### Return value

The hyperbolic arctangent of the given number.

## Description

Because `atanh()` is a static method of `Math`, you always use it as `Math.atanh()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.atanh()

    Math.atanh(-2);  // NaN
    Math.atanh(-1);  // -Infinity
    Math.atanh(0);   // 0
    Math.atanh(0.5); // 0.5493061443340548
    Math.atanh(1);   // Infinity
    Math.atanh(2);   // NaN

For values greater than 1 or less than -1, [`NaN`](../nan) is returned.

## Polyfill

For |_x_| &lt; 1, we have $\\operatorname{artanh}(x) = \\frac{1}{2}\\ln\\left( \\frac{1 + x}{1 - x} \\right)$ so this can be emulated by the following function:

    Math.atanh = Math.atanh || function(x) {
      return Math.log((1+x)/(1-x)) / 2;
    };

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.atanh">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.atanh</span></a></td></tr></tbody></table>

`atanh`

38

12

25

No

25

8

38

38

25

25

8

3.0

## See also

-   [`Math.acosh()`](acosh)
-   [`Math.asinh()`](asinh)
-   [`Math.cosh()`](cosh)
-   [`Math.sinh()`](sinh)
-   [`Math.tanh()`](tanh)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atanh" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atanh</a>

# Atomics

The `Atomics` object provides atomic operations as static methods. They are used with [`SharedArrayBuffer`](sharedarraybuffer) and [`ArrayBuffer`](arraybuffer) objects.

## Description

The Atomic operations are installed on an `Atomics` module. Unlike the other global objects, `Atomics` is not a constructor. You cannot use it with a [`new` operator](../operators/new) or invoke the `Atomics` object as a function. All properties and methods of `Atomics` are static (as is the case with the [`Math`](math) object, for example).

### Atomic operations

When memory is shared, multiple threads can read and write the same data in memory. Atomic operations make sure that predictable values are written and read, that operations are finished before the next operation starts and that operations are not interrupted.

### Wait and notify

The `wait()` and `notify()` methods are modeled on Linux futexes ("fast user-space mutex") and provide ways for waiting until a certain condition becomes true and are typically used as blocking constructs.

## Static methods

[`Atomics.add()`](atomics/add)  
Adds the provided value to the existing value at the specified index of the array. Returns the old value at that index.

[`Atomics.and()`](atomics/and)  
Computes a bitwise AND on the value at the specified index of the array with the provided value. Returns the old value at that index.

[`Atomics.compareExchange()`](atomics/compareexchange)  
Stores a value at the specified index of the array, if it equals a value. Returns the old value.

[`Atomics.exchange()`](atomics/exchange)  
Stores a value at the specified index of the array. Returns the old value.

[`Atomics.isLockFree(size)`](atomics/islockfree)  
An optimization primitive that can be used to determine whether to use locks or atomic operations. Returns `true` if an atomic operation on arrays of the given element size will be implemented using a hardware atomic operation (as opposed to a lock). Experts only.

[`Atomics.load()`](atomics/load)  
Returns the value at the specified index of the array.

[`Atomics.notify()`](atomics/notify)  
Notifies agents that are waiting on the specified index of the array. Returns the number of agents that were notified.

[`Atomics.or()`](atomics/or)  
Computes a bitwise OR on the value at the specified index of the array with the provided value. Returns the old value at that index.

[`Atomics.store()`](atomics/store)  
Stores a value at the specified index of the array. Returns the value.

[`Atomics.sub()`](atomics/sub)  
Subtracts a value at the specified index of the array. Returns the old value at that index.

[`Atomics.wait()`](atomics/wait)  
Verifies that the specified index of the array still contains a value and sleeps awaiting or times out. Returns either "`ok`", "`not-equal`", or "`timed-out`". If waiting is not allowed in the calling agent then it throws an [`Error`](error) exception. (Most browsers will not allow `wait()` on the browser's main thread.)

[`Atomics.xor()`](atomics/xor)  
Computes a bitwise XOR on the value at the specified index of the array with the provided value. Returns the old value at that index.

## Examples

### Using Atomics

    const sab = new SharedArrayBuffer(1024);
    const ta = new Uint8Array(sab);

    ta[0]; // 0
    ta[0] = 5; // 5

    Atomics.add(ta, 0, 12); // 5
    Atomics.load(ta, 0); // 17

    Atomics.and(ta, 0, 1); // 17
    Atomics.load(ta, 0); // 1

    Atomics.compareExchange(ta, 0, 5, 12); // 1
    Atomics.load(ta, 0); // 1

    Atomics.exchange(ta, 0, 12); // 1
    Atomics.load(ta, 0); // 12

    Atomics.isLockFree(1); // true
    Atomics.isLockFree(2); // true
    Atomics.isLockFree(3); // false
    Atomics.isLockFree(4); // true

    Atomics.or(ta, 0, 1); // 12
    Atomics.load(ta, 0);  // 13

    Atomics.store(ta, 0, 12); // 12

    Atomics.sub(ta, 0, 2); // 12
    Atomics.load(ta, 0); // 10

    Atomics.xor(ta, 0, 1); // 10
    Atomics.load(ta, 0); // 11

### Waiting and notifiying

Given a shared `Int32Array`:

    const sab = new SharedArrayBuffer(1024);
    const int32 = new Int32Array(sab);

A reading thread is sleeping and waiting on location 0 which is expected to be 0. As long as that is true, it will not go on. However, once the writing thread has stored a new value, it will be notified by the writing thread and return the new value (123).

    Atomics.wait(int32, 0, 0);
    console.log(int32[0]); // 123

A writing thread stores a new value and notifies the waiting thread once it has written:

    console.log(int32[0]); // 0;
    Atomics.store(int32, 0, 123);
    Atomics.notify(int32, 0, 1);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-atomics-object">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-atomics-object</span></a></td></tr></tbody></table>

`Atomics`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`Atomic_operations_on_non-shared_buffers`

No

No

79

No

No

No

No

No

79

No

No

No

`add`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`and`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`compareExchange`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`exchange`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`isLockFree`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`load`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`notify`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

78

63

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

48-55

46-48

The `count` parameter defaults to `0` instead of the later-specified `+Infinity`.

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

63

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

48-55

46-48

The `count` parameter defaults to `0` instead of the later-specified `+Infinity`.

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`or`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`store`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`sub`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`wait`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

48-55

46-48

The method returns values `Atomics.OK`, `Atomics.TIMEDOUT`, and `Atomics.NOTEQUAL`, instead of the later-specified strings.

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

48-55

46-48

The method returns values `Atomics.OK`, `Atomics.TIMEDOUT`, and `Atomics.NOTEQUAL`, instead of the later-specified strings.

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`xor`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

## See also

-   [`ArrayBuffer`](arraybuffer)
-   [JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)
-   [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)
-   [parlib-simple](https://github.com/lars-t-hansen/parlib-simple) – a simple library providing synchronization and work distribution abstractions.
-   [Shared Memory – a brief tutorial](https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md)
-   [A Taste of JavaScript's New Parallel Primitives – Mozilla Hacks](https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics</a>

# await

The `await` operator is used to wait for a [`Promise`](../global_objects/promise). It can only be used inside an [`async function`](../statements/async_function) within regular JavaScript code; however it can be used on its own with [JavaScript modules.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)

## Syntax

    [rv] = await expression;

`expression`  
A [`Promise`](../global_objects/promise) or any value to wait for.

`rv`  
Returns the fulfilled value of the promise, or the value itself if it's not a `Promise`.

## Description

The `await` expression causes `async` function execution to pause until a `Promise` is settled (that is, fulfilled or rejected), and to resume execution of the `async` function after fulfillment. When resumed, the value of the `await` expression is that of the fulfilled `Promise`.

If the `Promise` is rejected, the `await` expression throws the rejected value.

If the value of the _expression_ following the `await` operator is not a `Promise`, it's converted to a [resolved Promise](../global_objects/promise/resolve).

An `await` splits execution flow, allowing the caller of the async function to resume execution. After the `await` defers the continuation of the async function, execution of subsequent statements ensues. If this `await` is the last expression executed by its function, execution continues by returning to the function's caller a pending `Promise` for completion of the `await`'s function and resuming execution of that caller.

## Examples

### Awaiting a promise to be fulfilled

If a `Promise` is passed to an `await` expression, it waits for the `Promise` to be fulfilled and returns the fulfilled value.

    function resolveAfter2Seconds(x) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(x);
        }, 2000);
      });
    }

    async function f1() {
      var x = await resolveAfter2Seconds(10);
      console.log(x); // 10
    }

    f1();

### Thenable objects

[`Thenable objects`](../global_objects/promise/then) will be fulfilled just the same.

    async function f2() {
      const thenable = {
        then: function(resolve, _reject) {
          resolve('resolved!')
        }
      };
      console.log(await thenable); // resolved!
    }

    f2();

### Conversion to promise

If the value is not a `Promise`, it converts the value to a resolved `Promise`, and waits for it.

    async function f3() {
      var y = await 20;
      console.log(y); // 20
    }

    f3();

### Promise rejection

If the `Promise` is rejected, the rejected value is thrown.

    async function f4() {
      try {
        var z = await Promise.reject(30);
      } catch(e) {
        console.error(e); // 30
      }
    }

    f4();

### Handling rejected promises

Handle rejected `Promise` without try block.

    var response = await promisedFunction().catch((err) => { console.error(err); });
    // response will be undefined if the promise is rejected

### Top level await

You can use the `await` keyword on its own (outside of an async function) within a [JavaScript module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). This means modules, with child modules that use `await`, wait for the child module to execute before they themselves run. All while not blocking other child modules from loading.

Here is an example of a simple module using the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and specifying await within the `export statement`. Any modules that include this will wait for the fetch to resolve before running any code.

    // fetch request
    const colors = fetch('../data/colors.json')
      .then(response => response.json());

    export default await colors;

# Warning: 08/09 is not a legal ECMA-262 octal constant

The JavaScript warning "08 (or 09) is not a legal ECMA-262 octal constant" occurs when `08` or `09` number literals are used. They can't be interpreted as an octal number.

## Message

    Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
    Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.

## Error type

Warning. JavaScript execution won't be halted.

## What went wrong?

Decimal literals can start with a zero (`0`) followed by another decimal digit, but If all digits after the leading `0` are smaller than 8, the number is interpreted as an octal number. Because this is not the case with `08` and `09`, JavaScript warns about it.

Note that octal literals and octal escape sequences are deprecated and will present an additional deprecation warning. With ECMAScript 6 and later, the syntax uses a leading zero followed by a lowercase or uppercase Latin letter "O" (`0o` or `0O)`. See the page about [lexical grammar](../lexical_grammar#octal) for more information.

## Examples

### Invalid octal numbers

    08;
    09;
    // SyntaxError: 08 is not a legal ECMA-262 octal constant
    // SyntaxError: "0"-prefixed octal literals and octal escape sequences
    // are deprecated

### Valid octal numbers

Use a leading zero followed by the letter "o";

    0O755;
    0o644;

## See also

-   [Lexical grammar](../lexical_grammar#octal)
-   [SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated](deprecated_octal)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Bad_octal" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Bad_octal</a>

# RangeError: radix must be an integer

The JavaScript exception "radix must be an integer at least 2 and no greater than 36" occurs when the optional `radix` parameter of the [`Number.prototype.toString()`](../global_objects/number/tostring) or the [`BigInt.prototype.toString()`](../global_objects/bigint/tostring) method was specified and is not between 2 and 36.

## Message

    RangeError: invalid argument (Edge)
    RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
    RangeError: toString() radix argument must be between 2 and 36 (Chrome)

## Error type

[`RangeError`](../global_objects/rangeerror)

## What went wrong?

The optional `radix` parameter of the [`Number.prototype.toString()`](../global_objects/number/tostring) or the [`BigInt.prototype.toString()`](../global_objects/bigint/tostring) method was specified. Its value must be an integer (a number) between 2 and 36, specifying the base of the number system to be used for representing numeric values. For example, the decimal (base 10) number 169 is represented in hexadecimal (base 16) as A9.

Why is this parameter's value limited to 36? A radix that is larger than 10 uses alphabetical characters as digits; therefore, the radix can't be larger than 36, since the Latin alphabet (used by English and many other languages) only has 26 characters.

The most common radixes:

-   2 for [binary numbers](https://en.wikipedia.org/wiki/Binary_number),
-   8 for [octal numbers](https://en.wikipedia.org/wiki/Octal),
-   10 for [decimal numbers](https://en.wikipedia.org/wiki/Decimal),
-   16 for [hexadecimal numbers](https://en.wikipedia.org/wiki/Hexadecimal).

## Examples

### Invalid cases

    (42).toString(0);
    (42).toString(1);
    (42).toString(37);
    (42).toString(150);
    // You cannot use a string like this for formatting:
    (12071989).toString('MM-dd-yyyy');

### Valid cases

    (42).toString(2);     // "101010" (binary)
    (13).toString(8);     // "15"     (octal)
    (0x42).toString(10);  // "66"     (decimal)
    (100000).toString(16) // "186a0"  (hexadecimal)

## See also

-   [`Number.prototype.toString()`](../global_objects/number/tostring)
-   [`BigInt.prototype.toString()`](../global_objects/bigint/tostring)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Bad_radix" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Bad_radix</a>

# SyntaxError: invalid regular expression flag "x"

The JavaScript exception "invalid regular expression flag" occurs when the flags, defined after the second slash in regular expression literal, are not one of `g`, `i`, `m`, `s`, `u`, or `y`.

## Message

    SyntaxError: Syntax error in regular expression (Edge)
    SyntaxError: invalid regular expression flag "x" (Firefox)
    SyntaxError: Invalid regular expression flags (Chrome)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

There are invalid regular expression flags in the code. In a regular expression literal, which consists of a pattern enclosed between slashes, the flags are defined after the second slash. They can also be defined in the constructor function of the [`RegExp`](../global_objects/regexp) object (second parameter). Regular expression flags can be used separately or together in any order, but there are only six of them in ECMAScript.

To include a flag with the regular expression, use this syntax:

    var re = /pattern/flags;

or

    var re = new RegExp('pattern', 'flags');

<table><caption>Regular expression flags</caption><thead><tr class="header"><th>Flag</th><th>Description</th></tr></thead><tbody><tr class="odd"><td><code>g</code></td><td>Global search.</td></tr><tr class="even"><td>i</td><td>Case-insensitive search.</td></tr><tr class="odd"><td>m</td><td>Multi-line search.</td></tr><tr class="even"><td>s</td><td>Allow <code>.</code> to match newlines (added in ECMAScript 2018)</td></tr><tr class="odd"><td>u</td><td>Unicode; treat pattern as a sequence of Unicode code points</td></tr><tr class="even"><td>y</td><td>Perform a "sticky" search that matches starting at the current position in the target string. See <a href="../global_objects/regexp/sticky"><code>sticky</code></a></td></tr></tbody></table>

## Examples

There are only six valid regular expression flags.

    /foo/bar;

    // SyntaxError: invalid regular expression flag "b"

Did you intend to create a regular expression? An expression containing two slashes is interpreted as a regular expression literal.

    let obj = {
      url: /docs/Web
    };

    // SyntaxError: invalid regular expression flag "W"

Or did you mean to create a string instead? Add single or double quotes to create a string literal.

    let obj = {
      url: '/docs/Web'
    };

### Valid regular expression flags

See the table above for the six valid regular expression flags that are allowed in JavaScript.

    /foo/g;
    /foo/gims;
    /foo/uy;

## See also

-   [Regular expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
-   [XRegEx flags](https://xregexp.com/flags/) – regular expression library that provides four new flags (`n`, `s`, `x`, `A`)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag</a>

# SyntaxError: return not in function

The JavaScript exception "return (or yield) not in function" occurs when a `return` or `yield` statement is called outside of a [function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions).

## Message

    SyntaxError: 'return' statement outside of function (Edge)
    SyntaxError: return not in function (Firefox)
    SyntaxError: yield not in function (Firefox)

## Error type

[`SyntaxError`](../global_objects/syntaxerror).

## What went wrong?

A `return` or `yield` statement is called outside of a [function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions). Maybe there are missing curly brackets somewhere? The `return` and `yield` statements must be in a function, because they end (or pause and resume) function execution and specify a value to be returned to the function caller.

## Examples

### Missing curly brackets

    var cheer = function(score) {
      if (score === 147)
        return 'Maximum!';
      };
      if (score > 100) {
        return 'Century!';
      }
    }

    // SyntaxError: return not in function

The curly brackets look correct at a first glance, but this code snippet is missing a `{` after the first `if` statement. Correct would be:

    var cheer = function(score) {
      if (score === 147) {
        return 'Maximum!';
      }
      if (score > 100) {
        return 'Century!';
      }
    };

## See also

-   `return`
-   `yield`

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield</a>

# Intl.Locale.prototype.baseName

The `Intl.Locale.prototype.baseName` property returns a substring of the `Locale`'s string representation, containing core information about the `Locale`.

## Description

An [`Intl.Locale`](../locale) object represents a parsed local and options for that locale. The `baseName` property returns basic, core information about the Locale in the form of a substring of the complete data string. Specifically, the property returns the substring containing the language, and the script and region if available.

`baseName` returns the `language ["-" script] ["-" region] *("-" variant)` subsequence of the [unicode_language_id grammar](https://www.unicode.org/reports/tr35/#Identifiers).

## Examples

### Basic Example

    let myLoc = new Intl.Locale("fr-Latn-CA"); // Sets locale to Canadian French
    console.log(myLoc.toString()); // Prints out "fr-Latn-CA-u-ca-gregory"
    console.log(myLoc.baseName); // Prints out "fr-Latn-CA"

### Example with options in the input string

    // Sets language to Japanese, region to Japan,

    // calendar to Gregorian, hour cycle to 24 hours
    let japan = new Intl.Locale("ja-JP-u-ca-gregory-hc-24");
    console.log(japan.toString()); // Prints out "ja-JP-u-ca-gregory-hc-h24"
    console.log(japan.baseName); // Prints out "ja-JP"

### Example with options that override input string

    // Input string indicates language as Dutch and region as Belgium,

    // but options object overrides the region and sets it to the Netherlands
    let dutch = new Intl.Locale("nl-Latn-BE", {region: "NL"});

    console.log(dutch.baseName); // Prints out "nl-Latn-NL"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.Locale.prototype.baseName">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.Locale.prototype.baseName</span></a></td></tr></tbody></table>

`baseName`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl.Locale`](../locale)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/baseName" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/baseName</a>

# String.prototype.big()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `big()` method creates a [`<big>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/big) HTML element that causes a string to be displayed in a big font.

**Note:** The &lt;big&gt; element has been removed in [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) and shouldn't be used anymore. Instead web developers should use [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) properties.

## Syntax

    big()

### Return value

A string containing a [`<big>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/big) HTML element.

## Description

The `big()` method embeds a string in a `<big>` element: "`<big>str</big>`".

## Examples

### Using big()

The following example uses string methods to change the size of a string:

    var worldString = 'Hello, world';

    console.log(worldString.small());     // <small>Hello, world</small>
    console.log(worldString.big());       // <big>Hello, world</big>
    console.log(worldString.fontsize(7)); // <font size="7">Hello, world</font>

With the [`element.style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style) object you can get the element's `style` attribute and manipulate it more generically, for example:

    document.getElementById('yourElemId').style.fontSize = '2em';

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.big">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.big</span></a></td></tr></tbody></table>

`big`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.fontsize()`](fontsize)
-   [`String.prototype.small()`](small)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/big" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/big</a>

# BigInt

`BigInt` is a built-in object whose constructor returns a `bigint` [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) — also called a **BigInt value**, or sometimes just a **BigInt** — to represent whole numbers larger than 2<sup>53</sup> - 1 ([`Number.MAX_SAFE_INTEGER`](number/max_safe_integer)), which is the largest number JavaScript can represent with a `number` [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) (or _Number value_). BigInt values can be used for arbitrarily large integers.

## Description

A **BigInt value**, also sometimes just called a **BigInt**, is a `bigint` [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive), created by appending `n` to the end of an integer literal, or by calling the [`BigInt()`](bigint/bigint) constructor (but without the `new` operator) and giving it an integer value or string value.

    const previouslyMaxSafeInteger = 9007199254740991n

    const alsoHuge = BigInt(9007199254740991)
    // ↪ 9007199254740991n

    const hugeString = BigInt("9007199254740991")
    // ↪ 9007199254740991n

    const hugeHex = BigInt("0x1fffffffffffff")
    // ↪ 9007199254740991n

    const hugeOctal = BigInt("0o377777777777777777")
    // ↪ 9007199254740991n

    const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111")
    // ↪ 9007199254740991n

BigInt values are similar to Number values in some ways, but also differ in a few key matters: A BigInt value cannot be used with methods in the built-in [`Math`](math) object and cannot be mixed with a Number value in operations; they must be coerced to the same type. Be careful coercing values back and forth, however, as the precision of a BigInt value may be lost when it is coerced to a Number value.

### Type information

When tested against `typeof`, a BigInt value (`bigint` primitive) will give "`bigint`":

    typeof 1n === 'bigint'           // true
    typeof BigInt('1') === 'bigint'  // true

A BigInt value can also be wrapped in an `Object`:

    typeof Object(1n) === 'object'  // true

### Operators

The following operators may be used with BigInt values or object-wrapped BigInt values:

    + * - % **

[Bitwise operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) are supported as well, except `>>>` (zero-fill right shift), as every BigInt value is signed.

Also unsupported is the unary operator (`+`), [in order to not break asm.js](https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs).

    const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER)
    // ↪ 9007199254740991n

    const maxPlusOne = previousMaxSafe + 1n
    // ↪ 9007199254740992n

    const theFuture = previousMaxSafe + 2n
    // ↪ 9007199254740993n, this works now!

    const multi = previousMaxSafe * 2n
    // ↪ 18014398509481982n

    const subtr = multi – 10n
    // ↪ 18014398509481972n

    const mod = multi % 10n
    // ↪ 2n

    const bigN = 2n ** 54n
    // ↪ 18014398509481984n

    bigN * -1n
    // ↪ –18014398509481984n

The `/` operator also works as expected with whole numbers — but operations with a fractional result will be truncated when used with a BigInt value — they won't return any fractional digits.

    const expected = 4n / 2n
    // ↪ 2n

    const truncated = 5n / 2n
    // ↪ 2n, not 2.5n

### Comparisons

A BigInt value is not strictly equal to a Number value, but it _is_ loosely so:

    0n === 0
    // ↪ false

    0n == 0
    // ↪ true

A Number value and a BigInt value may be compared as usual:

    1n < 2
    // ↪ true

    2n > 1
    // ↪ true

    2 > 2
    // ↪ false

    2n > 2
    // ↪ false

    2n >= 2
    // ↪ true

BigInt values and Number values may be mixed in arrays and sorted:

    const mixed = [4n, 6, -12n, 10, 4, 0, 0n]
    // ↪  [4n, 6, -12n, 10, 4, 0, 0n]

    mixed.sort() // default sorting behavior
    // ↪  [ -12n, 0, 0n, 10, 4n, 4, 6 ]

    mixed.sort((a, b) => a - b)
    // won't work since subtraction will not work with mixed types
    // TypeError: can't convert BigInt value to Number value

    // sort with an appropriate numeric comparator
    mixed.sort((a, b) => (a < b) ? -1 : ((a > b) ? 1 : 0))
    // ↪  [ -12n, 0, 0n, 4n, 4, 6, 10 ]

Note that comparisons with `Object`-wrapped BigInt values act as with other objects, only indicating equality when the same object instance is compared:

    0n === Object(0n)          // false
    Object(0n) === Object(0n)  // false

    const o = Object(0n)
    o === o                    // true

### Conditionals

A BigInt value behaves like a Number value in cases where:

-   it is converted to a [`Boolean`](boolean): via the [`Boolean`](boolean) function;
-   when used with [logical operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) `||`, `&&`, and `!`; or
-   within a conditional test like an [`if`](../statements/if...else) statement.

<!-- -->

    if (0n) {
      console.log('Hello from the if!')
    } else {
      console.log('Hello from the else!')
    }

    // ↪ "Hello from the else!"

    0n || 12n
    // ↪ 12n

    0n && 12n
    // ↪ 0n

    Boolean(0n)
    // ↪ false

    Boolean(12n)
    // ↪ true

    !12n
    // ↪ false

    !0n
    // ↪ true

## Constructor

[`BigInt()`](bigint/bigint)  
Creates a new BigInt value.

## Static methods

[`BigInt.asIntN()`](bigint/asintn)  
Clamps a BigInt value to a signed integer value, and returns that value.

[`BigInt.asUintN()`](bigint/asuintn)  
Clamps a BigInt value to an unsigned integer value, and returns that value.

## Instance methods

[`BigInt.prototype.toLocaleString()`](bigint/tolocalestring)  
Returns a string with a language-sensitive representation of this BigInt value. Overrides the [`Object.prototype.toLocaleString()`](object/tolocalestring) method.

[`BigInt.prototype.toString()`](bigint/tostring)  
Returns a string representing this BigInt value in the specified radix (base). Overrides the [`Object.prototype.toString()`](object/tostring) method.

[`BigInt.prototype.valueOf()`](bigint/valueof)  
Returns this BigInt value. Overrides the [`Object.prototype.valueOf()`](object/valueof) method.

## Usage recommendations

### Coercion

Because coercing between Number values and BigInt values can lead to loss of precision, the following are recommended:

-   Only use a BigInt value when values greater than 2<sup>53</sup> are reasonably expected.
-   Don't coerce between BigInt values and Number values.

### Cryptography

The operations supported on BigInt values are not constant-time. BigInt values are therefore [unsuitable for use in cryptography](https://www.chosenplaintext.ca/articles/beginners-guide-constant-time-cryptography.html).

### Use within JSON

Using [`JSON.stringify()`](json/stringify) with any BigInt value will raise a `TypeError`, as BigInt values aren't serialized in JSON by default. However, you can implement your own `toJSON` method:

    BigInt.prototype.toJSON = function() { return this.toString()  }

Instead of throwing, `JSON.stringify` now produces a string like this:

    JSON.stringify(BigInt(1))
    // '"1"'

## Examples

### Calculating Primes

    // Returns true if the passed BigInt value is a prime number
    function isPrime(p) {
      for (let i = 2n; i * i <= p; i++) {
        if (p % i === 0n) return false;
      }
      return true
    }

    // Takes a BigInt value as an argument, returns nth prime number as a BigInt value
    function nthPrime(nth) {
      let maybePrime = 2n
      let prime = 0n

      while (nth >= 0n) {
        if (isPrime(maybePrime)) {
          nth--
          prime = maybePrime
        }
        maybePrime++
      }

      return prime
    }

    nthPrime(20n)
    // ↪ 73n

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-bigint-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-bigint-objects</span></a></td></tr></tbody></table>

`BigInt`

67

79

68

No

54

14

67

67

68

48

14

9.0

`BigInt`

67

79

68

No

54

14

67

67

68

48

14

9.0

`asIntN`

67

79

68

No

54

14

67

67

68

48

14

9.0

`asUintN`

67

79

68

No

54

14

67

67

68

48

14

9.0

`toLocaleString`

67

79

68

No

54

14

67

67

68

48

14

9.0

`toString`

67

79

68

No

54

14

67

67

68

48

14

9.0

`valueOf`

67

79

68

No

54

14

67

67

68

48

14

9.0

## See also

-   [`Number`](number)
-   [`Number.MAX_SAFE_INTEGER`](number/max_safe_integer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt</a>

# BigInt64Array

The `BigInt64Array` typed array represents an array of 64-bit signed integers in the platform byte order. If control over byte order is needed, use [`DataView`](dataview) instead. The contents are initialized to `0n`. Once established, you can reference elements in the array using the object's methods, or by using standard array index syntax (that is, using bracket notation).

## Constructor

[`BigInt64Array()`](bigint64array/bigint64array)  
Creates a new `BigInt64Array` object.

## Static properties

[`BigInt64Array.BYTES_PER_ELEMENT`](typedarray/bytes_per_element)  
Returns a number value of the element size. `8` in the case of a `BigInt64Array`.

[`BigInt64Array.name`](typedarray/name)  
Returns the string value of the constructor name. In the case of the `BigInt64Array` type, this is "BigInt64Array".

## Static methods

[`BigInt64Array.from()`](typedarray/from)  
Creates a new `BigInt64Array` from an array-like or iterable object. See also [`Array.from()`](array/from).

[`BigInt64Array.of()`](typedarray/of)  
Creates a new `BigInt64Array` with a variable number of arguments. See also [`Array.of()`](array/of).

## Instance properties

[`BigInt64Array.prototype.buffer`](typedarray/buffer)  
Returns the [`ArrayBuffer`](arraybuffer) referenced by the `BigInt64Array`. This is fixed at construction time and thus **read only**.

[`BigInt64Array.prototype.byteLength`](typedarray/bytelength)  
Returns the length (in bytes) of the `BigInt64Array` from the start of its [`ArrayBuffer`](arraybuffer). This is fixed at construction time and thus **read only.**

[`BigInt64Array.prototype.byteOffset`](typedarray/byteoffset)  
Returns the offset (in bytes) of the `BigInt64Array` from the start of its [`ArrayBuffer`](arraybuffer). This is fixed at construction time and thus **read only.**

[`BigInt64Array.prototype.length`](typedarray/length)  
Returns the number of elements hold in the `BigInt64Array`. This is fixed at construction time and thus **read only.**

## Instance methods

[`BigInt64Array.prototype.copyWithin()`](typedarray/copywithin)  
Copies a sequence of array elements within the array. See also [`Array.prototype.copyWithin()`](array/copywithin).

[`BigInt64Array.prototype.entries()`](typedarray/entries)  
Returns a new `Array Iterator` object that contains the key/value pairs for each index in the array. See also [`Array.prototype.entries()`](array/entries).

[`BigInt64Array.prototype.every()`](typedarray/every)  
Tests whether all elements in the array pass the test provided by a function. See also [`Array.prototype.every()`](array/every).

[`BigInt64Array.prototype.fill()`](typedarray/fill)  
Fills all the elements of an array from a start index to an end index with a static value. See also [`Array.prototype.fill()`](array/fill).

[`BigInt64Array.prototype.filter()`](typedarray/filter)  
Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also [`Array.prototype.filter()`](array/filter).

[`BigInt64Array.prototype.find()`](typedarray/find)  
Returns the found value in the array if an element in the array satisfies the provided testing function, or `undefined` if not found. See also [`Array.prototype.find()`](array/find).

[`BigInt64Array.prototype.findIndex()`](typedarray/findindex)  
Returns the found index in the array if an element in the array satisfies the provided testing function, or -1 if not found. See also [`Array.prototype.findIndex()`](array/findindex).

[`BigInt64Array.prototype.forEach()`](typedarray/foreach)  
Calls a function for each element in the array. See also [`Array.prototype.forEach()`](array/foreach).

[`BigInt64Array.prototype.includes()`](typedarray/includes)  
Determines whether a typed array includes a certain element, returning `true` or `false` as appropriate. See also [`Array.prototype.includes()`](array/includes).

[`BigInt64Array.prototype.indexOf()`](typedarray/indexof)  
Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also [`Array.prototype.indexOf()`](array/indexof).

[`BigInt64Array.prototype.join()`](typedarray/join)  
Joins all elements of an array into a string. See also [`Array.prototype.join()`](array/join).

[`BigInt64Array.prototype.keys()`](typedarray/keys)  
Returns a new `Array Iterator` that contains the keys for each index in the array. See also [`Array.prototype.keys()`](array/keys).

[`BigInt64Array.prototype.lastIndexOf()`](typedarray/lastindexof)  
Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also [`Array.prototype.lastIndexOf()`](array/lastindexof).

[`BigInt64Array.prototype.map()`](typedarray/map)  
Creates a new array with the results of calling a provided function on every element in this array. See also [`Array.prototype.map()`](array/map).

[`BigInt64Array.prototype.reduce()`](typedarray/reduce)  
Applies a function against an accumulator and each value of the array (from left-to-right) so as to reduce it to a single value. See also [`Array.prototype.reduce()`](array/reduce).

[`BigInt64Array.prototype.reduceRight()`](typedarray/reduceright)  
Applies a function against an accumulator and each value of the array (from right-to-left) so as to reduce it to a single value. See also [`Array.prototype.reduceRight()`](array/reduceright).

[`BigInt64Array.prototype.reverse()`](typedarray/reverse)  
Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also [`Array.prototype.reverse()`](array/reverse).

[`BigInt64Array.prototype.set()`](typedarray/set)  
Stores multiple values in the typed array, reading input values from a specified array.

[`BigInt64Array.prototype.slice()`](typedarray/slice)  
Extracts a section of an array and returns a new array. See also [`Array.prototype.slice()`](array/slice).

[`BigInt64Array.prototype.some()`](typedarray/some)  
Returns true if at least one element in this array satisfies the provided testing function. See also [`Array.prototype.some()`](array/some).

[`BigInt64Array.prototype.sort()`](typedarray/sort)  
Sorts the elements of an array in place and returns the array. See also [`Array.prototype.sort()`](array/sort).

[`BigInt64Array.prototype.subarray()`](typedarray/subarray)  
Returns a new `BigUint64Array` from the given start and end element index.

[`BigInt64Array.prototype.values()`](typedarray/values)  
Returns a new `Array Iterator` object that contains the values for each index in the array. See also [`Array.prototype.values()`](array/values).

[`BigInt64Array.prototype.toLocaleString()`](typedarray/tolocalestring)  
Returns a localized string representing the array and its elements. See also [`Array.prototype.toLocaleString()`](array/tolocalestring).

[`BigInt64Array.prototype.toString()`](typedarray/tostring)  
Returns a string representing the array and its elements. See also [`Array.prototype.toString()`](array/tostring).

[`BigInt64Array.prototype[@@iterator]()`](typedarray/@@iterator)  
Returns a new `Array Iterator` object that contains the values for each index in the array.

## Examples

### Different ways to create a `BigInt64Array`

    // From a length
    var bigint64 = new BigInt64Array(2);
    bigint64[0] = 42n;
    console.log(bigint64[0]); // 42n
    console.log(bigint64.length); // 2
    console.log(bigint64.BYTES_PER_ELEMENT); // 8

    // From an array
    var arr = new BigInt64Array([21n,31n]);
    console.log(arr[1]); // 31n

    // From another TypedArray
    var x = new BigInt64Array([21n, 31n]);
    var y = new BigInt64Array(x);
    console.log(y[0]); // 21n

    // From an ArrayBuffer
    var buffer = new ArrayBuffer(32);
    var z = new BigInt64Array(buffer, 0, 4);

    // From an iterable
    var iterable = function*(){ yield* [1n, 2n, 3n]; }();
    var bigint64 = new BigInt64Array(iterable);
    // BigInt64Array[1n, 2n, 3n]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-typedarray-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-typedarray-objects</span></a></td></tr></tbody></table>

`BigInt64Array`

67

79

68

No

54

No

67

67

68

48

No

9.0

`BigInt64Array`

67

79

68

No

54

No

67

67

68

48

No

9.0

## See also

-   [JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)
-   [`BigUint64Array`](biguint64array)
-   [`DataView`](dataview)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array</a>

# BigUint64Array

The `BigUint64Array` typed array represents an array of 64-bit unsigned integers in the platform byte order. If control over byte order is needed, use [`DataView`](dataview) instead. The contents are initialized to `0n`. Once established, you can reference elements in the array using the object's methods, or by using standard array index syntax (that is, using bracket notation).

## Constructor

[`BigUint64Array()`](biguint64array/biguint64array)  
Creates a new `BigUint64Array` object.

## Static properties

[`BigUint64Array.BYTES_PER_ELEMENT`](typedarray/bytes_per_element)  
Returns a number value of the element size. `8` in the case of a `BigUint64Array`.

[`BigUint64Array.name`](typedarray/name)  
Returns the string value of the constructor name. In the case of the `BigUint64Array` type this is "BigUint64Array".

## Static methods

[`BigUint64Array.from()`](typedarray/from)  
Creates a new `BigUint64Array` from an array-like or iterable object. See also [`Array.from()`](array/from).

[`BigUint64Array.of()`](typedarray/of)  
Creates a new `BigUint64Array` with a variable number of arguments. See also [`Array.of()`](array/of).

## Instance properties

[`BigUint64Array.prototype.buffer`](typedarray/buffer)  
Returns the [`ArrayBuffer`](arraybuffer) referenced by the `BigUint64Array`. This is fixed at construction time and thus **read only**.

[`BigUint64Array.prototype.byteLength`](typedarray/bytelength)  
Returns the length (in bytes) of the `BigUint64Array` from the start of its [`ArrayBuffer`](arraybuffer). This is fixed at construction time and thus **read only.**

[`BigUint64Array.prototype.byteOffset`](typedarray/byteoffset)  
Returns the offset (in bytes) of the `BigUint64Array` from the start of its [`ArrayBuffer`](arraybuffer). This is fixed at construction time and thus **read only.**

[`BigUint64Array.prototype.length`](typedarray/length)  
Returns the number of elements hold in the `BigUint64Array`. This is fixed at construction time and thus **read only.**

## Instance methods

[`BigUint64Array.prototype.copyWithin()`](typedarray/copywithin)  
Copies a sequence of array elements within the array. See also [`Array.prototype.copyWithin()`](array/copywithin).

[`BigUint64Array.prototype.entries()`](typedarray/entries)  
Returns a new `Array Iterator` object that contains the key/value pairs for each index in the array. See also [`Array.prototype.entries()`](array/entries).

[`BigUint64Array.prototype.every()`](typedarray/every)  
Tests whether all elements in the array pass the test provided by a function. See also [`Array.prototype.every()`](array/every).

[`BigUint64Array.prototype.fill()`](typedarray/fill)  
Fills all the elements of an array from a start index to an end index with a static value. See also [`Array.prototype.fill()`](array/fill).

[`BigUint64Array.prototype.filter()`](typedarray/filter)  
Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also [`Array.prototype.filter()`](array/filter).

[`BigUint64Array.prototype.find()`](typedarray/find)  
Returns the found value in the array if an element in the array satisfies the provided testing function, or `undefined` if not found. See also [`Array.prototype.find()`](array/find).

[`BigUint64Array.prototype.findIndex()`](typedarray/findindex)  
Returns the found index in the array if an element in the array satisfies the provided testing function, or -1 if not found. See also [`Array.prototype.findIndex()`](array/findindex).

[`BigUint64Array.prototype.forEach()`](typedarray/foreach)  
Calls a function for each element in the array. See also [`Array.prototype.forEach()`](array/foreach).

[`BigUint64Array.prototype.includes()`](typedarray/includes)  
Determines whether a typed array includes a certain element, returning `true` or `false` as appropriate. See also [`Array.prototype.includes()`](array/includes).

[`BigUint64Array.prototype.indexOf()`](typedarray/indexof)  
Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also [`Array.prototype.indexOf()`](array/indexof).

[`BigUint64Array.prototype.join()`](typedarray/join)  
Joins all elements of an array into a string. See also [`Array.prototype.join()`](array/join).

[`BigUint64Array.prototype.keys()`](typedarray/keys)  
Returns a new `Array Iterator` that contains the keys for each index in the array. See also [`Array.prototype.keys()`](array/keys).

[`BigUint64Array.prototype.lastIndexOf()`](typedarray/lastindexof)  
Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also [`Array.prototype.lastIndexOf()`](array/lastindexof).

[`BigUint64Array.prototype.map()`](typedarray/map)  
Creates a new array with the results of calling a provided function on every element in this array. See also [`Array.prototype.map()`](array/map).

[`BigUint64Array.prototype.reduce()`](typedarray/reduce)  
Apply a function against an accumulator and each value of the array (from left-to-right) so as to reduce it to a single value. See also [`Array.prototype.reduce()`](array/reduce).

[`BigUint64Array.prototype.reduceRight()`](typedarray/reduceright)  
Applies a function against an accumulator and each value of the array (from right-to-left) so as to reduce it to a single value. See also [`Array.prototype.reduceRight()`](array/reduceright).

[`BigUint64Array.prototype.reverse()`](typedarray/reverse)  
Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also [`Array.prototype.reverse()`](array/reverse).

[`BigUint64Array.prototype.set()`](typedarray/set)  
Stores multiple values in the typed array, reading input values from a specified array.

[`BigUint64Array.prototype.slice()`](typedarray/slice)  
Extracts a section of an array and returns a new array. See also [`Array.prototype.slice()`](array/slice).

[`BigUint64Array.prototype.some()`](typedarray/some)  
Returns `true` if at least one element in this array satisfies the provided testing function. See also [`Array.prototype.some()`](array/some).

[`BigUint64Array.prototype.sort()`](typedarray/sort)  
Sorts the elements of an array in place and returns the array. See also [`Array.prototype.sort()`](array/sort).

[`BigUint64Array.prototype.subarray()`](typedarray/subarray)  
Returns a new `BigUint64Array` from the given start and end element index.

[`BigUint64Array.prototype.values()`](typedarray/values)  
Returns a new `Array Iterator` object that contains the values for each index in the array. See also [`Array.prototype.values()`](array/values).

[`BigUint64Array.prototype.toLocaleString()`](typedarray/tolocalestring)  
Returns a localized string representing the array and its elements. See also [`Array.prototype.toLocaleString()`](array/tolocalestring).

[`BigUint64Array.prototype.toString()`](typedarray/tostring)  
Returns a string representing the array and its elements. See also [`Array.prototype.toString()`](array/tostring).

[`BigUint64Array.prototype[@@iterator]()`](typedarray/@@iterator)  
Returns a new `Array Iterator` object that contains the values for each index in the array.

## Examples

### Different ways to create a `BigUint64Array`

    // From a length
    var biguint64 = new BigUint64Array(2);
    biguint64[0] = 42n;
    console.log(biguint64[0]); // 42n
    console.log(biguint64.length); // 2
    console.log(biguint64.BYTES_PER_ELEMENT); // 8

    // From an array
    var arr = new BigUint64Array([21n,31n]);
    console.log(arr[1]); // 31n

    // From another TypedArray
    var x = new BigUint64Array([21n, 31n]);
    var y = new BigUint64Array(x);
    console.log(y[0]); // 21n

    // From an ArrayBuffer
    var buffer = new ArrayBuffer(32);
    var z = new BigUint64Array(buffer, 0, 4);

    // From an iterable
    var iterable = function*(){ yield* [1n, 2n, 3n]; }();
    var biguint64 = new BigUint64Array(iterable);
    // BigUint64Array[1n, 2n, 3n]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-typedarray-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-typedarray-objects</span></a></td></tr></tbody></table>

`BigUint64Array`

67

79

68

No

54

No

67

67

68

48

No

9.0

`BigUint64Array`

67

79

68

No

54

No

67

67

68

48

No

9.0

## See also

-   [JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)
-   [`BigInt64Array`](bigint64array)
-   [`DataView`](dataview)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array</a>

# Function.prototype.bind()

The `bind()` method creates a new function that, when called, has its `this` keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

## Syntax

    bind(thisArg)
    bind(thisArg, arg1)
    bind(thisArg, arg1, arg2)
    bind(thisArg, arg1, ... , argN)

### Parameters

`thisArg`  
The value to be passed as the `this` parameter to the target function `func` when the bound function is called. The value is ignored if the bound function is constructed using the [`new`](../../operators/new) operator. When using `bind` to create a function (supplied as a callback) inside a `setTimeout`, any primitive value passed as `thisArg` is converted to object. If no arguments are provided to `bind `, or if the `thisArg` is `null` or `undefined`, the `this` of the executing scope is treated as the `thisArg` for the new function.

`arg1, arg2, ...argN` <span class="badge inline optional">Optional</span>  
Arguments to prepend to arguments provided to the bound function when invoking `func`.

### Return value

A copy of the given function with the specified `this` value, and initial arguments (if provided).

## Description

The `bind()` function creates a new **bound function**, which is an _exotic function object_ (a term from ECMAScript 2015) that wraps the original function object. Calling the bound function generally results in the execution of its wrapped function.

A bound function has the following internal properties:

`[[BoundTargetFunction]]`  
The wrapped function object

`[[BoundThis]]`  
The value that is always passed as `this` value when calling the wrapped function.

`[[BoundArguments]]`  
A list of values whose elements are used as the first arguments to any call to the wrapped function.

`[[Call]]`  
Executes code associated with this object. Invoked via a function call expression. The arguments to the internal method are a `this` value and a list containing the arguments passed to the function by a call expression.

When a bound function is called, it calls internal method `[[Call]]` on `[[BoundTargetFunction]]`, with following arguments `Call(boundThis, ...args)`. Where `boundThis` is `[[BoundThis]]`, `args` is `[[BoundArguments]]`, followed by the arguments passed by the function call.

A bound function may also be constructed using the [`new`](../../operators/new) operator. Doing so acts as though the target function had instead been constructed. The provided `this` value is ignored, while prepended arguments are provided to the emulated function.

## Examples

### Creating a bound function

The simplest use of `bind()` is to make a function that, no matter how it is called, is called with a particular `this` value.

A common mistake for new JavaScript programmers is to extract a method from an object, then to later call that function and expect it to use the original object as its `this` (e.g., by using the method in callback-based code).

Without special care, however, the original object is usually lost. Creating a bound function from the function, using the original object, neatly solves this problem:

    this.x = 9;    // 'this' refers to global 'window' object here in a browser
    const module = {
      x: 81,
      getX: function() { return this.x; }
    };

    module.getX();
    //  returns 81

    const retrieveX = module.getX;
    retrieveX();
    //  returns 9; the function gets invoked at the global scope

    //  Create a new function with 'this' bound to module
    //  New programmers might confuse the
    //  global variable 'x' with module's property 'x'
    const boundGetX = retrieveX.bind(module);
    boundGetX();
    //  returns 81

### Partially applied functions

The next simplest use of `bind()` is to make a function with pre-specified initial arguments.

These arguments (if any) follow the provided `this` value and are then inserted at the start of the arguments passed to the target function, followed by whatever arguments are passed bound function at the time it is called.

    function list() {
      return Array.prototype.slice.call(arguments);
    }

    function addArguments(arg1, arg2) {
      return arg1 + arg2
    }

    const list1 = list(1, 2, 3);
    //  [1, 2, 3]

    const result1 = addArguments(1, 2);
    //  3

    // Create a function with a preset leading argument
    const leadingThirtysevenList = list.bind(null, 37);

    // Create a function with a preset first argument.
    const addThirtySeven = addArguments.bind(null, 37);

    const list2 = leadingThirtysevenList();
    //  [37]

    const list3 = leadingThirtysevenList(1, 2, 3);
    //  [37, 1, 2, 3]

    const result2 = addThirtySeven(5);
    //  37 + 5 = 42

    const result3 = addThirtySeven(5, 10);
    //  37 + 5 = 42
    //  (the second argument is ignored)

### With `setTimeout()`

By default within [`window.setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), the `this` keyword will be set to the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) (or `global`) object. When working with class methods that require `this` to refer to class instances, you may explicitly bind `this` to the callback function, in order to maintain the instance.

    function LateBloomer() {
      this.petalCount = Math.floor(Math.random() * 12) + 1;
    }

    // Declare bloom after a delay of 1 second
    LateBloomer.prototype.bloom = function() {
      window.setTimeout(this.declare.bind(this), 1000);
    };

    LateBloomer.prototype.declare = function() {
      console.log(`I am a beautiful flower with ${this.petalCount} petals!`);
    };

    const flower = new LateBloomer();
    flower.bloom();
    //  after 1 second, calls 'flower.declare()'

### Bound functions used as constructors

**Warning:** This section demonstrates JavaScript capabilities and documents some edge cases of the `bind()` method.

The methods shown below are not the best way to do things, and probably should not be used in any production environment.

Bound functions are automatically suitable for use with the [`new`](../../operators/new) operator to construct new instances created by the target function. When a bound function is used to construct a value, the provided `this` is ignored.

However, provided arguments are still prepended to the constructor call:

    function Point(x, y) {
      this.x = x;
      this.y = y;
    }

    Point.prototype.toString = function() {
      return `${this.x},${this.y}`;
    };

    const p = new Point(1, 2);
    p.toString();
    // '1,2'

    //  not supported in the polyfill below,

    //  works fine with native bind:

    const YAxisPoint = Point.bind(null, 0/*x*/);

    const emptyObj = {};
    const YAxisPoint = Point.bind(emptyObj, 0/*x*/);

    const axisPoint = new YAxisPoint(5);
    axisPoint.toString();                    // '0,5'

    axisPoint instanceof Point;              // true
    axisPoint instanceof YAxisPoint;         // true
    new YAxisPoint(17, 42) instanceof Point; // true

Note that you need not do anything special to create a bound function for use with [`new`](../../operators/new).

The corollary is that you need not do anything special to create a bound function to be called plainly, even if you would rather require the bound function to only be called using [`new`](../../operators/new).

    //  Example can be run directly in your JavaScript console
    //  ...continued from above

    //  Can still be called as a normal function
    //  (although usually this is undesired)
    YAxisPoint(13);

    `${emptyObj.x},${emptyObj.y}`;
    // >  '0,13'

If you wish to support the use of a bound function only using [`new`](../../operators/new), or only by calling it, the target function must enforce that restriction.

### Creating shortcuts

`bind()` is also helpful in cases where you want to create a shortcut to a function which requires a specific `this` value.

Take [`Array.prototype.slice()`](../array/slice), for example, which you want to use for converting an array-like object to a real array. You could create a shortcut like this:

    const slice = Array.prototype.slice;

    // ...

    slice.apply(arguments);

With `bind()`, this can be simplified.

In the following piece of code, `slice()` is a bound function to the [`apply()`](apply) function of [`Function`](../function), with the `this` value set to the [`slice()`](../array/slice) function of <span class="page-not-created">`Array.prototype`</span>. This means that additional `apply()` calls can be eliminated:

    //  same as "slice" in the previous example
    const unboundSlice = Array.prototype.slice;
    const slice = Function.prototype.apply.bind(unboundSlice);

    // ...

    slice(arguments);

## Polyfill

Because older browsers are generally also slower browsers, it is far more critical than most people recognize to create performance polyfills to make the browsing experience in outdated browsers slightly less horrible.

Thus, presented below are two options for `Function.prototype.bind()` polyfills:

1.  The first one is much smaller and more performant, but does not work when using the `new` operator.
2.  The second one is bigger and less performant, but it permits some usage of the `new` operator on bound functions.

Generally, in most code it's very rare to see `new` used on a bound function, so it is generally best to go with the first option.

    //  Does not work with `new (funcA.bind(thisArg, args))`
    if (!Function.prototype.bind) (function(){
      var slice = Array.prototype.slice;
      Function.prototype.bind = function() {
        var thatFunc = this, thatArg = arguments[0];
        var args = slice.call(arguments, 1);
        if (typeof thatFunc !== 'function') {
          // closest thing possible to the ECMAScript 5
          // internal IsCallable function
          throw new TypeError('Function.prototype.bind - ' +
                 'what is trying to be bound is not callable');
        }
        return function(){
          var funcArgs = args.concat(slice.call(arguments))
          return thatFunc.apply(thatArg, funcArgs);
        };
      };
    })();

You can partially work around this by inserting the following code at the beginning of your scripts, allowing use of much of the functionality of `bind()` in implementations that do not natively support it.

    //  Yes, it does work with `new (funcA.bind(thisArg, args))`
    if (!Function.prototype.bind) (function(){
      var ArrayPrototypeSlice = Array.prototype.slice;
      Function.prototype.bind = function(otherThis) {
        if (typeof this !== 'function') {
          // closest thing possible to the ECMAScript 5
          // internal IsCallable function
          throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
        }

        var baseArgs= ArrayPrototypeSlice.call(arguments, 1),
            baseArgsLength = baseArgs.length,
            fToBind = this,
            fNOP    = function() {},
            fBound  = function() {
              baseArgs.length = baseArgsLength; // reset to default base arguments
              baseArgs.push.apply(baseArgs, arguments);
              return fToBind.apply(
                     fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs
              );
            };

        if (this.prototype) {
          // Function.prototype doesn't have a prototype property
          fNOP.prototype = this.prototype;
        }
        fBound.prototype = new fNOP();

        return fBound;
      };
    })();

Some of the many differences (there may well be others, as this list does not seriously attempt to be exhaustive) between this algorithm and the specified algorithm are:

-   The partial implementation relies on [`Array.prototype.slice()`](../array/slice), [`Array.prototype.concat()`](../array/concat), [`Function.prototype.call()`](call) and [`Function.prototype.apply()`](apply), built-in methods to have their original values.
-   The partial implementation creates functions that do not have immutable "poison pill" [`caller`](caller) and `arguments` properties that throw a [`TypeError`](../typeerror) upon get, set, or deletion. (This could be added if the implementation supports [`Object.defineProperty`](../object/defineproperty), or partially implemented \[without throw-on-delete behavior\] if the implementation supports the [`__defineGetter__`](../object/__definegetter__) and [`__defineSetter__`](../object/__definesetter__) extensions.)
-   The partial implementation creates functions that have a `prototype` property. (Proper bound functions have none.)
-   The partial implementation creates bound functions whose [`length`](length) property does not agree with that mandated by ECMA-262: it creates functions with `length` of `0`. A full implementation—depending on the length of the target function and the number of pre-specified arguments—may return a non-zero length.
-   The partial implementation creates bound functions whose [`name`](name) property is not derived from the original function name. According to ECMA-262, name of the returned bound function should be "bound " + name of target function (note the space character).

If you choose to use this partial implementation, **you must not rely on those cases where behavior deviates from ECMA-262, 5<sup>th</sup> edition!** Thankfully, these deviations from the specification rarely (if ever) come up in most coding situations. If you do not understand any of the deviations from the specification above, then it is safe in this particular case to not worry about these noncompliant deviation details.

**If it's absolutely necessary and performance is not a concern**, a far slower (but more specification-compliant solution) can be found at <https://github.com/Raynos/function-bind>.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-function.prototype.bind">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-function.prototype.bind</span></a></td></tr></tbody></table>

`bind`

7

12

4

9

11.6

5.1

4

18

4

12

6

1.0

## See also

-   [`Function.prototype.apply()`](apply)
-   [`Function.prototype.call()`](call)
-   [Functions](../../functions)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind</a>

# Bitwise AND (&)

The bitwise AND operator (`&`) returns a `1` in each bit position for which the corresponding bits of both operands are `1`s.

## Syntax

    a & b

## Description

The operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). Numbers with more than 32 bits get their most significant bits discarded. For example, the following integer with more than 32 bits will be converted to a 32 bit integer:

    Before: 11100110111110100000000000000110000000000001
    After:              10100000000000000110000000000001

Each bit in the first operand is paired with the corresponding bit in the second operand: _first bit_ to _first bit_, _second bit_ to _second bit_, and so on.

The operator is applied to each pair of bits, and the result is constructed bitwise.

The truth table for the AND operation is:

<table><thead><tr class="header"><th>a</th><th>b</th><th>a AND b</th></tr></thead><tbody><tr class="odd"><td>0</td><td>0</td><td>0</td></tr><tr class="even"><td>0</td><td>1</td><td>0</td></tr><tr class="odd"><td>1</td><td>0</td><td>0</td></tr><tr class="even"><td>1</td><td>1</td><td>1</td></tr></tbody></table>

    .    9 (base 10) = 00000000000000000000000000001001 (base 2)
        14 (base 10) = 00000000000000000000000000001110 (base 2)
                       --------------------------------
    14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)

Bitwise ANDing any number `x` with `0` yields `0`.

## Examples

### Using bitwise AND

    // 5: 00000000000000000000000000000101
    // 2: 00000000000000000000000000000010
    5 & 2; // 0

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#prod-BitwiseANDExpression">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#prod-BitwiseANDExpression</span></a></td></tr></tbody></table>

`Bitwise_AND`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Bitwise operators in the JS guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)
-   [Bitwise AND assignment operator](bitwise_and_assignment)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_AND" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_AND</a>

# 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.

## Syntax

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

## Examples

### Using bitwise AND assignment

    let a = 5;
    // 5:     00000000000000000000000000000101
    // 2:     00000000000000000000000000000010
    a &= 2; // 0

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-assignment-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-assignment-operators</span></a></td></tr></tbody></table>

`Bitwise_AND_assignment`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Assignment operators in the JS guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
-   [Bitwise AND operator](bitwise_and)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment</a>

# Bitwise NOT (~)

The bitwise NOT operator (`~`) inverts the bits of its operand.

## Syntax

    ~a

## Description

The operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). Numbers with more than 32 bits get their most significant bits discarded. For example, the following integer with more than 32 bits will be converted to a 32 bit integer:

    Before: 11100110111110100000000000000110000000000001
    After:              10100000000000000110000000000001

Each bit in the first operand is paired with the corresponding bit in the second operand: _first bit_ to _first bit_, _second bit_ to _second bit_, and so on.

The operator is applied to each pair of bits, and the result is constructed bitwise.

The truth table for the `NOT` operation is:

<table><thead><tr class="header"><th>a</th><th>NOT a</th></tr></thead><tbody><tr class="odd"><td>0</td><td>1</td></tr><tr class="even"><td>1</td><td>0</td></tr></tbody></table>

     9 (base 10) = 00000000000000000000000000001001 (base 2)
                   --------------------------------
    ~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)

Bitwise NOTing any number `x` yields `-(x + 1)`. For example, `~-5` yields `4`.

Note that due to using 32-bit representation for numbers both `~-1` and `~4294967295` (2<sup>32</sup>-1) results in `0`.

## Examples

### Using bitwise NOT

    ~0;  // -1
    ~-1; // 0
    ~1;  // -2

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-bitwise-not-operator">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-bitwise-not-operator</span></a></td></tr></tbody></table>

`Bitwise_NOT`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Bitwise operators in the JS guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT</a>

# Bitwise OR (|)

The bitwise OR operator (`|`) returns a `1` in each bit position for which the corresponding bits of either or both operands are `1`s.

## Syntax

    a | b

## Description

The operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). Numbers with more than 32 bits get their most significant bits discarded. For example, the following integer with more than 32 bits will be converted to a 32 bit integer:

    Before: 11100110111110100000000000000110000000000001
    After:              10100000000000000110000000000001

Each bit in the first operand is paired with the corresponding bit in the second operand: _first bit_ to _first bit_, _second bit_ to _second bit_, and so on.

The operator is applied to each pair of bits, and the result is constructed bitwise.

The truth table for the OR operation is:

<table><thead><tr class="header"><th>a</th><th>b</th><th>a OR b</th></tr></thead><tbody><tr class="odd"><td>0</td><td>0</td><td>0</td></tr><tr class="even"><td>0</td><td>1</td><td>1</td></tr><tr class="odd"><td>1</td><td>0</td><td>1</td></tr><tr class="even"><td>1</td><td>1</td><td>1</td></tr></tbody></table>

    .    9 (base 10) = 00000000000000000000000000001001 (base 2)
        14 (base 10) = 00000000000000000000000000001110 (base 2)
                       --------------------------------
    14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)

Bitwise ORing any number `x` with `0` yields `x`.

## Examples

### Using bitwise OR

    // 9  (00000000000000000000000000001001)
    // 14 (00000000000000000000000000001110)

    14 | 9;
    // 15 (00000000000000000000000000001111)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#prod-BitwiseORExpression">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Bitwise OR expression' in that specification.</span></a></td></tr></tbody></table>

`Bitwise_OR`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Bitwise operators in the JS guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)
-   [Bitwise OR assignment operator](bitwise_or_assignment)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR</a>

# 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.

## Syntax

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

## Examples

### Using bitwise OR assignment

    let a = 5;
    a |= 2; // 7
    // 5: 00000000000000000000000000000101
    // 2: 00000000000000000000000000000010
    // -----------------------------------
    // 7: 00000000000000000000000000000111

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-assignment-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-assignment-operators</span></a></td></tr></tbody></table>

`Bitwise_OR_assignment`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Assignment operators in the JS guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
-   [Bitwise OR operator](bitwise_or)
-   [Logical OR assignment (`||=`)](logical_or_assignment)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment</a>

# Bitwise XOR (^)

The bitwise XOR operator (`^`) returns a `1` in each bit position for which the corresponding bits of either but not both operands are `1`s.

## Syntax

    a ^ b

## Description

The operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). Numbers with more than 32 bits get their most significant bits discarded. For example, the following integer with more than 32 bits will be converted to a 32 bit integer:

    Before: 11100110111110100000000000000110000000000001
    After:              10100000000000000110000000000001

Each bit in the first operand is paired with the corresponding bit in the second operand: _first bit_ to _first bit_, _second bit_ to _second bit_, and so on.

The operator is applied to each pair of bits, and the result is constructed bitwise.

The truth table for the XOR operation is:

<table><thead><tr class="header"><th>a</th><th>b</th><th>a XOR b</th></tr></thead><tbody><tr class="odd"><td>0</td><td>0</td><td>0</td></tr><tr class="even"><td>0</td><td>1</td><td>1</td></tr><tr class="odd"><td>1</td><td>0</td><td>1</td></tr><tr class="even"><td>1</td><td>1</td><td>0</td></tr></tbody></table>

    .    9 (base 10) = 00000000000000000000000000001001 (base 2)
        14 (base 10) = 00000000000000000000000000001110 (base 2)
                       --------------------------------
    14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)

Bitwise XORing any number `x` with `0` yields `x`.

## Examples

### Using bitwise XOR

    // 9  (00000000000000000000000000001001)
    // 14 (00000000000000000000000000001110)

    14 ^ 9;
    // 7  (00000000000000000000000000000111)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#prod-BitwiseXORExpression">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Bitwise XOR expression' in that specification.</span></a></td></tr></tbody></table>

`Bitwise_XOR`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Bitwise operators in the JS guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)
-   [Bitwise XOR assignment operator](bitwise_xor_assignment)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR</a>

# 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.

## Syntax

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

## Examples

### Using bitwise XOR assignment

    let a = 5;      // 00000000000000000000000000000101
    a ^= 3;         // 00000000000000000000000000000011

    console.log(a); // 00000000000000000000000000000110
    // 6

    let b = 5;      // 00000000000000000000000000000101
    b ^= 0;         // 00000000000000000000000000000000

    console.log(b); // 00000000000000000000000000000101
    // 5

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-assignment-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-assignment-operators</span></a></td></tr></tbody></table>

`Bitwise_XOR_assignment`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Assignment operators in the JS guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
-   [Bitwise XOR operator](bitwise_xor)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment</a>

# String.prototype.blink()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `blink()` method creates a [`<blink>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink) HTML element that causes a string to blink.

**Warning:** Blinking text is frowned upon by several accessibility standards. The `<blink>` element itself is non-standard and deprecated!

## Syntax

    blink()

### Return value

A string containing a [`<blink>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink) HTML element.

## Description

The `blink()` method embeds a string in a `<blink>` element: "`<blink>str</blink>`".

## Examples

### Using blink()

The following example uses string methods to change the formatting of a string:

    var worldString = 'Hello, world';

    console.log(worldString.blink());   // <blink>Hello, world</blink>
    console.log(worldString.bold());    // <b>Hello, world</b>
    console.log(worldString.italics()); // <i>Hello, world</i>
    console.log(worldString.strike());  // <strike>Hello, world</strike>

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.blink">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.blink</span></a></td></tr></tbody></table>

`blink`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.bold()`](bold)
-   [`String.prototype.italics()`](italics)
-   [`String.prototype.strike()`](strike)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/blink" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/blink</a>

# block

A **block statement** (or **compound statement** in other languages) is used to group zero or more statements. The block is delimited by a pair of braces ("curly brackets") and may optionally be [labelled](label):

## Syntax

### Block Statement

    {
      StatementList
    }

### Labelled Block Statement

    LabelIdentifier: {
      StatementList
    }

`StatementList`  
Statements grouped within the block statement.

`LabelIdentifier`  
An optional [label](label) for visual identification or as a target for [`break`](break).

## Description

The block statement is often called **compound statement** in other languages. It allows you to use multiple statements where JavaScript expects only one statement. Combining statements into blocks is a common practice in JavaScript. The opposite behavior is possible using an [empty statement](empty), where you provide no statement, although one is required.

Blocks are commonly used in association with [`if...else`](if...else) and [`for`](for) statements.

## Examples

### Block scoping rules with var or function declaration in non-strict mode

Variables declared with `var` or created by [function declarations](function) in non-strict mode **do not** have block scope. Variables introduced within a block are scoped to the containing function or script, and the effects of setting them persist beyond the block itself. In other words, block statements do not introduce a scope. For example:

    var x = 1;
    {
      var x = 2;
    }
    console.log(x); // logs 2

This logs 2 because the `var x` statement within the block is in the same scope as the `var x` statement before the block.

In non-strict code, function declarations inside blocks behave strangely. Do not use them.

### Block scoping rules with let, const or function declaration in strict mode

By contrast, identifiers declared with [`let`](let) and [`const`](const) **do have** block scope:

    let x = 1;
    {
      let x = 2;
    }
    console.log(x); // logs 1

The `x = 2` is limited in scope to the block in which it was defined.

The same is true of `const`:

    const c = 1;
    {
      const c = 2;
    }
    console.log(c); // logs 1 and does not throw SyntaxError...

Note that the block-scoped `const c = 2` _does not_ throw a `SyntaxError: Identifier 'c' has already been declared` because it can be declared uniquely within the block.

In [strict mode](../strict_mode), starting with ES2015, functions inside blocks are scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-block">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-block</span></a></td></tr></tbody></table>

`block`

1

12

1

11

3

1

1

18

4

10.1

1

1.0

## See also

-   [`while`](while)
-   [`if...else`](if...else)
-   [`let`](let)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block</a>

# String.prototype.bold()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `bold()` method creates a [`<b>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) HTML element that causes a string to be displayed as bold.

## Syntax

    bold()

### Return value

A string containing a [`<b>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) HTML element.

## Description

The `bold()` method embeds a string in a `<b>` element: "`<b>str</b>`".

## Examples

### Using bold()

The following example uses string methods to change the formatting of a string:

    var worldString = 'Hello, world';

    console.log(worldString.blink());   // <blink>Hello, world</blink>
    console.log(worldString.bold());    // <b>Hello, world</b>
    console.log(worldString.italics()); // <i>Hello, world</i>
    console.log(worldString.strike());  // <strike>Hello, world</strike>

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.bold">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.bold</span></a></td></tr></tbody></table>

`bold`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.blink()`](blink)
-   [`String.prototype.italics()`](italics)
-   [`String.prototype.strike()`](strike)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/bold" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/bold</a>

# Boolean

The `Boolean` object is an object wrapper for a boolean value.

## Description

The value passed as the first parameter is converted to a boolean value, if necessary. If the value is omitted or is `0`, `-0`, [`null`](null), `false`, [`NaN`](nan), [`undefined`](undefined), or the empty string (`""`), the object has an initial value of `false`. All other values, including any object, an empty array (`[]`), or the string "`false`", create an object with an initial value of `true`.

Do not confuse the [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) `Boolean` values `true` and `false` with the `true` and `false` values of the `Boolean` object.

**Any** object of which the value is not [`undefined`](undefined) or [`null`](null), including a `Boolean` object whose value is `false`, evaluates to `true` when passed to a conditional statement. For example, the condition in the following [`if`](../statements/if...else) statement evaluates to `true`:

    var x = new Boolean(false);
    if (x) {
      // this code is executed
    }

This behavior does not apply to `Boolean` primitives. For example, the condition in the following [`if`](../statements/if...else) statement evaluates to `false`:

    var x = false;
    if (x) {
      // this code is not executed
    }

Do not use a `Boolean` object to convert a non-boolean value to a boolean value. To perform this task, instead, use `Boolean` as a function, or a [double NOT operator](../operators/logical_not):

    var x = Boolean(expression);     // use this...
    var x = !!(expression);          // ...or this
    var x = new Boolean(expression); // don't use this!

If you specify any object, including a `Boolean` object whose value is `false`, as the initial value of a `Boolean` object, the new `Boolean` object has a value of `true`.

    var myFalse = new Boolean(false);   // initial value of false
    var g = Boolean(myFalse);       // initial value of true
    var myString = new String('Hello'); // string object
    var s = Boolean(myString);      // initial value of true

Do not use a `Boolean` object in place of a `Boolean` primitive.

**Note:** When the non-standard property `document.all` is used as an argument for this constructor, the result is a `Boolean` object with the value `false`. This property is legacy and non-standard and should not be used.

## Constructor

[`Boolean()`](boolean/boolean)  
Creates a new `Boolean` object.

## Instance methods

[`Boolean.prototype.toString()`](boolean/tostring)  
Returns a string of either `true` or `false` depending upon the value of the object. Overrides the [`Object.prototype.toString()`](object/tostring) method.

[`Boolean.prototype.valueOf()`](boolean/valueof)  
Returns the primitive value of the [`Boolean`](boolean) object. Overrides the [`Object.prototype.valueOf()`](object/valueof) method.

## Examples

### Creating `Boolean` objects with an initial value of `false`

    var bNoParam = new Boolean();
    var bZero = new Boolean(0);
    var bNull = new Boolean(null);
    var bEmptyString = new Boolean('');
    var bfalse = new Boolean(false);

### Creating `Boolean` objects with an initial value of `true`

    var btrue = new Boolean(true);
    var btrueString = new Boolean('true');
    var bfalseString = new Boolean('false');
    var bSuLin = new Boolean('Su Lin');
    var bArrayProto = new Boolean([]);
    var bObjProto = new Boolean({});

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-boolean-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-boolean-objects</span></a></td></tr></tbody></table>

`Boolean`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`Boolean`

1

12

1

3

4

1

1

18

4

10.1

1

1.0

`toSource`

No

No

1-74

Starting in Firefox 74, `toSource()` is no longer available for use by web content. It is still allowed for internal and privileged code.

No

No

No

No

No

4

No

No

No

`toString`

1

12

1

3

4

1

1

18

4

10.1

1

1.0

`valueOf`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [Boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)
-   [Boolean primitives](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#boolean_type)
-   [Boolean data type (Wikipedia)](https://en.wikipedia.org/wiki/Boolean_data_type)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean</a>

# break

The `break` terminates the current loop, [`switch`](switch), or [label](label) statement and transfers program control to the statement following the terminated statement.

## Syntax

    break [label];

`label` <span class="badge inline optional">Optional</span>  
Identifier associated with the label of the statement. If the statement is not a loop or [`switch`](switch), this is required.

## Description

The `break` statement includes an optional label that allows the program to break out of a labeled statement. The `break` statement needs to be nested within the referenced label. The labeled statement can be any [block](block) statement; it does not have to be preceded by a loop statement.

A `break` statement, with or without a following label, cannot be used within the body of a function that is itself nested within the current loop, switch, or label statement that the `break` statement is intended to break out of.

## Examples

### break in while loop

The following function has a `break` statement that terminates the [`while`](while) loop when `i` is 3, and then returns the value 3 \* `x`.

    function testBreak(x) {
      var i = 0;

      while (i < 6) {
        if (i == 3) {
          break;
        }
        i += 1;
      }

      return i * x;
    }

### break in switch statements

The following code has a `break` statement that terminates the [`switch`](switch) statement when a case is matched and the corresponding code has ran

    const food = "sushi";

    switch (food) {
      case "sushi":
        console.log("Sushi is originally from Japan.");
        break;
      case "pizza":
        console.log("Pizza is originally from Italy.");
        break;
      default:
        console.log("I have never heard of that dish.");
        break;
    }

### break in labeled blocks

The following code uses `break` statements with labeled blocks. A `break` statement must be nested within any label it references. Notice that `inner_block` is nested within `outer_block`.

    outer_block: {
      inner_block: {
        console.log('1');
        break outer_block; // breaks out of both inner_block and outer_block
        console.log(':-('); // skipped
      }
      console.log('2'); // skipped
    }

### break in labeled blocks that throw

The following code also uses `break` statements with labeled blocks, but generates a `SyntaxError` because its `break` statement is within `block_1` but references `block_2`. A `break` statement must always be nested within any label it references.

    block_1: {
      console.log('1');
      break block_2; // SyntaxError: label not found
    }

    block_2: {
      console.log('2');
    }

### break within functions

`SyntaxError`s are also generated in the following code examples which use `break` statements within functions that are nested within a loop, or labeled block that the `break` statements are intended to break out of.

    function testBreak(x) {
      var i = 0;

      while (i < 6) {
        if (i == 3) {
          (function() {
            break;
          })();
        }
        i += 1;
      }

    return i * x;
    }

    testBreak(1); // SyntaxError: Illegal break statement

    block_1: {
      console.log('1');
      ( function() {
        break block_1; // SyntaxError: Undefined label 'block_1'
      })();
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-break-statement">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Break statement' in that specification.</span></a></td></tr></tbody></table>

`break`

1

12

1

3

4

1

1

18

4

10.1

1

1.0

## See also

-   [`continue`](continue)
-   [label](label)
-   [`switch`](switch)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break</a>

# WebAssembly.Memory.prototype.buffer

The `buffer` prototype property of the [`WebAssembly.Memory`](../memory) object returns the buffer contained in the memory.

## Examples

### Using buffer

The following example (see [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) on GitHub, and [view it live also](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)) fetches and instantiates the loaded memory.wasm byte code using the [`WebAssembly.instantiateStreaming()`](../instantiatestreaming) method, while importing the memory created in the line above. It then stores some values in that memory, then exports a function and uses it to sum some values.

    WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
    .then(obj => {
      var i32 = new Uint32Array(memory.buffer);
      for (var i = 0; i < 10; i++) {
        i32[i] = i;
      }
      var sum = obj.instance.exports.accumulate(0, 10);
      console.log(sum);
    });

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#dom-memory-buffer">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#dom-memory-buffer</span></a></td></tr></tbody></table>

`buffer`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer</a>

# SharedArrayBuffer.prototype.byteLength

The `byteLength` accessor property represents the length of an [`SharedArrayBuffer`](../sharedarraybuffer) in bytes.

## Description

The `byteLength` property is an accessor property whose set accessor function is `undefined`, meaning that you can only read this property. The value is established when the shared array is constructed and cannot be changed.

## Examples

### Using byteLength

    var sab = new SharedArrayBuffer(1024);
    sab.byteLength; // 1024

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-get-sharedarraybuffer.prototype.bytelength">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-get-sharedarraybuffer.prototype.bytelength</span></a></td></tr></tbody></table>

`byteLength`

68

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

79

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

89

`SharedArrayBuffer` is gated behind COOP/COEP. For more detail, read [Making your website "cross-origin isolated" using COOP and COEP](https://web.dev/coop-coep/).

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

79

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11

No

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

## See also

-   [`SharedArrayBuffer`](../sharedarraybuffer)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/byteLength" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/byteLength</a>

# TypedArray.prototype.byteOffset

The `byteOffset` accessor property represents the offset (in bytes) of a typed array from the start of its [`ArrayBuffer`](../arraybuffer).

## Description

The `byteOffset` property is an accessor property whose set accessor function is `undefined`, meaning that you can only read this property. The value is established when a _TypedArray_ is constructed and cannot be changed. _TypedArray_ is one of the [TypedArray objects](../typedarray#typedarray_objects).

## Examples

### Using the byteOffset property

    var buffer = new ArrayBuffer(8);

    var uint8 = new Uint8Array(buffer);
    uint8.byteOffset; // 0 (no offset specified)

    var uint8 = new Uint8Array(buffer, 3);
    uint8.byteOffset; // 3 (as specified when constructing Uint8Array)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="#">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-get-%typedarray%.prototype.byteoffset</span></a></td></tr></tbody></table>

`byteOffset`

7

14

4

10

11.6

5.1

4

18

4

12

4.2

1.0

## See also

-   [JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)
-   [`TypedArray`](../typedarray)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset</a>

# TypedArray.BYTES_PER_ELEMENT

The `TypedArray.BYTES_PER_ELEMENT` property represents the size in bytes of each element in an typed array.

Property attributes of `TypedArray.BYTES_PER_ELEMENT`

Writable

no

Enumerable

no

Configurable

no

## Description

`TypedArray` objects differ from each other in the number of bytes per element and in the way the bytes are interpreted. The `BYTES_PER_ELEMENT` constant contains the number of bytes each element in the given `TypedArray` has.

## Examples

### Using BYTES_PER_ELEMENT

    Int8Array.BYTES_PER_ELEMENT;         // 1
    Uint8Array.BYTES_PER_ELEMENT;        // 1
    Uint8ClampedArray.BYTES_PER_ELEMENT; // 1
    Int16Array.BYTES_PER_ELEMENT;        // 2
    Uint16Array.BYTES_PER_ELEMENT;       // 2
    Int32Array.BYTES_PER_ELEMENT;        // 4
    Uint32Array.BYTES_PER_ELEMENT;       // 4
    Float32Array.BYTES_PER_ELEMENT;      // 4
    Float64Array.BYTES_PER_ELEMENT;      // 8

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-typedarray.bytes_per_element">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-typedarray.bytes_per_element</span></a></td></tr></tbody></table>

`BYTES_PER_ELEMENT`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

## See also

-   [JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)
-   [`TypedArray`](../typedarray)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT</a>

# Intl.Locale.prototype.calendar

The `Intl.Locale.prototype.calendar` property is an accessor property which returns the type of calendar used in the `Locale`.

## Description

The `calendar` property returns the part of the `Locale` that indicates the `Locale`'s calendar era. While most of the world uses the Gregorian calendar, there are several regional calendar eras used around the world. The following table shows all the valid Unicode calendar key strings, along with a description of the calendar era they represent.

### Unicode calendar keys

<table><caption>Unicode calendar keys</caption><colgroup><col style="width: 50%" /><col style="width: 50%" /></colgroup><thead><tr class="header"><th>Calendar key (name)</th><th>Description</th></tr></thead><tbody><tr class="odd"><td><code>buddhist</code></td><td>Thai Buddhist calendar</td></tr><tr class="even"><td><code>chinese</code></td><td>Traditional Chinese calendar</td></tr><tr class="odd"><td><code>coptic</code></td><td>Coptic calendar</td></tr><tr class="even"><td><code>dangi</code></td><td>Traditional Korean calendar</td></tr><tr class="odd"><td><code>ethioaa</code></td><td>Ethiopic calendar, Amete Alem (epoch approx. 5493 B.C.E)</td></tr><tr class="even"><td><code>ethiopic</code></td><td>Ethiopic calendar, Amete Mihret (epoch approx, 8 C.E.)</td></tr><tr class="odd"><td><code>gregory</code></td><td>Gregorian calendar</td></tr><tr class="even"><td><code>hebrew</code></td><td>Traditional Hebrew calendar</td></tr><tr class="odd"><td><code>indian</code></td><td>Indian calendar</td></tr><tr class="even"><td><code>islamic</code></td><td>Islamic calendar</td></tr><tr class="odd"><td><code>islamic-umalqura</code></td><td>Islamic calendar, Umm al-Qura</td></tr><tr class="even"><td><code>islamic-tbla</code></td><td>Islamic calendar, tabular (intercalary years [2,5,7,10,13,16,18,21,24,26,29] - astronomical epoch)</td></tr><tr class="odd"><td><code>islamic-civil</code></td><td>Islamic calendar, tabular (intercalary years [2,5,7,10,13,16,18,21,24,26,29] - civil epoch)</td></tr><tr class="even"><td><code>islamic-rgsa</code></td><td>Islamic calendar, Saudi Arabia sighting</td></tr><tr class="odd"><td><code>iso8601</code></td><td>ISO calendar (Gregorian calendar using the ISO 8601 calendar week rules)</td></tr><tr class="even"><td><code>japanese</code></td><td>Japanese Imperial calendar</td></tr><tr class="odd"><td><code>persian</code></td><td>Persian calendar</td></tr><tr class="even"><td><code>roc</code></td><td>Republic of China calendar</td></tr><tr class="odd"><td><div class="notecard warning"><p><strong>Warning:</strong> The <code>islamicc</code> calendar key has been deprecated. Please use <code>islamic-civil</code>.</p></div><p><code>islamicc</code></p></td><td>Civil (algorithmic) Arabic calendar</td></tr></tbody></table>

## Examples

### Adding a calendar in the Locale string

Calendar eras fall under the category of locale key "extension keys". These keys add additional data about the locale, and are added to locale identifiers by using the `-u` extension. Thus, the calendar era type can be added to the initial locale identifier string that is passed into the [`Intl.Locale`](locale) constructor. To add the calendar type, first add the `-u` extension to the string. Next, add the `-ca` extension to indicate that you are adding a calendar type. Finally, add the calendar era to the string.

    let frBuddhist = new Intl.Locale("fr-FR-u-ca-buddhist");
    console.log(frBuddhist.calendar); // Prints "buddhist"

### Adding a calendar with a configuration object

The [`Intl.Locale`](locale) constructor has an optional configuration object argument, which can contain any of several extension types, including calendars. Set the `calendar` property of the configuration object to your desired calendar era, and then pass it into the constructor.

    let frBuddhist = new Intl.Locale("fr-FR", {calendar: "buddhist"});
    console.log(frBuddhist.calendar); // Prints "buddhist"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.Locale.prototype.calendar">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.Locale.prototype.calendar</span></a></td></tr></tbody></table>

`calendar`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl.Locale`](../locale)
-   [Unicode Calendar Identifiers](https://www.unicode.org/reports/tr35/#UnicodeCalendarIdentifier)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar</a>

# Function.prototype.call()

The `call()` method calls a function with a given `this` value and arguments provided individually.

## Syntax

    call()
    call(thisArg)
    call(thisArg, arg1)
    call(thisArg, arg1, arg2)
    call(thisArg, arg1, ... , argN)

### Parameters

`thisArg` <span class="badge inline optional">Optional</span>  
The value to use as `this` when calling `func`.

**Note:** In certain cases, `thisArg` may not be the actual value seen by the method.

If the method is a function in [non-strict mode](../../strict_mode), [`null`](../null) and [`undefined`](../undefined) will be replaced with the global object, and primitive values will be converted to objects.

`arg1, arg2, ...argN` <span class="badge inline optional">Optional</span>  
Arguments for the function.

### Return value

The result of calling the function with the specified `this` value and arguments.

## Description

The `call()` allows for a function/method belonging to one object to be assigned and called for a different object.

`call()` provides a new value of `this` to the function/method. With `call()`, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

**Note:** While the syntax of this function is almost identical to that of [`apply()`](apply), the fundamental difference is that `call()` accepts an **argument list**, while `apply()` accepts a **single array of arguments**.

## Examples

### Using `call` to chain constructors for an object

You can use `call` to chain constructors for an object (similar to Java).

In the following example, the constructor for the `Product` object is defined with two parameters: `name` and `price`.

Two other functions, `Food` and `Toy`, invoke `Product`, passing `this`, `name`, and `price`. `Product` initializes the properties `name` and `price`, both specialized functions define the `category`.

    function Product(name, price) {
      this.name = name;
      this.price = price;
    }

    function Food(name, price) {
      Product.call(this, name, price);
      this.category = 'food';
    }

    function Toy(name, price) {
      Product.call(this, name, price);
      this.category = 'toy';
    }

    const cheese = new Food('feta', 5);
    const fun = new Toy('robot', 40);

### Using `call` to invoke an anonymous function

In this example, we create an anonymous function and use `call` to invoke it on every object in an array.

The main purpose of the anonymous function here is to add a `print` function to every object, which is able to print the correct index of the object in the array.

**Note:** Passing the object as `this` value is not strictly necessary, but is done for explanatory purpose.

    const animals = [
      { species: 'Lion', name: 'King' },
      { species: 'Whale', name: 'Fail' }
    ];

    for (let i = 0; i < animals.length; i++) {
      (function(i) {
        this.print = function() {
          console.log('#' + i + ' ' + this.species
                      + ': ' + this.name);
        }
        this.print();
      }).call(animals[i], i);
    }

### Using `call` to invoke a function and specifying the context for '`this`'

In the example below, when we call `greet`, the value of `this` will be bound to object `obj`.

    function greet() {
      const reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
      console.log(reply);
    }

    const obj = {
      animal: 'cats', sleepDuration: '12 and 16 hours'
    };

    greet.call(obj);  // cats typically sleep between 12 and 16 hours

### Using `call` to invoke a function and without specifying the first argument

In the example below, we invoke the `display` function without passing the first argument. If the first argument is not passed, the value of `this` is bound to the global object.

    var sData = 'Wisen';

    function display() {
      console.log('sData value is %s ', this.sData);
    }

    display.call();  // sData value is Wisen

**Note:** In strict mode, the value of `this` will be `undefined`. See below.

    'use strict';

    var sData = 'Wisen';

    function display() {
      console.log('sData value is %s ', this.sData);
    }

    display.call(); // Cannot read the property of 'sData' of undefined

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-function.prototype.call">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Function.prototype.call' in that specification.</span></a></td></tr></tbody></table>

`call`

1

12

1

5.5

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Function.prototype.bind()`](bind)
-   [`Function.prototype.apply()`](apply)
-   [Introduction to Object-Oriented JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call</a>

# TypeError: X.prototype.y called on incompatible type

The JavaScript exception "called on incompatible target (or object)" occurs when a function (on a given object), is called with a `this` not corresponding to the type expected by the function.

## Message

    TypeError: 'this' is not a Set object (EdgE)
    TypeError: Function.prototype.toString called on incompatible object (Firefox)
    TypeError: Function.prototype.bind called on incompatible target (Firefox)
    TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome)
    TypeError: Bind must be called on a function (Chrome)

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

When this error is thrown, a function (on a given object), is called with a `this` not corresponding to the type expected by the function.

This issue can arise when using the [`Function.prototype.call()`](../global_objects/function/call) or [`Function.prototype.apply()`](../global_objects/function/apply) methods, and providing a `this` argument which does not have the expected type.

This issue can also happen when providing a function that is stored as a property of an object as an argument to another function. In this case, the object that stores the function won't be the `this` target of that function when it is called by the other function. To work-around this issue, you will either need to provide a lambda which is making the call, or use the [`Function.prototype.bind()`](../global_objects/function/bind) function to force the `this` argument to the expected object.

## Examples

### Invalid cases

    var mySet = new Set;
    ['bar', 'baz'].forEach(mySet.add);
    // mySet.add is a function, but "mySet" is not captured as this.

    var myFun = function () {
      console.log(this);
    };
    ['bar', 'baz'].forEach(myFun.bind);
    // myFun.bind is a function, but "myFun" is not captured as this.

### Valid cases

    var mySet = new Set;
    ['bar', 'baz'].forEach(mySet.add.bind(mySet));
    // This works due to binding "mySet" as this.

    var myFun = function () {
      console.log(this);
    };
    ['bar', 'baz'].forEach(x => myFun.bind(x));
    // This works using the "bind" function. It creates a lambda forwarding the argument.

## See also

-   [`Function.prototype.call()`](../global_objects/function/call)
-   [`Function.prototype.apply()`](../global_objects/function/apply)
-   [`Function.prototype.bind()`](../global_objects/function/bind)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Called_on_incompatible_type" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Called_on_incompatible_type</a>

# arguments.callee

The `arguments.callee` property contains the currently executing function.

## Description

`callee` is a property of the `arguments` object. It can be used to refer to the currently executing function inside the function body of that function. This is useful when the name of the function is unknown, such as within a function expression with no name (also called "anonymous functions").

**Warning:** The 5th edition of ECMAScript (ES5) forbids use of `arguments.callee()` in [strict mode](../../strict_mode). Avoid using `arguments.callee()` by either giving function expressions a name or use a function declaration where a function must call itself.

### Why was `arguments.callee` removed from ES5 strict mode?

(adapted from [a Stack Overflow answer by olliej](https://stackoverflow.com/a/235760/578288))

Early versions of JavaScript did not allow named function expressions, and for this reason you could not make a recursive function expression.

For example, this syntax worked:

    function factorial (n) {
        return !(n > 1) ? 1 : factorial(n - 1) * n;
    }

    [1, 2, 3, 4, 5].map(factorial);

but:

    [1, 2, 3, 4, 5].map(function(n) {
        return !(n > 1) ? 1 : /* what goes here? */ (n - 1) * n;
    });

did not. To get around this `arguments.callee` was added so you could do

    [1, 2, 3, 4, 5].map(function(n) {
        return !(n > 1) ? 1 : arguments.callee(n - 1) * n;
    });

However, this was actually a really bad solution as this (in conjunction with other `arguments`, `callee`, and `caller` issues) make inlining and tail recursion impossible in the general case (you can achieve it in select cases through tracing, etc., but even the best code is suboptimal due to checks that would not otherwise be necessary.) The other major issue is that the recursive call will get a different `this` value, e.g.:

    var global = this;

    var sillyFunction = function(recursed) {
        if (!recursed) { return arguments.callee(true); }
        if (this !== global) {
            alert('This is: ' + this);
        } else {
            alert('This is the global');
        }
    }

    sillyFunction();

ECMAScript 3 resolved these issues by allowing named function expressions. For example:

    [1, 2, 3, 4, 5].map(function factorial(n) {
        return !(n > 1) ? 1 : factorial(n - 1)*n;
    });

This has numerous benefits:

-   the function can be called like any other from inside your code
-   it does not create a variable in the outer scope ([except for IE 8 and below](https://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope))
-   it has better performance than accessing the arguments object

Another feature that was deprecated was `arguments.callee.caller`, or more specifically `Function.caller`. Why is this? Well, at any point in time you can find the deepest caller of any function on the stack, and as I said above looking at the call stack has one single major effect: it makes a large number of optimizations impossible, or much more difficult. For example, if you cannot guarantee that a function `f` will not call an unknown function, it is not possible to inline `f`. Basically it means that any call site that may have been trivially inlinable accumulates a large number of guards:

    function f(a, b, c, d, e) { return a ? b * c : d * e; }

If the JavaScript interpreter cannot guarantee that all the provided arguments are numbers at the point that the call is made, it needs to either insert checks for all the arguments before the inlined code, or it cannot inline the function. Now in this particular case a smart interpreter should be able to rearrange the checks to be more optimal and not check any values that would not be used. However in many cases that's just not possible and therefore it becomes impossible to inline.

## Examples

### Using `arguments.callee` in an anonymous recursive function

A recursive function must be able to refer to itself. Typically, a function refers to itself by its name. However, an anonymous function (which can be created by a [function expression](../../operators/function) or the [`Function` constructor](../../global_objects/function)) does not have a name. Therefore if there is no accessible variable referring to it, the only way the function can refer to itself is by `arguments.callee`.

The following example defines a function, which, in turn, defines and returns a factorial function. This example isn't very practical, and there are nearly no cases where the same result cannot be achieved with [named function expressions](../../operators/function).

    function create() {
       return function(n) {
          if (n <= 1)
             return 1;
          return n * arguments.callee(n - 1);
       };
    }

    var result = create()(5); // returns 120 (5 * 4 * 3 * 2 * 1)

### A use of `arguments.callee` with no good alternative

However, in a case like the following, there are not alternatives to `arguments.callee`, so its deprecation could be a bug (see [bug 725398](https://bugzilla.mozilla.org/show_bug.cgi?id=725398)):

    function createPerson(sIdentity) {
        var oPerson = new Function('alert(arguments.callee.identity);');
        oPerson.identity = sIdentity;
        return oPerson;
    }

    var john = createPerson('John Smith');

    john();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-arguments-exotic-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-arguments-exotic-objects</span></a></td></tr></tbody></table>

`callee`

1

12

1

6

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Function`](../../global_objects/function)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee</a>

# Function.caller

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `function.caller` property returns the function that invoked the specified function. It returns `null` for strict, async function and generator function callers.

## Description

If the function `f` was invoked by the top level code, the value of `f.caller` is [`null`](../null), otherwise it's the function that called `f`. It's also `null` for strict, async function and generator function callers.

This property replaces the obsolete <span class="page-not-created">`arguments.caller`</span> property of the [`arguments`](../../functions/arguments) object.

The special property `__caller__`, which returned the activation object of the caller thus allowing to reconstruct the stack, was removed for security reasons.

### Notes

Note that in case of recursion, you can't reconstruct the call stack using this property. Consider:

    function f(n) { g(n - 1); }
    function g(n) { if (n > 0) { f(n); } else { stop(); } }
    f(2);

At the moment `stop()` is called the call stack will be:

    f(2) -> g(1) -> f(1) -> g(0) -> stop()

The following is true:

    stop.caller === g && f.caller === g && g.caller === f

so if you tried to get the stack trace in the `stop()` function like this:

    var f = stop;
    var stack = 'Stack trace:';
    while (f) {
      stack += '\n' + f.name;
      f = f.caller;
    }

the loop would never stop.

## Examples

### Checking the value of a function's `caller` property

The following code checks the value a function's `caller` property.

    function myFunc() {
      if (myFunc.caller == null) {
        return 'The function was called from the top!';
      } else {
        return 'This function\'s caller was ' + myFunc.caller;
      }
    }

## Specifications

<span class="pl-s">Not part of any standard.</span>

`caller`

1

12

1

8

9.6

3

1

18

4

10.1

1

1.0

## See also

-   [`Function.name`](name)
-   [`arguments`](../../functions/arguments)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/caller" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/caller</a>

# ReferenceError: can't access lexical declaration\`X' before initialization

The JavaScript exception "can't access lexical declaration \`_variable_' before initialization" occurs when a lexical variable was accessed before it was initialized. This happens within any block statement, when `let` or `const` declarations are accessed before they are defined.

## Message

    ReferenceError: Use before delaration (Edge)
    ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
    ReferenceError: 'x' is not defined (Chrome)

## Error type

[`ReferenceError`](../global_objects/referenceerror)

## What went wrong?

A lexical variable was accessed before it was initialized. This happens within any block statement, when `let` or `const` declarations are accessed before they are defined.

## Examples

### Invalid cases

In this case, the variable "foo" is redeclared in the block statement using `let`.

    function test() {
      let foo = 33;
      if (true) {
        let foo = (foo + 55);
        // ReferenceError: can't access lexical
        // declaration `foo' before initialization
      }
    }
    test();

### Valid cases

To change "foo" inside the if statement, you need to remove the `let` that causes the redeclaration.

    function test(){
       let foo = 33;
       if (true) {
          foo = (foo + 55);
       }
    }
    test();

## See also

-   [Temporal Dead Zone and errors with let](../statements/let#temporal_dead_zone_and_errors_with_let)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init</a>

# TypeError: can't access property "x" of "y"

The JavaScript exception "can't access property" occurs when property access was operated on [`undefined`](../global_objects/undefined) or [`null`](../global_objects/null) values.

## Message

    TypeError: Unable to get property {x} of undefined or null reference (Edge)
    TypeError: can't access property {x} of {y} (Firefox)
    TypeError: {y} is undefined, can't access property {x} of it (Firefox)
    TypeError: {y} is null, can't access property {x} of it (Firefox)

    Examples:
    TypeError: x is undefined, can't access property "prop" of it
    TypeError: x is null, can't access property "prop" of it
    TypeError: can't access property "prop" of undefined
    TypeError: can't access property "prop" of null

## Error type

[`TypeError`](../global_objects/typeerror).

## What went wrong?

The property access was operated on [`undefined`](../global_objects/undefined) or [`null`](../global_objects/null) value.

## Examples

### Invalid cases

    // undefined and null cases on which the substring method won't work
    var foo = undefined;
    foo.substring(1); // TypeError: x is undefined, can't access property "substring" of it

    var foo = null;
    foo.substring(1); // TypeError: x is null, can't access property "substring" of it

### Fixing the issue

To fix null pointer to `undefined` or `null` values, you can use the [typeof](../operators/typeof) operator, for example.

    if (typeof foo !== 'undefined') {
      // Now we know that foo is defined, we are good to go.
    }

## See also

-   [`undefined`](../global_objects/undefined)
-   [`null`](../global_objects/null)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property</a>

# TypeError: can't assign to property "x" on "y": not an object

The JavaScript strict mode exception "can't assign to property" occurs when attempting to create a property on [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) value such as a [symbol](https://developer.mozilla.org/en-US/docs/Glossary/Symbol), a [string](https://developer.mozilla.org/en-US/docs/Glossary/String), a [number](https://developer.mozilla.org/en-US/docs/Glossary/Number) or a [boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean). [Primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) values cannot hold any [property](https://developer.mozilla.org/en-US/docs/Glossary/property/JavaScript).

## Message

    TypeError: can't assign to property "x" on {y}: not an object (Firefox)
    TypeError: Cannot create property 'x' on {y} (Chrome)

## Error type

[`TypeError`](../global_objects/typeerror).

## What went wrong?

In [`Strict_mode`](../strict_mode), a [`TypeError`](../global_objects/typeerror) is raised when attempting to create a property on [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) value such as a [symbol](https://developer.mozilla.org/en-US/docs/Glossary/Symbol), a [string](https://developer.mozilla.org/en-US/docs/Glossary/String), a [number](https://developer.mozilla.org/en-US/docs/Glossary/Number) or a [boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean). [Primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) values cannot hold any [property](https://developer.mozilla.org/en-US/docs/Glossary/property/JavaScript).

The problem might be that an unexpected value is flowing at an unexpected place, or that an object variant of a [`String`](../global_objects/string) or a [`Number`](../global_objects/number) is expected.

## Examples

### Invalid cases

    'use strict';

    var foo = "my string";
    // The following line does nothing if not in strict mode.
    foo.bar = {}; // TypeError: can't assign to property "bar" on "my string": not an object

### Fixing the issue

Either fix the code to prevent the [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) from being used in such places, or fix the issue is to create the object equivalent [`Object`](../global_objects/object).

    'use strict';

    var foo = new String("my string");
    foo.bar = {};

## See also

-   [`Strict_mode`](../strict_mode)
-   [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_assign_to_property" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_assign_to_property</a>

# TypeError: can't define property "x": "obj" is not extensible

The JavaScript exception "can't define property "x": "obj" is not extensible" occurs when [`Object.preventExtensions()`](../global_objects/object/preventextensions) marked an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible.

## Message

    TypeError: Cannot create property for a non-extensible object (Edge)
    TypeError: can't define property "x": "obj" is not extensible (Firefox)
    TypeError: Cannot define property: "x", object is not extensible. (Chrome)

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

Usually, an object is extensible and new properties can be added to it. However, in this case [`Object.preventExtensions()`](../global_objects/object/preventextensions) marked an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible.

## Examples

### Adding new properties to a non-extensible objects

In [strict mode](../strict_mode), attempting to add new properties to a non-extensible object throws a `TypeError`. In sloppy mode, the addition of the "x" property is silently ignored.

    'use strict';

    var obj = {};
    Object.preventExtensions(obj);

    obj.x = 'foo';
    // TypeError: can't define property "x": "obj" is not extensible

In both, [strict mode](../strict_mode) and sloppy mode, a call to [`Object.defineProperty()`](../global_objects/object/defineproperty) throws when adding a new property to a non-extensible object.

    var obj = { };
    Object.preventExtensions(obj);

    Object.defineProperty(obj,
      'x', { value: "foo" }
    );
    // TypeError: can't define property "x": "obj" is not extensible

To fix this error, you will either need to remove the call to [`Object.preventExtensions()`](../global_objects/object/preventextensions) entirely, or move it to a position so that the property is added earlier and only later the object is marked as non-extensible. Of course you can also remove the property that was attempted to be added, if you don't need it.

    'use strict';

    var obj = {};
    obj.x = 'foo'; // add property first and only then prevent extensions

    Object.preventExtensions(obj);

## See also

-   [`Object.preventExtensions()`](../global_objects/object/preventextensions)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible</a>

# TypeError: property "x" is non-configurable and can't be deleted

The JavaScript exception "property is non-configurable and can't be deleted" occurs when it was attempted to delete a property, but that property is [non-configurable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#properties).

## Message

    TypeError: Calling delete on 'x' is not allowed in strict mode (Edge)
    TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
    TypeError: Cannot delete property 'x' of #<Object> (Chrome)

## Error type

[`TypeError`](../global_objects/typeerror) in strict mode only.

## What went wrong?

It was attempted to delete a property, but that property is [non-configurable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#properties). The `configurable` attribute controls whether the property can be deleted from the object and whether its attributes (other than `writable`) can be changed.

This error happens only in [strict mode code](../strict_mode). In non-strict code, the operation returns `false`.

## Examples

### Attempting to delete non-configurable properties

Non-configurable properties are not super common, but they can be created using [`Object.defineProperty()`](../global_objects/object/defineproperty) or [`Object.freeze()`](../global_objects/object/freeze).

    'use strict';
    var obj = Object.freeze({name: 'Elsa', score: 157});
    delete obj.score;  // TypeError

    'use strict';
    var obj = {};
    Object.defineProperty(obj, 'foo', {value: 2, configurable: false});
    delete obj.foo;  // TypeError

    'use strict';
    var frozenArray = Object.freeze([0, 1, 2]);
    frozenArray.pop();  // TypeError

There are also a few non-configurable properties built into JavaScript. Maybe you tried to delete a mathematical constant.

    'use strict';
    delete Math.PI;  // TypeError

## See also

-   [delete operator](../operators/delete)
-   [`Object.defineProperty()`](../global_objects/object/defineproperty)
-   [`Object.freeze()`](../global_objects/object/freeze)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete</a>

# TypeError: can't redefine non-configurable property "x"

The JavaScript exception "can't redefine non-configurable property" occurs when it was attempted to redefine a property, but that property is [non-configurable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#properties).

## Message

    TypeError: Cannot modify non-writable property {x} (Edge)
    TypeError: can't redefine non-configurable property "x" (Firefox)
    TypeError: Cannot redefine property: "x" (Chrome)

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

It was attempted to redefine a property, but that property is [non-configurable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#properties). The `configurable` attribute controls whether the property can be deleted from the object and whether its attributes (other than `writable`) can be changed. Usually, properties in an object created by an [object initializer](../operators/object_initializer) are configurable. However, for example, when using [`Object.defineProperty()`](../global_objects/object/defineproperty), the property isn't configurable by default.

## Examples

### Non-configurable properties created by `Object.defineProperty`

The [`Object.defineProperty()`](../global_objects/object/defineproperty) creates non-configurable properties if you haven't specified them as configurable.

    var obj = Object.create({});
    Object.defineProperty(obj, "foo", {value: "bar"});

    Object.defineProperty(obj, "foo", {value: "baz"});
    // TypeError: can't redefine non-configurable property "foo"

You will need to set the "foo" property to configurable, if you intend to redefine it later in the code.

    var obj = Object.create({});
    Object.defineProperty(obj, "foo", {value: "bar", configurable: true});
    Object.defineProperty(obj, "foo", {value: "baz", configurable: true});

## See also

-   [\[\[Configurable\]\]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#properties)
-   [`Object.defineProperty()`](../global_objects/object/defineproperty)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_redefine_property" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_redefine_property</a>

# Intl.Locale.prototype.caseFirst

The `Intl.Locale.prototype.caseFirst` property is an accessor property that returns whether case is taken into account for the locale's collation rules.

## Description

A locale's collation rules are used to determine how strings are ordered in that locale. Certain locales use a character's case (UPPERCASE or lowercase) in the collation process. This additional rule can be expressed in a [`Locale's`](../locale) `caseFirst` property.

There are 3 values that the `caseFirst` property can have, outlined in the table below.

### `caseFirst` values

<table><thead><tr class="header"><th>Value</th><th>Description</th></tr></thead><tbody><tr class="odd"><td><code>upper</code></td><td>Upper case to be sorted before lower case.</td></tr><tr class="even"><td><code>lower</code></td><td>Lower case to be sorted before upper case.</td></tr><tr class="odd"><td><code>false</code></td><td>No special case ordering.</td></tr></tbody></table>

## Examples

### Setting the caseFirst value via the locale string

In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), the values that `caseFirst` represents correspond to the key `kf`. `kf` is treated as a locale string "extension subtag". These subtags add additional data about the locale, and are added to locale identifiers by using the `-u` extension key. Thus, the `caseFirst` value can be added to the initial locale identifier string that is passed into the `Locale` constructor. To add the `caseFirst` value, first add the `-u` extension key to the string. Next, add the `-kf` extension key to indicate that you are adding a value for `caseFirst`. Finally, add the `caseFirst` value to the string.

    let caseFirstStr = new Intl.Locale("fr-Latn-FR-u-kf-upper");
    console.log(caseFirstStr.caseFirst); // Prints "upper"

### Setting the caseFirst value via the configuration object argument

The [`Intl.Locale`](locale) constructor has an optional configuration object argument, which can be used to pass extension types. Set the `caseFirst` property of the configuration object to your desired `caseFirst` value, and then pass it into the constructor.

    let caseFirstObj= new Intl.Locale("en-Latn-US", {caseFirst: "lower"});
    console.log(us12hour.caseFirst); // Prints "lower"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.Locale.prototype.caseFirst">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.Locale.prototype.caseFirst</span></a></td></tr></tbody></table>

`caseFirst`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl.Locale`](../locale)
-   [Unicode case first collation spec](https://github.com/unicode-org/cldr/blob/master/common/bcp47/collation.xml#L49)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/caseFirst" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/caseFirst</a>

# Promise.prototype.catch()

The `catch()` method returns a [`Promise`](../promise) and deals with rejected cases only. It behaves the same as calling [`Promise.prototype.then(undefined, onRejected)`](then) (in fact, calling `obj.catch(onRejected)` internally calls `obj.then(undefined, onRejected)`). This means that you have to provide an `onRejected` function even if you want to fall back to an `undefined` result value - for example `obj.catch(() => {})`.

## Syntax

    p.catch(onRejected);

    p.catch(function(reason) {
       // rejection
    });

### Parameters

`onRejected`  
A [`Function`](../function) called when the `Promise` is rejected. This function has one argument:

`reason`  
The rejection reason.

The Promise returned by `catch()` is rejected if `onRejected` throws an error or returns a Promise which is itself rejected; otherwise, it is resolved.

### Return value

Internally calls `Promise.prototype.then` on the object upon which it was called, passing the parameters `undefined` and the received `onRejected` handler. Returns the value of that call, which is a [`Promise`](../promise).

**Warning:** The examples below are throwing instances of [Error](../error). This is considered good practice in contrast to throwing Strings; otherwise, the part doing the catching would have to perform checks to see if the argument was a string or an error, and you might lose valuable information like stack traces.

**Demonstration of the internal call:**

    // overriding original Promise.prototype.then/catch just to add some logs
    (function(Promise){
        var originalThen = Promise.prototype.then;
        var originalCatch = Promise.prototype.catch;

        Promise.prototype.then = function(){
            console.log('> > > > > > called .then on %o with arguments: %o', this, arguments);
            return originalThen.apply(this, arguments);
        };
        Promise.prototype.catch = function(){
            console.error('> > > > > > called .catch on %o with arguments: %o', this, arguments);
            return originalCatch.apply(this, arguments);
        };

    })(this.Promise);

    // calling catch on an already resolved promise
    Promise.resolve().catch(function XXX(){});

    // logs:
    // > > > > > > called .catch on Promise{} with arguments: Arguments{1} [0: function XXX()]
    // > > > > > > called .then on Promise{} with arguments: Arguments{2} [0: undefined, 1: function XXX()]

## Description

The `catch` method is used for error handling in promise composition. Since it returns a [`Promise`](../promise), it [can be chained](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises#chaining_after_a_catch) in the same way as its sister method, [`then()`](then).

## Examples

### Using and chaining the catch method

    var p1 = new Promise(function(resolve, reject) {
      resolve('Success');
    });

    p1.then(function(value) {
      console.log(value); // "Success!"
      throw new Error('oh, no!');
    }).catch(function(e) {
      console.error(e.message); // "oh, no!"
    }).then(function(){
      console.log('after a catch the chain is restored');
    }, function () {
      console.log('Not fired due to the catch');
    });

    // The following behaves the same as above
    p1.then(function(value) {
      console.log(value); // "Success!"
      return Promise.reject('oh, no!');
    }).catch(function(e) {
      console.error(e); // "oh, no!"
    }).then(function(){
      console.log('after a catch the chain is restored');
    }, function () {
      console.log('Not fired due to the catch');
    });

### Gotchas when throwing errors

    // Throwing an error will call the catch method most of the time
    var p1 = new Promise(function(resolve, reject) {
      throw new Error('Uh-oh!');
    });

    p1.catch(function(e) {
      console.error(e); // "Uh-oh!"
    });

    // Errors thrown inside asynchronous functions will act like uncaught errors
    var p2 = new Promise(function(resolve, reject) {
      setTimeout(function() {
        throw new Error('Uncaught Exception!');
      }, 1000);
    });

    p2.catch(function(e) {
      console.error(e); // This is never called
    });

    // Errors thrown after resolve is called will be silenced
    var p3 = new Promise(function(resolve, reject) {
      resolve();
      throw new Error('Silenced Exception!');
    });

    p3.catch(function(e) {
       console.error(e); // This is never called
    });

### If it is resolved

    //Create a promise which would not call onReject
    var p1 = Promise.resolve("calling next");

    var p2 = p1.catch(function (reason) {
        //This is never called
        console.error("catch p1!");
        console.error(reason);
    });

    p2.then(function (value) {
        console.log("next promise's onFulfilled"); /* next promise's onFulfilled */
        console.log(value); /* calling next */
    }, function (reason) {
        console.log("next promise's onRejected");
        console.log(reason);
    });

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-promise.prototype.catch">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-promise.prototype.catch</span></a></td></tr></tbody></table>

`catch`

32

12

29

No

19

8

4.4.3

32

29

19

8

2.0

## See also

-   [`Promise`](../promise)
-   [`Promise.prototype.then()`](then)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch</a>

# Math.cbrt()

The `Math.cbrt()` function returns the cube root of a number, that is

$$\\mathtt{Math.cbrt(x)} = \\sqrt\[3\]{x} = \\text{the\\ unique}\\; y\\;\\text{such\\ that}\\; y^{3} = x$$

## Syntax

    Math.cbrt(x)

### Parameters

x  
A number.

### Return value

The cube root of the given number.

## Description

Because `cbrt()` is a static method of `Math`, you always use it as `Math.cbrt()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Polyfill

For all *x* ≥ 0, have $\\sqrt\[3\]{x} = x^{1/3}$ so this can be emulated by the following function:

    if (!Math.cbrt) {
      Math.cbrt = (function(pow) {
        return function cbrt(x){
          // ensure negative numbers remain negative:
          return x < 0 ? -pow(-x, 1/3) : pow(x, 1/3);
        };
      })(Math.pow); // localize Math.pow to increase efficiency
    }

## Examples

### Using Math.cbrt()

    Math.cbrt(NaN); // NaN
    Math.cbrt(-1); // -1
    Math.cbrt(-0); // -0
    Math.cbrt(-Infinity); // -Infinity
    Math.cbrt(0); // 0
    Math.cbrt(1); // 1
    Math.cbrt(Infinity); // Infinity
    Math.cbrt(null); // 0
    Math.cbrt(2);  // 1.2599210498948732

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.cbrt">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.cbrt</span></a></td></tr></tbody></table>

`cbrt`

38

12

25

No

25

8

38

38

25

25

8

3.0

## See also

-   [`Math.pow()`](pow)
-   [`Math.sqrt()`](sqrt)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cbrt" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cbrt</a>

# Math.ceil()

The `Math.ceil()` function always rounds a number up to the next largest integer.

**Note:** `Math.ceil(null`) returns integer 0 and does not give a [`NaN`](../nan) error.

## Syntax

    Math.ceil(x)

### Parameters

`x`  
A number.

### Return value

The smallest integer greater than or equal to the given number.

## Description

Because `ceil()` is a static method of `Math`, you always use it as `Math.ceil()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.ceil()

The following example shows example usage of `Math.ceil()`.

    Math.ceil(.95);    // 1
    Math.ceil(4);      // 4
    Math.ceil(7.004);  // 8
    Math.ceil(-0.95);  // -0
    Math.ceil(-4);     // -4
    Math.ceil(-7.004); // -7

### Decimal adjustment

    // Closure
    (function() {
      /**
       * Decimal adjustment of a number.
       *
       * @param {String}  type  The type of adjustment.
       * @param {Number}  value The number.
       * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
       * @returns {Number} The adjusted value.
       */
      function decimalAdjust(type, value, exp) {
        // If the exp is undefined or zero...
        if (typeof exp === 'undefined' || +exp === 0) {
          return Math[type](value);
        }
        value = +value;
        exp = +exp;
        // If the value is not a number or the exp is not an integer...
        if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
          return NaN;
        }
        // Shift
        value = value.toString().split('e');
        value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
        // Shift back
        value = value.toString().split('e');
        return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
      }

      // Decimal round
      if (!Math.round10) {
        Math.round10 = function(value, exp) {
          return decimalAdjust('round', value, exp);
        };
      }
      // Decimal floor
      if (!Math.floor10) {
        Math.floor10 = function(value, exp) {
          return decimalAdjust('floor', value, exp);
        };
      }
      // Decimal ceil
      if (!Math.ceil10) {
        Math.ceil10 = function(value, exp) {
          return decimalAdjust('ceil', value, exp);
        };
      }
    })();

    // Round
    Math.round10(55.55, -1);   // 55.6
    Math.round10(55.549, -1);  // 55.5
    Math.round10(55, 1);       // 60
    Math.round10(54.9, 1);     // 50
    Math.round10(-55.55, -1);  // -55.5
    Math.round10(-55.551, -1); // -55.6
    Math.round10(-55, 1);      // -50
    Math.round10(-55.1, 1);    // -60
    // Floor
    Math.floor10(55.59, -1);   // 55.5
    Math.floor10(59, 1);       // 50
    Math.floor10(-55.51, -1);  // -55.6
    Math.floor10(-51, 1);      // -60
    // Ceil
    Math.ceil10(55.51, -1);    // 55.6
    Math.ceil10(51, 1);        // 60
    Math.ceil10(-55.59, -1);   // -55.5
    Math.ceil10(-59, 1);       // -50

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.ceil">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.ceil</span></a></td></tr></tbody></table>

`ceil`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.abs()`](abs)
-   [`Math.floor()`](floor)
-   [`Math.round()`](round)
-   [`Math.sign()`](sign)
-   [`Math.trunc()`](trunc)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil</a>

# String.prototype.charAt()

The [`String`](../string) object's `charAt()` method returns a new string consisting of the single UTF-16 code unit located at the specified offset into the string.

## Syntax

    charAt(index)

### Parameters

`index`  
An integer between `0` and `str.length - 1`. If the `index` cannot be converted to the integer or no `index` is provided, the default is `0`, so the first character of `str` is returned.

### Return value

A string representing the character (exactly one UTF-16 code unit) at the specified `index`. If `index` is out of range, `charAt()` returns an empty string.

## Description

Characters in a string are indexed from left to right. The index of the first character is `0`, and the index of the last character—in a string called `stringName`—is `stringName.length - 1`. If the `index` you supply is out of this range, JavaScript returns an empty string.

If no `index` is provided to `charAt()`, the default is `0`.

## Examples

### Displaying characters at different locations in a string

The following example displays characters at different locations in the string "`Brave new world`":

    var anyString = 'Brave new world';
    console.log("The character at index 0   is '" + anyString.charAt()   + "'");
    // No index was provided, used 0 as default

    console.log("The character at index 0   is '" + anyString.charAt(0)   + "'");
    console.log("The character at index 1   is '" + anyString.charAt(1)   + "'");
    console.log("The character at index 2   is '" + anyString.charAt(2)   + "'");
    console.log("The character at index 3   is '" + anyString.charAt(3)   + "'");
    console.log("The character at index 4   is '" + anyString.charAt(4)   + "'");
    console.log("The character at index 999 is '" + anyString.charAt(999) + "'");

These lines display the following:

    The character at index 0   is 'B'

    The character at index 0   is 'B'
    The character at index 1   is 'r'
    The character at index 2   is 'a'
    The character at index 3   is 'v'
    The character at index 4   is 'e'
    The character at index 999 is ''

### Getting whole characters

The following provides a means of ensuring that going through a string loop always provides a whole character, even if the string contains characters that are not in the Basic Multi-lingual Plane.

    var str = 'A \uD87E\uDC04 Z'; // We could also use a non-BMP character directly
    for (var i = 0, chr; i < str.length; i++) {
      if ((chr = getWholeChar(str, i)) === false) {
        continue;
      }
      // Adapt this line at the top of each loop, passing in the whole string and
      // the current iteration and returning a variable to represent the
      // individual character

      console.log(chr);
    }

    function getWholeChar(str, i) {
      var code = str.charCodeAt(i);

      if (Number.isNaN(code)) {
        return ''; // Position not found
      }
      if (code < 0xD800 || code > 0xDFFF) {
        return str.charAt(i);
      }

      // High surrogate (could change last hex to 0xDB7F to treat high private
      // surrogates as single characters)
      if (0xD800 <= code && code <= 0xDBFF) {
        if (str.length <= (i + 1)) {
          throw 'High surrogate without following low surrogate';
        }
        var next = str.charCodeAt(i + 1);
          if (0xDC00 > next || next > 0xDFFF) {
            throw 'High surrogate without following low surrogate';
          }
          return str.charAt(i) + str.charAt(i + 1);
      }
      // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
      if (i === 0) {
        throw 'Low surrogate without preceding high surrogate';
      }
      var prev = str.charCodeAt(i - 1);

      // (could change last hex to 0xDB7F to treat high private
      // surrogates as single characters)
      if (0xD800 > prev || prev > 0xDBFF) {
        throw 'Low surrogate without preceding high surrogate';
      }
      // We can pass over low surrogates now as the second component
      // in a pair which we have already processed
      return false;
    }

In an ECMAScript 2016 environment which allows destructured assignment, the following is a more succinct and somewhat more flexible alternative in that it does increment for an incrementing variable automatically (if the character warrants it in being a surrogate pair).

    let str = 'A\uD87E\uDC04Z'  // We could also use a non-BMP character directly
    for (let i = 0, chr; i < str.length; i++) {
      [chr, i] = getWholeCharAndI(str, i)

      // Adapt this line at the top of each loop, passing in the whole string and
      // the current iteration and returning an array with the individual character
      // and 'i' value (only changed if a surrogate pair)

      console.log(chr)
    }

    function getWholeCharAndI(str, i) {
      let code = str.charCodeAt(i)

      if (Number.isNaN(code)) {
        return ''  // Position not found
      }
      if (code < 0xD800 || code > 0xDFFF) {
        return [str.charAt(i), i]  // Normal character, keeping 'i' the same
      }

      // High surrogate (could change last hex to 0xDB7F to treat high private
      // surrogates as single characters)
      if (0xD800 <= code && code <= 0xDBFF) {
        if (str.length <= (i + 1)) {
          throw 'High surrogate without following low surrogate'
        }
        let next = str.charCodeAt(i + 1)
          if (0xDC00 > next || next > 0xDFFF) {
            throw 'High surrogate without following low surrogate'
          }
          return [str.charAt(i) + str.charAt(i + 1), i + 1]
      }

      // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
      if (i === 0) {
        throw 'Low surrogate without preceding high surrogate'
      }

      let prev = str.charCodeAt(i - 1)

      // (could change last hex to 0xDB7F to treat high private surrogates
      // as single characters)
      if (0xD800 > prev || prev > 0xDBFF) {
        throw 'Low surrogate without preceding high surrogate'
      }

      // Return the next character instead (and increment)
      return [str.charAt(i + 1), i + 1]
    }

### Fixing charAt() to support non-Basic-Multilingual-Plane (BMP) characters

While the previous example may be more useful for programs that must support non-BMP characters (since it does not require the caller to know where any non-BMP character might appear), in the event that one _does_ wish, in choosing a character by index, to treat the surrogate pairs within a string as the single characters they represent, one can use the following:

    function fixedCharAt(str, idx) {
      let ret = ''
      str += ''
      let end = str.length

      let surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g
      while ((surrogatePairs.exec(str)) != null) {
        let lastIdx = surrogatePairs.lastIndex
        if (lastIdx - 2 < idx) {
          idx++
        } else {
          break
        }
      }

      if (idx >= end || idx < 0) {
        return ''
      }

      ret += str.charAt(idx)

      if (/[\uD800-\uDBFF]/.test(ret) && /[\uDC00-\uDFFF]/.test(str.charAt(idx + 1))) {
        // Go one further, since one of the "characters" is part of a surrogate pair
        ret += str.charAt(idx + 1)
      }
      return ret
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.charat">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'String.prototype.charAt' in that specification.</span></a></td></tr></tbody></table>

`charAt`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.indexOf()`](indexof)
-   [`String.prototype.lastIndexOf()`](lastindexof)
-   [`String.prototype.charCodeAt()`](charcodeat)
-   [`String.prototype.codePointAt()`](codepointat)
-   [`String.prototype.split()`](split)
-   [`String.fromCodePoint()`](fromcodepoint)
-   [JavaScript has a Unicode problem – Mathias Bynens](https://mathiasbynens.be/notes/javascript-unicode)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt</a>

# String.prototype.charCodeAt()

The `charCodeAt()` method returns an integer between `0` and `65535` representing the UTF-16 code unit at the given index.

The UTF-16 code unit matches the Unicode code point for code points which can be represented in a single UTF-16 code unit. If the Unicode code point cannot be represented in a single UTF-16 code unit (because its value is greater than `0xFFFF`) then the code unit returned will be _the first part of a surrogate pair_ for the code point. If you want the entire code point value, use [`codePointAt()`](codepointat).

## Syntax

    charCodeAt(index)

### Parameters

`index`  
An integer greater than or equal to `0` and less than the `length` of the string. If `index` is not a number, it defaults to `0`.

### Return value

A number representing the UTF-16 code unit value of the character at the given `index`. If `index` is out of range, `charCodeAt()` returns [`NaN`](../nan).

## Description

Unicode code points range from `0` to `1114111` (`0x10FFFF`). The first 128 Unicode code points are a direct match of the ASCII character encoding. (For information on Unicode, see the [JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#unicode).)

**Note:** `charCodeAt()` will always return a value that is less than `65536`. This is because the higher code points are represented by _a pair_ of (lower valued) "surrogate" pseudo-characters which are used to comprise the real character.

Because of this, in order to examine (or reproduce) the full character for individual character values of `65536` or greater, for such characters, it is necessary to retrieve not only `charCodeAt(i)`, but also `charCodeAt(i+1)` (as if manipulating a string with two letters), or to use `codePointAt(i)` instead. See examples 2 and 3 (below).

`charCodeAt()` returns [`NaN`](../nan) if the given index is less than `0`, or if it is equal to or greater than the `length` of the string.

Backward compatibility: In historic versions (like JavaScript 1.2) the `charCodeAt()` method returns a number indicating the ISO-Latin-1 codeset value of the character at the given index. The ISO-Latin-1 codeset ranges from `0` to `255`. The first `0` to `127` are a direct match of the ASCII character set.

## Examples

### Using charCodeAt()

The following example returns `65`, the Unicode value for A.

    'ABC'.charCodeAt(0)  // returns 65

### Fixing charCodeAt() to handle non-Basic-Multilingual-Plane characters if their presence earlier in the string is unknown

This version might be used in for loops and the like when it is unknown whether non-BMP characters exist before the specified index position.

    function fixedCharCodeAt(str, idx) {
      // ex. fixedCharCodeAt('\uD800\uDC00', 0); // 65536
      // ex. fixedCharCodeAt('\uD800\uDC00', 1); // false
      idx = idx || 0;
      var code = str.charCodeAt(idx);
      var hi, low;

      // High surrogate (could change last hex to 0xDB7F
      // to treat high private surrogates
      // as single characters)
      if (0xD800 <= code && code <= 0xDBFF) {
        hi = code;
        low = str.charCodeAt(idx + 1);
        if (isNaN(low)) {
          throw 'High surrogate not followed by ' +
            'low surrogate in fixedCharCodeAt()';
        }
        return (
          (hi - 0xD800) * 0x400) +
          (low - 0xDC00) + 0x10000;
      }
      if (0xDC00 <= code && code <= 0xDFFF) { // Low surrogate
        // We return false to allow loops to skip
        // this iteration since should have already handled
        // high surrogate above in the previous iteration
        return false;
        // hi = str.charCodeAt(idx - 1);
        // low = code;
        // return ((hi - 0xD800) * 0x400) +
        //   (low - 0xDC00) + 0x10000;
      }
      return code;
    }

### Fixing charCodeAt() to handle non-Basic-Multilingual-Plane characters if their presence earlier in the string is known

    function knownCharCodeAt(str, idx) {
      str += '';
      var code,
          end = str.length;

      var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
      while ((surrogatePairs.exec(str)) != null) {
        var li = surrogatePairs.lastIndex;
        if (li - 2 < idx) {
          idx++;
        }
        else {
          break;
        }
      }

      if (idx >= end || idx < 0) {
        return NaN;
      }

      code = str.charCodeAt(idx);

      var hi, low;
      if (0xD800 <= code && code <= 0xDBFF) {
        hi = code;
        low = str.charCodeAt(idx + 1);
        // Go one further, since one of the "characters"
        // is part of a surrogate pair
        return ((hi - 0xD800) * 0x400) +
          (low - 0xDC00) + 0x10000;
      }
      return code;
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.charcodeat">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.charcodeat</span></a></td></tr></tbody></table>

`charCodeAt`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`String.fromCharCode()`](fromcharcode)
-   [`String.prototype.charAt()`](charat)
-   [`String.fromCodePoint()`](fromcodepoint)
-   [`String.prototype.codePointAt()`](codepointat)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt</a>

# class expression

The **class expression** is one way to define a class in ECMAScript 2015. Similar to [function expressions](function), class expressions can be named or unnamed. If named, the name of the class is local to the class body only.

JavaScript classes use prototype-based inheritance.

## Syntax

    const MyClass = class [className] [extends otherClassName] {
        // class body
    };

## Description

A class expression has a similar syntax to a [class declaration (statement)](../statements/class). As with `class` statements, the body of a `class` expression is executed in [strict mode](../strict_mode).

There are several differences between class expressions and [class statements](../statements/class), however:

-   Class expressions may omit the class name ("binding identifier"), which is not possible with [class statements](../statements/class).
-   Class expressions allow you to redefine (re-declare) classes **without throwing** a [`SyntaxError`](../global_objects/syntaxerror). This is not the case with [class statements](../statements/class).

The `constructor` method is optional. Classes generated with class expressions will always respond to [`typeof`](typeof) with the value "`function`".

    'use strict';
    let Foo = class {};  // constructor property is optional
    Foo = class {};      // Re-declaration is allowed

    typeof Foo;             // returns "function"
    typeof class {};        // returns "function"

    Foo instanceof Object;   // true
    Foo instanceof Function; // true
    class Foo {}            // Throws SyntaxError (class declarations do not allow re-declaration)

## Examples

### A simple class expression

This is just a simple anonymous class expression which you can refer to using the variable `Foo`.

    const Foo = class {
      constructor() {}
      bar() {
        return 'Hello World!';
      }
    };

    const instance = new Foo();
    instance.bar();  // "Hello World!"
    Foo.name;        // "Foo"

### Named class expressions

If you want to refer to the current class inside the class body, you can create a _named class expression_. The name is only visible within the scope of the class expression itself.

    const Foo = class NamedFoo {
      constructor() {}
      whoIsThere() {
        return NamedFoo.name;
      }
    }
    const bar = new Foo();
    bar.whoIsThere();  // "NamedFoo"
    NamedFoo.name;     // ReferenceError: NamedFoo is not defined
    Foo.name;          // "NamedFoo"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-class-definitions">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-class-definitions</span></a></td></tr></tbody></table>

`class`

42

13

45

No

29

7

42

42

45

29

7

4.0

## See also

-   [function expression](function)
-   [class declaration](../statements/class)
-   [Classes](../classes)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/class" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/class</a>

# Classes

Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JS are built on prototypes but also have some syntax and semantics that are not shared with ES5 class-like semantics.

## Defining classes

Classes are in fact "special functions", and just as you can define [function expressions](operators/function) and [function declarations](statements/function), the class syntax has two components: [class expressions](operators/class) and [class declarations](statements/class).

### Class declarations

One way to define a class is using a **class declaration**. To declare a class, you use the `class` keyword with the name of the class ("Rectangle" here).

    class Rectangle {
      constructor(height, width) {
        this.height = height;
        this.width = width;
      }
    }

#### Hoisting

An important difference between **function declarations** and **class declarations** is that function declarations are [hoisted](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a [`ReferenceError`](global_objects/referenceerror):

    const p = new Rectangle(); // ReferenceError

    class Rectangle {}

### Class expressions

A **class expression** is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body. (it can be retrieved through the class's (not an instance's) [`name`](global_objects/function/name) property, though).

    // unnamed
    let Rectangle = class {
      constructor(height, width) {
        this.height = height;
        this.width = width;
      }
    };
    console.log(Rectangle.name);
    // output: "Rectangle"

    // named
    let Rectangle = class Rectangle2 {
      constructor(height, width) {
        this.height = height;
        this.width = width;
      }
    };
    console.log(Rectangle.name);
    // output: "Rectangle2"

**Note:** Class **expressions** are subject to the same hoisting restrictions as described in the [Class declarations](#class_declarations) section.

## Class body and method definitions

The body of a class is the part that is in curly brackets `{}`. This is where you define class members, such as methods or constructor.

### Strict mode

The body of a class is executed in [strict mode](strict_mode), i.e., code written here is subject to stricter syntax for increased performance, some otherwise silent errors will be thrown, and certain keywords are reserved for future versions of ECMAScript.

### Constructor

The [constructor](classes/constructor) method is a special method for creating and initializing an object created with a `class`. There can only be one special method with the name "constructor" in a class. A [`SyntaxError`](global_objects/syntaxerror) will be thrown if the class contains more than one occurrence of a `constructor` method.

A constructor can use the `super` keyword to call the constructor of the super class.

### Prototype methods

See also [method definitions](functions/method_definitions).

    class Rectangle {
      constructor(height, width) {
        this.height = height;
        this.width = width;
      }
      // Getter
      get area() {
        return this.calcArea();
      }
      // Method
      calcArea() {
        return this.height * this.width;
      }
    }

    const square = new Rectangle(10, 10);

    console.log(square.area); // 100

### Generator methods

See also [Iterators and generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators).

    class Polygon {
      constructor(...sides) {
        this.sides = sides;
      }
      // Method
      *getSides() {
        for(const side of this.sides){
          yield side;
        }
      }
    }

    const pentagon = new Polygon(1,2,3,4,5);

    console.log([...pentagon.getSides()]); // [1,2,3,4,5]

### Static methods and properties

The [static](classes/static) keyword defines a static method or property for a class. Static members (properties and methods) are called without [instantiating](<https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects#the_object_(class_instance)>) their class and **cannot** be called through a class instance. Static methods are often used to create utility functions for an application, whereas static properties are useful for caches, fixed-configuration, or any other data you don't need to be replicated across instances.

    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }

      static displayName = "Point";
      static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.hypot(dx, dy);
      }
    }

    const p1 = new Point(5, 5);
    const p2 = new Point(10, 10);
    p1.displayName; // undefined
    p1.distance;    // undefined
    p2.displayName; // undefined
    p2.distance;    // undefined

    console.log(Point.displayName);      // "Point"
    console.log(Point.distance(p1, p2)); // 7.0710678118654755

### Binding `this` with prototype and static methods

When a static or prototype method is called without a value for [`this`](operators/this), such as by assigning the method to a variable and then calling it, the `this` value will be `undefined` inside the method. This behavior will be the same even if the [`"use strict"`](strict_mode) directive isn't present, because code within the `class` body's syntactic boundary is always executed in strict mode.

    class Animal {
      speak() {
        return this;
      }
      static eat() {
        return this;
      }
    }

    let obj = new Animal();
    obj.speak(); // the Animal object
    let speak = obj.speak;
    speak(); // undefined

    Animal.eat() // class Animal
    let eat = Animal.eat;
    eat(); // undefined

If we rewrite the above using traditional function-based syntax in non–strict mode, then `this` method calls are automatically bound to the initial `this` value, which by default is the [global object](https://developer.mozilla.org/en-US/docs/Glossary/Global_object). In strict mode, autobinding will not happen; the value of `this` remains as passed.

    function Animal() { }

    Animal.prototype.speak = function() {
      return this;
    }

    Animal.eat = function() {
      return this;
    }

    let obj = new Animal();
    let speak = obj.speak;
    speak(); // global object (in non–strict mode)

    let eat = Animal.eat;
    eat(); // global object (in non-strict mode)

### Instance properties

Instance properties must be defined inside of class methods:

    class Rectangle {
      constructor(height, width) {
        this.height = height;
        this.width = width;
      }
    }

Static (class-side) data properties and prototype data properties must be defined outside of the ClassBody declaration:

    Rectangle.staticWidth = 20;
    Rectangle.prototype.prototypeWidth = 25;

### Field declarations

**Warning:** Public and private field declarations are an [experimental feature (stage 3)](https://github.com/tc39/proposal-class-fields) proposed at [TC39](https://tc39.es), the JavaScript standards committee. Support in browsers is limited, but the feature can be used through a build step with systems like [Babel](https://babeljs.io/).

#### Public field declarations

With the JavaScript field declaration syntax, the above example can be written as:

    class Rectangle {
      height = 0;
      width;
      constructor(height, width) {
        this.height = height;
        this.width = width;
      }
    }

By declaring fields up-front, class definitions become more self-documenting, and the fields are always present.

As seen above, the fields can be declared with or without a default value.

See [public class fields](classes/public_class_fields) for more information.

#### Private field declarations

Using private fields, the definition can be refined as below.

    class Rectangle {
      #height = 0;
      #width;
      constructor(height, width) {
        this.#height = height;
        this.#width = width;
      }
    }

It's an error to reference private fields from outside of the class; they can only be read or written within the class body. By defining things that are not visible outside of the class, you ensure that your classes' users can't depend on internals, which may change from version to version.

**Note:** Private fields can only be declared up-front in a field declaration.

Private fields cannot be created later through assigning to them, the way that normal properties can.

For more information, see [private class fields](classes/private_class_fields).

## Sub classing with `extends`

The [`extends`](classes/extends) keyword is used in _class declarations_ or _class expressions_ to create a class as a child of another class.

    class Animal {
      constructor(name) {
        this.name = name;
      }

      speak() {
        console.log(`${this.name} makes a noise.`);
      }
    }

    class Dog extends Animal {
      constructor(name) {
        super(name); // call the super class constructor and pass in the name parameter
      }

      speak() {
        console.log(`${this.name} barks.`);
      }
    }

    let d = new Dog('Mitzie');
    d.speak(); // Mitzie barks.

If there is a constructor present in the subclass, it needs to first call super() before using "this".

One may also extend traditional function-based "classes":

    function Animal (name) {
      this.name = name;
    }

    Animal.prototype.speak = function () {
      console.log(`${this.name} makes a noise.`);
    }

    class Dog extends Animal {
      speak() {
        console.log(`${this.name} barks.`);
      }
    }

    let d = new Dog('Mitzie');
    d.speak(); // Mitzie barks.

    // For similar methods, the child's method takes precedence over parent's method

Note that classes cannot extend regular (non-constructible) objects. If you want to inherit from a regular object, you can instead use [`Object.setPrototypeOf()`](global_objects/object/setprototypeof):

    const Animal = {
      speak() {
        console.log(`${this.name} makes a noise.`);
      }
    };

    class Dog {
      constructor(name) {
        this.name = name;
      }
    }

    // If you do not do this you will get a TypeError when you invoke speak
    Object.setPrototypeOf(Dog.prototype, Animal);

    let d = new Dog('Mitzie');
    d.speak(); // Mitzie makes a noise.

## Species

You might want to return [`Array`](global_objects/array) objects in your derived array class `MyArray`. The species pattern lets you override default constructors.

For example, when using methods such as [`map()`](global_objects/array/map) that returns the default constructor, you want these methods to return a parent `Array` object, instead of the `MyArray` object. The [`Symbol.species`](global_objects/symbol/species) symbol lets you do this:

    class MyArray extends Array {
      // Overwrite species to the parent Array constructor
      static get [Symbol.species]() { return Array; }
    }

    let a = new MyArray(1,2,3);
    let mapped = a.map(x => x * x);

    console.log(mapped instanceof MyArray); // false
    console.log(mapped instanceof Array);   // true

## Super class calls with `super`

The [`super`](operators/super) keyword is used to call corresponding methods of super class. This is one advantage over prototype-based inheritance.

    class Cat {
      constructor(name) {
        this.name = name;
      }

      speak() {
        console.log(`${this.name} makes a noise.`);
      }
    }

    class Lion extends Cat {
      speak() {
        super.speak();
        console.log(`${this.name} roars.`);
      }
    }

    let l = new Lion('Fuzzy');
    l.speak();
    // Fuzzy makes a noise.
    // Fuzzy roars.

## Mix-ins

Abstract subclasses or _mix-ins_ are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.

A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:

    let calculatorMixin = Base => class extends Base {
      calc() { }
    };

    let randomizerMixin = Base => class extends Base {
      randomize() { }
    };

A class that uses these mix-ins can then be written like this:

    class Foo { }
    class Bar extends calculatorMixin(randomizerMixin(Foo)) { }

## Re-running a class definition

A class can't be redefined. Attempting to do so produces a `SyntaxError`.

If you're experimenting with code in a web browser, such as the Firefox Web Console (**Tools** &gt; **Web Developer** &gt; **Web Console**) and you 'Run' a definition of a class with the same name twice, you'll get a `SyntaxError: redeclaration of let ClassName;`. (See further discussion of this issue in [bug 1428672](https://bugzilla.mozilla.org/show_bug.cgi?id=1428672).) Doing something similar in Chrome Developer Tools gives you a message like `Uncaught SyntaxError: Identifier 'ClassName' has already been declared at <anonymous>:1:1`.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-class-definitions">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Class definitions' in that specification.</span></a></td></tr></tbody></table>

`Classes`

49

42-49

Strict mode is required.

42-49

13

45

No

36

29-36

Strict mode is required.

29-36

9

49

42-49

Strict mode is required.

49

42-49

Strict mode is required.

42-49

45

36

29-36

Strict mode is required.

29-36

9

5.0

4.0-5.0

Strict mode is required.

`constructor`

49

42-49

Strict mode is required.

42-49

13

45

No

36

29-36

Strict mode is required.

29-36

9

49

42-49

Strict mode is required.

49

42-49

Strict mode is required.

42-49

45

36

29-36

Strict mode is required.

29-36

9

5.0

4.0-5.0

Strict mode is required.

`extends`

49

42-49

Strict mode is required.

42-49

13

45

No

36

29-36

Strict mode is required.

29-36

9

49

42-49

Strict mode is required.

49

42-49

Strict mode is required.

42-49

45

36

29-36

Strict mode is required.

29-36

9

5.0

4.0-5.0

Strict mode is required.

`private_class_fields`

74

79

No

Available only in nightly builds. See [bug 1562054](https://bugzil.la/1562054).

No

62

14.1

74

74

No

Available only in nightly builds. See [bug 1562054](https://bugzil.la/1562054).

53

14.5

No

`public_class_fields`

72

79

69

No

60

14.1

14-14.1

Doesn't support public static fields. See WebKit bug [194095](https://webkit.org/b/194095).

72

72

79

51

14.5

14-14.5

Doesn't support public static fields. See WebKit bug [194095](https://webkit.org/b/194095).

No

`static`

49

42-49

Strict mode is required.

42-49

13

45

No

36

29-36

Strict mode is required.

29-36

14.1

49

42-49

Strict mode is required.

49

42-49

Strict mode is required.

42-49

45

36

29-36

Strict mode is required.

29-36

14.5

5.0

4.0-5.0

Strict mode is required.

`static_class_fields`

72

79

75

No

60

14.1

72

72

79

51

14.5

No

## See also

-   Functions
-   [class declaration](statements/class)
-   [class expression](operators/class)
-   [Public class fields](classes/public_class_fields)
-   [Private class fields](classes/private_class_fields)
-   [`super`](operators/super)
-   [Blog post: "ES6 In Depth: Classes"](https://hacks.mozilla.org/2015/07/es6-in-depth-classes/)
-   [Fields and public/private class properties proposal (stage 3)](https://github.com/tc39/proposal-class-fields)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes</a>

# Set.prototype.clear()

The `clear()` method removes all elements from a `Set` object.

## Syntax

    clear()

### Return value

[`undefined`](../undefined).

## Examples

### Using the clear() method

    var mySet = new Set();
    mySet.add(1);
    mySet.add('foo');

    mySet.size;       // 2
    mySet.has('foo'); // true

    mySet.clear();

    mySet.size;       // 0
    mySet.has('bar')  // false

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-set.prototype.clear">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-set.prototype.clear</span></a></td></tr></tbody></table>

`clear`

38

12

19

11

25

8

38

38

19

25

8

3.0

## See also

-   [`Set`](../set)
-   [`Set.prototype.delete()`](delete)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear</a>

# Math.clz32()

The `Math.clz32()` function returns the number of leading zero bits in the 32-bit binary representation of a number.

## Syntax

    Math.clz32(x)

### Parameters

`x`  
A number.

### Return value

The number of leading zero bits in the 32-bit binary representation of the given number.

## Description

"`clz32`" is short for **CountLeadingZeroes32**.

If `x` is not a number, then it will be converted to a number first, then converted to a 32-bit unsigned integer.

If the converted 32-bit unsigned integer is `0`, then return `32`, because all bits are `0`.

This function is particularly useful for systems that compile to JS, like [Emscripten](https://developer.mozilla.org/en-US/docs/Emscripten).

### Count Leading Ones and beyond

At present, there is no `Math.clon` for "Count Leading Ones" (named "clon", not "clo", because "clo" and "clz" are too similar especially for non-English-speaking people). However, a `clon` function can easily be created by inversing the bits of a number and passing the result to `Math.clz32`. Doing this will work because the inverse of 1 is 0 and vice-versa. Thus, inversing the bits will inverse the measured quantity of 0's (from `Math.clz32`), thereby making `Math.clz32` count the number of ones instead of counting the number of zeros.

Consider the following 32-bit word:

    var a = 32776;   // 00000000000000001000000000001000 (16 leading zeros)
    Math.clz32(a);   // 16

    var b = ~32776;  // 11111111111111110111111111110111 (32776 inversed, 0 leading zeros)
    Math.clz32(b);   // 0 (this is equal to how many leading one's there are in a)

Using this logic, a `clon` function can be created as follows:

    var clz = Math.clz32;
    function clon(integer){
        return clz(~integer);
    }

Further, this technique could be extended to create jumpless "Count Trailing Zeros" and "Count Trailing Ones" functions as seen below. The `ctrz` function below fills in all the high bits with the lowest filled bit, then negates the bits to erase all higher set bits so that clz can then be used.

    var clz = Math.clz32;
    function ctrz(integer){ // count trailing zeros
        // 1. fill in all the higher bits after the first one
        integer |= integer << 16;
        integer |= integer << 8;
        integer |= integer << 4;
        integer |= integer << 2;
        integer |= integer << 1;
        // 2. Now, inversing the bits reveals the lowest bits
        return 32 - clz(~integer) |0; // `|0` ensures integer coercion
    }
    function ctron(integer){ // count trailing ones
        // No shift-filling-in-with-ones operator is available in
        // JavaScript, so the below code is the fastest
        return ctrz(~integer);
        /* Alternate implementation for demonstrational purposes:
           // 1. erase all the higher bits after the first zero
           integer &= (integer << 16) | 0xffff;
           integer &= (integer << 8 ) | 0x00ff;
           integer &= (integer << 4 ) | 0x000f;
           integer &= (integer << 2 ) | 0x0003;
           integer &= (integer << 1 ) | 0x0001;
           // 2. Now, inversing the bits reveals the lowest zeros
           return 32 - clon(~integer) |0;
        */
    }

Make these helper functions into ASM.JS module; then, you have a true performance masterpiece. Situations like these are exactly what ASM.JS was designed for.

    var countTrailsMethods = (function(stdlib, foreign, heap) {
        "use asm";
        var clz = stdlib.Math.clz32;
        function ctrz(integer) { // count trailing zeros
            integer = integer | 0; // coerce to an integer
            // 1. fill in all the higher bits after the first one
            // ASMjs for some reason does not allow ^=,&=, or |=
            integer = integer | (integer << 16);
            integer = integer | (integer << 8);
            integer = integer | (integer << 4);
            integer = integer | (integer << 2);
            integer = integer | (integer << 1);
            // 2. Now, inversing the bits reveals the lowest bits
            return 32 - clz(~integer) |0;
        }
        function ctron(integer) { // count trailing ones
            integer = integer | 0; // coerce to an integer
            return ctrz(~integer) |0;
        }
        // unfourtunately, ASM.JS demands slow crummy objects:
        return {a: ctrz, b: ctron};
    })(window, null, null);
    var ctrz = countTrailsMethods.a;
    var ctron = countTrailsMethods.b;

## Examples

### Using Math.clz32()

    Math.clz32(1);           // 31
    Math.clz32(1000);        // 22
    Math.clz32();            // 32

    var stuff = [NaN, Infinity, -Infinity, 0, -0, false, null, undefined, 'foo', {}, []];
    stuff.every(n => Math.clz32(n) == 32);  // true

    Math.clz32(true);        // 31
    Math.clz32(3.5);         // 30

## Polyfill

The following polyfill is the most efficient.

    if (!Math.clz32) Math.clz32 = (function(log, LN2){
      return function(x) {
        // Let n be ToUint32(x).
        // Let p be the number of leading zero bits in
        // the 32-bit binary representation of n.
        // Return p.
        var asUint = x >>> 0;
        if (asUint === 0) {
          return 32;
        }
        return 31 - (log(asUint) / LN2 | 0) |0; // the "| 0" acts like math.floor
      };
    })(Math.log, Math.LN2);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.clz32">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.clz32</span></a></td></tr></tbody></table>

`clz32`

38

12

31

No

25

7

38

38

31

25

7

3.0

## See also

-   [`Math`](../math)
-   [`Math.imul`](imul)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/clz32" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/clz32</a>

# String.prototype.codePointAt()

The `codePointAt()` method returns a non-negative integer that is the UTF-16 code point value.

## Syntax

    codePointAt(pos)

### Parameters

`pos`  
Position of an element in `str` to return the code point value from.

### Return value

A number representing the code point value of the character at the given `pos`. If there is no element at `pos`, returns [`undefined`](../undefined).

## Description

If there is no element at the specified position, [`undefined`](../undefined) is returned. If no UTF-16 surrogate pair begins at `pos`, the code unit at `pos` is returned.

## Examples

### Using codePointAt()

    'ABC'.codePointAt(1)           // 66
    '\uD800\uDC00'.codePointAt(0)  // 65536

    'XYZ'.codePointAt(42)          // undefined

### Looping with codePointAt()

    for (let codePoint of '\ud83d\udc0e\ud83d\udc71\u2764') {
       console.log(codePoint.codePointAt(0).toString(16))
    }
    // '1f40e', '1f471', '2764'

## Polyfill

The following extends Strings to include the `codePointAt()` function as specified in ECMAScript 2015 for browsers without native support.

    /*! https://mths.be/codepointat v0.2.0 by @mathias */
    if (!String.prototype.codePointAt) {
      (function() {
        'use strict'; // needed to support `apply`/`call` with `undefined`/`null`
        var defineProperty = (function() {
          // IE 8 only supports `Object.defineProperty` on DOM elements
          try {
            var object = {};
            var $defineProperty = Object.defineProperty;
            var result = $defineProperty(object, object, object) && $defineProperty;
          } catch(error) {}
          return result;
        }());
        var codePointAt = function(position) {
          if (this == null) {
            throw TypeError();
          }
          var string = String(this);
          var size = string.length;
          // `ToInteger`
          var index = position ? Number(position) : 0;
          if (index != index) { // better `isNaN`
            index = 0;
          }
          // Account for out-of-bounds indices:
          if (index < 0 || index >= size) {
            return undefined;
          }
          // Get the first code unit
          var first = string.charCodeAt(index);
          var second;
          if ( // check if it's the start of a surrogate pair
            first >= 0xD800 && first <= 0xDBFF && // high surrogate
            size > index + 1 // there is a next code unit
          ) {
            second = string.charCodeAt(index + 1);
            if (second >= 0xDC00 && second <= 0xDFFF) { // low surrogate
              // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
              return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
            }
          }
          return first;
        };
        if (defineProperty) {
          defineProperty(String.prototype, 'codePointAt', {
            'value': codePointAt,
            'configurable': true,
            'writable': true
          });
        } else {
          String.prototype.codePointAt = codePointAt;
        }
      }());
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.codepointat">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.codepointat</span></a></td></tr></tbody></table>

`codePointAt`

41

12

29

No

28

10

41

41

29

28

10

4.0

## See also

-   [`String.fromCodePoint()`](fromcodepoint)
-   [`String.fromCharCode()`](fromcharcode)
-   [`String.prototype.charCodeAt()`](charcodeat)
-   [`String.prototype.charAt()`](charat)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt</a>

# Intl.Locale.prototype.collation

The `Intl.Locale.prototype.collation` property is an accessor property that returns the [collation type](https://www.unicode.org/reports/tr35/tr35-collation.html#CLDR_Collation) for the `Locale`, which is used to order strings according to the locale's rules.

## Description

Collation is the process of ordering strings of characters. It is used whenever strings must be sorted and placed into a certain order, from search query results to ordering records in a database. While the idea of placing strings in order might seem trivial, the idea of order can vary from region to region and language to language. The `collation` property helps to make it easier for JavaScript programmers to access the collation type used by a particular locale.

Below is a table with the available collation types, taken from the [Unicode collation specification](https://github.com/unicode-org/cldr/blob/2dd06669d833823e26872f249aa304bc9d9d2a90/common/bcp47/collation.xml).

### Valid collation types

<table><colgroup><col style="width: 50%" /><col style="width: 50%" /></colgroup><thead><tr class="header"><th>Collation Type</th><th>Description</th></tr></thead><tbody><tr class="odd"><td>big5han</td><td>Pinyin ordering for Latin, big5 charset ordering for CJK characters (used in Chinese)</td></tr><tr class="even"><td>compat</td><td>A previous version of the ordering, for compatibility</td></tr><tr class="odd"><td>dict</td><td>Dictionary style ordering (such as in Sinhala)</td></tr><tr class="even"><td><div class="notecard warning"><p><strong>Warning:</strong> The <code>direct</code> collation type has been deprected. Do not use.</p></div><p>direct</p></td><td>Binary code point order (used in Hindi)</td></tr><tr class="odd"><td>ducet</td><td>The default Unicode collation element table order</td></tr><tr class="even"><td>emoji</td><td>Recommended ordering for emoji characters</td></tr><tr class="odd"><td>eor</td><td>European ordering rules</td></tr><tr class="even"><td>gb2312</td><td>Pinyin ordering for Latin, gb2312han charset ordering for CJK characters (used in Chinese)</td></tr><tr class="odd"><td>phonebk</td><td>Phonebook style ordering (such as in German)</td></tr><tr class="even"><td>phonetic</td><td>Phonetic ordering (sorting based on pronunciation)</td></tr><tr class="odd"><td>pinyin</td><td>Pinyin ordering for Latin and for CJK characters (used in Chinese)</td></tr><tr class="even"><td>reformed</td><td>Reformed ordering (such as in Swedish)</td></tr><tr class="odd"><td>search</td><td>Special collation type for string search</td></tr><tr class="even"><td>searchjl</td><td>Special collation type for Korean initial consonant search</td></tr><tr class="odd"><td>standard</td><td>Default ordering for each language</td></tr><tr class="even"><td>stroke</td><td>Pinyin ordering for Latin, stroke order for CJK characters (used in Chinese)</td></tr><tr class="odd"><td>trad</td><td>Traditional style ordering (such as in Spanish)</td></tr><tr class="even"><td>unihan</td><td>Pinyin ordering for Latin, Unihan radical-stroke ordering for CJK characters (used in Chinese)</td></tr><tr class="odd"><td>zhuyin</td><td><p>Pinyin ordering for Latin, zhuyin order for Bopomofo and CJK characters (used in Chinese)</p></td></tr></tbody></table>

## Examples

Like other locale subtags, the collation type can be added to the [`Intl.Locale`](../locale) object via the locale string, or a configuration object argument to the constructor.

### Adding a collation type via the locale string

In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), collation types are locale key "extension subtags". These subtags add additional data about the locale, and are added to locale identifiers by using the `-u` extension. Thus, the collation type can be added to the initial locale identifier string that is passed into the [`Locale`](locale) constructor. To add the collation type, first add the `-u` extension to the string. Next, add the `-co` extension to indicate that you are adding a collation type. Finally, add the collation to the string.

    let stringColl = new Intl.Locale("en-Latn-US-u-co-emoji");
    console.log(stringColl.collation); // Prints "emoji"

### Adding a collation type via the configuration object argument

The [`Intl.Locale`](locale) constructor has an optional configuration object argument, which can contain any of several extension types, including collation types. Set the `collation` property of the configuration object to your desired collation type, and then pass it into the constructor.

    let configColl = new Intl.Locale("en-Latn-US", {collation: "emoji"});
    console.log(configColl.collation); // Prints "emoji"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.Locale.prototype.collation">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.Locale.prototype.collation</span></a></td></tr></tbody></table>

`collation`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl.Locale`](../locale)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/collation" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/collation</a>

# Intl.Collator() constructor

The `Intl.Collator()` constructor creates [`Intl.Collator`](../collator) objects that enable language-sensitive string comparison.

## Syntax

    new Intl.Collator()
    new Intl.Collator(locales)
    new Intl.Collator(locales, options)

### Parameters

`locales` <span class="badge inline optional">Optional</span>  
Optional. A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the `locales` argument, see the [Intl page](../../intl#locale_identification_and_negotiation).

The following Unicode extension keys are allowed:

**Note:** These keys can usually also be set with `options` (as listed below). When both are set, the `options` property takes precedence.

`co`  
Variant collations for certain locales. Possible values include: "`big5han`", "`dict`", "`direct`", "`ducet`", "`gb2312`", "`phonebk`", "`phonetic`", "`pinyin`", "`reformed`", "`searchjl`", "`stroke`", "`trad`", "`unihan`". This option can be also be set through the `options` property "`collation`".

`kn`  
Whether numeric collation should be used, such that "1" &lt; "2" &lt; "10". Possible values are "`true`" and "`false`". This option can be also be set through the `options` property "`numeric`".

`kf`  
Whether upper case or lower case should sort first. Possible values are "`upper`", "`lower`", or "`false`" (use the locale's default). This option can be also be set through the `options` property "`caseFirst`".

`options` <span class="badge inline optional">Optional</span>  
An object with some or all of the following properties:

`localeMatcher`  
The locale matching algorithm to use. Possible values are "`lookup`" and "`best fit`"; the default is "`best fit`". For information about this option, see the [Intl](../../intl#locale_negotiation) page.

`usage`  
Whether the comparison is for sorting or for searching for matching strings. Possible values are "`sort`" and "`search`"; the default is "`sort`".

`sensitivity`  
Which differences in the strings should lead to non-zero result values. Possible values are:

-   "`base`": Only strings that differ in base letters compare as unequal. Examples: a ≠ b, a = á, a = A.
-   "`accent`": Only strings that differ in base letters or accents and other diacritic marks compare as unequal. Examples: a ≠ b, a ≠ á, a = A.
-   "`case`": Only strings that differ in base letters or case compare as unequal. Examples: a ≠ b, a = á, a ≠ A.
-   "`variant`": Strings that differ in base letters, accents and other diacritic marks, or case compare as unequal. Other differences may also be taken into consideration. Examples: a ≠ b, a ≠ á, a ≠ A.

The default is "`variant`" for usage "`sort`"; it's locale dependent for usage "`search`".

`ignorePunctuation`  
Whether punctuation should be ignored. Possible values are `true` and `false`; the default is `false`.

`numeric`  
Whether numeric collation should be used, such that "1" &lt; "2" &lt; "10". Possible values are `true` and `false`; the default is `false`.

**Note:** This option can also be set through the `kn` Unicode extension key; if both are provided, this `options` property takes precedence.

`caseFirst`  
Whether upper case or lower case should sort first. Possible values are "`upper`", "`lower`", or "`false`" (use the locale's default). This option can be set through an `options` property or through a Unicode extension key; if both are provided, the `options` property takes precedence.

**Note:** This option can also be set through the `kf` Unicode extension key; if both are provided, this `options` property takes precedence.

`collation`  
Variant collations for certain locales. Possible values include: "`big5han`", "`dict`", "`direct`", "`ducet`", "`gb2312`", "`phonebk`" (only supported in German), "`phonetic`", "`pinyin`", "`reformed`", "`searchjl`", "`stroke`", "`trad`", "`unihan`".

**Note:** This option can also be set through the `co` Unicode extension key; if both are provided, this `options` property takes precedence.

## Examples

### Using Collator

The following example demonstrates the different potential results for a string occurring before, after, or at the same level as another:

    console.log(new Intl.Collator().compare('a', 'c')); // → a negative value
    console.log(new Intl.Collator().compare('c', 'a')); // → a positive value
    console.log(new Intl.Collator().compare('a', 'a')); // → 0

Note that the results shown in the code above can vary between browsers and browser versions. This is because the values are implementation-specific. That is, the specification requires only that the before and after values are negative and positive.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-the-intl-collator-constructor">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-the-intl-collator-constructor</span></a></td></tr></tbody></table>

`Collator`

24

12

29

11

15

10

4.4

25

56

14

10

1.5

`caseFirst`

24

18

55

No

15

11

4.4

25

56

14

11

1.5

`collation`

87

87

85

No

73

No

87

87

85

No

No

No

## See also

-   [`Intl.Collator`](../collator)
-   [`Intl`](../../intl)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator</a>

# Error.prototype.columnNumber

**Non-standard**

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The `columnNumber` property contains the column number in the line of the file that raised this error.

## Examples

### Using columnNumber

    var e = new Error('Could not parse input');
    throw e;
    console.log(e.columnNumber) // 0

## Specifications

Not part of any standard.

`columnNumber`

No

No

1

No

No

No

No

No

4

No

No

No

## See also

-   [`Error.prototype.stack`](stack)
-   [`Error.prototype.lineNumber`](linenumber)
-   [`Error.prototype.fileName`](filename)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/columnNumber" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/columnNumber</a>

# Comma operator (,)

The **comma operator** (`,`) evaluates each of its operands (from left to right) and returns the value of the last operand. This lets you create a compound expression in which multiple expressions are evaluated, with the compound expression's final value being the value of the rightmost of its member expressions. This is commonly used to provide multiple parameters to a `for` loop.

## Syntax

    expr1, expr2, expr3...

### Parameters

`expr1`, `expr2`, `expr3`...  
One or more expressions, the last of which is returned as the value of the compound expression.

## Usage notes

You can use the comma operator when you want to include multiple expressions in a location that requires a single expression. The most common usage of this operator is to supply multiple parameters in a `for` loop.

The comma operator is fully different from the comma within arrays, objects, and function arguments and parameters.

## Examples

If `a` is a 2-dimensional array with 10 elements on each side, the following code uses the comma operator to increment `i` and decrement `j` at once.

The following code prints the values of the diagonal elements in the array:

    for (var i = 0, j = 9; i <= 9; i++, j--)
      console.log('a[' + i + '][' + j + '] = ' + a[i][j]);

Note that the comma operators in assignments may appear not to have the normal effect of comma operators because they don't exist within an expression. In the following example, `a` is set to the value of `b = 3` (which is 3), but the `c = 4` expression still evaluates and its result returned to console (i.e., 4). This is due to [operator precedence and associativity](operator_precedence).

    var a, b, c;

    a = b = 3, c = 4; // Returns 4 in console
    console.log(a); // 3 (left-most)

    var x, y, z;

    x = (y = 5, z = 6); // Returns 6 in console
    console.log(x); // 6 (right-most)

### Processing and then returning

Another example that one could make with comma operator is processing before returning. As stated, only the last element will be returned but all others are going to be evaluated as well. So, one could do:

    function myFunc() {
      var x = 0;

      return (x += 1, x); // the same as return ++x;
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-comma-operator">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-comma-operator</span></a></td></tr></tbody></table>

`Comma_Operator`

1

12

1

3

4

1

1

18

4

10.1

1

1.0

## See also

-   [`for` loop](../statements/for)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator</a>

# Intl.Collator.prototype.compare()

The `Intl.Collator.prototype.compare()` method compares two strings according to the sort order of this [`Intl/Collator`](../collator) object.

## Syntax

    compare(string1, string2)

### Parameters

`string1`  
`string2`  
The strings to compare against each other.

## Description

The `compare` getter function returns a number indicating how `string1` and `string2` compare to each other according to the sort order of this [`Intl/Collator`](../collator) object: a negative value if `string1` comes before `string2`; a positive value if `string1` comes after `string2`; 0 if they are considered equal.

## Examples

### Using compare for array sort

Use the `compare` getter function for sorting arrays. Note that the function is bound to the collator from which it was obtained, so it can be passed directly to [`Array.prototype.sort()`](../../array/sort).

    var a = ['Offenbach', 'Österreich', 'Odenwald'];
    var collator = new Intl.Collator('de-u-co-phonebk');
    a.sort(collator.compare);
    console.log(a.join(', '));
    // → "Odenwald, Österreich, Offenbach"

### Using compare for array search

Use the `compare` getter function for finding matching strings in arrays:

    var a = ['Congrès', 'congres', 'Assemblée', 'poisson'];
    var collator = new Intl.Collator('fr', { usage: 'search', sensitivity: 'base' });
    var s = 'congres';
    var matches = a.filter(v => collator.compare(v, s) === 0);
    console.log(matches.join(', '));
    // → "Congrès, congres"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-intl.collator.prototype.compare">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-intl.collator.prototype.compare</span></a></td></tr></tbody></table>

`compare`

24

12

29

11

15

10

4.4

25

56

14

10

1.5

## See also

-   [`Intl.Collator`](../collator)
-   [`String.prototype.localeCompare()`](../../string/localecompare)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare</a>

# Atomics.compareExchange()

The static ` Atomics``.compareExchange() ` method exchanges a given replacement value at a given position in the array, if a given expected value equals the old value. It returns the old value at that position whether it was equal to the expected value or not. This atomic operation guarantees that no other write happens until the modified value is written back.

## Syntax

    Atomics.compareExchange(typedArray, index, expectedValue, replacementValue)

### Parameters

`typedArray`  
An integer typed array. One of [`Int8Array`](../int8array), [`Uint8Array`](../uint8array), [`Int16Array`](../int16array), [`Uint16Array`](../uint16array), [`Int32Array`](../int32array), [`Uint32Array`](../uint32array), [`BigInt64Array`](../bigint64array), or [`BigUint64Array`](../biguint64array).

`index`  
The position in the `typedArray` to exchange a `value`.

`expectedValue`  
The value to check for equality.

`replacementValue`  
The number to exchange.

### Return value

The old value at the given position (`typedArray[index]`).

### Exceptions

-   Throws a [`TypeError`](../typeerror), if `typedArray` is not one of the allowed integer types.
-   Throws a [`RangeError`](../rangeerror), if `index` is out of bounds in the `typedArray`.

## Examples

### Using compareExchange()

    const sab = new SharedArrayBuffer(1024);
    const ta = new Uint8Array(sab);
    ta[0] = 7;

    Atomics.compareExchange(ta, 0, 7, 12); // returns 7, the old value
    Atomics.load(ta, 0); // 12

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-atomics.compareexchange">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-atomics.compareexchange</span></a></td></tr></tbody></table>

`compareExchange`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

## See also

-   [`Atomics`](../atomics)
-   [`Atomics.exchange()`](exchange)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange</a>

# Comparing Reflect and Object methods

The [`Reflect`](../reflect) object, introduced in ES2015, is a built-in object that provides methods to interface with JavaScript objects. Some of the static functions that exist on `Reflect` also correspond to methods available on [`Object`](../object), which predates ES2015. Although some of the methods appear to be similar in their behavior, there are often subtle differences between them.

The table below details the differences between the methods available on the `Object` and `Reflect` APIs. Please note that if a method does not exist in an API, it is marked as N/A.

<table><colgroup><col style="width: 33%" /><col style="width: 33%" /><col style="width: 33%" /></colgroup><thead><tr class="header"><th>Method Name</th><th><code>Object</code></th><th><code>Reflect</code></th></tr></thead><tbody><tr class="odd"><td><code>defineProperty()</code></td><td><a href="../object/defineproperty"><code>Object.defineProperty()</code></a> returns the object that was passed to the function. Returns a <code>TypeError</code> if the property was not successfully defined on the object.</td><td><a href="defineproperty"><code>Reflect.defineProperty()</code></a> returns <code>true</code> if the property was defined on the object and <code>false</code> if it was not.</td></tr><tr class="even"><td><code>defineProperties()</code></td><td><a href="../object/defineproperties"><code>Object.defineProperties()</code></a> returns the objects that were passed to the function. Returns a <code>TypeError</code> if any properties were not successfully defined on the object.</td><td>N/A</td></tr><tr class="odd"><td><code>set()</code></td><td>N/A</td><td><a href="set"><code>Reflect.set()</code></a> returns <code>true</code> if the property was set successfully on the object and <code>false</code> if it was not. Throws a <code>TypeError</code> if the target was not an <code>Object</code>.</td></tr><tr class="even"><td><code>get()</code></td><td>N/A</td><td><a href="get"><code>Reflect.get()</code></a> returns the value of the property. Throws a <code>TypeError</code> if the target was not an <code>Object</code>.</td></tr><tr class="odd"><td><code>deleteProperty()</code></td><td>N/A</td><td><a href="deleteproperty"><code>Reflect.deleteProperty()</code></a> returns <code>true</code> if the property was deleted from the object and <code>false</code> if it was not.</td></tr><tr class="even"><td><code>getOwnPropertyDescriptor()</code></td><td><a href="../object/getownpropertydescriptor"><code>Object.getOwnPropertyDescriptor()</code></a> returns a property descriptor of the given property if it exists on the object argument passed in, and returns <code>undefined</code> if it does not exist. However, if an object is not passed in as the first argument, it will be coerced into an object.</td><td><a href="getownpropertydescriptor"><code>Reflect.getOwnPropertyDescriptor()</code></a> returns a property descriptor of the given property if it exists on the object. Returns <code>undefined</code> if it does not exist, and a <code>TypeError</code> if anything other than an object (a primitive) is passed in as the first argument.</td></tr><tr class="odd"><td><code>getOwnPropertyDescriptors()</code></td><td><a href="../object/getownpropertydescriptors"><code>Object.getOwnPropertyDescriptors()</code></a> returns an object containing a property descriptor of each passed-in object. Returns an empty object if the passed-in object has no owned property descriptors.</td><td>N/A</td></tr><tr class="even"><td><code>getPrototypeOf()</code></td><td><a href="../object/getprototypeof"><code>Object.getPrototypeOf()</code></a> returns the prototype of the given object. Returns <code>null</code> if there are no inherited properties. Throws a <code>TypeError</code> for non-objects in ES5, but coerces non-objects in ES2015.</td><td><a href="getprototypeof"><code>Reflect.getPrototypeOf()</code></a> returns the prototype of the given object. Returns <code>null</code> if there are no inherited properties, and throws a <code>TypeError</code> for non-objects.</td></tr><tr class="odd"><td><code>setPrototypeOf()</code></td><td><a href="../object/setprototypeof"><code>Object.setPrototypeOf()</code></a> returns the object itself if its prototype was set successfully. Throws a <code>TypeError</code> if the prototype being set was anything other than an <code>Object</code> or <code>null</code>, or if the prototype for the object being modified is non-extensible.</td><td><a href="setprototypeof"><code>Reflect.setPrototypeOf()</code></a> returns <code>true</code> if the prototype was successfully set on the object and <code>false</code> if it wasn't (including if the prototype is non-extensible). Throws a <code>TypeError</code> if the target passed in was not an <code>Object</code>, or if the prototype being set was anything other than an <code>Object</code> or <code>null</code>.</td></tr><tr class="even"><td><code>isExtensible()</code></td><td><a href="../object/isextensible"><code>Object.isExtensible()</code></a> returns <code>true</code> if the object is extensible, and <code>false</code> if it is not. Throws a <code>TypeError</code> in ES5 if the first argument is not an object (a primitive). In ES2015, it will be coerced into a non-extensible, ordinary object and will return <code>false</code>.</td><td><p><a href="isextensible"><code>Reflect.isExtensible()</code></a> returns <code>true</code> if the object is extensible, and <code>false</code> if it is not. Throws a <code>TypeError</code> if the first argument is not an object (a primitive).</p></td></tr><tr class="odd"><td><code>preventExtensions()</code></td><td><p><a href="../object/preventextensions"><code>Object.preventExtensions()</code></a> returns the object that is being made non-extensible. Throws a <code>TypeError</code>in ES5 if the argument is not an object (a primitive). In ES2015, treats the argument as a non-extensible, ordinary object and returns the object itself.</p></td><td><a href="preventextensions"><code>Reflect.preventExtensions()</code></a> returns <code>true</code> if the object has been made non-extensible, and <code>false</code> if it has not. Throws a <code>TypeError</code> if the argument is not an object (a primitive).</td></tr><tr class="even"><td><code>keys()</code></td><td><a href="../object/keys"><code>Object.keys()</code></a> returns an <code>Array</code> of strings that map to the target object's own (enumerable) property keys. Throws a <code>TypeError</code> in ES5 if the target is not an object, but coerces non-object targets into objects in ES2015.</td><td>N/A</td></tr><tr class="odd"><td><code>ownKeys()</code></td><td>N/A</td><td><a href="ownkeys"><code>Reflect.ownKeys()</code></a> returns an <code>Array</code> of property names that map to the target object's own property keys. Throws a <code>TypeError</code> if the target is not an <code>Object</code>.</td></tr></tbody></table>

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods</a>

# WebAssembly.compile()

The `WebAssembly.compile()` function compiles WebAssembly binary code into a [`WebAssembly.Module`](module) object. This function is useful if it is necessary to a compile a module before it can be instantiated (otherwise, the [`WebAssembly.instantiate()`](instantiate) function should be used).

## Syntax

    WebAssembly.compile(bufferSource)

### Parameters

_bufferSource_  
A [typed array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays) or [ArrayBuffer](../arraybuffer) containing the binary code of the .wasm module you want to compile.

### Return value

A `Promise` that resolves to a [`WebAssembly.Module`](module) object representing the compiled module.

### Exceptions

-   If `bufferSource` is not a [typed array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays), a [`TypeError`](../typeerror) is thrown.
-   If compilation fails, the promise rejects with a [`WebAssembly.CompileError`](compileerror).

## Examples

### Using compile

The following example compiles the loaded simple.wasm byte code using the `compile()` function and then sends it to a [worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) using [postMessage()](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage).

    var worker = new Worker("wasm_worker.js");

    fetch('simple.wasm').then(response =>
      response.arrayBuffer()
    ).then(bytes =>
      WebAssembly.compile(bytes)
    ).then(mod =>
      worker.postMessage(mod)
    );

**Note:** You'll probably want to use [`WebAssembly.compileStreaming()`](compilestreaming) in most cases, as it is more efficient than `compile()`.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#dom-webassembly-compile">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#dom-webassembly-compile</span></a></td></tr></tbody></table>

`compile`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/compile" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/compile</a>

# WebAssembly.CompileError

The `WebAssembly.CompileError` object indicates an error during WebAssembly decoding or validation.

## Constructor

[`WebAssembly.CompileError()`](compileerror/compileerror)  
Creates a new `WebAssembly.CompileError` object.

## Instance properties

[`WebAssembly.CompileError.prototype.message`](../error/message)  
Error message. Although ECMA-262 specifies that [`URIError`](../urierror) should provide its own `message` property, in [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), it inherits [`Error.prototype.message`](../error/message).

[`WebAssembly.CompileError.prototype.name`](../error/name)  
Error name. Inherited from [`Error`](../error).

[`WebAssembly.CompileError.prototype.fileName`](../error/filename)  
Path to file that raised this error. Inherited from [`Error`](../error).

[`WebAssembly.CompileError.prototype.lineNumber`](../error/linenumber)  
Line number in file that raised this error. Inherited from [`Error`](../error).

[`WebAssembly.CompileError.prototype.columnNumber`](../error/columnnumber)  
Column number in line that raised this error. Inherited from [`Error`](../error).

[`WebAssembly.CompileError.prototype.stack`](../error/stack)  
Stack trace. Inherited from [`Error`](../error).

## Instance methods

[`WebAssembly.CompileError.prototype.toSource()`](../error/tosource)  
Returns code that could eval to the same error. Inherited from [`Error`](../error).

[`WebAssembly.CompileError.prototype.toString()`](../error/tostring)  
Returns a string representing the specified `Error` object.. Inherited from [`Error`](../error).

## Examples

### Creating a new CompileError instance

The following snippet creates a new `CompileError` instance, and logs its details to the console:

    try {
      throw new WebAssembly.CompileError('Hello', 'someFile', 10);
    } catch (e) {
      console.log(e instanceof CompileError); // true
      console.log(e.message);                 // "Hello"
      console.log(e.name);                    // "CompileError"
      console.log(e.fileName);                // "someFile"
      console.log(e.lineNumber);              // 10
      console.log(e.columnNumber);            // 0
      console.log(e.stack);                   // returns the location where the code was run
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#exceptiondef-compileerror">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#exceptiondef-compileerror</span></a></td></tr><tr class="even"><td><a href="https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard">ECMAScript Language Specification (ECMAScript)
<br/>

<span class="small">#sec-native-error-types-used-in-this-standard</span></a></td></tr></tbody></table>

`CompileError`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

`CompileError`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError</a>

# WebAssembly.compileStreaming()

The `WebAssembly.compileStreaming()` function compiles a [`WebAssembly.Module`](module) directly from a streamed underlying source. This function is useful if it is necessary to a compile a module before it can be instantiated (otherwise, the [`WebAssembly.instantiateStreaming()`](instantiatestreaming) function should be used).

## Syntax

    WebAssembly.compileStreaming(source)

### Parameters

_source_  
A [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object or a promise that will fulfill with one, representing the underlying source of a .wasm module you want to stream and compile.

### Return value

A `Promise` that resolves to a [`WebAssembly.Module`](module) object representing the compiled module.

### Exceptions

-   If `bufferSource` is not a [typed array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays), a [`TypeError`](../typeerror) is thrown.
-   If compilation fails, the promise rejects with a [`WebAssembly.CompileError`](compileerror).

## Examples

### Compile streaming

The following example (see our [compile-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html) demo on GitHub, and [view it live](https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html) also) directly streams a .wasm module from an underlying source then compiles it to a [`WebAssembly.Module`](module) object. Because the `compileStreaming()` function accepts a promise for a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object, you can directly pass it a [`WindowOrWorkerGlobalScope.fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) call, and it will pass the response into the function when it fulfills.

    var importObject = { imports: { imported_func: arg => console.log(arg) } };

    WebAssembly.compileStreaming(fetch('simple.wasm'))
    .then(module => WebAssembly.instantiate(module, importObject))
    .then(instance => instance.exports.exported_func());

The resulting module instance is then instantiated using [`WebAssembly.instantiate()`](instantiate), and the exported function invoked.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/web-api/#dom-webassembly-compilestreaming">WebAssembly Web API (WebAssembly Web API) 
<br/>

<span class="small">#dom-webassembly-compilestreaming</span></a></td></tr></tbody></table>

`compileStreaming`

61

16

58

No

47

No

61

61

58

45

No

8.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming</a>

# Array.prototype.concat()

The `concat()` method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

## Syntax

    concat()
    concat(value0)
    concat(value0, value1)
    concat(value0, value1, ... , valueN)

### Parameters

`valueN` <span class="badge inline optional">Optional</span>  
Arrays and/or values to concatenate into a new array. If all `valueN` parameters are omitted, `concat` returns a shallow copy of the existing array on which it is called. See the description below for more details.

### Return value

A new [`Array`](../array) instance.

## Description

The `concat` method creates a new array consisting of the elements in the object on which it is called, followed in order by, for each argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array). It does not recurse into nested array arguments.

The `concat` method does not alter `this` or any of the arrays provided as arguments but instead returns a shallow copy that contains copies of the same elements combined from the original arrays. Elements of the original arrays are copied into the new array as follows:

-   Object references (and not the actual object): `concat` copies object references into the new array. Both the original and new array refer to the same object. That is, if a referenced object is modified, the changes are visible to both the new and original arrays. This includes elements of array arguments that are also arrays.
-   Data types such as strings, numbers and booleans (not [`String`](../string), [`Number`](../number), and [`Boolean`](../boolean) objects): `concat` copies the values of strings and numbers into the new array.

**Note:** Concatenating array(s)/value(s) will leave the originals untouched. Furthermore, any operation on the new array (except operations on elements which are object references) will have no effect on the original arrays, and vice versa.

## Examples

### Concatenating two arrays

The following code concatenates two arrays:

    const letters = ['a', 'b', 'c'];
    const numbers = [1, 2, 3];

    letters.concat(numbers);
    // result in ['a', 'b', 'c', 1, 2, 3]

### Concatenating three arrays

The following code concatenates three arrays:

    const num1 = [1, 2, 3];
    const num2 = [4, 5, 6];
    const num3 = [7, 8, 9];

    const numbers = num1.concat(num2, num3);

    console.log(numbers);
    // results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

### Concatenating values to an array

The following code concatenates three values to an array:

    const letters = ['a', 'b', 'c'];

    const alphaNumeric = letters.concat(1, [2, 3]);

    console.log(alphaNumeric);
    // results in ['a', 'b', 'c', 1, 2, 3]

### Concatenating nested arrays

The following code concatenates nested arrays and demonstrates retention of references:

    const num1 = [[1]];
    const num2 = [2, [3]];

    const numbers = num1.concat(num2);

    console.log(numbers);
    // results in [[1], 2, [3]]

    // modify the first element of num1
    num1[0].push(4);

    console.log(numbers);
    // results in [[1, 4], 2, [3]]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.concat">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.concat</span></a></td></tr></tbody></table>

`concat`

1

12

1

5.5

4

1

1

18

4

10.1

1

1.0

## See also

-   [`push`](push) / [`pop`](pop) — add/remove elements from the end of the array
-   [`unshift`](unshift) / [`shift`](shift) — add/remove elements from the beginning of the array
-   [`splice`](splice) — add/remove elements from the specified location of the array
-   [`String.prototype.concat()`](../string/concat)
-   [`Symbol.isConcatSpreadable`](../symbol/isconcatspreadable) – control flattening.

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat</a>

# Conditional (ternary) operator

The **conditional (ternary) operator** is the only JavaScript operator that takes three operands: a condition followed by a question mark (`?`), then an expression to execute if the condition is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) followed by a colon (`:`), and finally the expression to execute if the condition is [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy). This operator is frequently used as a shortcut for the [`if`](../statements/if...else) statement.

## Syntax

    condition ? exprIfTrue : exprIfFalse

### Parameters

`condition`  
An expression whose value is used as a condition.

`exprIfTrue`  
An expression which is evaluated if the `condition` evaluates to a [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) value (one which equals or can be converted to `true`).

`exprIfFalse`  
An expression which is executed if the `condition` is [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) (that is, has a value which can be converted to `false`).

## Description

Besides `false`, possible falsy expressions are: `null`, `NaN`, `0`, the empty string (`""`), and `undefined`. If `condition` is any of these, the result of the conditional expression will be the result of executing the expression `exprIfFalse`.

## Examples

### A simple example

    var age = 26;
    var beverage = (age >= 21) ? "Beer" : "Juice";
    console.log(beverage); // "Beer"

### Handling null values

One common usage is to handle a value that may be `null`:

    let greeting = person => {
        let name = person ? person.name : `stranger`
        return `Howdy, ${name}`
    }

    console.log(greeting({name: `Alice`}));  // "Howdy, Alice"
    console.log(greeting(null));             // "Howdy, stranger"

### Conditional chains

The ternary operator is right-associative, which means it can be "chained" in the following way, similar to an `if … else if … else if … else` chain:

    function example(…) {
        return condition1 ? value1
             : condition2 ? value2
             : condition3 ? value3
             : value4;
    }

    // Equivalent to:

    function example(…) {
        if (condition1) { return value1; }
        else if (condition2) { return value2; }
        else if (condition3) { return value3; }
        else { return value4; }
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-conditional-operator">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-conditional-operator</span></a></td></tr></tbody></table>

`Conditional_Operator`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [if statement](../statements/if...else)
-   [Nullish coalescing operator](nullish_coalescing_operator)
-   [Optional chaining](optional_chaining)
-   [Making decisions in your code — conditionals](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals)
-   [Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator</a>

# const

Constants are block-scoped, much like variables declared using the `let` keyword. The value of a constant can't be changed through reassignment, and it can't be redeclared.

## Syntax

    const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

`nameN`  
The constant's name, which can be any legal [identifier](https://developer.mozilla.org/en-US/docs/Glossary/Identifier).

`valueN`  
The constant's value. This can be any legal [expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions), including a function expression.

The [Destructuring Assignment](../operators/destructuring_assignment) syntax can also be used to declare variables.

    const { bar } = foo; // where foo = { bar:10, baz:12 };
    /* This creates a constant with the name 'bar', which has a value of 10 */

## Description

This declaration creates a constant whose scope can be either global or local to the block in which it is declared. Global constants do **not** become properties of the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object, unlike [`var`](var) variables.

An initializer for a constant is required. You must specify its value in the same statement in which it's declared. (This makes sense, given that it can't be changed later.)

The `const` creates a read-only reference to a value. It does **not** mean the value it holds is immutable—just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents (e.g., its properties) can be altered.

All the considerations about the "[temporal dead zone](let#temporal_dead_zone_tdz)" apply to both [`let`](let) and `const`.

A constant cannot share its name with a function or a variable in the same scope.

## Examples

### Basic const usage

Constants can be declared with uppercase or lowercase, but a common convention is to use all-uppercase letters.

    // define MY_FAV as a constant and give it the value 7
    const MY_FAV = 7;

    // this will throw an error - Uncaught TypeError: Assignment to constant variable.
    MY_FAV = 20;

    // MY_FAV is 7
    console.log('my favorite number is: ' + MY_FAV);

    // trying to redeclare a constant throws an error
    // Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
    const MY_FAV = 20;

    // the name MY_FAV is reserved for constant above, so this will fail too
    var MY_FAV = 20;

    // this throws an error too
    let MY_FAV = 20;

### Block scoping

It's important to note the nature of block scoping.

    if (MY_FAV === 7) {
      // this is fine and creates a block scoped MY_FAV variable
      // (works equally well with let to declare a block scoped non const variable)
      let MY_FAV = 20;

      // MY_FAV is now 20
      console.log('my favorite number is ' + MY_FAV);

      // this gets hoisted into the global context and throws an error
      var MY_FAV = 20;
    }

    // MY_FAV is still 7
    console.log('my favorite number is ' + MY_FAV);

### const needs to be initialized

    // throws an error
    // Uncaught SyntaxError: Missing initializer in const declaration

    const FOO;

### const in objects and arrays

const also works on objects and arrays.

    const MY_OBJECT = {'key': 'value'};

    // Attempting to overwrite the object throws an error
    // Uncaught TypeError: Assignment to constant variable.
    MY_OBJECT = {'OTHER_KEY': 'value'};

    // However, object keys are not protected,
    // so the following statement is executed without problem
    MY_OBJECT.key = 'otherValue'; // Use Object.freeze() to make object immutable

    // The same applies to arrays
    const MY_ARRAY = [];
    // It's possible to push items into the array
    MY_ARRAY.push('A'); // ["A"]
    // However, assigning a new array to the variable throws an error
    // Uncaught TypeError: Assignment to constant variable.
    MY_ARRAY = ['B'];

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-let-and-const-declarations">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-let-and-const-declarations</span></a></td></tr></tbody></table>

`const`

21

12

36

\["Prior to Firefox 13, `const` is implemented, but re-assignment is not failing.", "Prior to Firefox 46, a `TypeError` was thrown on redeclaration instead of a `SyntaxError`."\]

11

9

5.1

≤37

25

36

\["Prior to Firefox 13, `const` is implemented, but re-assignment is not failing.", "Prior to Firefox 46, a `TypeError` was thrown on redeclaration instead of a `SyntaxError`."\]

10.1

6

1.5

## See also

-   [`var`](var)
-   [`let`](let)
-   [Constants in the JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#constants)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const</a>

# Reflect.construct()

The static `Reflect.construct()` method acts like the [`new`](../../operators/new) operator, but as a function. It is equivalent to calling `new target(...args)`. It gives also the added option to specify a different prototype.

## Syntax

    Reflect.construct(target, argumentsList)
    Reflect.construct(target, argumentsList, newTarget)

### Parameters

`target`  
The target function to call.

`argumentsList`  
An array-like object specifying the arguments with which `target` should be called.

`newTarget` <span class="badge inline optional">Optional</span>  
The constructor whose prototype should be used. See also the [`new.target`](../../operators/new.target) operator. If `newTarget` is not present, its value defaults to `target`.

### Return value

A new instance of `target` (or `newTarget`, if present), initialized by `target` as a constructor with the given `argumentsList`.

### Exceptions

A [`TypeError`](../typeerror), if `target` or `newTarget` are not constructors.

## Description

`Reflect.construct()` allows you to invoke a constructor with a variable number of arguments. (This would also be possible by using the [spread syntax](../../operators/spread_syntax) combined with the [`new` operator](../../operators/new).)

    let obj = new Foo(...args)
    let obj = Reflect.construct(Foo, args)

### `Reflect.construct()` vs `Object.create()`

Prior to the introduction of `Reflect`, objects could be constructed using an arbitrary combination of constructor and prototype by using [`Object.create()`](../object/create).

    function OneClass() {
        this.name = 'one'
    }

    function OtherClass() {
        this.name = 'other'
    }

    // Calling this:
    let obj1 = Reflect.construct(OneClass, args, OtherClass)

    // ...has the same result as this:
    let obj2 = Object.create(OtherClass.prototype)
    OneClass.apply(obj2, args)

    console.log(obj1.name)  // 'one'
    console.log(obj2.name)  // 'one'

    console.log(obj1 instanceof OneClass)  // false
    console.log(obj2 instanceof OneClass)  // false

    console.log(obj1 instanceof OtherClass)  // true
    console.log(obj2 instanceof OtherClass)  // true

    //Another example to demonstrate below:

    function func1(a, b, c, d) {
      console.log(arguments[3]);
    }

    function func2(d, e, f, g) {
      console.log(arguments[3]);
    }

    let obj1 = Reflect.construct(func1, ['I', 'Love', 'my', 'India'])
    obj1

However, while the end result is the same, there is one important difference in the process. When using `Object.create()` and [`Function.prototype.apply()`](../function/apply), the `new.target` operator will point to `undefined` within the function used as the constructor, since the `new` keyword is not being used to create the object.

When invoking `Reflect.construct()`, on the other hand, the `new.target` operator will point to the `newTarget` parameter if supplied, or `target` if not.

    function OneClass() {
        console.log('OneClass')
        console.log(new.target)
    }
    function OtherClass() {
        console.log('OtherClass')
        console.log(new.target)
    }

    let obj1 = Reflect.construct(OneClass, args)
    // Output:
    //     OneClass
    //     function OneClass { ... }

    let obj2 = Reflect.construct(OneClass, args, OtherClass)
    // Output:
    //     OneClass
    //     function OtherClass { ... }

    let obj3 = Object.create(OtherClass.prototype);
    OneClass.apply(obj3, args)
    // Output:
    //     OneClass
    //     undefined

## Examples

### Using `Reflect.construct()`

    let d = Reflect.construct(Date, [1776, 6, 4])
    d instanceof Date  // true
    d.getFullYear()    // 1776

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-reflect.construct">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-reflect.construct</span></a></td></tr></tbody></table>

`construct`

49

12

42

No

36

10

49

49

42

36

10

5.0

## See also

-   [`Reflect`](../reflect)
-   [`new`](../../operators/new)
-   `new.target`

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/construct" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/construct</a>

# Object.prototype.constructor

The `constructor` property returns a reference to the [`Object`](../object) constructor function that created the instance object. Note that the value of this property is a reference to _the function itself_, not a string containing the function's name.

The value is only read-only for primitive values such as `1`, `true`, and `"test"`.

## Description

All objects (with the exception of objects created with `Object.create(null)`) will have a `constructor` property. Objects created without the explicit use of a constructor function (such as object- and array-literals) will have a `constructor` property that points to the Fundamental Object constructor type for that object.

    let o = {}
    o.constructor === Object // true

    let o = new Object
    o.constructor === Object // true

    let a = []
    a.constructor === Array // true

    let a = new Array
    a.constructor === Array // true

    let n = new Number(3)
    n.constructor === Number // true

## Examples

### Displaying the constructor of an object

The following example creates a constructor (`Tree`) and an object of that type (`theTree`). The example then displays the `constructor` property for the object `theTree`.

    function Tree(name) {
      this.name = name
    }

    let theTree = new Tree('Redwood')
    console.log('theTree.constructor is ' + theTree.constructor)

This example displays the following output:

    theTree.constructor is function Tree(name) {
      this.name = name
    }

### Changing the constructor of an object

One can assign the `constructor` property for any value except `null` and `undefined` since those don't have a corresponding constructor function (like `String`, `Number`, `Boolean` etc.), but values which are primitives won't keep the change (with no exception thrown). This is due to the same mechanism, which allows one to set any property on primitive values (except `null` and `undefined`) with no effect. Namely whenever one uses such a primitive as an object an instance of the corresponding constructor is created and discarded right after the statement was executed.

    let val = null;
    val.constructor = 1; //TypeError: var is null

    val = 'abc';
    val.constructor = Number; //val.constructor === String

    val.foo = 'bar'; //An implicit instance of String('abc') was created and assigned the prop foo
    val.foo === undefined; //true, since a new instance of String('abc') was created for this comparison, which doesn't have the foo property

So basically one can change the value of the `constructor` property for anything, except the primitives mentioned above, **note that changing the** `constructor` **property does not affect the instanceof operator**:

    let a = [];
    a.constructor = String
    a.constructor === String // true
    a instanceof String //false
    a instanceof Array //true

    a = new Foo();
    a.constructor = 'bar'
    a.constructor === 'bar' // true

    //etc.

If the object is sealed/frozen then the change has no effect and no exception is thrown:

    let a = Object.seal({});
    a.constructor = Number;
    a.constructor === Object; //true

### Changing the constructor of a function

Mostly this property is used for defining a function as a **function-constructor** with further calling it with **new** and prototype-inherits chain.

    function Parent() { /* ... */ }
    Parent.prototype.parentMethod = function parentMethod() {}

    function Child() {
       Parent.call(this) // Make sure everything is initialized properly
    }
    Child.prototype = Object.create(Parent.prototype) // re-define child prototype to Parent prototype

    Child.prototype.constructor = Child // return original constructor to Child

But when do we need to perform the last line here? Unfortunately, the answer is: _it depends_.

Let's try to define the cases in which re-assignment of the original constructor will play a major role, and when it will be one superfluous line of code.

Take the following case: the object has the `create()` method to create itself.

    function Parent() { /* ... */ }
    function CreatedConstructor() {
       Parent.call(this)
    }

    CreatedConstructor.prototype = Object.create(Parent.prototype)

    CreatedConstructor.prototype.create = function create() {
      return new this.constructor()
    }

    new CreatedConstructor().create().create() // TypeError undefined is not a function since constructor === Parent

In the example above the exception will be shown since the constructor links to Parent.

To avoid this, just assign the necessary constructor you are going to use.

    function Parent() { /* ... */ }
    function CreatedConstructor() { /* ... */ }

    CreatedConstructor.prototype = Object.create(Parent.prototype)
    CreatedConstructor.prototype.constructor = CreatedConstructor // sets the correct constructor for future use

    CreatedConstructor.prototype.create = function create() {
      return new this.constructor()
    }

    new CreatedConstructor().create().create() // it's pretty fine

Ok, now it's pretty clear why changing the constructor can be useful.

Let's consider one more case.

    function ParentWithStatic() {}

    ParentWithStatic.startPosition = { x: 0, y:0 } // Static member property
    ParentWithStatic.getStartPosition = function getStartPosition() {
      return this.startPosition
    }

    function Child(x, y) {
      this.position = {
        x: x,
        y: y
      }
    }

    Child = Object.assign(Child, ParentWithStatic)  // copies over the static members from ParentWithStatic to Child
    Child.prototype = Object.create(ParentWithStatic.prototype)
    Child.prototype.constructor = Child

    Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() {
      let position = this.position
      let startPosition = this.constructor.getStartPosition() // error undefined is not a function, since the constructor is Child

      return {
        offsetX: startPosition.x - position.x,
        offsetY: startPosition.y - position.y
      }
    };

For this example we need either to stay parent constructor to continue to work properly or reassign static properties to child's constructor:

    ...
    Child = Object.assign(Child, ParentWithStatic) // Notice that we assign it before we create(...) a prototype below
    Child.prototype = Object.create(ParentWithStatic.prototype)
    ...

or assign parent constructor identifier to a separate property on the Child constructor function and access it via that property:

    ...
    Child.parentConstructor = ParentWithStatic
    Child.prototype = Object.create(ParentWithStatic.prototype)
    ...
       let startPosition = this.constructor.parentConstructor.getStartPosition()
    ...

**Note:** Manually updating or setting the constructor can lead to different and sometimes confusing consequences. To prevent this, just define the role of `constructor` in each specific case. In most cases, `constructor` is not used and reassignment of it is not necessary.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.prototype.constructor">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Object.prototype.constructor' in that specification.</span></a></td></tr></tbody></table>

`constructor`

1

12

1

8

4

1

1

18

4

10.1

1

1.0

## See also

-   [Class declaration](../../statements/class)
-   [Class constructor](../../classes/constructor)
-   Glossary: [constructor](https://developer.mozilla.org/en-US/docs/Glossary/Constructor)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor</a>

# continue

The `continue` terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.

## Syntax

    continue [label];

`label`  
Identifier associated with the label of the statement.

## Description

In contrast to the [`break`](break) statement, `continue` does not terminate the execution of the loop entirely: instead,

-   In a [`while`](while) loop, it jumps back to the condition.

<!-- -->

-   In a [`for`](for) loop, it jumps to the update expression.

The `continue` statement can include an optional label that allows the program to jump to the next iteration of a labeled loop statement instead of the current loop. In this case, the `continue` statement needs to be nested within this labeled statement.

## Examples

### Using continue with while

The following example shows a [`while`](while) loop that has a `continue` statement that executes when the value of `i` is 3. Thus, `n` takes on the values 1, 3, 7, and 12.

    var i = 0;
    var n = 0;

    while (i < 5) {
      i++;

      if (i === 3) {
        continue;
      }

      n += i;
    }

### Using continue with a label

In the following example, a statement labeled `checkiandj` contains a statement labeled `checkj`. If `continue` is encountered, the program continues at the top of the `checkj` statement. Each time `continue` is encountered, `checkj` reiterates until its condition returns false. When false is returned, the remainder of the `checkiandj` statement is completed.

If `continue` had a label of `checkiandj`, the program would continue at the top of the `checkiandj` statement.

See also [label](label).

    var i = 0;
    var j = 8;

    checkiandj: while (i < 4) {
      console.log('i: ' + i);
      i += 1;

      checkj: while (j > 4) {
        console.log('j: ' + j);
        j -= 1;

        if ((j % 2) == 0)
          continue checkj;
        console.log(j + ' is odd.');
      }
      console.log('i = ' + i);
      console.log('j = ' + j);
    }

Output:

    i: 0

    // start checkj
    j: 8
    7 is odd.
    j: 7
    j: 6
    5 is odd.
    j: 5
    // end checkj

    i = 1
    j = 4

    i: 1
    i = 2
    j = 4

    i: 2
    i = 3
    j = 4

    i: 3
    i = 4
    j = 4

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-continue-statement">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Continue statement' in that specification.</span></a></td></tr></tbody></table>

`continue`

1

12

1

3

4

1

1

18

4

10.1

1

1.0

## See also

-   [`break`](break)
-   [label](label)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue</a>

# Array.prototype.copyWithin()

The `copyWithin()` method shallow copies part of an array to another location in the same array and returns it without modifying its length.

## Syntax

    copyWithin(target)
    copyWithin(target, start)
    copyWithin(target, start, end)

### Parameters

`target`  
Zero-based index at which to copy the sequence to. If negative, `target` will be counted from the end.

If `target` is at or greater than `arr.length`, nothing will be copied. If `target` is positioned after `start`, the copied sequence will be trimmed to fit `arr.length`.

`start` <span class="badge inline optional">Optional</span>  
Zero-based index at which to start copying elements from. If negative, `start` will be counted from the end.

If `start` is omitted, `copyWithin` will copy from index `0`.

`end` <span class="badge inline optional">Optional</span>  
Zero-based index at which to end copying elements from. `copyWithin` copies up to but not including `end`. If negative, `end` will be counted from the end.

If `end` is omitted, `copyWithin` will copy until the last index (default to `arr.length`).

### Return value

The modified array.

## Description

The `copyWithin` works like C and C++'s `memmove`, and is a high-performance method to shift the data of an [`Array`](../array). This especially applies to the [`TypedArray`](../typedarray/copywithin) method of the same name. The sequence is copied and pasted as one operation; pasted sequence will have the copied values even when the copy and paste region overlap.

The `copyWithin` function is intentionally _generic_, it does not require that its `this` value be an [`Array`](../array) object.

The `copyWithin` method is a mutable method. It does not alter the length of `this`, but it will change its content and create new properties, if necessary.

## Examples

### Using copyWithin

    [1, 2, 3, 4, 5].copyWithin(-2)
    // [1, 2, 3, 1, 2]

    [1, 2, 3, 4, 5].copyWithin(0, 3)
    // [4, 5, 3, 4, 5]

    [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
    // [4, 2, 3, 4, 5]

    [1, 2, 3, 4, 5].copyWithin(-2, -3, -1)
    // [1, 2, 3, 3, 4]

    [].copyWithin.call({length: 5, 3: 1}, 0, 3)
    // {0: 1, 3: 1, length: 5}

    // ES2015 Typed Arrays are subclasses of Array
    var i32a = new Int32Array([1, 2, 3, 4, 5])

    i32a.copyWithin(0, 2)
    // Int32Array [3, 4, 5, 4, 5]

    // On platforms that are not yet ES2015 compliant:
    [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
    // Int32Array [4, 2, 3, 4, 5]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.copywithin">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.copywithin</span></a></td></tr></tbody></table>

`copyWithin`

45

12

32

No

32

9

45

45

32

32

9

5.0

## See also

-   [A polyfill](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js)
-   [`Array`](../array)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin</a>

# Math.cos()

The `Math.cos()` static function returns the [cosine](https://en.wikipedia.org/wiki/Cosine) of the specified angle, which must be specified in [radians](https://en.wikipedia.org/wiki/Radians).

## Syntax

    Math.cos(x)

### Parameters

`x`  
The angle in radians for which to return the cosine.

### Return value

The cosine of the given number.

## Description

The `Math.cos()` method returns a numeric value between -1 and 1, which represents the cosine of the angle.

Because `cos()` is a static method of `Math`, you always use it as `Math.cos()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.cos()

    Math.cos(0);           // 1
    Math.cos(1);           // 0.5403023058681398

    Math.cos(Math.PI);     // -1
    Math.cos(2 * Math.PI); // 1

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.cos">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.cos</span></a></td></tr></tbody></table>

`cos`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.acos()`](acos)
-   [`Math.asin()`](asin)
-   [`Math.atan()`](atan)
-   [`Math.atan2()`](atan2)
-   [`Math.sin()`](sin)
-   [`Math.tan()`](tan)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos</a>

# Math.cosh()

The `Math.cosh()` function returns the hyperbolic cosine of a number, that can be expressed using the [constant e](e):

$$\\mathtt{\\operatorname{Math.cosh(x)}} = \\frac{e^{x} + e^{- x}}{2}$$

## Syntax

    Math.cosh(x)

### Parameters

`x`  
A number.

### Return value

The hyperbolic cosine of the given number.

## Description

Because `cosh()` is a static method of `Math`, you always use it as `Math.cosh()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.cosh()

    Math.cosh(0);  // 1
    Math.cosh(1);  // 1.5430806348152437
    Math.cosh(-1); // 1.5430806348152437

## Polyfill

This can be emulated with the help of the [`Math.exp()`](exp) function:

    Math.cosh = Math.cosh || function(x) {
      return (Math.exp(x) + Math.exp(-x)) / 2;
    }

or using only one call to the [`Math.exp()`](exp) function:

    Math.cosh = Math.cosh || function(x) {
      var y = Math.exp(x);
      return (y + 1 / y) / 2;
    };

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.cosh">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.cosh</span></a></td></tr></tbody></table>

`cosh`

38

12

25

No

25

8

38

38

25

25

8

3.0

## See also

-   [`Math.acosh()`](acosh)
-   [`Math.asinh()`](asinh)
-   [`Math.atanh()`](atanh)
-   [`Math.sinh()`](sinh)
-   [`Math.tanh()`](tanh)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cosh" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cosh</a>

# Object.create()

The `Object.create()` method creates a new object, using an existing object as the prototype of the newly created object.

## Syntax

    Object.create(proto)
    Object.create(proto, propertiesObject)

### Parameters

`proto`  
The object which should be the prototype of the newly-created object.

`propertiesObject` <span class="badge inline optional">Optional</span>  
If specified and not [`undefined`](../undefined), an object whose enumerable own properties (that is, those properties defined upon itself and _not_ enumerable properties along its prototype chain) specify property descriptors to be added to the newly-created object, with the corresponding property names. These properties correspond to the second argument of [`Object.defineProperties()`](defineproperties).

### Return value

A new object with the specified prototype object and properties.

### Exceptions

The `proto` parameter has to be either

-   [`null`](../null) or
-   an [`Object`](../object) excluding [primitive wrapper objects](https://developer.mozilla.org/en-US/docs/Glossary/Primitive#primitive_wrapper_objects_in_javascript).

If `proto` is neither of these a [`TypeError`](../typeerror) is thrown.

## Custom and Null objects

A new object created from a completely custom object (especially one created from the `null` object, which is basically a custom object with NO members) can behave in unexpected ways. This is especially true when debugging, since common object-property converting/detecting utility functions may generate errors, or lose information (especially if using silent error-traps that ignore errors). For example, here are two objects:

    oco = Object.create( {} );   // create a normal object
    ocn = Object.create( null ); // create a "null" object

    > console.log(oco) // {} -- Seems normal
    > console.log(ocn) // {} -- Seems normal here too, so far

    oco.p = 1; // create a simple property on normal obj
    ocn.p = 0; // create a simple property on "null" obj

    > console.log(oco) // {p: 1} -- Still seems normal
    > console.log(ocn) // {p: 0} -- Still seems normal here too. BUT WAIT...

As shown above, all seems normal so far. However, when attempting to actually use these objects, their differences quickly become apparent:

    > "oco is: " + oco // shows "oco is: [object Object]"

    > "ocn is: " + ocn // throws error: Cannot convert object to primitive value

Testing just a few of the many most basic built-in functions shows the magnitude of the problem more clearly:

    > alert(oco) // shows [object Object]
    > alert(ocn) // throws error: Cannot convert object to primitive value

    > oco.toString() // shows [object Object]
    > ocn.toString() // throws error: ocn.toString is not a function

    > oco.valueOf() // shows {}
    > ocn.valueOf() // throws error: ocn.valueOf is not a function

    > oco.hasOwnProperty("p") // shows "true"
    > ocn.hasOwnProperty("p") // throws error: ocn.hasOwnProperty is not a function

    > oco.constructor // shows "Object() { [native code] }"
    > ocn.constructor // shows "undefined"

As said, these differences can make debugging even simple-seeming problems quickly go astray. For example:

_A simple common debugging function:_

    // display top-level property name:value pairs of given object
    function ShowProperties(obj){
      for(var prop in obj){
        console.log(prop + ": " + obj[prop] + "\n" );
      }
    }

_Not such simple results: (especially if silent error-trapping had hidden the error messages)_

    ob={}; ob.po=oco; ob.pn=ocn; // create a compound object using the test objects from above as property values

    > ShowProperties( ob ) // display top-level properties
    - po: [object Object]
    - Error: Cannot convert object to primitive value

    Note that only first property gets shown.

_(But if the same object is created in a different order -- at least in some implementations...)_

    ob={}; ob.pn=ocn; ob.po=oco; // create same compound object again, but create same properties in different order

    > ShowProperties( ob ) // display top-level properties
    - Error: Cannot convert object to primitive value

    Note that neither property gets shown.

Note that such a different order may arise statically via disparate fixed codings such as here, but also dynamically via whatever the order any such property-adding code-branches actually get executed at runtime as depends on inputs and/or random-variables. Then again, the actual iteration order is not guaranteed no matter what the order members are added.

Be aware of, also, that using Object.entries() on an object created via Object.create() will result in an empty array being returned.

    var obj = Object.create({ a: 1, b: 2 });

    > console.log(Object.entries(obj)); // shows "[]"

#### Some NON-solutions

A good solution for the missing object-methods is not immediately apparent.

Adding the missing object-method directly from the standard-object does NOT work:

    ocn = Object.create( null ); // create "null" object (same as before)

    ocn.toString = Object.toString; // since new object lacks method then try assigning it directly from standard-object

    > ocn.toString // shows "toString() { [native code] }" -- missing method seems to be there now
    > ocn.toString == Object.toString // shows "true" -- method seems to be same as the standard object-method

    > ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function

Adding the missing object-method directly to new object's "prototype" does not work either, since the new object does not have a real prototype (which is really the cause of ALL these problems) and one cannot be **directly** added:

    ocn = Object.create( null ); // create "null" object (same as before)

    ocn.prototype.toString = Object.toString; // Error: Cannot set property 'toString' of undefined

    ocn.prototype = {};                       // try to create a prototype
    ocn.prototype.toString = Object.toString; // since new object lacks method then try assigning it from standard-object

    > ocn.toString() // error: ocn.toString is not a function

Adding the missing object-method by using the standard-object as new object's prototype does not work either:

    ocn = Object.create( null );        // create "null" object (same as before)
    Object.setPrototypeOf(ocn, Object); // set new object's prototype to the standard-object

    > ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function

#### Some OK solutions

Again, adding the missing object-method directly from the **standard-object** does NOT work. However, adding the **generic** method directly, DOES:

    ocn = Object.create( null ); // create "null" object (same as before)

    ocn.toString = toString; // since new object lacks method then assign it directly from generic version

    > ocn.toString() // shows "[object Object]"
    > "ocn is: " + ocn // shows "ocn is: [object Object]"

    ob={}; ob.pn=ocn; ob.po=oco; // create a compound object (same as before)

    > ShowProperties(ob) // display top-level properties
    - po: [object Object]
    - pn: [object Object]

However, setting the generic **prototype** as the new object's prototype works even better:

    ocn = Object.create( null );                  // create "null" object (same as before)
    Object.setPrototypeOf(ocn, Object.prototype); // set new object's prototype to the "generic" object (NOT standard-object)

_(In addition to all the string-related functions shown above, this also adds:)_

    > ocn.valueOf() // shows {}
    > ocn.hasOwnProperty("x") // shows "false"
    > ocn.constructor // shows "Object() { [native code] }"

    // ...and all the rest of the properties and methods of Object.prototype.

As shown, objects modified this way now look very much like ordinary objects.

## Polyfill

This polyfill covers the main use case, which is creating a new object for which the prototype has been chosen but doesn't take the second argument into account.

Note that while the setting of `null` as `[[Prototype]]` is supported in the real ES5 `Object.create`, this polyfill cannot support it due to a limitation inherent in versions of ECMAScript lower than 5.

     if (typeof Object.create !== "function") {
        Object.create = function (proto, propertiesObject) {
            if (typeof proto !== 'object' && typeof proto !== 'function') {
                throw new TypeError('Object prototype may only be an Object: ' + proto);
            } else if (proto === null) {
                throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
            }

            if (typeof propertiesObject != 'undefined') {
                throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
            }

            function F() {}
            F.prototype = proto;

            return new F();
        };
    }

## Examples

### Classical inheritance with `Object.create()`

Below is an example of how to use `Object.create()` to achieve classical inheritance. This is for a single inheritance, which is all that JavaScript supports.

    // Shape - superclass
    function Shape() {
      this.x = 0;
      this.y = 0;
    }

    // superclass method
    Shape.prototype.move = function(x, y) {
      this.x += x;
      this.y += y;
      console.info('Shape moved.');
    };

    // Rectangle - subclass
    function Rectangle() {
      Shape.call(this); // call super constructor.
    }

    // subclass extends superclass
    Rectangle.prototype = Object.create(Shape.prototype);

    //If you don't set Rectangle.prototype.constructor to Rectangle,
    //it will take the prototype.constructor of Shape (parent).
    //To avoid that, we set the prototype.constructor to Rectangle (child).
    Rectangle.prototype.constructor = Rectangle;

    var rect = new Rectangle();

    console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true
    console.log('Is rect an instance of Shape?', rect instanceof Shape); // true
    rect.move(1, 1); // Outputs, 'Shape moved.'

If you wish to inherit from multiple objects, then mixins are a possibility.

    function MyClass() {
      SuperClass.call(this);
      OtherSuperClass.call(this);
    }

    // inherit one class
    MyClass.prototype = Object.create(SuperClass.prototype);
    // mixin another
    Object.assign(MyClass.prototype, OtherSuperClass.prototype);
    // re-assign constructor
    MyClass.prototype.constructor = MyClass;

    MyClass.prototype.myMethod = function() {
      // do something
    };

[`Object.assign()`](assign) copies properties from the OtherSuperClass prototype to the MyClass prototype, making them available to all instances of MyClass. `Object.assign()` was introduced with ES2015 and [can be polyfilled](assign#polyfill). If support for older browsers is necessary, `jQuery.extend()` or `_.assign()` can be used.

### Using propertiesObject argument with Object.create()

    var o;

    // create an object with null as prototype
    o = Object.create(null);

    o = {};
    // is equivalent to:
    o = Object.create(Object.prototype);

    // Example where we create an object with a couple of
    // sample properties. (Note that the second parameter
    // maps keys to *property descriptors*.)
    o = Object.create(Object.prototype, {
      // foo is a regular 'value property'
      foo: {
        writable: true,
        configurable: true,
        value: 'hello'
      },
      // bar is a getter-and-setter (accessor) property
      bar: {
        configurable: false,
        get: function() { return 10; },
        set: function(value) {
          console.log('Setting `o.bar` to', value);
        }
    /* with ES2015 Accessors our code can look like this
        get() { return 10; },
        set(value) {
          console.log('Setting `o.bar` to', value);
        } */
      }
    });

    function Constructor() {}
    o = new Constructor();
    // is equivalent to:
    o = Object.create(Constructor.prototype);
    // Of course, if there is actual initialization code
    // in the Constructor function,
    // the Object.create() cannot reflect it

    // Create a new object whose prototype is a new, empty
    // object and add a single property 'p', with value 42.
    o = Object.create({}, { p: { value: 42 } });

    // by default properties ARE NOT writable,
    // enumerable or configurable:
    o.p = 24;
    o.p;
    // 42

    o.q = 12;
    for (var prop in o) {
      console.log(prop);
    }
    // 'q'

    delete o.p;
    // false

    // to specify an ES3 property
    o2 = Object.create({}, {
      p: {
        value: 42,
        writable: true,
        enumerable: true,
        configurable: true
      }
    });
    /* is not equivalent to:
    This will create an object with prototype : {p: 42 }
    o2 = Object.create({p: 42}) */

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.create">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.create</span></a></td></tr></tbody></table>

`create`

5

12

4

9

11.6

5

1

18

4

12

5

1.0

## See also

-   [`Object.defineProperty()`](defineproperty)
-   [`Object.defineProperties()`](defineproperties)
-   [`Object.prototype.isPrototypeOf()`](isprototypeof)
-   [`Reflect.construct()`](../reflect/construct)
-   John Resig's post on [getPrototypeOf()](http://ejohn.org/blog/objectgetprototypeof/)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create</a>

# WebAssembly.Module.customSections()

The `WebAssembly.customSections()` function returns a copy of the contents of all custom sections in the given module with the given string name.

## Syntax

    WebAssembly.Module.customSections(module, sectionName)

### Parameters

_module_  
The [`WebAssembly.Module`](../module) object whose custom sections are being considered.

_sectionName_  
The string name of the desired custom section.

### Return value

A (possibly empty) array containing [`ArrayBuffer`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) copies of the contents of all custom sections matching `sectionName`.

### Exceptions

If `module` is not a [`WebAssembly.Module`](../module) object instance, a [`TypeError`](../../typeerror) is thrown.

## Description

A wasm module is comprised of a sequence of **sections**. Most of these sections are fully specified and validated by the wasm spec, but modules can also contain **custom sections** that are ignored and skipped over during validation. (Read [High level structure](https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#high-level-structure) for information on section structures, and how normal sections ("known sections") and custom sections are distinguished.)

This provides developers with a way to include custom data inside wasm modules for other purposes, for example the [name custom section](https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#name-section), which allows developers to provide names for all the functions and locals in the module (like "symbols" in a native build).

Note that the WebAssembly text format currently doesn't have a syntax specified for adding new custom sections; you can however add a name section to your wasm during conversion from text format over to .wasm. The wast2wasm command available as part of the [wabt tool](https://github.com/webassembly/wabt) has a `--debug-names` option — specify this during conversion to get a .wasm with a names custom section, for example:

    wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names

## Examples

### Using customSections

The following example (see the custom-section.html [source](https://github.com/mdn/webassembly-examples/blob/master/other-examples/custom-section.html) and [live example](https://mdn.github.io/webassembly-examples/other-examples/custom-section.html)) compiles the loaded simple-name-section.wasm byte code.

We then do a check using `WebAssembly.Module.customSections`, looking to see whether the module instance contains a "name" custom section by checking that its `length` is more than 0. Since there is a "name" section in the example, an `ArrayBuffer` object is returned.

    WebAssembly.compileStreaming(fetch('simple-name-section.wasm'))
    .then(function(mod) {
      var nameSections = WebAssembly.Module.customSections(mod, "name");
      if (nameSections.length != 0) {
        console.log("Module contains a name section");
        console.log(nameSections[0]);
      };
    });

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#dom-module-customsections">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#dom-module-customsections</span></a></td></tr></tbody></table>

`customSections`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections</a>

# TypeError: cyclic object value

The JavaScript exception "cyclic object value" occurs when object references were found in [JSON](https://www.json.org/). [`JSON.stringify()`](../global_objects/json/stringify) doesn't try to solve them and fails accordingly.

## Message

    TypeError: cyclic object value (Firefox)
    TypeError: Converting circular structure to JSON (Chrome and Opera)
    TypeError: Circular reference in value argument not supported (Edge)

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

The [JSON format](https://www.json.org/) per se doesn't support object references (although an [IETF draft exists](https://datatracker.ietf.org/doc/html/draft-pbryan-zyp-json-ref-03)), hence [`JSON.stringify()`](../global_objects/json/stringify) doesn't try to solve them and fails accordingly.

## Examples

### Circular references

In a circular structure like the following

    var circularReference = {otherData: 123};
    circularReference.myself = circularReference;

[`JSON.stringify()`](../global_objects/json/stringify) will fail

    JSON.stringify(circularReference);
    // TypeError: cyclic object value

To serialize circular references you can use a library that supports them (e.g. [cycle.js](https://github.com/douglascrockford/JSON-js/blob/master/cycle.js)) or implement a solution by yourself, which will require finding and replacing (or removing) the cyclic references by serializable values.

The snippet below illustrates how to find and filter (thus causing data loss) a cyclic reference by using the `replacer` parameter of [`JSON.stringify()`](../global_objects/json/stringify):

    const getCircularReplacer = () => {
      const seen = new WeakSet();
      return (key, value) => {
        if (typeof value === "object" && value !== null) {
          if (seen.has(value)) {
            return;
          }
          seen.add(value);
        }
        return value;
      };
    };

    JSON.stringify(circularReference, getCircularReplacer());
    // {"otherData":123}

## See also

-   [`JSON.stringify`](../global_objects/json/stringify)
-   [cycle.js](https://github.com/douglascrockford/JSON-js/blob/master/cycle.js) – Introduces two functions, `JSON.decycle` and `JSON.retrocycle`, which makes it possible to encode and decode cyclical structures and dags into an extended and retrocompatible JSON format.

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value</a>

# DataView

The `DataView` view provides a low-level interface for reading and writing multiple number types in a binary [`ArrayBuffer`](arraybuffer), without having to care about the platform's [endianness](https://developer.mozilla.org/en-US/docs/Glossary/Endianness).

## Description

### Endianness

Multi-byte number formats are represented in memory differently depending on machine architecture — see [Endianness](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) for an explanation. `DataView` accessors provide explicit control of how data is accessed, regardless of the executing computer's endianness.

    var littleEndian = (function() {
      var buffer = new ArrayBuffer(2);
      new DataView(buffer).setInt16(0, 256, true /* littleEndian */);
      // Int16Array uses the platform's endianness.
      return new Int16Array(buffer)[0] === 256;
    })();
    console.log(littleEndian); // true or false

### 64-bit Integer Values

Some browsers don't have support for [`DataView.prototype.setBigInt64()`](dataview/setbigint64) and [`DataView.prototype.setBigUint64()`](dataview/setbiguint64). So to enable 64-bit operations in your code that will work across browsers, you could implement your own `getUint64()` function, to obtain values with precision up to [`Number.MAX_SAFE_INTEGER`](number/max_safe_integer) — which could suffice for certain cases.

    function getUint64(dataview, byteOffset, littleEndian) {
      // split 64-bit number into two 32-bit (4-byte) parts
      const left =  dataview.getUint32(byteOffset, littleEndian);
      const right = dataview.getUint32(byteOffset+4, littleEndian);

      // combine the two 32-bit values
      const combined = littleEndian? left + 2**32*right : 2**32*left + right;

      if (!Number.isSafeInteger(combined))
        console.warn(combined, 'exceeds MAX_SAFE_INTEGER. Precision may be lost');

      return combined;
    }

Alternatively, if you need full 64-bit range, you can create a [`BigInt`](bigint). Further, although native BigInts are much faster than user-land library equivalents, BigInts will always be much slower than 32-bit integers in JavaScript due to the nature of their variable size.

    const BigInt = window.BigInt, bigThirtyTwo = BigInt(32), bigZero = BigInt(0);
    function getUint64BigInt(dataview, byteOffset, littleEndian) {
      // split 64-bit number into two 32-bit (4-byte) parts
      const left = BigInt(dataview.getUint32(byteOffset|0, !!littleEndian)>>>0);
      const right = BigInt(dataview.getUint32((byteOffset|0) + 4|0, !!littleEndian)>>>0);

      // combine the two 32-bit values and return
      return littleEndian ? (right<<bigThirtyTwo)|left : (left<<bigThirtyTwo)|right;
    }

## Constructor

[`DataView()`](dataview/dataview)  
Creates a new `DataView` object.

## Instance properties

[`DataView.prototype.buffer`](dataview/buffer)  
The [`ArrayBuffer`](arraybuffer) referenced by this view. Fixed at construction time and thus **read only.**

[`DataView.prototype.byteLength`](dataview/bytelength)  
The length (in bytes) of this view from the start of its [`ArrayBuffer`](arraybuffer). Fixed at construction time and thus **read only.**

[`DataView.prototype.byteOffset`](dataview/byteoffset)  
The offset (in bytes) of this view from the start of its [`ArrayBuffer`](arraybuffer). Fixed at construction time and thus **read only.**

## Instance methods

[`DataView.prototype.getInt8()`](dataview/getint8)  
Gets a signed 8-bit integer (byte) at the specified byte offset from the start of the view.

[`DataView.prototype.getUint8()`](dataview/getuint8)  
Gets an unsigned 8-bit integer (unsigned byte) at the specified byte offset from the start of the view.

[`DataView.prototype.getInt16()`](dataview/getint16)  
Gets a signed 16-bit integer (short) at the specified byte offset from the start of the view.

[`DataView.prototype.getUint16()`](dataview/getuint16)  
Gets an unsigned 16-bit integer (unsigned short) at the specified byte offset from the start of the view.

[`DataView.prototype.getInt32()`](dataview/getint32)  
Gets a signed 32-bit integer (long) at the specified byte offset from the start of the view.

[`DataView.prototype.getUint32()`](dataview/getuint32)  
Gets an unsigned 32-bit integer (unsigned long) at the specified byte offset from the start of the view.

[`DataView.prototype.getFloat32()`](dataview/getfloat32)  
Gets a signed 32-bit float (float) at the specified byte offset from the start of the view.

[`DataView.prototype.getFloat64()`](dataview/getfloat64)  
Gets a signed 64-bit float (double) at the specified byte offset from the start of the view.

[`DataView.prototype.getBigInt64()`](dataview/getbigint64)  
Gets a signed 64-bit integer (long long) at the specified byte offset from the start of the view.

[`DataView.prototype.getBigUint64()`](dataview/getbiguint64)  
Gets an unsigned 64-bit integer (unsigned long long) at the specified byte offset from the start of the view.

[`DataView.prototype.setInt8()`](dataview/setint8)  
Stores a signed 8-bit integer (byte) value at the specified byte offset from the start of the view.

[`DataView.prototype.setUint8()`](dataview/setuint8)  
Stores an unsigned 8-bit integer (unsigned byte) value at the specified byte offset from the start of the view.

[`DataView.prototype.setInt16()`](dataview/setint16)  
Stores a signed 16-bit integer (short) value at the specified byte offset from the start of the view.

[`DataView.prototype.setUint16()`](dataview/setuint16)  
Stores an unsigned 16-bit integer (unsigned short) value at the specified byte offset from the start of the view.

[`DataView.prototype.setInt32()`](dataview/setint32)  
Stores a signed 32-bit integer (long) value at the specified byte offset from the start of the view.

[`DataView.prototype.setUint32()`](dataview/setuint32)  
Stores an unsigned 32-bit integer (unsigned long) value at the specified byte offset from the start of the view.

[`DataView.prototype.setFloat32()`](dataview/setfloat32)  
Stores a signed 32-bit float (float) value at the specified byte offset from the start of the view.

[`DataView.prototype.setFloat64()`](dataview/setfloat64)  
Stores a signed 64-bit float (double) value at the specified byte offset from the start of the view.

[`DataView.prototype.setBigInt64()`](dataview/setbigint64)  
Stores a signed 64-bit integer (long long) value at the specified byte offset from the start of the view.

[`DataView.prototype.setBigUint64()`](dataview/setbiguint64)  
Stores an unsigned 64-bit integer (unsigned long long) value at the specified byte offset from the start of the view.

## Examples

### Using DataView

    var buffer = new ArrayBuffer(16);
    var view = new DataView(buffer, 0);

    view.setInt16(1, 42);
    view.getInt16(1); // 42

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview-objects</span></a></td></tr></tbody></table>

`DataView`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`DataView`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`buffer`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`byteLength`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`byteOffset`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`getBigInt64`

67

79

68

No

54

No

67

67

68

48

No

9.0

`getBigUint64`

67

79

68

No

54

No

67

67

68

48

No

9.0

`getFloat32`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`getFloat64`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`getInt16`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`getInt32`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`getInt8`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`getUint16`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`getUint32`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`getUint8`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`setBigInt64`

67

79

68

No

54

No

67

67

68

48

No

9.0

`setBigUint64`

67

79

68

No

54

No

67

67

68

48

No

9.0

`setFloat32`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`setFloat64`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`setInt16`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`setInt32`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`setInt8`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`setUint16`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`setUint32`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

`setUint8`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [jDataView](https://github.com/jDataView/jDataView): JavaScript library that polyfills and extends the `DataView` API to all browsers and Node.js.
-   [`ArrayBuffer`](arraybuffer)
-   [`SharedArrayBuffer`](sharedarraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView</a>

# Date

JavaScript `Date` objects represent a single moment in time in a platform-independent format. `Date` objects contain a `Number` that represents milliseconds since 1 January 1970 UTC.

**Note:** TC39 is working on [Temporal](https://tc39.es/proposal-temporal/docs/index.html), a new Date/Time API. Read more about it on the [Igalia blog](https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/). It is not yet ready for production use!

## Description

### The ECMAScript epoch and timestamps

A JavaScript date is fundamentally specified as the number of milliseconds that have elapsed since midnight on January 1, 1970, UTC. This date and time are not the same as the **UNIX epoch** (the number of seconds that have elapsed since midnight on January 1, 1970, UTC), which is the predominant base value for computer-recorded date and time values.

**Note:** It's important to keep in mind that while the time value at the heart of a Date object is UTC, the basic methods to fetch the date and time or its components all work in the local (i.e. host system) time zone and offset.

It should be noted that the maximum `Date` is not of the same value as the maximum safe integer (`Number.MAX_SAFE_INTEGER` is 9,007,199,254,740,991). Instead, it is defined in ECMA-262 that a maximum of ±100,000,000 (one hundred million) days relative to January 1, 1970 UTC (that is, April 20, 271821 BCE ~ September 13, 275760 CE) can be represented by the standard `Date` object (equivalent to ±8,640,000,000,000,000 milliseconds).

### Date format and time zone conversions

There are several methods available to obtain a date in various formats, as well as to perform time zone conversions. Particularly useful are the functions that output the date and time in Coordinated Universal Time (UTC), the global standard time defined by the World Time Standard. (This time is historically known as _Greenwich Mean Time_, as UTC lies along the meridian that includes London—and nearby Greenwich—in the United Kingdom.) The user's device provides the local time.

In addition to methods to read and alter individual components of the local date and time (such as [`getDay()`](date/getday) and [`setHours()`](date/sethours)), there are also versions of the same methods that read and manipulate the date and time using UTC (such as [`getUTCDay()`](date/getutcday) and [`setUTCHours()`](date/setutchours)).

## Constructor

[`Date()`](date/date)  
When called as a function, returns a string representation of the current date and time, exactly as `new Date().toString()` does.

[`new Date()`](date/date)  
When called as a constructor, returns a new `Date` object.

## Static methods

[`Date.now()`](date/now)  
Returns the numeric value corresponding to the current time—the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC, with leap seconds ignored.

[`Date.parse()`](date/parse)  
Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00 UTC, with leap seconds ignored.

**Note:** Parsing of strings with `Date.parse` is strongly discouraged due to browser differences and inconsistencies.

[`Date.UTC()`](date/utc)  
Accepts the same parameters as the longest form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC, with leap seconds ignored.

## Instance methods

[`Date.prototype.getDate()`](date/getdate)  
Returns the day of the month (`1`–`31`) for the specified date according to local time.

[`Date.prototype.getDay()`](date/getday)  
Returns the day of the week (`0`–`6`) for the specified date according to local time.

[`Date.prototype.getFullYear()`](date/getfullyear)  
Returns the year (4 digits for 4-digit years) of the specified date according to local time.

[`Date.prototype.getHours()`](date/gethours)  
Returns the hour (`0`–`23`) in the specified date according to local time.

[`Date.prototype.getMilliseconds()`](date/getmilliseconds)  
Returns the milliseconds (`0`–`999`) in the specified date according to local time.

[`Date.prototype.getMinutes()`](date/getminutes)  
Returns the minutes (`0`–`59`) in the specified date according to local time.

[`Date.prototype.getMonth()`](date/getmonth)  
Returns the month (`0`–`11`) in the specified date according to local time.

[`Date.prototype.getSeconds()`](date/getseconds)  
Returns the seconds (`0`–`59`) in the specified date according to local time.

[`Date.prototype.getTime()`](date/gettime)  
Returns the numeric value of the specified date as the number of milliseconds since January 1, 1970, 00:00:00 UTC. (Negative values are returned for prior times.)

[`Date.prototype.getTimezoneOffset()`](date/gettimezoneoffset)  
Returns the time-zone offset in minutes for the current locale.

[`Date.prototype.getUTCDate()`](date/getutcdate)  
Returns the day (date) of the month (`1`–`31`) in the specified date according to universal time.

[`Date.prototype.getUTCDay()`](date/getutcday)  
Returns the day of the week (`0`–`6`) in the specified date according to universal time.

[`Date.prototype.getUTCFullYear()`](date/getutcfullyear)  
Returns the year (4 digits for 4-digit years) in the specified date according to universal time.

[`Date.prototype.getUTCHours()`](date/getutchours)  
Returns the hours (`0`–`23`) in the specified date according to universal time.

[`Date.prototype.getUTCMilliseconds()`](date/getutcmilliseconds)  
Returns the milliseconds (`0`–`999`) in the specified date according to universal time.

[`Date.prototype.getUTCMinutes()`](date/getutcminutes)  
Returns the minutes (`0`–`59`) in the specified date according to universal time.

[`Date.prototype.getUTCMonth()`](date/getutcmonth)  
Returns the month (`0`–`11`) in the specified date according to universal time.

[`Date.prototype.getUTCSeconds()`](date/getutcseconds)  
Returns the seconds (`0`–`59`) in the specified date according to universal time.

[`Date.prototype.getYear()`](date/getyear)  
Returns the year (usually 2–3 digits) in the specified date according to local time. Use [`getFullYear()`](date/getfullyear) instead.

[`Date.prototype.setDate()`](date/setdate)  
Sets the day of the month for a specified date according to local time.

[`Date.prototype.setFullYear()`](date/setfullyear)  
Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to local time.

[`Date.prototype.setHours()`](date/sethours)  
Sets the hours for a specified date according to local time.

[`Date.prototype.setMilliseconds()`](date/setmilliseconds)  
Sets the milliseconds for a specified date according to local time.

[`Date.prototype.setMinutes()`](date/setminutes)  
Sets the minutes for a specified date according to local time.

[`Date.prototype.setMonth()`](date/setmonth)  
Sets the month for a specified date according to local time.

[`Date.prototype.setSeconds()`](date/setseconds)  
Sets the seconds for a specified date according to local time.

[`Date.prototype.setTime()`](date/settime)  
Sets the [`Date`](date) object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC. Use negative numbers for times prior.

[`Date.prototype.setUTCDate()`](date/setutcdate)  
Sets the day of the month for a specified date according to universal time.

[`Date.prototype.setUTCFullYear()`](date/setutcfullyear)  
Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to universal time.

[`Date.prototype.setUTCHours()`](date/setutchours)  
Sets the hour for a specified date according to universal time.

[`Date.prototype.setUTCMilliseconds()`](date/setutcmilliseconds)  
Sets the milliseconds for a specified date according to universal time.

[`Date.prototype.setUTCMinutes()`](date/setutcminutes)  
Sets the minutes for a specified date according to universal time.

[`Date.prototype.setUTCMonth()`](date/setutcmonth)  
Sets the month for a specified date according to universal time.

[`Date.prototype.setUTCSeconds()`](date/setutcseconds)  
Sets the seconds for a specified date according to universal time.

[`Date.prototype.setYear()`](date/setyear)  
Sets the year (usually 2–3 digits) for a specified date according to local time. Use [`setFullYear()`](date/setfullyear) instead.

[`Date.prototype.toDateString()`](date/todatestring)  
Returns the "date" portion of the [`Date`](date) as a human-readable string like `'Thu Apr 12 2018'`.

[`Date.prototype.toISOString()`](date/toisostring)  
Converts a date to a string following the ISO 8601 Extended Format.

[`Date.prototype.toJSON()`](date/tojson)  
Returns a string representing the [`Date`](date) using [`toISOString()`](date/toisostring). Intended for use by [`JSON.stringify()`](json/stringify).

[`Date.prototype.toGMTString()`](date/togmtstring)  
Returns a string representing the [`Date`](date) based on the GMT (UTC) time zone. Use [`toUTCString()`](date/toutcstring) instead.

[`Date.prototype.toLocaleDateString()`](date/tolocaledatestring)  
Returns a string with a locality sensitive representation of the date portion of this date based on system settings.

<span class="page-not-created">`Date.prototype.toLocaleFormat()`</span>  
Converts a date to a string, using a format string.

[`Date.prototype.toLocaleString()`](date/tolocalestring)  
Returns a string with a locality-sensitive representation of this date. Overrides the [`Object.prototype.toLocaleString()`](object/tolocalestring) method.

[`Date.prototype.toLocaleTimeString()`](date/tolocaletimestring)  
Returns a string with a locality-sensitive representation of the time portion of this date, based on system settings.

[`Date.prototype.toString()`](date/tostring)  
Returns a string representing the specified [`Date`](date) object. Overrides the [`Object.prototype.toString()`](object/tostring) method.

[`Date.prototype.toTimeString()`](date/totimestring)  
Returns the "time" portion of the [`Date`](date) as a human-readable string.

[`Date.prototype.toUTCString()`](date/toutcstring)  
Converts a date to a string using the UTC timezone.

[`Date.prototype.valueOf()`](date/valueof)  
Returns the primitive value of a [`Date`](date) object. Overrides the [`Object.prototype.valueOf()`](object/valueof) method.

## Examples

### Several ways to create a Date object

The following examples show several ways to create JavaScript dates:

**Note:** Parsing of date strings with the `Date` constructor (and `Date.parse`, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.

    let today = new Date()
    let birthday = new Date('December 17, 1995 03:24:00')
    let birthday = new Date('1995-12-17T03:24:00')
    let birthday = new Date(1995, 11, 17)            // the month is 0-indexed
    let birthday = new Date(1995, 11, 17, 3, 24, 0)
    let birthday = new Date(628021800000)            // passing epoch timestamp

### To get Date, Month and Year or Time

    let [month, date, year]    = new Date().toLocaleDateString("en-US").split("/")
    let [hour, minute, second] = new Date().toLocaleTimeString("en-US").split(/:| /)

### Two digit years map to 1900 – 1999

Values from `0` to `99` map to the years `1900` to `1999`. All other values are the actual year .

In order to create and get dates between the years `0` and `99` the [`Date.prototype.setFullYear()`](date/setfullyear) and [`Date.prototype.getFullYear()`](date/getfullyear) methods should be used.

    let date = new Date(98, 1)  // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)

    // Deprecated method; 98 maps to 1998 here as well
    date.setYear(98)            // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)

    date.setFullYear(98)        // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)

### Calculating elapsed time

The following examples show how to determine the elapsed time between two JavaScript dates in milliseconds.

Due to the differing lengths of days (due to daylight saving changeover), months, and years, expressing elapsed time in units greater than hours, minutes, and seconds requires addressing a number of issues, and should be thoroughly researched before being attempted.

    // Using Date objects
    let start = Date.now()

    // The event to time goes here:
    doSomethingForALongTime()
    let end = Date.now()
    let elapsed = end - start // elapsed time in milliseconds

    // Using built-in methods
    let start = new Date()

    // The event to time goes here:
    doSomethingForALongTime()
    let end = new Date()
    let elapsed = end.getTime() - start.getTime() // elapsed time in milliseconds

    // To test a function and get back its return
    function printElapsedTime(fTest) {
      let nStartTime = Date.now(),
          vReturn = fTest(),
          nEndTime = Date.now()

      console.log(`Elapsed time: ${ String(nEndTime - nStartTime) } milliseconds`)
      return vReturn
    }

    let yourFunctionReturn = printElapsedTime(yourFunction)

**Note:** In browsers that support the [Web Performance API](https://developer.mozilla.org/en-US/docs/Web/API/Window/performance)'s high-resolution time feature, [`Performance.now()`](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now) can provide more reliable and precise measurements of elapsed time than [`Date.now()`](date/now).

### Get the number of seconds since the ECMAScript Epoch

    let seconds = Math.floor(Date.now() / 1000)

In this case, it's important to return only an integer—so a simple division won't do. It's also important to only return actually elapsed seconds. (That's why this code uses [`Math.floor()`](math/floor), and _not_ [`Math.round()`](math/round).)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date-objects</span></a></td></tr></tbody></table>

`Date`

1

12

1

3

The [ISO8601 Date Format](https://en.wikipedia.org/wiki/ISO_8601) is not supported in Internet Explorer 8 or earlier.

3

1

1

18

4

10.1

1

1.0

`Date`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`UTC`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`getDate`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`getDay`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`getFullYear`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`getHours`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`getMilliseconds`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`getMinutes`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

`getMonth`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

`getSeconds`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

`getTime`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

`getTimezoneOffset`

1

12

1

5

3

1

1

18

4

10.1

1

1.0

`getUTCDate`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`getUTCDay`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`getUTCFullYear`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`getUTCHours`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`getUTCMilliseconds`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`getUTCMinutes`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`getUTCMonth`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`getUTCSeconds`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`getYear`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`now`

5

12

3

9

10.5

4

1

18

4

14

4

1.0

`parse`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`setDate`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`setFullYear`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`setHours`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`setMilliseconds`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`setMinutes`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`setMonth`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`setSeconds`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`setTime`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`setUTCDate`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`setUTCFullYear`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`setUTCHours`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`setUTCMilliseconds`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`setUTCMinutes`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`setUTCMonth`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`setUTCSeconds`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`setYear`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`toDateString`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`toGMTString`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`toISOString`

3

12

1

9

10.5

5

≤37

18

4

11

4.2

1.0

`toJSON`

3

12

1

8

10.5

5

≤37

18

4

11

4.2

1.0

`toLocaleDateString`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`toLocaleString`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`toLocaleTimeString`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`toSource`

No

No

1-74

Starting in Firefox 74, `toSource()` is no longer available for use by web content. It is still allowed for internal and privileged code.

No

No

No

No

No

4

No

No

No

`toString`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`toTimeString`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`toUTCString`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`valueOf`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

`@@toPrimitive`

47

15

44

No

34

10

47

47

44

34

10

5.0

## See also

-   [`Date()`](date/date) constructor

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date</a>

# Intl.DateTimeFormat() constructor

The `Intl.DateTimeFormat()` constructor creates [`Intl.DateTimeFormat`](../datetimeformat) objects that enable language-sensitive date and time formatting.

## Syntax

    new Intl.DateTimeFormat()
    new Intl.DateTimeFormat(locales)
    new Intl.DateTimeFormat(locales, options)

### Parameters

`locales` <span class="badge inline optional">Optional</span>  
A string with a BCP 47 language tag, or an array of such strings. To use the browser's default locale, pass an empty array. Unicode extension are supported (for example "`en-US-u-ca-buddhist`"). For the general form and interpretation of the `locales` argument, see the [Intl](../../intl#locale_identification_and_negotiation) page. The following Unicode extension keys are allowed:

`nu`  
Numbering system. Possible values include: "`arab`", "`arabext`", "`bali`", "`beng`", "`deva`", "`fullwide`", "`gujr`", "`guru`", "`hanidec`", "`khmr`", "`knda`", "`laoo`", "`latn`", "`limb`", "`mlym`", "`mong`", "`mymr`", "`orya`", "`tamldec`", "`telu`", "`thai`", "`tibt`".

`ca`  
Calendar. Possible values include: "`buddhist`", "`chinese`", "`coptic`", "`ethiopia`", "`ethiopic`", "`gregory`", "`hebrew`", "`indian`", "`islamic`", "`iso8601`", "`japanese`", "`persian`", "`roc`".

`hc`  
Hour cycle. Possible values include: "`h11`", "`h12`", "`h23`", "`h24`".

`options` <span class="badge inline optional">Optional</span>  
An object with some or all of the following properties:

`dateStyle`  
The date formatting style to use when calling `format()`. Possible values include:

-   "`full`"
-   "`long`"
-   "`medium`"
-   "`short`"

**Note:** `dateStyle` can be used with `timeStyle`, but not with other options (e.g. `weekday`, `hour`, `month`, etc.).

`timeStyle`  
The time formatting style to use when calling `format()`. Possible values include:

-   "`full`"
-   "`long`"
-   "`medium`"
-   "`short`"

**Note:** `timeStyle` can be used with `dateStyle`, but not with other options (e.g. `weekday`, `hour`, `month`, etc.).

`calendar`  
Calendar. Possible values include: "`buddhist`", "`chinese`", " `coptic`", "`ethiopia`", "`ethiopic`", "`gregory`", " `hebrew`", "`indian`", "`islamic`", "`iso8601`", " `japanese`", "`persian`", "`roc`".

`dayPeriod`  
The way day periods should be expressed. Possible values include: "`narrow`", "`short`", " `long`".

`numberingSystem`  
Numbering System. Possible values include: "`arab`", "`arabext`", " `bali`", "`beng`", "`deva`", "`fullwide`", " `gujr`", "`guru`", "`hanidec`", "`khmr`", " `knda`", "`laoo`", "`latn`", "`limb`", "`mlym`", " `mong`", "`mymr`", "`orya`", "`tamldec`", " `telu`", "`thai`", "`tibt`".

`localeMatcher`  
The locale matching algorithm to use. Possible values are "`lookup`" and "`best fit`"; the default is "`best fit`". For information about this option, see the [Intl](../../intl#locale_negotiation) page.

`timeZone`  
The time zone to use. The only value implementations must recognize is "`UTC`"; the default is the runtime's default time zone. Implementations may also recognize the time zone names of the [IANA time zone database](https://www.iana.org/time-zones), such as "`Asia/Shanghai`", "`Asia/Kolkata`", "`America/New_York`".

`hour12`  
Whether to use 12-hour time (as opposed to 24-hour time). Possible values are `true` and `false`; the default is locale dependent. This option overrides the `hc` language tag and/or the `hourCycle` option in case both are present.

`hourCycle`  
The hour cycle to use. Possible values are "`h11`", "`h12`", "`h23`", or "`h24`". This option overrides the `hc` language tag, if both are present, and the `hour12` option takes precedence in case both options have been specified.

`formatMatcher`  
The format matching algorithm to use. Possible values are "`basic`" and "`best fit`"; the default is "`best fit`". See the following paragraphs for information about the use of this property.

The following properties describe the date-time components to use in formatted output, and their desired representations. Implementations are required to support at least the following subsets:

-   `weekday`, `year`, `month`, `day`, `hour`, `minute`, `second`
-   `weekday`, `year`, `month`, `day`
-   `year`, `month`, `day`
-   `year`, `month`
-   `month`, `day`
-   `hour`, `minute`, `second`
-   `hour`, `minute`

Implementations may support other subsets, and requests will be negotiated against all available subset-representation combinations to find the best match. Two algorithms are available for this negotiation and selected by the `formatMatcher` property: A [fully specified "`basic`" algorithm](https://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher) and an implementation-dependent "`best fit`" algorithm.

`weekday`  
The representation of the weekday. Possible values are:

-   "`long`" (e.g., `Thursday`)
-   "`short`" (e.g., `Thu`)
-   "`narrow`" (e.g., `T`). Two weekdays may have the same narrow style for some locales (e.g. `Tuesday`'s narrow style is also `T`).

`era`  
The representation of the era. Possible values are:

-   "`long`" (e.g., `Anno Domini`)
-   "`short`" (e.g., `AD`)
-   "`narrow`" (e.g., `A`)

`year`  
The representation of the year. Possible values are:

-   "`numeric`" (e.g., `2012`)
-   "`2-digit`" (e.g., `12`)

`month`  
The representation of the month. Possible values are:

-   "`numeric`" (e.g., `2`)
-   "`2-digit`" (e.g., `02`)
-   "`long`" (e.g., `March`)
-   "`short`" (e.g., `Mar`)
-   "`narrow`" (e.g., `M`). Two months may have the same narrow style for some locales (e.g. `May`'s narrow style is also `M`).

`day`  
The representation of the day. Possible values are:

-   "`numeric`" (e.g., `1`)
-   "`2-digit`" (e.g., `01`)

`hour`  
The representation of the hour. Possible values are "`numeric`", "`2-digit`".

`minute`  
The representation of the minute. Possible values are "`numeric`", "`2-digit`".

`second`  
The representation of the second. Possible values are "`numeric`", "`2-digit`".

`fractionalSecondDigits`  
The number of digits used to represent fractions of a second (any additional digits are truncated). Possible values are:

-   `0` (Fractional part dropped.)
-   `1` (Fractional part represented as 1 digit. For example, 736 is formatted as `7`.)
-   `2` (Fractional part represented as 2 digits. For example, 736 is formatted as `73`.)
-   `3` (Fractional part represented as 3 digits. For example, 736 is formatted as `736`.)

`timeZoneName`  
The representation of the time zone name. Possible values are:

-   "`long`" (e.g., `British Summer Time`)
-   "`short`" (e.g., `GMT+1`)

The default value for each date-time component property is [`undefined`](../../undefined), but if all component properties are [`undefined`](../../undefined), then `year`, `month`, and `day` are assumed to be "`numeric`".

## Examples

### Using DateTimeFormat

In basic use without specifying a locale, `DateTimeFormat` uses the default locale and default options.

    var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

    // toLocaleString without arguments depends on the implementation,
    // the default locale, and the default time zone
    console.log(new Intl.DateTimeFormat().format(date));
    // → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800)

### Using timeStyle and dateStyle

    let o = new Intl.DateTimeFormat("en" , {
      timeStyle: "short"
    });
    console.log(o.format(Date.now())); // "13:31 AM"

    let o = new Intl.DateTimeFormat("en" , {
      dateStyle: "short"
    });
    console.log(o.format(Date.now())); // "07/07/20"

    let o = new Intl.DateTimeFormat("en" , {
      timeStyle: "medium",
      dateStyle: "short"
    });
    console.log(o.format(Date.now())); // "07/07/20, 13:31:55 AM"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-intl-datetimeformat-constructor">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-intl-datetimeformat-constructor</span></a></td></tr></tbody></table>

`DateTimeFormat`

24

12

29

11

15

10

4.4

25

56

14

10

1.5

`dateStyle`

76

79

79

No

63

14.1

76

76

79

54

14.5

No

`fractionalSecondDigits`

84

84

84

No

70

No

84

84

84

60

No

No

`hourCycle`

73

18

58

No

60

13

73

73

58

52

13

No

`iana_time_zone_names`

24

14

52

No

15

10

37

25

56

14

10

1.5

`timeStyle`

76

79

79

No

63

14.1

76

76

79

54

14.5

No

## See also

-   [`Intl.DateTimeFormat`](../datetimeformat)
-   [`Intl`](../../intl)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat</a>

# TypeError: can't access dead object

The JavaScript exception "can't access dead object" occurs when Firefox disallows add-ons to keep strong references to DOM objects after their parent document has been destroyed to improve in memory usage and to prevent memory leaks.

## Message

    TypeError: can't access dead object

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

To improve in memory usage and to prevent memory leaks, Firefox disallows add-ons to keep strong references to DOM objects after their parent document has been destroyed. A dead object, is holding a strong (keep alive) reference to a DOM element that persists even after it was destroyed in the DOM. To avoid these issues, references to DOM nodes in foreign document should instead be stored in an object which is specific to that document, and cleaned up when the document is unloaded, or stored as [weak references](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.getWeakReference).

## Examples

### Checking if an object is dead

[Components.utils](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils) offers a `isDeadWrapper()` method, which privileged code might use.

    if (Components.utils.isDeadWrapper(window)) {
      // dead
    }

Unprivileged code has no access to Component.utils and might just be able catch the exception.

    try {
      String(window);
    }
    catch (e) {
      console.log("window is likely dead");
    }

## See also

-   [What does "can't access dead object” mean?](https://blog.mozilla.org/addons/2012/09/12/what-does-cant-access-dead-object-mean/)
-   [Common causes of memory leaks in extensions](https://developer.mozilla.org/en-US/docs/Extensions/Common_causes_of_memory_leaks_in_extensions)
-   [Components.utils](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils)
-   [Zombie Compartments](https://developer.mozilla.org/en-US/docs/Mozilla/Zombie_compartments)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Dead_object" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Dead_object</a>

# debugger

The `debugger` invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect.

## Syntax

    debugger;

## Examples

### Using the debugger statement

The following example shows code where a `debugger` statement has been inserted, to invoke a debugger (if one exists) when the function is called.

    function potentiallyBuggyCode() {
        debugger;
        // do potentially buggy stuff to examine, step through, etc.
    }

When the debugger is invoked, execution is paused at the `debugger` statement. It is like a breakpoint in the script source.

[<img src="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger/screen_shot_2014-02-07_at_9.14.35_am.png" alt="Paused at a debugger statement." width="2730" height="1446" />](https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-debugger-statement">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-debugger-statement</span></a></td></tr></tbody></table>

`debugger`

5

12

1

4

10

5

1

18

4

10.1

4.2

1.0

## See also

-   [Debugging JavaScript](https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript)
-   [The Debugger in the Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools/Debugger)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger</a>

# decodeURI()

The `decodeURI()` function decodes a Uniform Resource Identifier (URI) previously created by [`encodeURI()`](encodeuri) or by a similar routine.

## Syntax

    decodeURI(encodedURI)

### Parameters

`encodedURI`  
A complete, encoded Uniform Resource Identifier.

### Return value

A new string representing the unencoded version of the given encoded Uniform Resource Identifier (URI).

### Exceptions

Throws an [`URIError`](urierror) ("malformed URI sequence") exception when `encodedURI` contains invalid character sequences.

## Description

Replaces each escape sequence in the encoded URI with the character that it represents, but does not decode escape sequences that could not have been introduced by [`encodeURI`](encodeuri). The character "`#`” is not decoded from escape sequences.

## Examples

### Decoding a Cyrillic URL

    decodeURI('https://developer.mozilla.org/ru/docs/JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
    // "https://developer.mozilla.org/ru/docs/JavaScript_шеллы"

### Catching errors

    try {
      var a = decodeURI('%E0%A4%A');
    } catch(e) {
      console.error(e);
    }

    // URIError: malformed URI sequence

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-decodeuri-encodeduri">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-decodeuri-encodeduri</span></a></td></tr></tbody></table>

`decodeURI`

1

12

1

5.5

7

1.1

1

18

4

10.1

1

1.0

## See also

-   [`decodeURIComponent()`](decodeuricomponent)
-   [`encodeURI()`](encodeuri)
-   [`encodeURIComponent()`](encodeuricomponent)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI</a>

# decodeURIComponent()

The `decodeURIComponent()` function decodes a Uniform Resource Identifier (URI) component previously created by [`encodeURIComponent`](encodeuricomponent) or by a similar routine.

## Syntax

    decodeURIComponent(encodedURI)

### Parameters

`encodedURI`  
An encoded component of a Uniform Resource Identifier.

### Return value

A new string representing the decoded version of the given encoded Uniform Resource Identifier (URI) component.

### Exceptions

Throws an [`URIError`](urierror) ("malformed URI sequence") exception when used wrongly.

## Description

Replaces each escape sequence in the encoded URI component with the character that it represents.

## Examples

### Decoding a Cyrillic URL component

    decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
    // "JavaScript_шеллы"

### Catching errors

    try {
      var a = decodeURIComponent('%E0%A4%A');
    } catch(e) {
      console.error(e);
    }

    // URIError: malformed URI sequence

### Decoding query parameters from a URL

decodeURIComponent cannot be used directly to parse query parameters from a URL. It needs a bit of preparation.

    function decodeQueryParam(p) {
      return decodeURIComponent(p.replace(/\+/g, ' '));
    }

    decodeQueryParam('search+query%20%28correct%29');
    // 'search query (correct)'

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-decodeuricomponent-encodeduricomponent">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-decodeuricomponent-encodeduricomponent</span></a></td></tr></tbody></table>

`decodeURIComponent`

1

12

1

5.5

7

1.1

1

18

4

10.1

1

1.0

## See also

-   [`decodeURI`](decodeuri)
-   [`encodeURI`](encodeuri)
-   [`encodeURIComponent`](encodeuricomponent)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent</a>

# Decrement (--)

The decrement operator (`--`) decrements (subtracts one from) its operand and returns a value.

## Syntax

    Operator: x-- or --x

## Description

If used postfix, with operator after operand (for example, `x--`), the decrement operator decrements and returns the value before decrementing.

If used prefix, with operator before operand (for example, `--x`), the decrement operator decrements and returns the value after decrementing.

## Examples

### Postfix decrement

    let x = 3;
    y = x--;

    // y = 3
    // x = 2

### Prefix decrement

    let a = 2;
    b = --a;

    // a = 1
    // b = 1

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-postfix-decrement-operator">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-postfix-decrement-operator</span></a></td></tr></tbody></table>

`Decrement`

2

12

1

3

3

4

1

18

4

10.1

3.2

1.0

## See also

-   [Addition operator](addition)
-   [Subtraction operator](subtraction)
-   [Division operator](division)
-   [Multiplication operator](multiplication)
-   [Remainder operator](remainder)
-   [Exponentiation operator](exponentiation)
-   [Increment operator](increment)
-   [Unary negation operator](unary_negation)
-   [Unary plus operator](unary_plus)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement</a>

# Default parameters

**Default function parameters** allow named parameters to be initialized with default values if no value or `undefined` is passed.

## Syntax

    function fnName(param1 = defaultValue1, ..., paramN = defaultValueN) { ... }

## Description

In JavaScript, function parameters default to [`undefined`](../global_objects/undefined). However, it's often useful to set a different default value. This is where default parameters can help.

In the past, the general strategy for setting defaults was to test parameter values in the function body and assign a value if they are `undefined`.

In the following example, if no value is provided for `b` when `multiply` is called, `b`'s value would be `undefined` when evaluating `a * b` and `multiply` would return `NaN`.

    function multiply(a, b) {
      return a * b
    }

    multiply(5, 2)  // 10
    multiply(5)     // NaN !

To guard against this, something like the second line would be used, where `b` is set to `1` if `multiply` is called with only one argument:

    function multiply(a, b) {
      b = (typeof b !== 'undefined') ?  b : 1
      return a * b
    }

    multiply(5, 2)  // 10
    multiply(5)     // 5

With default parameters in ES2015, checks in the function body are no longer necessary. Now, you can assign `1` as the default value for `b` in the function head:

    function multiply(a, b = 1) {
      return a * b
    }

    multiply(5, 2)          // 10
    multiply(5)             // 5
    multiply(5, undefined)  // 5

## Examples

### Passing `undefined` vs. other falsy values

In the second call in this example, even if the first argument is set explicitly to `undefined` (though not `null` or other [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) values), the value of the `num` argument is still the default.

    function test(num = 1) {
      console.log(typeof num)
    }

    test()           // 'number' (num is set to 1)
    test(undefined)  // 'number' (num is set to 1 too)

    // test with other falsy values:
    test('')         // 'string' (num is set to '')
    test(null)       // 'object' (num is set to null)

### Evaluated at call time

The default argument is evaluated at _call time_. So, unlike (for example) Python, a new object is created each time the function is called.

    function append(value, array = []) {
      array.push(value)
      return array
    }

    append(1)  // [1]
    append(2)  // [2], not [1, 2]

This even applies to functions and variables:

    function callSomething(thing = something()) {
      return thing
    }

    let numberOfTimesCalled = 0
    function something() {
      numberOfTimesCalled += 1
      return numberOfTimesCalled
    }

    callSomething()  // 1
    callSomething()  // 2

### Earlier parameters are available to later default parameters

Parameters defined earlier (to the left) are available to later default parameters:

    function greet(name, greeting, message = greeting + ' ' + name) {
      return [name, greeting, message]
    }

    greet('David', 'Hi')                     // ["David", "Hi", "Hi David"]
    greet('David', 'Hi', 'Happy Birthday!')  // ["David", "Hi", "Happy Birthday!"]

This functionality can be approximated like this, which demonstrates how many edge cases are handled:

    function go() {
      return ':P'
    }

    function withDefaults(a, b = 5, c = b, d = go(), e = this,
                          f = arguments, g = this.value) {
      return [a, b, c, d, e, f, g]
    }

    function withoutDefaults(a, b, c, d, e, f, g) {
      switch (arguments.length) {
        case 0:
          a;
        case 1:
          b = 5;
        case 2:
          c = b;
        case 3:
          d = go();
        case 4:
          e = this;
        case 5:
          f = arguments;
        case 6:
          g = this.value;
        default:
      }
      return [a, b, c, d, e, f, g];
    }

    withDefaults.call({value: '=^_^='});
    // [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]

    withoutDefaults.call({value: '=^_^='});
    // [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]

### Scope Effects

If default parameters are defined for one or more parameter, then a [second scope](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation) (Environment Record) is created, specifically for the identifiers within the parameter list. This scope is a parent of the scope created for the function body.

This means that functions and variables declared in the function body cannot be referred to from default value parameter initializers; attempting to do so throws a run-time [`ReferenceError`](../global_objects/referenceerror).

It also means that variables declared inside the function body using `var` will mask parameters of the same name, instead of the usual behavior of duplicate `var` declarations having no effect.

The following function will throw a `ReferenceError` when invoked, because the default parameter value does not have access to the child scope of the function body:

    function f(a = go()) { // Throws a `ReferenceError` when `f` is invoked.
      function go() { return ':P' }
    }

...and this function will print `undefined` because variable `var a` is hoisted only to the top of the scope created for the function body (and not the parent scope created for the parameter list):

    function f(a, b = () => console.log(a)) {
      var a = 1
      b() // Prints `undefined`, because default parameter values exist in their own scope
    }

### Parameters without defaults after default parameters

Parameters are still set left-to-right, overwriting default parameters even if there are later parameters without defaults.

    function f(x = 1, y) {
      return [x, y]
    }

    f()   // [1, undefined]
    f(2)  // [2, undefined]

### Destructured parameter with default value assignment

You can use default value assignment with the [destructuring assignment](../operators/destructuring_assignment) notation:

    function f([x, y] = [1, 2], {z: z} = {z: 3}) {
      return x + y + z
    }

    f()  // 6

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-function-definitions">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-function-definitions</span></a></td></tr></tbody></table>

`Default_parameters`

49

14

15

No

36

10

49

49

15

36

10

5.0

`destructured_parameter_with_default_value_assignment`

49

14

41

No

36

10

49

49

41

36

10

5.0

`parameters_without_defaults_after_default_parameters`

49

14

26

No

36

10

49

49

26

36

10

5.0

## See also

-   [Original proposal at ecmascript.org](http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters</a>

# Object.defineProperties()

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

## Syntax

    Object.defineProperties(obj, props)

### Parameters

`obj`  
The object on which to define or modify properties.

`props`  
An object whose keys represent the names of properties to be defined or modified and whose values are objects describing those properties. Each value in `props` must be either a data descriptor or an accessor descriptor; it cannot be both (see [`Object.defineProperty()`](defineproperty) for more details).

Data descriptors and accessor descriptors may optionally contain the following keys:

`configurable`  
`true` if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.  
`false`

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

A data descriptor also has the following optional keys:

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

`writable`  
`true` if and only if the value associated with the property may be changed with an [assignment operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#assignment_operators).  
`false`

An accessor descriptor also has the following optional keys:

`get`  
A function which serves as a getter for the property, or [`undefined`](../undefined) if there is no getter. The function's return value will be used as the value of the property.  
**Defaults to [`undefined`](../undefined).**

`set`  
A function which serves as a setter for the property, or [`undefined`](../undefined) if there is no setter. The function will receive as its only argument the new value being assigned to the property.  
**Defaults to [`undefined`](../undefined).**

If a descriptor has neither of `value`, `writable`, `get` and `set` keys, it is treated as a data descriptor. If a descriptor has both `value` or `writable` and `get` or `set` keys, an exception is thrown.

### Return value

The object that was passed to the function.

## Examples

### Using Object.defineProperties

    var obj = {};
    Object.defineProperties(obj, {
      'property1': {
        value: true,
        writable: true
      },
      'property2': {
        value: 'Hello',
        writable: false
      }
      // etc. etc.
    });

## Polyfill

Assuming a pristine execution environment with all names and properties referring to their initial values, `Object.defineProperties` is almost completely equivalent (note the comment in `isCallable`) to the following reimplementation in JavaScript:

    function defineProperties(obj, properties) {
      function convertToDescriptor(desc) {
        function hasProperty(obj, prop) {
          return Object.prototype.hasOwnProperty.call(obj, prop);
        }

        function isCallable(v) {
          // NB: modify as necessary if other values than functions are callable.
          return typeof v === 'function';
        }

        if (typeof desc !== 'object' || desc === null)
          throw new TypeError('bad desc');

        var d = {};

        if (hasProperty(desc, 'enumerable'))
          d.enumerable = !!desc.enumerable;
        if (hasProperty(desc, 'configurable'))
          d.configurable = !!desc.configurable;
        if (hasProperty(desc, 'value'))
          d.value = desc.value;
        if (hasProperty(desc, 'writable'))
          d.writable = !!desc.writable;
        if (hasProperty(desc, 'get')) {
          var g = desc.get;

          if (!isCallable(g) && typeof g !== 'undefined')
            throw new TypeError('bad get');
          d.get = g;
        }
        if (hasProperty(desc, 'set')) {
          var s = desc.set;
          if (!isCallable(s) && typeof s !== 'undefined')
            throw new TypeError('bad set');
          d.set = s;
        }

        if (('get' in d || 'set' in d) && ('value' in d || 'writable' in d))
          throw new TypeError('identity-confused descriptor');

        return d;
      }

      if (typeof obj !== 'object' || obj === null)
        throw new TypeError('bad obj');

      properties = Object(properties);

      var keys = Object.keys(properties);
      var descs = [];

      for (var i = 0; i < keys.length; i++)
        descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);

      for (var i = 0; i < descs.length; i++)
        Object.defineProperty(obj, descs[i][0], descs[i][1]);

      return obj;
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.defineproperties">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.defineproperties</span></a></td></tr></tbody></table>

`defineProperties`

5

12

4

9

11.6

5

1

18

4

12

5

1.0

## See also

-   [`Object.defineProperty()`](defineproperty)
-   [`Object.keys()`](keys)
-   [Enumerability and ownership of properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties</a>

# Object.defineProperty()

The static method `Object.defineProperty()` defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

## Syntax

    Object.defineProperty(obj, prop, descriptor)

### Parameters

`obj`  
The object on which to define the property.

`prop`  
The name or [`Symbol`](../symbol) of the property to be defined or modified.

`descriptor`  
The descriptor for the property being defined or modified.

### Return value

The object that was passed to the function.

## Description

This method allows a precise addition to or modification of a property on an object. Normal property addition through assignment creates properties which show up during property enumeration ([`for...in`](../../statements/for...in) loop or [`Object.keys`](keys) method), whose values may be changed, and which may be [deleted](../../operators/delete). This method allows these extra details to be changed from their defaults. By default, values added using `Object.defineProperty()` are immutable and not enumerable.

Property descriptors present in objects come in two main flavors: data descriptors and accessor descriptors. A _data descriptor_ is a property that has a value, which may or may not be writable. An _accessor descriptor_ is a property described by a getter-setter pair of functions. A descriptor must be one of these two flavors; it cannot be both.

Both data and accessor descriptors are objects. They share the following optional keys (please note: the **defaults** mentioned here are in the case of defining properties using `Object.defineProperty()`):

`configurable`  
`true` if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.  
`false`

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

A **data descriptor** also has the following optional keys:

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

`writable`  
`true` if the value associated with the property may be changed with an [assignment operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#assignment_operators).  
`false`

An **accessor descriptor** also has the following optional keys:

`get`  
A function which serves as a getter for the property, or [`undefined`](../undefined) if there is no getter. When the property is accessed, this function is called without arguments and with `this` set to the object through which the property is accessed (this may not be the object on which the property is defined due to inheritance). The return value will be used as the value of the property.  
**Defaults to [`undefined`](../undefined).**

`set`  
A function which serves as a setter for the property, or [`undefined`](../undefined) if there is no setter. When the property is assigned, this function is called with one argument (the value being assigned to the property) and with `this` set to the object through which the property is assigned.  
**Defaults to [`undefined`](../undefined).**

If a descriptor has neither of `value`, `writable`, `get` and `set` keys, it is treated as a data descriptor. If a descriptor has both \[`value` or `writable`\] and \[`get` or `set`\] keys, an exception is thrown.

Bear in mind that these attributes are not necessarily the descriptor's own properties. Inherited properties will be considered as well. In order to ensure these defaults are preserved, you might freeze the [`Object`](../object) upfront, specify all options explicitly, or point to [`null`](../null) with [`Object.create(null)`](create).

    // using __proto__
    var obj = {};
    var descriptor = Object.create(null); // no inherited properties
    descriptor.value = 'static';

    // not enumerable, not configurable, not writable as defaults
    Object.defineProperty(obj, 'key', descriptor);

    // being explicit
    Object.defineProperty(obj, 'key', {
      enumerable: false,
      configurable: false,
      writable: false,
      value: 'static'
    });

    // recycling same object
    function withValue(value) {
      var d = withValue.d || (
        withValue.d = {
          enumerable: false,
          writable: false,
          configurable: false,
          value: value
        }
      );

      // avoiding duplicate operation for assigning value
      if (d.value !== value) d.value = value;

      return d;
    }
    // ... and ...
    Object.defineProperty(obj, 'key', withValue('static'));

    // if freeze is available, prevents adding or
    // removing the object prototype properties
    // (value, get, set, enumerable, writable, configurable)
    (Object.freeze || Object)(Object.prototype);

## Examples

### Creating a property

When the property specified doesn't exist in the object, `Object.defineProperty()` creates a new property as described. Fields may be omitted from the descriptor, and default values for those fields are inputted.

    var o = {}; // Creates a new object

    // Example of an object property added
    // with defineProperty with a data property descriptor
    Object.defineProperty(o, 'a', {
      value: 37,
      writable: true,
      enumerable: true,
      configurable: true
    });
    // 'a' property exists in the o object and its value is 37

    // Example of an object property added
    // with defineProperty with an accessor property descriptor
    var bValue = 38;
    Object.defineProperty(o, 'b', {
      // Using shorthand method names (ES2015 feature).
      // This is equivalent to:
      // get: function() { return bValue; },
      // set: function(newValue) { bValue = newValue; },
      get() { return bValue; },
      set(newValue) { bValue = newValue; },
      enumerable: true,
      configurable: true
    });
    o.b; // 38
    // 'b' property exists in the o object and its value is 38
    // The value of o.b is now always identical to bValue,
    // unless o.b is redefined

    // You cannot try to mix both:
    Object.defineProperty(o, 'conflict', {
      value: 0x9f91102,
      get() { return 0xdeadbeef; }
    });
    // throws a TypeError: value appears
    // only in data descriptors,
    // get appears only in accessor descriptors

### Modifying a property

When the property already exists, `Object.defineProperty()` attempts to modify the property according to the values in the descriptor and the object's current configuration. If the old descriptor had its `configurable` attribute set to `false` the property is said to be "non-configurable”. It is not possible to change any attribute of a non-configurable accessor property. For data properties, it is possible to modify the value if the property is writable, and it is possible to change `writable` attribute from `true` to `false`. It is not possible to switch between data and accessor property types when the property is non-configurable.

A [`TypeError`](../typeerror) is thrown when attempts are made to change non-configurable property attributes (except `value` and `writable`, if permitted) unless the current and new values are the same.

#### Writable attribute

When the `writable` property attribute is set to `false`, the property is said to be "non-writable”. It cannot be reassigned.

    var o = {}; // Creates a new object

    Object.defineProperty(o, 'a', {
      value: 37,
      writable: false
    });

    console.log(o.a); // logs 37
    o.a = 25; // No error thrown
    // (it would throw in strict mode,
    // even if the value had been the same)
    console.log(o.a); // logs 37. The assignment didn't work.

    // strict mode
    (function() {
      'use strict';
      var o = {};
      Object.defineProperty(o, 'b', {
        value: 2,
        writable: false
      });
      o.b = 3; // throws TypeError: "b" is read-only
      return o.b; // returns 2 without the line above
    }());

As seen in the example, trying to write into the non-writable property doesn't change it but doesn't throw an error either.

#### Enumerable attribute

The `enumerable` property attribute defines whether the property is picked by [`Object.assign()`](assign) or [spread](../../operators/spread_syntax) operator. For non-[`Global_Objects/Symbol`](../symbol) properties it also defines whether it shows up in a [`for...in`](../../statements/for...in) loop and [`Object.keys()`](keys) or not.

    var o = {};
    Object.defineProperty(o, 'a', {
      value: 1,
      enumerable: true
    });
    Object.defineProperty(o, 'b', {
      value: 2,
      enumerable: false
    });
    Object.defineProperty(o, 'c', {
      value: 3
    }); // enumerable defaults to false
    o.d = 4; // enumerable defaults to true
             // when creating a property by setting it
    Object.defineProperty(o, Symbol.for('e'), {
      value: 5,
      enumerable: true
    });
    Object.defineProperty(o, Symbol.for('f'), {
      value: 6,
      enumerable: false
    });

    for (var i in o) {
      console.log(i);
    }
    // logs 'a' and 'd' (in undefined order)

    Object.keys(o); // ['a', 'd']

    o.propertyIsEnumerable('a'); // true
    o.propertyIsEnumerable('b'); // false
    o.propertyIsEnumerable('c'); // false
    o.propertyIsEnumerable('d'); // true
    o.propertyIsEnumerable(Symbol.for('e')); // true
    o.propertyIsEnumerable(Symbol.for('f')); // false

    var p = { ...o }
    p.a // 1
    p.b // undefined
    p.c // undefined
    p.d // 4
    p[Symbol.for('e')] // 5
    p[Symbol.for('f')] // undefined

#### Configurable attribute

The `configurable` attribute controls at the same time whether the property can be deleted from the object and whether its attributes (other than `value` and `writable`) can be changed.

    var o = {};
    Object.defineProperty(o, 'a', {
      get() { return 1; },
      configurable: false
    });

    Object.defineProperty(o, 'a', {
      configurable: true
    }); // throws a TypeError
    Object.defineProperty(o, 'a', {
      enumerable: true
    }); // throws a TypeError
    Object.defineProperty(o, 'a', {
      set() {}
    }); // throws a TypeError (set was undefined previously)
    Object.defineProperty(o, 'a', {
      get() { return 1; }
    }); // throws a TypeError
    // (even though the new get does exactly the same thing)
    Object.defineProperty(o, 'a', {
      value: 12
    }); // throws a TypeError // ('value' can be changed when 'configurable' is false but not in this case due to 'get' accessor)

    console.log(o.a); // logs 1
    delete o.a; // Nothing happens
    console.log(o.a); // logs 1

If the `configurable` attribute of `o.a` had been `true`, none of the errors would be thrown and the property would be deleted at the end.

### Adding properties and default values

It is important to consider the way default values of attributes are applied. There is often a difference between using dot notation to assign a value and using `Object.defineProperty()`, as shown in the example below.

    var o = {};

    o.a = 1;
    // is equivalent to:
    Object.defineProperty(o, 'a', {
      value: 1,
      writable: true,
      configurable: true,
      enumerable: true
    });

    // On the other hand,
    Object.defineProperty(o, 'a', { value: 1 });
    // is equivalent to:
    Object.defineProperty(o, 'a', {
      value: 1,
      writable: false,
      configurable: false,
      enumerable: false
    });

### Custom Setters and Getters

The example below shows how to implement a self-archiving object. When `temperature` property is set, the `archive` array gets a log entry.

    function Archiver() {
      var temperature = null;
      var archive = [];

      Object.defineProperty(this, 'temperature', {
        get() {
          console.log('get!');
          return temperature;
        },
        set(value) {
          temperature = value;
          archive.push({ val: temperature });
        }
      });

      this.getArchive = function() { return archive; };
    }

    var arc = new Archiver();
    arc.temperature; // 'get!'
    arc.temperature = 11;
    arc.temperature = 13;
    arc.getArchive(); // [{ val: 11 }, { val: 13 }]

In this example, a getter always returns the same value.

    var pattern = {
        get() {
            return 'I always return this string, ' +
                   'whatever you have assigned';
        },
        set() {
            this.myname = 'this is my name string';
        }
    };

    function TestDefineSetAndGet() {
        Object.defineProperty(this, 'myproperty', pattern);
    }

    var instance = new TestDefineSetAndGet();
    instance.myproperty = 'test';
    console.log(instance.myproperty);
    // I always return this string, whatever you have assigned

    console.log(instance.myname); // this is my name string

### Inheritance of properties

If an accessor property is inherited, its `get` and `set` methods will be called when the property is accessed and modified on descendant objects. If these methods use a variable to store the value, this value will be shared by all objects.

    function myclass() {
    }

    var value;
    Object.defineProperty(myclass.prototype, "x", {
      get() {
        return value;
      },
      set(x) {
        value = x;
      }
    });

    var a = new myclass();
    var b = new myclass();
    a.x = 1;
    console.log(b.x); // 1

This can be fixed by storing the value in another property. In `get` and `set` methods, `this` points to the object which is used to access or modify the property.

    function myclass() {
    }

    Object.defineProperty(myclass.prototype, "x", {
      get() {
        return this.stored_x;
      },
      set(x) {
        this.stored_x = x;
      }
    });

    var a = new myclass();
    var b = new myclass();
    a.x = 1;
    console.log(b.x); // undefined

Unlike accessor properties, value properties are always set on the object itself, not on a prototype. However, if a non-writable value property is inherited, it still prevents from modifying the property on the object.

    function myclass() {
    }

    myclass.prototype.x = 1;
    Object.defineProperty(myclass.prototype, "y", {
      writable: false,
      value: 1
    });

    var a = new myclass();
    a.x = 2;
    console.log(a.x); // 2
    console.log(myclass.prototype.x); // 1
    a.y = 2; // Ignored, throws in strict mode
    console.log(a.y); // 1
    console.log(myclass.prototype.y); // 1

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.defineproperty">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.defineproperty</span></a></td></tr></tbody></table>

`defineProperty`

5

12

4

9

8

In Internet Explorer 8, this was only supported on DOM objects and with some non-standard behaviors. This was later fixed in Internet Explorer 9.

11.6

5.1

Also supported in Safari 5, but not on DOM objects.

1

18

4

12

6

Also supported in Safari for iOS 4.2, but not on DOM objects.

1.0

### Redefining the `length` property of an `Array` object

It is possible to redefine the [`length`](../array/length) property of arrays, subject to the usual redefinition restrictions. (The [`length`](../array/length) property is initially non-configurable, non-enumerable, and writable. Thus on an unaltered array, it's possible to change the [`length`](../array/length) property's value or to make it non-writable. It is not allowed to change its enumerability or configurability, or if it is non-writable to change its value or writability.) However, not all browsers permit this redefinition.

Firefox 4 through 22 will throw a [`TypeError`](../typeerror) on any attempt whatsoever (whether permitted or not) to redefine the [`length`](../array/length) property of an array.

Versions of Chrome which implement `Object.defineProperty()` in some circumstances ignore a length value different from the array's current [`length`](../array/length) property. In some circumstances changing writability seems to silently not work (and not throw an exception). Also, relatedly, some array-mutating methods like [`Array.prototype.push`](../array/push) don't respect a non-writable length.

Versions of Safari which implement `Object.defineProperty()` ignore a `length` value different from the array's current [`length`](../array/length) property, and attempts to change writability execute without error but do not actually change the property's writability.

Only Internet Explorer 9 and later, and Firefox 23 and later, appear to fully and correctly implement redefinition of the [`length`](../array/length) property of arrays. For now, don't rely on redefining the [`length`](../array/length) property of an array to either work, or to work in a particular manner. And even when you _can_ rely on it, [there's really no good reason to do so](https://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/).

### Internet Explorer 8 specific notes

Internet Explorer 8 implemented a `Object.defineProperty()` method that could [only be used on DOM objects](https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx). A few things need to be noted:

-   Trying to use `Object.defineProperty()` on native objects throws an error.
-   Property attributes must be set to some values. The `configurable`, `enumerable` and `writable` attributes should all be set to `true` for data descriptor and `true` for `configurable`, `false` for `enumerable` for accessor descriptor.(?) Any attempt to provide other value(?) will result in an error being thrown.
-   Reconfiguring a property requires first deleting the property. If the property isn't deleted, it stays as it was before the reconfiguration attempt.

### Chrome 37 (and below) specific notes

Chrome 37 (and below) has a [bug](https://bugs.chromium.org/p/v8/issues/detail?id=3448) where an attempt to define a "prototype" property, on a function, with `writable: false` doesn't work as expected.

## See also

-   [Enumerability and ownership of properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
-   [`Object.defineProperties()`](defineproperties)
-   [`Object.propertyIsEnumerable()`](propertyisenumerable)
-   [`Object.getOwnPropertyDescriptor()`](getownpropertydescriptor)
-   <span class="page-not-created">`Object.prototype.watch()`</span>
-   <span class="page-not-created">`Object.prototype.unwatch()`</span>
-   [`get`](../../functions/get)
-   [`set`](../../functions/set)
-   [`Object.create()`](create)
-   [`Reflect.defineProperty()`](../reflect/defineproperty)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty</a>

# delete operator

The JavaScript `delete` removes a property from an object; if no more references to the same property are held, it is eventually released automatically.

## Syntax

    delete expression

Where `expression` should evaluate to a [property](https://developer.mozilla.org/en-US/docs/Glossary/property/JavaScript) reference, e.g.:

    delete object.property
    delete object['property']

### Parameters

`object`  
The name of an object, or an expression evaluating to an object.

`property`  
The property to delete.

### Return value

`true` for all cases except when the property is an [`own`](../global_objects/object/hasownproperty) [`non-configurable`](../errors/cant_delete) property, in which case, `false` is returned in non-strict mode.

### Exceptions

Throws [`TypeError`](../global_objects/typeerror) in [`strict mode`](../strict_mode) if the property is an own non-configurable property.

## Description

Unlike what common belief suggests (perhaps due to other programming languages like [delete in C++](https://docs.microsoft.com/en-us/cpp/cpp/delete-operator-cpp?view=vs-2019)), the `delete` operator has **nothing** to do with directly freeing memory. Memory management is done indirectly via breaking references. See the [memory management](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management) page for more details.

The `delete` operator removes a given property from an object. On successful deletion, it will return `true`, else `false` will be returned.

However, it is important to consider the following scenarios:

-   If the property which you are trying to delete does not exist, `delete` will not have any effect and will return `true`.
-   If a property with the same name exists on the object's prototype chain, then, after deletion, the object will use the property from the prototype chain (in other words, `delete` only has an effect on own properties).
-   Any property declared with [`var`](../statements/var) cannot be deleted from the global scope or from a function's scope.
    -   As such, `delete` cannot delete any functions in the global scope (whether this is part from a function definition or a function expression).
    -   Functions which are part of an object (apart from the global scope) can be deleted with `delete`.
-   Any property declared with [`let`](../statements/let) or [`const`](../statements/const) cannot be deleted from the scope within which they were defined.
-   Non-configurable properties cannot be removed. This includes properties of built-in objects like [`Math`](../global_objects/math), [`Array`](../global_objects/array), [`Object`](../global_objects/object) and properties that are created as non-configurable with methods like [`Object.defineProperty()`](../global_objects/object/defineproperty).

The following snippet gives a simple example:

    var Employee = {
      age: 28,
      name: 'abc',
      designation: 'developer'
    }

    console.log(delete Employee.name);   // returns true
    console.log(delete Employee.age);    // returns true

    // When trying to delete a property that does
    // not exist, true is returned
    console.log(delete Employee.salary); // returns true

### Non-configurable properties

When a property is marked as non-configurable, `delete` won't have any effect, and will return `false`. In strict mode this will raise a `TypeError`.

    var Employee = {};
    Object.defineProperty(Employee, 'name', {configurable: false});

    console.log(delete Employee.name);  // returns false

[`var`](../statements/var), [`let`](../statements/let), and [`const`](../statements/const) create non-configurable properties that cannot be deleted with the `delete` operator:

    var nameOther = 'XYZ';

    // We can access this global property using:
    Object.getOwnPropertyDescriptor(window, 'nameOther');

    // output: Object {value: "XYZ",
    //                  writable: true,
    //                  enumerable: true,
    //                  configurable: false}

    // Since "nameOther" is added using with the
    // var keyword, it is marked as "non-configurable"

    delete nameOther;   // return false

In strict mode, this would have raised an exception.

### Strict vs. non-strict mode

When in strict mode, if `delete` is used on a direct reference to a variable, a function argument or a function name, it will throw a [`SyntaxError`](../global_objects/syntaxerror)**.** Therefore, to avoid syntax errors in strict mode, you must use the `delete` operator in the form of `delete object.property` or `delete object['property']`.

    Object.defineProperty(globalThis, 'variable1', { value: 10, configurable: true, });
    Object.defineProperty(globalThis, 'variable2', { value: 10, configurable: false, });

    // SyntaxError in strict mode.
    console.log(delete variable1); // true

    // SyntaxError in strict mode.
    console.log(delete variable2); // false

    function func(param) {
      // SyntaxError in strict mode.
      console.log(delete param); // false
    }

    // SyntaxError in strict mode.
    console.log(delete func); // false

### Cross-browser notes

Although ECMAScript makes iteration order of objects implementation-dependent, it may appear that all major browsers support an iteration order based on the earliest added property coming first (at least for properties not on the prototype). However, in the case of Internet Explorer, when one uses `delete` on a property, some confusing behavior results, preventing other browsers from using simple objects like object literals as ordered associative arrays. In Explorer, while the property _value_ is indeed set to `undefined`, if one later adds back a property with the same name, the property will be iterated in its _old_ position--not at the end of the iteration sequence as one might expect after having deleted the property and then added it back.

If you want to use an ordered associative array in a cross-browser environment, use a [`Map`](../global_objects/map) object if available, or simulate this structure with two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.

## Examples

    // Creates the property adminName on the global scope.
    adminName = 'xyz';

    // Creates the property empCount on the global scope.
    // Since we are using var, this is marked as non-configurable. The same is true of let and const.
    var empCount = 43;

    EmployeeDetails = {
      name: 'xyz',
      age: 5,
      designation: 'Developer'
    };

    // adminName is a property of the global scope.
    // It can be deleted since it is created without var,
    // and is therefore configurable.
    delete adminName;       // returns true

    // On the contrary, empCount is not configurable
    // since var was used.
    delete empCount;       // returns false

    // delete can be used to remove properties from objects.
    delete EmployeeDetails.name; // returns true

    // Even when the property does not exist, delete returns "true".
    delete EmployeeDetails.salary; // returns true

    // delete does not affect built-in static properties.
    delete Math.PI; // returns false

    // EmployeeDetails is a property of the global scope.
    // Since it was defined without "var", it is marked configurable.
    delete EmployeeDetails;   // returns true

    function f() {
      var z = 44;

      // delete doesn't affect local variable names
      delete z;     // returns false
    }

### `delete` and the prototype chain

In the following example, we delete an own property of an object while a property with the same name is available on the prototype chain:

    function Foo() {
      this.bar = 10;
    }

    Foo.prototype.bar = 42;

    var foo = new Foo();

    // foo.bar is associated with the
    // own property.
    console.log(foo.bar); // 10

    // Delete the own property within the
    // foo object.
    delete foo.bar; // returns true

    // foo.bar is still available in the
    // prototype chain.
    console.log(foo.bar); // 42

    // Delete the property on the prototype.
    delete Foo.prototype.bar; // returns true

    // The "bar" property can no longer be
    // inherited from Foo since it has been
    // deleted.
    console.log(foo.bar); // undefined

### Deleting array elements

When you delete an array element, the array `length` is not affected. This holds even if you delete the last element of the array.

When the `delete` operator removes an array element, that element is no longer in the array. In the following example, `trees[3]` is removed with `delete`.

    var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
    delete trees[3];
    if (3 in trees) {
        // this is not executed
    }

If you want an array element to exist but have an undefined value, use the `undefined` value instead of the `delete` operator. In the following example, `trees[3]` is assigned the value `undefined`, but the array element still exists:

    var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
    trees[3] = undefined;
    if (3 in trees) {
        // this is executed
    }

If instead, you want to remove an array element by changing the contents of the array, use the [`splice()`](../global_objects/array/splice) method. In the following example, `trees[3]` is removed from the array completely using [`splice()`](../global_objects/array/splice):

    var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
    trees.splice(3,1);
    console.log(trees); // ["redwood", "bay", "cedar", "maple"]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-delete-operator">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-delete-operator</span></a></td></tr></tbody></table>

`delete`

1

12

1

4

9

1

1

18

4

10.1

1

1.0

## See also

-   [In depth analysis on delete](http://perfectionkills.com/understanding-delete/)
-   [`Reflect.deleteProperty()`](../global_objects/reflect/deleteproperty)
-   [`Map.prototype.delete()`](../global_objects/map/delete)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete</a>

# SyntaxError: applying the 'delete' operator to an unqualified name is deprecated

The JavaScript [strict mode](../strict_mode)-only exception "applying the 'delete' operator to an unqualified name is deprecated" occurs when variables are attempted to be deleted using the `delete` operator.

## Message

    SyntaxError: Calling delete on expression not allowed in strict mode (Edge)
    SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox)
    SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome)

## Error type

[`SyntaxError`](../global_objects/syntaxerror) in [strict mode](../strict_mode) only.

## What went wrong?

Normal variables in JavaScript can't be deleted using the `delete` operator. In strict mode, an attempt to delete a variable will throw an error and is not allowed.

The `delete` operator can only delete properties on an object. Object properties are "qualified" if they are configurable.

Unlike what common belief suggests, the `delete` operator has **nothing** to do with directly freeing memory. Memory management is done indirectly via breaking references, see the [memory management](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management) page and the `delete` operator page for more details.

This error only happens in [strict mode code](../strict_mode). In non-strict code, the operation just returns `false`.

## Examples

### Freeing the contents of a variable

Attempting to delete a plain variable, doesn't work in JavaScript and it throws an error in strict mode:

    'use strict';

    var x;

    // ...

    delete x;

    // SyntaxError: applying the 'delete' operator to an unqualified name
    // is deprecated

To free the contents of a variable, you can set it to [`null`](../global_objects/null):

    'use strict';

    var x;

    // ...

    x = null;

    // x can be garbage collected

## See also

-   `delete`
-   [Memory management](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management)
-   [TypeError: property "x" is non-configurable and can't be deleted](cant_delete)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Delete_in_strict_mode" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Delete_in_strict_mode</a>

# handler.deleteProperty()

The `handler.deleteProperty()` method is a trap for the [`delete`](../../../operators/delete) operator.

## Syntax

    const p = new Proxy(target, {
      deleteProperty: function(target, property) {
      }
    });

### Parameters

The following parameters are passed to the `deleteProperty()` method. `this` is bound to the handler.

`target`  
The target object.

`property`  
The name or [`Symbol`](../../symbol) of the property to delete.

### Return value

The `deleteProperty()` method must return a [`Boolean`](../../boolean) indicating whether or not the property has been successfully deleted.

## Description

The `handler.deleteProperty()` method is a trap for the [`delete`](../../../operators/delete) operator.

### Interceptions

This trap can intercept these operations:

-   Property deletion: `delete proxy[foo]` and `delete proxy.foo`
-   [`Reflect.deleteProperty()`](../../reflect/deleteproperty)

### Invariants

If the following invariants are violated, the proxy will throw a [`TypeError`](../../typeerror):

-   A property cannot be deleted, if it exists as a non-configurable own property of the target object.

## Examples

### Trapping the delete operator

The following code traps the [`delete`](../../../operators/delete) operator.

    const p = new Proxy({}, {
      deleteProperty: function(target, prop) {
        if (prop in target){
          delete target[prop]
          console.log('property removed: ' + prop)
          return true
        }
        else {
          console.log('property not found: ' + prop)
          return false
        }
      }
    })

    let result

    p.a = 10
    console.log('a' in p)  // true

    result = delete p.a    // "property removed: a"
    console.log(result)    // true
    console.log('a' in p)  // false

    result = delete p.a    // "property not found: a"
    console.log(result)    // false

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots-delete-p">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-proxy-object-internal-methods-and-internal-slots-delete-p</span></a></td></tr></tbody></table>

`deleteProperty`

49

12

18

No

36

10

49

49

18

36

10

5.0

## See also

-   [`Proxy`](../../proxy)
-   [`handler`](../proxy)
-   [`delete`](../../../operators/delete) operator
-   [`Reflect.deleteProperty()`](../../reflect/deleteproperty)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty</a>

# ReferenceError: deprecated caller or arguments usage

The JavaScript [strict mode](../strict_mode)-only exception "deprecated caller or arguments usage" occurs when the deprecated [`Function.caller`](../global_objects/function/caller) or [`Function.arguments`](../global_objects/function/arguments) properties are used.

## Message

    TypeError: 'arguments', 'callee' and 'caller' are restricted function properties and cannot be accessed in this context (Edge)
    Warning: ReferenceError: deprecated caller usage (Firefox)
    Warning: ReferenceError: deprecated arguments usage (Firefox)
    TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari)

## Error type

A strict-mode-only warning that a [`ReferenceError`](../global_objects/referenceerror) occurred. JavaScript execution won't be halted.

## What went wrong?

In [strict mode](../strict_mode), the [`Function.caller`](../global_objects/function/caller) or [`Function.arguments`](../global_objects/function/arguments) properties are used and shouldn't be. They are deprecated, because they leak the function caller, are non-standard, hard to optimize and potentially a performance-harmful feature.

## Examples

### Deprecated `function.caller` or `arguments.callee.caller`

[`Function.caller`](../global_objects/function/caller) and `arguments.callee.caller` are deprecated (see the reference articles for more information).

    'use strict';

    function myFunc() {
      if (myFunc.caller == null) {
        return 'The function was called from the top!';
      } else {
        return 'This function\'s caller was ' + myFunc.caller;
      }
    }

    myFunc();
    // Warning: ReferenceError: deprecated caller usage
    // "The function was called from the top!"

### `Function.arguments`

[`Function.arguments`](../global_objects/function/arguments) is deprecated (see the reference article for more information).

    'use strict';

    function f(n) { g(n - 1); }

    function g(n) {
      console.log('before: ' + g.arguments[0]);
      if (n > 0) { f(n); }
      console.log('after: ' + g.arguments[0]);
    }

    f(2);

    console.log('returned: ' + g.arguments);
    // Warning: ReferenceError: deprecated arguments usage

## See also

-   [Deprecated and obsolete features](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features)
-   [Strict mode](../strict_mode)
-   [`Function.arguments`](../global_objects/function/arguments)
-   [`Function.caller`](../global_objects/function/caller) and `arguments.callee.caller`

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage</a>

# Warning: expression closures are deprecated

The JavaScript warning "expression closures are deprecated" occurs when the non-standard [expression closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Expression_closures) syntax (shorthand function syntax) is used.

## Message

    Warning: expression closures are deprecated

## Error type

Warning. JavaScript execution won't be halted.

## What went wrong?

The non-standard [expression closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Expression_closures) syntax (shorthand function syntax) is deprecated and shouldn't be used anymore. This syntax will be removed entirely in [bug 1083458](https://bugzilla.mozilla.org/show_bug.cgi?id=1083458) and scripts using it will throw a [`SyntaxError`](../global_objects/syntaxerror) then.

## Examples

### Deprecated syntax

Expression closures omit curly braces or return statements from function declarations or from method definitions in objects.

    var x = function() 1;

    var obj = {
      count: function() 1
    };

### Standard syntax

To convert the non-standard expression closures syntax to standard ECMAScript syntax, you can add curly braces and return statements.

    var x = function() { return 1; }

    var obj = {
      count: function() { return 1; }
    };

### Standard syntax using arrow functions

Alternatively, you can use [arrow functions](../functions/arrow_functions):

    var x = () => 1;

### Standard syntax using shorthand method syntax

Expression closures can also be found with getter and setter, like this:

    var obj = {
      get x() 1,
      set x(v) this.v = v
    };

With ES2015 [method definitions](../functions/method_definitions), this can be converted to:

    var obj = {
      get x() { return 1 },
      set x(v) { this.v = v }
    };

## See also

-   [Expression closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Expression_closures)
-   [Arrow functions](../functions/arrow_functions)
-   [Method definitions](../functions/method_definitions)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_expression_closures" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_expression_closures</a>

# SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated

The JavaScript [strict mode](../strict_mode)-only exception "0-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead" occurs when deprecated octal literals and octal escape sequences are used.

## Message

    SyntaxError: Octal numeric literals and escape characters not allowed in strict mode (Edge)
    SyntaxError:
    "0"-prefixed octal literals and octal escape sequences are deprecated;
    for octal literals use the "0o" prefix instead

## Error type

[`SyntaxError`](../global_objects/syntaxerror) in [strict mode](../strict_mode) only.

## What went wrong?

Octal literals and octal escape sequences are deprecated and will throw a [`SyntaxError`](../global_objects/syntaxerror) in strict mode. With ECMAScript 2015 and later, the standardized syntax uses a leading zero followed by a lowercase or uppercase Latin letter "O" (`0o` or `0O)`.

## Examples

### "0"-prefixed octal literals

    "use strict";

    03;

    // SyntaxError: "0"-prefixed octal literals and octal escape sequences
    // are deprecated

### Octal escape sequences

    "use strict";

    "\251";

    // SyntaxError: "0"-prefixed octal literals and octal escape sequences
    // are deprecated

### Valid octal numbers

Use a leading zero followed by the letter "o" or "O":

    0o3;

For octal escape sequences, you can use hexadecimal escape sequences instead:

    '\xA9';

## See also

-   [Lexical grammar](../lexical_grammar#octal)
-   [Warning: 08/09 is not a legal ECMA-262 octal constant](bad_octal)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal</a>

# SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //\# instead

The JavaScript warning "Using `//@` to indicate sourceURL pragmas is deprecated. Use `//#` instead" occurs when there is a deprecated source map syntax in a JavaScript source.

## Message

    Warning: SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead

    Warning: SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead

## Error type

A warning that a [`SyntaxError`](../global_objects/syntaxerror) occurred. JavaScript execution won't be halted.

## What went wrong?

There is a deprecated source map syntax in a JavaScript source.

JavaScript sources are often combined and minified to make delivering them from the server more efficient. With [source maps](https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/), the debugger can map the code being executed to the original source files.

The source map specification changed the syntax due to a conflict with IE whenever it was found in the page after `//@cc_on` was interpreted to turn on conditional compilation in the IE JScript engine. The [conditional compilation comment](https://msdn.microsoft.com/en-us/library/8ka90k2e%28v=vs.94%29.aspx) in IE is a little known feature, but it broke source maps with [jQuery](https://bugs.jquery.com/ticket/13274) and other libraries.

## Examples

### Deprecated syntax

Syntax with the "@" sign is deprecated.

    //@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map

### Standard syntax

Use the "\#" sign instead.

    //# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

Or, alternatively, you can set a [`SourceMap`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap) header to your JavaScript file to avoid having a comment at all:

    SourceMap: /path/to/file.js.map

## See also

-   [How to use a source map – Firefox Tools documentation](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map)
-   [Introduction to source maps – HTML5 rocks](https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/)
-   [`SourceMap`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma</a>

# Warning: String.x is deprecated; use String.prototype.x instead

The JavaScript warning about string generics occurs in Firefox versions prior to 68. String generics have been removed starting with Firefox 68.

## Message

    Warning: String.charAt            is deprecated; use String.prototype.charAt            instead
    Warning: String.charCodeAt        is deprecated; use String.prototype.charCodeAt        instead
    Warning: String.concat            is deprecated; use String.prototype.concat            instead
    Warning: String.contains          is deprecated; use String.prototype.contains          instead
    Warning: String.endsWith          is deprecated; use String.prototype.endsWith          instead
    Warning: String.includes          is deprecated; use String.prototype.includes          instead
    Warning: String.indexOf           is deprecated; use String.prototype.indexOf           instead
    Warning: String.lastIndexOf       is deprecated; use String.prototype.lastIndexOf       instead
    Warning: String.localeCompare     is deprecated; use String.prototype.localeCompare     instead
    Warning: String.match             is deprecated; use String.prototype.match             instead
    Warning: String.normalize         is deprecated; use String.prototype.normalize         instead
    Warning: String.replace           is deprecated; use String.prototype.replace           instead
    Warning: String.search            is deprecated; use String.prototype.search            instead
    Warning: String.slice             is deprecated; use String.prototype.slice             instead
    Warning: String.split             is deprecated; use String.prototype.split             instead
    Warning: String.startsWith        is deprecated; use String.prototype.startsWith        instead
    Warning: String.substr            is deprecated; use String.prototype.substr            instead
    Warning: String.substring         is deprecated; use String.prototype.substring         instead
    Warning: String.toLocaleLowerCase is deprecated; use String.prototype.toLocaleLowerCase instead
    Warning: String.toLocaleUpperCase is deprecated; use String.prototype.toLocaleUpperCase instead
    Warning: String.toLowerCase       is deprecated; use String.prototype.toLowerCase       instead
    Warning: String.toUpperCase       is deprecated; use String.prototype.toUpperCase       instead
    Warning: String.trim              is deprecated; use String.prototype.trim              instead
    Warning: String.trimLeft          is deprecated; use String.prototype.trimLeft          instead
    Warning: String.trimRight         is deprecated; use String.prototype.trimRight         instead

## Error type

Warning. JavaScript execution won't be halted.

## What went wrong?

The non-standard generic [`String`](../global_objects/string) methods are deprecated and have been removed in Firefox 68 and later. String generics provide `String` instance methods on the `String` object allowing `String` methods to be applied to any object.

## Examples

### Deprecated syntax

    var num = 15;
    String.replace(num, /5/, '2');

### Standard syntax

    var num = 15;
    String(num).replace(/5/, '2');

## Shim

The following is a shim to provide support to non-supporting browsers:

    /*globals define*/
    // Assumes all supplied String instance methods already present
    // (one may use shims for these if not available)
    (function() {
      'use strict';

      var i,
        // We could also build the array of methods with the following, but the
        //   getOwnPropertyNames() method is non-shimable:
        // Object.getOwnPropertyNames(String).filter(function(methodName) {
        //   return typeof String[methodName] === 'function';
        // });
        methods = [
          'contains', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
          'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
          'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', 'normalize',
          'toLocaleUpperCase', 'localeCompare', 'match', 'search', 'slice',
          'replace', 'split', 'substr', 'concat', 'localeCompare'
        ],
        methodCount = methods.length,
        assignStringGeneric = function(methodName) {
          var method = String.prototype[methodName];
          String[methodName] = function(arg1) {
            return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
          };
        };

      for (i = 0; i < methodCount; i++) {
        assignStringGeneric(methods[i]);
      }
    }());

## See also

-   [`String`](../global_objects/string)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_String_generics" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_String_generics</a>

# Warning: Date.prototype.toLocaleFormat is deprecated

The JavaScript warning "Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead" occurs when the non-standard <span class="page-not-created">`Date.prototype.toLocaleFormat`</span> method is used.

## Message

    Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead

## Error type

Warning. JavaScript execution won't be halted.

## What went wrong?

The non-standard <span class="page-not-created">`Date.prototype.toLocaleFormat`</span> method is deprecated and shouldn't be used anymore. It uses a format string in the same format expected by the `strftime()` function in C. **The function is no longer available in Firefox 58+**.

## Examples

### Deprecated syntax

The <span class="page-not-created">`Date.prototype.toLocaleFormat`</span> method is deprecated and will be removed (no cross-browser support, available in Firefox only).

    var today = new Date();
    var date = today.toLocaleFormat('%A, %e. %B %Y');

    console.log(date);
    // In German locale
    // "Freitag, 10. März 2017"

### Alternative standard syntax using the ECMAScript Intl API

The ECMA-402 (ECMAScript Intl API) standard specifies standard objects and methods that enable language sensitive date and time formatting (available in Chrome 24+, Firefox 29+, IE11+, Safari10+).

You can now either use the [`Date.prototype.toLocaleDateString`](../global_objects/date/tolocaledatestring) method if you just want to format one date.

    var today = new Date();
    var options = { weekday: 'long', year: 'numeric',
                    month: 'long', day: 'numeric' };
    var date = today.toLocaleDateString('de-DE', options);

    console.log(date);
    // "Freitag, 10. März 2017"

Or, you can make use of the [`Intl.DateTimeFormat`](../global_objects/intl/datetimeformat) object, which allows you to cache an object with most of the computations done so that formatting is fast. This is useful if you have a loop of dates to format.

    var options = { weekday: 'long', year: 'numeric',
                    month: 'long', day: 'numeric' };
    var dateFormatter = new Intl.DateTimeFormat('de-DE', options)

    var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
                 Date.UTC(2014, 04, 12, 8, 0, 0)];

    dates.forEach(date => console.log(dateFormatter.format(date)));

    // "Donnerstag, 20. Dezember 2012"
    // "Montag, 12. Mai 2014"

### Alternative standard syntax using Date methods

The [`Date`](../global_objects/date) object offers several methods to build a custom date string.

    (new Date()).toLocaleFormat("%Y%m%d");
    // "20170310"

Can be converted to:

    let now = new Date();
    let date = now.getFullYear() * 10000 +
              (now.getMonth() + 1) * 100 + now.getDate();

    console.log(date);
    // "20170310"

## See also

-   <span class="page-not-created">`Date.prototype.toLocaleFormat`</span>
-   [`Date.prototype.toLocaleDateString`](../global_objects/date/tolocaledatestring)
-   [`Intl.DateTimeFormat`](../global_objects/intl/datetimeformat)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat</a>

# Symbol.prototype.description

The read-only `description` property is a string returning the optional description of [`Symbol`](../symbol) objects.

## Description

[`Symbol`](../symbol) objects can be created with an optional description which can be used for debugging but not to access the symbol itself. The `Symbol.prototype.description` property can be used to read that description. It is different to `Symbol.prototype.toString()` as it does not contain the enclosing "`Symbol()`" string. See the examples.

## Examples

### Using description

    Symbol('desc').toString();   // "Symbol(desc)"
    Symbol('desc').description;  // "desc"
    Symbol('').description;      // ""
    Symbol().description;        // undefined

    // well-known symbols
    Symbol.iterator.toString();  // "Symbol(Symbol.iterator)"
    Symbol.iterator.description; // "Symbol.iterator"

    // global symbols
    Symbol.for('foo').toString();  // "Symbol(foo)"
    Symbol.for('foo').description; // "foo"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-symbol.prototype.description">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-symbol.prototype.description</span></a></td></tr></tbody></table>

`description`

70

79

63

No

57

12.1

12

No support for an undefined description.

70

70

63

49

12.2

12

No support for an undefined description.

10.0

## See also

-   [`Symbol.prototype.toString()`](tostring)
-   Polyfill: <https://npmjs.com/symbol.prototype.description>

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/description" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/description</a>

# Destructuring assignment

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

## Syntax

    let 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 4(finished) 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.

    const 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.

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

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

    const [firstElement, secondElement] = list;
    // is equivalent to:
    // const firstElement = list[0];
    // const secondElement = list[1];

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

## Examples

### Array destructuring

#### Basic variable assignment

    const foo = ['one', 'two', 'three'];

    const [red, yellow, green] = foo;
    console.log(red); // "one"
    console.log(yellow); // "two"
    console.log(green); // "three"

#### Assignment separate from declaration

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

    let 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 `undefined`.

    let 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](https://en.wikipedia.org/wiki/XOR_swap_algorithm)).

    let a = 1;
    let b = 3;

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

    const arr = [1,2,3];
    [arr[2], arr[1]] = [arr[1], arr[2]];
    console.log(arr); // [1,3,2]

#### Parsing an array returned from a function

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

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

    function f() {
      return [1, 2];
    }

    let 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];
    }

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

    const [c] = f();
    console.log(c); // 1

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:

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

Be aware that a [`SyntaxError`](../global_objects/syntaxerror) will be thrown if a trailing comma is used on the right-hand side of a rest element:

    const [a, ...b,] = [1, 2, 3];

    // SyntaxError: rest element may not have a trailing comma
    // Always consider using rest operator as the last element

#### Unpacking values from a regular expression match

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

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

      const [, protocol, fullhost, fullpath] = parsedURL;
      return protocol;
    }

    console.log(parseProtocol('https://developer.mozilla.org/en-US/docs/Web/JavaScript'));
    // "https"

### Object destructuring

#### Basic assignment

    const user = {
        id: 42,
        is_verified: true
    };

    const {id, is_verified} = user;

    console.log(id); // 42
    console.log(is_verified); // true

#### Assignment without declaration

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

    let a, b;

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

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

`{a, b} = {a: 1, b: 2}` is not valid stand-alone syntax, as the `{a, b}` on the left-hand side is considered a block and not an object literal.

However, `({a, b} = {a: 1, b: 2})` is valid, as is `const {a, b} = {a: 1, b: 2}`

Your `( ... )` expression needs to be preceded by a semicolon or it may be used to execute a function on the previous line.

#### 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.

    const o = {p: 42, q: true};
    const {p: foo, q: bar} = o;

    console.log(foo); // 42
    console.log(bar); // true

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

#### Default values

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

    const {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

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

<!-- -->

    const {a: aa = 10, b: bb = 5} = {a: 3};

    console.log(aa); // 3
    console.log(bb); // 5

#### Unpacking fields from objects passed as a function parameter

    const user = {
      id: 42,
      displayName: 'jdoe',
      fullName: {
        firstName: 'John',
        lastName: 'Doe'
      }
    };

    function userId({id}) {
      return id;
    }

    function whois({displayName, fullName: {firstName: name}}) {
      return `${displayName} is ${name}`;
    }

    console.log(userId(user)); // 42
    console.log(whois(user));  // "jdoe is John"

This unpacks the `id`, `displayName` and `firstName` from the user object and prints them.

#### Setting a function parameter's default value

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

    drawChart({
      coords: {x: 18, y: 30},
      radius: 30
    });

**Note:** In the function signature for `drawChart` above, the destructured left-hand side is assigned to an empty object literal on the right-hand side: `{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}`. 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 call `drawChart()` 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

    const 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'
    };

    let {
      title: englishTitle, // rename
      translations: [
        {
           title: localeTitle, // rename
        },
      ],
    } = metadata;

    console.log(englishTitle); // "Scratchpad"
    console.log(localeTitle);  // "JavaScript-Umgebung"

#### For of iteration and destructuring

    const 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 (const {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"

#### Computed object property names and destructuring

Computed property names, like on [object literals](object_initializer#computed_property_names), 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](https://github.com/tc39/proposal-object-rest-spread) proposal (stage 4) adds the [rest](../functions/rest_parameters) 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](https://developer.mozilla.org/en-US/docs/Glossary/Identifier) by providing an alternative identifier that is valid.

    const foo = { 'fizz-buzz': true };
    const { 'fizz-buzz': fizzBuzz } = foo;

    console.log(fizzBuzz); // "true"

#### Combined Array and Object Destructuring

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

    const props = [
      { id: 1, name: 'Fizz'},
      { id: 2, name: 'Buzz'},
      { id: 3, name: 'FizzBuzz'}
    ];

    const [,, { name }] = props;

    console.log(name); // "FizzBuzz"

#### The prototype chain is looked up when the object is deconstructed

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

    let obj = {self: '123'};
    obj.__proto__.prot = '456';
    const {self, prot} = obj;
    // self "123"
    // prot "456" (Access to the prototype chain)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-destructuring-assignment">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-destructuring-assignment</span></a></td></tr></tbody></table>

`Destructuring_assignment`

49

14

41

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

No

36

8

49

49

41

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

36

8

5.0

`computed_property_names`

49

14

41

No

36

10

49

49

41

36

10

5.0

`rest_in_arrays`

49

16

14

41

No

36

9.1

49

49

41

36

9.3

5.0

`rest_in_objects`

60

79

55

No

47

11.1

60

60

55

44

11.3

8.0

## See also

-   [Assignment operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Assignment_operators)
-   ["ES6 in Depth: Destructuring" on hacks.mozilla.org](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment</a>

# Function.displayName

**Non-standard**

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The `function.displayName` property returns the display name of the function.

## Examples

### Setting a displayName

It is usually preferred by consoles and profilers over [`func.name`](name) to display the name of a function.

By entering the following in a console, it should display as something like "`function My Function()`":

    var a = function() {};
    a.displayName = 'My Function';

    a; // "function My Function()"

When defined, the `displayName` property returns the display name of a function:

    function doSomething() {}

    console.log(doSomething.displayName); // "undefined"

    var popup = function(content) { console.log(content); };

    popup.displayName = 'Show Popup';

    console.log(popup.displayName); // "Show Popup"

### Defining a displayName in function expressions

You can define a function with a display name in a [function expression](../../functions):

    var object = {
      someMethod: function() {}
    };

    object.someMethod.displayName = 'someMethod';

    console.log(object.someMethod.displayName); // logs "someMethod"

    try { someMethod } catch(e) { console.log(e); }
    // ReferenceError: someMethod is not defined

### Changing displayName dynamically

You can dynamically change the `displayName` of a function:

    var object = {
      // anonymous
      someMethod: function(value) {
        arguments.callee.displayName = 'someMethod (' + value + ')';
      }
    };

    console.log(object.someMethod.displayName); // "undefined"

    object.someMethod('123')
    console.log(object.someMethod.displayName); // "someMethod (123)"

## Specifications

<span class="pl-s">Not part of any standard.</span>

`displayName`

No

No

13

No

No

No

No

No

14

No

No

No

## See also

-   [`Function.name`](name)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName</a>

# Intl.DisplayNames

The `Intl.DisplayNames` object enables the consistent translation of language, region and script display names.

## Constructor

[`Intl.DisplayNames()`](displaynames/displaynames)  
Creates a new `Intl.DisplayNames` object.

## Static methods

[`Intl.DisplayNames.supportedLocalesOf()`](displaynames/supportedlocalesof)  
Returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale.

## Instance methods

[`Intl.DisplayNames.prototype.of()`](displaynames/of)  
This method receives a `code` and returns a string based on the locale and options provided when instantiating `Intl.DisplayNames`.

[`Intl.DisplayNames.prototype.resolvedOptions()`](displaynames/resolvedoptions)  
Returns a new object with properties reflecting the locale and formatting options computed during initialization of the object.

## Examples

### Region Code Display Names

To create an `Intl.DisplayNames` for a locale and get the display name for a region code.

    // Get display names of region in English
    let regionNames = new Intl.DisplayNames(['en'], {type: 'region'});
    regionNames.of('419'); // "Latin America"
    regionNames.of('BZ');  // "Belize"
    regionNames.of('US');  // "United States"
    regionNames.of('BA');  // "Bosnia & Herzegovina"
    regionNames.of('MM');  // "Myanmar (Burma)"

    // Get display names of region in Traditional Chinese
    regionNames = new Intl.DisplayNames(['zh-Hant'], {type: 'region'});
    regionNames.of('419'; // "拉丁美洲"
    regionNames.of('BZ'); // "貝里斯"
    regionNames.of('US'); // "美國"
    regionNames.of('BA'); // "波士尼亞與赫塞哥維納"
    regionNames.of('MM'); // "緬甸"

### Language Display Names

To create an `Intl.DisplayNames` for a locale and get the display name for a language-script-region sequence.

    // Get display names of language in English
    let languageNames = new Intl.DisplayNames(['en'], {type: 'language'});
    languageNames.of('fr');      // "French"
    languageNames.of('de');      // "German"
    languageNames.of('fr-CA');   // "Canadian French"
    languageNames.of('zh-Hant'); // "Traditional Chinese"
    languageNames.of('en-US');   // "American English"
    languageNames.of('zh-TW');   // "Chinese (Taiwan)"]

    // Get display names of language in Traditional Chinese
    languageNames = new Intl.DisplayNames(['zh-Hant'], {type: 'language'});
    languageNames.of('fr'); // "法文"
    languageNames.of('zh'); // "中文"
    languageNames.of('de'); // "德文"

### Script Code Display Names

To create an `Intl.DisplayNames` for a locale and get the display name for a script code.

    // Get display names of script in English
    let scriptNames = new Intl.DisplayNames(['en'], {type: 'script'});
    // Get script names
    scriptNames.of('Latn'); // "Latin"
    scriptNames.of('Arab'); // "Arabic"
    scriptNames.of('Kana'); // "Katakana"

    // Get display names of script in Traditional Chinese
    scriptNames = new Intl.DisplayNames(['zh-Hant'], {type: 'script'});
    scriptNames.of('Latn'); // "拉丁文"
    scriptNames.of('Arab'); // "阿拉伯文"
    scriptNames.of('Kana'); // "片假名"

### Currency Code Display Names

To create an `Intl.DisplayNames` for a locale and get the display name for currency code.

    // Get display names of currency code in English
    let currencyNames = new Intl.DisplayNames(['en'], {type: 'currency'});
    // Get currency names
    currencyNames.of('USD'); // "US Dollar"
    currencyNames.of('EUR'); // "Euro"
    currencyNames.of('TWD'); // "New Taiwan Dollar"
    currencyNames.of('CNY'); // "Chinese Yuan"

    // Get display names of currency code in Traditional Chinese
    currencyNames = new Intl.DisplayNames(['zh-Hant'], {type: 'currency'});
    currencyNames.of('USD'); // "美元"
    currencyNames.of('EUR'); // "歐元"
    currencyNames.of('TWD'); // "新台幣"
    currencyNames.of('CNY'); // "人民幣"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#intl-displaynames-objects">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#intl-displaynames-objects</span></a></td></tr></tbody></table>

`DisplayNames`

81

81

86

No

68

14.1

81

81

86

58

14.5

No

`DisplayNames`

81

81

86

No

68

14.1

81

81

86

58

14.5

No

`of`

81

81

86

No

68

14.1

81

81

86

58

14.5

No

`resolvedOptions`

81

81

86

No

68

14.1

81

81

86

58

14.5

No

`supportedLocalesOf`

81

81

86

No

68

14.1

81

81

86

58

14.5

No

## See also

-   [`Intl`](../intl)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames</a>

# Division (/)

The division operator (`/`) produces the quotient of its operands where the left operand is the dividend and the right operand is the divisor.

## Syntax

    Operator: x / y

## Examples

### Basic division

    1 / 2              // 0.5

    Math.floor(3 / 2) // 1

    1.0 / 2.0         // 0.5

### Division by zero

    2.0 / 0     // Infinity

    2.0 / 0.0   // Infinity, because 0.0 === 0

    2.0 / -0.0  // -Infinity

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-multiplicative-operators">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Division operator' in that specification.</span></a></td></tr></tbody></table>

`Division`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Addition operator](addition)
-   [Subtraction operator](subtraction)
-   [Multiplication operator](multiplication)
-   [Remainder operator](remainder)
-   [Exponentiation operator](exponentiation)
-   [Increment operator](increment)
-   [Decrement operator](decrement)
-   [Unary negation operator](unary_negation)
-   [Unary plus operator](unary_plus)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division</a>

# do...while

The `do...while` creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.

## Syntax

    do
       statement
    while (condition);

`statement`  
A statement that is executed at least once and is re-executed each time the condition evaluates to true. To execute multiple statements within the loop, use a [block](block) statement (`{ ... }`) to group those statements.

`condition`  
An expression evaluated after each pass through the loop. If `condition` evaluates to true, the `statement` is re-executed. When `condition` evaluates to false, control passes to the statement following the `do...while`.

## Examples

### Using `do...while`

In the following example, the `do...while` loop iterates at least once and reiterates until `i` is no longer less than 5.

    var result = '';
    var i = 0;
    do {
       i += 1;
       result += i + ' ';
    }
    while (i > 0 && i < 5);
    // Despite i == 0 this will still loop as it starts off without the test

    console.log(result);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-do-while-statement">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-do-while-statement</span></a></td></tr></tbody></table>

`do...while`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`while`](while)
-   [`for`](for)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while</a>

# RegExp.prototype.dotAll

The `dotAll` property indicates whether or not the "`s`" flag is used with the regular expression. `dotAll` is a read-only property of an individual regular expression instance.

Property attributes of `RegExp.prototype.dotAll`

Writable

no

Enumerable

no

Configurable

yes

## Description

The value of `dotAll` is a [`Boolean`](../boolean) and `true` if the "`s`" flag was used; otherwise, `false`. The "`s`" flag indicates that the dot special character ("`.`") should additionally match the following line terminator ("newline") characters in a string, which it would not match otherwise:

-   U+000A LINE FEED (LF) ("`\n`")
-   U+000D CARRIAGE RETURN (CR) ("`\r`")
-   U+2028 LINE SEPARATOR
-   U+2029 PARAGRAPH SEPARATOR

This effectively means the dot will match any character on the Unicode Basic Multilingual Plane (BMP). To allow it to match astral characters, the "`u`" (unicode) flag should be used. Using both flags in conjunction allows the dot to match any Unicode character, without exceptions.

You cannot change this property directly.

## Examples

### Using `dotAll`

    var str1 = 'bar\nexample foo example';

    var regex1 = new RegExp('bar.example','s');

    console.log(regex1.dotAll); // Output: true

    console.log(str1.replace(regex1,'')); // Output: foo example

    var str2 = 'bar\nexample foo example';

    var regex2 = new RegExp('bar.example');

    console.log(regex2.dotAll); // Output: false

    console.log(str2.replace(regex2,'')); // Output: bar
                                          //         example foo example

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-get-regexp.prototype.dotAll">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-get-regexp.prototype.dotAll</span></a></td></tr></tbody></table>

`dotAll`

62

79

78

No

49

12

62

62

79

46

12

8.0

## See also

-   [`RegExp.lastIndex`](lastindex)
-   [`RegExp.prototype.global`](global)
-   [`RegExp.prototype.hasIndices`](hasindices)
-   [`RegExp.prototype.ignoreCase`](ignorecase)
-   [`RegExp.prototype.multiline`](multiline)
-   [`RegExp.prototype.source`](source)
-   [`RegExp.prototype.sticky`](sticky)
-   [`RegExp.prototype.unicode`](unicode)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll</a>

# Math.E

The `Math.E` property represents Euler's number, the base of natural logarithms, e, which is approximately 2.718.

` M``a``t``h``.``E ` = *e* ≈ 2.718

Property attributes of `Math.E`

Writable

no

Enumerable

no

Configurable

no

## Description

Because `E` is a static property of `Math`, you always use it as `Math.E`, rather than as a property of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.E

The following function returns e:

    function getNapier() {
      return Math.E;
    }

    getNapier(); // 2.718281828459045

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.e">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.e</span></a></td></tr></tbody></table>

`E`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.exp()`](exp)
-   [`Math.log()`](log)
-   [`Math.log1p()`](log1p)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/E" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/E</a>

# empty

An **empty statement** is used to provide no statement, although the JavaScript syntax would expect one.

## Syntax

    ;

## Description

The empty statement is a semicolon (`;`) indicating that no statement will be executed, even if JavaScript syntax requires one.

The opposite behavior, where you want multiple statements, but JavaScript only allows a single one, is possible using a [block statement](block), which combines several statements into a single one.

## Examples

### Empty loop body

The empty statement is sometimes used with loop statements. See the following example with an empty loop body:

    let arr = [1, 2, 3];

    // Assign all array values to 0
    for (let i = 0; i < arr.length; arr[i++] = 0) /* empty statement */ ;

    console.log(arr);
    // [0, 0, 0]

### Unintentional usage

It is a good idea to comment _intentional_ use of the empty statement, as it is not really obvious to distinguish from a normal semicolon.

In the following example, the usage is probably not intentional:

    if (condition);       // Caution, this "if" does nothing!
       killTheUniverse()  // So this always gets executed!!!

In the next example, an [`if...else`](if...else) statement without curly braces (`{}`) is used.

If `three` is `true`, nothing will happen, `four` does not matter, and also the `launchRocket()` function in the `else` case will not be executed.

    if (one)
      doOne();
    else if (two)
      doTwo();
    else if (three)
      ; // nothing here
    else if (four)
      doFour();
    else
      launchRocket();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-empty-statement">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-empty-statement</span></a></td></tr></tbody></table>

`Empty`

3

12

1

3

3

5

1

18

4

10.1

4.2

1.0

## See also

-   [`Block statement`](block)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/Empty" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/Empty</a>

# encodeURI()

The `encodeURI()` function encodes a [URI](https://developer.mozilla.org/en-US/docs/Glossary/URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the [UTF-8](https://developer.mozilla.org/en-US/docs/Glossary/UTF-8) encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

## Syntax

    encodeURI(URI)

### Parameters

`URI`  
A complete URI.

### Return value

A new string representing the provided string encoded as a URI.

## Description

The `encodeURI()` function does not encode characters that have special meaning (reserved characters) for a URI. The following example shows all the parts that a URI "scheme" can possibly contain. Note how certain characters are used to signify special meaning:

    http://username:password@www.example.com:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

Hence `encodeURI()` **does not** encode characters that are necessary to formulate a complete URI. Also, `encodeURI()` **does not** encode a few additional characters, known as "unreserved marks", which do not have a reserved purpose but are allowed in a URI "as is". (See [RFC2396)](https://www.ietf.org/rfc/rfc2396.txt)

`encodeURI()` escapes all characters **except**:

    Not Escaped:

        A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

## Examples

### encodeURI vs encodeURIComponent

`encodeURI()` differs from [`encodeURIComponent()`](encodeuricomponent) as follows:

    var set1 = ";,/?:@&=+$#"; // Reserved Characters
    var set2 = "-_.!~*'()";   // Unreserved Marks
    var set3 = "ABC abc 123"; // Alphanumeric Characters + Space

    console.log(encodeURI(set1)); // ;,/?:@&=+$#
    console.log(encodeURI(set2)); // -_.!~*'()
    console.log(encodeURI(set3)); // ABC%20abc%20123 (the space gets encoded as %20)

    console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
    console.log(encodeURIComponent(set2)); // -_.!~*'()
    console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (the space gets encoded as %20)

Note that `encodeURI()` by itself _cannot_ form proper HTTP [`GET`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) and [`POST`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) requests, such as for [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest), because "`&`", "`+`", and "`=`" are not encoded, which are treated as special characters in `GET` and `POST` requests. `encodeURIComponent()`, however, does encode these characters.

### Encoding a lone high surrogate throws

An [`URIError`](urierror) will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g.,

    // high-low pair ok
    console.log(encodeURI('\uD800\uDFFF'));

    // lone high surrogate throws "URIError: malformed URI sequence"
    console.log(encodeURI('\uD800'));

    // lone low surrogate throws "URIError: malformed URI sequence"
    console.log(encodeURI('\uDFFF'));

### Encoding for IPv6

If one wishes to follow the more recent [RFC3986](https://datatracker.ietf.org/doc/html/rfc3986) for URLs, which makes square brackets reserved (for [IPv6](https://developer.mozilla.org/en-US/docs/Glossary/IPv6)) and thus not encoded when forming something which could be part of a URL (such as a host), the following code snippet may help:

    function fixedEncodeURI(str) {
        return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-encodeuri-uri">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-encodeuri-uri</span></a></td></tr></tbody></table>

`encodeURI`

1

12

1

5.5

7

1.1

1

18

4

10.1

1

1.0

## See also

-   [`decodeURI()`](decodeuri)
-   [`encodeURIComponent()`](encodeuricomponent)
-   [`decodeURIComponent()`](decodeuricomponent)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI</a>

# encodeURIComponent()

The `encodeURIComponent()` function encodes a [URI](https://developer.mozilla.org/en-US/docs/Glossary/URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the [UTF-8](https://developer.mozilla.org/en-US/docs/Glossary/UTF-8) encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

## Syntax

    encodeURIComponent(str);

### Parameters

`str`  
String. A component of a URI.

### Return value

A new string representing the provided string encoded as a URI component.

## Description

`encodeURIComponent()` escapes all characters **except**:

    Not Escaped:

        A-Z a-z 0-9 - _ . ! ~ * ' ( )

`encodeURIComponent()` differs from `encodeURI` as follows:

    var set1 = ";,/?:@&=+$";  // Reserved Characters
    var set2 = "-_.!~*'()";   // Unescaped Characters
    var set3 = "#";           // Number Sign
    var set4 = "ABC abc 123"; // Alphanumeric Characters + Space

    console.log(encodeURI(set1)); // ;,/?:@&=+$
    console.log(encodeURI(set2)); // -_.!~*'()
    console.log(encodeURI(set3)); // #
    console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

    console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
    console.log(encodeURIComponent(set2)); // -_.!~*'()
    console.log(encodeURIComponent(set3)); // %23
    console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

Note that a [`URIError`](urierror) will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g.,

    // high-low pair ok
    console.log(encodeURIComponent('\uD800\uDFFF'));

    // lone high surrogate throws "URIError: malformed URI sequence"
    console.log(encodeURIComponent('\uD800'));

    // lone low surrogate throws "URIError: malformed URI sequence"
    console.log(encodeURIComponent('\uDFFF'));

Use `encodeURIComponent()` on user-entered fields from forms [`POST`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST)'d to the server. This will encode `&` symbols that may inadvertently be generated during data entry for special HTML entities or other characters that require encoding/decoding.

For example, if a user writes `Jack & Jill`, the text may get encoded as `Jack &amp; Jill`. Without `encodeURIComponent()` the ampersand could be interpretted on the server as the start of a new field and jeopardize the integrity of the data.

For [`application/x-www-form-urlencoded`](https://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm), spaces are to be replaced by `+`, so one may wish to follow a `encodeURIComponent()` replacement with an additional replacement of `%20` with `+`.

To be more stringent in adhering to [RFC 3986](https://datatracker.ietf.org/doc/html/rfc3986) (which reserves !, ', (, ), and \*), even though these characters have no formalized URI delimiting uses, the following can be safely used:

    function fixedEncodeURIComponent(str) {
      return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
        return '%' + c.charCodeAt(0).toString(16);
      });
    }

## Examples

### Encoding for Content-Disposition and Link headers

The following example provides the special encoding required within UTF-8 [`Content-Disposition`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition) and [`Link`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link) server response header parameters (e.g., UTF-8 filenames):

    var fileName = 'my file(2).txt';
    var header = "Content-Disposition: attachment; filename*=UTF-8''"
                 + encodeRFC5987ValueChars(fileName);

    console.log(header);
    // logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"

    function encodeRFC5987ValueChars(str) {
        return encodeURIComponent(str).
            // Note that although RFC3986 reserves "!", RFC5987 does not,
            // so we do not need to escape it
            replace(/['()]/g, escape). // i.e., %27 %28 %29
            replace(/\*/g, '%2A').
                // The following are not required for percent-encoding per RFC5987,
                // so we can allow for a little better readability over the wire: |`^
                replace(/%(?:7C|60|5E)/g, unescape);
    }

    // here is an alternative to the above function
    function encodeRFC5987ValueChars2(str) {
      return encodeURIComponent(str).
        // Note that although RFC3986 reserves "!", RFC5987 does not,
        // so we do not need to escape it
        replace(/['()*]/g, c => "%" + c.charCodeAt(0).toString(16)). // i.e., %27 %28 %29 %2a (Note that valid encoding of "*" is %2A
                                                                     // which necessitates calling toUpperCase() to properly encode)
        // The following are not required for percent-encoding per RFC5987,
        // so we can allow for a little better readability over the wire: |`^
        replace(/%(7C|60|5E)/g, (str, hex) => String.fromCharCode(parseInt(hex, 16)));
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-encodeuricomponent-uricomponent">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'encodeURIComponent' in that specification.</span></a></td></tr></tbody></table>

`encodeURIComponent`

1

12

1

5.5

7

1.1

1

18

4

10.1

1

1.0

## See also

-   [`decodeURI`](decodeuri)
-   [`encodeURI`](encodeuri)
-   [`decodeURIComponent`](decodeuricomponent)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent</a>

# String.prototype.endsWith()

The `endsWith()` method determines whether a string ends with the characters of a specified string, returning `true` or `false` as appropriate.

## Syntax

    endsWith(searchString)
    endsWith(searchString, length)

### Parameters

`searchString`  
The characters to be searched for at the end of `str`.

`length` <span class="badge inline optional">Optional</span>  
If provided, it is used as the length of `str`. Defaults to `str.length`.

### Return value

`true` if the given characters are found at the end of the string; otherwise, `false`.

## Description

This method lets you determine whether or not a string ends with another string. This method is case-sensitive.

## Examples

### Using endsWith()

    let str = 'To be, or not to be, that is the question.'

    console.log(str.endsWith('question.'))  // true
    console.log(str.endsWith('to be'))      // false
    console.log(str.endsWith('to be', 19))  // true

## Polyfill

This method has been added to the ECMAScript 6 specification and may not be available in all JavaScript implementations yet. However, you can polyfill `String.prototype.endsWith()` with the following snippet:

    if (!String.prototype.endsWith) {
      String.prototype.endsWith = function(search, this_len) {
        if (this_len === undefined || this_len > this.length) {
          this_len = this.length;
        }
        return this.substring(this_len - search.length, this_len) === search;
      };
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.endswith">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.endswith</span></a></td></tr></tbody></table>

`endsWith`

41

12

17

No

28

9

≤37

36

17

24

9

3.0

## See also

-   [`String.prototype.startsWith()`](startswith)
-   [`String.prototype.includes()`](includes)
-   [`String.prototype.indexOf()`](indexof)
-   [`String.prototype.lastIndexOf()`](lastindexof)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith</a>

# Object.entries()

The `Object.entries()` method returns an array of a given object's own enumerable string-keyed property `[key, value]` pairs, in the same order as that provided by a [`for...in`](../../statements/for...in) loop. (The only important difference is that a `for...in` loop enumerates properties in the prototype chain as well).

The order of the array returned by `Object.entries()` does not depend on how an object is defined. If there is a need for certain ordering, then the array should be sorted first, like `Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));`.

## Syntax

    Object.entries(obj)

### Parameters

`obj`  
The object whose own enumerable string-keyed property `[key, value]` pairs are to be returned.

### Return value

An array of the given object's own enumerable string-keyed property `[key, value]` pairs.

## Description

`Object.entries()` returns an array whose elements are arrays corresponding to the enumerable string-keyed property `[key, value]` pairs found directly upon `object`. The ordering of the properties is the same as that given by looping over the property values of the object manually.

## Polyfill

To add compatible `Object.entries()` support in older environments that do not natively support it, you can use any of the following:

-   a demonstration implementation of `Object.entries` in the [tc39/proposal-object-values-entries](https://github.com/tc39/proposal-object-values-entries) (if you don't need any support for IE);
-   a polyfill in the [es-shims/Object.entries](https://github.com/es-shims/Object.entries) repositories;
-   or, you can use the simple, ready-to-deploy polyfill listed below:

<!-- -->

    if (!Object.entries) {
      Object.entries = function( obj ){
        var ownProps = Object.keys( obj ),
            i = ownProps.length,
            resArray = new Array(i); // preallocate the Array
        while (i--)
          resArray[i] = [ownProps[i], obj[ownProps[i]]];

        return resArray;
      };
    }

For the above polyfill code snippet, if you need support for IE&lt;9, then you will also need an `Object.keys()` polyfill (such as the one found on the [`Object.keys`](keys) page).

## Examples

    const obj = { foo: 'bar', baz: 42 };
    console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

    // array like object
    const obj = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

    // array like object with random key ordering
    const anObj = { 100: 'a', 2: 'b', 7: 'c' };
    console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

    // getFoo is property which isn't enumerable
    const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
    myObj.foo = 'bar';
    console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]

    // non-object argument will be coerced to an object
    console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

    // returns an empty array for any primitive type except for strings (see the above example), since primitives have no own properties
    console.log(Object.entries(100)); // [ ]

    // iterate through key-value gracefully
    const obj = { a: 5, b: 7, c: 9 };
    for (const [key, value] of Object.entries(obj)) {
      console.log(`${key}${value}`); // "a 5", "b 7", "c 9"
    }

    // Or, using array extras
    Object.entries(obj).forEach(([key, value]) => {
      console.log(`${key}${value}`); // "a 5", "b 7", "c 9"
    });

### Converting an `Object` to a `Map`

The [`new Map()`](../map) constructor accepts an iterable of `entries`. With `Object.entries`, you can easily convert from [`Object`](../object) to [`Map`](../map):

    const obj = { foo: 'bar', baz: 42 };
    const map = new Map(Object.entries(obj));
    console.log(map); // Map(2) {"foo" => "bar", "baz" => 42}

### Iterating through an `Object`

Using [Array Destructuring](../../operators/destructuring_assignment#array_destructuring), you can iterate through objects easily.

    const obj = { foo: 'bar', baz: 42 };
    Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.entries">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Object.entries' in that specification.</span></a></td></tr></tbody></table>

`entries`

54

14

47

No

41

10.1

54

54

47

41

10.3

6.0

## See also

-   [Enumerability and ownership of properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
-   [`Object.keys()`](keys)
-   [`Object.values()`](values)
-   [`Object.prototype.propertyIsEnumerable()`](propertyisenumerable)
-   [`Object.create()`](create)
-   [`Object.fromEntries()`](fromentries)
-   [`Object.getOwnPropertyNames()`](getownpropertynames)
-   [`Map.prototype.entries()`](../map/entries)
-   [`Map.prototype.keys()`](../map/keys)
-   [`Map.prototype.values()`](../map/values)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries</a>

# Number.EPSILON

The `Number.EPSILON` property represents the difference between 1 and the smallest floating point number greater than 1.

You do not have to create a [`Number`](../number) object to access this static property (use `Number.EPSILON`).

Property attributes of `Number.EPSILON`

Writable

no

Enumerable

no

Configurable

no

## Description

The `EPSILON` property has a value of approximately `2.2204460492503130808472633361816E-16`, or `2-52`.

## Examples

### Testing equality

    x = 0.2;
    y = 0.3;
    z = 0.1;
    equal = (Math.abs(x - y + z) < Number.EPSILON);

## Polyfill

    if (Number.EPSILON === undefined) {
        Number.EPSILON = Math.pow(2, -52);
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-number.epsilon">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-number.epsilon</span></a></td></tr></tbody></table>

`EPSILON`

34

12

25

No

21

9

≤37

34

25

21

9

2.0

## See also

-   The [`Number`](../number) object it belongs to

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON</a>

# SyntaxError: test for equality (==) mistyped as assignment (=)?

The JavaScript warning "test for equality (==) mistyped as assignment (=)?" occurs when there was an assignment (`=`) when you would normally expect a test for equality (`==`).

## Message

    Warning: SyntaxError: test for equality (==) mistyped as assignment (=)?

## Error type

(Firefox only) [`SyntaxError`](../global_objects/syntaxerror) warning which is reported only if `javascript.options.strict` preference is set to `true`.

## What went wrong?

There was an assignment (`=`) when you would normally expect a test for equality (`==`). To help debugging, JavaScript (with strict warnings enabled) warns about this pattern.

## Examples

### Assignment within conditional expressions

It is advisable to not use simple assignments in a conditional expression (such as `if...else`), because the assignment can be confused with equality when glancing over the code. For example, do not use the following code:

    if (x = y) {
      // do the right thing
    }

If you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment. For example:

    if ((x = y)) {
      // do the right thing
    }

Otherwise, you probably meant to use a comparison operator (e.g. `==` or `===`):

    if (x == y) {
      // do the right thing
    }

## See also

-   `if...else`
-   [Comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Equal_as_assign" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Equal_as_assign</a>

# Equality (==)

The equality operator (`==`) checks whether its two operands are equal, returning a Boolean result. Unlike the [strict equality](strict_equality) operator, it attempts to convert and compare operands that are of different types.

## Syntax

    x == y

## Description

The equality operators (`==` and `!=`) use the [Abstract Equality Comparison Algorithm](https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3) to compare two operands. This can be roughly summarised as follows:

-   If the operands are both objects, return `true` only if both operands reference the same object.
-   If one operand is `null` and the other is `undefined`, return `true`.
-   If the operands are of different types, try to convert them to the same type before comparing:
    -   When comparing a number to a string, try to convert the string to a numeric value.
    -   If one of the operands is `Boolean`, convert the Boolean operand to 1 if it is `true` and +0 if it is `false`.
    -   If one of the operands is an object and the other is a number or a string, try to convert the object to a primitive using the object's `valueOf()` and `toString()` methods.
-   If the operands have the same type, they are compared as follows:
    -   `String`: return `true` only if both operands have the same characters in the same order.
    -   `Number`: return `true` only if both operands have the same value. `+0` and `-0` are treated as the same value. If either operand is `NaN`, return `false`.
    -   `Boolean`: return `true` only if operands are both `true` or both `false`.

The most notable difference between this operator and the [strict equality](strict_equality) (`===`) operator is that the strict equality operator does not attempt type conversion. Instead, the strict equality operator always considers operands of different types to be different.

## Examples

### Comparison with no type conversion

    1 == 1;              // true
    "hello" == "hello";  // true

### Comparison with type conversion

    "1" ==  1;            // true
    1 == "1";             // true
    0 == false;           // true
    0 == null;            // false
    0 == undefined;       // false
    0 == !!null;          // true, look at Logical NOT operator
    0 == !!undefined;     // true, look at Logical NOT operator
    null == undefined;    // true

    const number1 = new Number(3);
    const number2 = new Number(3);
    number1 == 3;         // true
    number1 == number2;   // false

### Comparison of objects

    const object1 = {"key": "value"}
    const object2 = {"key": "value"};

    object1 == object2 // false
    object2 == object2 // true

### Comparing strings and String objects

Note that strings constructed using `new String()` are objects. If you compare one of these with a string literal, the `String` object will be converted to a string literal and the contents will be compared. However, if both operands are `String` objects, then they are compared as objects and must reference the same object for comparison to succeed:

    const string1 = "hello";
    const string2 = String("hello");
    const string3 = new String("hello");
    const string4 = new String("hello");

    console.log(string1 == string2); // true
    console.log(string1 == string3); // true
    console.log(string2 == string3); // true
    console.log(string3 == string4); // false
    console.log(string4 == string4); // true

### Comparing Dates and strings

    const d = new Date('December 17, 1995 03:24:00');
    const s = d.toString(); // for example: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)"
    console.log(d == s);    //true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-equality-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-equality-operators</span></a></td></tr></tbody></table>

`Equality`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Inequality operator](inequality)
-   [Strict equality operator](strict_equality)
-   [Strict inequality operator](strict_inequality)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality</a>

# Error

`Error` objects are thrown when runtime errors occur. The `Error` object can also be used as a base object for user-defined exceptions. See below for standard built-in error types.

## Description

Runtime errors result in new `Error` objects being created and thrown.

### Error types

Besides the generic `Error` constructor, there are other core error constructors in JavaScript. For client-side exceptions, see [Exception handling statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#exception_handling_statements).

[`EvalError`](evalerror)  
Creates an instance representing an error that occurs regarding the global function [`eval()`](eval).

[`RangeError`](rangeerror)  
Creates an instance representing an error that occurs when a numeric variable or parameter is outside of its valid range.

[`ReferenceError`](referenceerror)  
Creates an instance representing an error that occurs when de-referencing an invalid reference.

[`SyntaxError`](syntaxerror)  
Creates an instance representing a syntax error.

[`TypeError`](typeerror)  
Creates an instance representing an error that occurs when a variable or parameter is not of a valid type.

[`URIError`](urierror)  
Creates an instance representing an error that occurs when [`encodeURI()`](encodeuri) or [`decodeURI()`](decodeuri) are passed invalid parameters.

[`AggregateError`](aggregateerror)  
Creates an instance representing several errors wrapped in a single error when multiple errors need to be reported by an operation, for example by [`Promise.any()`](promise/any).

[`InternalError`](internalerror) <span class="icon non-standard" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img"> This API has not been standardized. </span>  
Creates an instance representing an error that occurs when an internal error in the JavaScript engine is thrown. E.g. "too much recursion".

## Constructor

[`Error()`](error/error)  
Creates a new `Error` object.

## Static methods

<span class="page-not-created">`Error.captureStackTrace()`</span>  
A non-standard **V8** function that creates the [`stack`](error/stack) property on an Error instance.

## Instance properties

[`Error.prototype.message`](error/message)  
Error message.

[`Error.prototype.name`](error/name)  
Error name.

<span class="page-not-created">`Error.prototype.description`</span>  
A non-standard Microsoft property for the error description. Similar to [`message`](error/message).

<span class="page-not-created">`Error.prototype.number`</span>  
A non-standard Microsoft property for an error number.

[`Error.prototype.fileName`](error/filename)  
A non-standard Mozilla property for the path to the file that raised this error.

[`Error.prototype.lineNumber`](error/linenumber)  
A non-standard Mozilla property for the line number in the file that raised this error.

[`Error.prototype.columnNumber`](error/columnnumber)  
A non-standard Mozilla property for the column number in the line that raised this error.

[`Error.prototype.stack`](error/stack)  
A non-standard Mozilla property for a stack trace.

## Instance methods

[`Error.prototype.toString()`](error/tostring)  
Returns a string representing the specified object. Overrides the [`Object.prototype.toString()`](object/tostring) method.

## Examples

### Throwing a generic error

Usually you create an `Error` object with the intention of raising it using the [`throw`](../statements/throw) keyword. You can handle the error using the [`try...catch`](../statements/try...catch) construct:

    try {
      throw new Error('Whoops!')
    } catch (e) {
      console.error(e.name + ': ' + e.message)
    }

### Handling a specific error

You can choose to handle only specific error types by testing the error type with the error's [`constructor`](object/constructor) property or, if you're writing for modern JavaScript engines, [`instanceof`](../operators/instanceof) keyword:

    try {
      foo.bar()
    } catch (e) {
      if (e instanceof EvalError) {
        console.error(e.name + ': ' + e.message)
      } else if (e instanceof RangeError) {
        console.error(e.name + ': ' + e.message)
      }
      // ... etc
    }

### Custom Error Types

You might want to define your own error types deriving from `Error` to be able to `throw new MyError()` and use `instanceof MyError` to check the kind of error in the exception handler. This results in cleaner and more consistent error handling code.

See ["What's a good way to extend Error in JavaScript?"](https://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript) on StackOverflow for an in-depth discussion.

#### ES6 Custom Error Class

**Warning:** Versions of Babel prior to 7 can handle `CustomError` class methods, but only when they are declared with [Object.defineProperty()](object/defineproperty). Otherwise, old versions of Babel and other transpilers will not correctly handle the following code without [additional configuration](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend).

**Note:** Some browsers include the `CustomError` constructor in the stack trace when using ES2015 classes.

    class CustomError extends Error {
      constructor(foo = 'bar', ...params) {
        // Pass remaining arguments (including vendor specific ones) to parent constructor
        super(...params)

        // Maintains proper stack trace for where our error was thrown (only available on V8)
        if (Error.captureStackTrace) {
          Error.captureStackTrace(this, CustomError)
        }

        this.name = 'CustomError'
        // Custom debugging information
        this.foo = foo
        this.date = new Date()
      }
    }

    try {
      throw new CustomError('baz', 'bazMessage')
    } catch(e) {
      console.error(e.name)    //CustomError
      console.error(e.foo)     //baz
      console.error(e.message) //bazMessage
      console.error(e.stack)   //stacktrace
    }

#### ES5 Custom Error Object

**Warning:** All browsers include the `CustomError` constructor in the stack trace when using a prototypal declaration.

    function CustomError(foo, message, fileName, lineNumber) {
      var instance = new Error(message, fileName, lineNumber);
      instance.name = 'CustomError';
      instance.foo = foo;
      Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
      if (Error.captureStackTrace) {
        Error.captureStackTrace(instance, CustomError);
      }
      return instance;
    }

    CustomError.prototype = Object.create(Error.prototype, {
      constructor: {
        value: Error,
        enumerable: false,
        writable: true,
        configurable: true
      }
    });

    if (Object.setPrototypeOf){
      Object.setPrototypeOf(CustomError, Error);
    } else {
      CustomError.__proto__ = Error;
    }

    try {
      throw new CustomError('baz', 'bazMessage');
    } catch(e){
      console.error(e.name); //CustomError
      console.error(e.foo); //baz
      console.error(e.message); //bazMessage
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-error-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-error-objects</span></a></td></tr></tbody></table>

`Error`

1

12

1

6

4

1

1

18

4

10.1

1

1.0

`Error`

1

12

1

6

4

1

1

18

4

10.1

1

1.0

`columnNumber`

No

No

1

No

No

No

No

No

4

No

No

No

`fileName`

No

No

1

No

No

No

No

No

4

No

No

No

`lineNumber`

No

No

1

No

No

No

No

No

4

No

No

No

`message`

1

12

1

6

5

1

1

18

4

10.1

1

1.0

`name`

1

12

1

6

4

1

1

18

4

10.1

1

1.0

`stack`

3

12

1

10

10.5

6

≤37

18

4

11

6

1.0

`toSource`

No

No

1-74

Starting in Firefox 74, `toSource()` is no longer available for use by web content. It is still allowed for internal and privileged code.

No

No

No

No

No

4

No

No

No

`toString`

1

12

1

6

4

1

1

18

4

10.1

1

1.0

## See also

-   [`throw`](../statements/throw)
-   [`try...catch`](../statements/try...catch)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error</a>

# JavaScript error reference

Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the [`Error`](global_objects/error) object, and has a `name` and a `message`.

Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.

For a beginner's introductory tutorial on fixing JavaScript errors, see [What went wrong? Troubleshooting JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong).

## List of errors

In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!

-   [Error: Permission denied to access property "x"](errors/property_access_denied)
-   [InternalError: too much recursion](errors/too_much_recursion)
-   [RangeError: argument is not a valid code point](errors/not_a_codepoint)
-   [RangeError: invalid array length](errors/invalid_array_length)
-   [RangeError: invalid date](errors/invalid_date)
-   [RangeError: precision is out of range](errors/precision_range)
-   [RangeError: radix must be an integer](errors/bad_radix)
-   [RangeError: repeat count must be less than infinity](errors/resulting_string_too_large)
-   [RangeError: repeat count must be non-negative](errors/negative_repetition_count)
-   [ReferenceError: "x" is not defined](errors/not_defined)
-   [ReferenceError: assignment to undeclared variable "x"](errors/undeclared_var)
-   [ReferenceError: can't access lexical declaration\`X' before initialization](errors/cant_access_lexical_declaration_before_init)
-   [ReferenceError: deprecated caller or arguments usage](errors/deprecated_caller_or_arguments_usage)
-   [ReferenceError: invalid assignment left-hand side](errors/invalid_assignment_left-hand_side)
-   [ReferenceError: reference to undefined property "x"](errors/undefined_prop)
-   [SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated](errors/deprecated_octal)
-   [SyntaxError: "use strict" not allowed in function with non-simple parameters](errors/strict_non_simple_params)
-   [SyntaxError: "x" is a reserved identifier](errors/reserved_identifier)
-   [SyntaxError: JSON.parse: bad parsing](errors/json_bad_parse)
-   [SyntaxError: Malformed formal parameter](errors/malformed_formal_parameter)
-   [SyntaxError: Unexpected '\#' used outside of class body](errors/hash_outside_class)
-   [SyntaxError: Unexpected token](errors/unexpected_token)
-   [SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //\# instead](errors/deprecated_source_map_pragma)
-   [SyntaxError: a declaration in the head of a for-of loop can't have an initializer](errors/invalid_for-of_initializer)
-   [SyntaxError: applying the 'delete' operator to an unqualified name is deprecated](errors/delete_in_strict_mode)
-   [SyntaxError: for-in loop head declarations may not have initializers](errors/invalid_for-in_initializer)
-   [SyntaxError: function statement requires a name](errors/unnamed_function_statement)
-   [SyntaxError: identifier starts immediately after numeric literal](errors/identifier_after_number)
-   [SyntaxError: illegal character](errors/illegal_character)
-   [SyntaxError: invalid regular expression flag "x"](errors/bad_regexp_flag)
-   [SyntaxError: missing ) after argument list](errors/missing_parenthesis_after_argument_list)
-   [SyntaxError: missing ) after condition](errors/missing_parenthesis_after_condition)
-   [SyntaxError: missing : after property id](errors/missing_colon_after_property_id)
-   [SyntaxError: missing ; before statement](errors/missing_semicolon_before_statement)
-   [SyntaxError: missing = in const declaration](errors/missing_initializer_in_const)
-   [SyntaxError: missing \] after element list](errors/missing_bracket_after_list)
-   [SyntaxError: missing formal parameter](errors/missing_formal_parameter)
-   [SyntaxError: missing name after . operator](errors/missing_name_after_dot_operator)
-   [SyntaxError: missing variable name](errors/no_variable_name)
-   [SyntaxError: missing } after function body](errors/missing_curly_after_function_body)
-   [SyntaxError: missing } after property list](errors/missing_curly_after_property_list)
-   [SyntaxError: redeclaration of formal parameter "x"](errors/redeclared_parameter)
-   [SyntaxError: return not in function](errors/bad_return_or_yield)
-   [SyntaxError: test for equality (==) mistyped as assignment (=)?](errors/equal_as_assign)
-   [SyntaxError: unterminated string literal](errors/unterminated_string_literal)
-   [TypeError: "x" has no properties](errors/no_properties)
-   [TypeError: "x" is (not) "y"](errors/unexpected_type)
-   [TypeError: "x" is not a constructor](errors/not_a_constructor)
-   [TypeError: "x" is not a function](errors/not_a_function)
-   [TypeError: "x" is not a non-null object](errors/no_non-null_object)
-   [TypeError: "x" is read-only](errors/read-only)
-   [TypeError: 'x' is not iterable](errors/is_not_iterable)
-   [TypeError: More arguments needed](errors/more_arguments_needed)
-   [TypeError: Reduce of empty array with no initial value](errors/reduce_of_empty_array_with_no_initial_value)
-   [TypeError: X.prototype.y called on incompatible type](errors/called_on_incompatible_type)
-   [TypeError: can't access dead object](errors/dead_object)
-   [TypeError: can't access property "x" of "y"](errors/cant_access_property)
-   [TypeError: can't assign to property "x" on "y": not an object](errors/cant_assign_to_property)
-   [TypeError: can't define property "x": "obj" is not extensible](errors/cant_define_property_object_not_extensible)
-   [TypeError: can't delete non-configurable array element](errors/non_configurable_array_element)
-   [TypeError: can't redefine non-configurable property "x"](errors/cant_redefine_property)
-   [TypeError: cannot use 'in' operator to search for 'x' in 'y'](errors/in_operator_no_object)
-   [TypeError: cyclic object value](errors/cyclic_object_value)
-   [TypeError: invalid 'instanceof' operand 'x'](errors/invalid_right_hand_side_instanceof_operand)
-   [TypeError: invalid Array.prototype.sort argument](errors/array_sort_argument)
-   [TypeError: invalid arguments](errors/typed_array_invalid_arguments)
-   [TypeError: invalid assignment to const "x"](errors/invalid_const_assignment)
-   [TypeError: property "x" is non-configurable and can't be deleted](errors/cant_delete)
-   [TypeError: setting getter-only property "x"](errors/getter_only)
-   [TypeError: variable "x" redeclares argument](errors/var_hides_argument)
-   [URIError: malformed URI sequence](errors/malformed_uri)
-   [Warning: 08/09 is not a legal ECMA-262 octal constant](errors/bad_octal)
-   [Warning: -file- is being assigned a //\# sourceMappingURL, but already has one](errors/already_has_pragma)
-   [Warning: Date.prototype.toLocaleFormat is deprecated](errors/deprecated_tolocaleformat)
-   [Warning: JavaScript 1.6's for-each-in loops are deprecated](errors/for-each-in_loops_are_deprecated)
-   [Warning: String.x is deprecated; use String.prototype.x instead](errors/deprecated_string_generics)
-   [Warning: expression closures are deprecated](errors/deprecated_expression_closures)
-   [Warning: unreachable code after return statement](errors/stmt_after_return)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors</a>

# eval()

**Warning:** Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use `eval()`. See [Never use eval()!](#never_use_eval!), below.

The `eval()` function evaluates JavaScript code represented as a string.

## Syntax

    eval(string)

### Parameters

`string`  
A string representing a JavaScript expression, statement, or sequence of statements. The expression can include variables and properties of existing objects.

### Return value

The completion value of evaluating the given code. If the completion value is empty, [`undefined`](undefined) is returned.

## Description

`eval()` is a function property of the global object.

The argument of the `eval()` function is a string. If the string represents an expression, `eval()` evaluates the expression. If the argument represents one or more JavaScript statements, `eval()` evaluates the statements. Do not call `eval()` to evaluate an arithmetic expression; JavaScript evaluates arithmetic expressions automatically.

If you construct an arithmetic expression as a string, you can use `eval()` to evaluate it at a later time. For example, suppose you have a variable `x`. You can postpone evaluation of an expression involving `x` by assigning the string value of the expression, say "`3 * x + 2`", to a variable, and then calling `eval()` at a later point in your script.

If the argument of `eval()` is not a string, `eval()` returns the argument unchanged. In the following example, the `String` constructor is specified and `eval()` returns a `String` object rather than evaluating the string.

    eval(new String('2 + 2')); // returns a String object containing "2 + 2"
    eval('2 + 2');             // returns 4

You can work around this limitation in a generic fashion by using `toString()`.

    var expression = new String('2 + 2');
    eval(expression.toString());            // returns 4

If you use the `eval` function _indirectly,_ by invoking it via a reference other than `eval`, [as of ECMAScript 5](https://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2) it works in the global scope rather than the local scope. This means, for instance, that function declarations create global functions, and that the code being evaluated doesn't have access to local variables within the scope where it's being called.

    function test() {
      var x = 2, y = 4;
      // Direct call, uses local scope
      console.log(eval('x + y')); // Result is 6
      // Indirect call using the comma operator to return eval
      console.log((0, eval)('x + y')); // Uses global scope, throws because x is undefined
      // Indirect call using a variable to store and return eval
      var geval = eval;
      console.log(geval('x + y')); // Uses global scope, throws because x is undefined
    }

## Never use eval()!

`eval()` is a dangerous function, which executes the code it's passed with the privileges of the caller. If you run `eval()` with a string that could be affected by a malicious party, you may end up running malicious code on the user's machine with the permissions of your webpage / extension. More importantly, a third-party code can see the scope in which `eval()` was invoked, which can lead to possible attacks in ways to which the similar [`Function`](function) is not susceptible.

`eval()` is also slower than the alternatives, since it has to invoke the JavaScript interpreter, while many other constructs are optimized by modern JS engines.

Additionally, modern javascript interpreters convert javascript to machine code. This means that any concept of variable naming gets obliterated. Thus, any use of `eval()` will force the browser to do long expensive variable name lookups to figure out where the variable exists in the machine code and set its value. Additionally, new things can be introduced to that variable through `eval()` such as changing the type of that variable, forcing the browser to re-evaluate all of the generated machine code to compensate.

Fortunately, there's a very good alternative to `eval()`: using [`window.Function()`](function). See this example of how to convert code using a dangerous `eval()` to using `Function()`, see below.

Bad code with `eval()`:

    function looseJsonParse(obj){
        return eval("(" + obj + ")");
    }
    console.log(looseJsonParse(
       "{a:(4-1), b:function(){}, c:new Date()}"
    ))

Better code without `eval()`:

    function looseJsonParse(obj){
        return Function('"use strict";return (' + obj + ')')();
    }
    console.log(looseJsonParse(
       "{a:(4-1), b:function(){}, c:new Date()}"
    ))

Comparing the two code snippets above, the two code snippets might seem to work the same way, but think again: the `eval()` one is a great deal slower. Notice `c: new Date()` in the evaluated object. In the function without the `eval()`, the object is being evaluated in the global scope, so it is safe for the browser to assume that `Date` refers to `window.Date()` instead of a local variable called `Date`. But, in the code using `eval()`, the browser cannot assume this since what if your code looked like the following:

    function Date(n){
        return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0];
    }
    function looseJsonParse(obj){
        return eval("(" + obj + ")");
    }
    console.log(looseJsonParse(
       "{a:(4-1), b:function(){}, c:new Date()}"
    ))

Thus, in the `eval()` version of the code, the browser is forced to make the expensive lookup call to check to see if there are any local variables called `Date()`. This is incredibly inefficient compared to `Function()`.

In a related circumstance, what if you actually wanted your `Date()` function to be able to be called from the code inside `Function()`. Should you just take the easy way out and fall back to `eval()`? No! Never. Instead try the approach below.

    function Date(n){
        return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0];
    }
    function runCodeWithDateFunction(obj){
        return Function('"use strict";return (' + obj + ')')()(
            Date
        );
    }
    console.log(runCodeWithDateFunction(
       "function(Date){ return Date(5) }"
    ))

The code above may seem inefficiently slow because of the triple nested function, but let's analyze the benefits of the above efficient method:

-   It allows the code in the string passed to `runCodeWithDateFunction()` to be minified.
-   Function call overhead is minimal, making the far smaller code size well worth the benefit
-   `Function()` more easily allows your code to utilize the performance buttering `"use strict";`
-   The code does not use `eval()`, making it orders of magnitude faster than otherwise.

Lastly, let's examine minification. With using `Function()` as shown above, you can minify the code string passed to `runCodeWithDateFunction()` far more efficiently because the function arguments names can be minified too as seen in the minified code below.

    console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){
    return"Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(" ")[a%7||0]}));

There are also additional safer (and faster!) alternatives to `eval()` or `Function()` for common use-cases.

### Accessing member properties

You should not use `eval()` to convert property names into properties. Consider the following example where the property of the object to be accessed is not known until the code is executed. This can be done with `eval()`:

    var obj = { a: 20, b: 30 };
    var propName = getPropName();  // returns "a" or "b"

    eval( 'var result = obj.' + propName );

However, `eval()` is not necessary here. In fact, its use here is discouraged. Instead, use the [property accessors](../operators/property_accessors), which are much faster and safer:

    var obj = { a: 20, b: 30 };
    var propName = getPropName();  // returns "a" or "b"
    var result = obj[ propName ];  //  obj[ "a" ] is the same as obj.a

You can even use this method to access descendant properties. Using `eval()` this would look like:

    var obj = {a: {b: {c: 0}}};
    var propPath = getPropPath();  // returns e.g. "a.b.c"

    eval( 'var result = obj.' + propPath );

Avoiding `eval()` here could be done by splitting the property path and looping through the different properties:

    function getDescendantProp(obj, desc) {
      var arr = desc.split('.');
      while (arr.length) {
        obj = obj[arr.shift()];
      }
      return obj;
    }

    var obj = {a: {b: {c: 0}}};
    var propPath = getPropPath();  // returns e.g. "a.b.c"
    var result = getDescendantProp(obj, propPath);

Setting a property that way works similarly:

    function setDescendantProp(obj, desc, value) {
      var arr = desc.split('.');
      while (arr.length > 1) {
        obj = obj[arr.shift()];
      }
      return obj[arr[0]] = value;
    }

    var obj = {a: {b: {c: 0}}};
    var propPath = getPropPath();  // returns e.g. "a.b.c"
    var result = setDescendantProp(obj, propPath, 1);  // obj.a.b.c will now be 1

### Use functions instead of evaluating snippets of code

JavaScript has [first-class functions](https://en.wikipedia.org/wiki/First-class_function), which means you can pass functions as arguments to other APIs, store them in variables and objects' properties, and so on. Many DOM APIs are designed with this in mind, so you can (and should) write:

    // instead of setTimeout(" ... ", 1000) use:
    setTimeout(function() { ... }, 1000);

    // instead of elt.setAttribute("onclick", "...") use:
    elt.addEventListener('click', function() { ... } , false);

[Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) are also helpful as a way to create parameterized functions without concatenating strings.

### Parsing JSON (converting strings to JavaScript objects)

If the string you're calling `eval()` on contains data (for example, an array: `"[1, 2, 3]"`), as opposed to code, you should consider switching to [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON), which allows the string to use a subset of JavaScript syntax to represent data.

Note that since JSON syntax is limited compared to JavaScript syntax, many valid JavaScript literals will not parse as JSON. For example, trailing commas are not allowed in JSON, and property names (keys) in object literals must be enclosed in quotes. Be sure to use a JSON serializer to generate strings that will be later parsed as JSON.

### Pass data instead of code

For example, an extension designed to scrape contents of web-pages could have the scraping rules defined in [XPath](https://developer.mozilla.org/en-US/docs/Web/XPath) instead of JavaScript code.

## Examples

### Using `eval`

In the following code, both of the statements containing `eval()` return 42. The first evaluates the string "`x + y + 1`"; the second evaluates the string "`42`".

    var x = 2;
    var y = 39;
    var z = '42';
    eval('x + y + 1'); // returns 42
    eval(z);           // returns 42

### Using `eval` to evaluate a string of JavaScript statements

The following example uses `eval()` to evaluate the string `str`. This string consists of JavaScript statements that assigns `z` a value of 42 if `x` is five, and assigns 0 to `z` otherwise. When the second statement is executed, `eval()` will cause these statements to be performed, and it will also evaluate the set of statements and return the value that is assigned to `z`.

    var x = 5;
    var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0;";

    console.log('z is ', eval(str));

If you define multiple values then the last value is returned.

    var x = 5;
    var str = "if (x == 5) {console.log('z is 42'); z = 42; x = 420; } else z = 0;";

    console.log('x is ', eval(str)); // z is 42  x is 420

### Last expression is evaluated

`eval()` returns the value of the last expression evaluated.

    var str = 'if ( a ) { 1 + 1; } else { 1 + 2; }';
    var a = true;
    var b = eval(str);  // returns 2

    console.log('b is : ' + b);

    a = false;
    b = eval(str);  // returns 3

    console.log('b is : ' + b);

### `eval` as a string defining function requires "(" and ")" as prefix and suffix

    var fctStr1 = 'function a() {}'
    var fctStr2 = '(function a() {})'
    var fct1 = eval(fctStr1)  // return undefined
    var fct2 = eval(fctStr2)  // return a function

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-eval-x">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-eval-x</span></a></td></tr></tbody></table>

`eval`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`uneval()`](uneval)
-   [Property accessors](../operators/property_accessors)
-   [WebExtensions: Using eval in content scripts](<https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#using_eval()_in_content_scripts>)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval</a>

# EvalError

The `EvalError` object indicates an error regarding the global [`eval()`](eval) function. This exception is not thrown by JavaScript anymore, however the `EvalError` object remains for compatibility.

## Constructor

[`EvalError()`](evalerror/evalerror)  
Creates a new `EvalError` object.

## Instance properties

[`EvalError.prototype.message`](error/message)  
Error message. Although ECMA-262 specifies that [`EvalError`](evalerror) should provide its own `message` property, in [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), it inherits [`Error.prototype.message`](error/message).

[`EvalError.prototype.name`](error/name)  
Error name. Inherited from [`Error`](error).

[`EvalError.prototype.fileName`](error/filename)  
Path to file that raised this error. Inherited from [`Error`](error).

[`EvalError.prototype.lineNumber`](error/linenumber)  
Line number in file that raised this error. Inherited from [`Error`](error).

[`EvalError.prototype.columnNumber`](error/columnnumber)  
Column number in line that raised this error. Inherited from [`Error`](error).

[`EvalError.prototype.stack`](error/stack)  
Stack trace. Inherited from [`Error`](error).

## Examples

`EvalError` is not used in the current ECMAScript specification and will thus not be thrown by the runtime. However, the object itself remains for backwards compatibility with earlier versions of the specification.

### Creating an EvalError

    try {
      throw new EvalError('Hello', 'someFile.js', 10);
    } catch (e) {
      console.log(e instanceof EvalError); // true
      console.log(e.message);              // "Hello"
      console.log(e.name);                 // "EvalError"
      console.log(e.fileName);             // "someFile.js"
      console.log(e.lineNumber);           // 10
      console.log(e.columnNumber);         // 0
      console.log(e.stack);                // "@Scratchpad/2:2:9\n"
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-evalerror">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-native-error-types-used-in-this-standard-evalerror</span></a></td></tr></tbody></table>

`EvalError`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`EvalError`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

## See also

-   [`Error`](error)
-   [`eval()`](eval)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError</a>

# Array.prototype.every()

The `every()` method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

## Syntax

    // Arrow function
    every((element) => { ... } )
    every((element, index) => { ... } )
    every((element, index, array) => { ... } )

    // Callback function
    every(callbackFn)
    every(callbackFn, thisArg)

    // Inline callback function
    every(function callbackFn(element) { ... })
    every(function callbackFn(element, index) { ... })
    every(function callbackFn(element, index, array){ ... })
    every(function callbackFn(element, index, array) { ... }, thisArg)

### Parameters

`callbackFn`  
A function to test for each element, taking three arguments:

`element`  
The current element being processed in the array.

`index` <span class="badge inline optional">Optional</span>  
The index of the current element being processed in the array.

`array` <span class="badge inline optional">Optional</span>  
The array `every` was called upon.

`thisArg` <span class="badge inline optional">Optional</span>  
A value to use as `this` when executing `callbackFn`.

### Return value

`true` if the `callbackFn` function returns a [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) value for every array element. Otherwise, `false`.

## Description

The `every` method executes the provided `callbackFn` function once for each element present in the array until it finds the one where `callbackFn` returns a [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) value. If such an element is found, the `every` method immediately returns `false`. Otherwise, if `callbackFn` returns a [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) value for all elements, `every` returns `true`.

**Note:** Calling this method on an empty array will return `true` for any condition!

`callbackFn` is invoked only for array indexes which have assigned values. It is not invoked for indexes which have been deleted, or which have never been assigned values.

`callbackFn` is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.

If a `thisArg` parameter is provided to `every`, it will be used as callback's `this` value. Otherwise, the value `undefined` will be used as its `this` value. The `this` value ultimately observable by `callback` is determined according to [the usual rules for determining the `this` seen by a function](../../operators/this).

`every` does not mutate the array on which it is called.

The range of elements processed by `every` is set before the first invocation of `callbackFn`. Therefore, `callbackFn` will not run on elements that are appended to the array after the call to `every` begins. If existing elements of the array are changed, their value as passed to `callbackFn` will be the value at the time `every` visits them. Elements that are deleted are not visited.

`every` acts like the "for all" quantifier in mathematics. In particular, for an empty array, it returns `true`. (It is [vacuously true](https://en.wikipedia.org/wiki/Vacuous_truth) that all elements of the [empty set](https://en.wikipedia.org/wiki/Empty_set#Properties) satisfy any given condition.)

## Polyfill

`every` was added to the ECMA-262 standard in the 5<sup>th</sup> edition, and it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of `every` in implementations which do not natively support it.

This algorithm is exactly the one specified in ECMA-262, 5<sup>th</sup> edition, assuming `Object` and `TypeError` have their original values, and that `callbackfn.call` evaluates to the original value of [`Function.prototype.call`](../function/call).

    if (!Array.prototype.every) {
      Array.prototype.every = function(callbackfn, thisArg) {
        'use strict';
        var T, k;

        if (this == null) {
          throw new TypeError('this is null or not defined');
        }

        // 1. Let O be the result of calling ToObject passing the this
        //    value as the argument.
        var O = Object(this);

        // 2. Let lenValue be the result of calling the Get internal method
        //    of O with the argument "length".
        // 3. Let len be ToUint32(lenValue).
        var len = O.length >>> 0;

        // 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
        if (typeof callbackfn !== 'function' && Object.prototype.toString.call(callbackfn) !== '[object Function]') {
          throw new TypeError();
        }

        // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
        if (arguments.length > 1) {
          T = thisArg;
        }

        // 6. Let k be 0.
        k = 0;

        // 7. Repeat, while k < len
        while (k < len) {

          var kValue;

          // a. Let Pk be ToString(k).
          //   This is implicit for LHS operands of the in operator
          // b. Let kPresent be the result of calling the HasProperty internal
          //    method of O with argument Pk.
          //   This step can be combined with c
          // c. If kPresent is true, then
          if (k in O) {
            var testResult;
            // i. Let kValue be the result of calling the Get internal method
            //    of O with argument Pk.
            kValue = O[k];

            // ii. Let testResult be the result of calling the Call internal method
            // of callbackfn with T as the this value if T is not undefined
            // else is the result of calling callbackfn
            // and argument list containing kValue, k, and O.
            if(T) testResult = callbackfn.call(T, kValue, k, O);
            else testResult = callbackfn(kValue,k,O)

            // iii. If ToBoolean(testResult) is false, return false.
            if (!testResult) {
              return false;
            }
          }
          k++;
        }
        return true;
      };
    }

## Examples

### Testing size of all array elements

The following example tests whether all elements in the array are bigger than 10.

    function isBigEnough(element, index, array) {
      return element >= 10;
    }
    [12, 5, 8, 130, 44].every(isBigEnough);   // false
    [12, 54, 18, 130, 44].every(isBigEnough); // true

### Using arrow functions

[Arrow functions](../../functions/arrow_functions) provide a shorter syntax for the same test.

    [12, 5, 8, 130, 44].every(x => x >= 10);   // false
    [12, 54, 18, 130, 44].every(x => x >= 10); // true

### Affecting Initial Array (modifying, appending, and deleting)

The following examples tests the behavior of the `every` method when the array is modified.

    // ---------------
    // Modifying items
    // ---------------
    let arr = [1, 2, 3, 4];
    arr.every( (elem, index, arr) => {
      arr[index+1] -= 1
      console.log(`[${arr}][${index}] -> ${elem}`)
      return elem < 2
    })

    // Loop runs for 3 iterations, but would
    // have run 2 iterations without any modification
    //
    // 1st iteration: [1,1,3,4][0] -> 1
    // 2nd iteration: [1,1,2,4][1] -> 1
    // 3rd iteration: [1,1,2,3][2] -> 2

    // ---------------
    // Appending items
    // ---------------
    arr = [1, 2, 3];
    arr.every( (elem, index, arr) => {
      arr.push('new')
      console.log(`[${arr}][${index}] -> ${elem}`)
      return elem < 4
    })

    // Loop runs for 3 iterations, even after appending new items
    //
    // 1st iteration: [1, 2, 3, new][0] -> 1
    // 2nd iteration: [1, 2, 3, new, new][1] -> 2
    // 3rd iteration: [1, 2, 3, new, new, new][2] -> 3

    // ---------------
    // Deleting items
    // ---------------
    arr = [1, 2, 3, 4];
    arr.every( (elem, index, arr) => {
      arr.pop()
      console.log(`[${arr}][${index}] -> ${elem}`)
      return elem < 4
    })

    // Loop runs for 2 iterations only, as the remaining
    // items are `pop()`ed off
    //
    // 1st iteration: [1,2,3][0] -> 1
    // 2nd iteration: [1,2][1] -> 2

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.every">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.every</span></a></td></tr></tbody></table>

`every`

1

12

1.5

9

9.5

3

≤37

18

4

10.1

1

1.0

## See also

-   [`Array.prototype.forEach()`](foreach)
-   [`Array.prototype.some()`](some)
-   [`Array.prototype.find()`](find)
-   [`TypedArray.prototype.every()`](../typedarray/every)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every</a>

# Atomics.exchange()

The static `Atomics.exchange()` method stores a given value at a given position in the array and returns the old value at that position. This atomic operation guarantees that no other write happens between the read of the old value and the write of the new value.

## Syntax

    Atomics.exchange(typedArray, index, value)

### Parameters

`typedArray`  
An integer typed array. One of [`Int8Array`](../int8array), [`Uint8Array`](../uint8array), [`Int16Array`](../int16array), [`Uint16Array`](../uint16array), [`Int32Array`](../int32array), [`Uint32Array`](../uint32array), [`BigInt64Array`](../bigint64array), or [`BigUint64Array`](../biguint64array).

`index`  
The position in the `typedArray` to exchange a `value`.

`value`  
The number to exchange.

### Return value

The old value at the given position (`typedArray[index]`).

### Exceptions

-   Throws a [`TypeError`](../typeerror), if `typedArray` is not one of the allowed integer types.
-   Throws a [`RangeError`](../rangeerror), if `index` is out of bounds in the `typedArray`.

## Examples

### Using exchange()

    const sab = new SharedArrayBuffer(1024);
    const ta = new Uint8Array(sab);

    Atomics.exchange(ta, 0, 12); // returns 0, the old value
    Atomics.load(ta, 0); // 12

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-atomics.exchange">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-atomics.exchange</span></a></td></tr></tbody></table>

`exchange`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

## See also

-   [`Atomics`](../atomics)
-   [`Atomics.compareExchange()`](compareexchange)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/exchange" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/exchange</a>

# RegExp.prototype.exec()

The `exec()` method executes a search for a match in a specified string. Returns a result array, or [`null`](../null).

JavaScript [`RegExp`](../regexp) objects are **stateful** when they have the [`global`](global) or [`sticky`](sticky) flags set (e.g. `/foo/g` or `/foo/y`). They store a [`lastIndex`](lastindex) from the previous match. Using this internally, `exec()` can be used to iterate over multiple matches in a string of text (with capture groups), as opposed to getting just the matching strings with [`String.prototype.match()`](../string/match).

A newer function has been proposed to simplify matching multiple parts of a string (with capture groups): [`String.prototype.matchAll()`](../string/matchall).

If you are executing a match to find `true` or `false`, use [`RegExp.prototype.test()`](test) method instead.

If you are executing a match to find its index position in the string, use [`String.prototype.search()`](../string/search) method instead.

## Syntax

    exec(str)

### Parameters

`str`  
The string against which to match the regular expression.

### Return value

If the match succeeds, the `exec()` method returns an array (with extra properties `index`, `input`, and if the `d` flag is set, `indices`; see below) and updates the [`lastIndex`](lastindex) property of the regular expression object. The returned array has the matched text as the first item, and then one item for each parenthetical capture group of the matched text.

If the match fails, the `exec()` method returns [`null`](../null), and sets [`lastIndex`](lastindex) to `0`.

## Description

Consider the following example:

    // Match "quick brown" followed by "jumps", ignoring characters in between
    // Remember "brown" and "jumps"
    // Ignore case
    let re = /quick\s(brown).+?(jumps)/igd;
    let result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');

The following table shows the state of `result` after running this script:

<table><colgroup><col style="width: 33%" /><col style="width: 33%" /><col style="width: 33%" /></colgroup><thead><tr class="header"><th>Property/Index</th><th>Description</th><th>Example</th></tr></thead><tbody><tr class="odd"><td><code>[0]</code></td><td>The full string of characters matched</td><td><code>"Quick Brown Fox Jumps"</code></td></tr><tr class="even"><td><code>[1], ...[n]</code></td><td><p>The parenthesized substring matches, if any.</p><p>The number of possible parenthesized substrings is unlimited.</p></td><td><p><code>result[1] === "Brown"</code></p><p><code>result[2] === "Jumps"</code></p></td></tr><tr class="odd"><td><code>index</code></td><td>The 0-based index of the match in the string.</td><td><code>4</code></td></tr><tr class="even"><td><code>indices</code></td><td>An array where each entry represents a substring match. Each substring match itself is an array where the first entry represents its start index and the second entry its end index. 
<br/>

The <code>indices</code> array additionally has a <code>groups</code> property which holds an object of all named capturing groups. The keys are the names of the capturing groups and each value is an array with the first item being the start entry and the second entry being the end index of the capturing group. If the regular expression doesn't contain any capturing groups, <code>groups</code> is <code>undefined</code>.</td><td><p><code>indices[0] === Array [ 4, 25 ]</code></p><p><code>indices[1] === Array [ 10, 15 ]</code></p><p><code>indices[2] === Array [ 20, 25 ]</code></p><p><code>indices.groups === undefined</code></p><p><code>indices.length === 3</code></p></td></tr><tr class="odd"><td><code>input</code></td><td>The original string that was matched against.</td><td><code>The Quick Brown Fox Jumps Over The Lazy Dog</code></td></tr></tbody></table>

The following table shows the state of `re` after running this script:

<table><colgroup><col style="width: 33%" /><col style="width: 33%" /><col style="width: 33%" /></colgroup><thead><tr class="header"><th>Property/Index</th><th>Description</th><th>Example</th></tr></thead><tbody><tr class="odd"><td><code>lastIndex</code></td><td><p>The index at which to start the next match.</p><p>If <code>g</code> is absent, this will always be <code>0</code>.</p></td><td><code>25</code></td></tr><tr class="even"><td><code>dotAll</code></td><td>Indicates if the <code>s</code> flag was used to let <code>.</code> match newlines.</td><td><code>false</code></td></tr><tr class="odd"><td><code>hasIndices</code></td><td>Indicates if the <code>d</code> flag was used to generate an <code>indices</code> property in the returned value containing start and end indices of the substring matches.</td><td><code>true</code></td></tr><tr class="even"><td><code>ignoreCase</code></td><td>Indicates if the <code>i</code> flag was used to ignore case.</td><td><code>true</code></td></tr><tr class="odd"><td><code>global</code></td><td>Indicates if the <code>g</code> flag was used for a global match.</td><td><code>true</code></td></tr><tr class="even"><td><code>multiline</code></td><td>Indicates if the <code>m</code> flag was used to search across multiple lines.</td><td><code>false</code></td></tr><tr class="odd"><td><code>source</code></td><td>The text of the pattern.</td><td><code>quick\s(brown).+?(jumps)</code></td></tr><tr class="even"><td><code>sticky</code></td><td>Indicates if the <code>y</code> flag was used to match only from the index indicated by the <code>lastIndex</code> property.</td><td><code>false</code></td></tr><tr class="odd"><td><code>unicode</code></td><td>Indicates if the <code>u</code> flag was used to treat the pattern as a sequence of Unicode code points.</td><td><code>false</code></td></tr></tbody></table>

## Examples

### Finding successive matches

If your regular expression uses the "`g`" flag, you can use the `exec()` method multiple times to find successive matches in the same string. When you do so, the search starts at the substring of `str` specified by the regular expression's [`lastIndex`](lastindex) property ([`test()`](test) will also advance the [`lastIndex`](lastindex) property). Note that the [`lastIndex`](lastindex) property will not be reset when searching a different string, it will start its search at its existing [`lastIndex`](lastindex) .

For example, assume you have this script:

    let myRe = /ab*/g;
    let str = 'abbcdefabh';
    let myArray;
    while ((myArray = myRe.exec(str)) !== null) {
      let msg = 'Found ' + myArray[0] + '. ';
      msg += 'Next match starts at ' + myRe.lastIndex;
      console.log(msg);
    }

This script displays the following text:

    Found abb. Next match starts at 3
    Found ab. Next match starts at 9

**Warning:** **Do _not_ place the regular expression literal (or [`RegExp`](../regexp) constructor) within the `while` condition!**

It will create an infinite loop if there is a match, due to the [`lastIndex`](lastindex) property being reset upon each iteration.

Also, be sure that the global flag ("`g`") is set, or it will also cause an infinite loop.

### Using exec() with RegExp literals

You can also use `exec()` without creating a [`RegExp`](../regexp) object explicitly:

    let matches = /(hello \S+)/.exec('This is a hello world!');
    console.log(matches[1]);

This will log a message containing `'hello world!'`.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-regexp.prototype.exec">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-regexp.prototype.exec</span></a></td></tr></tbody></table>

`exec`

1

12

1

4

5

1

1

18

4

10.1

1

1.0

## See also

-   [Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) chapter in the [JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
-   [`RegExp`](../regexp)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec</a>

# Math.exp()

The `Math.exp()` function returns `ex`, where `x` is the argument, and `e` is [Euler's number (also known as Napier's constant)](e), the base of the natural logarithms.

## Syntax

    Math.exp(x)

### Parameters

`x`  
A number.

### Return value

A number representing `ex`, where `e` is [Euler's number](e) and `x` is the argument.

## Description

Because `exp()` is a static method of `Math`, you always use it as `Math.exp()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.exp()

    Math.exp(-1); // 0.36787944117144233
    Math.exp(0);  // 1
    Math.exp(1);  // 2.718281828459045

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.exp">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.exp</span></a></td></tr></tbody></table>

`exp`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.E`](e)
-   [`Math.expm1()`](expm1)
-   [`Math.log()`](log)
-   [`Math.log10()`](log10)
-   [`Math.log1p()`](log1p)
-   [`Math.log2()`](log2)
-   [`Math.pow()`](pow)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/exp" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/exp</a>

# Math.expm1()

The `Math.expm1()` function returns `ex - 1`, where `x` is the argument, and [e](e) the base of the natural logarithms.

## Syntax

    Math.expm1(x)

### Parameters

`x`  
A number.

### Return value

A number representing `ex - 1`, where `e` is [Euler's number](e) and `x` is the argument.

## Description

Because `expm1()` is a static method of `Math`, you always use it as `Math.expm1()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.expm1()

    Math.expm1(-1); // -0.6321205588285577
    Math.expm1(0);  // 0
    Math.expm1(1);  // 1.718281828459045

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.expm1">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.expm1</span></a></td></tr></tbody></table>

`expm1`

38

12

25

No

25

8

38

38

25

25

8

3.0

## See also

-   [`Math.E`](e)
-   [`Math.exp()`](exp)
-   [`Math.log()`](log)
-   [`Math.log10()`](log10)
-   [`Math.log1p()`](log1p)
-   [`Math.log2()`](log2)
-   [`Math.pow()`](pow)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/expm1" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/expm1</a>

# Exponentiation (\*\*)

The exponentiation operator (`**`) returns the result of raising the first operand to the power of the second operand. It is equivalent to `Math.pow`, except it also accepts BigInts as operands.

## Syntax

    Operator: var1 ** var2

## Description

The exponentiation operator is right-associative: `a ** b ** c` is equal to `a ** (b ** c)`.

In most languages, such as PHP, Python, and others that have an exponentiation operator (`**`), the exponentiation operator is defined to have a higher precedence than unary operators, such as unary `+` and unary `-`, but there are a few exceptions. For example, in Bash, the `**` operator is defined to have a lower precedence than unary operators.

In JavaScript, it is impossible to write an ambiguous exponentiation expression. That is, you cannot put a unary operator (`+/-/~/!/delete/void/typeof`) immediately before the base number; doing so will cause a SyntaxError.

    -2 ** 2;
    // 4 in Bash, -4 in other languages.
    // This is invalid in JavaScript, as the operation is ambiguous.

    -(2 ** 2);
    // -4 in JavaScript and the author's intention is unambiguous.

Note that some programming languages use the caret symbol ^ for exponentiation, but JavaScript uses that symbol for the [bitwise logical XOR operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#bitwise_xor).

## Examples

### Basic exponentiation

    2 ** 3   // 8
    3 ** 2   // 9
    3 ** 2.5 // 15.588457268119896
    10 ** -1 // 0.1
    NaN ** 2 // NaN

### Associativity

    2 ** 3 ** 2   // 512
    2 ** (3 ** 2) // 512
    (2 ** 3) ** 2 // 64

### Usage with unary operators

To invert the sign of the result of an exponentiation expression:

    -(2 ** 2) // -4

To force the base of an exponentiation expression to be a negative number:

    (-2) ** 2 // 4

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-exp-operator">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-exp-operator</span></a></td></tr></tbody></table>

`Exponentiation`

52

14

52

No

39

10.1

51

52

52

41

10.3

6.0

## See also

-   [Addition operator](addition)
-   [Subtraction operator](subtraction)
-   [Division operator](division)
-   [Multiplication operator](multiplication)
-   [Remainder operator](remainder)
-   [Increment operator](increment)
-   [Decrement operator](decrement)
-   [Unary negation operator](unary_negation)
-   [Unary plus operator](unary_plus)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation</a>

# export

The `export` statement is used when creating JavaScript modules to export live bindings to functions, objects, or primitive values from the module so they can be used by other programs with the [`import`](import) statement. Bindings that are exported can still be modified locally; when imported, although they can only be read by the importing module the value updates whenever it is updated by the exporting module.

Exported modules are in [strict mode](../strict_mode) whether you declare them as such or not. The export statement cannot be used in embedded scripts.

## Syntax

There are two types of exports:

1.  Named Exports (Zero or more exports per module)
2.  Default Exports (One per module)

<!-- -->

    // Exporting individual features
    export let name1, name2, …, nameN; // also var, const
    export let name1 = …, name2 = …, …, nameN; // also var, const
    export function functionName(){...}
    export class ClassName {...}

    // Export list
    export { name1, name2, …, nameN };

    // Renaming exports
    export { variable1 as name1, variable2 as name2, …, nameN };

    // Exporting destructured assignments with renaming
    export const { name1, name2: bar } = o;

    // Default exports
    export default expression;
    export default function (…) { … } // also class, function*
    export default function name1(…) { … } // also class, function*
    export { name1 as default, … };

    // Aggregating modules
    export * from …; // does not set the default export
    export * as name1 from …; // Draft ECMAScript® 2O21
    export { name1, name2, …, nameN } from …;
    export { import1 as name1, import2 as name2, …, nameN } from …;
    export { default, … } from …;

`nameN`  
Identifier to be exported (so that it can be imported via [`import`](import) in another script).

## Description

There are two different types of export, **named** and **default**. You can have multiple named exports per module but only one default export. Each type corresponds to one of the above syntax:

Named exports:

    // export features declared earlier
    export { myFunction, myVariable };

    // export individual features (can export var, let,
    // const, function, class)
    export let myVariable = Math.sqrt(2);
    export function myFunction() { ... };

Default exports:

    // export feature declared earlier as default
    export { myFunction as default };

    // export individual features as default
    export default function () { ... }
    export default class { .. }

    // each export overwrites the previous one

Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.

But a default export can be imported with any name for example:

    // file test.js
    let k; export default k = 12;

    // some other file
    import m from './test'; // note that we have the freedom to use import m instead of import k, because k was default export
    console.log(m);        // will log 12

You can also rename named exports to avoid naming conflicts:

    export { myFunction as function1,
             myVariable as variable };

### Re-exporting / Aggregating

It is also possible to "import/export" from different modules in a parent module so that they are available to import from that module. In other words, one can create a single module concentrating various exports from various modules.

This can be achieved with the "export from" syntax:

    export { default as function1,
             function2 } from 'bar.js';

Which is comparable to a combination of import and export:

    import { default as function1,
             function2 } from 'bar.js';
    export { function1 as default, function2 };

But where `function1` and `function2` do not become available inside the current module.

**Note:** The following is syntactically invalid despite its import equivalent:

    import DefaultExport from 'bar.js'; // Valid

    export DefaultExport from 'bar.js'; // Invalid

The correct way of doing this is to rename the export:

    export { default as DefaultExport } from 'bar.js';

The "export from" syntax allows the `as` token to be omitted; however this will mean the default item cannot be imported as a named import:

    export { default, function2 } from 'bar.js';

## Examples

### Using named exports

In a module `my-module.js`, we could include the following code:

    // module "my-module.js"
    function cube(x) {
      return x * x * x;
    }

    const foo = Math.PI + Math.SQRT2;

    var graph = {
      options: {
          color:'white',
          thickness:'2px'
      },
      draw: function() {
          console.log('From graph draw function');
      }
    }

    export { cube, foo, graph };

Then in the top-level module included in your HTML page, we could have:

    import { cube, foo, graph } from './my-module.js';

    graph.options = {
        color:'blue',
        thickness:'3px'
    };

    graph.draw();
    console.log(cube(3)); // 27
    console.log(foo);    // 4.555806215962888

It is important to note the following:

-   You need to include this script in your HTML with a [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) element of type="module", so that it gets recognized as a module and dealt with appropriately.
-   You can't run JS modules via a `file://` URL — you'll get [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) errors. You need to run it via an HTTP server.

### Using the default export

If we want to export a single value or to have a fallback value for your module, you could use a default export:

    // module "my-module.js"

    export default function cube(x) {
      return x * x * x;
    }

Then, in another script, it is straightforward to import the default export:

    import cube from './my-module.js';
    console.log(cube(3)); // 27

### Using export from

Let's take an example where we have the following hierarchy:

-   `childModule1.js`: exporting `myFunction` and `myVariable`
-   `childModule2.js`: exporting `myClass`
-   `parentModule.js`: acting as an aggregator (and doing nothing else)
-   top level module: consuming the exports of `parentModule.js`

This is what it would look like using code snippets:

    // In childModule1.js
    let myFunction = ...; // assign something useful to myFunction
    let myVariable = ...; // assign something useful to myVariable
    export {myFunction, myVariable};

    // In childModule2.js
    let myClass = ...; // assign something useful to myClass
    export myClass;

    // In parentModule.js
    // Only aggregating the exports from childModule1 and childModule2
    // to re-export them
    export { myFunction, myVariable } from 'childModule1.js';
    export { myClass } from 'childModule2.js';

    // In top-level module
    // We can consume the exports from a single module since parentModule
    // "collected"/"bundled" them in a single source
    import { myFunction, myVariable, myClass } from 'parentModule.js'

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-exports">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-exports</span></a></td></tr></tbody></table>

`export`

61

16

15

60

54-60

No

48

10.1

61

61

60

54-60

45

10.3

8.0

`default`

61

16

15

60

54-60

No

48

10.1

No

61

60

54-60

45

10.3

8.0

`namespace`

72

79

80

No

60

No

No

72

80

51

No

11.0

## See also

-   [`import`](import)
-   [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) guide
-   [ES6 in Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/), Hacks blog post by Jason Orendorff
-   [ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/), Hacks blog post by Lin Clark
-   [Axel Rauschmayer's book: "Exploring JS: Modules"](https://exploringjs.com/es6/ch_modules.html)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export</a>

# WebAssembly.Module.exports()

The `WebAssembly.Module.exports()` function returns an array containing descriptions of all the declared exports of the given `Module`.

## Syntax

    WebAssembly.Module.exports(module)

### Parameters

_module_  
A [`WebAssembly.Module`](../module) object.

### Return value

An array containing objects representing the exported functions of the given module.

### Exceptions

If module is not a [`WebAssembly.Module`](../module) object instance, a [`TypeError`](../../typeerror) is thrown.

## Examples

### Using exports

The following example (see our [index-compile.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html) demo on GitHub, and [view it live](https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html) also) compiles the loaded simple.wasm byte code using the [`WebAssembly.compileStreaming()`](../compilestreaming) method and then sends it to a [worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) using [postMessage()](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage).

    var worker = new Worker("wasm_worker.js");

    WebAssembly.compileStreaming(fetch('simple.wasm'))
    .then(mod =>
      worker.postMessage(mod)
    );

In the worker (see `wasm_worker.js`) we define an import object for the module to use, then set up an event handler to receive the module from the main thread. when the module is received, we create an instance from it using the [`WebAssembly.Instantiate()`](../instantiate) method, invoke an exported function from inside it, then show how we can return information on the available exports on a module using `WebAssembly.Module.exports`.

    var importObject = {
      imports: {
        imported_func: function(arg) {
          console.log(arg);
        }
      }
    };

    onmessage = function(e) {
      console.log('module received from main thread');
      var mod = e.data;

      WebAssembly.instantiate(mod, importObject).then(function(instance) {
        instance.exports.exported_func();
      });

      var exports = WebAssembly.Module.exports(mod);
      console.log(exports[0]);
    };

The `exports[0]` output looks like this:

    { name: "exported_func", kind: "function" }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#dom-module-exports">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#dom-module-exports</span></a></td></tr></tbody></table>

`exports`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports</a>

# extends

The `extends` keyword is used in [class declarations](../statements/class) or [class expressions](../operators/class) to create a class that is a child of another class.

## Syntax

    class ChildClass extends ParentClass { ... }

## Description

The `extends` keyword can be used to subclass custom classes as well as built-in objects.

The `.prototype` of the extension must be an [`Object`](../global_objects/object) or [`null`](../global_objects/null).

## Examples

### Using extends

The first example creates a class called `Square` from a class called `Polygon`. This example is extracted from this [live demo](https://googlechrome.github.io/samples/classes-es6/index.html) [(source)](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html).

    class Square extends Polygon {
      constructor(length) {
        // Here, it calls the parent class' constructor with lengths
        // provided for the Polygon's width and height
        super(length, length);
        // Note: In derived classes, super() must be called before you
        // can use 'this'. Leaving this out will cause a reference error.
        this.name = 'Square';
      }

      get area() {
        return this.height * this.width;
      }
    }

### Using extends with built-in objects

This example extends the built-in [`Date`](../global_objects/date) object. This example is extracted from this [live demo](https://googlechrome.github.io/samples/classes-es6/index.html) [(source)](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html).

    class myDate extends Date {

      getFormattedDate() {
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
      }
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-class-definitions">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'extends' in that specification.</span></a></td></tr></tbody></table>

`extends`

49

42-49

Strict mode is required.

42-49

13

45

No

36

29-36

Strict mode is required.

29-36

9

49

42-49

Strict mode is required.

49

42-49

Strict mode is required.

42-49

45

36

29-36

Strict mode is required.

29-36

9

5.0

4.0-5.0

Strict mode is required.

## See also

-   [Classes](../classes)
-   [constructor](constructor)
-   [super](../operators/super)
-   [Anurag Majumdar - Super & Extends in JavaScript](https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends</a>

# Error.prototype.fileName

**Non-standard**

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The `fileName` property contains the path to the file that raised this error.

## Description

This non-standard property contains the path to the file that raised this error. If called from a debugger context, the Firefox Developer Tools for example, "debugger eval code" is returned.

## Examples

### Using fileName

    var e = new Error('Could not parse input');
    throw e;
    // e.fileName could look like "file:///C:/example.html"

## Specifications

Not part of any standard.

`fileName`

No

No

1

No

No

No

No

No

4

No

No

No

## See also

-   [`Error.prototype.stack`](stack)
-   [`Error.prototype.columnNumber`](columnnumber)
-   [`Error.prototype.lineNumber`](linenumber)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/fileName" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/fileName</a>

# Array.prototype.fill()

The `fill()` method changes all elements in an array to a static value, from a start index (default `0`) to an end index (default `array.length`). It returns the modified array.

## Syntax

    fill(value)
    fill(value, start)
    fill(value, start, end)

### Parameters

`value`  
Value to fill the array with. (Note all elements in the array will be this exact value.)

`start` <span class="badge inline optional">Optional</span>  
Start index, default `0`.

`end` <span class="badge inline optional">Optional</span>  
End index, default `arr.length`.

### Return value

The modified array, filled with `value`.

## Description

-   If `start` is negative, it is treated as `array.length + start`.
-   If `end` is negative, it is treated as `array.length + end`.
-   `fill` is intentionally generic: it does not require that its `this` value be an `Array` object.
-   `fill` is a mutator method: it will change the array itself and return it, not a copy of it.
-   If the first parameter is an object, each slot in the array will reference that object.

## Polyfill

    if (!Array.prototype.fill) {
      Object.defineProperty(Array.prototype, 'fill', {
        value: function(value) {

          // Steps 1-2.
          if (this == null) {
            throw new TypeError('this is null or not defined');
          }

          var O = Object(this);

          // Steps 3-5.
          var len = O.length >>> 0;

          // Steps 6-7.
          var start = arguments[1];
          var relativeStart = start >> 0;

          // Step 8.
          var k = relativeStart < 0 ?
            Math.max(len + relativeStart, 0) :
            Math.min(relativeStart, len);

          // Steps 9-10.
          var end = arguments[2];
          var relativeEnd = end === undefined ?
            len : end >> 0;

          // Step 11.
          var finalValue = relativeEnd < 0 ?
            Math.max(len + relativeEnd, 0) :
            Math.min(relativeEnd, len);

          // Step 12.
          while (k < finalValue) {
            O[k] = value;
            k++;
          }

          // Step 13.
          return O;
        }
      });
    }

If you need to support truly obsolete JavaScript engines that don't support [`Object.defineProperty`](../object/defineproperty), it's best not to polyfill `Array.prototype` methods at all, as you can't make them non-enumerable.

## Examples

### Using fill

    [1, 2, 3].fill(4)                // [4, 4, 4]
    [1, 2, 3].fill(4, 1)             // [1, 4, 4]
    [1, 2, 3].fill(4, 1, 2)          // [1, 4, 3]
    [1, 2, 3].fill(4, 1, 1)          // [1, 2, 3]
    [1, 2, 3].fill(4, 3, 3)          // [1, 2, 3]
    [1, 2, 3].fill(4, -3, -2)        // [4, 2, 3]
    [1, 2, 3].fill(4, NaN, NaN)      // [1, 2, 3]
    [1, 2, 3].fill(4, 3, 5)          // [1, 2, 3]
    Array(3).fill(4)                 // [4, 4, 4]
    [].fill.call({ length: 3 }, 4)   // {0: 4, 1: 4, 2: 4, length: 3}

    // A single object, referenced by each slot of the array:
    let arr = Array(3).fill({}) // [{}, {}, {}]
    arr[0].hi = "hi"            // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

### Using fill() to create a matrix of all 1

This example shows how to create a matrix of all 1, like the _ones()_ function of Octave or MATLAB.

    const arr = new Array(3);
    for (let i=0; i<arr.length; i++) {
      arr[i] = new Array(4).fill(1); // Creating an array of size 4 and filled of 1
    }
    arr[0][0] = 10;
    console.log(arr[0][0]); // 10
    console.log(arr[1][0]); // 1
    console.log(arr[2][0]); // 1

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.fill">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Array.prototype.fill' in that specification.</span></a></td></tr></tbody></table>

`fill`

45

12

31

No

32

8

45

45

31

32

8

5.0

## See also

-   [`Array`](../array)
-   [`TypedArray.prototype.fill()`](../typedarray/fill)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill</a>

# Array.prototype.filter()

The `filter()` method **creates a new array** with all elements that pass the test implemented by the provided function.

## Syntax

    // Arrow function
    filter((element) => { ... } )
    filter((element, index) => { ... } )
    filter((element, index, array) => { ... } )

    // Callback function
    filter(callbackFn)
    filter(callbackFn, thisArg)

    // Inline callback function
    filter(function callbackFn(element) { ... })
    filter(function callbackFn(element, index) { ... })
    filter(function callbackFn(element, index, array){ ... })
    filter(function callbackFn(element, index, array) { ... }, thisArg)

### Parameters

`callbackFn`  
Function is a predicate, to test each element of the array. Return a value that coerces to `true` to keep the element, or to `false` otherwise.

It accepts three arguments:

`element`  
The current element being processed in the array.

`index`<span class="badge inline optional">Optional</span>  
The index of the current element being processed in the array.

`array`<span class="badge inline optional">Optional</span>  
The array `filter` was called upon.

`thisArg`<span class="badge inline optional">Optional</span>  
Value to use as `this` when executing `callbackFn`.

### Return value

A new array with the elements that pass the test. If no elements pass the test, an empty array will be returned.

## Description

`filter()` calls a provided `callbackFn` function once for each element in an array, and constructs a new array of all the values for which `callbackFn` returns [a value that coerces to `true`](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). `callbackFn` is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values. Array elements which do not pass the `callbackFn` test are skipped, and are not included in the new array.

`callbackFn` is invoked with three arguments:

1.  the value of the element
2.  the index of the element
3.  the Array object being traversed

If a `thisArg` parameter is provided to `filter`, it will be used as the callback's `this` value. Otherwise, the value `undefined` will be used as its `this` value. The `this` value ultimately observable by `callback` is determined according to [the usual rules for determining the `this` seen by a function](../../operators/this).

`filter()` does not mutate the array on which it is called.

The range of elements processed by `filter()` is set before the first invocation of `callbackFn`. Elements which are appended to the array (from `callbackFn`) after the call to `filter()` begins will not be visited by `callbackFn`. If existing elements of the array are deleted in the same way they will not be visited.

## Polyfill

`filter()` was added to the ECMA-262 standard in the 5th edition. Therefore, it may not be present in all implementations of the standard.

You can work around this by inserting the following code at the beginning of your scripts, allowing use of `filter()` in ECMA-262 implementations which do not natively support it. This algorithm is exactly equivalent to the one specified in ECMA-262, 5th edition, assuming that `fn.call` evaluates to the original value of [`Function.prototype.bind()`](../function/bind), and that [`Array.prototype.push()`](push) has its original value.

    if (!Array.prototype.filter){
      Array.prototype.filter = function(func, thisArg) {
        'use strict';
        if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
            throw new TypeError();

        var len = this.length >>> 0,
            res = new Array(len), // preallocate array
            t = this, c = 0, i = -1;

        var kValue;
        if (thisArg === undefined){
          while (++i !== len){
            // checks to see if the key was set
            if (i in this){
              kValue = t[i]; // in case t is changed in callback
              if (func(t[i], i, t)){
                res[c++] = kValue;
              }
            }
          }
        }
        else{
          while (++i !== len){
            // checks to see if the key was set
            if (i in this){
              kValue = t[i];
              if (func.call(thisArg, t[i], i, t)){
                res[c++] = kValue;
              }
            }
          }
        }

        res.length = c; // shrink down array to proper size
        return res;
      };
    }

## Examples

### Filtering out all small values

The following example uses `filter()` to create a filtered array that has all elements with values less than `10` removed.

    function isBigEnough(value) {
      return value >= 10
    }

    let filtered = [12, 5, 8, 130, 44].filter(isBigEnough)
    // filtered is [12, 130, 44]

### Find all prime numbers in an array

The following example returns all prime numbers in the array:

    const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

    function isPrime(num) {
      for (let i = 2; num > i; i++) {
        if (num % i == 0) {
          return false;
        }
      }
      return num > 1;
    }

    console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

### Filtering invalid entries from JSON

The following example uses `filter()` to create a filtered json of all elements with non-zero, numeric `id`.

    let arr = [
      { id: 15 },
      { id: -1 },
      { id: 0 },
      { id: 3 },
      { id: 12.2 },
      { },
      { id: null },
      { id: NaN },
      { id: 'undefined' }
    ]

    let invalidEntries = 0

    function filterByID(item) {
      if (Number.isFinite(item.id) && item.id !== 0) {
        return true
      }
      invalidEntries++
      return false;
    }

    let arrByID = arr.filter(filterByID)

    console.log('Filtered Array\n', arrByID)
    // Filtered Array
    // [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

    console.log('Number of Invalid Entries = ', invalidEntries)
    // Number of Invalid Entries = 5

### Searching in array

Following example uses `filter()` to filter array content based on search criteria.

    let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']

    /**
     * Filter array items based on search criteria (query)
     */
    function filterItems(arr, query) {
      return arr.filter(function(el) {
          return el.toLowerCase().indexOf(query.toLowerCase()) !== -1
      })
    }

    console.log(filterItems(fruits, 'ap'))  // ['apple', 'grapes']
    console.log(filterItems(fruits, 'an'))  // ['banana', 'mango', 'orange']

#### ES2015 Implementation

    const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']

    /**
     * Filter array items based on search criteria (query)
     */
    const filterItems = (arr, query) => {
      return arr.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) !== -1)
    }

    console.log(filterItems(fruits, 'ap'))  // ['apple', 'grapes']
    console.log(filterItems(fruits, 'an'))  // ['banana', 'mango', 'orange']

### Affecting Initial Array (modifying, appending and deleting)

The following examples tests the behavior of the `filter` method when the array is modified.

    // Modifying each words
    let words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present']

    const modifiedWords = words.filter( (word, index, arr) => {
      arr[index+1] +=' extra'
      return word.length < 6
    })

    console.log(modifiedWords)
    // Notice there are three words below length 6, but since they've been modified one is returned
    // ["spray"]

    // Appending new words
    words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present']
    const appendedWords = words.filter( (word, index, arr) => {
      arr.push('new')
      return word.length < 6
    })

    console.log(appendedWords)
    // Only three fits the condition even though the `words` itself now has a lot more words with character length less than 6
    // ["spray" ,"limit" ,"elite"]

    // Deleting words
    words = ['spray', 'limit', 'exuberant', 'destruction', 'elite', 'present']
    const deleteWords = words.filter( (word, index, arr) => {
      arr.pop()
      return word.length < 6
    })

    console.log(deleteWords)
    // Notice 'elite' is not even obtained as its been popped off `words` before filter can even get there
    // ["spray" ,"limit"]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.filter">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.filter</span></a></td></tr></tbody></table>

`filter`

1

12

1.5

9

9.5

3

≤37

18

4

10.1

1

1.0

## See also

-   [`Array.prototype.forEach()`](foreach)
-   [`Array.prototype.every()`](every)
-   [`Array.prototype.some()`](some)
-   [`Array.prototype.reduce()`](reduce)
-   [`Array.prototype.find()`](find)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter</a>

# Promise.prototype.finally()

The `finally()` method returns a [`Promise`](../promise). When the promise is settled, i.e either fulfilled or rejected, the specified callback function is executed. This provides a way for code to be run whether the promise was fulfilled successfully or rejected once the `Promise` has been dealt with.

This helps to avoid duplicating code in both the promise's [`then()`](then) and [`catch()`](catch) handlers.

## Syntax

    p.finally(onFinally);

    p.finally(function() {
       // settled (fulfilled or rejected)
    });

### Parameters

`onFinally`  
A [`Function`](../function) called when the `Promise` is settled.

### Return value

Returns a [`Promise`](../promise) whose `finally` handler is set to the specified function, `onFinally`.

## Description

The `finally()` method can be useful if you want to do some processing or cleanup once the promise is settled, regardless of its outcome.

The `finally()` method is very similar to calling `.then(onFinally, onFinally)` however there are a couple of differences:

-   When creating a function inline, you can pass it once, instead of being forced to either declare it twice, or create a variable for it
-   A `finally` callback will not receive any argument, since there's no reliable means of determining if the promise was fulfilled or rejected. This use case is for precisely when you _do not care_ about the rejection reason, or the fulfillment value, and so there's no need to provide it. So for example:
    -   Unlike `Promise.resolve(2).then(() => {}, () => {})` (which will be resolved with `undefined`), `Promise.resolve(2).finally(() => {})` will be resolved with `2`.
    -   Similarly, unlike `Promise.reject(3).then(() => {}, () => {})` (which will be fulfilled with `undefined`), `Promise.reject(3).finally(() => {})` will be rejected with `3`.

**Note:** A `throw` (or returning a rejected promise) in the `finally` callback will reject the new promise with the rejection reason specified when calling `throw`.

## Examples

### Using finally

    let isLoading = true;

    fetch(myRequest).then(function(response) {
        var contentType = response.headers.get("content-type");
        if(contentType && contentType.includes("application/json")) {
          return response.json();
        }
        throw new TypeError("Oops, we haven't got JSON!");
      })
      .then(function(json) { /* process your JSON further */ })
      .catch(function(error) { console.error(error); /* this line can also throw, e.g. when console = {} */ })
      .finally(function() { isLoading = false; });

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-promise.prototype.finally">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-promise.prototype.finally</span></a></td></tr></tbody></table>

`finally`

63

18

58

No

50

11.1

63

63

58

46

11.3

8.0

## See also

-   [`Promise`](../promise)
-   [`Promise.prototype.then()`](then)
-   [`Promise.prototype.catch()`](catch)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally</a>

# Array.prototype.find()

The `find()` method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, [`undefined`](../undefined) is returned.

-   If you need the **index** of the found element in the array, use [`findIndex()`](findindex).
-   If you need to find the **index of a value**, use [`Array.prototype.indexOf()`](indexof). (It's similar to [`findIndex()`](findindex), but checks each element for equality with the value instead of using a testing function.)
-   If you need to find if a value **exists** in an array, use [`Array.prototype.includes()`](includes). Again, it checks each element for equality with the value instead of using a testing function.
-   If you need to find if any element satisfies the provided testing function, use [`Array.prototype.some()`](some).

## Syntax

    // Arrow function
    find((element) => { ... } )
    find((element, index) => { ... } )
    find((element, index, array) => { ... } )

    // Callback function
    find(callbackFn)
    find(callbackFn, thisArg)

    // Inline callback function
    find(function callbackFn(element) { ... })
    find(function callbackFn(element, index) { ... })
    find(function callbackFn(element, index, array){ ... })
    find(function callbackFn(element, index, array) { ... }, thisArg)

### Parameters

`callbackFn`  
Function to execute on each value in the array, taking 3 arguments:

`element`  
The current element in the array.

`index` <span class="badge inline optional">Optional</span>  
The index (position) of the current element in the array.

`array` <span class="badge inline optional">Optional</span>  
The array that `find` was called on.

`thisArg` <span class="badge inline optional">Optional</span>  
Object to use as [`this`](../../operators/this) inside `callbackFn`.

### Return value

The **value** of the **first element** in the array that satisfies the provided testing function. Otherwise, [`undefined`](../undefined) is returned.

## Description

The `find` method executes the `callbackFn` function once for each index of the array until the `callbackFn` returns a [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) value. If so, `find` immediately returns the value of that element. Otherwise, `find` returns [`undefined`](../undefined).

`callbackFn` is invoked for _every_ index of the array, not just those with assigned values. This means it may be less efficient for sparse arrays, compared to methods that only visit assigned values.

If a `thisArg` parameter is provided to `find`, it will be used as the `this` value inside each invocation of the `callbackFn`. If it is not provided, then [`undefined`](../undefined) is used.

The `find` method does not mutate the array on which it is called, but the function provided to `callbackFn` can. If so, the elements processed by `find` are set _before_ the first invocation of `callbackFn`. Therefore:

-   `callbackFn` will not visit any elements added to the array after the call to `find` begins.
-   If an existing, yet-unvisited element of the array is changed by `callbackFn`, its value passed to the `callbackFn` will be the value at the time `find` visits that element's index.
-   Elements that are [`deleted`](../../operators/delete) are still visited.

## Examples

### Find an object in an array by one of its properties

    const inventory = [
      {name: 'apples', quantity: 2},
      {name: 'bananas', quantity: 0},
      {name: 'cherries', quantity: 5}
    ];

    function isCherries(fruit) {
      return fruit.name === 'cherries';
    }

    console.log(inventory.find(isCherries));
    // { name: 'cherries', quantity: 5 }

#### Using arrow function and destructuring

    const inventory = [
      {name: 'apples', quantity: 2},
      {name: 'bananas', quantity: 0},
      {name: 'cherries', quantity: 5}
    ];

    const result = inventory.find( ({ name }) => name === 'cherries' );

    console.log(result) // { name: 'cherries', quantity: 5 }

### Find a prime number in an array

The following example finds an element in the array that is a prime number (or returns [`undefined`](../undefined) if there is no prime number):

    function isPrime(element, index, array) {
      let start = 2;
      while (start <= Math.sqrt(element)) {
        if (element % start++ < 1) {
          return false;
        }
      }
      return element > 1;
    }

    console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
    console.log([4, 5, 8, 12].find(isPrime)); // 5

The following examples show that nonexistent and deleted elements _are_ visited, and that the value passed to the callback is their value when visited:

    // Declare array with no elements at indexes 2, 3, and 4
    const array = [0,1,,,,5,6];

    // Shows all indexes, not just those with assigned values
    array.find(function(value, index) {
      console.log('Visited index ', index, ' with value ', value);
    });

    // Shows all indexes, including deleted
    array.find(function(value, index) {
      // Delete element 5 on first iteration
      if (index === 0) {
        console.log('Deleting array[5] with value ', array[5]);
        delete array[5];
      }
      // Element 5 is still visited even though deleted
      console.log('Visited index ', index, ' with value ', value);
    });
    // expected output:
    // Deleting array[5] with value 5
    // Visited index 0 with value 0
    // Visited index 1 with value 1
    // Visited index 2 with value undefined
    // Visited index 3 with value undefined
    // Visited index 4 with value undefined
    // Visited index 5 with value undefined
    // Visited index 6 with value 6

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.find">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.find</span></a></td></tr></tbody></table>

`find`

45

12

25

No

32

8

45

45

4

32

8

5.0

## See also

-   [`Array.prototype.findIndex()`](findindex) – find and return an index
-   [`Array.prototype.includes()`](includes) – test whether a value exists in the array
-   [`Array.prototype.filter()`](filter) – remove all non-matching elements
-   [`Array.prototype.every()`](every) – test all elements
-   [`Array.prototype.some()`](some) – test until one element matches

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find</a>

# TypedArray.prototype.findIndex()

The `findIndex()` method returns an **index** in the typed array, if an element in the typed array satisfies the provided testing function. Otherwise -1 is returned.

See also the [`find()`](find) method, which returns the **value** of a found element in the typed array instead of its index.

## Syntax

    // Arrow function
    findIndex((element) => { ... } )
    findIndex((element, index) => { ... } )
    findIndex((element, index, array) => { ... } )

    // Callback function
    findIndex(callbackFn)
    findIndex(callbackFn, thisArg)

    // Inline callback function
    findIndex(function callbackFn(element) { ... })
    findIndex(function callbackFn(element, index) { ... })
    findIndex(function callbackFn(element, index, array){ ... })
    findIndex(function callbackFn(element, index, array) { ... }, thisArg)

### Parameters

`callbackFn`  
Function to execute on each value in the typed array, taking three arguments:

`element`  
The current element being processed in the typed array.

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

`array`  
The typed array `findIndex()` was called upon.

`thisArg` <span class="badge inline optional">Optional</span>  
Object to use as `this` when executing `callbackFn`.

### Return value

An index in the array if an element passes the test; otherwise, `-1`.

## Description

The `findIndex()` method executes the `callbackFn` function once for each element present in the typed array until it finds one where `callbackFn` returns a true value. If such an element is found, `findIndex()` immediately returns the index of that element. Otherwise, `findIndex()` returns -1. `callbackFn` is invoked only for indexes of the typed array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

`callbackFn` is invoked with three arguments: the value of the element, the index of the element, and the typed array object being traversed.

If a `thisArg` parameter is provided to `findIndex()`, it will be used as the `this` for each invocation of the `callback`. If it is not provided, then [`undefined`](../undefined) is used.

`findIndex()` does not mutate the typed array on which it is called.

The range of elements processed by `findIndex()` is set before the first invocation of `callbackFn`. Elements that are appended to the typed array after the call to `findIndex()` begins will not be visited by `callbackFn`. If an existing, unvisited element of the typed array is changed by `callbackFn`, its value passed to the visiting `callbackFn` will be the value at the time that `findIndex()` visits that element's index; elements that are deleted are not visited.

## Examples

### Find the index of a prime number in a typed array

The following example finds the index of an element in the typed array that is a prime number (or returns `-1` if there is no prime number).

    function isPrime(element, index, array) {
      var start = 2;
      while (start <= Math.sqrt(element)) {
        if (element % start++ < 1) {
          return false;
        }
      }
      return element > 1;
    }

    var uint8 = new Uint8Array([4, 6, 8, 12]);
    var uint16 = new Uint16Array([4, 6, 7, 12]);

    console.log(uint8.findIndex(isPrime)); // -1, not found
    console.log(uint16.findIndex(isPrime)); // 2

## Polyfill

    TypedArray.prototype.findIndex = Array.prototype.findIndex = Array.prototype.findIndex || function(evaluator, thisArg) {
            'use strict';
            if (!this) {
              throw new TypeError('Array.prototype.some called on null or undefined');
            }

            if (typeof(evaluator) !== 'function') {
                if (typeof(evaluator) === 'string') {
                    // Attempt to convert it to a function
                    if ( ! (evaluator = eval(evaluator)) ){
                        throw new TypeError();
                    }
                } else {
                    throw new TypeError();
                }
            }

            var i;
            if (thisArg === undefined) {  // Optimize for thisArg
                for (i in this) {
                    if (evaluator(this[i], i, this)) {
                        return i;
                    }
                }
                return -1;
            }
            for (i in this) {
                if (evaluator.call(thisArg, this[i], i, this)) {
                    return i;
                }
            }
            return -1;
    };

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="#">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-%typedarray%.prototype.findindex</span></a></td></tr></tbody></table>

`findIndex`

45

14

37

No

32

9.1

45

45

37

32

9.3

5.0

## See also

-   [`TypedArray.prototype.find()`](find)
-   [`TypedArray.prototype.indexOf()`](indexof)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex</a>

# String.prototype.fixed()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `fixed()` method creates a [`<tt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt) HTML element that causes a string to be displayed in fixed-pitch font.

## Syntax

    fixed()

### Return value

A string representing a [`<tt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt) HTML element.

## Description

The `fixed()` method embeds a string in a `<tt>` element: "`<tt>str</tt>`".

## Examples

### Using fixed()

The following example uses the `fixed` method to change the formatting of a string:

    var worldString = 'Hello, world';
    console.log(worldString.fixed()); // "<tt>Hello, world</tt>"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.fixed">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.fixed</span></a></td></tr></tbody></table>

`fixed`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.bold()`](bold)
-   [`String.prototype.italics()`](italics)
-   [`String.prototype.strike()`](strike)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fixed" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fixed</a>

# RegExp.prototype.flags

The `flags` property returns a string consisting of the [flags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags_2) of the current regular expression object.

Property attributes of `RegExp.prototype.flags`

Writable

no

Enumerable

no

Configurable

yes

## Description

Flags in the `flags` property are sorted alphabetically (from left to right, e.g. `"gimsuy"`).

## Examples

### Using flags

    /foo/ig.flags;   // "gi"
    /bar/myu.flags;  // "muy"

## Polyfill

    if (RegExp.prototype.flags === undefined) {
      Object.defineProperty(RegExp.prototype, 'flags', {
        configurable: true,
        get: function() {
          return this.toString().match(/[gimsuy]*$/)[0];
        }
      });
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-get-regexp.prototype.flags">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-get-regexp.prototype.flags</span></a></td></tr></tbody></table>

`flags`

49

79

37

No

39

9

49

49

37

41

9

5.0

## See also

-   [`RegExp.prototype.source`](source)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/flags" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/flags</a>

# Array.prototype.flat()

The `flat()` method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

## Syntax

    flat()
    flat(depth)

### Parameters

`depth` <span class="badge inline optional">Optional</span>  
The depth level specifying how deep a nested array structure should be flattened. Defaults to 1.

### Return value

A new array with the sub-array elements concatenated into it.

## Alternatives

### reduce and concat

    const arr = [1, 2, [3, 4]];

    // To flat single level array
    arr.flat();
    // is equivalent to
    arr.reduce((acc, val) => acc.concat(val), []);
    // [1, 2, 3, 4]

    // or with decomposition syntax
    const flattened = arr => [].concat(...arr);

### reduce + concat + isArray + recursivity

    const arr = [1, 2, [3, 4, [5, 6]]];

    // to enable deep level flatten use recursion with reduce and concat
    function flatDeep(arr, d = 1) {
       return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
                    : arr.slice();
    };

    flatDeep(arr, Infinity);
    // [1, 2, 3, 4, 5, 6]

### Use a stack

    // non recursive flatten deep using a stack
    // note that depth control is hard/inefficient as we will need to tag EACH value with its own depth
    // also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster
    function flatten(input) {
      const stack = [...input];
      const res = [];
      while(stack.length) {
        // pop value from stack
        const next = stack.pop();
        if(Array.isArray(next)) {
          // push back array items, won't modify the original input
          stack.push(...next);
        } else {
          res.push(next);
        }
      }
      // reverse to restore input order
      return res.reverse();
    }

    const arr = [1, 2, [3, 4, [5, 6]]];
    flatten(arr);
    // [1, 2, 3, 4, 5, 6]

### Use Generator function

    function* flatten(array, depth) {
        if(depth === undefined) {
          depth = 1;
        }
        for(const item of array) {
            if(Array.isArray(item) && depth > 0) {
              yield* flatten(item, depth - 1);
            } else {
              yield item;
            }
        }
    }

    const arr = [1, 2, [3, 4, [5, 6]]];
    const flattened = [...flatten(arr, Infinity)];
    // [1, 2, 3, 4, 5, 6]

## Examples

### Flattening nested arrays

    const arr1 = [1, 2, [3, 4]];
    arr1.flat();
    // [1, 2, 3, 4]

    const arr2 = [1, 2, [3, 4, [5, 6]]];
    arr2.flat();
    // [1, 2, 3, 4, [5, 6]]

    const arr3 = [1, 2, [3, 4, [5, 6]]];
    arr3.flat(2);
    // [1, 2, 3, 4, 5, 6]

    const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
    arr4.flat(Infinity);
    // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

### Flattening and array holes

The flat method removes empty slots in arrays:

    const arr5 = [1, 2, , 4, 5];
    arr5.flat();
    // [1, 2, 4, 5]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.flat">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Array.prototype.flat' in that specification.</span></a></td></tr></tbody></table>

`flat`

69

79

62

No

56

12

69

69

62

48

12

10.0

## See also

-   [`Array.prototype.flatMap()`](flatmap)
-   [`Array.prototype.map()`](map)
-   [`Array.prototype.reduce()`](reduce)
-   [`Array.prototype.concat()`](concat)
-   [A polyfill](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat</a>

# Array.prototype.flatMap()

The `flatMap()` method returns a new array formed by applying a given callback function to each element of the array, and then flattening the result by one level. It is identical to a [`map()`](map) followed by a [`flat()`](flat) of depth 1, but slightly more efficient than calling those two methods separately.

## Syntax

    // Arrow function
    flatMap((currentValue) => { ... } )
    flatMap((currentValue, index) => { ... } )
    flatMap((currentValue, index, array) => { ... } )

    // Callback function
    flatMap(callbackFn)
    flatMap(callbackFn, thisArg)

    // Inline callback function
    flatMap(function callbackFn(currentValue) { ... })
    flatMap(function callbackFn(currentValue, index) { ... })
    flatMap(function callbackFn(currentValue, index, array){ ... })
    flatMap(function callbackFn(currentValue, index, array) { ... }, thisArg)

### Parameters

`callback`  
Function that produces an element of the new Array, taking three arguments:

`currentValue`  
The current element being processed in the array.

`index`<span class="badge inline optional">Optional</span>  
The index of the current element being processed in the array.

`array`<span class="badge inline optional">Optional</span>  
The array `map` was called upon.

`thisArg`<span class="badge inline optional">Optional</span>  
Value to use as `this` when executing `callback`.

### Return value

A new array with each element being the result of the callback function and flattened to a depth of 1.

## Description

See [`Array.prototype.map()`](map) for a detailed description of the callback function. The `flatMap` method is identical to a `map` followed by a call to `flat` of depth 1.

### Alternative

#### `reduce()` and `concat()`

    var arr = [1, 2, 3, 4];

    arr.flatMap(x => [x, x * 2]);
    // is equivalent to
    arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
    // [1, 2, 2, 4, 3, 6, 4, 8]

Note, however, that this is inefficient and should be avoided for large arrays: in each iteration, it creates a new temporary array that must be garbage-collected, and it copies elements from the current accumulator array into a new array instead of just adding the new elements to the existing array.

## Examples

### `map()` and `flatMap()`

    let arr1 = [1, 2, 3, 4];

    arr1.map(x => [x * 2]);
    // [[2], [4], [6], [8]]

    arr1.flatMap(x => [x * 2]);
    // [2, 4, 6, 8]

    // only one level is flattened
    arr1.flatMap(x => [[x * 2]]);
    // [[2], [4], [6], [8]]

While the above could have been achieved by using map itself, here is an example that better showcases the use of `flatMap`.

Let's generate a list of words from a list of sentences.

    let arr1 = ["it's Sunny in", "", "California"];

    arr1.map(x => x.split(" "));
    // [["it's","Sunny","in"],[""],["California"]]

    arr1.flatMap(x => x.split(" "));
    // ["it's","Sunny","in", "", "California"]

Notice, the output list length can be different from the input list length.

### For adding and removing items during a `map()`

`flatMap` can be used as a way to add and remove items (modify the number of items) during a `map`. In other words, it allows you to map _many items to many items_ (by handling each input item separately), rather than always _one-to-one_. In this sense, it works like the opposite of [filter](filter). Return a 1-element array to keep the item, a multiple-element array to add items, or a 0-element array to remove the item.

    // Let's say we want to remove all the negative numbers
    // and split the odd numbers into an even number and a 1
    let a = [5, 4, -3, 20, 17, -33, -4, 18]
    //       |\  \  x   |  | \   x   x   |
    //      [4,1, 4,   20, 16, 1,       18]

    a.flatMap( (n) =>
      (n < 0) ?      [] :
      (n % 2 == 0) ? [n] :
                     [n-1, 1]
    )

    // expected output: [4, 1, 4, 20, 16, 1, 18]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.flatmap">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.flatmap</span></a></td></tr></tbody></table>

`flatMap`

69

79

62

No

56

12

69

69

62

48

12

10.0

## See also

-   [`Array.prototype.flat()`](flat)
-   [`Array.prototype.map()`](map)
-   [`Array.prototype.reduce()`](reduce)
-   [`Array.prototype.concat()`](concat)
-   [A polyfill](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap</a>

# Float32Array

The `Float32Array` typed array represents an array of 32-bit floating point numbers (corresponding to the C `float` data type) in the platform byte order. If control over byte order is needed, use [`DataView`](dataview) instead. The contents are initialized to `0`. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).

## Constructor

[`Float32Array()`](float32array/float32array)  
Creates a new `Float32Array` object.

## Static properties

[`Float32Array.BYTES_PER_ELEMENT`](typedarray/bytes_per_element)  
Returns a number value of the element size. `4` in the case of an `Float32Array`.

[`Float32Array.name`](typedarray/name)  
Returns the string value of the constructor name. In the case of the `Float32Array` type: "Float32Array".

## Static methods

[`Float32Array.from()`](typedarray/from)  
Creates a new `Float32Array` from an array-like or iterable object. See also [`Array.from()`](array/from).

[`Float32Array.of()`](typedarray/of)  
Creates a new `Float32Array` with a variable number of arguments. See also [`Array.of()`](array/of).

## Instance properties

[`Float32Array.prototype.buffer`](typedarray/buffer)  
Returns the [`ArrayBuffer`](arraybuffer) referenced by the `Float32Array` Fixed at construction time and thus **read only**.

[`Float32Array.prototype.byteLength`](typedarray/bytelength)  
Returns the length (in bytes) of the `Float32Array`. Fixed at construction time and thus **read only.**

[`Float32Array.prototype.byteOffset`](typedarray/byteoffset)  
Returns the offset (in bytes) of the `Float32Array` from the start of its [`ArrayBuffer`](arraybuffer). Fixed at construction time and thus **read only.**

[`Float32Array.prototype.length`](typedarray/length)  
Returns the number of elements hold in the `Float32Array`. Fixed at construction time and thus **read only.**

## Instance methods

[`Float32Array.prototype.copyWithin()`](typedarray/copywithin)  
Copies a sequence of array elements within the array. See also [`Array.prototype.copyWithin()`](array/copywithin).

[`Float32Array.prototype.entries()`](typedarray/entries)  
Returns a new `Array Iterator` object that contains the key/value pairs for each index in the array. See also [`Array.prototype.entries()`](array/entries).

[`Float32Array.prototype.every()`](typedarray/every)  
Tests whether all elements in the array pass the test provided by a function. See also [`Array.prototype.every()`](array/every).

[`Float32Array.prototype.fill()`](typedarray/fill)  
Fills all the elements of an array from a start index to an end index with a static value. See also [`Array.prototype.fill()`](array/fill).

[`Float32Array.prototype.filter()`](typedarray/filter)  
Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also [`Array.prototype.filter()`](array/filter).

[`Float32Array.prototype.find()`](typedarray/find)  
Returns the found value in the array, if an element in the array satisfies the provided testing function or `undefined` if not found. See also [`Array.prototype.find()`](array/find).

[`Float32Array.prototype.findIndex()`](typedarray/findindex)  
Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also [`Array.prototype.findIndex()`](array/findindex).

[`Float32Array.prototype.forEach()`](typedarray/foreach)  
Calls a function for each element in the array. See also [`Array.prototype.forEach()`](array/foreach).

[`Float32Array.prototype.includes()`](typedarray/includes)  
Determines whether a typed array includes a certain element, returning `true` or `false` as appropriate. See also [`Array.prototype.includes()`](array/includes).

[`Float32Array.prototype.indexOf()`](typedarray/indexof)  
Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also [`Array.prototype.indexOf()`](array/indexof).

[`Float32Array.prototype.join()`](typedarray/join)  
Joins all elements of an array into a string. See also [`Array.prototype.join()`](array/join).

[`Float32Array.prototype.keys()`](typedarray/keys)  
Returns a new `Array Iterator` that contains the keys for each index in the array. See also [`Array.prototype.keys()`](array/keys).

[`Float32Array.prototype.lastIndexOf()`](typedarray/lastindexof)  
Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also [`Array.prototype.lastIndexOf()`](array/lastindexof).

[`Float32Array.prototype.map()`](typedarray/map)  
Creates a new array with the results of calling a provided function on every element in this array. See also [`Array.prototype.map()`](array/map).

[`Float32Array.prototype.reduce()`](typedarray/reduce)  
Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also [`Array.prototype.reduce()`](array/reduce).

[`Float32Array.prototype.reduceRight()`](typedarray/reduceright)  
Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also [`Array.prototype.reduceRight()`](array/reduceright).

[`Float32Array.prototype.reverse()`](typedarray/reverse)  
Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also [`Array.prototype.reverse()`](array/reverse).

[`Float32Array.prototype.set()`](typedarray/set)  
Stores multiple values in the typed array, reading input values from a specified array.

[`Float32Array.prototype.slice()`](typedarray/slice)  
Extracts a section of an array and returns a new array. See also [`Array.prototype.slice()`](array/slice).

[`Float32Array.prototype.some()`](typedarray/some)  
Returns true if at least one element in this array satisfies the provided testing function. See also [`Array.prototype.some()`](array/some).

[`Float32Array.prototype.sort()`](typedarray/sort)  
Sorts the elements of an array in place and returns the array. See also [`Array.prototype.sort()`](array/sort).

[`Float32Array.prototype.subarray()`](typedarray/subarray)  
Returns a new `Float32Array` from the given start and end element index.

[`Float32Array.prototype.values()`](typedarray/values)  
Returns a new `Array Iterator` object that contains the values for each index in the array. See also [`Array.prototype.values()`](array/values).

[`Float32Array.prototype.toLocaleString()`](typedarray/tolocalestring)  
Returns a localized string representing the array and its elements. See also [`Array.prototype.toLocaleString()`](array/tolocalestring).

[`Float32Array.prototype.toString()`](typedarray/tostring)  
Returns a string representing the array and its elements. See also [`Array.prototype.toString()`](array/tostring).

[`Float32Array.prototype[@@iterator]()`](typedarray/@@iterator)  
Returns a new `Array Iterator` object that contains the values for each index in the array.

## Examples

### Different ways to create a `Float32Array`

    // From a length
    var float32 = new Float32Array(2);
    float32[0] = 42;
    console.log(float32[0]); // 42
    console.log(float32.length); // 2
    console.log(float32.BYTES_PER_ELEMENT); // 4

    // From an array
    var arr = new Float32Array([21,31]);
    console.log(arr[1]); // 31

    // From another TypedArray
    var x = new Float32Array([21, 31]);
    var y = new Float32Array(x);
    console.log(y[0]); // 21

    // From an ArrayBuffer
    var buffer = new ArrayBuffer(16);
    var z = new Float32Array(buffer, 0, 4);

    // From an iterable
    var iterable = function*(){ yield* [1,2,3]; }();
    var float32 = new Float32Array(iterable);
    // Float32Array[1, 2, 3]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#table-49">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#table-49</span></a></td></tr></tbody></table>

`Float32Array`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

`Float32Array`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

## See also

-   [JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)
-   [`ArrayBuffer`](arraybuffer)
-   [`DataView`](dataview)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array</a>

# Float64Array

The `Float64Array` typed array represents an array of 64-bit floating point numbers (corresponding to the C `double` data type) in the platform byte order. If control over byte order is needed, use [`DataView`](dataview) instead. The contents are initialized to `0`. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).

## Constructor

[`Float64Array()`](float64array/float64array)  
Creates a new `Float64Array` object.

## Static properties

[`Float64Array.BYTES_PER_ELEMENT`](typedarray/bytes_per_element)  
Returns a number value of the element size. `8` in the case of an `Float64Array`.

[`Float64Array.name`](typedarray/name)  
Returns the string value of the constructor name. In the case of the `Float64Array` type: "Float64Array".

## Static methods

[`Float64Array.from()`](typedarray/from)  
Creates a new `Float64Array` from an array-like or iterable object. See also [`Array.from()`](array/from).

[`Float64Array.of()`](typedarray/of)  
Creates a new `Float64Array` with a variable number of arguments. See also [`Array.of()`](array/of).

## Instance properties

[`Float64Array.prototype.buffer`](typedarray/buffer)  
Returns the [`ArrayBuffer`](arraybuffer) referenced by the `Float64Array` Fixed at construction time and thus **read only**.

[`Float64Array.prototype.byteLength`](typedarray/bytelength)  
Returns the length (in bytes) of the `Float64Array` from the start of its [`ArrayBuffer`](arraybuffer). Fixed at construction time and thus **read only.**

[`Float64Array.prototype.byteOffset`](typedarray/byteoffset)  
Returns the offset (in bytes) of the `Float64Array` from the start of its [`ArrayBuffer`](arraybuffer). Fixed at construction time and thus **read only.**

[`Float64Array.prototype.length`](typedarray/length)  
Returns the number of elements hold in the `Float64Array`. Fixed at construction time and thus **read only.**

## Instance methods

[`Float64Array.prototype.copyWithin()`](typedarray/copywithin)  
Copies a sequence of array elements within the array. See also [`Array.prototype.copyWithin()`](array/copywithin).

[`Float64Array.prototype.entries()`](typedarray/entries)  
Returns a new `Array Iterator` object that contains the key/value pairs for each index in the array. See also [`Array.prototype.entries()`](array/entries).

[`Float64Array.prototype.every()`](typedarray/every)  
Tests whether all elements in the array pass the test provided by a function. See also [`Array.prototype.every()`](array/every).

[`Float64Array.prototype.fill()`](typedarray/fill)  
Fills all the elements of an array from a start index to an end index with a static value. See also [`Array.prototype.fill()`](array/fill).

[`Float64Array.prototype.filter()`](typedarray/filter)  
Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also [`Array.prototype.filter()`](array/filter).

[`Float64Array.prototype.find()`](typedarray/find)  
Returns the found value in the array, if an element in the array satisfies the provided testing function or `undefined` if not found. See also [`Array.prototype.find()`](array/find).

[`Float64Array.prototype.findIndex()`](typedarray/findindex)  
Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also [`Array.prototype.findIndex()`](array/findindex).

[`Float64Array.prototype.forEach()`](typedarray/foreach)  
Calls a function for each element in the array. See also [`Array.prototype.forEach()`](array/foreach).

[`Float64Array.prototype.includes()`](typedarray/includes)  
Determines whether a typed array includes a certain element, returning `true` or `false` as appropriate. See also [`Array.prototype.includes()`](array/includes).

[`Float64Array.prototype.indexOf()`](typedarray/indexof)  
Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also [`Array.prototype.indexOf()`](array/indexof).

[`Float64Array.prototype.join()`](typedarray/join)  
Joins all elements of an array into a string. See also [`Array.prototype.join()`](array/join).

[`Float64Array.prototype.keys()`](typedarray/keys)  
Returns a new `Array Iterator` that contains the keys for each index in the array. See also [`Array.prototype.keys()`](array/keys).

[`Float64Array.prototype.lastIndexOf()`](typedarray/lastindexof)  
Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also [`Array.prototype.lastIndexOf()`](array/lastindexof).

[`Float64Array.prototype.map()`](typedarray/map)  
Creates a new array with the results of calling a provided function on every element in this array. See also [`Array.prototype.map()`](array/map).

[`Float64Array.prototype.reduce()`](typedarray/reduce)  
Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also [`Array.prototype.reduce()`](array/reduce).

[`Float64Array.prototype.reduceRight()`](typedarray/reduceright)  
Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also [`Array.prototype.reduceRight()`](array/reduceright).

[`Float64Array.prototype.reverse()`](typedarray/reverse)  
Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also [`Array.prototype.reverse()`](array/reverse).

[`Float64Array.prototype.set()`](typedarray/set)  
Stores multiple values in the typed array, reading input values from a specified array.

[`Float64Array.prototype.slice()`](typedarray/slice)  
Extracts a section of an array and returns a new array. See also [`Array.prototype.slice()`](array/slice).

[`Float64Array.prototype.some()`](typedarray/some)  
Returns true if at least one element in this array satisfies the provided testing function. See also [`Array.prototype.some()`](array/some).

[`Float64Array.prototype.sort()`](typedarray/sort)  
Sorts the elements of an array in place and returns the array. See also [`Array.prototype.sort()`](array/sort).

[`Float64Array.prototype.subarray()`](typedarray/subarray)  
Returns a new `Float64Array` from the given start and end element index.

[`Float64Array.prototype.values()`](typedarray/values)  
Returns a new `Array Iterator` object that contains the values for each index in the array. See also [`Array.prototype.values()`](array/values).

[`Float64Array.prototype.toLocaleString()`](typedarray/tolocalestring)  
Returns a localized string representing the array and its elements. See also [`Array.prototype.toLocaleString()`](array/tolocalestring).

[`Float64Array.prototype.toString()`](typedarray/tostring)  
Returns a string representing the array and its elements. See also [`Array.prototype.toString()`](array/tostring).

[`Float64Array.prototype[@@iterator]()`](typedarray/@@iterator)  
Returns a new `Array Iterator` object that contains the values for each index in the array.

## Examples

### Different ways to create a `Float64Array`

    // From a length
    var float64 = new Float64Array(2);
    float64[0] = 42;
    console.log(float64[0]); // 42
    console.log(float64.length); // 2
    console.log(float64.BYTES_PER_ELEMENT); // 8

    // From an array
    var arr = new Float64Array([21,31]);
    console.log(arr[1]); // 31

    // From another TypedArray
    var x = new Float64Array([21, 31]);
    var y = new Float64Array(x);
    console.log(y[0]); // 21

    // From an ArrayBuffer
    var buffer = new ArrayBuffer(32);
    var z = new Float64Array(buffer, 0, 4);

    // From an iterable
    var iterable = function*(){ yield* [1,2,3]; }();
    var float64 = new Float64Array(iterable);
    // Float64Array[1, 2, 3]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#table-49">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#table-49</span></a></td></tr></tbody></table>

`Float64Array`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

`Float64Array`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

## See also

-   [JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)
-   [`ArrayBuffer`](arraybuffer)
-   [`DataView`](dataview)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array</a>

# Math.floor()

The `Math.floor()` function returns the largest integer less than or equal to a given number.

## Syntax

    Math.floor(x)

### Parameters

`x`  
A number.

### Return value

A number representing the largest integer less than or equal to the specified number.

## Description

Because `floor()` is a static method of `Math`, you always use it as `Math.floor()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

**Note:** `Math.floor(null)` returns 0, not a [`NaN`](../nan).

## Examples

### Using Math.floor()

    Math.floor( 45.95); //  45
    Math.floor( 45.05); //  45
    Math.floor(  4   ); //   4
    Math.floor(-45.05); // -46
    Math.floor(-45.95); // -46

### Decimal adjustment

    /**
     * Decimal adjustment of a number.
     *
     * @param {String}  type  The type of adjustment.
     * @param {Number}  value The number.
     * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
     * @returns {Number} The adjusted value.
     */
    function decimalAdjust(type, value, exp) {
      // If the exp is undefined or zero...
      if (typeof exp === 'undefined' || +exp === 0) {
        return Math[type](value);
      }
      value = +value;
      exp = +exp;
      // If the value is not a number or the exp is not an integer...
      if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
        return NaN;
      }
      // Shift
      value = value.toString().split('e');
      value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
      // Shift back
      value = value.toString().split('e');
      return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
    }

    // Decimal round
    const round10 = (value, exp) => decimalAdjust('round', value, exp);
    // Decimal floor
    const floor10 = (value, exp) => decimalAdjust('floor', value, exp);
    // Decimal ceil
    const ceil10 = (value, exp) => decimalAdjust('ceil', value, exp);

    // Round
    round10(55.55, -1);   // 55.6
    round10(55.549, -1);  // 55.5
    round10(55, 1);       // 60
    round10(54.9, 1);     // 50
    round10(-55.55, -1);  // -55.5
    round10(-55.551, -1); // -55.6
    round10(-55, 1);      // -50
    round10(-55.1, 1);    // -60
    // Floor
    floor10(55.59, -1);   // 55.5
    floor10(59, 1);       // 50
    floor10(-55.51, -1);  // -55.6
    floor10(-51, 1);      // -60
    // Ceil
    ceil10(55.51, -1);    // 55.6
    ceil10(51, 1);        // 60
    ceil10(-55.59, -1);   // -55.5
    ceil10(-59, 1);       // -50

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.floor">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.floor</span></a></td></tr></tbody></table>

`floor`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.abs()`](abs)
-   [`Math.ceil()`](ceil)
-   [`Math.round()`](round)
-   [`Math.sign()`](sign)
-   [`Math.trunc()`](trunc)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor</a>

# String.prototype.fontcolor()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `fontcolor()` method creates a [`<font>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font) HTML element that causes a string to be displayed in the specified font color.

**Note:** The &lt;font&gt; element has been removed in [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) and shouldn't be used anymore. Instead web developers should use [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) properties.

## Syntax

    fontcolor(color)

### Parameters

`color`  
A string expressing the color as a hexadecimal RGB triplet or as a string literal. String literals for color names are listed in the [CSS color reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

### Return value

A string containing a [`<font>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font) HTML element.

## Description

If you express color as a hexadecimal RGB triplet, you must use the format `rrggbb`. For example, the hexadecimal RGB values for salmon are red=FA, green=80, and blue=72, so the RGB triplet for salmon is "`FA8072`".

## Examples

### Using fontcolor()

The following example uses the `fontcolor()` method to change the color of a string by producing a string with the HTML `<font>` element.

    var worldString = 'Hello, world';

    console.log(worldString.fontcolor('red') +  ' is red in this line');
    // '<font color="red">Hello, world</font> is red in this line'

    console.log(worldString.fontcolor('FF00') + ' is red in hexadecimal in this line');
    // '<font color="FF00">Hello, world</font> is red in hexadecimal in this line'

With the [`element.style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style) object you can get the element's `style` attribute and manipulate it more generically, for example:

    document.getElementById('yourElemId').style.color = 'red';

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.fontcolor">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.fontcolor</span></a></td></tr></tbody></table>

`fontcolor`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.fontsize()`](fontsize)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fontcolor" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fontcolor</a>

# String.prototype.fontsize()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `fontsize()` method creates a [`<font>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font) HTML element that causes a string to be displayed in the specified font size.

**Note:** The &lt;font&gt; element has been removed in [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) and shouldn't be used anymore. Instead web developers should use [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) properties.

## Syntax

    fontsize(size)

### Parameters

`size`  
An integer between 1 and 7, a string representing a signed integer between 1 and 7.

### Return value

A string containing a [`<font>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font) HTML element.

## Description

When you specify size as an integer, you set the font size of `str` to one of the 7 defined sizes. When you specify `size` as a string such as "-2", you adjust the font size of `str` relative to the size set in the [`<basefont>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/basefont) element.

## Examples

### Using fontsize()

The following example uses string methods to change the size of a string:

    var worldString = 'Hello, world';

    console.log(worldString.small());     // <small>Hello, world</small>
    console.log(worldString.big());       // <big>Hello, world</big>
    console.log(worldString.fontsize(7)); // <font size="7">Hello, world</fontsize>

With the [`element.style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style) object you can get the element's `style` attribute and manipulate it more generically, for example:

    document.getElementById('yourElemId').style.fontSize = '0.7em';

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.fontsize">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.fontsize</span></a></td></tr></tbody></table>

`fontsize`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.big()`](big)
-   [`String.prototype.small()`](small)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fontsize" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fontsize</a>

# for await...of

The `for await...of` creates a loop iterating over async iterable objects as well as on sync iterables, including: built-in [`String`](../global_objects/string), [`Array`](../global_objects/array), `Array`-like objects (e.g., [`arguments`](../functions/arguments) or [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)), [`TypedArray`](../global_objects/typedarray), [`Map`](../global_objects/map), [`Set`](../global_objects/set), and user-defined async/sync iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object. This statement can only be used inside an [async function](async_function).

**Note:** `for await...of` doesn't work with async iterators that are not async iterables.

## Syntax

    for await (variable of iterable) {
      statement
    }

`variable`  
On each iteration a value of a different property is assigned to `variable`. `variable` may be declared with `const`, `let`, or `var`.

`iterable`  
Object whose iterable properties are to be iterated over.

## Examples

### Iterating over async iterables

You can also iterate over an object that explicitly implements async iterable protocol:

    const asyncIterable = {
      [Symbol.asyncIterator]() {
        return {
          i: 0,
          next() {
            if (this.i < 3) {
              return Promise.resolve({ value: this.i++, done: false });
            }

            return Promise.resolve({ done: true });
          }
        };
      }
    };

    (async function() {
       for await (let num of asyncIterable) {
         console.log(num);
       }
    })();

    // 0
    // 1
    // 2

### Iterating over async generators

Since the return values of async generators conform to the async iterable protocol, they can be looped using `for await...of`.

    async function* asyncGenerator() {
      let i = 0;
      while (i < 3) {
        yield i++;
      }
    }

    (async function() {
      for await (let num of asyncGenerator()) {
        console.log(num);
      }
    })();
    // 0
    // 1
    // 2

For a more concrete example of iterating over an async generator using `for await...of`, consider iterating over data from an API.

This example first creates an async iterable for a stream of data, then uses it to find the size of the response from the API.

    async function* streamAsyncIterable(stream) {
      const reader = stream.getReader();
      try {
        while (true) {
          const { done, value } = await reader.read();
          if (done) {
            return;
          }
          yield value;
        }
      } finally {
        reader.releaseLock();
      }
    }
    // Fetches data from url and calculates response size using the async generator.
    async function getResponseSize(url) {
      const response = await fetch(url);
      // Will hold the size of the response, in bytes.
      let responseSize = 0;
      // The for-await-of loop. Async iterates over each portion of the response.
      for await (const chunk of streamAsyncIterable(response.body)) {
        // Incrementing the total response length.
        responseSize += chunk.length;
      }

      console.log(`Response Size: ${responseSize} bytes`);
      // expected output: "Response Size: 1071472"
      return responseSize;
    }
    getResponseSize('https://jsonplaceholder.typicode.com/photos');

### Iterating over sync iterables and generators

`for await...of` loop also consumes sync iterables and generators. In that case it internally awaits emitted values before assign them to the loop control variable.

    function* generator() {
      yield 0;
      yield 1;
      yield Promise.resolve(2);
      yield Promise.resolve(3);
      yield 4;
    }

    (async function() {
      for await (let num of generator()) {
        console.log(num);
      }
    })();
    // 0
    // 1
    // 2
    // 3
    // 4

    // compare with for-of loop:

    for (let numOrPromise of generator()) {
      console.log(numOrPromise);
    }
    // 0
    // 1
    // Promise { 2 }
    // Promise { 3 }
    // 4

**Note:** Be aware of yielding rejected promises from sync generator. In such case `for await...of` throws when consuming rejected promise and DOESN'T CALL `finally` blocks within that generator. This can be undesirable if you need to free some allocated resources with `try/finally`.

    function* generatorWithRejectedPromises() {
      try {
        yield 0;
        yield 1;
        yield Promise.resolve(2);
        yield Promise.reject(3);
        yield 4;
        throw 5;
      } finally {
        console.log('called finally')
      }
    }

    (async function() {
      try {
        for await (let num of generatorWithRejectedPromises()) {
          console.log(num);
        }
      } catch (e) {
        console.log('caught', e)
      }
    })();
    // 0
    // 1
    // 2
    // caught 3

    // compare with for-of loop:

    try {
      for (let numOrPromise of generatorWithRejectedPromises()) {
        console.log(numOrPromise);
      }
    } catch (e) {
      console.log('caught', e)
    }
    // 0
    // 1
    // Promise { 2 }
    // Promise { <rejected> 3 }
    // 4
    // caught 5
    // called finally

To make `finally` blocks of a sync generator to be always called use appropriate form of the loop, `for await...of` for the async generator and `for...of` for the sync one and await yielded promises explicitly inside the loop.

    (async function() {
      try {
        for (let numOrPromise of generatorWithRejectedPromises()) {
          console.log(await numOrPromise);
        }
      } catch (e) {
        console.log('caught', e)
      }
    })()
    // 0
    // 1
    // 2
    // caught 3
    // called finally

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-for-in-and-for-of-statements">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-for-in-and-for-of-statements</span></a></td></tr></tbody></table>

`for-await...of`

63

79

57

No

50

11

63

63

57

46

11

8.0

## See also

-   [`Symbol.asyncIterator`](../global_objects/symbol/asynciterator)
-   [`for...of`](for...of)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of</a>

# Warning: JavaScript 1.6's for-each-in loops are deprecated

The JavaScript warning "JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead" occurs when a <span class="page-not-created">`for each (variable in obj)`</span> statement is used.

## Message

    Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead

## Error type

Warning

## What went wrong?

JavaScript 1.6's <span class="page-not-created">`for each (variable in obj)`</span> statement is deprecated, and will be removed in the near future.

## Examples

### Object iteration

<span class="page-not-created">`for each...in`</span> has been used to iterate over the specified object values.

#### Deprecated syntax

    var object = { a: 10, b: 20 };

    for each (var x in object) {
      console.log(x);        // 10
                             // 20
    }

#### Alternative standard syntax

You can now use the standard [`for...in`](../statements/for...in) loop to iterate over specified object keys, and get each value inside the loop:

    var object = { a: 10, b: 20 };

    for (var key in object) {
      var x = object[key];
      console.log(x);        // 10
                             // 20
    }

Or, using [`for...of`](../statements/for...of) (ES2015) and [`Object.values`](../global_objects/object/values) (ES2017), you can get an array of the specified object values and iterate over the array like this:

    var object = { a: 10, b: 20 };

    for (var x of Object.values(object)) {
      console.log(x);        // 10
                             // 20
    }

### Array iteration

<span class="page-not-created">`for each...in`</span> has been used to iterate over specified array elements.

#### Deprecated syntax

    var array = [10, 20, 30];

    for each (var x in array) {
      console.log(x);        // 10
                             // 20
                             // 30
    }

#### Alternative standard syntax

This is now possible with [`for...of`](../statements/for...of) (ES2015) loops as well.

    var array = [10, 20, 30];

    for (var x of array) {
      console.log(x);        // 10
                             // 20
                             // 30
    }

### Iterating over a null-able array

<span class="page-not-created">`for each...in`</span> does nothing if the specified value is `null` or `undefined`, but [`for...of`](../statements/for...of) will throw an exception in these cases.

#### Deprecated syntax

    function func(array) {
      for each (var x in array) {
        console.log(x);
      }
    }
    func([10, 20]);        // 10
                           // 20
    func(null);            // prints nothing
    func(undefined);       // prints nothing

#### Alternative standard syntax

To rewrite <span class="page-not-created">`for each...in`</span> statements so that values can be `null` or `undefined` with [`for...of`](../statements/for...of) as well, you need to guard around [`for...of`](../statements/for...of).

    function func(array) {
      if (array) {
        for (var x of array) {
          console.log(x);
        }
      }
    }
    func([10, 20]);        // 10
                           // 20
    func(null);            // prints nothing
    func(undefined);       // prints nothing

### Iterating over an object's key-value pair

#### Deprecated syntax

There's a deprecated idiom to iterate over the specified object's key-value pairs using <span class="page-not-created">`for each...in`</span> and the deprecated <span class="page-not-created">`Iterator`</span> object.

    var object = { a: 10, b: 20 };

    for each (var [key, value] in Iterator(object)) {
      console.log(key, value);  // "a", 10
                                // "b", 20
    }

#### Alternative standard syntax

You can now use the standard [`for...in`](../statements/for...in) loop to iterate over specified object keys, and get each value inside the loop:

    var object = { a: 10, b: 20 };

    for (var key in object) {
      var value = object[key];
      console.log(key, value);  // "a", 10
                                // "b", 20
    }

Or, using [`for...of`](../statements/for...of) (ES2015) and [`Object.entries`](../global_objects/object/entries) (ES2017), you can get an array of the specified object values and iterate over the array like this:

    var object = { a: 10, b: 20 };

    for (var [key, value] of Object.entries(object)) {
      console.log(key, value);  // "a", 10
                                // "b", 20
    }

## See also

-   [`for...of`](../statements/for...of)
-   [`Object.values`](../global_objects/object/values)
-   [`Object.entries`](../global_objects/object/entries)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated</a>

# for...in

The `for...in` iterates over all [enumerable properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) of an object that are keyed by strings (ignoring ones keyed by [Symbol](../global_objects/symbol)s), including inherited enumerable properties.

## Syntax

    for (variable in object)
      statement

`variable`  
A different property name is assigned to `variable` on each iteration.

`object`  
Object whose non-Symbol enumerable properties are iterated over.

## Description

A `for...in` loop only iterates over enumerable, non-Symbol properties. Objects created from built–in constructors like `Array` and `Object` have inherited non–enumerable properties from `Object.prototype` and `String.prototype`, such as [`String`](../global_objects/string)'s [`indexOf()`](../global_objects/string/indexof) method or [`Object`](../global_objects/object)'s [`toString()`](../global_objects/object/tostring) method. The loop will iterate over all enumerable properties of the object itself and those the object inherits from its prototype chain (properties of nearer prototypes take precedence over those of prototypes further away from the object in its prototype chain).

### Deleted, added, or modified properties

A `for...in` loop iterates over the properties of an object in an arbitrary order (see the [`delete`](../operators/delete) operator for more on why one cannot depend on the seeming orderliness of iteration, at least in a cross-browser setting).

If a property is modified in one iteration and then visited at a later time, its value in the loop is its value at that later time. A property that is deleted before it has been visited will not be visited later. Properties added to the object over which iteration is occurring may either be visited or omitted from iteration.

In general, it is best not to add, modify, or remove properties from the object during iteration, other than the property currently being visited. There is no guarantee whether an added property will be visited, whether a modified property (other than the current one) will be visited before or after it is modified, or whether a deleted property will be visited before it is deleted.

### Array iteration and for...in

**Note:** `for...in` should not be used to iterate over an [`Array`](../global_objects/array) where the index order is important.

Array indexes are just enumerable properties with integer names and are otherwise identical to general object properties. There is no guarantee that `for...in` will return the indexes in any particular order. The `for...in` loop statement will return all enumerable properties, including those with non–integer names and those that are inherited.

Because the order of iteration is implementation-dependent, iterating over an array may not visit elements in a consistent order. Therefore, it is better to use a [`for`](for) loop with a numeric index (or [`Array.prototype.forEach()`](../global_objects/array/foreach) or the [`for...of`](for...of) loop) when iterating over arrays where the order of access is important.

### Iterating over own properties only

If you only want to consider properties attached to the object itself, and not its prototypes, use [`getOwnPropertyNames()`](../global_objects/object/getownpropertynames) or perform a [`hasOwnProperty()`](../global_objects/object/hasownproperty) check ([`propertyIsEnumerable()`](../global_objects/object/propertyisenumerable) can also be used). Alternatively, if you know there won't be any outside code interference, you can extend built-in prototypes with a check method.

## Why Use for...in?

Given that `for...in` is built for iterating object properties, not recommended for use with arrays, and options like `Array.prototype.forEach()` and `for...of` exist, what might be the use of `for...in` at all?

It may be most practically used for debugging purposes, being an easy way to check the properties of an object (by outputting to the console or otherwise). Although arrays are often more practical for storing data, in situations where a key-value pair is preferred for working with data (with properties acting as the "key"), there may be instances where you want to check if any of those keys hold a particular value.

## Examples

### Using for...in

The `for...in` loop below iterates over all of the object's enumerable, non-Symbol properties and logs a string of the property names and their values.

    var obj = {a: 1, b: 2, c: 3};

    for (const prop in obj) {
      console.log(`obj.${prop} = ${obj[prop]}`);
    }

    // Output:
    // "obj.a = 1"
    // "obj.b = 2"
    // "obj.c = 3"

### Iterating own properties

The following function illustrates the use of [`hasOwnProperty()`](../global_objects/object/hasownproperty): the inherited properties are not displayed.

    var triangle = {a: 1, b: 2, c: 3};

    function ColoredTriangle() {
      this.color = 'red';
    }

    ColoredTriangle.prototype = triangle;

    var obj = new ColoredTriangle();

    for (const prop in obj) {
      if (obj.hasOwnProperty(prop)) {
        console.log(`obj.${prop} = ${obj[prop]}`);
      }
    }

    // Output:
    // "obj.color = red"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-for-in-and-for-of-statements">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-for-in-and-for-of-statements</span></a></td></tr></tbody></table>

`for...in`

1

12

1

6

2

1

1

18

4

10.1

1

1.0

### Compatibility: Initializer expressions in strict mode

Prior to Firefox 40, it was possible to use an initializer expression (`i=0`) in a `for...in` loop:

    var obj = {a: 1, b: 2, c: 3};
    for (var i = 0 in obj) {
      console.log(obj[i]);
    }
    // 1
    // 2
    // 3

This nonstandard behavior is now ignored in version 40 and later, and will present a [`SyntaxError`](../global_objects/syntaxerror) ("[for-in loop head declarations may not have initializers](../errors/invalid_for-in_initializer)") error in [strict mode](../strict_mode) ([bug 748550](https://bugzilla.mozilla.org/show_bug.cgi?id=748550) and [bug 1164741](https://bugzilla.mozilla.org/show_bug.cgi?id=1164741)).

Other engines such as v8 (Chrome), Chakra (IE/Edge), and JSC (WebKit/Safari) are investigating whether to remove the nonstandard behavior as well.

## See also

-   [`for...of`](for...of) – a similar statement that iterates over the property _values_
-   <span class="page-not-created">`for each...in`</span> – a similar but deprecated statement that iterates over the values of an object's properties, rather than the property names themselves
-   [`for`](for)
-   [Iterators and Generator functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) (usable with `for...of` syntax)
-   [Enumerability and ownership of properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
-   [`Object.getOwnPropertyNames()`](../global_objects/object/getownpropertynames)
-   [`Object.prototype.hasOwnProperty()`](../global_objects/object/hasownproperty)
-   [`Array.prototype.forEach()`](../global_objects/array/foreach)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in</a>

# for...of

The `for...of` creates a loop iterating over [iterable objects](../iteration_protocols#the_iterable_protocol), including: built-in [`String`](../global_objects/string), [`Array`](../global_objects/array), array-like objects (e.g., [`arguments`](../functions/arguments) or [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)), [`TypedArray`](../global_objects/typedarray), [`Map`](../global_objects/map), [`Set`](../global_objects/set), and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.

## Syntax

    for (variable of iterable) {
      statement
    }

`variable`  
On each iteration a value of a different property is assigned to `variable`. `variable` may be declared with `const`, `let`, or `var`.

`iterable`  
Object whose iterable properties are iterated.

## Examples

### Iterating over an `Array`

    const iterable = [10, 20, 30];

    for (const value of iterable) {
      console.log(value);
    }
    // 10
    // 20
    // 30

You can use [`let`](let) instead of [`const`](const) too, if you reassign the variable inside the block.

    const iterable = [10, 20, 30];

    for (let value of iterable) {
      value += 1;
      console.log(value);
    }
    // 11
    // 21
    // 31

### Iterating over a `String`

    const iterable = 'boo';

    for (const value of iterable) {
      console.log(value);
    }
    // "b"
    // "o"
    // "o"

### Iterating over a `TypedArray`

    const iterable = new Uint8Array([0x00, 0xff]);

    for (const value of iterable) {
      console.log(value);
    }
    // 0
    // 255

### Iterating over a `Map`

    const iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

    for (const entry of iterable) {
      console.log(entry);
    }
    // ['a', 1]
    // ['b', 2]
    // ['c', 3]

    for (const [key, value] of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3

### Iterating over a `Set`

    const iterable = new Set([1, 1, 2, 2, 3, 3]);

    for (const value of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3

### Iterating over the arguments object

You can iterate over the [`arguments`](../functions/arguments) object to examine all of the parameters passed into a JavaScript function:

    (function() {
      for (const argument of arguments) {
        console.log(argument);
      }
    })(1, 2, 3);

    // 1
    // 2
    // 3

### Iterating over a DOM collection

Iterating over DOM collections like [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList): the following example adds a `read` class to paragraphs that are direct descendants of an article:

    // Note: This will only work in platforms that have
    // implemented NodeList.prototype[Symbol.iterator]
    const articleParagraphs = document.querySelectorAll('article > p');

    for (const paragraph of articleParagraphs) {
      paragraph.classList.add('read');
    }

### Closing iterators

In `for...of` loops, abrupt iteration termination can be caused by `break`, `throw` or `return`. In these cases, the iterator is closed.

    function* foo(){
      yield 1;
      yield 2;
      yield 3;
    };

    for (const o of foo()) {
      console.log(o);
      break; // closes iterator, execution continues outside of the loop
    }
    console.log('done');

### Iterating over generators

You can also iterate over [generators](function*), i.e. functions generating an iterable object:

    function* fibonacci() { // a generator function
      let [prev, curr] = [0, 1];
      while (true) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
      }
    }

    for (const n of fibonacci()) {
      console.log(n);
      // truncate the sequence at 1000
      if (n >= 1000) {
        break;
      }
    }

#### Do not reuse generators

Generators should not be re-used, even if the `for...of` loop is terminated early, for example via the [`break`](break) keyword. Upon exiting a loop, the generator is closed and trying to iterate over it again does not yield any further results.

    const gen = (function *(){
      yield 1;
      yield 2;
      yield 3;
    })();
    for (const o of gen) {
      console.log(o);
      break;  // Closes iterator
    }

    // The generator should not be re-used, the following does not make sense!
    for (const o of gen) {
      console.log(o); // Never called.
    }

### Iterating over other iterable objects

You can also iterate over an object that explicitly implements the [iterable](../iteration_protocols#iterable) protocol:

    const iterable = {
      [Symbol.iterator]() {
        return {
          i: 0,
          next() {
            if (this.i < 3) {
              return { value: this.i++, done: false };
            }
            return { value: undefined, done: true };
          }
        };
      }
    };

    for (const value of iterable) {
      console.log(value);
    }
    // 0
    // 1
    // 2

### Difference between `for...of` and `for...in`

Both `for...in` and `for...of` statements iterate over something. The main difference between them is in what they iterate over.

The [`for...in`](for...in) statement iterates over the [enumerable properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) of an object, in an arbitrary order.

The `for...of` statement iterates over values that the [iterable object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterables) defines to be iterated over.

The following example shows the difference between a `for...of` loop and a `for...in` loop when used with an [`Array`](../global_objects/array).

    Object.prototype.objCustom = function() {};
    Array.prototype.arrCustom = function() {};

    const iterable = [3, 5, 7];
    iterable.foo = 'hello';

    for (const i in iterable) {
      console.log(i); // logs "0", "1", "2", "foo", "arrCustom", "objCustom"
    }

    for (const i in iterable) {
      if (iterable.hasOwnProperty(i)) {
        console.log(i); // logs "0", "1", "2", "foo"
      }
    }

    for (const i of iterable) {
      console.log(i); // logs 3, 5, 7
    }

Let us look into the above code step by step.

    Object.prototype.objCustom = function() {};
    Array.prototype.arrCustom = function() {};

    const iterable = [3, 5, 7];
    iterable.foo = 'hello';

Every object will inherit the `objCustom` property and every object that is an [`Array`](../global_objects/array) will inherit the `arrCustom` property since these properties have been added to [`Object.prototype`](../global_objects/object) and <span class="page-not-created">`Array.prototype`</span>, respectively. The object `iterable` inherits the properties `objCustom` and `arrCustom` because of [inheritance and the prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).

    for (const i in iterable) {
      console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
    }

This loop logs only [enumerable properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) of the `iterable` object, in arbitrary order. It doesn't log array **elements** `3`, `5`, `7` or `hello` because those are **not** enumerable properties, in fact they are not properties at all, they are **values**. It logs array **indexes** as well as `arrCustom` and `objCustom`, which are. If you're not sure why these properties are iterated over, there's a more thorough explanation of how [`array iteration and for...in`](for...in#array_iteration_and_for...in) work.

    for (const i in iterable) {
      if (iterable.hasOwnProperty(i)) {
        console.log(i); // logs 0, 1, 2, "foo"
      }
    }

This loop is similar to the first one, but it uses [`hasOwnProperty()`](../global_objects/object/hasownproperty) to check if the found enumerable property is the object's own, i.e. not inherited. If it is, the property is logged. Properties `0`, `1`, `2` and `foo` are logged because they are own properties (**not inherited**). Properties `arrCustom` and `objCustom` are not logged because they **are inherited**.

    for (const i of iterable) {
      console.log(i); // logs 3, 5, 7
    }

This loop iterates and logs **values** that `iterable`, as an [iterable object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterables), defines to be iterated over. The object's **elements** `3`, `5`, `7` are shown, but none of the object's **properties**.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-for-in-and-for-of-statements">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-for-in-and-for-of-statements</span></a></td></tr></tbody></table>

`for...of`

38

12

13

Prior to Firefox 51, using the `for...of` loop construct with the `const` keyword threw a `SyntaxError` ("missing = in const declaration").

No

25

7

38

38

14

Prior to Firefox 51, using the `for...of` loop construct with the `const` keyword threw a `SyntaxError` ("missing = in const declaration").

25

7

3.0

`async_iterators`

63

12

57

No

50

7

63

63

57

46

7

8.0

`closing_iterators`

51

14

53

No

38

7

51

51

53

41

7

5.0

## See also

-   [`Array.prototype.forEach()`](../global_objects/array/foreach)
-   [`Map.prototype.forEach()`](../global_objects/map/foreach)
-   [`Object.entries()`](../global_objects/object/entries) – Useful when using `for...of` over an object.

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of</a>

# for

The **for statement** creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement (usually a [block statement](block)) to be executed in the loop.

## Syntax

    for ([initialization]; [condition]; [final-expression])
       statement

`initialization`  
An expression (including assignment expressions) or variable declaration evaluated once before the loop begins. Typically used to initialize a counter variable. This expression may optionally declare new variables with `var` or `let` keywords. Variables declared with `var` are not local to the loop, i.e. they are in the same scope the `for` loop is in. Variables declared with `let` are local to the statement.

The result of this expression is discarded.

`condition`  
An expression to be evaluated before each loop iteration. If this expression evaluates to true, `statement` is executed. This conditional test is optional. If omitted, the condition always evaluates to true. If the expression evaluates to false, execution skips to the first expression following the `for` construct.

`final-expression`  
An expression to be evaluated at the end of each loop iteration. This occurs before the next evaluation of `condition`. Generally used to update or increment the counter variable.

`statement`  
A statement that is executed as long as the condition evaluates to true. To execute multiple statements within the loop, use a [block](block) statement (`{ ... }`) to group those statements. To execute no statement within the loop, use an [empty](empty) statement (`;`).

## Examples

### Using for

The following `for` statement starts by declaring the variable `i` and initializing it to `0`. It checks that `i` is less than nine, performs the two succeeding statements, and increments `i` by 1 after each pass through the loop.

    for (let i = 0; i < 9; i++) {
       console.log(i);
       // more statements
    }

### Optional for expressions

All three expressions in the head of the `for` loop are optional.

For example, in the `initialization` block it is not required to initialize variables:

    var i = 0;
    for (; i < 9; i++) {
        console.log(i);
        // more statements
    }

Like the `initialization` block, the `condition` block is also optional. If you are omitting this expression, you must make sure to break the loop in the body in order to not create an infinite loop.

    for (let i = 0;; i++) {
       console.log(i);
       if (i > 3) break;
       // more statements
    }

You can also omit all three blocks. Again, make sure to use a [`break`](break) statement to end the loop and also modify (increase) a variable, so that the condition for the break statement is true at some point.

    var i = 0;

    for (;;) {
      if (i > 3) break;
      console.log(i);
      i++;
    }

### Using for without a statement

The following `for` cycle calculates the offset position of a node in the `final-expression` section, and therefore it does not require the use of a `statement` section, a semicolon is used instead.

    function showOffsetPos(sId) {

      var nLeft = 0, nTop = 0;

      for (

        var oItNode = document.getElementById(sId); /* initialization */

        oItNode; /* condition */

        nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent /* final-expression */

      ); /* semicolon */

      console.log('Offset position of \'' + sId + '\' element:\n left: ' + nLeft + 'px;\n top: ' + nTop + 'px;');

    }

    /* Example call: */

    showOffsetPos('content');

    // Output:
    // "Offset position of "content" element:
    // left: 0px;
    // top: 153px;"

**Note:** This is one of the few cases in JavaScript where **the semicolon is mandatory**. Indeed, without the semicolon the line that follows the cycle declaration will be considered a statement.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-for-statement">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-for-statement</span></a></td></tr></tbody></table>

`for`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [empty statement](empty)
-   [`break`](break)
-   [`continue`](continue)
-   [`while`](while)
-   [`do...while`](do...while)
-   [`for...in`](for...in)
-   [`for...of`](for...of)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for</a>

# Array.prototype.forEach()

The `forEach()` method executes a provided function once for each array element.

## Syntax

    // Arrow function
    forEach((element) => { ... } )
    forEach((element, index) => { ... } )
    forEach((element, index, array) => { ... } )

    // Callback function
    forEach(callbackFn)
    forEach(callbackFn, thisArg)

    // Inline callback function
    forEach(function callbackFn(element) { ... })
    forEach(function callbackFn(element, index) { ... })
    forEach(function callbackFn(element, index, array){ ... })
    forEach(function callbackFn(element, index, array) { ... }, thisArg)

### Parameters

`callbackFn`  
Function to execute on each element. It accepts between one and three arguments:

`element`  
The current element being processed in the array.

`index` <span class="badge inline optional">Optional</span>  
The index of `element` in the array.

`array` <span class="badge inline optional">Optional</span>  
The array `forEach()` was called upon.

`thisArg` <span class="badge inline optional">Optional</span>  
Value to use as `this` when executing `callbackFn`.

### Return value

`undefined`.

## Description

`forEach()` calls a provided `callbackFn` function once for each element in an array in ascending index order. It is not invoked for index properties that have been deleted or are uninitialized. (For sparse arrays, [see example below](#sparsearray).)

`callbackFn` is invoked with three arguments:

1.  the value of the element
2.  the index of the element
3.  the Array object being traversed

If a `thisArg` parameter is provided to `forEach()`, it will be used as callback's `this` value. The `thisArg` value ultimately observable by `callbackFn` is determined according to [the usual rules for determining the `this` seen by a function](../../operators/this).

The range of elements processed by `forEach()` is set before the first invocation of `callbackFn`. Elements which are appended to the array after the call to `forEach()` begins will not be visited by `callbackFn`. If existing elements of the array are changed or deleted, their value as passed to `callbackFn` will be the value at the time `forEach()` visits them; elements that are deleted before being visited are not visited. If elements that are already visited are removed (e.g. using [`shift()`](shift)) during the iteration, later elements will be skipped. ([See this example, below](#Modifying_the_array_during_iteration).)

`forEach()` executes the `callbackFn` function once for each array element; unlike [`map()`](map) or [`reduce()`](reduce) it always returns the value [`undefined`](../undefined) and is not chainable. The typical use case is to execute side effects at the end of a chain.

`forEach()` does not mutate the array on which it is called. (However, `callbackFn` may do so)

**Note:** There is no way to stop or break a `forEach()` loop other than by throwing an exception. If you need such behavior, the `forEach()` method is the wrong tool.

Early termination may be accomplished with:

-   A simple [for](../../statements/for) loop
-   A [for...of](../../statements/for...of) / [for...in](../../statements/for...in) loops
-   [`Array.prototype.every()`](every)
-   [`Array.prototype.some()`](some)
-   [`Array.prototype.find()`](find)
-   [`Array.prototype.findIndex()`](findindex)

Array methods: [`every()`](every), [`some()`](some), [`find()`](find), and [`findIndex()`](findindex) test the array elements with a predicate returning a truthy value to determine if further iteration is required.

**Note:** `forEach` expects a synchronous function.

`forEach` does not wait for promises. Make sure you are aware of the implications while using promises (or async functions) as `forEach` callback.

    let ratings = [5, 4, 5];
    let sum = 0;

    let sumFunction = async function (a, b)
    {
      return a + b
    }

    ratings.forEach(async function(rating) {
      sum = await sumFunction(sum, rating)
    })

    console.log(sum)
    // Naively expected output: 14
    // Actual output: 0

## Polyfill

`forEach()` was added to the ECMA-262 standard in the 5<sup>th</sup> edition, and it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of `forEach()` in implementations which do not natively support it.

This algorithm is exactly the one specified in ECMA-262, 5<sup>th</sup> edition, assuming [`Object`](../object) and [`TypeError`](../typeerror) have their original values and that `fun.call` evaluates to the original value of [`Function.prototype.call()`](../function/call).

    // Production steps of ECMA-262, Edition 5, 15.4.4.18
    // Reference: https://es5.github.io/#x15.4.4.18

    if (!Array.prototype['forEach']) {

      Array.prototype.forEach = function(callback, thisArg) {

        if (this == null) { throw new TypeError('Array.prototype.forEach called on null or undefined'); }

        var T, k;
        // 1. Let O be the result of calling toObject() passing the
        // |this| value as the argument.
        var O = Object(this);

        // 2. Let lenValue be the result of calling the Get() internal
        // method of O with the argument "length".
        // 3. Let len be toUint32(lenValue).
        var len = O.length >>> 0;

        // 4. If isCallable(callback) is false, throw a TypeError exception.
        // See: https://es5.github.com/#x9.11
        if (typeof callback !== "function") { throw new TypeError(callback + ' is not a function'); }

        // 5. If thisArg was supplied, let T be thisArg; else let
        // T be undefined.
        if (arguments.length > 1) { T = thisArg; }

        // 6. Let k be 0
        k = 0;

        // 7. Repeat, while k < len
        while (k < len) {

          var kValue;

          // a. Let Pk be ToString(k).
          //    This is implicit for LHS operands of the in operator
          // b. Let kPresent be the result of calling the HasProperty
          //    internal method of O with argument Pk.
          //    This step can be combined with c
          // c. If kPresent is true, then
          if (k in O) {

            // i. Let kValue be the result of calling the Get internal
            // method of O with argument Pk.
            kValue = O[k];

            // ii. Call the Call internal method of callback with T as
            // the this value and argument list containing kValue, k, and O.
            callback.call(T, kValue, k, O);
          }
          // d. Increase k by 1.
          k++;
        }
        // 8. return undefined
      };
    }

## Examples

### No operation for uninitialized values (sparse arrays)

    const arraySparse = [1,3,,7]
    let numCallbackRuns = 0

    arraySparse.forEach(function(element) {
      console.log(element)
      numCallbackRuns++
    })

    console.log("numCallbackRuns: ", numCallbackRuns)

    // 1
    // 3
    // 7
    // numCallbackRuns: 3
    // comment: as you can see the missing value between 3 and 7 didn't invoke callback function.

### Converting a for loop to forEach

    const items = ['item1', 'item2', 'item3']
    const copyItems = []

    // before
    for (let i = 0; i < items.length; i++) {
      copyItems.push(items[i])
    }

    // after
    items.forEach(function(item){
      copyItems.push(item)
    })

### Printing the contents of an array

**Note:** In order to display the content of an array in the console, you can use [`console.table()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/table), which prints a formatted version of the array.

The following example illustrates an alternative approach, using `forEach()`.

The following code logs a line for each element in an array:

    function logArrayElements(element, index, array) {
      console.log('a[' + index + '] = ' + element)
    }

    // Notice that index 2 is skipped, since there is no item at
    // that position in the array...
    [2, 5, , 9].forEach(logArrayElements)
    // logs:
    // a[0] = 2
    // a[1] = 5
    // a[3] = 9

### Using thisArg

The following (contrived) example updates an object's properties from each entry in the array:

    function Counter() {
      this.sum = 0
      this.count = 0
    }
    Counter.prototype.add = function(array) {
      array.forEach(function countEntry(entry) {
        this.sum += entry
        ++this.count
      }, this)
    }

    const obj = new Counter()
    obj.add([2, 5, 9])
    obj.count
    // 3
    obj.sum
    // 16

Since the `thisArg` parameter (`this`) is provided to `forEach()`, it is passed to `callback` each time it's invoked. The callback uses it as its `this` value.

**Note:** If passing the callback function used an [arrow function expression](../../functions/arrow_functions), the `thisArg` parameter could be omitted, since all arrow functions lexically bind the [`this`](../../operators/this) value.

### An object copy function

The following code creates a copy of a given object.

There are different ways to create a copy of an object. The following is just one way and is presented to explain how `Array.prototype.forEach()` works by using ECMAScript 5 `Object.*` meta property functions.

    function copy(obj) {
      const copy = Object.create(Object.getPrototypeOf(obj))
      const propNames = Object.getOwnPropertyNames(obj)

      propNames.forEach(function(name) {
        const desc = Object.getOwnPropertyDescriptor(obj, name)
        Object.defineProperty(copy, name, desc)
      })

      return copy
    }

    const obj1 = { a: 1, b: 2 }
    const obj2 = copy(obj1) // obj2 looks like obj1 now

### Modifying the array during iteration

The following example logs `one`, `two`, `four`.

When the entry containing the value `two` is reached, the first entry of the whole array is shifted off—resulting in all remaining entries moving up one position. Because element `four` is now at an earlier position in the array, `three` will be skipped.

`forEach()` does not make a copy of the array before iterating.

    let words = ['one', 'two', 'three', 'four']
    words.forEach(function(word) {
      console.log(word)
      if (word === 'two') {
        words.shift() //'one' will delete from array
      }
    }) // one // two // four

    console.log(words);  //['two', 'three', 'four']

### Flatten an array

The following example is only here for learning purpose. If you want to flatten an array using built-in methods you can use [`Array.prototype.flat()`](flat).

    function flatten(arr) {
      const result = []

      arr.forEach(function(i) {
        if (Array.isArray(i)) {
          result.push(...flatten(i))
        } else {
          result.push(i)
        }
      })

      return result
    }

    // Usage
    const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]]

    flatten(nested) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.foreach">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.foreach</span></a></td></tr></tbody></table>

`forEach`

1

12

1.5

9

9.5

3

≤37

18

4

10.1

1

1.0

## See also

-   [`Array.prototype.find()`](find)
-   [`Array.prototype.findIndex()`](findindex)
-   [`Array.prototype.map()`](map)
-   [`Array.prototype.filter()`](filter)
-   [`Array.prototype.every()`](every)
-   [`Array.prototype.some()`](some)
-   [`Map.prototype.forEach()`](../map/foreach)
-   [`Set.prototype.forEach()`](../set/foreach)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach</a>

# Intl.DateTimeFormat.prototype.format()

The `Intl.DateTimeFormat.prototype.format()` method formats a date according to the locale and formatting options of this [`Intl.DateTimeFormat`](../datetimeformat) object.

## Syntax

    format(date)

### Parameters

`date`  
The date to format.

## Description

The `format` getter formats a date into a string according to the locale and formatting options of this [`Intl.DateTimeFormat`](../datetimeformat) object.

## Examples

### Using format

Use the `format` getter function for formatting a single date, here for Serbia:

    var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    var dateTimeFormat = new Intl.DateTimeFormat('sr-RS', options);
    console.log(dateTimeFormat.format(new Date()));
    // → "недеља, 7. април 2013."

### Using format with map

Use the `format` getter function for formatting all dates in an array. Note that the function is bound to the [`Intl.DateTimeFormat`](../datetimeformat) from which it was obtained, so it can be passed directly to [`Array.prototype.map()`](../../array/map).

    var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)];
    var options = { year: 'numeric', month: 'long' };
    var dateTimeFormat = new Intl.DateTimeFormat('pt-BR', options);
    var formatted = a.map(dateTimeFormat.format);
    console.log(formatted.join('; '));
    // → "setembro de 2012; dezembro de 2012; abril de 2012"

### Avoid comparing formatted date values to static values

Most of the time, the formatting returned by `format()` is consistent. However, this might change in the future and isn't guaranteed for all the languages — output variations are by design and allowed by the specification. Most notably, the IE and Edge browsers insert bidirectional control characters around dates, so the output text will flow properly when concatenated with other text.

For this reason you cannot expect to be able to compare the results of `format()` to a static value:

    let d = new Date("2019-01-01T00:00:00.000000Z");
    let formattedDate = Intl.DateTimeFormat(undefined, {
      year: 'numeric',
      month: 'numeric',
      day: 'numeric',
      hour: 'numeric',
      minute: 'numeric',
      second: 'numeric'
    }).format(d);

    "1.1.2019, 01:00:00" === formattedDate;
    // true in Firefox and others
    // false in IE and Edge

**Note:** See also this [StackOverflow thread](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results) for more details and examples.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-intl.datetimeformat.prototype.format">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-intl.datetimeformat.prototype.format</span></a></td></tr></tbody></table>

`format`

24

12

29

11

15

10

4.4

25

56

14

10

1.5

## See also

-   [`Intl.DateTimeFormat`](../datetimeformat)
-   [`Date.prototype.toLocaleString()`](../../date/tolocalestring)
-   [`Date.prototype.toLocaleDateString()`](../../date/tolocaledatestring)
-   [`Date.prototype.toLocaleTimeString()`](../../date/tolocaletimestring)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format</a>

# Intl.DateTimeFormat.prototype.formatRange()

The `Intl.DateTimeFormat.prototype.formatRange()` formats a date range in the most concise way based on the `locale` and `options` provided when instantiating [`Intl.DateTimeFormat`](../datetimeformat) object.

## Syntax

    formatRange(startDate, endDate)

## Examples

### Basic formatRange usage

This method receives two [`Date`](../../date)s and formats the date range in the most concise way based on the `locale` and `options` provided when instantiating [`Intl.DateTimeFormat`](../datetimeformat).

    let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
    let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
    let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0));
    // > 'Wed, 10 Jan 2007 10:00:00 GMT'
    // > 'Wed, 10 Jan 2007 11:00:00 GMT'
    // > 'Sat, 20 Jan 2007 10:00:00 GMT'

    let fmt1 = new Intl.DateTimeFormat("en", {
        year: '2-digit',
        month: 'numeric',
        day: 'numeric',
        hour: 'numeric',
        minute: 'numeric'
    });
    console.log(fmt1.format(date1));
    console.log(fmt1.formatRange(date1, date2));
    console.log(fmt1.formatRange(date1, date3));
    // > '1/10/07, 10:00 AM'
    // > '1/10/07, 10:00 – 11:00 AM'
    // > '1/10/07, 10:00 AM – 1/20/07, 10:00 AM'

    let fmt2 = new Intl.DateTimeFormat("en", {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
    });
    console.log(fmt2.format(date1));
    console.log(fmt2.formatRange(date1, date2));
    console.log(fmt2.formatRange(date1, date3));
    // > 'Jan 10, 2007'
    // > 'Jan 10, 2007'
    // > 'Jan 10 – 20, 2007'

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-intl.datetimeformat.prototype.formatRange">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-intl.datetimeformat.prototype.formatRange</span></a></td></tr></tbody></table>

`formatRange`

76

79

No

No

No

14.1

76

76

No

54

14.5

No

## See also

-   [`Intl.DateTimeFormat`](../datetimeformat)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange</a>

# Intl.DateTimeFormat.prototype.formatRangeToParts()

The `Intl.DateTimeFormat.prototype.formatRangeToParts()` method allows locale-specific tokens representing each part of the formatted date range produced by [`Intl.DateTimeFormat`](../datetimeformat) formatters.

## Syntax

    formatRangeToParts(startDate, endDate)

## Examples

### Basic formatRangeToParts usage

This method receives two [`Date`](../../date)s and returns an [`Array`](../../array) of objects containing the locale-specific tokens representing each part of the formatted date range.

    let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
    let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
    // > 'Wed, 10 Jan 2007 10:00:00 GMT'
    // > 'Wed, 10 Jan 2007 11:00:00 GMT'

    let fmt = new Intl.DateTimeFormat("en", {
        hour: 'numeric',
        minute: 'numeric'
    });

    console.log(fmt.formatRange(date1, date2));
    // > '10:00 – 11:00 AM'

    fmt.formatRangeToParts(date1, date2);
    // return value:
    // [
    //   { type: 'hour',      value: '10',  source: "startRange" },
    //   { type: 'literal',   value: ':',   source: "startRange" },
    //   { type: 'minute',    value: '00',  source: "startRange" },
    //   { type: 'literal',   value: ' – ', source: "shared"     },
    //   { type: 'hour',      value: '11',  source: "endRange"   },
    //   { type: 'literal',   value: ':',   source: "endRange"   },
    //   { type: 'minute',    value: '00',  source: "endRange"   },
    //   { type: 'literal',   value: ' ',   source: "shared"     },
    //   { type: 'dayPeriod', value: 'AM',  source: "shared"     }
    // ]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.DateTimeFormat.prototype.formatRangeToParts">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.DateTimeFormat.prototype.formatRangeToParts</span></a></td></tr></tbody></table>

`formatRangeToParts`

76

79

No

No

No

No

76

76

No

54

No

No

## See also

-   <span class="page-not-created">`Intl.DateTimeFormat.prototype.formatRange()`</span>
-   [`Intl.DateTimeFormat`](../datetimeformat)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts</a>

# Intl.DateTimeFormat.prototype.formatToParts()

The `Intl.DateTimeFormat.prototype.formatToParts()` method allows locale-aware formatting of strings produced by [`Intl.DateTimeFormat`](../datetimeformat) formatters.

## Syntax

    formatToParts(date)

### Parameters

`date` <span class="badge inline optional">Optional</span>  
The date to format.

### Return value

An [`Array`](../../array) of objects containing the formatted date in parts.

## Description

The `formatToParts()` method is useful for custom formatting of date strings. It returns an [`Array`](../../array) of objects containing the locale-specific tokens from which it possible to build custom strings while preserving the locale-specific parts. The structure the `formatToParts()` method returns, looks like this:

    [
      { type: 'day', value: '17' },
      { type: 'weekday', value: 'Monday' }
    ]

Possible types are the following:

day  
The string used for the day, for example "`17`".

dayPeriod  
The string used for the day period, for example, "`AM`", "`PM`", "`in the morning`", or "`noon`"

era  
The string used for the era, for example "`BC`" or "`AD`".

fractionalSecond  
The string used for the fractional seconds, for example "`0`" or "`00`" or "`000`".

hour  
The string used for the hour, for example "`3`" or "`03`".

literal  
The string used for separating date and time values, for example "`/`", "`,`", "`o'clock`", "`de`", etc.

minute  
The string used for the minute, for example "`00`".

month  
The string used for the month, for example "`12`".

relatedYear  
The string used for the related 4-digit Gregorian year, in the event that the calendar's representation would be a yearName instead of a year, for example "`2019`".

second  
The string used for the second, for example "`07`" or "`42`".

timeZoneName  
The string used for the name of the time zone, for example "`UTC`".

weekday  
The string used for the weekday, for example "`M`", "`Monday`", or "`Montag`".

year  
The string used for the year, for example "`2012`" or "`96`".

yearName  
The string used for the yearName in relevant contexts, for example "`geng-zi`"

## Polyfill

A polyfill for this feature is available in the [proposal repository](https://github.com/zbraniecki/proposal-intl-formatToParts).

## Examples

`DateTimeFormat` outputs localized, opaque strings that cannot be manipulated directly:

    var date = Date.UTC(2012, 11, 17, 3, 0, 42);

    var formatter = new Intl.DateTimeFormat('en-us', {
      weekday: 'long',
      year: 'numeric',
      month: 'numeric',
      day: 'numeric',
      hour: 'numeric',
      minute: 'numeric',
      second: 'numeric',
      fractionalSecondDigits: 3,
      hour12: true,
      timeZone: 'UTC'
    });

    formatter.format(date);
    // "Monday, 12/17/2012, 3:00:42.000 AM"

However, in many User Interfaces there is a desire to customize the formatting of this string. The `formatToParts` method enables locale-aware formatting of strings produced by `DateTimeFormat` formatters by providing you the string in parts:

    formatter.formatToParts(date);

    // return value:
    [
      { type: 'weekday',   value: 'Monday' },
      { type: 'literal',   value: ', '     },
      { type: 'month',     value: '12'     },
      { type: 'literal',   value: '/'      },
      { type: 'day',       value: '17'     },
      { type: 'literal',   value: '/'      },
      { type: 'year',      value: '2012'   },
      { type: 'literal',   value: ', '     },
      { type: 'hour',      value: '3'      },
      { type: 'literal',   value: ':'      },
      { type: 'minute',    value: '00'     },
      { type: 'literal',   value: ':'      },
      { type: 'second',    value: '42'     },
      { type: 'fractionalSecond', value: '000' },
      { type: 'literal',   value: ' '      },
      { type: 'dayPeriod', value: 'AM'     }
    ]

Now the information is available separately and it can be formatted and concatenated again in a customized way. For example by using [`Array.prototype.map()`](../../array/map), [arrow functions](../../../functions/arrow_functions), a [switch statement](../../../statements/switch), [template literals](../../../template_literals), and [`Array.prototype.join()`](../../array/join).

    var dateString = formatter.formatToParts(date).map(({type, value}) => {
      switch (type) {
        case 'dayPeriod': return `<b>${value}</b>`;
        default : return value;
      }
    }).join('');

This will make the day period bold, when using the `formatToParts()` method.

    console.log(formatter.format(date));
    // "Monday, 12/17/2012, 3:00:42.000 AM"

    console.log(dateString);
    // "Monday, 12/17/2012, 3:00:42.000 <b>AM</b>"

### Named Years and Mixed calendars

In some cases, calendars use named years. Chinese and Tibetan calendars, for example, use a 60-year [sexagenary cycle](https://en.wikipedia.org/wiki/Sexagenary_cycle) of named years. These years are disambiguated by relationship to corresponding years on the Gregorian calendar. When this is the case, the result of `formatToParts()` will contain an entry for `relatedYear` when a year would normally be present, containing the 4-digit Gregorian year, instead of an entry for `year`. Setting an entry in the bag for `year` (with any value) will yield both the and the `yearName` Gregorian `relatedYear`:

    let opts = { year: "numeric", month: "numeric", day: "numeric" };
    let df = new Intl.DateTimeFormat("zh-u-ca-chinese", opts);
    df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));

    // return value
    [
      { type: 'relatedYear', value: '2012' },
      { type: 'literal', value: '年' },
      { type: 'month', value: '十一月' },
      { type: 'day', value: '4' }
    ]

If the `year` option is not set in the bag (to any value), the result will include only the `relatedYear`:

    let df = new Intl.DateTimeFormat("zh-u-ca-chinese");
    df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));

    // return value
    [
       { type: 'relatedYear', value: '2012' },
       { type: 'literal', value: '年' },
       { type: 'month', value: '十一月' },
       { type: 'day', value: '4' }
    ]

In cases where the `year` would be output, `.format()` may commonly present these side-by-side:

    let df = new Intl.DateTimeFormat("zh-u-ca-chinese", {year: "numeric"});
    df.format(Date.UTC(2012, 11, 17, 3, 0, 42));

    // return value
    2012壬辰年

This also makes it possible to mix locale and calendar in both `format`:

    let df = new Intl.DateTimeFormat("en-u-ca-chinese", {year: "numeric"});
    let date = Date.UTC(2012, 11, 17, 3, 0, 42);
    df.format(date);

    // return value
    2012(ren-chen)

And `formatToParts`:

    let opts = {month: 'numeric', day: 'numeric', year: "numeric"};
    let df = new Intl.DateTimeFormat("en-u-ca-chinese", opts);
    let date = Date.UTC(2012, 11, 17, 3);
    df.formatToParts(date)

    // return value
    [
      { type: 'month', value: '11' },
      { type: 'literal', value: '/' },
      { type: 'day', value: '4' },
      { type: 'literal', value: '/' },
      { type: 'relatedYear', value: '2012' }
    ]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.DateTimeFormat.prototype.formatToParts">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.DateTimeFormat.prototype.formatToParts</span></a></td></tr></tbody></table>

`formatToParts`

57

Before version 71, `formatToParts()` returned an object with an incorrectly cased type key of `dayperiod`. Version 71 and later use the specification defined `dayPeriod`. See [Chromium bug 865351](https://crbug.com/865351).

18

51

No

44

Before version 58, `formatToParts()` returned an object with an incorrectly cased type key of `dayperiod`. Version 58 and later use the specification defined `dayPeriod`. See [Chromium bug 865351](https://crbug.com/865351).

11

57

Before version 71, `formatToParts()` returned an object with an incorrectly cased type key of `dayperiod`. Version 71 and later use the specification defined `dayPeriod`. See [Chromium bug 865351](https://crbug.com/865351).

57

Before version 71, `formatToParts()` returned an object with an incorrectly cased type key of `dayperiod`. Version 71 and later use the specification defined `dayPeriod`. See [Chromium bug 865351](https://crbug.com/865351).

56

43

Before version 50, `formatToParts()` returned an object with an incorrectly cased type key of `dayperiod`. Version 50 and later use the specification defined `dayPeriod`. See [Chromium bug 865351](https://crbug.com/865351).

11

7.0

Before version 71, `formatToParts()` returned an object with an incorrectly cased type key of `dayperiod`. Version 71 and later use the specification defined `dayPeriod`. See [Chromium bug 865351](https://crbug.com/865351).

## See also

-   [`Intl.DateTimeFormat`](../datetimeformat)
-   [`Intl.DateTimeFormat.prototype.format()`](format)
-   [`Date.prototype.toLocaleString()`](../../date/tolocalestring)
-   [`Date.prototype.toLocaleDateString()`](../../date/tolocaledatestring)
-   [`Date.prototype.toLocaleTimeString()`](../../date/tolocaletimestring)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts</a>

# Object.freeze()

The `Object.freeze()` method **freezes** an object. A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed. In addition, freezing an object also prevents its prototype from being changed. `freeze()` returns the same object that was passed in.

## Syntax

    Object.freeze(obj)

### Parameters

`obj`  
The object to freeze.

### Return value

The object that was passed to the function.

## Description

Nothing can be added to or removed from the properties set of a frozen object. Any attempt to do so will fail, either silently or by throwing a [`TypeError`](../typeerror) exception (most commonly, but not exclusively, when in [strict mode](../../strict_mode)).

For data properties of a frozen object, values cannot be changed, the writable and configurable attributes are set to false. Accessor properties (getters and setters) work the same (and still give the illusion that you are changing the value). Note that values that are objects can still be modified, unless they are also frozen. As an object, an array can be frozen; after doing so, its elements cannot be altered and no elements can be added to or removed from the array.

`freeze()` returns the same object that was passed into the function. It _does not_ create a frozen copy.

In ES5, if the argument to this method is not an object (a primitive), then it will cause a [`TypeError`](../typeerror). In ES2015, a non-object argument will be treated as if it were a frozen ordinary object, and be returned.

    > Object.freeze(1)
    TypeError: 1 is not an object // ES5 code

    > Object.freeze(1)
    1                             // ES2015 code

An [`ArrayBufferView`](https://developer.mozilla.org/en-US/docs/Web/API/ArrayBufferView) with elements will cause a [`TypeError`](../typeerror), as they are views over memory and will definitely cause other possible issues:

    > Object.freeze(new Uint8Array(0)) // No elements
    Uint8Array []

    > Object.freeze(new Uint8Array(1)) // Has elements
    TypeError: Cannot freeze array buffer views with elements

    > Object.freeze(new DataView(new ArrayBuffer(32))) // No elements
    DataView {}

    > Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // No elements
    Float64Array []

    > Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Has elements
    TypeError: Cannot freeze array buffer views with elements

Note that; as the standard three properties (`buf.byteLength`, `buf.byteOffset` and `buf.buffer`) are read-only (as are those of an [`ArrayBuffer`](../arraybuffer) or [`SharedArrayBuffer`](../sharedarraybuffer)), there is no reason for attempting to freeze these properties.

### Comparison to Object.seal()

Objects sealed with [`Object.seal()`](seal) can have their existing properties changed. Existing properties in objects frozen with `Object.freeze()` are made immutable.

## Examples

### Freezing objects

    const obj = {
      prop() {},
      foo: 'bar'
    };

    // Before freezing: new properties may be added,
    // and existing properties may be changed or removed
    obj.foo = 'baz';
    obj.lumpy = 'woof';
    delete obj.prop;

    // Freeze.
    const o = Object.freeze(obj);

    // The return value is just the same object we passed in.
    o === obj; // true

    // The object has become frozen.
    Object.isFrozen(obj); // === true

    // Now any changes will fail
    obj.foo = 'quux'; // silently does nothing
    // silently doesn't add the property
    obj.quaxxor = 'the friendly duck';

    // In strict mode such attempts will throw TypeErrors
    function fail() {
      'use strict';
      obj.foo = 'sparky'; // throws a TypeError
      delete obj.foo; // throws a TypeError
      delete obj.quaxxor; // returns true since attribute 'quaxxor' was never added
      obj.sparky = 'arf'; // throws a TypeError
    }

    fail();

    // Attempted changes through Object.defineProperty;
    // both statements below throw a TypeError.
    Object.defineProperty(obj, 'ohai', { value: 17 });
    Object.defineProperty(obj, 'foo', { value: 'eit' });

    // It's also impossible to change the prototype
    // both statements below will throw a TypeError.
    Object.setPrototypeOf(obj, { x: 20 })
    obj.__proto__ = { x: 20 }

### Freezing arrays

    let a = [0];
    Object.freeze(a); // The array cannot be modified now.

    a[0] = 1; // fails silently

    // In strict mode such attempt will throw a TypeError
    function fail() {
      "use strict"
      a[0] = 1;
    }

    fail();

    // Attempted to push
    a.push(2); // throws a TypeError

The object being frozen is _immutable_. However, it is not necessarily _constant_. The following example shows that a frozen object is not constant (freeze is shallow).

    const obj1 = {
      internal: {}
    };

    Object.freeze(obj1);
    obj1.internal.a = 'aValue';

    obj1.internal.a // 'aValue'

To be a constant object, the entire reference graph (direct and indirect references to other objects) must reference only immutable frozen objects. The object being frozen is said to be immutable because the entire object _state_ (values and references to other objects) within the whole object is fixed. Note that strings, numbers, and booleans are always immutable and that Functions and Arrays are objects.

#### What is "shallow freeze"?

The result of calling `Object.freeze(object)` only applies to the immediate properties of `object` itself and will prevent future property addition, removal or value re-assignment operations _only_ on `object`. If the value of those properties are objects themselves, those objects are not frozen and may be the target of property addition, removal or value re-assignment operations.

    const employee = {
      name: "Mayank",
      designation: "Developer",
      address: {
        street: "Rohini",
        city: "Delhi"
      }
    };

    Object.freeze(employee);

    employee.name = "Dummy"; // fails silently in non-strict mode
    employee.address.city = "Noida"; // attributes of child object can be modified

    console.log(employee.address.city) // Output: "Noida"

To make an object immutable, recursively freeze each property which is of type object (deep freeze). Use the pattern on a case-by-case basis based on your design when you know the object contains no [cycles](<https://en.wikipedia.org/wiki/Cycle_(graph_theory)>) in the reference graph, otherwise an endless loop will be triggered. An enhancement to `deepFreeze()` would be to have an internal function that receives a path (e.g. an Array) argument so you can suppress calling `deepFreeze()` recursively when an object is in the process of being made immutable. You still run a risk of freezing an object that shouldn't be frozen, such as \[window\].

    function deepFreeze(object) {
      // Retrieve the property names defined on object
      const propNames = Object.getOwnPropertyNames(object);

      // Freeze properties before freezing self

      for (const name of propNames) {
        const value = object[name];

        if (value && typeof value === "object") {
          deepFreeze(value);
        }
      }

      return Object.freeze(object);
    }

    const obj2 = {
      internal: {
        a: null
      }
    };

    deepFreeze(obj2);

    obj2.internal.a = 'anotherValue'; // fails silently in non-strict mode
    obj2.internal.a; // null

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.freeze">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.freeze</span></a></td></tr></tbody></table>

`freeze`

6

12

4

9

12

5.1

1

18

4

12

6

1.0

## See also

-   [`Object.isFrozen()`](isfrozen)
-   [`Object.preventExtensions()`](preventextensions)
-   [`Object.isExtensible()`](isextensible)
-   [`Object.seal()`](seal)
-   [`Object.isSealed()`](issealed)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze</a>

# Array.from()

The `Array.from()` static method creates a new, shallow-copied `Array` instance from an array-like or iterable object.

## Syntax

    // Arrow function
    Array.from(arrayLike, (currentValue) => { ... } )
    Array.from(arrayLike, (currentValue, index) => { ... } )
    Array.from(arrayLike, (currentValue, index, array) => { ... } )

    // Mapping function
    Array.from(arrayLike, mapFn)
    Array.from(arrayLike, mapFn, thisArg)

    // Inline mapping function
    Array.from(arrayLike, function mapFn(currentValue) { ... })
    Array.from(arrayLike, function mapFn(currentValue, index) { ... })
    Array.from(arrayLike, function mapFn(currentValue, index, array){ ... })
    Array.from(arrayLike, function mapFn(currentValue, index, array) { ... }, thisArg)

### Parameters

`arrayLike`  
An array-like or iterable object to convert to an array.

`mapFn` <span class="badge inline optional">Optional</span>  
Map function to call on every element of the array.

`thisArg` <span class="badge inline optional">Optional</span>  
Value to use as `this` when executing `mapFn`.

### Return value

A new [`Array`](../array) instance.

## Description

`Array.from()` lets you create `Array`s from:

-   array-like objects (objects with a `length` property and indexed elements); or
-   [iterable objects](../../iteration_protocols) (objects such as [`Map`](../map) and [`Set`](../set)).

`Array.from()` has an optional parameter `mapFn`, which allows you to execute a [`map()`](map) function on each element of the array being created.

More clearly, `Array.from(obj, mapFn, thisArg)`  
has the same result as `Array.from(obj).map(mapFn, thisArg)`,  
except that it does not create an intermediate array.

**Note:** This is especially important for certain array subclasses, like [typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays), since the intermediate array would necessarily have values truncated to fit into the appropriate type.

The `length` property of the `from()` method is `1`.

In ES2015, the class syntax allows sub-classing of both built-in and user-defined classes. As a result, static methods such as `Array.from()` are "inherited" by subclasses of `Array`, and create new instances _of the subclass_, not `Array`.

## Examples

### Array from a `String`

    Array.from('foo');
    // [ "f", "o", "o" ]

### Array from a `Set`

    const set = new Set(['foo', 'bar', 'baz', 'foo']);
    Array.from(set);
    // [ "foo", "bar", "baz" ]

### Array from a `Map`

    const map = new Map([[1, 2], [2, 4], [4, 8]]);
    Array.from(map);
    // [[1, 2], [2, 4], [4, 8]]

    const mapper = new Map([['1', 'a'], ['2', 'b']]);
    Array.from(mapper.values());
    // ['a', 'b'];

    Array.from(mapper.keys());
    // ['1', '2'];

### Array from a `NodeList`

    // Create an array based on a property of DOM Elements
    const images = document.getElementsByTagName('img');
    const sources = Array.from(images, image => image.src);
    const insecureSources = sources.filter(link => link.startsWith('http://'));

### Array from an Array-like object (arguments)

    function f() {
      return Array.from(arguments);
    }

    f(1, 2, 3);

    // [ 1, 2, 3 ]

### Using arrow functions and `Array.from()`

    // Using an arrow function as the map function to
    // manipulate the elements
    Array.from([1, 2, 3], x => x + x);
    // [2, 4, 6]

    // Generate a sequence of numbers
    // Since the array is initialized with `undefined` on each position,
    // the value of `v` below will be `undefined`
    Array.from({length: 5}, (v, i) => i);
    // [0, 1, 2, 3, 4]

### Sequence generator (range)

    // Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP etc)
    const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));

    // Generate numbers range 0..4
    range(0, 4, 1);
    // [0, 1, 2, 3, 4]

    // Generate numbers range 1..10 with step of 2
    range(1, 10, 2);
    // [1, 3, 5, 7, 9]

    // Generate the alphabet using Array.from making use of it being ordered as a sequence
    range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
    // ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

## Specifications

<table><thead><tr class="header"><th>Specification</th><th>Initial publication</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.from">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Array.from' in that specification.</span></a></td><td>ECMAScript 2015</td></tr></tbody></table>

`from`

45

12

32

No

32

9

45

45

32

32

9

5.0

## Polyfill

`Array.from()` was added to the ECMA-262 standard in the 6<sup>th</sup> Edition (ES2015). As such, it may not be present in other implementations of the standard.

You can work around this by inserting the following code at the beginning of your scripts, allowing use of `Array.from()` in implementations that don't natively support it.

**Note:** This algorithm is exactly as specified in ECMA-262 6<sup>th</sup> Edition (assuming `Object` and `TypeError` have their original values and that `callback.call()` evaluates to the original value of [`Function.prototype.call()`](../function/call)).

In addition, since true iterables cannot be polyfilled, this implementation does not support generic iterables as defined in the 6<sup>th</sup> Edition of ECMA-262.

    // Production steps of ECMA-262, Edition 6, 22.1.2.1
    if (!Array.from) {
        Array.from = (function () {
            var symbolIterator;
            try {
                symbolIterator = Symbol.iterator
                    ? Symbol.iterator
                    : 'Symbol(Symbol.iterator)';
            } catch (e) {
                symbolIterator = 'Symbol(Symbol.iterator)';
            }

            var toStr = Object.prototype.toString;
            var isCallable = function (fn) {
                return (
                    typeof fn === 'function' ||
                    toStr.call(fn) === '[object Function]'
                );
            };
            var toInteger = function (value) {
                var number = Number(value);
                if (isNaN(number)) return 0;
                if (number === 0 || !isFinite(number)) return number;
                return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
            };
            var maxSafeInteger = Math.pow(2, 53) - 1;
            var toLength = function (value) {
                var len = toInteger(value);
                return Math.min(Math.max(len, 0), maxSafeInteger);
            };

            var setGetItemHandler = function setGetItemHandler(isIterator, items) {
                var iterator = isIterator && items[symbolIterator]();
                return function getItem(k) {
                    return isIterator ? iterator.next() : items[k];
                };
            };

            var getArray = function getArray(
                T,
                A,
                len,
                getItem,
                isIterator,
                mapFn
            ) {
                // 16. Let k be 0.
                var k = 0;

                // 17. Repeat, while k < len… or while iterator is done (also steps a - h)
                while (k < len || isIterator) {
                    var item = getItem(k);
                    var kValue = isIterator ? item.value : item;

                    if (isIterator && item.done) {
                        return A;
                    } else {
                        if (mapFn) {
                            A[k] =
                                typeof T === 'undefined'
                                    ? mapFn(kValue, k)
                                    : mapFn.call(T, kValue, k);
                        } else {
                            A[k] = kValue;
                        }
                    }
                    k += 1;
                }

                if (isIterator) {
                    throw new TypeError(
                        'Array.from: provided arrayLike or iterator has length more then 2 ** 52 - 1'
                    );
                } else {
                    A.length = len;
                }

                return A;
            };

            // The length property of the from method is 1.
            return function from(arrayLikeOrIterator /*, mapFn, thisArg */) {
                // 1. Let C be the this value.
                var C = this;

                // 2. Let items be ToObject(arrayLikeOrIterator).
                var items = Object(arrayLikeOrIterator);
                var isIterator = isCallable(items[symbolIterator]);

                // 3. ReturnIfAbrupt(items).
                if (arrayLikeOrIterator == null && !isIterator) {
                    throw new TypeError(
                        'Array.from requires an array-like object or iterator - not null or undefined'
                    );
                }

                // 4. If mapfn is undefined, then let mapping be false.
                var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
                var T;
                if (typeof mapFn !== 'undefined') {
                    // 5. else
                    // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
                    if (!isCallable(mapFn)) {
                        throw new TypeError(
                            'Array.from: when provided, the second argument must be a function'
                        );
                    }

                    // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
                    if (arguments.length > 2) {
                        T = arguments[2];
                    }
                }

                // 10. Let lenValue be Get(items, "length").
                // 11. Let len be ToLength(lenValue).
                var len = toLength(items.length);

                // 13. If IsConstructor(C) is true, then
                // 13. a. Let A be the result of calling the [[Construct]] internal method
                // of C with an argument list containing the single item len.
                // 14. a. Else, Let A be ArrayCreate(len).
                var A = isCallable(C) ? Object(new C(len)) : new Array(len);

                return getArray(
                    T,
                    A,
                    len,
                    setGetItemHandler(isIterator, items),
                    isIterator,
                    mapFn
                );
            };
        })();
    }

## See also

-   [`Array`](../array)
-   [`Array.prototype.map()`](map)
-   [`TypedArray.from()`](../typedarray/from)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from</a>

# String.fromCharCode()

The static `String.fromCharCode()` method returns a string created from the specified sequence of UTF-16 code units.

## Syntax

    String.fromCharCode(num1)
    String.fromCharCode(num1, num2)
    String.fromCharCode(num1, num2, ..., numN)

### Parameters

`num1, ..., numN`  
A sequence of numbers that are UTF-16 code units. The range is between `0` and `65535` (`0xFFFF`). Numbers greater than `0xFFFF` are truncated. No validity checks are performed.

### Return value

A string of length `N` consisting of the `N` specified UTF-16 code units.

## Description

This method returns a string and not a [`String`](../string) object.

Because `fromCharCode()` is a static method of [`String`](../string), you always use it as `String.fromCharCode()`, rather than as a method of a [`String`](../string) object you created.

### Returning supplementary characters

In UTF-16, the most common characters can be represented by a single 16-bit value (i.e. a code unit). However, this set of characters, known as the Base Multilingual Plane (BMP), is only <sup>1</sup>/<sub>17</sub><sup>th</sup> of the total addressable Unicode code points. The remaining code points, in the range of `65536` (`0x010000`) to `1114111` (`0x10FFFF`) are known as supplementary characters. In UTF-16, supplementary characters are represented by two 16-bit code units, known as surrogates, that were reserved for this purpose. A valid combination of two surrogates used to represent a supplementary character is known as a surrogate pair.

Because `fromCharCode()` only works with 16-bit values (same as the `\u` escape sequence), a surrogate pair is required in order to return a supplementary character. For example, both `String.fromCharCode(0xD83C, 0xDF03)` and `\uD83C\uDF03` return code point `U+1F303` "Night with Stars".

While there is a mathematical relationship between the supplementary code point value (e.g. `0x1F303`) and both surrogate values that represent it (e.g., `0xD83C` and `0xDF03`), it does require an extra step to either calculate or look up the surrogate pair values every time a supplementary code point is to be used. For this reason, it's more convenient to use [`String.fromCodePoint()`](fromcodepoint) (part of the ES2015 standard), which allows for returning supplementary characters based on their actual code point value. For example, `String.fromCodePoint(0x1F303)` returns code point `U+1F303` "Night with Stars".

## Examples

### Using fromCharCode()

BMP characters, in UTF-16, use a single code unit:

    String.fromCharCode(65, 66, 67);   // returns "ABC"
    String.fromCharCode(0x2014);       // returns "—"
    String.fromCharCode(0x12014);      // also returns "—"; the digit 1 is truncated and ignored
    String.fromCharCode(8212);         // also returns "—"; 8212 is the decimal form of 0x2014

Supplementary characters, in UTF-16, require two code units (i.e. a surrogate pair):

    String.fromCharCode(0xD83C, 0xDF03); // Code Point U+1F303 "Night with
    String.fromCharCode(55356, 57091);   // Stars" == "\uD83C\uDF03"

    String.fromCharCode(0xD834, 0xDF06, 0x61, 0xD834, 0xDF07); // "\uD834\uDF06a\uD834\uDF07"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.fromcharcode">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'String.fromCharCode' in that specification.</span></a></td></tr></tbody></table>

`fromCharCode`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`String.fromCodePoint()`](fromcodepoint)
-   [`String.prototype.charAt()`](charat)
-   [`String.prototype.charCodeAt()`](charcodeat)
-   [`String.prototype.codePointAt()`](codepointat)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode</a>

# String.fromCodePoint()

The static `String.fromCodePoint()` method returns a string created by using the specified sequence of code points.

## Syntax

    String.fromCodePoint(num1)
    String.fromCodePoint(num1, num2)
    String.fromCodePoint(num1, num2, ..., numN)

### Parameters

`num1, ..., numN`  
A sequence of code points.

### Return value

A string created by using the specified sequence of code points.

### Exceptions

-   A [`RangeError`](../../errors/not_a_codepoint) is thrown if an invalid Unicode code point is given (e.g. `"RangeError: NaN is not a valid code point"`).

## Description

This method returns a string (and _not_ a [`String`](../string) object).

Because `fromCodePoint()` is a static method of [`String`](../string), you must call it as `String.fromCodePoint()`, rather than as a method of a [`String`](../string) object you created.

## Polyfill

The `String.fromCodePoint()` method has been added to ECMAScript 2015 and may not be supported in all web browsers or environments yet.

Use the code below for a polyfill:

    if (!String.fromCodePoint) (function(stringFromCharCode) {
        var fromCodePoint = function(_) {
          var codeUnits = [], codeLen = 0, result = "";
          for (var index=0, len = arguments.length; index !== len; ++index) {
            var codePoint = +arguments[index];
            // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity`
            // The surrounding `!(...)` is required to correctly handle `NaN` cases
            // The (codePoint>>>0) === codePoint clause handles decimals and negatives
            if (!(codePoint < 0x10FFFF && (codePoint>>>0) === codePoint))
              throw RangeError("Invalid code point: " + codePoint);
            if (codePoint <= 0xFFFF) { // BMP code point
              codeLen = codeUnits.push(codePoint);
            } else { // Astral code point; split in surrogate halves
              // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
              codePoint -= 0x10000;
              codeLen = codeUnits.push(
                (codePoint >> 10) + 0xD800,  // highSurrogate
                (codePoint % 0x400) + 0xDC00 // lowSurrogate
              );
            }
            if (codeLen >= 0x3fff) {
              result += stringFromCharCode.apply(null, codeUnits);
              codeUnits.length = 0;
            }
          }
          return result + stringFromCharCode.apply(null, codeUnits);
        };
        try { // IE 8 only supports `Object.defineProperty` on DOM elements
          Object.defineProperty(String, "fromCodePoint", {
            "value": fromCodePoint, "configurable": true, "writable": true
          });
        } catch(e) {
          String.fromCodePoint = fromCodePoint;
        }
    }(String.fromCharCode));

## Examples

### Using `fromCodePoint()`

Valid input:

    String.fromCodePoint(42);       // "*"
    String.fromCodePoint(65, 90);   // "AZ"
    String.fromCodePoint(0x404);    // "\u0404" == "Є"
    String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
    String.fromCodePoint(194564);   // "\uD87E\uDC04"
    String.fromCodePoint(0x1D306, 0x61, 0x1D307); // "\uD834\uDF06a\uD834\uDF07"

Invalid input:

    String.fromCodePoint('_');      // RangeError
    String.fromCodePoint(Infinity); // RangeError
    String.fromCodePoint(-1);       // RangeError
    String.fromCodePoint(3.14);     // RangeError
    String.fromCodePoint(3e-2);     // RangeError
    String.fromCodePoint(NaN);      // RangeError

### Compared to `fromCharCode()`

[`String.fromCharCode()`](fromcharcode) cannot return supplementary characters (i.e. code points `0x010000` – `0x10FFFF`) by specifying their code point. Instead, it requires the UTF-16 surrogate pair in order to return a supplementary character:

    String.fromCharCode(0xD83C, 0xDF03); // Code Point U+1F303 "Night with
    String.fromCharCode(55356, 57091);   // Stars" == "\uD83C\uDF03"

`String.fromCodePoint()`, on the other hand, can return 4-byte supplementary characters, as well as the more common 2-byte BMP characters, by specifying their code point (which is equivalent to the UTF-32 code unit):

    String.fromCodePoint(0x1F303); // or 127747 in decimal

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.fromcodepoint">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.fromcodepoint</span></a></td></tr></tbody></table>

`fromCodePoint`

41

12

29

No

28

10

41

41

29

28

10

4.0

## See also

-   [`String.fromCharCode()`](fromcharcode)
-   [`String.prototype.charAt()`](charat)
-   [`String.prototype.codePointAt()`](codepointat)
-   [`String.prototype.charCodeAt()`](charcodeat)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint</a>

# Object.fromEntries()

The `Object.fromEntries()` method transforms a list of key-value pairs into an object.

## Syntax

    Object.fromEntries(iterable);

### Parameters

`iterable`  
An iterable such as [`Array`](../array) or [`Map`](../map) or other objects implementing the [iterable protocol](../../iteration_protocols#the_iterable_protocol).

### Return value

A new object whose properties are given by the entries of the iterable.

## Description

The `Object.fromEntries()` method takes a list of key-value pairs and returns a new object whose properties are given by those entries. The iterable argument is expected to be an object that implements an `@@iterator` method, that returns an iterator object, that produces a two element array-like object, whose first element is a value that will be used as a property key, and whose second element is the value to associate with that property key.

`Object.fromEntries()` performs the reverse of [`Object.entries()`](entries).

## Examples

### Converting a Map to an Object

With `Object.fromEntries`, you can convert from [`Map`](../map) to [`Object`](../object):

    const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
    const obj = Object.fromEntries(map);
    console.log(obj); // { foo: "bar", baz: 42 }

### Converting an Array to an Object

With `Object.fromEntries`, you can convert from [`Array`](../array) to [`Object`](../object):

    const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
    const obj = Object.fromEntries(arr);
    console.log(obj); // { 0: "a", 1: "b", 2: "c" }

### Object transformations

With `Object.fromEntries`, its reverse method [`Object.entries()`](entries), and [array manipulation methods](../array#methods_2), you are able to transform objects like this:

    const object1 = { a: 1, b: 2, c: 3 };

    const object2 = Object.fromEntries(
      Object.entries(object1)
      .map(([ key, val ]) => [ key, val * 2 ])
    );

    console.log(object2);
    // { a: 2, b: 4, c: 6 }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.fromentries">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.fromentries</span></a></td></tr></tbody></table>

`fromEntries`

73

79

63

No

60

12.1

73

73

63

No

12.2

No

## See also

-   [`Object.entries()`](entries)
-   [`Object.keys()`](keys)
-   [`Object.values()`](values)
-   [`Map.prototype.entries()`](../map/entries)
-   [`Map.prototype.keys()`](../map/keys)
-   [`Map.prototype.values()`](../map/values)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries</a>

# Math.fround()

The `Math.fround()` function returns the nearest [32-bit single precision](https://en.wikipedia.org/wiki/Single-precision_floating-point_format) float representation of a [`Number`](../number).

## Syntax

    Math.fround(doubleFloat)

### Parameters

`doubleFloat`  
A [`Number`](../number). If the parameter is of a different type, it will get converted to a number or to [`NaN`](../nan) if it cannot be converted.

### Return value

The nearest [32-bit single precision](https://en.wikipedia.org/wiki/Single-precision_floating-point_format) float representation of the given number.

## Description

JavaScript uses 64-bit double floating-point numbers internally, which offer a very high precision. However, sometimes you may be working with 32-bit floating-point numbers, for example if you are reading values from a [`Float32Array`](../float32array). This can create confusion: Checking a 64-bit float and a 32-bit float for equality may fail even though the numbers are seemingly identical.

To solve this, `Math.fround()` can be used to cast the 64-bit float to a 32-bit float. Internally, JavaScript continues to treat the number as a 64-bit float, it just performs a "round to even" on the 23rd bit of the mantissa, and sets all following mantissa bits to `0`. If the number is outside the range of a 32-bit float, [`Infinity`](../infinity) or `-Infinity` is returned.

Because `fround()` is a static method of `Math`, you always use it as `Math.fround()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.fround()

The number 1.5 can be precisely represented in the binary numeral system, and is identical in 32-bit and 64-bit:

    Math.fround(1.5); // 1.5
    Math.fround(1.5) === 1.5; // true

However, the number 1.337 cannot be precisely represented in the binary numeral system, so it differs in 32-bit and 64-bit:

    Math.fround(1.337); // 1.3370000123977661
    Math.fround(1.337) === 1.337; // false

2<sup>150</sup> is too big for a 32-bit float, so `Infinity` is returned:

    2 ** 150; // 1.42724769270596e+45
    Math.fround(2 ** 150); // Infinity

If the parameter cannot be converted to a number, or it is [not-a-number](https://en.wikipedia.org/wiki/NaN) (`NaN`), `Math.fround()` will return `NaN`:

    Math.fround('abc'); // NaN
    Math.fround(NaN); // NaN

## Polyfill

This can be emulated with the following function, if [`Float32Array`](../float32array) are supported:

    Math.fround = Math.fround || (function (array) {
      return function(x) {
        return array[0] = x, array[0];
      };
    })(new Float32Array(1));

Supporting older browsers is slower, but also possible:

    if (!Math.fround) Math.fround = function(arg) {
      arg = Number(arg);
      // Return early for ±0 and NaN.
      if (!arg) return arg;
      var sign = arg < 0 ? -1 : 1;
      if (sign < 0) arg = -arg;
      // Compute the exponent (8 bits, signed).
      var exp = Math.floor(Math.log(arg) / Math.LN2);
      var powexp = Math.pow(2, Math.max(-126, Math.min(exp, 127)));
      // Handle subnormals: leading digit is zero if exponent bits are all zero.
      var leading = exp < -127 ? 0 : 1;
      // Compute 23 bits of mantissa, inverted to round toward zero.
      var mantissa = Math.round((leading - arg / powexp) * 0x800000);
      if (mantissa <= -0x800000) return sign * Infinity;
      return sign * powexp * (leading - mantissa / 0x800000);
    };

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.fround">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.fround</span></a></td></tr></tbody></table>

`fround`

38

12

26

No

25

8

38

38

26

25

8

3.0

## See also

-   [`Math.round()`](round)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/fround" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/fround</a>

# function\*

The `function*` declaration (`function` keyword followed by an asterisk) defines a _generator function_, which returns a [`Generator`](../global_objects/generator) object.

You can also define generator functions using the [`GeneratorFunction`](../global_objects/generatorfunction) constructor, or the function expression syntax.

## Syntax

    function* name([param[, param[, ... param]]]) {
       statements
    }

`name`  
The function name.

`param` <span class="badge inline optional">Optional</span>  
The name of a formal parameter for the function.

`statements`  
The statements comprising the body of the function.

## Description

Generators are functions that can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.

Generators in JavaScript -- especially when combined with Promises -- are a very powerful tool for asynchronous programming as they mitigate -- if not entirely eliminate -- the problems with callbacks, such as [Callback Hell](http://callbackhell.com/) and [Inversion of Control](https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/). However, an even simpler solution to these problems can be achieved with [async functions](async_function).

Calling a generator function does not execute its body immediately; an [iterator](../iteration_protocols#iterator) object for the function is returned instead. When the iterator's `next()` method is called, the generator function's body is executed until the first [`yield`](../operators/yield) expression, which specifies the value to be returned from the iterator or, with [`yield*`](../operators/yield*), delegates to another generator function. The `next()` method returns an object with a `value` property containing the yielded value and a `done` property which indicates whether the generator has yielded its last value, as a boolean. Calling the `next()` method with an argument will resume the generator function execution, replacing the `yield` expression where an execution was paused with the argument from `next()`.

A `return` statement in a generator, when executed, will make the generator finish (i.e. the `done` property of the object returned by it will be set to `true`). If a value is returned, it will be set as the `value` property of the object returned by the generator.  
Much like a `return` statement, an error thrown inside the generator will make the generator finished -- unless caught within the generator's body.  
When a generator is finished, subsequent `next()` calls will not execute any of that generator's code, they will just return an object of this form: `{value: undefined, done: true}`.

## Examples

### Simple example

    function* idMaker() {
      var index = 0;
      while (true)
        yield index++;
    }

    var gen = idMaker();

    console.log(gen.next().value); // 0
    console.log(gen.next().value); // 1
    console.log(gen.next().value); // 2
    console.log(gen.next().value); // 3
    // ...

### Example with yield\*

    function* anotherGenerator(i) {
      yield i + 1;
      yield i + 2;
      yield i + 3;
    }

    function* generator(i) {
      yield i;
      yield* anotherGenerator(i);
      yield i + 10;
    }

    var gen = generator(10);

    console.log(gen.next().value); // 10
    console.log(gen.next().value); // 11
    console.log(gen.next().value); // 12
    console.log(gen.next().value); // 13
    console.log(gen.next().value); // 20

### Passing arguments into Generators

    function* logGenerator() {
      console.log(0);
      console.log(1, yield);
      console.log(2, yield);
      console.log(3, yield);
    }

    var gen = logGenerator();

    // the first call of next executes from the start of the function
    // until the first yield statement
    gen.next();             // 0
    gen.next('pretzel');    // 1 pretzel
    gen.next('california'); // 2 california
    gen.next('mayonnaise'); // 3 mayonnaise

### Return statement in a generator

    function* yieldAndReturn() {
      yield "Y";
      return "R";
      yield "unreachable";
    }

    var gen = yieldAndReturn()
    console.log(gen.next()); // { value: "Y", done: false }
    console.log(gen.next()); // { value: "R", done: true }
    console.log(gen.next()); // { value: undefined, done: true }

### Generator as an object property

    const someObj = {
      *generator () {
        yield 'a';
        yield 'b';
      }
    }

    const gen = someObj.generator()

    console.log(gen.next()); // { value: 'a', done: false }
    console.log(gen.next()); // { value: 'b', done: false }
    console.log(gen.next()); // { value: undefined, done: true }

### Generator as an object method

    class Foo {
      *generator () {
        yield 1;
        yield 2;
        yield 3;
      }
    }

    const f = new Foo ();
    const gen = f.generator();

    console.log(gen.next()); // { value: 1, done: false }
    console.log(gen.next()); // { value: 2, done: false }
    console.log(gen.next()); // { value: 3, done: false }
    console.log(gen.next()); // { value: undefined, done: true }

### Generator as a computed property

    class Foo {
      *[Symbol.iterator] () {
        yield 1;
        yield 2;
      }
    }

    const SomeObj = {
      *[Symbol.iterator] () {
        yield 'a';
        yield 'b';
      }
    }

    console.log(Array.from(new Foo)); // [ 1, 2 ]
    console.log(Array.from(SomeObj)); // [ 'a', 'b' ]

### Generators are not constructable

    function* f() {}
    var obj = new f; // throws "TypeError: f is not a constructor

### Generator defined in an expression

    const foo = function* () {
      yield 10;
      yield 20;
    };

    const bar = foo();
    console.log(bar.next()); // {value: 10, done: false}

### Generator example

    function* powers(n){
         //endless loop to generate
         for(let current =n;; current *= n){
             yield current;
         }
    }

    for(let power of powers(2)){
         //controlling generator
         if(power > 32) break;
         console.log(power)
               //2
              //4
             //8
            //16
           //32
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-generator-function-definitions">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-generator-function-definitions</span></a></td></tr></tbody></table>

`function*`

39

13

26

No

26

10

39

39

26

26

10

4.0

`IteratorResult_object`

49

13

29

No

36

10

49

49

29

36

10

5.0

`not_constructable_with_new`

50

13

43

No

37

10

50

50

43

37

10

5.0

`trailing_comma_in_parameters`

58

14

52

No

45

10

58

58

52

43

10

7.0

## See also

-   [`function*`](../operators/function*) expression
-   [`GeneratorFunction`](../global_objects/generatorfunction) object
-   [Iteration protocols](../iteration_protocols)
-   [`yield`](../operators/yield)
-   [`yield*`](../operators/yield*)
-   [`Function`](../global_objects/function) object
-   [`function`](function) declaration
-   [`function`](../operators/function) expression
-   [Functions and function scope](../functions)
-   Other web resources:
    -   [Regenerator](https://facebook.github.io/regenerator/) an ES2015 generator compiler to ES5
    -   [Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013](https://www.youtube.com/watch?v=qbKWsbJ76-s)
    -   [Task.js](https://github.com/mozilla/task.js)
    -   [Iterating generators asynchronously](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md#iterating-generators-asynchronously)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\*</a>

# Function expression

The `function` keyword can be used to define a function inside an expression.

You can also define functions using the [`Function`](../global_objects/function/function) constructor and a [function declaration](../statements/function).

## Syntax

The expression is not allowed at the start of a statement.

    function [name]([param1[, param2[, ..., paramN]]]) {
       statements
    }

As of ES2015, you can also use [arrow functions](../functions/arrow_functions).

### Parameters

`name` <span class="badge inline optional">Optional</span>  
The function name. Can be omitted, in which case the function is _anonymous_. The name is only local to the function body.

`paramN` <span class="badge inline optional">Optional</span>  
The name of an argument to be passed to the function.

`statements` <span class="badge inline optional">Optional</span>  
The statements which comprise the body of the function.

## Description

A function expression is very similar to and has almost the same syntax as a function declaration (see [`function`](../statements/function) statement for details). The main difference between a function expression and a function declaration is the _function name_, which can be omitted in function expressions to create _anonymous_ functions. A function expression can be used as an [IIFE (Immediately Invoked Function Expression)](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) which runs as soon as it is defined. See also the chapter about [functions](../functions) for more information.

### Function expression hoisting

Function expressions in JavaScript are not hoisted, unlike [function declarations](../statements/function#function_declaration_hoisting). You can't use function expressions before you create them:

    console.log(notHoisted) // undefined
    //  even though the variable name is hoisted, the definition isn't. so it's undefined.
    notHoisted(); // TypeError: notHoisted is not a function

    var notHoisted = function() {
       console.log('bar');
    };

### Named function expression

If you want to refer to the current function inside the function body, you need to create a named function expression. <span class="underline">**This name is then local only to the function body (scope)**</span>. This also avoids using the non-standard [`arguments.callee`](../functions/arguments/callee) property.

    let math = {
      'factit': function factorial(n) {
        console.log(n)
        if (n <= 1) {
          return 1;
        }
        return n * factorial(n - 1);
      }
    };

    math.factit(3) //3;2;1;

The variable the function expression is assigned to will have a `name` property. The name doesn't change if it's assigned to a different variable. If function name is omitted, it will be the variable name (implicit name). If function name is present, it will be the function name (explicit name). This also applies to [`arrow functions`](../functions/arrow_functions) (arrows don't have a name so you can only give the variable an implicit name).

    var foo = function() {}
    foo.name // "foo"

    var foo2 = foo
    foo2.name // "foo"

    var bar = function baz() {}
    bar.name // "baz"

    console.log(foo === foo2); // true
    console.log(typeof baz); // undefined
    console.log(bar === baz); // false (errors because baz == undefined)

## Examples

### Creating an unnamed function

The following example defines an unnamed function and assigns it to `x`. The function returns the square of its argument:

    var x = function(y) {
       return y * y;
    };

### Using a function as a callback

More commonly it is used as a [callback](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function):

    button.addEventListener('click', function(event) {
        console.log('button is clicked!')
    })

### Using an immediately executed function expression

An anonymous function is created and called:

    (function() {
        console.log('Code runs!')
    })();

    // or

    !function() {
      console.log('Code runs!')
    }();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-function-definitions">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-function-definitions</span></a></td></tr></tbody></table>

`function`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`trailing_comma`

58

14

52

No

45

10

58

58

52

43

10

7.0

## See also

-   [Arrow functions](../functions/arrow_functions)
-   [Functions and function scope](../functions)
-   [`Function`](../global_objects/function)
-   [`function`](../statements/function) statement
-   [`function*`](../statements/function*) statement
-   [`function*`](function*) expression
-   [`GeneratorFunction`](../global_objects/generatorfunction)
-   [async function](../statements/async_function)
-   [async function expression](async_function)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function</a>

# Functions

Generally speaking, a function is a "subprogram" that can be _called_ by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the _function body_. Values can be _passed_ to a function, and the function will _return_ a value.

In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are `Function` objects.

For more examples and explanations, see also the [JavaScript guide about functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions).

## Description

Every function in JavaScript is a `Function` object. See [`Function`](global_objects/function) for information on properties and methods of `Function` objects.

To return a value other than the default, a function must have a `return` statement that specifies the value to return. A function without a return statement will return a default value. In the case of a [constructor](global_objects/object/constructor) called with the `new` keyword, the default value is the value of its `this` parameter. For all other functions, the default return value is [`undefined`](global_objects/undefined).

The parameters of a function call are the function's _arguments_. Arguments are passed to functions _by value_. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:

    /* Declare the function 'myFunc' */
    function myFunc(theObject) {
      theObject.brand = "Toyota";
    }

    /*
     * Declare variable 'mycar';
     * create and initialize a new Object;
     * assign reference to it to 'mycar'
     */
    var mycar = {
      brand: "Honda",
      model: "Accord",
      year: 1998
    };

    /* Logs 'Honda' */
    console.log(mycar.brand);

    /* Pass object reference to the function */
    myFunc(mycar);

    /*
     * Logs 'Toyota' as the value of the 'brand' property
     * of the object, as changed to by the function.
     */
    console.log(mycar.brand);

The [`this` keyword](operators/this) does not refer to the currently executing function, so you must refer to `Function` objects by name, even within the function body.

## Defining functions

There are several ways to define functions:

### The function declaration (`function` statement)

There is a special syntax for declaring functions (see [function statement](statements/function) for details):

    function name([param[, param[, ... param]]]) {
       statements
    }

`name`  
The function name.

`param`  
The name of an argument to be passed to the function.

`statements`  
The statements comprising the body of the function.

### The function expression (`function` expression)

A function expression is similar to and has the same syntax as a function declaration (see [function expression](operators/function) for details). A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions. Function expressions are not _hoisted_ onto the beginning of the scope, therefore they cannot be used before they appear in the code.

    function [name]([param[, param[, ... param]]]) {
       statements
    }

`name`  
The function name. Can be omitted, in which case the function becomes known as an anonymous function.

`param`  
The name of an argument to be passed to the function.

`statements`  
The statements comprising the body of the function.

Here is an example of an **anonymous** function expression (the `name` is not used):

    var myFunction = function() {
        statements
    }

It is also possible to provide a name inside the definition in order to create a **named** function expression:

    var myFunction = function namedFunction(){
        statements
    }

One of the benefits of creating a named function expression is that in case we encountered an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.

As we can see, both examples do not start with the `function` keyword. Statements involving functions which do not start with `function` are function expressions.

When functions are used only once, a common pattern is an [IIFE (Immediately Invoked Function Expression)](https://developer.mozilla.org/en-US/docs/Glossary/IIFE).

    (function() {
        statements
    })();

IIFE are function expressions that are invoked as soon as the function is declared.

### The generator function declaration (`function*` statement)

There is a special syntax for generator function declarations (see [`function* statement`](statements/function*) for details):

    function* name([param[, param[, ... param]]]) {
       statements
    }

`name`  
The function name.

`param`  
The name of an argument to be passed to the function.

`statements`  
The statements comprising the body of the function.

### The generator function expression (`function*` expression)

A generator function expression is similar to and has the same syntax as a generator function declaration (see [`function* expression`](operators/function*) for details):

    function* [name]([param[, param[, ... param]]]) {
       statements
    }

`name`  
The function name. Can be omitted, in which case the function becomes known as an anonymous function.

`param`  
The name of an argument to be passed to the function.

`statements`  
The statements comprising the body of the function.

### The arrow function expression (=&gt;)

An arrow function expression has a shorter syntax and lexically binds its `this` value (see [arrow functions](functions/arrow_functions) for details):

    ([param[, param]]) => {
       statements
    }

    param => expression

`param`  
The name of an argument. Zero arguments need to be indicated with `()`. For only one argument, the parentheses are not required. (like `foo => 1`)

`statements` or `expression`  
Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.

### The `Function` constructor

**Note:** Using the `Function` constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.

As all other objects, [`Function`](global_objects/function) objects can be created using the `new` operator:

    new Function (arg1, arg2, ... argN, functionBody)

`arg1, arg2, ... argN`  
Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.

`functionBody`  
A string containing the JavaScript statements comprising the function body.

Invoking the `Function` constructor as a function (without using the `new` operator) has the same effect as invoking it as a constructor.

### The `GeneratorFunction` constructor

**Note:** `GeneratorFunction` is not a global object, but could be obtained from generator function instance (see [`GeneratorFunction`](global_objects/generatorfunction) for more detail).

**Note:** Using the `GeneratorFunction` constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.

As all other objects, [`GeneratorFunction`](global_objects/generatorfunction) objects can be created using the `new` operator:

    new GeneratorFunction (arg1, arg2, ... argN, functionBody)

`arg1, arg2, ... argN`  
Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "`x`", "`theValue`", or "`a,b`".

`functionBody`  
A string containing the JavaScript statements comprising the function definition.

Invoking the `GeneratorFunction` constructor as a function (without using the `new` operator) has the same effect as invoking it as a constructor.

## Function parameters

### Default parameters

Default function parameters allow formal parameters to be initialized with default values if no value or `undefined` is passed. For more details, see [default parameters](functions/default_parameters).

### Rest parameters

The rest parameter syntax allows representing an indefinite number of arguments as an array. For more details, see [rest parameters](functions/rest_parameters).

## The `arguments` object

You can refer to a function's arguments within the function by using the `arguments` object. See [arguments](functions/arguments).

-   `arguments`: An array-like object containing the arguments passed to the currently executing function.
-   `arguments.callee` : The currently executing function.
-   `arguments.caller` : The function that invoked the currently executing function.
-   `arguments.length`: The number of arguments passed to the function.

## Defining method functions

### Getter and setter functions

You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

[get](functions/get)  
Binds an object property to a function that will be called when that property is looked up.

[set](functions/set)  
Binds an object property to a function to be called when there is an attempt to set that property.

### Method definition syntax

Starting with ECMAScript 2015, you are able to define own methods in a shorter syntax, similar to the getters and setters. See [method definitions](functions/method_definitions) for more information.

    var obj = {
      foo() {},
      bar() {}
    };

## Constructor vs. declaration vs. expression

Compare the following:

A function defined with the `Function` _constructor_ assigned to the variable `multiply`:

    var multiply = new Function('x', 'y', 'return x * y');

A _function declaration_ of a function named `multiply`:

    function multiply(x, y) {
       return x * y;
    } // there is no semicolon here

A _function expression_ of an anonymous function assigned to the variable `multiply`:

    var multiply = function(x, y) {
       return x * y;
    };

A _function expression_ of a function named `func_name` assigned to the variable `multiply`:

    var multiply = function func_name(x, y) {
       return x * y;
    };

### Differences

All do approximately the same thing, with a few subtle differences:

There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or `undefined` if the function name was previously declared via a `var` statement). For example:

    var y = function x() {};
    alert(x); // throws an error

The function name also appears when the function is serialized via [`Function`'s toString method](global_objects/function/tostring).

On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope in which the function is declared.

As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:

A function defined by '`new Function'` does not have a function name. However, in the [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, `alert(new Function())` outputs:

    function anonymous() {
    }

Since the function actually does not have a name, `anonymous` is not a variable that can be accessed within the function. For example, the following would result in an error:

    var foo = new Function("alert(anonymous);");
    foo();

Unlike functions defined by function expressions or by the `Function` constructor, a function defined by a function declaration can be used before the function declaration itself. For example:

    foo(); // alerts FOO!
    function foo() {
       alert('FOO!');
    }

A function defined by a function expression or by a function declaration inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a `Function` constructor does not inherit any scope other than the global scope (which all functions inherit).

    /*
     * Declare and initialize a variable 'p' (global)
     * and a function 'myFunc' (to change the scope) inside which
     * declare a varible with same name 'p' (current) and
     * define three functions using three different ways:-
     *     1. function declaration
     *     2. function expression
     *     3. function constructor
     * each of which will log 'p'
     */
    var p = 5;
    function myFunc() {
        var p = 9;

        function decl() {
            console.log(p);
        }
        var expr = function() {
            console.log(p);
        };
        var cons = new Function('\tconsole.log(p);');

        decl();
        expr();
        cons();
    }
    myFunc();

    /*
     * Logs:-
     * 9  - for 'decl' by function declaration (current scope)
     * 9  - for 'expr' by function expression (current scope)
     * 5  - for 'cons' by Function constructor (global scope)
     */

Functions defined by function expressions and function declarations are parsed only once, while those defined by the `Function` constructor are not. That is, the function body string passed to the `Function` constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "`new Function(...)`". Therefore the `Function` constructor should generally be avoided whenever possible.

It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a `Function constructor` 's string aren't parsed repeatedly. For example:

    var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
    foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.

A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:

-   becomes part of an expression
-   is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:

<!-- -->

    var x = 0;               // source element
    if (x === 0) {           // source element
       x = 10;               // not a source element
       function boo() {}     // not a source element
    }
    function foo() {         // source element
       var y = 20;           // source element
       function bar() {}     // source element
       while (y === 10) {    // source element
          function blah() {} // not a source element
          y++;               // not a source element
       }
    }

### Examples

    // function declaration
    function foo() {}

    // function expression
    (function bar() {})

    // function expression
    x = function hello() {}

    if (x) {
       // function expression
       function world() {}
    }

    // function declaration
    function a() {
       // function declaration
       function b() {}
       if (0) {
          // function expression
          function c() {}
       }
    }

## Block-level functions

In [strict mode](strict_mode), starting with ES2015, functions inside blocks are now scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.

    'use strict';

    function f() {
      return 1;
    }

    {
      function f() {
        return 2;
      }
    }

    f() === 1; // true

    // f() === 2 in non-strict mode

### Block-level functions in non-strict code

In a word: Don't.

In non-strict code, function declarations inside blocks behave strangely. For example:

    if (shouldDefineZero) {
       function zero() {     // DANGER: compatibility risk
          console.log("This is zero.");
       }
    }

ES2015 says that if `shouldDefineZero` is false, then `zero` should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define `zero` whether the block executed or not.

In [strict mode](strict_mode), all browsers that support ES2015 handle this the same way: `zero` is defined only if `shouldDefineZero` is true, and only in the scope of the `if`-block.

A safer way to define functions conditionally is to assign a function expression to a variable:

    var zero;
    if (shouldDefineZero) {
       zero = function() {
          console.log("This is zero.");
       };
    }

## Examples

### Returning a formatted number

The following function returns a string containing the formatted representation of a number padded with leading zeros.

    // This function returns a string padded with leading zeros
    function padZeros(num, totalLen) {
       var numStr = num.toString();             // Initialize return value as string
       var numZeros = totalLen - numStr.length; // Calculate no. of zeros
       for (var i = 1; i <= numZeros; i++) {
          numStr = "0" + numStr;
       }
       return numStr;
    }

The following statements call the padZeros function.

    var result;
    result = padZeros(42,4); // returns "0042"
    result = padZeros(42,2); // returns "42"
    result = padZeros(5,4);  // returns "0005"

### Determining whether a function exists

You can determine whether a function exists by using the `typeof` operator. In the following example, a test is performed to determine if the `window` object has a property called `noFunc` that is a function. If so, it is used; otherwise, some other action is taken.

     if ('function' === typeof window.noFunc) {
       // use noFunc()
     } else {
       // do something else
     }

Note that in the `if` test, a reference to `noFunc` is used—there are no brackets "()" after the function name so the actual function is not called.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-function-definitions">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-function-definitions</span></a></td></tr></tbody></table>

`Functions`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`arguments`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`arrow_functions`

45

12

22

\["The initial implementation of arrow functions in Firefox made them automatically strict. This has been changed as of Firefox 24. The use of `'use strict';` is now required.", "Prior to Firefox 39, a line terminator (`\\n`) was incorrectly allowed after arrow function arguments. This has been fixed to conform to the ES2015 specification and code like `() \\n => {}` will now throw a `SyntaxError` in this and later versions."\]

No

32

10

45

45

22

\["The initial implementation of arrow functions in Firefox made them automatically strict. This has been changed as of Firefox 24. The use of `'use strict';` is now required.", "Prior to Firefox 39, a line terminator (`\\n`) was incorrectly allowed after arrow function arguments. This has been fixed to conform to the ES2015 specification and code like `() \\n => {}` will now throw a `SyntaxError` in this and later versions."\]

32

10

5.0

`block_level_functions`

49

12

46

11

36

10

49

49

46

36

10

5.0

`default_parameters`

49

14

15

No

36

10

49

49

15

36

10

5.0

`get`

1

12

1.5

9

9.5

3

1

18

4

14

1

1.0

`method_definitions`

39

12

34

No

26

9

39

39

34

26

9

4.0

`rest_parameters`

47

12

15

No

34

10

47

47

15

34

10

5.0

`set`

1

12

1.5

9

9.5

3

1

18

4

14

1

1.0

## See also

-   [`function statement`](statements/function)
-   [`function expression`](operators/function)
-   [`function* statement`](statements/function*)
-   [`function* expression`](operators/function*)
-   [`Function`](global_objects/function)
-   [`GeneratorFunction`](global_objects/generatorfunction)
-   [`Arrow functions`](functions/arrow_functions)
-   [`Default parameters`](functions/default_parameters)
-   [`Rest parameters`](functions/rest_parameters)
-   [`Arguments object`](functions/arguments)
-   [`getter`](functions/get)
-   [`setter`](functions/set)
-   [`Method definitions`](functions/method_definitions)
-   Functions and function scope

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions</a>

# Generator

The `Generator` object is returned by a [generator function](../statements/function*) and it conforms to both the [iterable protocol](../iteration_protocols#the_iterable_protocol) and the [iterator protocol](../iteration_protocols#the_iterator_protocol).

## Constructor

This object cannot be instantiated directly. Instead, a `Generator` instance can be returned from a [generator function](../statements/function*):

    function* generator() {
      yield 1;
      yield 2;
      yield 3;
    }

    const gen = generator(); // "Generator { }"

    console.log(gen.next().value); // 1
    console.log(generator().next().value); // 1
    console.log(generator().next().value); // 1

## Instance methods

[`Generator.prototype.next()`](generator/next)  
Returns a value yielded by the [`yield`](../operators/yield) expression.

[`Generator.prototype.return()`](generator/return)  
Returns the given value and finishes the generator.

[`Generator.prototype.throw()`](generator/throw)  
Throws an error to a generator (also finishes the generator, unless caught from within that generator).

## Examples

### An infinite iterator

With a generator function, values are not evaluated until they are needed. Therefore a generator allows us to define a potentially infinite data structure.

    function* infinite() {
        let index = 0;

        while (true) {
            yield index++;
        }
    }

    const generator = infinite(); // "Generator { }"

    console.log(generator.next().value); // 0
    console.log(generator.next().value); // 1
    console.log(generator.next().value); // 2
    // ...

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-generator-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-generator-objects</span></a></td></tr></tbody></table>

`Generator`

39

13

26

No

26

10

39

39

26

26

10

4.0

`next`

39

13

26

No

26

10

39

39

26

26

10

4.0

`return`

50

13

38

No

37

10

50

50

38

37

10

5.0

`throw`

39

13

26

No

26

10

39

39

26

26

10

4.0

## See also

-   [`function*`](../statements/function*)
-   [`function*` expression](../operators/function*)
-   [`GeneratorFunction`](generatorfunction)
-   [The Iterator protocol](../iteration_protocols)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator</a>

# GeneratorFunction

The `GeneratorFunction` creates a new [generator function](../statements/function*) object. In JavaScript, every generator function is actually a `GeneratorFunction` object.

Note that `GeneratorFunction` is not a global object. It could be obtained by evaluating the following code.

    Object.getPrototypeOf(function*(){}).constructor

## Syntax

    new Function(arg1, functionBody)
    new Function(arg1, arg2, functionBody)
    new Function(arg1, ... , argN, functionBody)

### Parameters

`arg1, arg2, ... argN`  
Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "`x`", "`theValue`", or "`a,b`".

`functionBody`  
A string containing the JavaScript statements comprising the function definition.

## Description

[`generator function`](../statements/function*) objects created with the `GeneratorFunction` constructor are parsed when the function is created. This is less efficient than declaring a generator function with a [`function* expression`](../statements/function*) and calling it within your code, because such functions are parsed with the rest of the code.

All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.

**Note:** [`generator function`](../statements/function*) created with the `GeneratorFunction` constructor do not create closures to their creation contexts; they are always created in the global scope.

When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the `GeneratorFunction` constructor was called.

This is different from using [`eval`](eval) with code for a generator function expression.

Invoking the `GeneratorFunction` constructor as a function (without using the `new` operator) has the same effect as invoking it as a constructor.

## Examples

### Creating a generator function from a GeneratorFunction() constructor

    var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
    var g = new GeneratorFunction('a', 'yield a * 2');
    var iterator = g(10);
    console.log(iterator.next().value); // 20

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-generatorfunction-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-generatorfunction-objects</span></a></td></tr></tbody></table>

`GeneratorFunction`

39

13

26

No

26

10

39

39

26

26

10

4.0

## See also

-   [function\* function](../statements/function*)
-   [function\* expression](../operators/function*)
-   [`Function`](function)
-   [function statement](../statements/function)
-   [function expression](../operators/function)
-   [Functions and function scope](../functions)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction</a>

# getter

The `get` syntax binds an object property to a function that will be called when that property is looked up.

## Syntax

    {get prop() { ... } }
    {get [expression]() { ... } }

### Parameters

`prop`  
The name of the property to bind to the given function.

`expression`  
Starting with ECMAScript 2015, you can also use expressions for a computed property name to bind to the given function.

## Description

Sometimes it is desirable to allow access to a property that returns a dynamically computed value, or you may want to reflect the status of an internal variable without requiring the use of explicit method calls. In JavaScript, this can be accomplished with the use of a _getter_.

It is not possible to simultaneously have a getter bound to a property and have that property actually hold a value, although it _is_ possible to use a getter and a setter in conjunction to create a type of pseudo-property.

Note the following when working with the `get` syntax:

-   It can have an identifier which is either a number or a string;
-   It must have exactly zero parameters (see [Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments](https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/) for more information);
-   It must not appear in an object literal with another `get` or with a data entry for the same property (`{ get x() { }, get x() { } }` and `{ x: ..., get x() { } }` are forbidden).

## Examples

### Defining a getter on new objects in object initializers

This will create a pseudo-property `latest` for object `obj`, which will return the last array item in `log`.

    const obj = {
      log: ['example','test'],
      get latest() {
        if (this.log.length === 0) return undefined;
        return this.log[this.log.length - 1];
      }
    }
    console.log(obj.latest); // "test"

Note that attempting to assign a value to `latest` will not change it.

### Deleting a getter using the `delete` operator

If you want to remove the getter, you can just [`delete`](../operators/delete) it:

    delete obj.latest;

### Defining a getter on existing objects using `defineProperty`

To append a getter to an existing object later at any time, use [`Object.defineProperty()`](../global_objects/object/defineproperty).

    const o = {a: 0};

    Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });

    console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)

### Using a computed property name

    const expr = 'foo';

    const obj = {
      get [expr]() { return 'bar'; }
    };

    console.log(obj.foo); // "bar"

### Smart / self-overwriting / lazy getters

Getters give you a way to _define_ a property of an object, but they do not _calculate_ the property's value until it is accessed. A getter defers the cost of calculating the value until the value is needed. If it is never needed, you never pay the cost.

An additional optimization technique to lazify or delay the calculation of a property value and cache it for later access are **smart (or "[memoized](https://en.wikipedia.org/wiki/Memoization)") getters**. The value is calculated the first time the getter is called, and is then cached so subsequent accesses return the cached value without recalculating it. This is useful in the following situations:

-   If the calculation of a property value is expensive (takes much RAM or CPU time, spawns worker threads, retrieves remote file, etc).
-   If the value isn't needed just now. It will be used later, or in some case it's not used at all.
-   If it's used, it will be accessed several times, and there is no need to re-calculate that value will never be changed or shouldn't be re-calculated.

**Note:** This means that you shouldn't write a lazy getter for a property whose value you expect to change, because if the getter is lazy then it will not recalculate the value.

Note that getters are not "lazy” or "memoized” by nature; you must implement this technique if you desire this behavior.

In the following example, the object has a getter as its own property. On getting the property, the property is removed from the object and re-added, but implicitly as a data property this time. Finally, the value gets returned.

    get notifier() {
      delete this.notifier;
      return this.notifier = document.getElementById('bookmarked-notification-anchor');
    },

For Firefox code, see also the `XPCOMUtils.jsm` code module, which defines the `defineLazyGetter()` function.

### `get` vs. `defineProperty`

While using the `get` keyword and [`Object.defineProperty()`](../global_objects/object/defineproperty) have similar results, there is a subtle difference between the two when used on [`classes`](../classes).

When using `get` the property will be defined on the instance's prototype, while using [`Object.defineProperty()`](../global_objects/object/defineproperty) the property will be defined on the instance it is applied to.

    class Example {
      get hello() {
        return 'world';
      }
    }

    const obj = new Example();
    console.log(obj.hello);
    // "world"

    console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
    // undefined

    console.log(
      Object.getOwnPropertyDescriptor(
        Object.getPrototypeOf(obj), 'hello'
      )
    );
    // { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-method-definitions">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Method definitions' in that specification.</span></a></td></tr></tbody></table>

`get`

1

12

1.5

9

9.5

3

1

18

4

14

1

1.0

`computed_property_names`

46

12

34

No

47

9.1

46

46

34

33

9.3

5.0

## See also

-   [setter](set)
-   [`delete`](../operators/delete)
-   [`Object.defineProperty()`](../global_objects/object/defineproperty)
-   [`__defineGetter__`](../global_objects/object/__definegetter__)
-   [`__defineSetter__`](../global_objects/object/__definesetter__)
-   [Defining Getters and Setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#defining_getters_and_setters) in JavaScript Guide

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get</a>

# DataView.prototype.getBigInt64()

The `getBigInt64()` method gets a signed 64-bit integer (long long) at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    getBigInt64(byteOffset)
    getBigInt64(byteOffset, littleEndian)

### Parameters

byteOffset  
The offset, in bytes, from the start of the view to read the data from.

littleEndian  
<span class="badge inline optional">Optional</span> Indicates whether the 64-bit int is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is read.

### Return value

A [`BigInt`](../bigint).

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such that it would read beyond the end of the view.

## Description

There is no alignment constraint; multi-byte values may be fetched from any offset.

## Examples

### Using the `getBigInt64` method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.getBigInt64(0); // 0n

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.getbigint64">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.getbigint64</span></a></td></tr></tbody></table>

`getBigInt64`

67

79

68

No

54

No

67

67

68

48

No

9.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)
-   [`BigInt`](../bigint)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64</a>

# DataView.prototype.getBigUint64()

The `getBigUint64()` method gets an unsigned 64-bit integer (unsigned long long) at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    getBigUint64(byteOffset)
    getBigUint64(byteOffset, littleEndian)

### Parameters

byteOffset  
The offset, in bytes, from the start of the view to read the data from.

littleEndian  
<span class="badge inline optional">Optional</span> Indicates whether the 64-bit int is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is read.

### Return value

A [`BigInt`](../bigint).

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such that it would read beyond the end of the view.

## Description

There is no alignment constraint; multi-byte values may be fetched from any offset.

## Examples

### Using the `getBigUint64` method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.getBigUint64(0); // 0n

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.getbiguint64">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.getbiguint64</span></a></td></tr></tbody></table>

`getBigUint64`

67

79

68

No

54

No

67

67

68

48

No

9.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)
-   [`BigInt`](../bigint)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64</a>

# Intl.getCanonicalLocales()

The `Intl.getCanonicalLocales()` method returns an array containing the canonical locale names. Duplicates will be omitted and elements will be validated as structurally valid language tags.

## Syntax

    Intl.getCanonicalLocales(locales)

### Parameters

`locales`  
A list of [`String`](../string) values for which to get the canonical locale names.

### Return value

An array containing the canonical locale names.

## Examples

### Using getCanonicalLocales

    Intl.getCanonicalLocales('EN-US'); // ["en-US"]
    Intl.getCanonicalLocales(['EN-US', 'Fr']); // ["en-US", "fr"]

    Intl.getCanonicalLocales('EN_US');
    // RangeError:'EN_US' is not a structurally valid language tag

## Polyfill

[formatjs Intl.getCanonicalLocales polyfill](https://formatjs.io/docs/polyfills/intl-getcanonicallocales)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-intl.getcanonicallocales">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-intl.getcanonicallocales</span></a></td></tr></tbody></table>

`getCanonicalLocales`

54

16

48

No

No

11

No

No

56

No

11

No

## See also

-   [`Intl.NumberFormat.supportedLocalesOf()`](numberformat/supportedlocalesof)
-   [`Intl.DateTimeFormat.supportedLocalesOf()`](datetimeformat/supportedlocalesof)
-   [`Intl.Collator.supportedLocalesOf()`](collator/supportedlocalesof)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales</a>

# Date.prototype.getDate()

The `getDate()` method returns the day of the month for the specified date according to local time.

## Syntax

    getDate()

### Return value

An integer number, between 1 and 31, representing the day of the month for the given date according to local time.

## Examples

### Using getDate()

The second statement below assigns the value 25 to the variable `day`, based on the value of the [`Date`](../date) object `Xmas95`.

    var Xmas95 = new Date('December 25, 1995 23:15:30');
    var day = Xmas95.getDate();

    console.log(day); // 25

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getdate">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getdate</span></a></td></tr></tbody></table>

`getDate`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCDate()`](getutcdate)
-   [`Date.prototype.getUTCDay()`](getutcday)
-   [`Date.prototype.setDate()`](setdate)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate</a>

# Date.prototype.getDay()

The `getDay()` method returns the day of the week for the specified date according to local time, where 0 represents Sunday. For the day of the month, see [`Date.prototype.getDate()`](getdate).

## Syntax

    getDay()

### Return value

An integer number, between 0 and 6, corresponding to the day of the week for the given date, according to local time: 0 for Sunday, 1 for Monday, 2 for Tuesday, and so on.

## Examples

### Using getDay()

The second statement below assigns the value 1 to `weekday`, based on the value of the [`Date`](../date) object `Xmas95`. December 25, 1995, is a Monday.

    var Xmas95 = new Date('December 25, 1995 23:15:30');
    var weekday = Xmas95.getDay();

    console.log(weekday); // 1

**Note:** If needed, the full name of a day ("`Monday`" for example) can be obtained by using [`Intl.DateTimeFormat`](../intl/datetimeformat) with an `options` parameter. Using this method, the internationalization is made easier:

    var options = { weekday: 'long'};
    console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
    // Monday
    console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
    // Montag

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getday">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Date.prototype.getDay' in that specification.</span></a></td></tr></tbody></table>

`getDay`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCDate()`](getutcdate)
-   [`Date.prototype.getUTCDay()`](getutcday)
-   [`Date.prototype.setDate()`](setdate)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay</a>

# DataView.prototype.getFloat32()

The `getFloat32()` method gets a signed 32-bit float (float) at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    getFloat32(byteOffset)
    getFloat32(byteOffset, littleEndian)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to read the data.

`littleEndian`  
<span class="badge inline optional">Optional</span> Indicates whether the 32-bit float is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is read.

### Return value

A signed 32-bit float number.

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would read beyond the end of the view.

## Description

There is no alignment constraint; multi-byte values may be fetched from any offset.

## Examples

### Using the getFloat32 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.getFloat32(1); // 0

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.getfloat32">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.getfloat32</span></a></td></tr></tbody></table>

`getFloat32`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getFloat32" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getFloat32</a>

# DataView.prototype.getFloat64()

The `getFloat64()` method gets a signed 64-bit float (double) at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    getFloat64(byteOffset)
    getFloat64(byteOffset, littleEndian)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to read the data.

`littleEndian`  
<span class="badge inline optional">Optional</span> Indicates whether the 64-bit float is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is read.

### Return value

A signed 64-bit float number.

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would read beyond the end of the view.

## Description

There is no alignment constraint; multi-byte values may be fetched from any offset.

## Examples

### Using the getFloat64 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.getFloat64(0); // 0

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.getfloat64">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.getfloat64</span></a></td></tr></tbody></table>

`getFloat64`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getFloat64" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getFloat64</a>

# Date.prototype.getFullYear()

The `getFullYear()` method returns the year of the specified date according to local time.

Use this method instead of the [`getYear()`](getyear) method.

## Syntax

    getFullYear()

### Return value

A number corresponding to the year of the given date, according to local time.

## Description

The value returned by `getFullYear()` is an absolute number. For dates between the years 1000 and 9999, `getFullYear()` returns a four-digit number, for example, 1995. Use this function to make sure a year is compliant with years after 2000.

## Examples

### Using getFullYear()

The following example assigns the four-digit value of the current year to the variable `year`.

    var today = new Date();
    var year = today.getFullYear();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getfullyear">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getfullyear</span></a></td></tr></tbody></table>

`getFullYear`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCFullYear()`](getutcfullyear)
-   [`Date.prototype.setFullYear()`](setfullyear)
-   [`Date.prototype.getYear()`](getyear)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear</a>

# Date.prototype.getHours()

The `getHours()` method returns the hour for the specified date, according to local time.

## Syntax

    getHours()

### Return value

An integer number, between 0 and 23, representing the hour for the given date according to local time.

## Examples

### Using getHours()

The second statement below assigns the value 23 to the variable `hours`, based on the value of the [`Date`](../date) object `Xmas95`.

    let Xmas95 = new Date('December 25, 1995 23:15:30');
    let hours = Xmas95.getHours();

    console.log(hours); // 23

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.gethours">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.gethours</span></a></td></tr></tbody></table>

`getHours`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCHours()`](getutchours)
-   [`Date.prototype.setHours()`](sethours)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getHours" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getHours</a>

# DataView.prototype.getInt16()

The `getInt16()` method gets a signed 16-bit integer (short) at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    getInt16(byteOffset)
    getInt16(byteOffset, littleEndian)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to read the data.

`littleEndian`  
<span class="badge inline optional">Optional</span> Indicates whether the 16-bit int is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is read.

### Return value

A signed 16-bit integer number.

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would read beyond the end of the view.

## Description

There is no alignment constraint; multi-byte values may be fetched from any offset.

## Examples

### Using the getInt16 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.getInt16(1); // 0

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.getint16">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.getint16</span></a></td></tr></tbody></table>

`getInt16`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getInt16" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getInt16</a>

# DataView.prototype.getInt32()

The `getInt32()` method gets a signed 32-bit integer (long) at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    getInt32(byteOffset)
    getInt32(byteOffset, littleEndian)

### Parameters

`byteOffset`  
The offset, in bytes, from the start of the view where to read the data.

`littleEndian`  
<span class="badge inline optional">Optional</span> Indicates whether the 32-bit int is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is read.

### Return value

A signed 32-bit integer number.

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would read beyond the end of the view.

## Description

There is no alignment constraint; multi-byte values may be fetched from any offset.

## Examples

### Using the getInt32 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.getInt32(1); // 0

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.getint32">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.getint32</span></a></td></tr></tbody></table>

`getInt32`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getInt32" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getInt32</a>

# DataView.prototype.getInt8()

The `getInt8()` method gets a signed 8-bit integer (byte) at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    getInt8(byteOffset)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to read the data.

### Return value

A signed 8-bit integer number.

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would read beyond the end of the view.

## Description

There is no alignment constraint; multi-byte values may be fetched from any offset.

## Examples

### Using the getInt8 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.getInt8(1); // 0

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.getint8">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.getint8</span></a></td></tr></tbody></table>

`getInt8`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getInt8" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getInt8</a>

# Date.prototype.getMilliseconds()

The `getMilliseconds()` method returns the milliseconds in the specified date according to local time.

## Syntax

    getMilliseconds()

### Return value

A number, between 0 and 999, representing the milliseconds for the given date according to local time.

## Examples

### Using getMilliseconds()

The following example assigns the milliseconds portion of the current time to the variable `milliseconds`:

    var today = new Date();
    var milliseconds = today.getMilliseconds();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getmilliseconds">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getmilliseconds</span></a></td></tr></tbody></table>

`getMilliseconds`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCMilliseconds()`](getutcmilliseconds)
-   [`Date.prototype.setMilliseconds()`](setmilliseconds)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds</a>

# Date.prototype.getMinutes()

The `getMinutes()` method returns the minutes in the specified date according to local time.

## Syntax

    getMinutes()

### Return value

An integer number, between 0 and 59, representing the minutes in the given date according to local time.

## Examples

### Using getMinutes()

The second statement below assigns the value 15 to the variable `minutes`, based on the value of the [`Date`](../date) object `Xmas95`.

    var Xmas95 = new Date('December 25, 1995 23:15:30');
    var minutes = Xmas95.getMinutes();

    console.log(minutes); // 15

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getminutes">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getminutes</span></a></td></tr></tbody></table>

`getMinutes`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCMinutes()`](getutcminutes)
-   [`Date.prototype.setMinutes()`](setminutes)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMinutes" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMinutes</a>

# Date.prototype.getMonth()

The `getMonth()` method returns the month in the specified date according to local time, as a zero-based value (where zero indicates the first month of the year).

## Syntax

    getMonth()

### Return value

An integer number, between 0 and 11, representing the month in the given date according to local time. 0 corresponds to January, 1 to February, and so on.

## Examples

### Using getMonth()

The second statement below assigns the value 11 to the variable `month`, based on the value of the [`Date`](../date) object `Xmas95`.

    var Xmas95 = new Date('December 25, 1995 23:15:30');
    var month = Xmas95.getMonth();

    console.log(month); // 11

**Note:** If needed, the full name of a month (`January` for example) can be obtained by using `Intl.DateTimeFormat()` with an `options` parameter. Using this method, internationalization is made easier:

    var options = { month: 'long'};
    console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
    // December
    console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
    // Dezember

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getmonth">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getmonth</span></a></td></tr></tbody></table>

`getMonth`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCMonth()`](getutcmonth)
-   [`Date.prototype.setMonth()`](setmonth)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth</a>

# Object.getOwnPropertyDescriptor()

The `Object.getOwnPropertyDescriptor()` method returns an object describing the configuration of a specific property on a given object (that is, one directly present on an object and not in the object's prototype chain). The object returned is mutable but mutating it has no effect on the original property's configuration.

## Syntax

    Object.getOwnPropertyDescriptor(obj, prop)

### Parameters

`obj`  
The object in which to look for the property.

`prop`  
The name or [`Symbol`](../symbol) of the property whose description is to be retrieved.

### Return value

A property descriptor of the given property if it exists on the object, [`undefined`](../undefined) otherwise.

## Description

This method permits examination of the precise description of a property. A property in JavaScript consists of either a string-valued name or a [`Symbol`](../symbol) and a property descriptor. Further information about property descriptor types and their attributes can be found in [`Object.defineProperty()`](defineproperty).

A property descriptor is a record with some of the following attributes:

`value`  
The value associated with the property (data descriptors only).

`writable`  
`true` if and only if the value associated with the property may be changed (data descriptors only).

`get`  
A function which serves as a getter for the property, or [`undefined`](../undefined) if there is no getter (accessor descriptors only).

`set`  
A function which serves as a setter for the property, or [`undefined`](../undefined) if there is no setter (accessor descriptors only).

`configurable`  
`true` if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.

`enumerable`  
`true` if and only if this property shows up during enumeration of the properties on the corresponding object.

## Examples

### Using Object.getOwnPropertyDescriptor

    var o, d;

    o = { get foo() { return 17; } };
    d = Object.getOwnPropertyDescriptor(o, 'foo');
    // d is {
    //   configurable: true,
    //   enumerable: true,
    //   get: /*the getter function*/,
    //   set: undefined
    // }

    o = { bar: 42 };
    d = Object.getOwnPropertyDescriptor(o, 'bar');
    // d is {
    //   configurable: true,
    //   enumerable: true,
    //   value: 42,
    //   writable: true
    // }

    o = { [Symbol.for('baz')]: 73 }
    d = Object.getOwnPropertyDescriptor(o, Symbol.for('baz'));
    // d is {
    //   configurable: true,
    //   enumerable: true,
    //   value: 73,
    //   writable: true
    // }

    o = {};
    Object.defineProperty(o, 'qux', {
      value: 8675309,
      writable: false,
      enumerable: false
    });
    d = Object.getOwnPropertyDescriptor(o, 'qux');
    // d is {
    //   value: 8675309,
    //   writable: false,
    //   enumerable: false,
    //   configurable: false
    // }

### Non-object coercion

In ES5, if the first argument to this method is not an object (a primitive), then it will cause a [`TypeError`](../typeerror). In ES2015, a non-object first argument will be coerced to an object at first.

    Object.getOwnPropertyDescriptor('foo', 0);
    // TypeError: "foo" is not an object  // ES5 code

    Object.getOwnPropertyDescriptor('foo', 0);
    // Object returned by ES2015 code: {
    //   configurable: false,
    //   enumerable: true,
    //   value: "f",
    //   writable: false
    // }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.getownpropertydescriptor">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.getownpropertydescriptor</span></a></td></tr></tbody></table>

`getOwnPropertyDescriptor`

5

12

4

9

8

In Internet Explorer 8, this was only supported on DOM objects and with some non-standard behaviors. This was later fixed in Internet Explorer 9.

12

5

1

18

4

12

5

1.0

## See also

-   [`Object.defineProperty()`](defineproperty)
-   [`Reflect.getOwnPropertyDescriptor()`](../reflect/getownpropertydescriptor)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor</a>

# Object.getOwnPropertyDescriptors()

The `Object.getOwnPropertyDescriptors()` method returns all own property descriptors of a given object.

## Syntax

    Object.getOwnPropertyDescriptors(obj)

### Parameters

`obj`  
The object for which to get all own property descriptors.

### Return value

An object containing all own property descriptors of an object. Might be an empty object, if there are no properties.

## Description

This method permits examination of the precise description of all own properties of an object. A property in JavaScript consists of either a string-valued name or a [`Symbol`](../symbol) and a property descriptor. Further information about property descriptor types and their attributes can be found in [`Object.defineProperty()`](defineproperty).

A property descriptor is a record with some of the following attributes:

`value`  
The value associated with the property (data descriptors only).

`writable`  
`true` if and only if the value associated with the property may be changed (data descriptors only).

`get`  
A function which serves as a getter for the property, or [`undefined`](../undefined) if there is no getter (accessor descriptors only).

`set`  
A function which serves as a setter for the property, or [`undefined`](../undefined) if there is no setter (accessor descriptors only).

`configurable`  
`true` if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.

`enumerable`  
`true` if and only if this property shows up during enumeration of the properties on the corresponding object.

## Examples

### Creating a shallow clone

Whereas the [`Object.assign()`](assign) method will only copy enumerable and own properties from a source object to a target object, you are able to use this method and [`Object.create()`](create) for a shallow copy between two unknown objects:

    Object.create(
      Object.getPrototypeOf(obj),
      Object.getOwnPropertyDescriptors(obj)
    );

### Creating a subclass

A typical way of creating a subclass is to define the subclass, set its prototype to an instance of the superclass, and then define properties on that instance. This can get awkward especially for getters and setters. Instead, you can use this code to set the prototype:

    function superclass() {}
    superclass.prototype = {
      // Define your methods and properties here
    };
    function subclass() {}
    subclass.prototype = Object.create(
      superclass.prototype,
      {
        // Define your methods and properties here
      }
    );

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.getownpropertydescriptors">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Object.getOwnPropertyDescriptors' in that specification.</span></a></td></tr></tbody></table>

`getOwnPropertyDescriptors`

54

15

50

No

41

10

54

54

50

41

10

6.0

## See also

-   [`Object.getOwnPropertyDescriptor()`](getownpropertydescriptor)
-   [`Object.defineProperty()`](defineproperty)
-   [Polyfill](https://github.com/tc39/proposal-object-getownpropertydescriptors)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors</a>

# Object.getOwnPropertyNames()

The `Object.getOwnPropertyNames()` method returns an array of all properties (including non-enumerable properties except for those which use Symbol) found directly in a given object.

## Syntax

    Object.getOwnPropertyNames(obj)

### Parameters

`obj`  
The object whose enumerable and non-enumerable properties are to be returned.

### Return value

An array of strings that corresponds to the properties found directly in the given object.

## Description

`Object.getOwnPropertyNames()` returns an array whose elements are strings corresponding to the enumerable and non-enumerable properties found directly in a given object `obj`. The ordering of the enumerable properties in the array is consistent with the ordering exposed by a [`for...in`](../../statements/for...in) loop (or by [`Object.keys()`](keys)) over the properties of the object. According to ES6, the integer keys of the object (both enumerable and non-enumerable) are added in ascending order to the array first, followed by the string keys in the order of insertion.

In ES5, if the argument to this method is not an object (a primitive), then it will cause a [`TypeError`](../typeerror). In ES2015, a non-object argument will be coerced to an object.

    Object.getOwnPropertyNames('foo');
    // TypeError: "foo" is not an object (ES5 code)

    Object.getOwnPropertyNames('foo');
    // ["0", "1", "2", "length"]  (ES2015 code)

## Examples

### Using Object.getOwnPropertyNames()

    var arr = ['a', 'b', 'c'];
    console.log(Object.getOwnPropertyNames(arr).sort()); // .sort() is an array method.
    // logs ["0", "1", "2", "length"]

    // Array-like object
    var obj = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.getOwnPropertyNames(obj).sort()); // .sort() is an array method.
    // logs ["0", "1", "2"]

    // Logging property names and values using Array.forEach
    Object.getOwnPropertyNames(obj).forEach(
      function (val, idx, array) {
        console.log(val + ' -> ' + obj[val]);
      }
    );
    // logs
    // 0 -> a
    // 1 -> b
    // 2 -> c

    // non-enumerable property
    var my_obj = Object.create({}, {
      getFoo: {
        value: function() { return this.foo; },
        enumerable: false
      }
    });
    my_obj.foo = 1;

    console.log(Object.getOwnPropertyNames(my_obj).sort());
    // logs ["foo", "getFoo"]

If you want only the enumerable properties, see [`Object.keys()`](keys) or use a [`for...in`](../../statements/for...in) loop (note that this will also return enumerable properties found along the prototype chain for the object unless the latter is filtered with [`hasOwnProperty()`](hasownproperty)).

Items on the prototype chain are not listed:

    function ParentClass() {}
    ParentClass.prototype.inheritedMethod = function() {};

    function ChildClass() {
      this.prop = 5;
      this.method = function() {};
    }
    ChildClass.prototype = new ParentClass;
    ChildClass.prototype.prototypeMethod = function() {};

    console.log(
      Object.getOwnPropertyNames(
        new ChildClass() // ["prop", "method"]
      )
    );

### Get non-enumerable properties only

This uses the [`Array.prototype.filter()`](../array/filter) function to remove the enumerable keys (obtained with [`Object.keys()`](keys)) from a list of all keys (obtained with `Object.getOwnPropertyNames()`) thus giving only the non-enumerable keys as output.

    var target = myObject;
    var enum_and_nonenum = Object.getOwnPropertyNames(target);
    var enum_only = Object.keys(target);
    var nonenum_only = enum_and_nonenum.filter(function(key) {
      var indexInEnum = enum_only.indexOf(key);
      if (indexInEnum == -1) {
        // Not found in enum_only keys,
        // meaning that the key is non-enumerable,
        // so return true so we keep this in the filter
        return true;
      } else {
        return false;
      }
    });

    console.log(nonenum_only);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.getownpropertynames">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.getownpropertynames</span></a></td></tr></tbody></table>

`getOwnPropertyNames`

5

12

4

9

12

5

1

18

4

12

5

1.0

## See also

-   [Enumerability and ownership of properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
-   [`Object.prototype.hasOwnProperty()`](hasownproperty)
-   [`Object.prototype.propertyIsEnumerable()`](propertyisenumerable)
-   [`Object.create()`](create)
-   [`Object.keys()`](keys)
-   [`Array.forEach()`](../array/foreach)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames</a>

# Object.getOwnPropertySymbols()

The `Object.getOwnPropertySymbols()` method returns an array of all symbol properties found directly upon a given object.

## Syntax

    Object.getOwnPropertySymbols(obj)

### Parameters

`obj`  
The object whose symbol properties are to be returned.

### Return value

An array of all symbol properties found directly upon the given object.

## Description

Similar to [`Object.getOwnPropertyNames()`](getownpropertynames), you can get all symbol properties of a given object as an array of symbols. Note that [`Object.getOwnPropertyNames()`](getownpropertynames) itself does not contain the symbol properties of an object and only the string properties.

As all objects have no own symbol properties initially, `Object.getOwnPropertySymbols()` returns an empty array unless you have set symbol properties on your object.

## Examples

### Using getOwnPropertySymbols

    var obj = {};
    var a = Symbol('a');
    var b = Symbol.for('b');

    obj[a] = 'localSymbol';
    obj[b] = 'globalSymbol';

    var objectSymbols = Object.getOwnPropertySymbols(obj);

    console.log(objectSymbols.length); // 2
    console.log(objectSymbols);        // [Symbol(a), Symbol(b)]
    console.log(objectSymbols[0]);     // Symbol(a)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.getownpropertysymbols">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.getownpropertysymbols</span></a></td></tr></tbody></table>

`getOwnPropertySymbols`

38

12

36

No

25

9

38

38

36

25

9

3.0

## See also

-   [`Object.getOwnPropertyNames()`](getownpropertynames)
-   [`Symbol`](../symbol)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols</a>

# handler.getPrototypeOf()

The `handler.getPrototypeOf()` method is a trap for the `[[GetPrototypeOf]]` internal method.

## Syntax

    const p = new Proxy(obj, {
      getPrototypeOf(target) {
      ...
      }
    });

### Parameters

The following parameter is passed to the `getPrototypeOf()` method. `this` is bound to the handler.

`target`  
The target object.

### Return value

The `getPrototypeOf()` method must return an object or `null`.

## Description

### Interceptions

This trap can intercept these operations:

-   [`Object.getPrototypeOf()`](../../object/getprototypeof)
-   [`Reflect.getPrototypeOf()`](../../reflect/getprototypeof)
-   [`__proto__`](../../object/proto)
-   [`Object.prototype.isPrototypeOf()`](../../object/isprototypeof)
-   [`instanceof`](../../../operators/instanceof)

### Invariants

If the following invariants are violated, the proxy will throw a [`TypeError`](../../typeerror):

-   `getPrototypeOf()` method must return an object or `null`.
-   If `target` is not extensible, `Object.getPrototypeOf(proxy)` method must return the same value as `Object.getPrototypeOf(target)`.

## Examples

### Basic usage

    const obj = {};
    const proto = {};
    const handler = {
        getPrototypeOf(target) {
            console.log(target === obj);   // true
            console.log(this === handler); // true
            return proto;
        }
    };

    const p = new Proxy(obj, handler);
    console.log(Object.getPrototypeOf(p) === proto);    // true

### Five ways to trigger the getPrototypeOf trap

    const obj = {};
    const p = new Proxy(obj, {
        getPrototypeOf(target) {
            return Array.prototype;
        }
    });
    console.log(
        Object.getPrototypeOf(p) === Array.prototype,  // true
        Reflect.getPrototypeOf(p) === Array.prototype, // true
        p.__proto__ === Array.prototype,               // true
        Array.prototype.isPrototypeOf(p),              // true
        p instanceof Array                             // true
    );

### Two kinds of exceptions

    const obj = {};
    const p = new Proxy(obj, {
        getPrototypeOf(target) {
            return 'foo';
        }
    });
    Object.getPrototypeOf(p); // TypeError: "foo" is not an object or null

    const obj = Object.preventExtensions({});
    const p = new Proxy(obj, {
        getPrototypeOf(target) {
            return {};
        }
    });
    Object.getPrototypeOf(p); // TypeError: expected same prototype value

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof</span></a></td></tr></tbody></table>

`getPrototypeOf`

49

79

49

No

36

10

49

49

49

36

10

5.0

## See also

-   [`Proxy`](../../proxy)
-   [`handler`](../proxy)
-   [`Object.getPrototypeOf()`](../../object/getprototypeof)
-   [`Reflect.getPrototypeOf()`](../../reflect/getprototypeof)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf</a>

# Date.prototype.getSeconds()

The `getSeconds()` method returns the seconds in the specified date according to local time.

## Syntax

    getSeconds()

### Return value

An integer number, between 0 and 59, representing the seconds in the given date according to local time.

## Examples

### Using getSeconds()

The second statement below assigns the value 30 to the variable `seconds`, based on the value of the [`Date`](../date) object `Xmas95`.

    var Xmas95 = new Date('December 25, 1995 23:15:30');
    var seconds = Xmas95.getSeconds();

    console.log(seconds); // 30

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getseconds">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getseconds</span></a></td></tr></tbody></table>

`getSeconds`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCSeconds()`](getutcseconds)
-   [`Date.prototype.setSeconds()`](setseconds)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getSeconds" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getSeconds</a>

# TypeError: setting getter-only property "x"

The JavaScript [strict mode](../strict_mode)-only exception "setting getter-only property" occurs when there is an attempt to set a new value to a property for which only a [getter](../functions/get) is specified.

## Message

    TypeError: Assignment to read-only properties is not allowed in strict mode (Edge)
    TypeError: setting getter-only property "x" (Firefox)
    TypeError: Cannot set property "prop" of #<Object> which has only a getter (Chrome)

## Error type

[`TypeError`](../global_objects/typeerror) in [strict mode](../strict_mode) only.

## What went wrong?

There is an attempt to set a new value to a property for which only a [getter](../functions/get) is specified. While this will be silently ignored in non-strict mode, it will throw a [`TypeError`](../global_objects/typeerror) in [strict mode](../strict_mode).

## Examples

### Property with no setter

The example below shows how to set a getter for a property. It doesn't specify a [setter](../functions/set), so a `TypeError` will be thrown upon trying to set the `temperature` property to `30`. For more details see also the [`Object.defineProperty()`](../global_objects/object/defineproperty) page.

    "use strict";

    function Archiver() {
      var temperature = null;
      Object.defineProperty(this, 'temperature', {
        get: function() {
          console.log('get!');
          return temperature;
        }
      });
    }

    var arc = new Archiver();
    arc.temperature; // 'get!'

    arc.temperature = 30;
    // TypeError: setting getter-only property "temperature"

To fix this error, you will either need to remove line 16, where there is an attempt to set the temperature property, or you will need to implement a [setter](../functions/set) for it, for example like this:

    "use strict";

    function Archiver() {
      var temperature = null;
      var archive = [];

      Object.defineProperty(this, 'temperature', {
        get: function() {
          console.log('get!');
          return temperature;
        },
        set: function(value) {
          temperature = value;
          archive.push({ val: temperature });
        }
      });

      this.getArchive = function() { return archive; };
    }

    var arc = new Archiver();
    arc.temperature; // 'get!'
    arc.temperature = 11;
    arc.temperature = 13;
    arc.getArchive(); // [{ val: 11 }, { val: 13 }]

## See also

-   [`Object.defineProperty()`](../global_objects/object/defineproperty)
-   [`Object.defineProperties()`](../global_objects/object/defineproperties)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only</a>

# Date.prototype.getTime()

The `getTime()` method returns the number of milliseconds\* since the [Unix Epoch](https://en.wikipedia.org/wiki/Unix_time).

\* JavaScript uses _milliseconds_ as the unit of measurement, whereas Unix Time is in _seconds_.

_getTime() always uses UTC for time representation. For example, a client browser in one timezone, getTime() will be the same as a client browser in any other timezone._

You can use this method to help assign a date and time to another [`Date`](../date) object. This method is functionally equivalent to the [`valueOf()`](valueof) method.

## Syntax

    getTime()

### Return value

A number representing the milliseconds elapsed between 1 January 1970 00:00:00 UTC and the given date.

## Reduced time precision

To offer protection against timing attacks and fingerprinting, the precision of `new Date().getTime()` might get rounded depending on browser settings. In Firefox, the `privacy.reduceTimerPrecision` preference is enabled by default and defaults to 20µs in Firefox 59; in 60 it will be 2ms.

    // reduced time precision (2ms) in Firefox 60
    new Date().getTime();
    // 1519211809934
    // 1519211810362
    // 1519211811670
    // ...

    // reduced time precision with `privacy.resistFingerprinting` enabled
    new Date().getTime();
    // 1519129853500
    // 1519129858900
    // 1519129864400
    // ...

In Firefox, you can also enable `privacy.resistFingerprinting`, the precision will be 100ms or the value of `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, whichever is larger.

## Examples

### Using `getTime()` for copying dates

Constructing a date object with the identical time value.

    // Since month is zero based, birthday will be January 10, 1995
    var birthday = new Date(1994, 12, 10);
    var copy = new Date();
    copy.setTime(birthday.getTime());

### Measuring execution time

Subtracting two subsequent `getTime()` calls on newly generated [`Date`](../date) objects, give the time span between these two calls. This can be used to calculate the executing time of some operations. See also [`Date.now()`](now) to prevent instantiating unnecessary [`Date`](../date) objects.

    var end, start;

    start = new Date();
    for (var i = 0; i < 1000; i++) {
      Math.sqrt(i);
    }
    end = new Date();

    console.log('Operation took ' + (end.getTime() - start.getTime()) + ' msec');

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.gettime">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.gettime</span></a></td></tr></tbody></table>

`getTime`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.setTime()`](settime)
-   [`Date.prototype.valueOf()`](valueof)
-   [`Date.now()`](now)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime</a>

# Date.prototype.getTimezoneOffset()

The `getTimezoneOffset()` method returns the difference, in minutes, between a date as evaluated in the UTC time zone, and the same date as evaluated in the local time zone.

## Syntax

    getTimezoneOffset()

### Return value

The difference, in minutes, between date, as evaluated in the UTC time zone, and as evaluated in the local time zone.

## Description

`date.getTimezoneOffset()` returns the difference, in minutes, between date as evaluated in the UTC time zone, and date as evaluated in the local time zone — that is, the time zone of the host system in which the browser is being used (if the code is run from the Web in a browser), or otherwise the host system of whatever JavaScript runtime (for example, a Node.js environment) the code is executed in.

### Negative values and positive values

The number of minutes returned by `getTimezoneOffset()` is positive if the local time zone is behind UTC, and negative if the local time zone is ahead of UTC. For example, for UTC+10, `-600` will be returned.

<table><thead><tr class="header"><th>Current time zone</th><th>UTC-8</th><th>UTC</th><th>UTC+3</th></tr></thead><tbody><tr class="odd"><td>Return Value</td><td>480</td><td>0</td><td>-180</td></tr></tbody></table>

### Varied results in Daylight Saving Time (DST) time zones

In a time zone that annually shifts in and out of Daylight Saving Time (DST), the number of minutes returned by calling `getTimezoneOffset()` can vary.

Consider a given local time zone and a date date1 that are both in DST, and consider minutes, the number of minutes returned by calling `date1.getTimezoneOffset()`; then:

-   If the local time zone is currently in DST, but a given date date2 is _not_ in DST, then the number of minutes returned by `date2.getTimezoneOffset()` is minutes ± 60.
-   If the local time zone is _not_ currently in DST, but a given date date3 is in DST, then the number of minutes returned by `date3.getTimezoneOffset()` is minutes ± 60.

In a time zone that doesn't annually shift in and out of Daylight Saving Time (DST), the number of minutes returned by calling `getTimezoneOffset()` always returns the same number of minutes, regardless of the date instance it's called from.

**Note:** The above description is a simplification. In implementations, the [IANA time zone database](https://en.wikipedia.org/wiki/Daylight_saving_time#IANA_time_zone_database) (tzdata) is used for precisely determining the effect of DST on the calculation of the time-zone difference.

## Examples

    // Create a Date instance for the current time
    let currentLocalDate = new Date();
    // Create a Date instance for 03:24 GMT-0200 on May 1st in 2016
    let laborDay2016at0324GMTminus2 = new Date('May 1, 2016 03:24:00 GMT-0200');
    currentLocalDate.getTimezoneOffset() === laborDay2016at0324GMTminus2.getTimezoneOffset();
    // true, always, in any timezone that doesn't annually shift in and out of DST
    // false, sometimes, in any timezone that annually shifts in and out of DST

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.gettimezoneoffset">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.gettimezoneoffset</span></a></td></tr></tbody></table>

`getTimezoneOffset`

1

12

1

5

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date`](../date)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset</a>

# DataView.prototype.getUint16()

The `getUint16()` method gets an unsigned 16-bit integer (unsigned short) at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    getUint16(byteOffset)
    getUint16(byteOffset, littleEndian)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to read the data.

`littleEndian`  
<span class="badge inline optional">Optional</span> Indicates whether the 16-bit int is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is read.

### Return value

An unsigned 16-bit integer number.

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would read beyond the end of the view.

## Description

There is no alignment constraint; multi-byte values may be fetched from any offset.

## Examples

### Using the getUint16 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.getUint16(1); // 0

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.getuint16">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.getuint16</span></a></td></tr></tbody></table>

`getUint16`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getUint16" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getUint16</a>

# DataView.prototype.getUint32()

The `getUint32()` method gets an unsigned 32-bit integer (unsigned long) at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    getUint32(byteOffset)
    getUint32(byteOffset, littleEndian)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to read the data.

`littleEndian`  
<span class="badge inline optional">Optional</span> Indicates whether the 32-bit int is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is read.

### Return value

An unsigned 32-bit integer number.

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would read beyond the end of the view.

## Description

There is no alignment constraint; multi-byte values may be fetched from any offset.

## Examples

### Using the getUint32 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.getUint32(1); // 0

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.getuint32">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.getuint32</span></a></td></tr></tbody></table>

`getUint32`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getUint32" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getUint32</a>

# DataView.prototype.getUint8()

The `getUint8()` method gets an unsigned 8-bit integer (unsigned byte) at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    getUint8(byteOffset)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to read the data.

### Return value

An unsigned 8-bit integer number.

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would read beyond the end of the view.

## Description

There is no alignment constraint; multi-byte values may be fetched from any offset.

## Examples

### Using the getUint8 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.getUint8(1); // 0

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.getuint8">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.getuint8</span></a></td></tr></tbody></table>

`getUint8`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getUint8" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/getUint8</a>

# Date.prototype.getUTCDate()

The `getUTCDate()` method returns the day of the month(from 1 to 31) in the specified date according to universal time.

## Syntax

    getUTCDate()

### Return value

An integer number ranging from 1 to 31 representing day of month for the given date, according to universal time.

## Examples

### Using getUTCDate()

The following example assigns the day of month of the current date to the variable `dayOfMonth`.

    var today = new Date();
    var dayOfMonth = today.getUTCDate();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getutcdate">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getutcdate</span></a></td></tr></tbody></table>

`getUTCDate`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCDate()`](getutcdate)
-   [`Date.prototype.getDay()`](getday)
-   [`Date.prototype.setUTCDate()`](setutcdate)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDate" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDate</a>

# Date.prototype.getUTCDay()

The `getUTCDay()` method returns the day of the week in the specified date according to universal time, where 0 represents Sunday.

## Syntax

    getUTCDay()

### Return value

An integer number corresponding to the day of the week for the given date, according to universal time: 0 for Sunday, 1 for Monday, 2 for Tuesday, and so on.

## Examples

### Using getUTCDay()

The following example assigns the weekday portion of the current date to the variable `weekday`.

    var today = new Date();
    var weekday = today.getUTCDay();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getutcday">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getutcday</span></a></td></tr></tbody></table>

`getUTCDay`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCDate()`](getutcdate)
-   [`Date.prototype.getDay()`](getday)
-   [`Date.prototype.setUTCDate()`](setutcdate)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDay" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDay</a>

# Date.prototype.getUTCFullYear()

The `getUTCFullYear()` method returns the year in the specified date according to universal time.

## Syntax

    getUTCFullYear()

### Return value

A number representing the year in the given date according to universal time.

## Description

The value returned by `getUTCFullYear()` is an absolute number that is compliant with year-2000, for example, 1995.

## Examples

### Using getUTCFullYear()

The following example assigns the four-digit value of the current year to the variable `year`.

    var today = new Date();
    var year = today.getUTCFullYear();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getutcfullyear">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getutcfullyear</span></a></td></tr></tbody></table>

`getUTCFullYear`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getFullYear()`](getfullyear)
-   [`Date.prototype.setFullYear()`](setfullyear)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear</a>

# Date.prototype.getUTCHours()

The `getUTCHours()` method returns the hours in the specified date according to universal time.

## Syntax

    getUTCHours()

### Return value

An integer number, between 0 and 23, representing the hours in the given date according to universal time.

## Examples

### Using getUTCHours()

The following example assigns the hours portion of the current time to the variable `hours`.

    var today = new Date();
    var hours = today.getUTCHours();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getutchours">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getutchours</span></a></td></tr></tbody></table>

`getUTCHours`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getHours()`](gethours)
-   [`Date.prototype.setUTCHours()`](setutchours)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCHours" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCHours</a>

# Date.prototype.getUTCMilliseconds()

The `getUTCMilliseconds()` method returns the milliseconds portion of the time object's value.

## Syntax

    getUTCMilliseconds()

### Return value

An integer number, between 0 and 999, representing the milliseconds portion of the given date object. This method is a companion to the other UTC based methods that give hour portion, minute portion, etc.; this method gives milliseconds portion.

Not to be confused with Unix epoch time. To get total milliseconds since 1970/01/01, use the method ".getTime()".

## Examples

### Using getUTCMilliseconds()

The following example assigns the milliseconds portion of the current time to the variable `milliseconds`.

    var today = new Date();
    var milliseconds = today.getUTCMilliseconds();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getutcmilliseconds">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getutcmilliseconds</span></a></td></tr></tbody></table>

`getUTCMilliseconds`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getMilliseconds()`](getmilliseconds)
-   [`Date.prototype.setUTCMilliseconds()`](setutcmilliseconds)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds</a>

# Date.prototype.getUTCMinutes()

The `getUTCMinutes()` method returns the minutes in the specified date according to universal time.

## Syntax

    getUTCMinutes()

### Return value

An integer number, between 0 and 59, representing the minutes in the given date according to universal time.

## Examples

### Using getUTCMinutes()

The following example assigns the minutes portion of the current time to the variable `minutes`.

    var today = new Date();
    var minutes = today.getUTCMinutes();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getutcminutes">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getutcminutes</span></a></td></tr></tbody></table>

`getUTCMinutes`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getMinutes()`](getminutes)
-   [`Date.prototype.setUTCMinutes()`](setutcminutes)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes</a>

# Date.prototype.getUTCMonth()

The `getUTCMonth()` returns the month of the specified date according to universal time, as a zero-based value (where zero indicates the first month of the year).

## Syntax

    getUTCMonth()

### Return value

An integer number, between 0 and 11, corresponding to the month of the given date according to universal time. 0 for January, 1 for February, 2 for March, and so on.

## Examples

### Using getUTCMonth()

The following example assigns the month portion of the current date to the variable `month`.

    var today = new Date();
    var month = today.getUTCMonth();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getutcmonth">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getutcmonth</span></a></td></tr></tbody></table>

`getUTCMonth`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getMonth()`](getmonth)
-   [`Date.prototype.setUTCMonth()`](setutcmonth)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth</a>

# Date.prototype.getUTCSeconds()

The `getUTCSeconds()` method returns the seconds in the specified date according to universal time.

## Syntax

    getUTCSeconds()

### Return value

An integer number, between 0 and 59, representing the seconds in the given date according to universal time.

## Examples

### Using getUTCSeconds()

The following example assigns the seconds portion of the current time to the variable `seconds`.

    var today = new Date();
    var seconds = today.getUTCSeconds();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getutcseconds">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getutcseconds</span></a></td></tr></tbody></table>

`getUTCSeconds`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getSeconds()`](getseconds)
-   [`Date.prototype.setUTCSeconds()`](setutcseconds)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds</a>

# Date.prototype.getYear()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `getYear()` method returns the year in the specified date according to local time. Because `getYear()` does not return full years ("year 2000 problem"), it is no longer used and has been replaced by the [`getFullYear()`](getfullyear) method.

## Syntax

    getYear()

### Return value

A number representing the year of the given date, according to local time, minus 1900.

## Description

-   For years greater than or equal to 2000, the value returned by `getYear()` is 100 or greater. For example, if the year is 2026, `getYear()` returns 126.
-   For years between and including 1900 and 1999, the value returned by `getYear()` is between 0 and 99. For example, if the year is 1976, `getYear()` returns 76.
-   For years less than 1900, the value returned by `getYear()` is less than 0. For example, if the year is 1800, `getYear()` returns -100.

To take into account years before and after 2000, you should use [`getFullYear()`](getfullyear) instead of `getYear()` so that the year is specified in full.

## Backward compatibility

### Behavior in JavaScript 1.2 and earlier

The `getYear()` method returns either a 2-digit or 4-digit year:

-   For years between and including 1900 and 1999, the value returned by `getYear()` is the year minus 1900. For example, if the year is 1976, the value returned is 76.
-   For years less than 1900 or greater than 1999, the value returned by `getYear()` is the four-digit year. For example, if the year is 1856, the value returned is 1856. If the year is 2026, the value returned is 2026.

## Examples

### Years between 1900 and 1999

The second statement assigns the value 95 to the variable `year`.

    var Xmas = new Date('December 25, 1995 23:15:00');
    var year = Xmas.getYear(); // returns 95

### Years above 1999

The second statement assigns the value 100 to the variable `year`.

    var Xmas = new Date('December 25, 2000 23:15:00');
    var year = Xmas.getYear(); // returns 100

### Years below 1900

The second statement assigns the value -100 to the variable `year`.

    var Xmas = new Date('December 25, 1800 23:15:00');
    var year = Xmas.getYear(); // returns -100

### Setting and getting a year between 1900 and 1999

The third statement assigns the value 95 to the variable `year`, representing the year 1995.

    var Xmas = new Date('December 25, 2015 23:15:00');
    Xmas.setYear(95);
    var year = Xmas.getYear(); // returns 95

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.getyear">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.getyear</span></a></td></tr></tbody></table>

`getYear`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getFullYear()`](getfullyear)
-   [`Date.prototype.getUTCFullYear()`](getutcfullyear)
-   [`Date.prototype.setYear()`](setyear)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getYear" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getYear</a>

# WebAssembly.Global() constructor

A `WebAssembly.Global()` constructor creates a new `Global` object representing a global variable instance, accessible from both JavaScript and importable/exportable across one or more [`WebAssembly.Module`](../module) instances. This allows dynamic linking of multiple modules.

## Syntax

    new WebAssembly.Global(descriptor, value)

### Parameters

_descriptor_  
A `GlobalDescriptor` dictionary object, which contains two properties:

-   `value`: A [`USVString`](https://developer.mozilla.org/en-US/docs/Web/API/USVString) representing the data type of the global. This can be one of `i32`, `i64`, `f32`, and `f64`. USVString corresponds to the set of all possible sequences of unicode scalar values. USVString maps to a String when returned in JavaScript; it's generally only used for APIs that perform text processing and need a string of unicode scalar values to operate on. USVString is equivalent to DOMString except for not allowing unpaired surrogate codepoints. Unpaired surrogate codepoints present in USVString are converted by the browser to Unicode 'replacement character' U+FFFD, (�).
-   `mutable`: A boolean value that determines whether the global is mutable or not. By default, this is `false`.

_value_  
The value the variable contains. This can be any value, as long as its type matches the variable's data type. If no value is specified, a typed 0 value is used, as specified by the [`DefaultValue` algorithm](https://webassembly.github.io/spec/js-api/#defaultvalue).

## Examples

### Creating a new Global instance

The following example shows a new global instance being created using the `WebAssembly.Global()` constructor. It is being defined as a mutable `i32` type, with a value of 0.

The value of the global is then changed, first to `42` using the `Global.value` property, and then to 43 using the `incGlobal()` function exported out of the `global.wasm` module (this adds 1 to whatever value is given to it and then returns the new value).

    const output = document.getElementById('output');

    function assertEq(msg, got, expected) {
      output.innerHTML += `Testing ${msg}: `;
      if (got !== expected)
        output.innerHTML += `FAIL!<br>Got: ${got}<br>Expected: ${expected}<br>`;
      else
        output.innerHTML += `SUCCESS! Got: ${got}<br>`;
    }

    assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function");

    const global = new WebAssembly.Global({value:'i32', mutable:true}, 0);

    WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } })
    .then(({instance}) => {
        assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0);
        global.value = 42;
        assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42);
        instance.exports.incGlobal();
        assertEq("getting wasm-updated value from JS", global.value, 43);
    });

**Note:** You can see the example [running live on GitHub](https://mdn.github.io/webassembly-examples/js-api-examples/global.html); see also the [source code](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html).

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#dom-global-global">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#dom-global-global</span></a></td></tr></tbody></table>

`Global`

69

79

62

No

No

13.1

69

69

62

No

13.4

10.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)
-   [Import/Export mutable globals proposal](https://github.com/WebAssembly/mutable-global/blob/master/proposals/mutable-global/Overview.md)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/Global" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/Global</a>

# globalThis

The global `globalThis` property contains the global `this` value, which is akin to the [global object](https://developer.mozilla.org/en-US/docs/Glossary/Global_object).

Property attributes of `globalThis`

Writable

yes

Enumerable

no

Configurable

yes

## Description

Historically, accessing the global object has required different syntax in different JavaScript environments. On the web you can use [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window), [`self`](https://developer.mozilla.org/en-US/docs/Web/API/Window/self), or [`frames`](https://developer.mozilla.org/en-US/docs/Web/API/Window/frames) - but in [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Worker) only `self` will work. In Node.js none of these work, and you must instead use `global`.  
The `this` keyword could be used inside functions running in non–strict mode, but `this` will be `undefined` in Modules and inside functions running in strict mode. You can also use `Function('return this')()`, but environments that disable [`eval()`](eval), like [CSP](https://developer.mozilla.org/en-US/docs/Glossary/CSP) in browsers, prevent use of [`Function`](function) in this way.

The `globalThis` property provides a standard way of accessing the global `this` value (and hence the global object itself) across environments. Unlike similar properties such as `window` and `self`, it's guaranteed to work in window and non-window contexts. In this way, you can access the global object in a consistent manner without having to know which environment the code is being run in. To help you remember the name, just remember that in global scope the `this` value is `globalThis`.

### HTML and the WindowProxy

In many engines `globalThis` will be a reference to the actual global object, but in web browsers, due to iframe and cross-window security considerations, it references a [`Proxy`](proxy) around the actual global object (which you can't directly access). This distinction is rarely relevant in common usage, but important to be aware of.

### Naming

Several other popular name choices such as `self` and `global` were removed from consideration because of their potential to break compatibility with existing code. See the [language proposal's "naming" document](https://github.com/tc39/proposal-global/blob/master/NAMING.md) for more details.

## Examples

### Search for the global across environments

Prior to `globalThis`, the only reliable cross-platform way to get the global object for an environment was `Function('return this')()`. However, this causes [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) violations in some settings, so [es6-shim](https://github.com/paulmillr/es6-shim) uses a check like this, for example:

    var getGlobal = function () {
      if (typeof self !== 'undefined') { return self; }
      if (typeof window !== 'undefined') { return window; }
      if (typeof global !== 'undefined') { return global; }
      throw new Error('unable to locate global object');
    };

    var globals = getGlobal();

    if (typeof globals.setTimeout !== 'function') {
      // no setTimeout in this environment!
    }

With `globalThis` available, the additional search for the global across environments is not necessary anymore:

    if (typeof globalThis.setTimeout !== 'function') {
      // no setTimeout in this environment!
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-globalthis">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-globalthis</span></a></td></tr></tbody></table>

`globalThis`

71

79

65

No

58

12.1

71

71

65

50

12.2

10.0

## See also

-   [`this`](../operators/this)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis</a>

# Greater than (&gt;)

The greater than operator (`>`) returns `true` if the left operand is greater than the right operand, and `false` otherwise.

## Syntax

    x > y

## Description

The operands are compared using the [Abstract Relational Comparison](https://tc39.es/ecma262/#sec-abstract-relational-comparison) algorithm. See the documentation for the [Less than](less_than) operator for a summary of this algorithm.

## Examples

### String to string comparison

    console.log("a" > "b");        // false
    console.log("a" > "a");        // false
    console.log("a" > "3");        // true

### String to number comparison

    console.log("5" > 3);          // true
    console.log("3" > 3);          // false
    console.log("3" > 5);          // false

    console.log("hello" > 5);      // false
    console.log(5 > "hello");      // false

    console.log("5" > 3n);         // true
    console.log("3" > 5n);         // false

### Number to Number comparison

    console.log(5 > 3);            // true
    console.log(3 > 3);            // false
    console.log(3 > 5);            // false

### Number to BigInt comparison

    console.log(5n > 3);           // true
    console.log(3 > 5n);           // false

### Comparing Boolean, null, undefined, NaN

    console.log(true > false);     // true
    console.log(false > true);     // false

    console.log(true > 0);         // true
    console.log(true > 1);         // false

    console.log(null > 0);         // false
    console.log(1 > null);         // true

    console.log(undefined > 3);    // false
    console.log(3 > undefined);    // false

    console.log(3 > NaN);          // false
    console.log(NaN > 3);          // false

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-relational-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-relational-operators</span></a></td></tr></tbody></table>

`Greater_than`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Greater than or equal operator](greater_than_or_equal)
-   [Less than operator](less_than)
-   [Less than or equal operator](less_than_or_equal)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than</a>

# Greater than or equal (&gt;=)

The greater than or equal operator (`>=`) returns `true` if the left operand is greater than or equal to the right operand, and `false` otherwise.

## Syntax

     x >= y

## Description

The operands are compared using the [Abstract Relational Comparison](https://tc39.es/ecma262/#sec-abstract-relational-comparison) algorithm. See the documentation for the [Less than](less_than) operator for a summary of this algorithm.

## Examples

### String to string comparison

    console.log("a" >= "b");     // false
    console.log("a" >= "a");     // true
    console.log("a" >= "3");     // true

### String to number comparison

    console.log("5" >= 3);       // true
    console.log("3" >= 3);       // true
    console.log("3" >= 5);       // false

    console.log("hello" >= 5);   // false
    console.log(5 >= "hello");   // false

### Number to Number comparison

    console.log(5 >= 3);         // true
    console.log(3 >= 3);         // true
    console.log(3 >= 5);         // false

### Number to BigInt comparison

    console.log(5n >= 3);        // true
    console.log(3 >= 3n);        // true
    console.log(3 >= 5n);        // false

### Comparing Boolean, null, undefined, NaN

    console.log(true >= false);  // true
    console.log(true >= true);   // true
    console.log(false >= true);  // false

    console.log(true >= 0);      // true
    console.log(true >= 1);      // true

    console.log(null >= 0);      // true
    console.log(1 >= null);      // true

    console.log(undefined >= 3); // false
    console.log(3 >= undefined); // false

    console.log(3 >= NaN);       // false
    console.log(NaN >= 3);       // false

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-relational-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-relational-operators</span></a></td></tr></tbody></table>

`Greater_than_or_equal`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Greater than operator](greater_than)
-   [Less than operator](less_than)
-   [Less than or equal operator](less_than_or_equal)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal</a>

# Grouping operator ( )

The grouping operator `( )` controls the precedence of evaluation in expressions.

## Syntax

     ( )

## Description

The grouping operator consists of a pair of parentheses around an expression or sub-expression to override the normal [operator precedence](operator_precedence) so that expressions with lower precedence can be evaluated before an expression with higher priority. As it sounds, it groups what's inside of the parentheses.

## Examples

### Using the grouping operator

Overriding multiplication and division first, then addition and subtraction to evaluate addition first.

    var a = 1;
    var b = 2;
    var c = 3;

    // default precedence
    a + b * c     // 7
    // evaluated by default like this
    a + (b * c)   // 7

    // now overriding precedence
    // addition before multiplication
    (a + b) * c   // 9

    // which is equivalent to
    a * c + b * c // 9

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-grouping-operator">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-grouping-operator</span></a></td></tr></tbody></table>

`Grouping`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Operator precedence](operator_precedence)
-   [`delete`](delete)
-   [`typeof`](typeof)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Grouping" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Grouping</a>

# WebAssembly.Memory.prototype.grow()

The `grow()` protoype method of the `Memory` object increases the size of the memory instance by a specified number of WebAssembly pages.

## Syntax

    grow(number)

### Parameters

_number_  
The number of WebAssembly pages you want to grow the memory by (each one is 64KiB in size).

### Return value

The previous size of the memory, in units of WebAssembly pages.

## Examples

### Using grow

The following example creates a new WebAssembly Memory instance with an initial size of 1 page (64KiB), and a maximum size of 10 pages (640KiB).

    var memory = new WebAssembly.Memory({initial:1, maximum:10});

We can then grow the instance by one page like so:

    const bytesPerPage = 64 * 1024;
    console.log(memory.buffer.byteLength / bytesPerPage);  // "1"
    console.log(memory.grow(1));                           // "1"
    console.log(memory.buffer.byteLength / bytesPerPage);  // "2"

Note the return value of `grow()` here is the previous number of WebAssembly pages.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#dom-memory-grow">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#dom-memory-grow</span></a></td></tr></tbody></table>

`grow`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow</a>

# handler.has()

The `handler.has()` method is a trap for the [`in`](../../../operators/in) operator.

## Syntax

    const p = new Proxy(target, {
      has: function(target, prop) {
      }
    });

### Parameters

The following parameters are passed to `has()` method. `this` is bound to the handler.

`target`  
The target object.

`prop`  
The name or [`Symbol`](../../symbol) of the property to check for existence.

### Return value

The `has()` method must return a boolean value.

## Description

The `handler.has()` method is a trap for the [`in`](../../../operators/in) operator.

### Interceptions

This trap can intercept these operations:

-   Property query: `foo in proxy`
-   Inherited property query: `foo in Object.create(proxy)`
-   `with` check: `with(proxy) { (foo); }`
-   [`Reflect.has()`](../../reflect/has)

### Invariants

If the following invariants are violated, the proxy will throw a [`TypeError`](../../typeerror):

-   A property cannot be reported as non-existent, if it exists as a non-configurable own property of the target object.
-   A property cannot be reported as non-existent, if it exists as an own property of the target object and the target object is not extensible.

## Examples

### Trapping the in operator

The following code traps the [`in`](../../../operators/in) operator.

    const p = new Proxy({}, {
      has: function(target, prop) {
        console.log('called: ' + prop);
        return true;
      }
    });

    console.log('a' in p); // "called: a"
                           // true

The following code violates an invariant.

    const obj = { a: 10 };
    Object.preventExtensions(obj);

    const p = new Proxy(obj, {
      has: function(target, prop) {
        return false;
      }
    });

    'a' in p; // TypeError is thrown

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p</span></a></td></tr></tbody></table>

`has`

49

12

18

No

36

10

49

49

18

36

10

5.0

## See also

-   [`Proxy`](../../proxy)
-   [`handler`](../proxy)
-   [`in`](../../../operators/in) operator
-   [`Reflect.has()`](../../reflect/has)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has</a>

# SyntaxError: Unexpected '\#' used outside of class body

The JavaScript exception "Unexpected '\#' used outside of class body" occurs when a hash ("\#") is encountered in an unexpected context, most notably [outside of a class declaration](../classes/private_class_fields). Hashes are valid at the beginning of a file as a [hashbang comment](../lexical_grammar), or inside of a class as part of a private field. You may encounter this error if you forget the quotation marks when trying to access a DOM identifier as well.

## Message

    SyntaxError: Unexpected '#' used outside of class body.

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

We encountered a \`\#\` somewhere unexpected. This may be due to code moving around and no longer being part of a class, a hashbang comment found on a line other than the first line of a file, or accidentally forgetting the quotation marks around a DOM identifier.

## Examples

### Missing quotation marks

For each case, there might be something slightly wrong. For example

    document.querySelector(#some-element)

This can be fixed via

    document.querySelector("#some-element")

### Outside of a class

    class ClassWithPrivateField {
      #privateField

      constructor() {
      }
    }

    this.#privateField = 42

This can be fixed by moving the private field back into the class

    class ClassWithPrivateField {
      #privateField

      constructor() {
        this.#privateField = 42
      }
    }

## See also

-   [`SyntaxError`](../global_objects/syntaxerror)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Hash_outside_class" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Hash_outside_class</a>

# RegExp.prototype.hasIndices

The `hasIndices` property indicates whether or not the "`d`" flag is used with the regular expression. `hasIndices` is a read-only property of an individual regular expression instance.

Property attributes of `RegExp.prototype.hasIndices`

Writable

no

Enumerable

no

Configurable

yes

## Description

The value of `hasIndices` is a [`Boolean`](../boolean) and `true` if the "`d`" flag was used; otherwise, `false`. The "`d`" flag indicates that the result of a regular expression match should contain the start and end indices of the substrings of each capture group.

You cannot change this property directly.

## Examples

### Using `hasIndices`

    const str1 = 'foo bar foo';

    const regex1 = new RegExp('foo', 'gd');

    console.log(regex1.hasIndices); // Output: true

    console.log(regex1.exec(str1).indices[0]); // Output: Array [0, 3]
    console.log(regex1.exec(str1).indices[0]); // Output: Array [8, 11]

    const str2 = 'foo bar foo';

    const regex2 = new RegExp('foo');

    console.log(regex2.hasIndices); // Output: false

    console.log(regex2.exec(str2).indices); // Output: undefined

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-get-regexp.prototype.hasIndices">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-get-regexp.prototype.hasIndices</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`hasIndices`

90

90

88

No

No

No

90

90

88

No

No

No

## See also

-   [`RegExp.lastIndex`](lastindex)
-   [`RegExp.prototype.exec()`](exec)
-   [`RegExp.prototype.dotAll`](dotall)
-   [`RegExp.prototype.global`](global)
-   [`RegExp.prototype.ignoreCase`](ignorecase)
-   [`RegExp.prototype.multiline`](multiline)
-   [`RegExp.prototype.source`](source)
-   [`RegExp.prototype.sticky`](sticky)
-   [`RegExp.prototype.unicode`](unicode)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/hasIndices" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/hasIndices</a>

# Symbol.hasInstance

The `Symbol.hasInstance` well-known symbol is used to determine if a constructor object recognizes an object as its instance. The [`instanceof`](../../operators/instanceof) operator's behavior can be customized by this symbol.

Property attributes of `Symbol.hasInstance`

Writable

no

Enumerable

no

Configurable

no

## Examples

### Custom instanceof behavior

You could implement your custom `instanceof` behavior like this, for example:

    class MyArray {
      static [Symbol.hasInstance](instance) {
        return Array.isArray(instance)
      }
    }
    console.log([] instanceof MyArray); // true

    function MyArray() { }
    Object.defineProperty(MyArray, Symbol.hasInstance, {
      value: function(instance) { return Array.isArray(instance); }
    });
    console.log([] instanceof MyArray); // true

### Checking the instance of an object

Just in the same manner at which you can check if an object is an instance of a class using the `instanceof` keyword, we can also use `Symbol.hasInstance` for such checks also.

    class Animal {
      constructor() {}
    }

    const cat = new Animal();

    console.log(Animal[Symbol.hasInstance](cat)); // true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-symbol.hasinstance">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-symbol.hasinstance</span></a></td></tr></tbody></table>

`hasInstance`

50

15

50

No

37

10

50

50

50

37

10

5.0

## See also

-   [`instanceof`](../../operators/instanceof)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance</a>

# Object.prototype.hasOwnProperty()

The `hasOwnProperty()` method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it).

## Syntax

    hasOwnProperty(prop)

### Parameters

prop  
The [`String`](../string) name or [Symbol](https://developer.mozilla.org/en-US/docs/Glossary/Symbol) of the property to test.

### Return value

A [`Boolean`](../boolean) indicating whether or not the object has the specified property as own property.

## Description

All descendants of [`Object`](../object) inherit the `hasOwnProperty` method. This method can be used to determine whether an object has the specified property as a direct property of that object; unlike the [`in`](../../operators/in) operator, this method does not check for a property in the object's prototype chain. If an [`Object`](../object) is an [`Array`](../array), `hasOwnProperty` method can check whether an index exists.

## Note

`hasOwnProperty` returns true even if the value of the property is `null` or `undefined`.

    o = new Object();
    o.propOne = null;
    o.hasOwnProperty('propOne');   // returns true
    o.propTwo = undefined;
    o.hasOwnProperty('propTwo');   // returns true

## Examples

### Using hasOwnProperty to test for a property's existence

The following example determines whether the `o` object contains a property named `prop`:

    o = new Object();
    o.hasOwnProperty('prop');   // returns false
    o.prop = 'exists';
    o.hasOwnProperty('prop');   // returns true

### Direct vs. inherited properties

The following example differentiates between direct properties and properties inherited through the prototype chain:

    o = new Object();
    o.prop = 'exists';
    o.hasOwnProperty('prop');             // returns true
    o.hasOwnProperty('toString');         // returns false
    o.hasOwnProperty('hasOwnProperty');   // returns false

### Iterating over the properties of an object

The following example shows how to iterate over the properties of an object without executing on inherited properties. Note that the [`for...in`](../../statements/for...in) loop is already only iterating enumerable items, so one should not assume based on the lack of non-enumerable properties shown in the loop that `hasOwnProperty` itself is confined strictly to enumerable items (as with [`Object.getOwnPropertyNames()`](getownpropertynames)).

    var buz = {
      fog: 'stack'
    };

    for (var name in buz) {
      if (buz.hasOwnProperty(name)) {
        console.log('this is fog (' +
          name + ') for sure. Value: ' + buz[name]);
      }
      else {
        console.log(name); // toString or something else
      }
    }

### Using hasOwnProperty as a property name

JavaScript does not protect the property name `hasOwnProperty`; thus, if the possibility exists that an object might have a property with this name, it is necessary to use an _external_ `hasOwnProperty` to get correct results:

    var foo = {
      hasOwnProperty: function() {
        return false;
      },
      bar: 'Here be dragons'
    };

    foo.hasOwnProperty('bar'); // always returns false

    // Use another Object's hasOwnProperty
    // and call it with 'this' set to foo
    ({}).hasOwnProperty.call(foo, 'bar'); // true

    // It's also possible to use the hasOwnProperty property
    // from the Object prototype for this purpose
    Object.prototype.hasOwnProperty.call(foo, 'bar'); // true

Note that in the last case there are no newly created objects.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.prototype.hasownproperty">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.prototype.hasownproperty</span></a></td></tr></tbody></table>

`hasOwnProperty`

1

12

1

5.5

5

3

1

18

4

10.1

1

1.0

## See also

-   [Enumerability and ownership of properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
-   [`Object.getOwnPropertyNames()`](getownpropertynames)
-   [`for...in`](../../statements/for...in)
-   [`in`](../../operators/in)
-   [JavaScript Guide: Inheritance revisited](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty</a>

# Intl.Locale.prototype.hourCycle

The `Intl.Locale.prototype.hourCycle` property is an accessor property that returns the time keeping format convention used by the locale.

## Description

There are 2 main types of time keeping conventions (clocks) used around the world: the 12 hour clock and the 24 hour clock. The `hourCycle` property makes it easier for JavaScript programmers to access the clock type used by a particular locale. Like other additional locale data, hour cycle type is an [extension subtag](https://www.unicode.org/reports/tr35/#u_Extension), which extends the data contained in a locale string. The hour cycle type can have several different values, which are listed in the table below.

### Valid hour cycle types

<table><thead><tr class="header"><th>Hour cycle type</th><th>Description</th></tr></thead><tbody><tr class="odd"><td><code>h12</code></td><td>Hour system using 1–12; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am.</td></tr><tr class="even"><td><code>h23</code></td><td>Hour system using 0–23; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00.</td></tr><tr class="odd"><td><code>h11</code></td><td>Hour system using 0–11; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am.</td></tr><tr class="even"><td><code>h24</code></td><td>Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00.</td></tr></tbody></table>

## Examples

These examples will show you how to add hour cycle data to your [`Locale`](../locale) object.

### Adding an hour cycle via the locale string

In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), the hour cycle is a locale string "extension subtag". These subtags add additional data about the locale, and are added to locale identifiers by using the `-u` extension key. Thus, the hour cycle type can be added to the initial locale identifier string that is passed into the [`Locale`](locale) constructor. To add the hour cycle type, first add the `-u` extension key to the string. Next, add the `-hc` extension key to indicate that you are adding an hour cycle. Finally, add the hour cycle type to the string.

    let fr24hour = new Intl.Locale("fr-FR-u-hc-h23");
    console.log(fr24hour.hourCycle); // Prints "h23"

### Adding an hour cycle via the configuration object argument

The [`Intl.Locale`](locale) constructor has an optional configuration object argument, which can contain any of several extension types, including hour cycle types. Set the `hourCycle` property of the configuration object to your desired hour cycle type, and then pass it into the constructor.

    let us12hour = new Intl.Locale("en-US", {hourCycle: "h12"});
    console.log(us12hour.hourCycle); // Prints "h12"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.Locale.prototype.hourCycle">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.Locale.prototype.hourCycle</span></a></td></tr></tbody></table>

`hourCycle`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl.Locale`](../locale)
-   [Unicode Hour Cycle extension key spec](https://www.unicode.org/reports/tr35/#UnicodeHourCycleIdentifier)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle</a>

# Math.hypot()

The `Math.hypot()` function returns the square root of the sum of squares of its arguments, that is:

$$\\mathtt{\\operatorname{Math.hypot}(v\_{1},v\_{2},\\ldots,v\_{n})} = \\sqrt{\\sum\\limits\_{i = 1}^{n}v\_{i}^{2}} = \\sqrt{v\_{1}^{2} + v\_{2}^{2} + \\ldots + v\_{n}^{2}}$$

## Syntax

    Math.hypot()
    Math.hypot(value0)
    Math.hypot(value0, value1)
    Math.hypot(value0, value1, ... , valueN)

### Parameters

`value1, value2, ...`  
Numbers.

### Return value

The square root of the sum of squares of the given arguments. If at least one of the arguments cannot be converted to a number, [`NaN`](../nan) is returned.

## Description

Calculating the hypotenuse of a right triangle, or the magnitude of a complex number, uses the formula `Math.sqrt(v1*v1 + v2*v2)`, where v1 and v2 are the lengths of the triangle's legs, or the complex number's real and complex components. The corresponding distance in 2 or more dimensions can be calculated by adding more squares under the square root: `Math.sqrt(v1*v1 + v2*v2 + v3*v3 + v4*v4)`.

This function makes this calculation easier and faster; you call `Math.hypot(v1, v2)` , or `Math.hypot(v1, v2, v3, v4, ...)`.

`Math.hypot` also avoids overflow/underflow problems if the magnitude of your numbers is very large. The largest number you can represent in JS is `Number.MAX_VALUE`, which is around 10<sup>308</sup>. If your numbers are larger than about 10<sup>154</sup>, taking the square of them will result in Infinity. For example, `Math.sqrt(1e200*1e200 + 1e200*1e200) = Infinity`. If you use `hypot()` instead, you get better answer: `Math.hypot(1e200, 1e200) = 1.4142...e+200` . This is also true with very small numbers. `Math.sqrt(1e-200*1e-200 + 1e-200*1e-200) = 0`, but `Math.hypot(1e-200, 1e-200) = 1.4142...e-200`.

Because `hypot()` is a static method of `Math`, you always use it as `Math.hypot()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

If no arguments are given, the result is +0. If any of the arguments is ±Infinity, the result is Infinity. If any of the arguments is NaN (unless another argument is ±Infinity), the result is NaN. If at least one of the arguments cannot be converted to a number, the result is [`NaN`](../nan).

With one argument, `Math.hypot()` is equivalent to `Math.abs()`.

## Examples

### Using Math.hypot()

    Math.hypot(3, 4);          // 5
    Math.hypot(3, 4, 5);       // 7.0710678118654755
    Math.hypot();              // 0
    Math.hypot(NaN);           // NaN
    Math.hypot(NaN, Infinity); // Infinity
    Math.hypot(3, 4, 'foo');   // NaN, since +'foo' => NaN
    Math.hypot(3, 4, '5');     // 7.0710678118654755, +'5' => 5
    Math.hypot(-3);            // 3, the same as Math.abs(-3)

## Polyfill

A naive approach that does not handle overflow/underflow issues:

    if (!Math.hypot) Math.hypot = function() {
      var y = 0, i = arguments.length, containsInfinity = false;
      while (i--) {
        var arg = arguments[i];
        if (arg === Infinity || arg === -Infinity)
          containsInfinity = true
        y += arg * arg
      }
      return containsInfinity ? Infinity : Math.sqrt(y)
    }

A polyfill that avoids underflows and overflows:

    if (!Math.hypot) Math.hypot = function () {
      var max = 0;
      var s = 0;
      var containsInfinity = false;
      for (var i = 0; i < arguments.length; ++i) {
        var arg = Math.abs(Number(arguments[i]));
        if (arg === Infinity)
          containsInfinity = true
        if (arg > max) {
          s *= (max / arg) * (max / arg);
          max = arg;
        }
        s += arg === 0 && max === 0 ? 0 : (arg / max) * (arg / max);
      }
      return containsInfinity ? Infinity : (max === 1 / 0 ? 1 / 0 : max * Math.sqrt(s));
    };

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.hypot">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.hypot</span></a></td></tr></tbody></table>

`hypot`

38

12

27

No

25

8

38

38

27

25

8

3.0

## See also

-   [`Math.abs()`](abs)
-   [`Math.pow()`](pow)
-   [`Math.sqrt()`](sqrt)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/hypot" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/hypot</a>

# SyntaxError: identifier starts immediately after numeric literal

The JavaScript exception "identifier starts immediately after numeric literal" occurs when an identifier started with a digit. Identifiers can only start with a letter, underscore (\_), or dollar sign ($).

## Message

    SyntaxError: Unexpected identifier after numeric literal (Edge)
    SyntaxError: identifier starts immediately after numeric literal (Firefox)
    SyntaxError: Unexpected number (Chrome)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

The names of variables, called [identifiers](https://developer.mozilla.org/en-US/docs/Glossary/Identifier), conform to certain rules, which your code must adhere to!

A JavaScript identifier must start with a letter, underscore (\_), or dollar sign ($). They can't start with a digit! Only subsequent characters can be digits (0-9).

## Examples

### Variable names starting with numeric literals

Variable names can't start with numbers in JavaScript. The following fails:

    var 1life = 'foo';
    // SyntaxError: identifier starts immediately after numeric literal

    var foo = 1life;
    // SyntaxError: identifier starts immediately after numeric literal

    alert(1.foo);
    // SyntaxError: identifier starts immediately after numeric literal

You will need to rename your variable to avoid the leading number.

    var life1 = 'foo';
    var foo = life1;

## See also

-   [Lexical grammar](../lexical_grammar)
-   [Variables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#variables) in the [JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Identifier_after_number" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Identifier_after_number</a>

# if...else

The `if` statement executes a statement if a specified condition is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). If the condition is [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), another statement can be executed.

## Syntax

    if (condition) {
       statement1
    } else {
       statement2
    }

`condition`  
An [expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions) that is considered to be either [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) or [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).

`statement1`  
Statement that is executed if condition is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). Can be any statement, including further nested `if` statements. To execute multiple statements, use a [block](block) statement (`{ ... }`) to group those statements. To execute no statements, use an [empty](empty) statement.

`statement2`  
Statement that is executed if `condition` is [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) and the `else` clause exists. Can be any statement, including block statements and further nested `if` statements.

## Description

Multiple `if...else` statements can be nested to create an `else if` clause. Note that there is no `elseif` (in one word) keyword in JavaScript.

    if (condition1)
      statement1
    else if (condition2)
      statement2
    else if (condition3)
      statement3
    ...
    else
      statementN

To see how this works, this is how it would look if the nesting were properly indented:

    if (condition1)
      statement1
    else
      if (condition2)
        statement2
      else
        if (condition3)
    ...

To execute multiple statements within a clause, use a block statement (`{ ... }`) to group those statements. In general, it is a good practice to always use block statements, especially in code involving nested `if` statements:

    if (condition) {
      statements1
    } else {
      statements2
    }

Do not confuse the primitive Boolean values `true` and `false` with truthiness or falsiness of the [`Boolean`](../global_objects/boolean) object. Any value that is not `false`, `undefined`, `null`, `0`, `-0`, `NaN`, or the empty string (`""`), and any object, including a Boolean object whose value is `false`, is considered [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) when used as the condition. For example:

    var b = new Boolean(false);
    if (b) // this condition is truthy

## Examples

### Using if...else

    if (cipher_char === from_char) {
      result = result + to_char;
      x++;
    } else {
      result = result + clear_char;
    }

### Using else if

Note that there is no `elseif` syntax in JavaScript. However, you can write it with a space between `else` and `if`:

    if (x > 50) {
      /* do something */
    } else if (x > 5) {
      /* do something */
    } else {
      /* do something */
    }

### Assignment within the conditional expression

It is advisable to not use simple assignments in a conditional expression, because the assignment can be confused with equality when glancing over the code. For example, do not use the following code:

    if (x = y) {
      /* do something */
    }

If you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment. For example:

    if ((x = y)) {
      /* do something */
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-if-statement">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-if-statement</span></a></td></tr></tbody></table>

`if...else`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`block`](block)
-   [`switch`](switch)
-   [Conditional operator](../operators/conditional_operator)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else</a>

# RegExp.prototype.ignoreCase

The `ignoreCase` property indicates whether or not the "`i`" flag is used with the regular expression. `ignoreCase` is a read-only property of an individual regular expression instance.

Property attributes of `RegExp.prototype.ignoreCase`

Writable

no

Enumerable

no

Configurable

yes

## Description

The value of `ignoreCase` is a [`Boolean`](../boolean) and `true` if the "`i`" flag was used; otherwise, `false`. The "`i`" flag indicates that case should be ignored while attempting a match in a string.

You cannot change this property directly.

## Examples

### Using ignoreCase

    var regex = new RegExp('foo', 'i');

    console.log(regex.ignoreCase); // true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-get-regexp.prototype.ignorecase">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-get-regexp.prototype.ignorecase</span></a></td></tr></tbody></table>

`ignoreCase`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`prototype_accessor`

48

12

38

5.5

35

1.3

48

48

38

35

1

5.0

## See also

-   [`RegExp.lastIndex`](lastindex)
-   [`RegExp.prototype.dotAll`](dotall)
-   [`RegExp.prototype.global`](global)
-   [`RegExp.prototype.hasIndices`](hasindices)
-   [`RegExp.prototype.multiline`](multiline)
-   [`RegExp.prototype.source`](source)
-   [`RegExp.prototype.sticky`](sticky)
-   [`RegExp.prototype.unicode`](unicode)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase</a>

# SyntaxError: illegal character

The JavaScript exception "illegal character" occurs when there is an invalid or unexpected token that doesn't belong at this position in the code.

## Message

    SyntaxError: Invalid character (Edge)
    SyntaxError: illegal character (Firefox)
    SyntaxError: Invalid or unexpected token (Chrome)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

There is an invalid or unexpected token that doesn't belong at this position in the code. Use an editor that supports syntax highlighting and carefully check your code against mismatches like a minus sign (`-`) versus a dash (`–`) or simple quotes (`"`) vs non-standard quotation marks (`"`).

## Examples

### Mismatched characters

Some characters look similar, but will cause the parser to fail interpreting your code. Famous examples of this are quotes, the minus or semicolon ([greek questionmark (U+37e)](https://en.wikipedia.org/wiki/Question_mark#Greek_question_mark) looks same).

    "This looks like a string”;  // SyntaxError: illegal character
                                 // " and ” are not " but look like this

    42 – 13;                     // SyntaxError: illegal character
                                 // – is not - but looks like this

    var foo = 'bar';             // SyntaxError: illegal character
                                 // <37e> is not ; but looks like this

This should work:

    "This is actually a string";
    42 - 13;
    var foo = 'bar';

<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">Some editors and IDEs will notify you or at least use a slightly different highlighting for it, but not all. When something like this happens to your code and you're not able to find the source of the problem, it's often best to just delete the problematic line and retype it.</span></span></span></span>

### Forgotten characters

It's easy to forget a character here or there.

    var colors = ['#000', #333', '#666'];
    // SyntaxError: illegal character

Add the missing quote for `'#333'`.

    var colors = ['#000', '#333', '#666'];

### Hidden characters

When copy pasting code from external sources, there might be invalid characters. Watch out!

    var foo = 'bar';
    // SyntaxError: illegal character

When inspecting this code in an editor like Vim, you can see that there is actually a [zero-width space (ZWSP) (U+200B)](https://en.wikipedia.org/wiki/Zero-width_space) character.

    var foo = 'bar';<200b>

## See also

-   [Lexical grammar](../lexical_grammar)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Illegal_character" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Illegal_character</a>

# import

The static `import` statement is used to import read only live bindings which are [exported](export) by another module.

Imported modules are in [`strict mode`](../strict_mode) whether you declare them as such or not. The `import` statement cannot be used in embedded scripts unless such script has a `type="module"`. Bindings imported are called live bindings because they are updated by the module that exported the binding.

There is also a function-like dynamic `import()`, which does not require scripts of `type="module"`.

Backward compatibility can be ensured using attribute `nomodule` on the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) tag.

## Syntax

    import defaultExport from "module-name";
    import * as name from "module-name";
    import { export1 } from "module-name";
    import { export1 as alias1 } from "module-name";
    import { export1 , export2 } from "module-name";
    import { foo , bar } from "module-name/path/to/specific/un-exported/file";
    import { export1 , export2 as alias2 , [...] } from "module-name";
    import defaultExport, { export1 [ , [...] ] } from "module-name";
    import defaultExport, * as name from "module-name";
    import "module-name";
    var promise = import("module-name");

`defaultExport`  
Name that will refer to the default export from the module.

`module-name`  
The module to import from. This is often a relative or absolute path name to the `.js` file containing the module. Certain bundlers may permit or require the use of the extension; check your environment. Only single quoted and double quoted Strings are allowed.

`name`  
Name of the module object that will be used as a kind of namespace when referring to the imports.

`exportN`  
Name of the exports to be imported.

`aliasN`  
Names that will refer to the named imports.

## Description

The `name` parameter is the name of the "module object" which will be used as a kind of namespace to refer to the exports. The `export` parameters specify individual named exports, while the `import * as name` syntax imports all of them. Below are examples to clarify the syntax.

### Import an entire module's contents

This inserts `myModule` into the current scope, containing all the exports from the module in the file located in `/modules/my-module.js`.

    import * as myModule from '/modules/my-module.js';

Here, accessing the exports means using the module name ("myModule" in this case) as a namespace. For example, if the module imported above includes an export `doAllTheAmazingThings()`, you would call it like this:

    myModule.doAllTheAmazingThings();

### Import a single export from a module

Given an object or value named `myExport` which has been exported from the module `my-module` either implicitly (because the entire module is exported, for example using `export * from 'another.js'`) or explicitly (using the [`export`](export) statement), this inserts `myExport` into the current scope.

    import {myExport} from '/modules/my-module.js';

### Import multiple exports from module

This inserts both `foo` and `bar` into the current scope.

    import {foo, bar} from '/modules/my-module.js';

### Import an export with a more convenient alias

You can rename an export when importing it. For example, this inserts `shortName` into the current scope.

    import {reallyReallyLongModuleExportName as shortName}
      from '/modules/my-module.js';

### Rename multiple exports during import

Import multiple exports from a module with convenient aliases.

    import {
      reallyReallyLongModuleExportName as shortName,
      anotherLongModuleName as short
    } from '/modules/my-module.js';

### Import a module for its side effects only

Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.

    import '/modules/my-module.js';

This works with [dynamic imports](#dynamic_imports) as well:

    (async () => {
      if (somethingIsTrue) {
        // import module for side effects
        await import('/modules/my-module.js');
      }
    })();

If your project uses packages that export ESM, you can also import them for side effects only. This will run the code in the package entry point file (and any files it imports) only.

### Importing defaults

It is possible to have a default [`export`](export) (whether it is an object, a function, a class, etc.). The `import` statement may then be used to import such defaults.

The simplest version directly imports the default:

    import myDefault from '/modules/my-module.js';

It is also possible to use the default syntax with the ones seen above (namespace imports or named imports). In such cases, the default import will have to be declared first. For instance:

    import myDefault, * as myModule from '/modules/my-module.js';
    // myModule used as a namespace

or

    import myDefault, {foo, bar} from '/modules/my-module.js';
    // specific, named imports

When importing a default export with [dynamic imports](#dynamic_imports), it works a bit differently. You need to destructure and rename the "default" key from the returned object.

    (async () => {
      if (somethingIsTrue) {
        const { default: myDefault, foo, bar } = await import('/modules/my-module.js');
      }
    })();

### Dynamic Imports

The standard import syntax is static and will always result in all code in the imported module being evaluated at load time. In situations where you wish to load a module conditionally or on demand, you can use a dynamic import instead. The following are some reasons why you might need to use dynamic import:

-   When importing statically significantly slows the loading of your code and there is a low likelihood that you will need the code you are importing, or you will not need it until a later time.
-   When importing statically significantly increases your program's memory usage and there is a low likelihood that you will need the code you are importing.
-   When the module you are importing does not exist at load time
-   When the import specifier string needs to be constructed dynamically. (Static import only supports static specifiers.)
-   When the module being imported has side effects, and you do not want those side effects unless some condition is true. (It is recommended not to have any side effects in a module, but you sometimes cannot control this in your module dependencies.)

Use dynamic import only when necessary. The static form is preferable for loading initial dependencies, and can benefit more readily from static analysis tools and [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking).

To dynamically import a module, the `import` keyword may be called as a function. When used this way, it returns a promise.

    import('/modules/my-module.js')
      .then((module) => {
        // Do something with the module.
      });

This form also supports the `await` keyword.

    let module = await import('/modules/my-module.js');

## Examples

### Standard Import

The code below shows how to import from a secondary module to assist in processing an AJAX JSON request.

#### The module: file.js

    function getJSON(url, callback) {
      let xhr = new XMLHttpRequest();
      xhr.onload = function () {
        callback(this.responseText)
      };
      xhr.open('GET', url, true);
      xhr.send();
    }

    export function getUsefulContents(url, callback) {
      getJSON(url, data => callback(JSON.parse(data)));
    }

#### The main program: main.js

    import { getUsefulContents } from '/modules/file.js';

    getUsefulContents('http://www.example.com',
        data => { doSomethingUseful(data); });

### Dynamic Import

This example shows how to load functionality on to a page based on a user action, in this case a button click, and then call a function within that module. This is not the only way to implement this functionality. The `import()` function also supports `await`.

    const main = document.querySelector("main");
    for (const link of document.querySelectorAll("nav > a")) {
      link.addEventListener("click", e => {
        e.preventDefault();

        import('/modules/my-module.js')
          .then(module => {
            module.loadPageInto(main);
          })
          .catch(err => {
            main.textContent = err.message;
          });
      });
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-imports">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-imports</span></a></td></tr></tbody></table>

`import`

61

16

15

60

54-60

No

48

10.1

61

61

60

54-60

45

10.3

8.0

`dynamic_import`

63

79

67

66-67

No

50

11.1

63

63

67

66-67

46

11.3

8.0

`worker_support`

80

67

80

79

No

No

No

No

80

80

67

No

No

No

No

## See also

-   [`export`](export)
-   [`import.meta`](import.meta)
-   Limin Zhu, Brian Terlson and Microsoft Edge Team: [Previewing ES6 Modules and more from ES2015, ES2016 and beyond](https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/)
-   Hacks blog post by Jason Orendorff: [ES6 in Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/)
-   Hacks blog post by Lin Clark: [ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)
-   Axel Rauschmayer's book: ["Exploring JS: Modules"](https://exploringjs.com/es6/ch_modules.html)
-   The Modern JavaScript Tutorial(javascript.info): [Export and Import](https://javascript.info/import-export)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import</a>

# import.meta

The `import.meta` object exposes context-specific metadata to a JavaScript module. It contains information about the module, like the module's URL.

## Syntax

    import.meta

## Description

The syntax consists of the keyword [`import`](import), a dot, and the identifier `meta`. Normally the left-hand side of the dot is the object on which property access is performed, but here `import` is not really an object.

The `import.meta` object is created by the ECMAScript implementation, with a [`null`](../global_objects/null) prototype. The object is extensible, and its properties are writable, configurable, and enumerable.

## Examples

### Using import.meta

Given a module `my-module.js`

    <script type="module" src="my-module.js"></script>

you can access meta information about the module using the `import.meta` object.

    console.log(import.meta); // { url: "file:///home/user/my-module.js" }

It returns an object with a `url` property indicating the base URL of the module. This will either be the URL from which the script was obtained, for external scripts, or the document base URL of the containing document, for inline scripts.

Note that this will include query parameters and/or hash (i.e., following the `?` or `#`).

For example, with the following HTML:

    <script type="module">
    import './index.mjs?someURLInfo=5';
    </script>

..the following JavaScript file will log the \``someURLInfo` parameter:

    // index.mjs
    new URL(import.meta.url).searchParams.get('someURLInfo'); // 5

The same applies when a file imports another:

    // index.mjs
    import './index2.mjs?someURLInfo=5';

    // index2.mjs
    new URL(import.meta.url).searchParams.get('someURLInfo'); // 5

Note that while Node.js will pass on query parameters (or the hash) as in the latter example, as of Node 14.1.0, a URL with query parameters will err when loading in the form `node --experimental-modules index.mjs?someURLInfo=5` (it is treated as a file rather than a URL in this context).

Such file-specific argument passing may be complementary to that used in the application-wide `location.href` (with query strings or hash added after the HTML file path) (or on Node.js, through `process.argv`).

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#prod-ImportMeta">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#prod-ImportMeta</span></a></td></tr><tr class="even"><td><a href="https://html.spec.whatwg.org/multipage/webappapis.html#hostgetimportmetaproperties">HTML Standard (HTML)
<br/>

<span class="small">#hostgetimportmetaproperties</span></a></td></tr></tbody></table>

`import.meta`

64

79

62

No

51

11.1

64

64

62

47

12

9.0

## See also

-   [`import`](import)
-   [`export`](export)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta</a>

# WebAssembly.Module.imports()

The `WebAssembly.imports()` function returns an array containing descriptions of all the declared imports of the given `Module`.

## Syntax

    WebAssembly.Module.imports(module)

### Parameters

_module_  
A [`WebAssembly.Module`](../module) object.

### Return value

An array containing objects representing the imported functions of the given module.

### Exceptions

If module is not a [`WebAssembly.Module`](../module) object instance, a [`TypeError`](../../typeerror) is thrown.

## Examples

### Using imports

The following example (see imports.html [source code](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/imports.html); [see it live also](https://mdn.github.io/webassembly-examples/js-api-examples/imports.html)) compiles the loaded simple.wasm module. This module is then queried for its imports.

    WebAssembly.compileStreaming(fetch('simple.wasm'))
    .then(function(mod) {
      var imports = WebAssembly.Module.imports(mod);
      console.log(imports[0]);
    });

The output looks like this:

    { module: "imports", name: "imported_func", kind: "function" }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#dom-module-imports">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#dom-module-imports</span></a></td></tr></tbody></table>

`imports`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports</a>

# Math.imul()

The `Math.imul()` function returns the result of the C-like 32-bit multiplication of the two parameters.

## Syntax

    Math.imul(a, b)

### Parameters

`a`  
First number.

`b`  
Second number.

### Return value

The result of the C-like 32-bit multiplication of the given arguments.

## Description

`Math.imul()` allows for 32-bit integer multiplication with C-like semantics. This feature is useful for projects like [Emscripten](https://en.wikipedia.org/wiki/Emscripten).

Because `imul()` is a static method of `Math`, you always use it as `Math.imul()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

If you use normal JavaScript floating point numbers in imul, you will experience a degrade in performance. This is because of the costly conversion from a floating point to an integer for multiplication, and then converting the multiplied integer back into a floating point. The reason imul exists is because it is faster in only one (so far) circumstance: AsmJS. AsmJS allows for JIST-optimizers to more easily implement internal integers in JavaScript. Multiplying two numbers stored internally as integers (which is only possible with AsmJS) with imul is the only potential circumstance where Math.imul may prove performant in current browsers.

## Examples

### Using Math.imul()

    Math.imul(2, 4);          // 8
    Math.imul(-1, 8);         // -8
    Math.imul(-2, -2);        // 4
    Math.imul(0xffffffff, 5); // -5
    Math.imul(0xfffffffe, 5); // -10

## Polyfill

This can be emulated with the following function:

    if (!Math.imul) Math.imul = function(a, b) {
      var aHi = (a >>> 16) & 0xffff;
      var aLo = a & 0xffff;
      var bHi = (b >>> 16) & 0xffff;
      var bLo = b & 0xffff;
      // the shift by 0 fixes the sign on the high part
      // the final |0 converts the unsigned value into a signed value
      return ((aLo * bLo) + (((aHi * bLo + aLo * bHi) << 16) >>> 0) | 0);
    };

However, the following function is more performant because it is likely that browsers in which this polyfill would be used do not optimize with an internal integer type in JavaScript, instead using floating points for all numbers.

    if (!Math.imul) Math.imul = function(opA, opB) {
      opB |= 0; // ensure that opB is an integer. opA will automatically be coerced.
      // floating points give us 53 bits of precision to work with plus 1 sign bit
      // automatically handled for our convienence:
      // 1. 0x003fffff /*opA & 0x000fffff*/ * 0x7fffffff /*opB*/ = 0x1fffff7fc00001
      //    0x1fffff7fc00001 < Number.MAX_SAFE_INTEGER /*0x1fffffffffffff*/
      var result = (opA & 0x003fffff) * opB;
      // 2. We can remove an integer coersion from the statement above because:
      //    0x1fffff7fc00001 + 0xffc00000 = 0x1fffffff800001
      //    0x1fffffff800001 < Number.MAX_SAFE_INTEGER /*0x1fffffffffffff*/
      if (opA & 0xffc00000 /*!== 0*/) result += (opA & 0xffc00000) * opB |0;
      return result |0;
    };

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.imul">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.imul</span></a></td></tr></tbody></table>

`imul`

28

12

20

No

16

7

≤37

28

20

15

7

1.5

## See also

-   [Emscripten](https://en.wikipedia.org/wiki/Emscripten)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/imul" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/imul</a>

# in operator

The `in` returns `true` if the specified property is in the specified object or its prototype chain.

## Syntax

    prop in object

### Parameters

`prop`  
A string or symbol representing a property name or array index (non-symbols will be coerced to strings).

`object`  
Object to check if it (or its prototype chain) <span class="short_text">contains</span> the property with specified name (`prop`).

## Examples

### Basic usage

The following examples show some uses of the `in` operator.

    // Arrays
    let trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']
    0 in trees        // returns true
    3 in trees        // returns true
    6 in trees        // returns false
    'bay' in trees    // returns false (you must specify the index number, not the value at that index)
    'length' in trees // returns true (length is an Array property)
    Symbol.iterator in trees // returns true (arrays are iterable, works only in ES2015+)

    // Predefined objects
    'PI' in Math          // returns true

    // Custom objects
    let mycar = {make: 'Honda', model: 'Accord', year: 1998}
    'make' in mycar  // returns true
    'model' in mycar // returns true

You must specify an object on the right side of the `in` operator. For example, you can specify a string created with the `String` constructor, but you cannot specify a string literal.

    let color1 = new String('green')
    'length' in color1 // returns true

    let color2 = 'coral'
    // generates an error (color2 is not a String object)
    'length' in color2

### Using `in` with deleted or undefined properties

If you delete a property with the `delete` operator, the `in` operator returns `false` for that property.

    let mycar = {make: 'Honda', model: 'Accord', year: 1998}
    delete mycar.make
    'make' in mycar   // returns false

    let trees = new Array('redwood', 'bay', 'cedar', 'oak', 'maple')
    delete trees[3]
    3 in trees  // returns false

If you set a property to [`undefined`](../global_objects/undefined) but do not delete it, the `in` operator returns true for that property.

    let mycar = {make: 'Honda', model: 'Accord', year: 1998}
    mycar.make = undefined
    'make' in mycar   // returns true

    let trees = new Array('redwood', 'bay', 'cedar', 'oak', 'maple')
    trees[3] = undefined
    3 in trees  // returns true

The `in` operator will return `false` for empty array slots. Even if accessing it directly returns `undefined`.

    let empties = new Array(3)
    empties[2] // returns undefined
    2 in empties  // returns false

To avoid this, make sure a new array is always filled with non-empty values or not write to indexes past the end of array.

    let empties = new Array(3).fill(undefined)
    2 in empties  // returns true

### Inherited properties

The `in` operator returns `true` for properties in the prototype chain. (If you want to check for only _non-inherited_ properties, use [`Object.prototype.hasOwnProperty()`](../global_objects/object/hasownproperty) instead.)

    'toString' in {}  // returns true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-relational-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-relational-operators</span></a></td></tr></tbody></table>

`in`

1

12

1

5.5

4

1

1

18

4

10.1

1

1.0

## See also

-   `for...in`
-   `delete`
-   [`Object.prototype.hasOwnProperty()`](../global_objects/object/hasownproperty)
-   [`Reflect.has()`](../global_objects/reflect/has)
-   [Enumerability and ownership of properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in</a>

# TypeError: cannot use 'in' operator to search for 'x' in 'y'

The JavaScript exception "right-hand side of 'in' should be an object" occurs when the [`in` operator](../operators/in) was used to search in strings, or in numbers, or other primitive types. It can only be used to check if a property is in an object.

## Message

    TypeError: Invalid operand to 'in' (Edge)
    TypeError: right-hand side of 'in' should be an object, got 'x' (Firefox)
    TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome)

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

The [`in` operator](../operators/in) can only be used to check if a property is in an object. You can't search in strings, or in numbers, or other primitive types.

## Examples

### Searching in strings

Unlike in other programming languages (e.g. Python), you can't search in strings using the [`in` operator](../operators/in).

    "Hello" in "Hello World";
    // TypeError: cannot use 'in' operator to search for 'Hello' in 'Hello World'

Instead you will need to use [`String.prototype.indexOf()`](../global_objects/string/indexof), for example.

    "Hello World".indexOf("Hello") !== -1;
    // true

### The operand can't be null or undefined

Make sure the object you are inspecting isn't actually [`null`](../global_objects/null) or [`undefined`](../global_objects/undefined).

    var foo = null;
    "bar" in foo;
    // TypeError: cannot use 'in' operator to search for 'bar' in 'foo' (Chrome)
    // TypeError: right-hand side of 'in' should be an object, got null (Firefox)

The `in` operator always expects an object.

    var foo = { baz: "bar" };
    "bar" in foo; // false

    "PI" in Math; // true
    "pi" in Math; // false

### Searching in arrays

Be careful when using the `in` operator to search in [`Array`](../global_objects/array) objects. The `in` operator checks the index number, not the value at that index.

    var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
    3 in trees; // true
    "oak" in trees; // false

## See also

-   [`in` operator](../operators/in)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/in_operator_no_object" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/in_operator_no_object</a>

# Array.prototype.includes()

The `includes()` method determines whether an array includes a certain value among its entries, returning `true` or `false` as appropriate.

## Syntax

    includes(searchElement)
    includes(searchElement, fromIndex)

### Parameters

`searchElement`  
The value to search for.

**Note:** When comparing strings and characters, `includes()` is _case-sensitive_.

`fromIndex` <span class="badge inline optional">Optional</span>  
The position in this array at which to begin searching for `searchElement`.

The first element to be searched is found at `fromIndex` for positive values of `fromIndex`, or at `arr.length + fromIndex` for negative values of `fromIndex` (using the [absolute value](#) of `fromIndex` as the number of elements from the end of the array at which to start the search).

Defaults to `0`.

### Return value

A [`Boolean`](../boolean) which is `true` if the value `searchElement` is found within the array (or the part of the array indicated by the index `fromIndex`, if specified).

Values of zero are all considered to be equal, regardless of sign. (That is, `-0` is considered to be equal to both `0` and `+0`), but `false` is _not_ considered to be the same as `0`.

**Note:** Technically speaking, `includes()` uses the `sameValueZero` algorithm to determine whether the given element is found.

## Examples

    [1, 2, 3].includes(2)      // true
    [1, 2, 3].includes(4)      // false
    [1, 2, 3].includes(3, 3)   // false
    [1, 2, 3].includes(3, -1)  // true
    [1, 2, NaN].includes(NaN)  // true

### `fromIndex` is greater than or equal to the array length

If `fromIndex` is greater than or equal to the length of the array, `false` is returned. The array will not be searched.

    let arr = ['a', 'b', 'c']

    arr.includes('c', 3)    // false
    arr.includes('c', 100)  // false

### Computed index is less than 0

If `fromIndex` is negative, the computed index is calculated to be used as a position in the array at which to begin searching for `searchElement`. If the computed index is less or equal than `-1 * arr.length`, the entire array will be searched.

    // array length is 3
    // fromIndex is -100
    // computed index is 3 + (-100) = -97

    let arr = ['a', 'b', 'c']

    arr.includes('a', -100) // true
    arr.includes('b', -100) // true
    arr.includes('c', -100) // true
    arr.includes('a', -2)   // false

### includes() used as a generic method

`includes()` method is intentionally generic. It does not require `this` value to be an Array object, so it can be applied to other kinds of objects (e.g. array-like objects).

The example below illustrates `includes()` method called on the function's [arguments](../../functions/arguments) object.

    (function() {
      console.log(Array.prototype.includes.call(arguments, 'a'))  // true
      console.log(Array.prototype.includes.call(arguments, 'd'))  // false
    })('a','b','c')

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.includes">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.includes</span></a></td></tr></tbody></table>

`includes`

47

14

43

No

34

9

47

47

43

34

9

5.0

## See also

-   [`TypedArray.prototype.includes()`](../typedarray/includes)
-   [`String.prototype.includes()`](../string/includes)
-   [`Array.prototype.indexOf()`](indexof)
-   [`Array.prototype.find()`](find)
-   [`Array.prototype.findIndex()`](findindex)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes</a>

# Increment (++)

The increment operator (`++`) increments (adds one to) its operand and returns a value.

## Syntax

    Operator: x++ or ++x

## Description

If used postfix, with operator after operand (for example, `x++`), the increment operator increments and returns the value before incrementing.

If used prefix, with operator before operand (for example, `++x`), the increment operator increments and returns the value after incrementing.

## Examples

### Postfix increment

    let x = 3;
    y = x++;

    // y = 3
    // x = 4

### Prefix increment

    let a = 2;
    b = ++a;

    // a = 3
    // b = 3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-postfix-increment-operator">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Increment operator' in that specification.</span></a></td></tr></tbody></table>

`Increment`

2

12

1

3

3

4

1

18

4

10.1

3.2

1.0

## See also

-   [Addition operator](addition)
-   [Subtraction operator](subtraction)
-   [Division operator](division)
-   [Multiplication operator](multiplication)
-   [Remainder operator](remainder)
-   [Exponentiation operator](exponentiation)
-   [Decrement operator](decrement)
-   [Unary negation operator](unary_negation)
-   [Unary plus operator](unary_plus)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment</a>

# JavaScript reference

This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more [about this reference](about).

## Built-ins

[JavaScript standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects), along with their methods and properties.

### Value properties

-   [`Infinity`](global_objects/infinity)
-   [`NaN`](global_objects/nan)
-   [`undefined`](global_objects/undefined)
-   [`globalThis`](global_objects/globalthis)

### Function properties

-   [`eval()`](global_objects/eval)
-   [`isFinite()`](global_objects/isfinite)
-   [`isNaN()`](global_objects/isnan)
-   [`parseFloat()`](global_objects/parsefloat)
-   [`parseInt()`](global_objects/parseint)
-   [`decodeURI()`](global_objects/decodeuri)
-   [`decodeURIComponent()`](global_objects/decodeuricomponent)
-   [`encodeURI()`](global_objects/encodeuri)
-   [`encodeURIComponent()`](global_objects/encodeuricomponent)

### Fundamental objects

-   [`Object`](global_objects/object)
-   [`Function`](global_objects/function)
-   [`Boolean`](global_objects/boolean)
-   [`Symbol`](global_objects/symbol)

### Error objects

-   [`Error`](global_objects/error)
-   [`AggregateError`](global_objects/aggregateerror)
-   [`EvalError`](global_objects/evalerror)
-   [`InternalError`](global_objects/internalerror)
-   [`RangeError`](global_objects/rangeerror)
-   [`ReferenceError`](global_objects/referenceerror)
-   [`SyntaxError`](global_objects/syntaxerror)
-   [`TypeError`](global_objects/typeerror)
-   [`URIError`](global_objects/urierror)

### Numbers & dates

-   [`Number`](global_objects/number)
-   [`BigInt`](global_objects/bigint)
-   [`Math`](global_objects/math)
-   [`Date`](global_objects/date)

### Text processing

-   [`String`](global_objects/string)
-   [`RegExp`](global_objects/regexp)

### Indexed Collections

-   [`Array`](global_objects/array)
-   [`Int8Array`](global_objects/int8array)
-   [`Uint8Array`](global_objects/uint8array)
-   [`Uint8ClampedArray`](global_objects/uint8clampedarray)
-   [`Int16Array`](global_objects/int16array)
-   [`Uint16Array`](global_objects/uint16array)
-   [`Int32Array`](global_objects/int32array)
-   [`Uint32Array`](global_objects/uint32array)
-   [`Float32Array`](global_objects/float32array)
-   [`Float64Array`](global_objects/float64array)
-   [`BigInt64Array`](global_objects/bigint64array)
-   [`BigUint64Array`](global_objects/biguint64array)

### Keyed collections

-   [`Map`](global_objects/map)
-   [`Set`](global_objects/set)
-   [`WeakMap`](global_objects/weakmap)
-   [`WeakSet`](global_objects/weakset)

### Structured data

-   [`ArrayBuffer`](global_objects/arraybuffer)
-   [`SharedArrayBuffer`](global_objects/sharedarraybuffer)
-   [`Atomics`](global_objects/atomics)
-   [`DataView`](global_objects/dataview)
-   [`JSON`](global_objects/json)

### Control abstraction

-   [`GeneratorFunction`](global_objects/generatorfunction)
-   <span class="page-not-created">`AsyncGeneratorFunction`</span>
-   [`Generator`](global_objects/generator)
-   <span class="page-not-created">`AsyncGenerator`</span>
-   [`AsyncFunction`](global_objects/asyncfunction)
-   [`Promise`](global_objects/promise)

### Reflection

-   [`Reflect`](global_objects/reflect)
-   [`Proxy`](global_objects/proxy)

### Internationalization

-   [`Intl`](global_objects/intl)
-   [`Intl.Collator`](global_objects/intl/collator)
-   [`Intl.DateTimeFormat`](global_objects/intl/datetimeformat)
-   [`Intl.DisplayNames`](global_objects/intl/displaynames)
-   [`Intl.ListFormat`](global_objects/intl/listformat)
-   [`Intl.Locale`](global_objects/intl/locale)
-   [`Intl.NumberFormat`](global_objects/intl/numberformat)
-   [`Intl.PluralRules`](global_objects/intl/pluralrules)
-   [`Intl.RelativeTimeFormat`](global_objects/intl/relativetimeformat)

### WebAssembly

-   [`WebAssembly`](global_objects/webassembly)
-   [`WebAssembly.Module`](global_objects/webassembly/module)
-   [`WebAssembly.Instance`](global_objects/webassembly/instance)
-   [`WebAssembly.Memory`](global_objects/webassembly/memory)
-   [`WebAssembly.Table`](global_objects/webassembly/table)
-   [`WebAssembly.CompileError`](global_objects/webassembly/compileerror)
-   [`WebAssembly.LinkError`](global_objects/webassembly/linkerror)
-   [`WebAssembly.RuntimeError`](global_objects/webassembly/runtimeerror)

## Statements

[JavaScript statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)

### Control flow

-   [`Block`](statements/block)
-   [`break`](statements/break)
-   [`continue`](statements/continue)
-   [`Empty`](statements/empty)
-   [`if...else`](statements/if...else)
-   [`switch`](statements/switch)
-   [`throw`](statements/throw)
-   [`try...catch`](statements/try...catch)

### Declarations

-   [`var`](statements/var)
-   [`let`](statements/let)
-   [`const`](statements/const)

### Functions and classes

-   [`function`](statements/function)
-   [`function*`](statements/function*)
-   [`async function`](statements/async_function)
-   [`return`](statements/return)
-   [`class`](statements/class)

### Iterations

-   [`do...while`](statements/do...while)
-   [`for`](statements/for)
-   <span class="page-not-created">`for each...in`</span>
-   [`for...in`](statements/for...in)
-   [`for...of`](statements/for...of)
-   [`for await...of`](statements/for-await...of)
-   [`while`](statements/while)

### Other

-   [`debugger`](statements/debugger)
-   [`export`](statements/export)
-   [`import`](statements/import)
-   [`label`](statements/label)
-   [`with`](statements/with)

## Expressions and operators

[JavaScript expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators).

### Primary expressions

-   [`this`](operators/this)
-   [`function`](operators/function)
-   [`class`](operators/class)
-   [`function*`](operators/function*)
-   [`yield`](operators/yield)
-   [`yield*`](operators/yield*)
-   [`async function`](operators/async_function)
-   [`await`](operators/await)
-   [`[]`](global_objects/array)
-   [`{}`](operators/object_initializer)
-   [`/ab+c/i`](global_objects/regexp)
-   [`( )`](operators/grouping)
-   [`null`](global_objects/null)

### Left-hand-side expressions

-   [Property accessors](operators/property_accessors)
-   [Optional chaining](operators/optional_chaining)
-   [`new`](operators/new)
-   [`new.target`](operators/new.target)
-   [`import.meta`](statements/import.meta)
-   [`super`](operators/super)
-   [`...obj`](operators/spread_syntax)

### Increment & decrement

-   [`A++`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#increment)
-   [`A--`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#decrement)
-   [`++A`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#increment)
-   [`--A`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#decrement)

### Unary operators

-   [`delete`](operators/delete)
-   [`void`](operators/void)
-   [`typeof`](operators/typeof)
-   [`+`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#unary_plus)
-   [`-`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#unary_negation)
-   [`~`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#bitwise_not)
-   [`!`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#logical_not)

### Arithmetic operators

-   [`+`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#addition)
-   [`-`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#subtraction)
-   [`/`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#division)
-   [`*`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#multiplication)
-   [`%`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#remainder)
-   [`**`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#exponentiation)

### Relational operators

-   [`in`](operators/in)
-   [`instanceof`](operators/instanceof)
-   [`<`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#less_than_operator)
-   [`>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#greater_than_operator)
-   [`<=`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#less_than_or_equal_operator)
-   [`>=`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#greater_than_or_equal_operator)

### Equality operators

-   [`==`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#equality)
-   [`!=`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#inequality)
-   [`===`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#identity)
-   [`!==`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#nonidentity)

### Bitwise shift operators

-   [`<<`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#left_shift)
-   [`>>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#right_shift)
-   [`>>>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#unsigned_right_shift)

### Binary bitwise operators

-   [`&`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#bitwise_and)
-   [`|`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#bitwise_or)
-   [`^`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#bitwise_xor)

### Binary logical operators

-   [`&&`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#logical_and)
-   [`||`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#logical_or)

### Conditional (ternary) operator

-   [`(condition ? ifTrue : ifFalse)`](operators/conditional_operator)

### Assignment operators

-   [`=`](#)
-   [`*=`](#)
-   [`/=`](#)
-   [`%=`](#)
-   [`+=`](#)
-   [`-=`](#)
-   [`<<=`](#)
-   [`>>=`](#)
-   [`>>>=`](#)
-   [`&=`](#)
-   [`^=`](#)
-   [`|=`](#)
-   [`[a, b] = [1, 2]`](operators/destructuring_assignment)
-   [`{a, b} = {a:1, b:2}`](operators/destructuring_assignment)

## Functions

This chapter documents how to work with JavaScript functions to develop your applications.

-   [`arguments`](functions/arguments)
-   [Arrow functions](functions/arrow_functions)
-   [Default parameters](functions/default_parameters)
-   [Rest parameters](functions/rest_parameters)

## Additional reference pages

-   [Lexical grammar](lexical_grammar)
-   [Data types and data structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)
-   [Strict mode](strict_mode)
-   [Deprecated features](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference</a>

# Array.prototype.indexOf()

The `indexOf()` method returns the first index at which a given element can be found in the array, or -1 if it is not present.

## Syntax

    indexOf(searchElement)
    indexOf(searchElement, fromIndex)

### Parameters

`searchElement`  
Element to locate in the array.

`fromIndex` <span class="badge inline optional">Optional</span>  
The index to start the search at. If the index is greater than or equal to the array's length, -1 is returned, which means the array will not be searched. If the provided index value is a negative number, it is taken as the offset from the end of the array. Note: if the provided index is negative, the array is still searched from front to back. If the provided index is 0, then the whole array will be searched. Default: 0 (entire array is searched).

### Return value

The first index of the element in the array; **-1** if not found.

## Description

`indexOf()` compares `searchElement` to elements of the Array using [strict equality](../../operators/strict_equality) (the same method used by the `===` or triple-equals operator).

**Note:** For the String method, see [`String.prototype.indexOf()`](../string/indexof).

## Examples

### Using indexOf()

The following example uses `indexOf()` to locate values in an array.

    var array = [2, 9, 9];
    array.indexOf(2);     // 0
    array.indexOf(7);     // -1
    array.indexOf(9, 2);  // 2
    array.indexOf(2, -1); // -1
    array.indexOf(2, -3); // 0

### Finding all the occurrences of an element

    var indices = [];
    var array = ['a', 'b', 'a', 'c', 'a', 'd'];
    var element = 'a';
    var idx = array.indexOf(element);
    while (idx != -1) {
      indices.push(idx);
      idx = array.indexOf(element, idx + 1);
    }
    console.log(indices);
    // [0, 2, 4]

### Finding if an element exists in the array or not and updating the array

    function updateVegetablesCollection (veggies, veggie) {
        if (veggies.indexOf(veggie) === -1) {
            veggies.push(veggie);
            console.log('New veggies collection is : ' + veggies);
        } else if (veggies.indexOf(veggie) > -1) {
            console.log(veggie + ' already exists in the veggies collection.');
        }
    }

    var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];

    updateVegetablesCollection(veggies, 'spinach');
    // New veggies collection is : potato,tomato,chillies,green-pepper,spinach
    updateVegetablesCollection(veggies, 'spinach');
    // spinach already exists in the veggies collection.

## Polyfill

`indexOf()` was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all browsers. You can work around this by utilizing the following code at the beginning of your scripts. This will allow you to use `indexOf()` when there is still no native support. This algorithm matches the one specified in ECMA-262, 5th edition, assuming [`TypeError`](../typeerror) and [`Math.abs()`](../math/abs) have their original values.

    // This version tries to optimize by only checking for "in" when looking for undefined and
    // skipping the definitely fruitless NaN search. Other parts are merely cosmetic conciseness.
    // Whether it is actually faster remains to be seen.
    if (!Array.prototype.indexOf)
      Array.prototype.indexOf = (function(Object, max, min) {
        "use strict"
        return function indexOf(member, fromIndex) {
          if (this === null || this === undefined)
            throw TypeError("Array.prototype.indexOf called on null or undefined")

          var that = Object(this), Len = that.length >>> 0, i = min(fromIndex | 0, Len)
          if (i < 0) i = max(0, Len + i)
          else if (i >= Len) return -1

          if (member === void 0) {        // undefined
            for (; i !== Len; ++i) if (that[i] === void 0 && i in that) return i
          } else if (member !== member) { // NaN
            return -1 // Since NaN !== NaN, it will never be found. Fast-path it.
          } else                          // all else
            for (; i !== Len; ++i) if (that[i] === member) return i

          return -1 // if the value was not found, then return -1
        }
      })(Object, Math.max, Math.min)

However, if you are more interested in all the little technical bits defined by the ECMA standard, and are less concerned about performance or conciseness, then you may find this more descriptive polyfill to be more useful.

    // Production steps of ECMA-262, Edition 5, 15.4.4.14
    // Reference: https://es5.github.io/#x15.4.4.14
    if (!Array.prototype.indexOf) {
      Array.prototype.indexOf = function(searchElement, fromIndex) {
        "use strict";
        var k;

        // 1. Let o be the result of calling ToObject passing
        //    the this value as the argument.
        if (this == null) {
          throw new TypeError('"this" is null or not defined');
        }

        var o = Object(this);

        // 2. Let lenValue be the result of calling the Get
        //    internal method of o with the argument "length".
        // 3. Let len be ToUint32(lenValue).
        var len = o.length >>> 0;

        // 4. If len is 0, return -1.
        if (len === 0) {
          return -1;
        }

        // 5. If argument fromIndex was passed let n be
        //    ToInteger(fromIndex); else let n be 0.
        var n = fromIndex | 0;

        // 6. If n >= len, return -1.
        if (n >= len) {
          return -1;
        }

        // 7. If n >= 0, then Let k be n.
        // 8. Else, n<0, Let k be len - abs(n).
        //    If k is less than 0, then let k be 0.
        k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

        // 9. Repeat, while k < len
        for (; k < len; k++) {
          // a. Let Pk be ToString(k).
          //   This is implicit for LHS operands of the in operator
          // b. Let kPresent be the result of calling the
          //    HasProperty internal method of o with argument Pk.
          //   This step can be combined with c
          // c. If kPresent is true, then
          //    i.  Let elementK be the result of calling the Get
          //        internal method of o with the argument ToString(k).
          //   ii.  Let same be the result of applying the
          //        Strict Equality Comparison Algorithm to
          //        searchElement and elementK.
          //  iii.  If same is true, return k.
          if (k in o && o[k] === searchElement)
            return k;
        }
        return -1;
      };
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.indexof">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.indexof</span></a></td></tr></tbody></table>

`indexOf`

1

12

1.5

9

9.5

3

≤37

18

4

10.1

1

1.0

## See also

-   [`Array.prototype.lastIndexOf()`](lastindexof)
-   [`TypedArray.prototype.indexOf()`](../typedarray/indexof)
-   [`String.prototype.indexOf()`](../string/indexof)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf</a>

# Inequality (!=)

The inequality operator (`!=`) checks whether its two operands are not equal, returning a Boolean result. Unlike the [strict inequality](strict_inequality) operator, it attempts to convert and compare operands that are of different types.

## Syntax

    x != y

## Description

The inequality operator checks whether its operands are not equal. It is the negation of the [equality](equality) operator so the following two lines will always give the same result:

    x != y

    !(x == y)

For details of the comparison algorithm, see the page for the [equality](equality) operator.

Like the equality operator, the inequality operator will attempt to convert and compare operands of different types:

    3 != "3"; // false

To prevent this, and require that different types are considered to be different, use the [strict inequality](strict_inequality) operator instead:

    3 !== "3"; // true

## Examples

### Comparison with no type conversion

    1 != 2;              // true
    "hello" != "hola";   // true

    1 != 1;              // false
    "hello" != "hello";  // false

### Comparison with type conversion

    "1" !=  1;            // false
    1 != "1";             // false
    0 != false;           // false
    0 != null;            // true
    0 != undefined;       // true
    0 != !!null;          // false, look at Logical NOT operator
    0 != !!undefined;     // false, look at Logical NOT operator
    null != undefined;    // false

    const number1 = new Number(3);
    const number2 = new Number(3);
    number1 != 3;         // false
    number1 != number2;   // true

### Comparison of objects

    const object1 = {"key": "value"}
    const object2 = {"key": "value"};

    object1 != object2 // true
    object2 != object2 // false

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-equality-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-equality-operators</span></a></td></tr></tbody></table>

`Inequality`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Equality operator](equality)
-   [Strict equality operator](strict_equality)
-   [Strict inequality operator](strict_inequality)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Inequality" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Inequality</a>

# Infinity

The global property `Infinity` is a numeric value representing infinity.

Property attributes of `Infinity`

Writable

no

Enumerable

no

Configurable

no

## Description

`Infinity` is a property of the _global object_. In other words, it is a variable in global scope.

The initial value of `Infinity` is [`Number.POSITIVE_INFINITY`](number/positive_infinity). The value `Infinity` (positive infinity) is greater than any other number.

This value behaves slightly differently than mathematical infinity; see [`Number.POSITIVE_INFINITY`](number/positive_infinity) for details.

As defined by the ECMAScript 5 specification, `Infinity` is read-only (implemented in JavaScript 1.8.5 / Firefox 4).

## Examples

### Using Infinity

    console.log(Infinity          ); /* Infinity */
    console.log(Infinity + 1      ); /* Infinity */
    console.log(Math.pow(10, 1000)); /* Infinity */
    console.log(Math.log(0)       ); /* -Infinity */
    console.log(1 / Infinity      ); /* 0 */
    console.log(1 / 0             ); /* Infinity */

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-value-properties-of-the-global-object-infinity">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-value-properties-of-the-global-object-infinity</span></a></td></tr></tbody></table>

`Infinity`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Number.NEGATIVE_INFINITY`](number/negative_infinity)
-   [`Number.POSITIVE_INFINITY`](number/positive_infinity)
-   [`Number.isFinite`](number/isfinite)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity</a>

# WebAssembly.Instance

A `WebAssembly.Instance` object is a stateful, executable instance of a [`WebAssembly.Module`](module). `Instance` objects contain all the [Exported WebAssembly functions](https://developer.mozilla.org/en-US/docs/WebAssembly/Exported_functions) that allow calling into WebAssembly code from JavaScript.

## Constructor

[`WebAssembly.Instance()`](instance/instance)  
Creates a new `Instance` object.

## Instance properties

[`Instance.prototype.exports`](instance/exports)  
Returns an object containing as its members all the functions exported from the WebAssembly module instance, to allow them to be accessed and used by JavaScript. Read-only.

## Examples

### Synchronously instantiating a WebAssembly module

The `WebAssembly.Instance()` constructor function can be called to synchronously instantiate a given [`WebAssembly.Module`](module) object, for example:

    const importObject = {
      imports: {
        imported_func: function(arg) {
          console.log(arg);
        }
      }
    };

    fetch('simple.wasm').then(response =>
      response.arrayBuffer()
    ).then(bytes => {
      let mod = new WebAssembly.Module(bytes);
      let instance = new WebAssembly.Instance(mod, importObject);
      instance.exports.exported_func();
    })

The preferred way to get an `Instance` is asynchronously, for example using the [`WebAssembly.instantiateStreaming()`](instantiatestreaming) function like this:

    const importObject = {
      imports: {
        imported_func: function(arg) {
          console.log(arg);
        }
      }
    };

    WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
    .then(obj => obj.instance.exports.exported_func());

This also demonstrates how the `exports` property is used to access exported functions.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#instances">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#instances</span></a></td></tr></tbody></table>

`Instance`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

`Instance`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

`exports`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance</a>

# instanceof

The `instanceof` tests to see if the `prototype` property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.

## Syntax

    object instanceof constructor

### Parameters

`object`  
The object to test.

`constructor`  
Function to test against

## Description

The `instanceof` operator tests the presence of `constructor.prototype` in `object`'s prototype chain.

    // defining constructors
    function C() {}
    function D() {}

    let o = new C()

    // true, because: Object.getPrototypeOf(o) === C.prototype
    o instanceof C

    // false, because D.prototype is nowhere in o's prototype chain
    o instanceof D

    o instanceof Object           // true, because:
    C.prototype instanceof Object // true

    C.prototype = {}
    let o2 = new C()

    o2 instanceof C  // true

    // false, because C.prototype is nowhere in
    // o's prototype chain anymore
    o instanceof C

    D.prototype = new C()  // add C to [[Prototype]] linkage of D
    let o3 = new D()
    o3 instanceof D        // true
    o3 instanceof C        // true since C.prototype is now in o3's prototype chain

Note that the value of an `instanceof` test can change based on changes to the `prototype` property of constructors. It can also be changed by changing an object's prototype using `Object.setPrototypeOf`. It is also possible using the non-standard `__proto__` property.

### `instanceof` and multiple context (e.g. frames or windows)

Different scopes have different execution environments. This means that they have different built-ins (different global object, different constructors, etc.). This may result in unexpected results. For instance, `[] instanceof window.frames[0].Array` will return `false`, because ` Array.prototype !== ``window.frames[0].Array.prototype ` and arrays inherit from the former.

This may not make sense at first, but for scripts dealing with multiple frames or windows, and passing objects from one context to another via functions, this will be a valid and strong issue. For instance, you can securely check if a given object is, in fact, an Array using `Array.isArray(myObj)`

For example, checking if a [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node) is a [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement) in a different context, you can use `myNode instanceof myNode.ownerDocument.defaultView.SVGElement`.

## Examples

### Using instanceof with String

The following example shows the behavior of `instanceof` with `String` objects.

    let literalString = 'This is a literal string';
    let stringObject  = new String('String created with constructor');

    literalString instanceof String;  // false, string literal is not a String
    stringObject  instanceof String;  // true

    literalString instanceof Object;  // false, string literal is not an Object
    stringObject  instanceof Object;  // true

    stringObject  instanceof Date;    // false

### Using instanceof with Date

The following example shows the behavior of `instanceof` with `Date` objects.

    let myDate = new Date();

    myDate instanceof Date;      // true
    myDate instanceof Object;    // true
    myDate instanceof String;    // false

### Objects created using Object.create()

The following example shows the behavior of `instanceof` with objects created using `Object.create()`

    function Shape() {
    }

    function Rectangle() {
      Shape.call(this); // call super constructor.
    }

    Rectangle.prototype = Object.create(Shape.prototype);

    Rectangle.prototype.constructor = Rectangle;

    let rect = new Rectangle();

    rect instanceof Object;    // true
    rect instanceof Shape;     // true
    rect instanceof Rectangle; // true
    rect instanceof String;    // false

    let literalObject     = {};
    let nullObject  = Object.create(null);
    nullObject.name = "My object";

    literalObject    instanceof Object;   // true, every object literal has Object.prototype as prototype
    ({})             instanceof Object;   // true, same case as above
    nullObject       instanceof Object;   // false, prototype is end of prototype chain (null)

### Demonstrating that `mycar` is of type `Car` and type `Object`

The following code creates an object type `Car` and an instance of that object type, `mycar`. The `instanceof` operator demonstrates that the `mycar` object is of type `Car` and of type `Object`.

    function Car(make, model, year) {
      this.make = make;
      this.model = model;
      this.year = year;
    }
    let mycar = new Car('Honda', 'Accord', 1998)
    let a = mycar instanceof Car     // returns true
    let b = mycar instanceof Object  // returns true

### Not an instanceof

To test if an object is not an `instanceof` a specific constructor, you can do

    if (!(mycar instanceof Car)) {
      // Do something, like:
      // mycar = new Car(mycar)
    }

This is really different from:

    if (!mycar instanceof Car)

This will always be `false`. (`!mycar` will be evaluated before `instanceof`, so you always try to know if a boolean is an instance of `Car`).

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-relational-operators">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Relational Operators' in that specification.</span></a></td></tr></tbody></table>

`instanceof`

1

12

1

5

4

1

1

18

4

10.1

1

1.0

## See also

-   `typeof`
-   [`Symbol.hasInstance`](../global_objects/symbol/hasinstance)
-   [`Object.prototype.isPrototypeOf`](../global_objects/object/isprototypeof)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof</a>

# WebAssembly.instantiate()

The `WebAssembly.instantiate()` function allows you to compile and instantiate WebAssembly code. This function has two overloads:

-   The primary overload takes the WebAssembly binary code, in the form of a [typed array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays) or [`ArrayBuffer`](../arraybuffer), and performs both compilation and instantiation in one step. The returned `Promise` resolves to both a compiled [`WebAssembly.Module`](module) and its first [`WebAssembly.Instance`](instance).
-   The secondary overload takes an already-compiled [`WebAssembly.Module`](module) and returns a `Promise` that resolves to an `Instance` of that `Module`. This overload is useful if the `Module` has already been compiled.

**Warning:** This method is not the most efficient way of fetching and instantiating wasm modules. If at all possible, you should use the newer [`WebAssembly.instantiateStreaming()`](instantiatestreaming) method instead, which fetches, compiles, and instantiates a module all in one step, directly from the raw bytecode, so doesn't require conversion to an [`ArrayBuffer`](../arraybuffer).

## Syntax

### Primary overload — taking wasm binary code

    WebAssembly.instantiate(bufferSource, importObject);

#### Parameters

_bufferSource_  
A [typed array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays) or [`ArrayBuffer`](../arraybuffer) containing the binary code of the .wasm module you want to compile.

_importObject_ <span class="badge inline optional">Optional</span>  
An object containing the values to be imported into the newly-created `Instance`, such as functions or [`WebAssembly.Memory`](memory) objects. There must be one matching property for each declared import of the compiled module or else a [`WebAssembly.LinkError`](linkerror) is thrown.

#### Return value

A `Promise` that resolves to a `ResultObject` which contains two fields:

-   `module`: A [`WebAssembly.Module`](module) object representing the compiled WebAssembly module. This `Module` can be instantiated again, shared via [`postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage) or [cached in IndexedDB](https://developer.mozilla.org/en-US/docs/WebAssembly/Caching_modules).
-   `instance`: A [`WebAssembly.Instance`](instance) object that contains all the [Exported WebAssembly functions](https://developer.mozilla.org/en-US/docs/WebAssembly/Exported_functions).

#### Exceptions

-   If either of the parameters are not of the correct type or structure, a [`TypeError`](../typeerror) is thrown.
-   If the operation fails, the promise rejects with a [`WebAssembly.CompileError`](compileerror), [`WebAssembly.LinkError`](linkerror), or [`WebAssembly.RuntimeError`](runtimeerror), depending on the cause of the failure.

### Secondary overload — taking a module object instance

    WebAssembly.instantiate(module, importObject);

#### Parameters

_module_  
The [`WebAssembly.Module`](module) object to be instantiated.

_importObject_ <span class="badge inline optional">Optional</span>  
An object containing the values to be imported into the newly-created `Instance`, such as functions or [`WebAssembly.Memory`](memory) objects. There must be one matching property for each declared import of `module` or else a [`WebAssembly.LinkError`](linkerror) is thrown.

#### Return value

A `Promise` that resolves to an [`WebAssembly.Instance`](instance) object.

#### Exceptions

-   If either of the parameters are not of the correct type or structure, a [`TypeError`](../typeerror) is thrown.
-   If the operation fails, the promise rejects with a [`WebAssembly.CompileError`](compileerror), [`WebAssembly.LinkError`](linkerror), or [`WebAssembly.RuntimeError`](runtimeerror), depending on the cause of the failure.

## Examples

**Note**: You'll probably want to use [`WebAssembly.instantiateStreaming()`](instantiatestreaming) in most cases, as it is more efficient than `instantiate()`.

### First overload example

After fetching some WebAssembly bytecode using fetch, we compile and instantiate the module using the [`WebAssembly.instantiate()`](instantiate) function, importing a JavaScript function into the WebAssembly Module in the process. We then call an [Exported WebAssembly function](https://developer.mozilla.org/en-US/docs/WebAssembly/Exported_functions) that is exported by the `Instance`.

    var importObject = {
      imports: {
        imported_func: function(arg) {
          console.log(arg);
        }
      }
    };

    fetch('simple.wasm').then(response =>
      response.arrayBuffer()
    ).then(bytes =>
      WebAssembly.instantiate(bytes, importObject)
    ).then(result =>
      result.instance.exports.exported_func()
    );

**Note:** You can also find this example at [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) on GitHub ([view it live also](https://mdn.github.io/webassembly-examples/js-api-examples/)).

### Second overload example

The following example (see our [index-compile.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html) demo on GitHub, and [view it live](https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html) also) compiles the loaded simple.wasm byte code using the [`WebAssembly.compileStreaming()`](compilestreaming) method and then sends it to a [worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) using [`postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage).

    var worker = new Worker("wasm_worker.js");

    WebAssembly.compileStreaming(fetch('simple.wasm'))
    .then(mod =>
      worker.postMessage(mod)
    );

In the worker (see `wasm_worker.js`) we define an import object for the module to use, then set up an event handler to receive the module from the main thread. When the module is received, we create an instance from it using the [`WebAssembly.instantiate()`](instantiate) method and invoke an exported function from inside it.

    var importObject = {
      imports: {
        imported_func: function(arg) {
          console.log(arg);
        }
      }
    };

    onmessage = function(e) {
      console.log('module received from main thread');
      var mod = e.data;

      WebAssembly.instantiate(mod, importObject).then(function(instance) {
        instance.exports.exported_func();
      });
    };

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#dom-webassembly-instantiate">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#dom-webassembly-instantiate</span></a></td></tr></tbody></table>

`instantiate`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate</a>

# WebAssembly.instantiateStreaming()

The `WebAssembly.instantiateStreaming()` function compiles and instantiates a WebAssembly module directly from a streamed underlying source. This is the most efficient, optimized way to load wasm code.

## Syntax

    WebAssembly.instantiateStreaming(source, importObject)

### Parameters

_source_  
A [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object or a promise that will fulfill with one, representing the underlying source of a .wasm module you want to stream, compile, and instantiate.

_importObject_ <span class="badge inline optional">Optional</span>  
An object containing the values to be imported into the newly-created `Instance`, such as functions or [`WebAssembly.Memory`](memory) objects. There must be one matching property for each declared import of the compiled module or else a `WebAssembly.LinkError` is thrown.

### Return value

A `Promise` that resolves to a `ResultObject` which contains two fields:

-   `module`: A [`WebAssembly.Module`](module) object representing the compiled WebAssembly module. This `Module` can be instantiated again or shared via [postMessage()](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage).
-   `instance`: A [`WebAssembly.Instance`](instance) object that contains all the [Exported WebAssembly functions](https://developer.mozilla.org/en-US/docs/WebAssembly/Exported_functions).

### Exceptions

-   If either of the parameters are not of the correct type or structure, a [`TypeError`](../typeerror) is thrown.
-   If the operation fails, the promise rejects with a [`WebAssembly.CompileError`](compileerror), [`WebAssembly.LinkError`](linkerror), or [`WebAssembly.RuntimeError`](runtimeerror), depending on the cause of the failure.

## Examples

### Instantiating streaming

The following example (see our [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) demo on GitHub, and [view it live](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html) also) directly streams a .wasm module from an underlying source then compiles and instantiates it, the promise fulfilling with a `ResultObject`. Because the `instantiateStreaming()` function accepts a promise for a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object, you can directly pass it a [`WindowOrWorkerGlobalScope.fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) call, and it will pass the response into the function when it fulfills.

    var importObject = { imports: { imported_func: arg => console.log(arg) } };

    WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
    .then(obj => obj.instance.exports.exported_func());

The `ResultObject`'s instance member is then accessed, and the contained exported function invoked.

**Note:** For this to work, `.wasm` files should be returned with an `application/wasm` MIME type by the server.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/web-api/#dom-webassembly-instantiatestreaming">WebAssembly Web API (WebAssembly Web API) 
<br/>

<span class="small">#dom-webassembly-instantiatestreaming</span></a></td></tr></tbody></table>

`instantiateStreaming`

61

16

58

No

47

No

61

61

58

45

No

8.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming</a>

# Int16Array

The `Int16Array` typed array represents an array of twos-complement 16-bit signed integers in the platform byte order. If control over byte order is needed, use [`DataView`](dataview) instead. The contents are initialized to `0`. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).

## Constructor

[`Int16Array()`](int16array/int16array)  
Creates a new `Int16Array` object.

## Static properties

[`Int16Array.BYTES_PER_ELEMENT`](typedarray/bytes_per_element)  
Returns a number value of the element size. `2` in the case of an `Int16Array`.

[`Int16Array.name`](typedarray/name)  
Returns the string value of the constructor name. In the case of the `Int16Array` type: "`Int16Array`".

## Static methods

[`Int16Array.from()`](typedarray/from)  
Creates a new `Int16Array` from an array-like or iterable object. See also [`Array.from()`](array/from).

[`Int16Array.of()`](typedarray/of)  
Creates a new `Int16Array` with a variable number of arguments. See also [`Array.of()`](array/of).

## Instance properties

[`Int16Array.prototype.buffer`](typedarray/buffer)  
Returns the [`ArrayBuffer`](arraybuffer) referenced by the `Int16Array`. Fixed at construction time and thus **read only**.

[`Int16Array.prototype.byteLength`](typedarray/bytelength)  
Returns the length (in bytes) of the `Int16Array` from the start of its [`ArrayBuffer`](arraybuffer). Fixed at construction time and thus **read only.**

[`Int16Array.prototype.byteOffset`](typedarray/byteoffset)  
Returns the offset (in bytes) of the `Int16Array` from the start of its [`ArrayBuffer`](arraybuffer). Fixed at construction time and thus **read only.**

[`Int16Array.prototype.length`](typedarray/length)  
Returns the number of elements held in the `Int16Array`. Fixed at construction time and thus **read only.**

## Instance methods

[`Int16Array.prototype.copyWithin()`](typedarray/copywithin)  
Copies a sequence of array elements within the array. See also [`Array.prototype.copyWithin()`](array/copywithin).

[`Int16Array.prototype.entries()`](typedarray/entries)  
Returns a new _array iterator_ object that contains the key/value pairs for each index in the array. See also [`Array.prototype.entries()`](array/entries).

[`Int16Array.prototype.every()`](typedarray/every)  
Tests whether all elements in the array pass the test provided by a function. See also [`Array.prototype.every()`](array/every).

[`Int16Array.prototype.fill()`](typedarray/fill)  
Fills all the elements of an array from a start index to an end index with a static value. See also [`Array.prototype.fill()`](array/fill).

[`Int16Array.prototype.filter()`](typedarray/filter)  
Creates a new array with all of the elements of this array for which the provided filtering function returns `true`. See also [`Array.prototype.filter()`](array/filter).

[`Int16Array.prototype.find()`](typedarray/find)  
Returns the found value in the array, if an element in the array satisfies the provided testing function or `undefined` if not found. See also [`Array.prototype.find()`](array/find).

[`Int16Array.prototype.findIndex()`](typedarray/findindex)  
Returns the found index in the array, if an element in the array satisfies the provided testing function or `-1` if not found. See also [`Array.prototype.findIndex()`](array/findindex).

[`Int16Array.prototype.forEach()`](typedarray/foreach)  
Calls a function for each element in the array. See also [`Array.prototype.forEach()`](array/foreach).

[`Int16Array.prototype.includes()`](typedarray/includes)  
Determines whether a typed array includes a certain element, returning `true` or `false` as appropriate. See also [`Array.prototype.includes()`](array/includes).

[`Int16Array.prototype.indexOf()`](typedarray/indexof)  
Returns the first (least) index of an element within the array equal to the specified value, or `-1` if none is found. See also [`Array.prototype.indexOf()`](array/indexof).

[`Int16Array.prototype.join()`](typedarray/join)  
Joins all elements of an array into a string. See also [`Array.prototype.join()`](array/join).

[`Int16Array.prototype.keys()`](typedarray/keys)  
Returns a new _array iterator_ that contains the keys for each index in the array. See also [`Array.prototype.keys()`](array/keys).

[`Int16Array.prototype.lastIndexOf()`](typedarray/lastindexof)  
Returns the last (greatest) index of an element within the array equal to the specified value, or `-1` if none is found. See also [`Array.prototype.lastIndexOf()`](array/lastindexof).

[`Int16Array.prototype.map()`](typedarray/map)  
Creates a new array with the results of calling a provided function on every element in this array. See also [`Array.prototype.map()`](array/map).

[`Int16Array.prototype.reduce()`](typedarray/reduce)  
Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also [`Array.prototype.reduce()`](array/reduce).

[`Int16Array.prototype.reduceRight()`](typedarray/reduceright)  
Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also [`Array.prototype.reduceRight()`](array/reduceright).

[`Int16Array.prototype.reverse()`](typedarray/reverse)  
Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also [`Array.prototype.reverse()`](array/reverse).

[`Int16Array.prototype.set()`](typedarray/set)  
Stores multiple values in the typed array, reading input values from a specified array.

[`Int16Array.prototype.slice()`](typedarray/slice)  
Extracts a section of an array and returns a new array. See also [`Array.prototype.slice()`](array/slice).

[`Int16Array.prototype.some()`](typedarray/some)  
Returns `true` if at least one element in this array satisfies the provided testing function. See also [`Array.prototype.some()`](array/some).

[`Int16Array.prototype.sort()`](typedarray/sort)  
Sorts the elements of an array in place and returns the array. See also [`Array.prototype.sort()`](array/sort).

[`Int16Array.prototype.subarray()`](typedarray/subarray)  
Returns a new `Int16Array` from the given start and end element index.

[`Int16Array.prototype.values()`](typedarray/values)  
Returns a new **array iterator object that contains the values for each index in the array. See also [`Array.prototype.values()`](array/values).**

**[`Int16Array.prototype.toLocaleString()`](typedarray/tolocalestring)**  
**Returns a localized string representing the array and its elements. See also [`Array.prototype.toLocaleString()`](array/tolocalestring).**

**[`Int16Array.prototype.toString()`](typedarray/tostring)**  
**Returns a string representing the array and its elements. See also [`Array.prototype.toString()`](array/tostring).**

**[`Int16Array.prototype[@@iterator]()`](typedarray/@@iterator)**  
**Returns a new _array iterator_ object that contains the values for each index in the array.**

## Examples

### Different ways to create an Int16Array

    // From a length
    var int16 = new Int16Array(2);
    int16[0] = 42;
    console.log(int16[0]); // 42
    console.log(int16.length); // 2
    console.log(int16.BYTES_PER_ELEMENT); // 2

    // From an array
    var arr = new Int16Array([21,31]);
    console.log(arr[1]); // 31

    // From another TypedArray
    var x = new Int16Array([21, 31]);
    var y = new Int16Array(x);
    console.log(y[0]); // 21

    // From an ArrayBuffer
    var buffer = new ArrayBuffer(8);
    var z = new Int16Array(buffer, 0, 4);

    // From an iterable
    var iterable = function*(){ yield* [1,2,3]; }();
    var int16 = new Int16Array(iterable);
    // Int16Array[1, 2, 3]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#table-49">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#table-49</span></a></td></tr></tbody></table>

`Int16Array`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

`Int16Array`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

## See also

-   **[JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)**
-   **[`ArrayBuffer`](arraybuffer)**
-   **[`DataView`](dataview)**

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int16Array" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int16Array</a>

# Int32Array

The `Int32Array()` typed array constructor creates an array of twos-complement 32-bit signed integers in the platform byte order. If control over byte order is needed, use [`DataView`](dataview) instead. The contents are initialized to `0`. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).

## Syntax

    new Int32Array(); // new in ES2017
    new Int32Array(length);
    new Int32Array(typedArray);
    new Int32Array(object);

    new Int32Array(buffer);
    new Int32Array(buffer, byteOffset);
    new Int32Array(buffer, byteOffset, length);

### Parameters

`length`  
When called with a `length` argument, an internal array buffer is created in memory, of size `length` _multiplied by `BYTES_PER_ELEMENT`_ bytes, containing zeros.

`typedArray`  
When called with a `typedArray` argument, which can be an object of any of the typed array types (such as `Int32Array`), the `typedArray` gets copied into a new typed array. Each value in `typedArray` is converted to the corresponding type of the constructor before being copied into the new array. The length of the new typed array will be same as the length of the `typedArray` argument.

`object`  
When called with an `object` argument, a new typed array is created as if by the `TypedArray.from()` method.

`buffer`, `byteOffset`, `length`  
When called with a `buffer`, and optionally a `byteOffset` and a `length` argument, a new typed array view is created that views the specified [`ArrayBuffer`](arraybuffer). The `byteOffset` and `length` parameters specify the memory range that will be exposed by the typed array view. If both are omitted, all of `buffer` is viewed; if only `length` is omitted, the remainder of `buffer` is viewed.

## Examples

### Different ways to create an Int32Array

    // From a length
    var int32 = new Int32Array(2);
    int32[0] = 42;
    console.log(int32[0]); // 42
    console.log(int32.length); // 2
    console.log(int32.BYTES_PER_ELEMENT); // 4

    // From an array
    var arr = new Int32Array([21,31]);
    console.log(arr[1]); // 31

    // From another TypedArray
    var x = new Int32Array([21, 31]);
    var y = new Int32Array(x);
    console.log(y[0]); // 21

    // From an ArrayBuffer
    var buffer = new ArrayBuffer(16);
    var z = new Int32Array(buffer, 0, 4);

    // From an iterable
    var iterable = function*(){ yield* [1,2,3]; }();
    var int32 = new Int32Array(iterable);
    // Int32Array[1, 2, 3]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-typedarray-constructors">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-typedarray-constructors</span></a></td></tr></tbody></table>

`Int32Array`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

`constructor_without_arguments`

7

12

55

10

11.6

5.1

≤37

18

55

12

5

1.0

`iterable_allowed`

39

14

52

No

26

10

39

39

52

26

10

4.0

`new_required`

7

14

44

No

15

5.1

≤37

18

44

14

5

1.0

### Compatibility notes

Starting with ECMAScript 2015, `Int32Array` constructors require to be constructed with a [`new`](../operators/new) operator. Calling a `Int32Array` constructor as a function without `new`, will throw a [`TypeError`](typeerror) from now on.

    var dv = Int32Array([1, 2, 3]);
    // TypeError: calling a builtin Int32Array constructor
    // without new is forbidden

    var dv = new Int32Array([1, 2, 3]);

## See also

-   [JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)
-   [`ArrayBuffer`](arraybuffer)
-   [`DataView`](dataview)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array</a>

# Int8Array

The `Int8Array` typed array represents an array of twos-complement 8-bit signed integers. The contents are initialized to `0`. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).

## Constructor

[`Int8Array()`](int8array/int8array)  
Creates a new `Int8Array` object.

## Static properties

[`Int8Array.BYTES_PER_ELEMENT`](typedarray/bytes_per_element)  
Returns a number value of the element size. `1` in the case of an `Int8Array`.

[`Int8Array.name`](typedarray/name)  
Returns the string value of the constructor name. In the case of the `Int8Array` type: "`Int8Array`".

## Static methods

[`Int8Array.from()`](typedarray/from)  
Creates a new `Int8Array` from an array-like or iterable object. See also [`Array.from()`](array/from).

[`Int8Array.of()`](typedarray/of)  
Creates a new `Int8Array` with a variable number of arguments. See also [`Array.of()`](array/of).

## Instance properties

[`Int8Array.prototype.buffer`](typedarray/buffer)  
Returns the [`ArrayBuffer`](arraybuffer) referenced by the `Int8Array`. Fixed at construction time and thus **read only**.

[`Int8Array.prototype.byteLength`](typedarray/bytelength)  
Returns the length (in bytes) of the `Int8Array` from the start of its [`ArrayBuffer`](arraybuffer). Fixed at construction time and thus **read only.**

[`Int8Array.prototype.byteOffset`](typedarray/byteoffset)  
Returns the offset (in bytes) of the `Int8Array` from the start of its [`ArrayBuffer`](arraybuffer). Fixed at construction time and thus **read only.**

[`Int8Array.prototype.length`](typedarray/length)  
Returns the number of elements held in the `Int8Array`. Fixed at construction time and thus **read only.**

## Instance methods

[`Int8Array.prototype.copyWithin()`](typedarray/copywithin)  
Copies a sequence of array elements within the array. See also [`Array.prototype.copyWithin()`](array/copywithin).

[`Int8Array.prototype.entries()`](typedarray/entries)  
Returns a new _array iterator_ object that contains the key/value pairs for each index in the array. See also [`Array.prototype.entries()`](array/entries).

[`Int8Array.prototype.every()`](typedarray/every)  
Tests whether all elements in the array pass the test provided by a function. See also [`Array.prototype.every()`](array/every).

[`Int8Array.prototype.fill()`](typedarray/fill)  
Fills all the elements of an array from a start index to an end index with a static value. See also [`Array.prototype.fill()`](array/fill).

[`Int8Array.prototype.filter()`](typedarray/filter)  
Creates a new array with all of the elements of this array for which the provided filtering function returns `true`. See also [`Array.prototype.filter()`](array/filter).

[`Int8Array.prototype.find()`](typedarray/find)  
Returns the found value in the array, if an element in the array satisfies the provided testing function or `undefined` if not found. See also [`Array.prototype.find()`](array/find).

[`Int8Array.prototype.findIndex()`](typedarray/findindex)  
Returns the found index in the array, if an element in the array satisfies the provided testing function or `-1` if not found. See also [`Array.prototype.findIndex()`](array/findindex).

[`Int8Array.prototype.forEach()`](typedarray/foreach)  
Calls a function for each element in the array. See also [`Array.prototype.forEach()`](array/foreach).

[`Int8Array.prototype.includes()`](typedarray/includes)  
Determines whether a typed array includes a certain element, returning `true` or `false` as appropriate. See also [`Array.prototype.includes()`](array/includes).

[`Int8Array.prototype.indexOf()`](typedarray/indexof)  
Returns the first (least) index of an element within the array equal to the specified value, or `-1` if none is found. See also [`Array.prototype.indexOf()`](array/indexof).

[`Int8Array.prototype.join()`](typedarray/join)  
Joins all elements of an array into a string. See also [`Array.prototype.join()`](array/join).

[`Int8Array.prototype.keys()`](typedarray/keys)  
Returns a new _array iterator_ that contains the keys for each index in the array. See also [`Array.prototype.keys()`](array/keys).

[`Int8Array.prototype.lastIndexOf()`](typedarray/lastindexof)  
Returns the last (greatest) index of an element within the array equal to the specified value, or `-1` if none is found. See also [`Array.prototype.lastIndexOf()`](array/lastindexof).

[`Int8Array.prototype.map()`](typedarray/map)  
Creates a new array with the results of calling a provided function on every element in this array. See also [`Array.prototype.map()`](array/map).

[`Int8Array.prototype.reduce()`](typedarray/reduce)  
Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also [`Array.prototype.reduce()`](array/reduce).

[`Int8Array.prototype.reduceRight()`](typedarray/reduceright)  
Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also [`Array.prototype.reduceRight()`](array/reduceright).

[`Int8Array.prototype.reverse()`](typedarray/reverse)  
Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also [`Array.prototype.reverse()`](array/reverse).

[`Int8Array.prototype.set()`](typedarray/set)  
Stores multiple values in the typed array, reading input values from a specified array.

[`Int8Array.prototype.slice()`](typedarray/slice)  
Extracts a section of an array and returns a new array. See also [`Array.prototype.slice()`](array/slice).

[`Int8Array.prototype.some()`](typedarray/some)  
Returns `true` if at least one element in this array satisfies the provided testing function. See also [`Array.prototype.some()`](array/some).

[`Int8Array.prototype.sort()`](typedarray/sort)  
Sorts the elements of an array in place and returns the array. See also [`Array.prototype.sort()`](array/sort).

[`Int8Array.prototype.subarray()`](typedarray/subarray)  
Returns a new `Int8Array` from the given start and end element index.

[`Int8Array.prototype.values()`](typedarray/values)  
Returns a new _array iterator_ object that contains the values for each index in the array. See also [`Array.prototype.values()`](array/values).

[`Int8Array.prototype.toLocaleString()`](typedarray/tolocalestring)  
Returns a localized string representing the array and its elements. See also [`Array.prototype.toLocaleString()`](array/tolocalestring).

[`Int8Array.prototype.toString()`](typedarray/tostring)  
Returns a string representing the array and its elements. See also [`Array.prototype.toString()`](array/tostring).

[`Int8Array.prototype[@@iterator]()`](typedarray/@@iterator)  
Returns a new _array iterator_ object that contains the values for each index in the array.

## Examples

### Different ways to create an Int8Array

    // From a length
    var int8 = new Int8Array(2);
    int8[0] = 42;
    console.log(int8[0]); // 42
    console.log(int8.length); // 2
    console.log(int8.BYTES_PER_ELEMENT); // 1

    // From an array
    var arr = new Int8Array([21,31]);
    console.log(arr[1]); // 31

    // From another TypedArray
    var x = new Int8Array([21, 31]);
    var y = new Int8Array(x);
    console.log(y[0]); // 21

    // From an ArrayBuffer
    var buffer = new ArrayBuffer(8);
    var z = new Int8Array(buffer, 1, 4);

    // From an iterable
    var iterable = function*(){ yield* [1,2,3]; }();
    var int8 = new Int8Array(iterable);
    // Int8Array[1, 2, 3]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#table-49">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'TypedArray constructors' in that specification.</span></a></td></tr></tbody></table>

`Int8Array`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

`Int8Array`

7

12

4

10

11.6

5.1

4

18

4

12

4.2

1.0

## See also

-   [JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)
-   [`ArrayBuffer`](arraybuffer)
-   [`DataView`](dataview)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int8Array" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int8Array</a>

# InternalError

**Non-standard**

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The `InternalError` indicates an error that occurred internally in the JavaScript engine.

Example cases are mostly when something is too large, e.g.:

-   "too many switch cases",
-   "too many parentheses in regular expression",
-   "array initializer too large",
-   "too much recursion".

## Constructor

[`InternalError()`](internalerror/internalerror)  
Creates a new `InternalError` object.

## Instance properties

[`InternalError.prototype.message`](error/message)  
Error message. Inherited from [`Error`](error).

[`InternalError.prototype.name`](error/name)  
Error name. Inherited from [`Error`](error).

[`InternalError.prototype.fileName`](error/filename)  
Path to file that raised this error. Inherited from [`Error`](error).

[`InternalError.prototype.lineNumber`](error/linenumber)  
Line number in file that raised this error. Inherited from [`Error`](error).

[`InternalError.prototype.columnNumber`](error/columnnumber)  
Column number in line that raised this error. Inherited from [`Error`](error).

[`InternalError.prototype.stack`](error/stack)  
Stack trace. Inherited from [`Error`](error).

## Examples

### Too much recursion

This recursive function runs 10 times, as per the exit condition.

    function loop(x) {
      if (x >= 10) // "x >= 10" is the exit condition
        return;
      // do stuff
      loop(x + 1); // the recursive call
    }
    loop(0);

Setting this condition to an extremely high value, won't work:

    function loop(x) {
      if (x >= 1000000000000)
        return;
      // do stuff
      loop(x + 1);
    }
    loop(0);

    // InternalError: too much recursion

For more information, see [InternalError: too much recursion.](../errors/too_much_recursion)

## Specifications

Not part of any standard.

`InternalError`

No

No

1

No

No

No

No

No

4

No

No

No

`InternalError`

No

No

1

No

No

No

No

No

4

No

No

No

## See also

-   [`Error`](error)
-   [InternalError: too much recursion](../errors/too_much_recursion)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError</a>

# Intl

The `Intl` object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. The `Intl` object provides access to several constructors as well as functionality common to the internationalization constructors and other language sensitive functions.

## Constructor properties

[`Intl.Collator()`](intl/collator/collator)  
Constructor for collators, which are objects that enable language-sensitive string comparison.

[`Intl.DateTimeFormat()`](intl/datetimeformat/datetimeformat)  
Constructor for objects that enable language-sensitive date and time formatting.

[`Intl.DisplayNames()`](intl/displaynames/displaynames)  
Constructor for objects that enable the consistent translation of language, region and script display names.

[`Intl.ListFormat()`](intl/listformat/listformat)  
Constructor for objects that enable language-sensitive list formatting.

[`Intl.Locale()`](intl/locale/locale)  
Constructor for objects that represents a Unicode locale identifier.

[`Intl.NumberFormat()`](intl/numberformat/numberformat)  
Constructor for objects that enable language-sensitive number formatting.

[`Intl.PluralRules()`](intl/pluralrules/pluralrules)  
Constructor for objects that enable plural-sensitive formatting and language-specific rules for plurals.

[`Intl.RelativeTimeFormat()`](intl/relativetimeformat/relativetimeformat)  
Constructor for objects that enable language-sensitive relative time formatting.

## Static methods

[`Intl.getCanonicalLocales()`](intl/getcanonicallocales)  
Returns canonical locale names.

## Locale identification and negotiation

The internationalization constructors as well as several language sensitive methods of other constructors (listed under [See also](#see_also)) use a common pattern for identifying locales and determining the one they will actually use: they all accept `locales` and `options` arguments, and negotiate the requested locale(s) against the locales they support using an algorithm specified in the `options.localeMatcher` property.

### locales argument

The `locales` argument is used to determine the locale used in a given operation. The JavaScript implementation examines `locales`, and then computes a locale it understands that comes closest to satisfying the expressed preference. `locales` may be:

-   `undefined` (or omitted): The implementation's default locale will be used.
-   A locale: A locale identifier or an `Intl.Locale` object that wraps a locale identifier.
-   A list of locales: Any other value, that will be converted into an object and then treated as an array of locales.

In the latter two cases, the actual locale used is the best-supported locale determined by [locale negotiation](#locale_negotiation).

A locale identifier is a string that consists of:

1.  a language subtag,
2.  (optionally) a script subtag,
3.  (optionally) a region (or country) subtag,
4.  (optionally) one or more variant subtags (all of which must be unique),
5.  (optionally) one or more BCP 47 extension sequences, and
6.  (optionally) a private-use extension sequence

...with all present subtags and sequences separated by hyphens. Locale identifiers are case-insensitive ASCII. However, it's conventional to use title case (first letter capitalized, successive letters lower case) for script subtags, upper case for region subtags, and lower case for everything else. For example:

-   "`hi`": Hindi (language)
-   "`de-AT`": German (language) as used in Austria (region)
-   "`zh-Hans-CN`": Chinese (language) written in simplified characters (script) as used in China (region)
-   "`en-emodeng`": English (language) in the "Early modern English" dialect (variant)

Subtags identifying languages, scripts, regions (including countries), and (rarely used) variants are registered in the [IANA Language Subtag Registry](https://www.iana.org/assignments/language-subtag-registry). This registry is periodically updated over time, and implementations may not always be up to date, so don't rely too much on subtags being universally supported.

BCP 47 extension sequences consist of a single digit or letter (other than `"x"`) and one or more two- to eight-letter or digit subtags separated by hyphens. Only one sequence is permitted for each digit or letter: "`de-a-foo-a-foo`" is invalid. BCP 47 extension subtags are defined in the [Unicode CLDR Project](https://github.com/unicode-org/cldr/tree/master/common/bcp47). Currently only two extensions have defined semantics:

-   The `"u"` (Unicode) extension can be used to request additional customization of [`Intl/Collator`](intl/collator), [`Intl/NumberFormat`](intl/numberformat), or [`Intl/DateTimeFormat`](intl/datetimeformat) objects. Examples:
    -   "`de-DE-u-co-phonebk`": Use the phonebook variant of the German sort order, which interprets umlauted vowels as corresponding character pairs: ä → ae, ö → oe, ü → ue.
    -   "`th-TH-u-nu-thai`": Use Thai digits (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) in number formatting.
    -   "`ja-JP-u-ca-japanese`": Use the Japanese calendar in date and time formatting, so that 2013 is expressed as the year 25 of the Heisei period, or 平成 25.
    -   "`en-GB-u-ca-islamic`": use British English with the Islamic (Hijri) calendar, where the Gregorian date 14 October, 2017 is the Hijri date 24 Muharram, 1439.
-   The `"t"` (transformed) extension indicates transformed content: for example, text that was translated from another locale. No `Intl` functionality currently considers the `"t"` extension. However, this extension sometimes contains a nested locale (with no extensions): for example, the transformed extension in "`de-t-en`" contains the locale identifier for English. If a nested locale is present, it must be a valid locale identifier. For example, because "`en-emodeng-emodeng`" is invalid (because it contains a duplicate `emodeng` variant subtag), "`de-t-en-emodeng-emodeng`" is also invalid.

Finally, a private-use extension sequence using the letter `"x"` may appear, followed by one or more one- to eight-letter or digit subtags separated by hyphens. This allows applications to encode information for their own private use, that will be ignored by all `Intl` operations.

### Locale negotiation

The list of locales specified by the `locales` argument, after Unicode extensions have been removed from them, is interpreted as a prioritized request from the application. The runtime compares it against the locales it has available and picks the best one available. Two matching algorithms exist: the "`lookup`" matcher follows the Lookup algorithm specified in [BCP 47](https://datatracker.ietf.org/doc/html/rfc4647#section-3.4); the "`best fit`" matcher lets the runtime provide a locale that's at least, but possibly more, suited for the request than the result of the Lookup algorithm. If the application doesn't provide a `locales` argument, or the runtime doesn't have a locale that matches the request, then the runtime's default locale is used. The matcher can be selected using a property of the `options` argument (see below).

If the selected locale identifier had a Unicode extension sequence, that extension is now used to customize the constructed object or the behavior of the function. Each constructor or function supports only a subset of the keys defined for the Unicode extension, and the supported values often depend on the locale identifier. For example, the "`co`" key (collation) is only supported by [`Intl/Collator`](intl/collator), and its "`phonebk`" value is only supported for German.

### options argument

The `options` argument must be an object with properties that vary between constructors and functions. If the `options` argument is not provided or is undefined, default values are used for all properties.

One property is supported by all language sensitive constructors and functions: The `localeMatcher` property, whose value must be a string "`lookup`" or "`best fit`" and which selects one of the locale matching algorithms described above.

## Examples

### Formatting dates and numbers

You can use `Intl` to format dates and numbers in a form that's conventional for a specific language and region:

    const count = 26254.39;
    const date = new Date("2012-05-24");

    function log(locale) {
      console.log(
        `${new Intl.DateTimeFormat(locale).format(date)}${new Intl.NumberFormat(locale).format(count)}`
      );
    }

    log("en-US");
    // expected output: 5/24/2012 26,254.39

    log("de-DE");
    // expected output: 24.5.2012 26.254,39

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#intl-object">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#intl-object</span></a></td></tr></tbody></table>

`Collator`

24

12

29

11

15

10

4.4

25

56

14

10

1.5

`DateTimeFormat`

24

12

29

11

15

10

4.4

25

56

14

10

1.5

`DisplayNames`

81

81

86

No

68

14.1

81

81

86

58

14.5

No

`Intl`

24

12

29

11

15

10

4.4

25

56

14

10

1.5

`getCanonicalLocales`

54

16

48

No

No

11

No

No

56

No

11

No

`@@toStringTag`

86

86

83

No

72

14

86

86

83

No

14

No

`ListFormat`

72

79

78

No

60

14.1

72

72

79

51

14.5

No

`Locale`

74

79

75

No

62

14

74

74

79

53

14

11.0

`NumberFormat`

24

12

29

11

15

10

4.4

25

56

14

10

1.5

`PluralRules`

63

18

58

No

50

13

63

63

58

46

13

8.0

`RelativeTimeFormat`

71

79

65

No

58

14

71

71

65

50

14

10.0

## See also

-   Introduction: [The ECMAScript Internationalization API](https://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html)
-   Constructors
    -   [`Intl.Collator`](intl/collator)
    -   [`Intl.DateTimeFormat`](intl/datetimeformat)
    -   [`Intl.ListFormat`](intl/listformat)
    -   [`Intl.NumberFormat`](intl/numberformat)
    -   [`Intl.PluralRules`](intl/pluralrules)
    -   [`Intl.RelativeTimeFormat`](intl/relativetimeformat)
    -   [`Intl.Locale`](intl/locale)
-   Methods
    -   [`String.prototype.localeCompare()`](string/localecompare)
    -   [`Number.prototype.toLocaleString()`](number/tolocalestring)
    -   [`Date.prototype.toLocaleString()`](date/tolocalestring)
    -   [`Date.prototype.toLocaleDateString()`](date/tolocaledatestring)
    -   [`Date.prototype.toLocaleTimeString()`](date/tolocaletimestring)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl</a>

# RangeError: invalid array length

The JavaScript exception "Invalid array length" occurs when specifying an array length that is either negative or exceeds the maximum supported by the platform (i.e. when creating an [`Array`](../global_objects/array) or [`ArrayBuffer`](../global_objects/arraybuffer), or when setting the [`Array.length`](../global_objects/array/length) property).

The maximum allowed array length depends on the platform, browser and browser version. For [`Array`](../global_objects/array) the maximum length is 2GB-1 (2^32-1). For [`ArrayBuffer`](../global_objects/arraybuffer) the maximum is 2GB-1 on 32-bit systems (2^32-1). From Firefox version 89 the maximum value of [`ArrayBuffer`](../global_objects/arraybuffer) is 8GB on 64-bit systems (2^33).

**Note:** `Array` and `ArrayBuffer` are independent data structures (the implementation of one does not affect the other).

## Message

    RangeError: invalid array length (Firefox)
    RangeError: Invalid array length (Chromium-based)
    RangeError: Array buffer allocation failed (Chromium-based)

## Error type

[`RangeError`](../global_objects/rangeerror)

## What went wrong?

An invalid array length might appear in these situations:

-   Creating an [`Array`](../global_objects/array) or [`ArrayBuffer`](../global_objects/arraybuffer) with a negative length, or setting a negative value for the [`Array.length`](../global_objects/array/length) property.
-   Creating an [`Array`](../global_objects/array) or setting the [`Array.length`](../global_objects/array/length) property greater than 2GB-1 (2^32-1).
-   Creating an [`ArrayBuffer`](../global_objects/arraybuffer) that is bigger than 2GB-1 (2^32-1) on a 32-bit system or 8GB (2^33) on a 64-bit system.
-   Before Firefox 89: Creating an [`ArrayBuffer`](../global_objects/arraybuffer) that is bigger than 2GB-1 (2^32-1).

If you are creating an `Array`, using the constructor, you probably want to use the literal notation instead, as the first argument is interpreted as the length of the `Array`.

Otherwise, you might want to clamp the length before setting the length property, or using it as argument of the constructor.

## Examples

### Invalid cases

    new Array(Math.pow(2, 40))
    new Array(-1)
    new ArrayBuffer(Math.pow(2, 32)) //32-bit system
    new ArrayBuffer(-1)

    let a = [];
    a.length = a.length - 1;         // set -1 to the length property

    let b = new Array(Math.pow(2, 32) - 1);
    b.length = b.length + 1;         // set 2^32 to the length property

### Valid cases

    [ Math.pow(2, 40) ]                     // [ 1099511627776 ]
    [ -1 ]                                  // [ -1 ]
    new ArrayBuffer(Math.pow(2, 32) - 1)
    new ArrayBuffer(Math.pow(2, 33))  // 64-bit systems after Firefox 89
    new ArrayBuffer(0)

    let a = [];
    a.length = Math.max(0, a.length - 1);

    let b = new Array(Math.pow(2, 32) - 1);
    b.length = Math.min(0xffffffff, b.length + 1);

    // 0xffffffff is the hexadecimal notation for 2^32 - 1
    // which can also be written as (-1 >>> 0)

## See also

-   [`Array`](../global_objects/array)
-   [`Array.length`](../global_objects/array/length)
-   [`ArrayBuffer`](../global_objects/arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_array_length" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_array_length</a>

# ReferenceError: invalid assignment left-hand side

The JavaScript exception "invalid assignment left-hand side" occurs when there was an unexpected assignment somewhere. For example, a single "`=`" sign was used instead of "`==`" or "`===`".

## Message

    ReferenceError: invalid assignment left-hand side

## Error type

[`ReferenceError`](../global_objects/referenceerror).

## What went wrong?

There was an unexpected assignment somewhere. This might be due to a mismatch of a [assignment operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#assignment_operators) and a [comparison operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators), for example. While a single "`=`" sign assigns a value to a variable, the "`==`" or "`===`" operators compare a value.

## Examples

### Typical invalid assignments

    if (Math.PI = 3 || Math.PI = 4) {
      console.log('no way!');
    }
    // ReferenceError: invalid assignment left-hand side

    var str = 'Hello, '
    += 'is it me '
    += 'you\'re looking for?';
    // ReferenceError: invalid assignment left-hand side

In the `if` statement, you want to use a comparison operator ("=="), and for the string concatenation, the plus ("+") operator is needed.

    if (Math.PI == 3 || Math.PI == 4) {
      console.log('no way!');
    }

    var str = 'Hello, '
    + 'from the '
    + 'other side!';

## See also

-   [Assignment operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#assignment_operators)
-   [Comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side</a>

# TypeError: invalid assignment to const "x"

The JavaScript exception "invalid assignment to const" occurs when it was attempted to alter a constant value. JavaScript `const` declarations can't be re-assigned or redeclared.

## Message

    TypeError: invalid assignment to const "x" (Firefox)
    TypeError: Assignment to constant variable. (Chrome)
    TypeError: Assignment to const (Edge)
    TypeError: Redeclaration of const 'x' (IE)

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

A constant is a value that cannot be altered by the program during normal execution. It cannot change through re-assignment, and it can't be redeclared. In JavaScript, constants are declared using the `const` keyword.

## Examples

### Invalid redeclaration

Assigning a value to the same constant name in the same block-scope will throw.

    const COLUMNS = 80;

    // ...

    COLUMNS = 120; // TypeError: invalid assignment to const `COLUMNS'

### Fixing the error

There are multiple options to fix this error. Check what was intended to be achieved with the constant in question.

#### Rename

If you meant to declare another constant, pick another name and re-name. This constant name is already taken in this scope.

    const COLUMNS = 80;
    const WIDE_COLUMNS = 120;

#### `const`, `let` or `var`?

Do not use const if you weren't meaning to declare a constant. Maybe you meant to declare a block-scoped variable with `let` or global variable with `var`.

    let columns = 80;

    // ...

    let columns = 120;

#### Scoping

Check if you are in the correct scope. Should this constant appear in this scope or was it meant to appear in a function, for example?

    const COLUMNS = 80;

    function setupBigScreenEnvironment() {
      const COLUMNS = 120;
    }

### `const` and immutability

The `const` declaration creates a read-only reference to a value. It does **not** mean the value it holds is immutable, just that the variable identifier cannot be reassigned. For instance, in case the content is an object, this means the object itself can still be altered. This means that you can't mutate the value stored in a variable:

    const obj = {foo: 'bar'};
    obj = {foo: 'baz'}; // TypeError: invalid assignment to const `obj'

But you can mutate the properties in a variable:

    obj.foo = 'baz';
    obj; // Object { foo: "baz" }

## See also

-   `const`
-   `let`
-   `var`

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment</a>

# RangeError: invalid date

The JavaScript exception "invalid date" occurs when a string leading to an invalid date has been provided to [`Date`](../global_objects/date) or [`Date.parse()`](../global_objects/date/parse).

## Message

    RangeError: invalid date (Edge)
    RangeError: invalid date (Firefox)
    RangeError: invalid time value (Chrome)
    RangeError: Provided date is not in valid range (Chrome)

## Error type

[`RangeError`](../global_objects/rangeerror)

## What went wrong?

A string leading to an invalid date has been provided to [`Date`](../global_objects/date) or [`Date.parse()`](../global_objects/date/parse).

## Examples

### Invalid cases

Unrecognizable strings or dates containing illegal element values in ISO formatted strings usually return [`NaN`](../global_objects/nan). However, depending on the implementation, non–conforming ISO format strings, may also throw `RangeError: invalid date`, like the following cases in Firefox:

    new Date('foo-bar 2014');
    new Date('2014-25-23').toISOString();
    new Date('foo-bar 2014').toString();

This, however, returns [`NaN`](../global_objects/nan) in Firefox:

    Date.parse('foo-bar 2014'); // NaN

For more details, see the [`Date.parse()`](../global_objects/date/parse) documentation.

### Valid cases

    new Date('05 October 2011 14:48 UTC');
    new Date(1317826080); // Unix Time Stamp for 05 October 2011 14:48:00 UTC

## See also

-   [`Date`](../global_objects/date)
-   [`Date.prototype.parse()`](../global_objects/date/parse)
-   [`Date.prototype.toISOString()`](../global_objects/date/toisostring)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_date" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_date</a>

# SyntaxError: for-in loop head declarations may not have initializers

The JavaScript [strict mode](../strict_mode)-only exception "for-in loop head declarations may not have initializers" occurs when the head of a [for...in](../statements/for...in) contains an initializer expression, such as |`for (var i = 0 in obj)`|. This is not allowed in for-of loops in strict mode.

## Message

    SyntaxError: for-in loop head declarations cannot have an initializer (Edge)
    SyntaxError: for-in loop head declarations may not have initializers (Firefox)
    SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)

## Error type

[`SyntaxError`](../global_objects/syntaxerror) in [strict mode](../strict_mode) only.

## What went wrong?

The head of a [for...in](../statements/for...in) loop contains an initializer expression. That is, a variable is declared and assigned a value |`for (var i = 0 in obj)`|. In non-strict mode, this head declaration is silently ignored and behaves like `|for (var i in obj)|`. In [strict mode](../strict_mode), however, a `SyntaxError` is thrown.

## Examples

This example throws a `SyntaxError`:

    "use strict";

    var obj = {a: 1, b: 2, c: 3 };

    for (var i = 0 in obj) {
      console.log(obj[i]);
    }

    // SyntaxError: for-in loop head declarations may not have initializers

### Valid for-in loop

You can remove the initializer (`i = 0`) in the head of the for-in loop.

    "use strict";

    var obj = {a: 1, b: 2, c: 3 };

    for (var i in obj) {
      console.log(obj[i]);
    }

### Array iteration

The for...in loop [shouldn't be used for Array iteration](../statements/for...in#array_iteration_and_for...in). Did you intend to use a `for` loop instead of a `for-in` loop to iterate an [`Array`](../global_objects/array)? The `for` loop allows you to set an initializer then as well:

    var arr = [ "a", "b", "c" ]

    for (var i = 2; i < arr.length; i++) {
      console.log(arr[i]);
    }

    // "c"

## See also

-   `for...in`
-   `for...of` – also disallows an initializer in both strict and non-strict mode.
-   `for` – preferred for array iteration, allows to define an initializer.

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer</a>

# SyntaxError: a declaration in the head of a for-of loop can't have an initializer

The JavaScript exception "a declaration in the head of a for-of loop can't have an initializer" occurs when the head of a [for...of](../statements/for...of) loop contains an initializer expression such as |`for (var i = 0 of iterable)`|. This is not allowed in for-of loops.

## Message

    SyntaxError: for-of loop head declarations cannot have an initializer (Edge)
    SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
    SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

The head of a [for...of](../statements/for...of) loop contains an initializer expression. That is, a variable is declared and assigned a value |`for (var i = 0 of iterable)`|. This is not allowed in for-of loops. You might want a `for` loop that does allow an initializer.

## Examples

### Invalid `for-of` loop

    let iterable = [10, 20, 30];

    for (let value = 50 of iterable) {
      console.log(value);
    }

    // SyntaxError: a declaration in the head of a for-of loop can't
    // have an initializer

### Valid `for-of` loop

You need to remove the initializer (`value = 50`) in the head of the `for-of` loop. Maybe you intended to make 50 an offset value, in that case you could add it to the loop body, for example.

    let iterable = [10, 20, 30];

    for (let value of iterable) {
      value += 50;
      console.log(value);
    }
    // 60
    // 70
    // 80

## See also

-   `for...of`
-   `for...in` – disallows an initializer in strict mode as well ([SyntaxError: for-in loop head declarations may not have initializers](invalid_for-in_initializer))
-   `for` – allows to define an initializer when iterating.

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-of_initializer" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-of_initializer</a>

# TypeError: invalid 'instanceof' operand 'x'

The JavaScript exception "invalid 'instanceof' operand" occurs when the right hand side operands of the [`instanceof` operator](../operators/instanceof) isn't used with a constructor object, i.e. an object which has a `prototype` property and is callable.

## Message

    TypeError: invalid 'instanceof' operand "x" (Firefox)
    TypeError: "x" is not a function (Firefox)
    TypeError: Right-hand side of 'instanceof' is not an object (Chrome)
    TypeError: Right-hand side of 'instanceof' is not callable (Chrome)

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

The [`instanceof` operator](../operators/instanceof) expects the right hand side operands to be a constructor object, i.e. an object which has a `prototype` property and is callable.

## Examples

### instanceof vs typeof

    "test" instanceof ""; // TypeError: invalid 'instanceof' operand ""
    42 instanceof 0;      // TypeError: invalid 'instanceof' operand 0

    function Foo() {}
    var f = Foo();        // Foo() is called and returns undefined
    var x = new Foo();

    x instanceof f;       // TypeError: invalid 'instanceof' operand f
    x instanceof x;       // TypeError: x is not a function

To fix these errors, you will either need to replace the [`instanceof` operator](../operators/instanceof) with the [`typeof` operator](../operators/typeof), or to make sure you use the function name, instead of the result of its evaluation.

    typeof "test" == "string"; // true
    typeof 42 == "number"      // true

    function Foo() {}
    var f = Foo;               // Do not call Foo.
    var x = new Foo();

    x instanceof f;            // true
    x instanceof Foo;          // true

## See also

-   [`instanceof` operator](../operators/instanceof)
-   [`typeof` operator](../operators/typeof)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand</a>

# Object.is()

The `Object.is()` method determines whether two values are [the same value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness).

## Syntax

    Object.is(value1, value2);

### Parameters

`value1`  
The first value to compare.

`value2`  
The second value to compare.

### Return value

A [`Boolean`](../boolean) indicating whether or not the two arguments are the same value.

## Description

`Object.is()` determines whether two values are [the same value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness). Two values are the same if one of the following holds:

-   both [`undefined`](../undefined)
-   both [`null`](../null)
-   both `true` or both `false`
-   both strings of the same length with the same characters in the same order
-   both the same object (meaning both values reference the same object in memory)
-   both numbers and
    -   both `+0`
    -   both `-0`
    -   both [`NaN`](../nan)
    -   or both non-zero and both not [`NaN`](../nan) and both have the same value

This is _not_ the same as being equal according to the [`==`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#equality) operator. The `==` operator applies various coercions to both sides (if they are not the same Type) before testing for equality (resulting in such behavior as `"" == false` being `true`), but `Object.is` doesn't coerce either value.

This is also _not_ the same as being equal according to the [`===`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#identity) operator. The only difference between `Object.is()` and `===` is in their treatment of signed zeroes and NaNs. For example, the `===` operator (and the `==` operator) treats the number values `-0` and `+0` as equal. Also, the `===` operator treats [`Number.NaN`](../number/nan) and [`NaN`](../nan) as not equal.

## Examples

### Using Object.is

    // Case 1: Evaluation result is the same as using ===
    Object.is(25, 25);                // true
    Object.is('foo', 'foo');          // true
    Object.is('foo', 'bar');          // false
    Object.is(null, null);            // true
    Object.is(undefined, undefined);  // true
    Object.is(window, window);        // true
    Object.is([], []);                // false
    var foo = { a: 1 };
    var bar = { a: 1 };
    Object.is(foo, foo);              // true
    Object.is(foo, bar);              // false

    // Case 2: Signed zero
    Object.is(0, -0);                 // false
    Object.is(+0, -0);                // false
    Object.is(-0, -0);                // true
    Object.is(0n, -0n);               // true

    // Case 3: NaN
    Object.is(NaN, 0/0);              // true
    Object.is(NaN, Number.NaN)        // true

## Polyfill

    if (!Object.is) {
      Object.defineProperty(Object, "is", {
        value: function (x, y) {
          // SameValue algorithm
          if (x === y) {
            // return true if x and y are not 0, OR
            // if x and y are both 0 of the same sign.
            // This checks for cases 1 and 2 above.
            return x !== 0 || 1 / x === 1 / y;
          } else {
            // return true if both x AND y evaluate to NaN.
            // The only possibility for a variable to not be strictly equal to itself
            // is when that variable evaluates to NaN (example: Number.NaN, 0/0, NaN).
            // This checks for case 3.
            return x !== x && y !== y;
          }
        }
      });
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.is">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Object.is' in that specification.</span></a></td></tr></tbody></table>

`is`

30

12

22

No

17

9

≤37

30

22

18

9

2.0

## See also

-   [Equality comparisons and sameness](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness) — a comparison of all three built-in sameness facilities

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is</a>

# TypeError: 'x' is not iterable

The JavaScript exception "is not iterable" occurs when the value which is given as the right hand-side of [for…of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) or as argument of a function such as [`Promise.all`](../global_objects/promise/all) or [`TypedArray.from`](../global_objects/typedarray/from), is not an [iterable object](../iteration_protocols).

## Message

    TypeError: 'x' is not iterable (Firefox, Chrome)
    TypeError: 'x' is not a function or its return value is not iterable (Chrome)

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

The value which is given as the right hand-side of [for…of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) or as argument of a function such as [`Promise.all`](../global_objects/promise/all) or [`TypedArray.from`](../global_objects/typedarray/from), is not an [iterable object](../iteration_protocols). An iterable can be a built-in iterable type such as [`Array`](../global_objects/array), [`String`](../global_objects/string) or [`Map`](../global_objects/map), a generator result, or an object implementing the [iterable protocol](../iteration_protocols#the_iterable_protocol).

## Examples

### Iterating over Object properties

In JavaScript, [`Object`](../global_objects/object)s are not iterable unless they implement the [iterable protocol](../iteration_protocols#the_iterable_protocol). Therefore, you cannot use [for…of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) to iterate over the properties of an object.

    var obj = { 'France': 'Paris', 'England': 'London' };
    for (let p of obj) { // TypeError: obj is not iterable
        // …
    }

Instead you have to use [`Object.keys`](../global_objects/object/keys) or [`Object.entries`](../global_objects/object/entries), to iterate over the properties or entries of an object.

    var obj = { 'France': 'Paris', 'England': 'London' };
    // Iterate over the property names:
    for (let country of Object.keys(obj)) {
        var capital = obj[country];
        console.log(country, capital);
    }

    for (const [country, capital] of Object.entries(obj))
        console.log(country, capital);

Another option for this use case might be to use a [`Map`](../global_objects/map):

    var map = new Map;
    map.set('France', 'Paris');
    map.set('England', 'London');
    // Iterate over the property names:
    for (let country of map.keys()) {
        let capital = map[country];
        console.log(country, capital);
    }

    for (let capital of map.values())
        console.log(capital);

    for (const [country, capital] of map.entries())
        console.log(country, capital);

### Iterating over a generator

[Generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators) are functions you call to produce an iterable object.

    function* generate(a, b) {
      yield a;
      yield b;
    }

    for (let x of generate) // TypeError: generate is not iterable
        console.log(x);

When they are not called, the [`Function`](../global_objects/function) object corresponding to the generator is callable, but not iterable. Calling a generator produces an iterable object which will iterate over the values yielded during the execution of the generator.

    function* generate(a, b) {
        yield a;
        yield b;
    }

    for (let x of generate(1,2))
        console.log(x);

### Iterating over a custom iterable

Custom iterables can be created by implementing the [`Symbol.iterator`](../global_objects/symbol/iterator) method. You must be certain that your iterator method returns an object which is an iterator, which is to say it must have a next method.

    const myEmptyIterable = {
        [Symbol.iterator]() {
            return [] // [] is iterable, but it is not an iterator -- it has no next method.
        }
    }

    Array.from(myEmptyIterable);  // TypeError: myEmptyIterable is not iterable

Here is a correct implementation:

    const myEmptyIterable = {
        [Symbol.iterator]() {
            return [][Symbol.iterator]()
        }
    }

    Array.from(myEmptyIterable);  // []

## See also

-   [iterable protocol](../iteration_protocols#the_iterable_protocol)
-   [`Object.keys`](../global_objects/object/keys)
-   [`Object.entries`](../global_objects/object/entries)
-   [`Map`](../global_objects/map)
-   [generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators)
-   [for…of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/is_not_iterable" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/is_not_iterable</a>

# Array.isArray()

The `Array.isArray()` method determines whether the passed value is an [`Array`](../array).

    Array.isArray([1, 2, 3]);  // true
    Array.isArray({foo: 123}); // false
    Array.isArray('foobar');   // false
    Array.isArray(undefined);  // false

## Syntax

    Array.isArray(value)

### Parameters

`value`  
The value to be checked.

### Return value

`true` if the value is an [`Array`](../array); otherwise, `false`.

## Description

If the value is an [`Array`](../array), `true` is returned; otherwise, `false` is.

See the article ["Determining with absolute accuracy whether or not a JavaScript object is an array”](https://web.mit.edu/jwalden/www/isArray.html) for more details. Given a [`TypedArray`](../typedarray) instance, `false` is always returned.

## Examples

### Using Array.isArray

    // all following calls return true
    Array.isArray([]);
    Array.isArray([1]);
    Array.isArray(new Array());
    Array.isArray(new Array('a', 'b', 'c', 'd'));
    Array.isArray(new Array(3));
    // Little known fact: Array.prototype itself is an array:
    Array.isArray(Array.prototype);

    // all following calls return false
    Array.isArray();
    Array.isArray({});
    Array.isArray(null);
    Array.isArray(undefined);
    Array.isArray(17);
    Array.isArray('Array');
    Array.isArray(true);
    Array.isArray(false);
    Array.isArray(new Uint8Array(32));
    Array.isArray({ __proto__: Array.prototype });

### `instanceof` vs `isArray`

When checking for `Array` instance, `Array.isArray` is preferred over `instanceof` because it works through `iframes`.

    var iframe = document.createElement('iframe');
    document.body.appendChild(iframe);
    xArray = window.frames[window.frames.length-1].Array;
    var arr = new xArray(1,2,3); // [1,2,3]

    // Correctly checking for Array
    Array.isArray(arr);  // true
    // Considered harmful, because doesn't work through iframes
    arr instanceof Array; // false

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.isarray">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.isarray</span></a></td></tr></tbody></table>

`isArray`

5

12

4

9

10.5

5

1

18

4

14

5

1.0

## See also

-   [A polyfill](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js)
-   [`Array`](../array)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray</a>

# Symbol.isConcatSpreadable

The `Symbol.isConcatSpreadable` well-known symbol is used to configure if an object should be flattened to its array elements when using the [`Array.prototype.concat()`](../array/concat) method.

## Description

The `@@isConcatSpreadable` symbol (`Symbol.isConcatSpreadable`) can be defined as an own or inherited property and its value is a boolean. It can control behavior for arrays and array-like objects:

-   For array objects, the default behavior is to spread (flatten) elements. `Symbol.isConcatSpreadable` can avoid flattening in these cases.
-   For array-like objects, the default behavior is no spreading or flattening. `Symbol.isConcatSpreadable` can force flattening in these cases.

Property attributes of `Symbol.isConcatSpreadable`

Writable

no

Enumerable

no

Configurable

no

## Examples

### Arrays

By default, [`Array.prototype.concat()`](../array/concat) spreads (flattens) arrays into its result:

    let alpha = ['a', 'b', 'c'],
    let numeric = [1, 2, 3]

    let alphaNumeric = alpha.concat(numeric)

    console.log(alphaNumeric)  // Result: ['a', 'b', 'c', 1, 2, 3]

When setting `Symbol.isConcatSpreadable` to `false`, you can disable the default behavior:

    let alpha = ['a', 'b', 'c'],
    let numeric = [1, 2, 3]

    numeric[Symbol.isConcatSpreadable] = false
    let alphaNumeric = alpha.concat(numeric)

    console.log(alphaNumeric)  // Result: ['a', 'b', 'c', [1, 2, 3] ]

### Array-like objects

For array-like objects, the default is to not spread. `Symbol.isConcatSpreadable` needs to be set to `true` in order to get a flattened array:

    let x = [1, 2, 3]

    let fakeArray = {
      [Symbol.isConcatSpreadable]: true,
      length: 2,
      0: 'hello',
      1: 'world'
    }

    x.concat(fakeArray)  // [1, 2, 3, "hello", "world"]

**Note:** The `length` property is used to control the number of object properties to be added. In the above example, `length:2` indicates two properties has to be added.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-symbol.isconcatspreadable">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-symbol.isconcatspreadable</span></a></td></tr></tbody></table>

`isConcatSpreadable`

48

15

48

No

35

10

48

48

48

35

10

5.0

## See also

-   [`Array.prototype.concat()`](../array/concat)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable</a>

# Reflect.isExtensible()

The static `Reflect.isExtensible()` method determines if an object is extensible (whether it can have new properties added to it). It is similar to [`Object.isExtensible()`](../object/isextensible), but with some [differences](#difference_to_object.isextensible).

## Syntax

    Reflect.isExtensible(target)

### Parameters

`target`  
The target object which to check if it is extensible.

### Return value

A [`Boolean`](../boolean) indicating whether or not the target is extensible.

### Exceptions

A [`TypeError`](../typeerror), if `target` is not an [`Object`](../object).

## Description

The `Reflect.isExtensible` method allows you determine if an object is extensible (whether it can have new properties added to it). It is the same method as [`Object.isExtensible()`](../object/isextensible).

## Examples

### Using Reflect.isExtensible()

See also [`Object.isExtensible()`](../object/isextensible).

    // New objects are extensible.
    let empty = {}
    Reflect.isExtensible(empty)  // === true

    // ...but that can be changed.
    Reflect.preventExtensions(empty)
    Reflect.isExtensible(empty)  // === false

    // Sealed objects are by definition non-extensible.
    let sealed = Object.seal({})
    Reflect.isExtensible(sealed)  // === false

    // Frozen objects are also by definition non-extensible.
    let frozen = Object.freeze({})
    Reflect.isExtensible(frozen)  // === false

### Difference to Object.isExtensible()

If the `target` argument to this method is not an object (a primitive), then it will cause a [`TypeError`](../typeerror). With [`Object.isExtensible()`](../object/isextensible), a non-object first argument will be coerced to an object at first.

    Reflect.isExtensible(1)
    // TypeError: 1 is not an object

    Object.isExtensible(1)
    // false

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-reflect.isextensible">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-reflect.isextensible</span></a></td></tr></tbody></table>

`isExtensible`

49

12

42

No

36

10

49

49

42

36

10

5.0

## See also

-   [`Reflect`](../reflect)
-   [`Object.isExtensible()`](../object/isextensible)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible</a>

# Number.isFinite()

The `Number.isFinite()` method determines whether the passed value is a finite number — that is, it checks that the type of a given value is [`Number`](../number), and the number is neither positive [`Infinity`](../infinity), negative `Infinity`, nor [`NaN`](../nan).

## Syntax

    Number.isFinite(value)

### Parameters

`value`  
The value to be tested for finiteness.

### Return value

A [`Boolean`](../boolean) indicating whether or not the given value is a finite number.

## Description

In comparison to the global [`isFinite()`](../isfinite) function, this method doesn't first convert the parameter to a number. This means only values of the type number _and_ are finite return `true`.

## Examples

### Using isFinite

    Number.isFinite(Infinity);  // false
    Number.isFinite(NaN);       // false
    Number.isFinite(-Infinity); // false

    Number.isFinite(0);         // true
    Number.isFinite(2e64);      // true

    Number.isFinite('0');       // false, would've been true with
                                // global isFinite('0')
    Number.isFinite(null);      // false, would've been true with
                                // global isFinite(null)

## Polyfill

    if (Number.isFinite === undefined) Number.isFinite = function(value) {
        return typeof value === 'number' && isFinite(value);
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-number.isfinite">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-number.isfinite</span></a></td></tr></tbody></table>

`isFinite`

19

12

16

No

15

9

≤37

25

16

14

9

1.5

## See also

-   The [`Number`](../number) object it belongs to.
-   The global function [`isFinite`](../isfinite).

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isFinite" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isFinite</a>

# Object.isFrozen()

The `Object.isFrozen()` determines if an object is [frozen](freeze).

## Syntax

    Object.isFrozen(obj)

### Parameters

`obj`  
The object which should be checked.

### Return value

A [`Boolean`](../boolean) indicating whether or not the given object is frozen.

## Description

An object is frozen if and only if it is not [extensible](isextensible), all its properties are non-configurable, and all its data properties (that is, properties which are not accessor properties with getter or setter components) are non-writable.

## Examples

### Using Object.isFrozen

    // A new object is extensible, so it is not frozen.
    Object.isFrozen({}); // === false

    // An empty object which is not extensible
    // is vacuously frozen.
    var vacuouslyFrozen = Object.preventExtensions({});
    Object.isFrozen(vacuouslyFrozen); // === true

    // A new object with one property is also extensible,
    // ergo not frozen.
    var oneProp = { p: 42 };
    Object.isFrozen(oneProp); // === false

    // Preventing extensions to the object still doesn't
    // make it frozen, because the property is still
    // configurable (and writable).
    Object.preventExtensions(oneProp);
    Object.isFrozen(oneProp); // === false

    // ...but then deleting that property makes the object
    // vacuously frozen.
    delete oneProp.p;
    Object.isFrozen(oneProp); // === true

    // A non-extensible object with a non-writable
    // but still configurable property is not frozen.
    var nonWritable = { e: 'plep' };
    Object.preventExtensions(nonWritable);
    Object.defineProperty(nonWritable, 'e', {
      writable: false
    }); // make non-writable
    Object.isFrozen(nonWritable); // === false

    // Changing that property to non-configurable
    // then makes the object frozen.
    Object.defineProperty(nonWritable, 'e', {
      configurable: false
    }); // make non-configurable
    Object.isFrozen(nonWritable); // === true

    // A non-extensible object with a non-configurable
    // but still writable property also isn't frozen.
    var nonConfigurable = { release: 'the kraken!' };
    Object.preventExtensions(nonConfigurable);
    Object.defineProperty(nonConfigurable, 'release', {
      configurable: false
    });
    Object.isFrozen(nonConfigurable); // === false

    // Changing that property to non-writable
    // then makes the object frozen.
    Object.defineProperty(nonConfigurable, 'release', {
      writable: false
    });
    Object.isFrozen(nonConfigurable); // === true

    // A non-extensible object with a configurable
    // accessor property isn't frozen.
    var accessor = { get food() { return 'yum'; } };
    Object.preventExtensions(accessor);
    Object.isFrozen(accessor); // === false

    // ...but make that property non-configurable
    // and it becomes frozen.
    Object.defineProperty(accessor, 'food', {
      configurable: false
    });
    Object.isFrozen(accessor); // === true

    // But the easiest way for an object to be frozen
    // is if Object.freeze has been called on it.
    var frozen = { 1: 81 };
    Object.isFrozen(frozen); // === false
    Object.freeze(frozen);
    Object.isFrozen(frozen); // === true

    // By definition, a frozen object is non-extensible.
    Object.isExtensible(frozen); // === false

    // Also by definition, a frozen object is sealed.
    Object.isSealed(frozen); // === true

### Non-object coercion

In ES5, if the argument to this method is not an object (a primitive), then it will cause a [`TypeError`](../typeerror). In ES2015, a non-object argument will be treated as if it was a frozen ordinary object, return `true`.

    Object.isFrozen(1);
    // TypeError: 1 is not an object (ES5 code)

    Object.isFrozen(1);
    // true                          (ES2015 code)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.isfrozen">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Object.isFrozen' in that specification.</span></a></td></tr></tbody></table>

`isFrozen`

6

12

4

9

12

5.1

1

18

4

12

6

1.0

## See also

-   [`Object.freeze()`](freeze)
-   [`Object.preventExtensions()`](preventextensions)
-   [`Object.isExtensible()`](isextensible)
-   [`Object.seal()`](seal)
-   [`Object.isSealed()`](issealed)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen</a>

# Number.isInteger()

The `Number.isInteger()` method determines whether the passed value is an integer.

## Syntax

    Number.isInteger(value)

### Parameters

`value`  
The value to be tested for being an integer.

### Return value

A [`Boolean`](../boolean) indicating whether or not the given value is an integer.

## Description

If the target value is an integer, return `true`, otherwise return `false`. If the value is [`NaN`](../nan) or [`Infinity`](../infinity), return `false`. The method will also return `true` for floating point numbers that can be represented as integer.

## Examples

### Using isInteger

    Number.isInteger(0);         // true
    Number.isInteger(1);         // true
    Number.isInteger(-100000);   // true
    Number.isInteger(99999999999999999999999); // true

    Number.isInteger(0.1);       // false
    Number.isInteger(Math.PI);   // false

    Number.isInteger(NaN);       // false
    Number.isInteger(Infinity);  // false
    Number.isInteger(-Infinity); // false
    Number.isInteger('10');      // false
    Number.isInteger(true);      // false
    Number.isInteger(false);     // false
    Number.isInteger([1]);       // false

    Number.isInteger(5.0);       // true
    Number.isInteger(5.000000000000001); // false
    Number.isInteger(5.0000000000000001); // true

## Polyfill

    Number.isInteger = Number.isInteger || function(value) {
      return typeof value === 'number' &&
        isFinite(value) &&
        Math.floor(value) === value;
    };

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-number.isinteger">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-number.isinteger</span></a></td></tr></tbody></table>

`isInteger`

34

12

16

No

21

9

≤37

34

16

21

9

2.0

## See also

-   The [`Number`](../number) object it belongs to.

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger</a>

# Atomics.isLockFree()

The static ` Atomics``.isLockFree() ` method is used to determine whether to use locks or atomic operations. It returns `true`, if the given size is one of the [BYTES_PER_ELEMENT](../typedarray/bytes_per_element) property of integer TypedArray types.

## Syntax

    Atomics.isLockFree(size)

### Parameters

`size`  
The size in bytes to check.

### Return value

A [`Boolean`](../boolean) indicating whether the operation is lock free.

## Examples

### Using isLockFree

    Atomics.isLockFree(1); // true
    Atomics.isLockFree(2); // true
    Atomics.isLockFree(3); // false
    Atomics.isLockFree(4); // true
    Atomics.isLockFree(5); // false
    Atomics.isLockFree(6); // false
    Atomics.isLockFree(7); // false
    Atomics.isLockFree(8); // true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-atomics.islockfree">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-atomics.islockfree</span></a></td></tr></tbody></table>

`isLockFree`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

## See also

-   [`Atomics`](../atomics)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree</a>

# isNaN()

The `isNaN()` function determines whether a value is [`NaN`](nan) or not. Because coercion inside the `isNaN` function can be [surprising](#confusing_special-case_behavior), you may alternatively want to use [`Number.isNaN()`](number/isnan).

## Syntax

    isNaN(value)

### Parameters

`value`  
The value to be tested.

### Return value

`true` if the given value is [`NaN`](nan); otherwise, `false`.

## Description

### The necessity of an isNaN function

Unlike all other possible values in JavaScript, it is not possible to use the equality operators (== and ===) to compare a value against [`NaN`](nan) to determine whether the value _is_ `NaN` or not, because both `NaN == NaN` and `NaN === NaN` evaluate to `false`. Hence, the necessity of an `isNaN` function.

### Origin of NaN values

`NaN` values are generated when arithmetic operations result in _undefined_ or _unrepresentable_ values. Such values do not necessarily represent overflow conditions. A `NaN` also results from attempted coercion to numeric values of non-numeric values for which no primitive numeric value is available.

For example, dividing zero by zero results in a `NaN` — but dividing other numbers by zero does not.

### Confusing special-case behavior

Since the very earliest versions of the `isNaN` function specification, its behavior for non-numeric arguments has been confusing. When the argument to the `isNaN` function is not of type [Number](https://es5.github.com/#x8.5), the value is first coerced to a Number. The resulting value is then tested to determine whether it is [`NaN`](nan). Thus for non-numbers that when coerced to numeric type result in a valid non-NaN numeric value (notably the empty string and boolean primitives, which when coerced give numeric values zero or one), the "false" returned value may be unexpected; the empty string, for example, is surely "not a number." The confusion stems from the fact that the term, "not a number", has a specific meaning for numbers represented as IEEE-754 floating-point values. The function should be interpreted as answering the question, "is this value, when coerced to a numeric value, an IEEE-754 'Not A Number' value?"

ECMAScript 2015 contains the [`Number.isNaN()`](number/isnan) function. `Number.isNaN(x)` is a reliable way to test whether `x` is `NaN` or not. Even with `Number.isNaN`, however, the meaning of `NaN` remains the precise numeric meaning and not, "not a number". Alternatively, in the absence of `Number.isNaN`, the expression `(x != x)` is a more reliable way to test whether variable `x` is `NaN` or not, as the result is not subject to the false positives that make `isNaN` unreliable.

A polyfill for `isNaN` would be (the polyfill leverages the unique never-equal-to-itself characteristic of `NaN`):

    const isNaN = function(value) {
        const n = Number(value);
        return n !== n;
    };

## Examples

    isNaN(NaN);       // true
    isNaN(undefined); // true
    isNaN({});        // true

    isNaN(true);      // false
    isNaN(null);      // false
    isNaN(37);        // false

    // strings
    isNaN('37');      // false: "37" is converted to the number 37 which is not NaN
    isNaN('37.37');   // false: "37.37" is converted to the number 37.37 which is not NaN
    isNaN("37,5");    // true
    isNaN('123ABC');  // true:  parseInt("123ABC") is 123 but Number("123ABC") is NaN
    isNaN('');        // false: the empty string is converted to 0 which is not NaN
    isNaN(' ');       // false: a string with spaces is converted to 0 which is not NaN

    // dates
    isNaN(new Date());                // false
    isNaN(new Date().toString());     // true

    // This is a false positive and the reason why isNaN is not entirely reliable
    isNaN('blabla');   // true: "blabla" is converted to a number.
                       // Parsing this as a number fails and returns NaN

### Useful special-case behavior

There is a more usage oriented way to think of `isNaN()`: If `isNaN(x)` returns `false`, you can use `x` in an arithmetic expression not making the expression return `NaN`. If it returns `true`, `x` will make every arithmetic expression return `NaN`. This means that in JavaScript, `isNaN(x) == true` is equivalent to `x - 0` returning `NaN` (though in JavaScript `x - 0 == NaN` always returns false, so you can't test for it). Actually, `isNaN(x)`, `isNaN(x - 0)`, `isNaN(Number(x))`, `Number.isNaN(x - 0)`, and `Number.isNaN(Number(x))` always return the same and in JavaScript `isNaN(x)` is just the shortest possible form to express each of these terms.

You can use this, for example, to test whether an argument to a function is arithmetically processable (usable "like" a number), or if it's not and you have to provide a default value or something else. This way you can have a function that makes use of the full versatility JavaScript provides by implicitly converting values depending on context.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-isnan-number">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'isNaN' in that specification.</span></a></td></tr></tbody></table>

`isNaN`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`NaN`](nan)
-   [`Number.isNaN()`](number/isnan)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN</a>

# Object.prototype.isPrototypeOf()

The `isPrototypeOf()` method checks if an object exists in another object's prototype chain.

**Note:** `isPrototypeOf()` differs from the [`instanceof`](../../operators/instanceof) operator. In the expression "`object instanceof AFunction`", the `object` prototype chain is checked against `AFunction.prototype`, not against `AFunction` itself.

## Syntax

    isPrototypeOf(object)

### Parameters

`object`  
The object whose prototype chain will be searched.

### Return value

A [`Boolean`](../boolean) indicating whether the calling object lies in the prototype chain of the specified object.

### Errors thrown

[`TypeError`](../typeerror)  
A [`TypeError`](../typeerror) is thrown if `prototypeObj` is undefined or null.

## Description

The `isPrototypeOf()` method allows you to check whether or not an object exists within another object's prototype chain.

## Examples

### Using isPrototypeOf

This example demonstrates that `Baz.prototype`, `Bar.prototype`, `Foo.prototype` and `Object.prototype` exist in the prototype chain for object `baz`:

    function Foo() {}
    function Bar() {}
    function Baz() {}

    Bar.prototype = Object.create(Foo.prototype);
    Baz.prototype = Object.create(Bar.prototype);

    const foo = new Foo();
    const bar = new Bar();
    const baz = new Baz();

    // prototype chains:
    // foo: Foo <- Object
    // bar: Bar <- Foo <- Object
    // baz: Baz <- Bar <- Foo <- Object
    console.log(Baz.prototype.isPrototypeOf(baz));    // true
    console.log(Baz.prototype.isPrototypeOf(bar));    // false
    console.log(Baz.prototype.isPrototypeOf(foo));    // false
    console.log(Bar.prototype.isPrototypeOf(baz));    // true
    console.log(Bar.prototype.isPrototypeOf(foo));    // false
    console.log(Foo.prototype.isPrototypeOf(baz));    // true
    console.log(Foo.prototype.isPrototypeOf(bar));    // true
    console.log(Object.prototype.isPrototypeOf(baz)); // true

The `isPrototypeOf()` method — along with the [`instanceof`](../../operators/instanceof) operator — comes in particularly handy if you have code that can only function when dealing with objects descended from a specific prototype chain; e.g., to guarantee that certain methods or properties will be present on that object.

For example, to execute some code that's only safe to run if a `baz` object has `Foo.prototype` in its prototype chain, you can do this:

    if (Foo.prototype.isPrototypeOf(baz)) {
      // do something safe
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.prototype.isprototypeof">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.prototype.isprototypeof</span></a></td></tr></tbody></table>

`isPrototypeOf`

1

12

1

9

4

3

1

18

4

10.1

1

1.0

## See also

-   [`instanceof`](../../operators/instanceof)
-   [`Object.getPrototypeOf()`](getprototypeof)
-   [`Object.setPrototypeOf()`](setprototypeof)
-   [`Object/proto`](proto)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf</a>

# Number.isSafeInteger()

The `Number.isSafeInteger()` method determines whether the provided value is a number that is a safe integer.

A safe integer is an integer that

-   can be exactly represented as an IEEE-754 double precision number, and
-   whose IEEE-754 representation cannot be the result of rounding any other integer to fit the IEEE-754 representation.

For example, `253 - 1` is a safe integer: it can be exactly represented, and no other integer rounds to it under any IEEE-754 rounding mode. In contrast, `253` is _not_ a safe integer: it can be exactly represented in IEEE-754, but the integer `253 + 1` can't be directly represented in IEEE-754 but instead rounds to `253` under round-to-nearest and round-to-zero rounding. The safe integers consist of all integers from `-(253 - 1)` inclusive to `253 - 1` inclusive (± `9007199254740991` or ± 9,007,199,254,740,991).

Handling values larger or smaller than ~9 quadrillion with full precision requires using an [arbitrary precision arithmetic library](https://en.wikipedia.org/wiki/Arbitrary-precision_arithmetic). See [What Every Programmer Needs to Know about Floating Point Arithmetic](https://floating-point-gui.de/) for more information on floating point representations of numbers.

For larger integers, consider using the [`BigInt`](../bigint) type.

## Syntax

    Number.isSafeInteger(testValue)

### Parameters

`testValue`  
The value to be tested for being a safe integer.

### Return value

A [`Boolean`](../boolean) indicating whether or not the given value is a number that is a safe integer.

## Polyfill

    Number.isSafeInteger = Number.isSafeInteger || function (value) {
       return Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER;
    };

## Examples

### Using isSafeInteger

    Number.isSafeInteger(3);                    // true
    Number.isSafeInteger(Math.pow(2, 53));      // false
    Number.isSafeInteger(Math.pow(2, 53) - 1);  // true
    Number.isSafeInteger(NaN);                  // false
    Number.isSafeInteger(Infinity);             // false
    Number.isSafeInteger('3');                  // false
    Number.isSafeInteger(3.1);                  // false
    Number.isSafeInteger(3.0);                  // true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-number.issafeinteger">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-number.issafeinteger</span></a></td></tr></tbody></table>

`isSafeInteger`

34

12

32

No

21

10

≤37

34

32

21

10

2.0

## See also

-   The [`Number`](../number) object it belongs to.
-   [`Number.MIN_SAFE_INTEGER`](min_safe_integer)
-   [`Number.MAX_SAFE_INTEGER`](max_safe_integer)
-   [`BigInt`](../bigint)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger</a>

# Object.isSealed()

The `Object.isSealed()` method determines if an object is sealed.

## Syntax

    Object.isSealed(obj)

### Parameters

`obj`  
The object which should be checked.

### Return value

A [`Boolean`](../boolean) indicating whether or not the given object is sealed.

## Description

Returns `true` if the object is sealed, otherwise `false`. An object is sealed if it is not [extensible](isextensible) and if all its properties are non-configurable and therefore not removable (but not necessarily non-writable).

## Examples

### Using Object.isSealed

    // Objects aren't sealed by default.
    var empty = {};
    Object.isSealed(empty); // === false

    // If you make an empty object non-extensible,
    // it is vacuously sealed.
    Object.preventExtensions(empty);
    Object.isSealed(empty); // === true

    // The same is not true of a non-empty object,
    // unless its properties are all non-configurable.
    var hasProp = { fee: 'fie foe fum' };
    Object.preventExtensions(hasProp);
    Object.isSealed(hasProp); // === false

    // But make them all non-configurable
    // and the object becomes sealed.
    Object.defineProperty(hasProp, 'fee', {
      configurable: false
    });
    Object.isSealed(hasProp); // === true

    // The easiest way to seal an object, of course,
    // is Object.seal.
    var sealed = {};
    Object.seal(sealed);
    Object.isSealed(sealed); // === true

    // A sealed object is, by definition, non-extensible.
    Object.isExtensible(sealed); // === false

    // A sealed object might be frozen,
    // but it doesn't have to be.
    Object.isFrozen(sealed); // === true
    // (all properties also non-writable)

    var s2 = Object.seal({ p: 3 });
    Object.isFrozen(s2); // === false
    // ('p' is still writable)

    var s3 = Object.seal({ get p() { return 0; } });
    Object.isFrozen(s3); // === true
    // (only configurability matters for accessor properties)

### Non-object coercion

In ES5, if the argument to this method is not an object (a primitive), then it will cause a [`TypeError`](../typeerror). In ES2015, a non-object argument will be treated as if it was a sealed ordinary object, return `true`.

    Object.isSealed(1);
    // TypeError: 1 is not an object (ES5 code)

    Object.isSealed(1);
    // true                          (ES2015 code)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.issealed">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Object.isSealed' in that specification.</span></a></td></tr></tbody></table>

`isSealed`

6

12

4

9

12

5.1

1

18

4

12

6

1.0

## See also

-   [`Object.seal()`](seal)
-   [`Object.preventExtensions()`](preventextensions)
-   [`Object.isExtensible()`](isextensible)
-   [`Object.freeze()`](freeze)
-   [`Object.isFrozen()`](isfrozen)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed</a>

# ArrayBuffer.isView()

The `ArrayBuffer.isView()` method determines whether the passed value is one of the `ArrayBuffer` views, such as [typed array objects](../typedarray) or a [`DataView`](../dataview).

## Syntax

    ArrayBuffer.isView(value)

### Parameters

`value`  
The value to be checked.

### Return value

`true` if the given argument is one of the [`ArrayBuffer`](../arraybuffer) views; otherwise, `false`.

## Examples

### Using isView

    ArrayBuffer.isView();                    // false
    ArrayBuffer.isView([]);                  // false
    ArrayBuffer.isView({});                  // false
    ArrayBuffer.isView(null);                // false
    ArrayBuffer.isView(undefined);           // false
    ArrayBuffer.isView(new ArrayBuffer(10)); // false

    ArrayBuffer.isView(new Uint8Array());    // true
    ArrayBuffer.isView(new Float32Array());  // true
    ArrayBuffer.isView(new Int8Array(10).subarray(0, 3)); // true

    const buffer = new ArrayBuffer(2);
    const dv = new DataView(buffer);
    ArrayBuffer.isView(dv); // true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-arraybuffer.isview">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-arraybuffer.isview</span></a></td></tr></tbody></table>

`isView`

32

12

29

11

19

7

≤37

32

29

19

7

2.0

## See also

-   [JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView</a>

# String.prototype.italics()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `italics()` method creates an [`<i>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) HTML element that causes a string to be italic.

## Syntax

    italics()

### Return value

A string containing a [`<i>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) HTML element.

## Description

The `italics()` method embeds a string in an `<i>` element: "`<i>str</i>`".

## Examples

### Using italics()

The following example uses string methods to change the formatting of a string:

    var worldString = 'Hello, world';
    console.log(worldString.blink());  // <blink>Hello, world</blink>
    console.log(worldString.bold());  // <b>Hello, world</b>
    console.log(worldString.italics()); // <i>Hello, world</i>
    console.log(worldString.strike());  // <strike>Hello, world</strike>

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.italics">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.italics</span></a></td></tr></tbody></table>

`italics`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.blink()`](blink)
-   [`String.prototype.bold()`](bold)
-   [`String.prototype.strike()`](strike)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/italics" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/italics</a>

# Iteration protocols

As a couple of additions to ECMAScript 2015, **Iteration protocols** aren't new built-ins or syntax, but _protocols_. These protocols can be implemented by any object by following some conventions.

There are two protocols: The [iterable protocol](#the_iterable_protocol) and the [iterator protocol](#the_iterator_protocol).

## The iterable protocol

**The iterable protocol** allows JavaScript objects to define or customize their iteration behavior, such as what values are looped over in a [`for...of`](statements/for...of) construct. Some built-in types are [built-in iterables](#built-in_iterables) with a default iteration behavior, such as [`Array`](global_objects/array) or [`Map`](global_objects/map), while other types (such as [`Object`](global_objects/object)) are not.

In order to be **iterable**, an object must implement the `@@iterator` method, meaning that the object (or one of the objects up its [prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)) must have a property with a `@@iterator` key which is available via constant [`Symbol.iterator`](global_objects/symbol/iterator):

<table><thead><tr class="header"><th>Property</th><th>Value</th></tr></thead><tbody><tr class="odd"><td><code>[Symbol.iterator]</code></td><td>A zero-argument function that returns an object, conforming to the <a href="#the_iterator_protocol">iterator protocol</a>.</td></tr></tbody></table>

Whenever an object needs to be iterated (such as at the beginning of a [`for...of`](statements/for...of) loop), its `@@iterator` method is called with no arguments, and the returned **iterator** is used to obtain the values to be iterated.

Note that when this zero-argument function is called, it is invoked as a method on the iterable object. Therefore inside of the function, the `this` keyword can be used to access the properties of the iterable object, to decide what to provide during the iteration.

This function can be an ordinary function, or it can be a generator function, so that when invoked, an iterator object is returned. Inside of this generator function, each entry can be provided by using `yield`.

## The iterator protocol

**The iterator protocol** defines a standard way to produce a sequence of values (either finite or infinite), and potentially a return value when all values have been generated.

An object is an iterator when it implements a `next()` method with the following semantics:

<table><colgroup><col style="width: 50%" /><col style="width: 50%" /></colgroup><thead><tr class="header"><th>Property</th><th>Value</th></tr></thead><tbody><tr class="odd"><td><code>next()</code></td><td><p>A zero-argument function that returns an object with at least the following two properties:</p><dl><dt> <code>done</code> (boolean)</dt><dd><p>Has the value <code>false</code> if the iterator was able to produce the next value in the sequence. (This is equivalent to not specifying the <code>done</code> property altogether.)</p><p>Has the value <code>true</code> if the iterator has completed its sequence. In this case, <code>value</code> optionally specifies the return value of the iterator.</p></dd><dt><code>value</code></dt><dd>Any JavaScript value returned by the iterator. Can be omitted when <code>done</code> is <code>true</code>.</dd></dl><p>The <code>next()</code> method must always return an object with appropriate properties including <code>done</code> and <code>value</code>. If a non-object value gets returned (such as <code>false</code> or <code>undefined</code>), a <a href="global_objects/typeerror"><code>TypeError</code></a> (<code>"iterator.next() returned a non-object value"</code>) will be thrown.</p></td></tr></tbody></table>

**Note:** It is not possible to know reflectively whether a particular object implements the iterator protocol. However, it is easy to create an object that satisfies _both_ the iterator and iterable protocols (as shown in the example below).

Doing so allows an iterator to be consumed by the various syntaxes expecting iterables. Thus, it is seldom useful to implement the Iterator Protocol without also implementing Iterable.

    // Satisfies both the Iterator Protocol and Iterable
    const myIterator = {
        next: function() {
            // ...
        },
        [Symbol.iterator]: function() { return this; }
    };

However, when possible, it's better for `iterable[Symbol.iterator]` to return different iterators that always start from the beginning, like `Set.prototype[@@iterator]()` does.

## Examples using the iteration protocols

A [`String`](global_objects/string) is an example of a built-in iterable object:

    const someString = 'hi';
    console.log(typeof someString[Symbol.iterator]); // "function"

`String`'s [default iterator](global_objects/string/@@iterator) returns the string's code points one by one:

    const iterator = someString[Symbol.iterator]();
    console.log(iterator + ''); // "[object String Iterator]"

    console.log(iterator.next()); // { value: "h", done: false }
    console.log(iterator.next()); // { value: "i", done: false }
    console.log(iterator.next()); // { value: undefined, done: true }

Some built-in constructs—such as the [spread syntax](operators/spread_syntax)—use the same iteration protocol under the hood:

    console.log([...someString]); // ["h", "i"]

You can redefine the iteration behavior by supplying our own `@@iterator`:

    // need to construct a String object explicitly to avoid auto-boxing
    const someString = new String('hi');

    someString[Symbol.iterator] = function () {
      return {
        // this is the iterator object, returning a single element (the string "bye")
        next: function () {
          return this._first ? {
            value: 'bye',
            done: (this._first = false)
          } : {
            done: true
          }
        },
        _first: true
      };
    };

Notice how redefining `@@iterator` affects the behavior of built-in constructs that use the iteration protocol:

    console.log([...someString]); // ["bye"]
    console.log(someString + ''); // "hi"

## Iterable examples

### Built-in iterables

[`String`](global_objects/string), [`Array`](global_objects/array), [`TypedArray`](global_objects/typedarray), [`Map`](global_objects/map), and [`Set`](global_objects/set) are all built-in iterables, because each of their prototype objects implements an `@@iterator` method.

### User-defined iterables

You can make your own iterables like this:

    const myIterable = {};
    myIterable[Symbol.iterator] = function* () {
        yield 1;
        yield 2;
        yield 3;
    };
    console.log([...myIterable]); // [1, 2, 3]

### Built-in APIs accepting iterables

There are many APIs that accept iterables. Some examples include:

-   [`new Map([iterable])`](global_objects/map)
-   [`new WeakMap([iterable])`](global_objects/weakmap)
-   [`new Set([iterable])`](global_objects/set)
-   [`new WeakSet([iterable])`](global_objects/weakset)

<!-- -->

    new Map([[1, 'a'], [2, 'b'], [3, 'c']]).get(2); // "b"

    const myObj = {};

    new WeakMap([
        [{}, 'a'],
        [myObj, 'b'],
        [{}, 'c']
    ]).get(myObj);             // "b"

    new Set([1, 2, 3]).has(3); // true
    new Set('123').has('2');   // true

    new WeakSet(function* () {
        yield {}
        yield myObj
        yield {}
    }()).has(myObj);           // true

#### See also

-   [`Promise.all(iterable)`](global_objects/promise/all)
-   [`Promise.race(iterable)`](global_objects/promise/race)
-   [`Array.from(iterable)`](global_objects/array/from)

### Syntaxes expecting iterables

Some statements and expressions expect iterables, for example the [`for...of`](statements/for...of) loops, the [spread operator](operators/spread_syntax)), [`yield*`](operators/yield*), and [`destructuring assignment`](operators/destructuring_assignment):

    for (const value of ['a', 'b', 'c']) {
        console.log(value);
    }
    // "a"
    // "b"
    // "c"

    console.log([...'abc']);   // ["a", "b", "c"]

    function* gen() {
      yield* ['a', 'b', 'c'];
    }

    console.log(gen().next()); // { value: "a", done: false }

    [a, b, c] = new Set(['a', 'b', 'c']);
    console.log(a);            // "a"

### Non-well-formed iterables

If an iterable's `@@iterator` method doesn't return an iterator object, then it's considered a _non-well-formed_ iterable.

Using one is likely to result in runtime errors or buggy behavior:

    const nonWellFormedIterable = {};
    nonWellFormedIterable[Symbol.iterator] = () => 1;
    [...nonWellFormedIterable]; // TypeError: [] is not a function

## Iterator examples

### Simple iterator

    function makeIterator(array) {
      let nextIndex = 0
      return {
        next: function() {
          return nextIndex < array.length ? {
            value: array[nextIndex++],
            done: false
          } : {
            done: true
          };
        }
      };
    }

    const it = makeIterator(['yo', 'ya']);

    console.log(it.next().value); // 'yo'
    console.log(it.next().value); // 'ya'
    console.log(it.next().done);  // true

### Infinite iterator

    function idMaker() {
      let index = 0;
      return {
        next: function() {
          return {
            value: index++,
            done: false
          };
        }
      };
    }

    const it = idMaker();

    console.log(it.next().value); // '0'
    console.log(it.next().value); // '1'
    console.log(it.next().value); // '2'
    // ...

### With a generator

    function* makeSimpleGenerator(array) {
      let nextIndex = 0;
      while (nextIndex < array.length) {
        yield array[nextIndex++];
      }
    }

    const gen = makeSimpleGenerator(['yo', 'ya']);

    console.log(gen.next().value); // 'yo'
    console.log(gen.next().value); // 'ya'
    console.log(gen.next().done);  // true

    function* idMaker() {
      let index = 0;
      while (true) {
        yield index++;
      }
    }

    const it = idMaker()

    console.log(it.next().value); // '0'
    console.log(it.next().value); // '1'
    console.log(it.next().value); // '2'
    // ...

### With ES2015 class

    class SimpleClass {
      constructor(data) {
        this.data = data;
      }

      [Symbol.iterator]() {
        // Use a new index for each iterator. This makes multiple
        // iterations over the iterable safe for non-trivial cases,
        // such as use of break or nested looping over the same iterable.
        let index = 0;

        return {
          next: () => {
            if (index < this.data.length) {
              return {value: this.data[index++], done: false}
            } else {
              return {done: true}
            }
          }
        }
      }
    }

    const simple = new SimpleClass([1,2,3,4,5]);

    for (const val of simple) {
      console.log(val); // '1' '2' '3' '4' '5'
    }

## Is a generator object an iterator or an iterable?

A [generator object](global_objects/generator) is _both_ iterator and iterable:

    const aGeneratorObject = function* () {
      yield 1;
      yield 2;
      yield 3;
    }();

    console.log(typeof aGeneratorObject.next);
    // "function", because it has a next method, so it's an iterator

    console.log(typeof aGeneratorObject[Symbol.iterator]);
    // "function", because it has an @@iterator method, so it's an iterable

    console.log(aGeneratorObject[Symbol.iterator]() === aGeneratorObject);
    // true, because its @@iterator method returns itself (an iterator), so it's an well-formed iterable

    console.log([...aGeneratorObject]);
    // [1, 2, 3]

    console.log(Symbol.iterator in aGeneratorObject)
    // true, because @@iterator method is a property of aGeneratorObject

## See also

-   [the `function*` documentation](statements/function*)
-   [Iteration in the ECMAScript specification](https://tc39.es/ecma262/#sec-iteration)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols</a>

# Symbol.iterator

The well-known `Symbol.iterator` symbol specifies the default iterator for an object. Used by [`for...of`](../../statements/for...of).

## Description

Whenever an object needs to be iterated (such as at the beginning of a `for..of` loop), its `@@iterator` method is called with no arguments, and the returned **iterator** is used to obtain the values to be iterated.

Some built-in types have a default iteration behavior, while other types (such as [`Object`](../object)) do not. The built-in types with a `@@iterator` method are:

-   [`Array.prototype[@@iterator]()`](../array/@@iterator)
-   [`TypedArray.prototype[@@iterator]()`](../typedarray/@@iterator)
-   [`String.prototype[@@iterator]()`](../string/@@iterator)
-   [`Map.prototype[@@iterator]()`](../map/@@iterator)
-   [`Set.prototype[@@iterator]()`](../set/@@iterator)

See also [Iteration protocols](../../iteration_protocols) for more information.

Property attributes of `Symbol.iterator`

Writable

no

Enumerable

no

Configurable

no

## Examples

### User-defined iterables

We can make our own iterables like this:

    var myIterable = {}
    myIterable[Symbol.iterator] = function* () {
        yield 1;
        yield 2;
        yield 3;
    };
    [...myIterable] // [1, 2, 3]

Or iterables can be defined directly inside a class or object using a [computed property](../../operators/object_initializer#computed_property_names):

    class Foo {
      *[Symbol.iterator] () {
        yield 1;
        yield 2;
        yield 3;
      }
    }

    const someObj = {
      *[Symbol.iterator] () {
        yield 'a';
        yield 'b';
      }
    }

    console.log(...new Foo); // 1, 2, 3
    console.log(...someObj); // 'a', 'b'

### Non-well-formed iterables

If an iterable's `@@iterator` method does not return an iterator object, then it is a non-well-formed iterable. Using it as such is likely to result in runtime exceptions or buggy behavior:

    var nonWellFormedIterable = {}
    nonWellFormedIterable[Symbol.iterator] = () => 1
    [...nonWellFormedIterable] // TypeError: [] is not a function

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-symbol.iterator">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Symbol.iterator' in that specification.</span></a></td></tr></tbody></table>

`iterator`

43

12

36

No

30

10

43

43

36

30

10

4.0

## See also

-   [Iteration protocols](../../iteration_protocols)
-   [`Array.prototype[@@iterator]()`](../array/@@iterator)
-   [`TypedArray.prototype[@@iterator]()`](../typedarray/@@iterator)
-   [`String.prototype[@@iterator]()`](../string/@@iterator)
-   [`Map.prototype[@@iterator]()`](../map/@@iterator)
-   [`Set.prototype[@@iterator]()`](../set/@@iterator)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator</a>

# Array.prototype.join()

The `join()` method creates and returns a new string by concatenating all of the elements in an array (or an [array-like object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#working_with_array-like_objects)), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

## Syntax

    join()
    join(separator)

### Parameters

`separator` <span class="badge inline optional">Optional</span>  
Specifies a string to separate each pair of adjacent elements of the array. The separator is converted to a string if necessary. If omitted, the array elements are separated with a comma (","). If `separator` is an empty string, all elements are joined without any characters in between them.

### Return value

A string with all array elements joined. If `arr.length` is `0`, the empty string is returned.

## Description

The string conversions of all array elements are joined into one string.

**Warning:** If an element is `undefined`, `null` or an empty array `[]`, it is converted to an empty string.

## Examples

### Joining an array four different ways

The following example creates an array, `a`, with three elements, then joins the array four times: using the default separator, then a comma and a space, then a plus and an empty string.

    var a = ['Wind', 'Water', 'Fire'];
    a.join();      // 'Wind,Water,Fire'
    a.join(', ');  // 'Wind, Water, Fire'
    a.join(' + '); // 'Wind + Water + Fire'
    a.join('');    // 'WindWaterFire'

### Joining an array-like object

The following example joins array-like object (`arguments`), by calling [`Function.prototype.call`](../function/call) on `Array.prototype.join`.

    function f(a, b, c) {
      var s = Array.prototype.join.call(arguments);
      console.log(s); // '1,a,true'
    }
    f(1, 'a', true);
    //expected output: "1,a,true"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.join">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Array.prototype.join' in that specification.</span></a></td></tr></tbody></table>

`join`

1

12

1

5.5

4

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.split()`](../string/split)
-   [`Array.prototype.toString()`](tostring)
-   [`TypedArray.prototype.join()`](../typedarray/join)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join</a>

# JSON

The `JSON` object contains methods for parsing [JavaScript Object Notation](https://json.org/) ([JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON)) and converting values to JSON. It can't be called or constructed, and aside from its two method properties, it has no interesting functionality of its own.

## Description

### JavaScript and JSON differences

JSON is a syntax for serializing objects, arrays, numbers, strings, booleans, and [`null`](null). It is based upon JavaScript syntax but is distinct from it: some JavaScript is _not_ JSON.

**Objects and Arrays**  
Property names must be double-quoted strings; [trailing commas](../trailing_commas) are forbidden.

**Numbers**  
Leading zeros are prohibited. A decimal point must be followed by at least one digit. `NaN` and `Infinity` are unsupported.

**Any JSON text is a valid JavaScript expression...**  
...But only in JavaScript engines that have implemented the [proposal to make all JSON text valid ECMA-262](https://github.com/tc39/proposal-json-superset). In engines that haven't implemented the proposal, U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR are allowed in string literals and property keys in JSON; but their use in these features in JavaScript string literals is a [`SyntaxError`](syntaxerror).

Consider this example where [`JSON.parse()`](json/parse) parses the string as JSON and [`Global_Objects/eval`](eval) executes the string as JavaScript:

    let code = '"\u2028\u2029"'
    JSON.parse(code)  // evaluates to "\u2028\u2029" in all engines
    eval(code)        // throws a SyntaxError in old engines

Other differences include allowing only double-quoted strings and having no provisions for [`undefined`](undefined) or comments. For those who wish to use a more human-friendly configuration format based on JSON, there is [JSON5](https://json5.org/), used by the Babel compiler, and the more commonly used [YAML](https://en.wikipedia.org/wiki/YAML).

### Full JSON syntax

The full JSON syntax is as follows:

    JSON = null
        or true or false
        or JSONNumber
        or JSONString
        or JSONObject
        or JSONArray

    JSONNumber = - PositiveNumber
              or PositiveNumber
    PositiveNumber = DecimalNumber
                  or DecimalNumber . Digits
                  or DecimalNumber . Digits ExponentPart
                  or DecimalNumber ExponentPart
    DecimalNumber = 0
                 or OneToNine Digits
    ExponentPart = e Exponent
                or E Exponent
    Exponent = Digits
            or + Digits
            or - Digits
    Digits = Digit
          or Digits Digit
    Digit = 0 through 9
    OneToNine = 1 through 9

    JSONString = ""
              or " StringCharacters "
    StringCharacters = StringCharacter
                    or StringCharacters StringCharacter
    StringCharacter = any character
                      except " or \ or U+0000 through U+001F
                   or EscapeSequence
    EscapeSequence = \" or \/ or \\ or \b or \f or \n or \r or \t
                  or \u HexDigit HexDigit HexDigit HexDigit
    HexDigit = 0 through 9
            or A through F
            or a through f

    JSONObject = { }
              or { Members }
    Members = JSONString : JSON
           or Members , JSONString : JSON

    JSONArray = [ ]
             or [ ArrayElements ]
    ArrayElements = JSON
                 or ArrayElements , JSON

Insignificant [whitespace](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace) may be present anywhere except within a `JSONNumber` (numbers must contain no whitespace) or `JSONString` (where it is interpreted as the corresponding character in the string, or would cause an error). The tab character ([U+0009](https://unicode-table.com/en/0009/)), carriage return ([U+000D](https://unicode-table.com/en/000D/)), line feed ([U+000A](https://unicode-table.com/en/000A/)), and space ([U+0020](https://unicode-table.com/en/0020/)) characters are the only valid whitespace characters.

## Static methods

[`JSON.parse(text[, reviver])`](json/parse)  
Parse the string `text` as JSON, optionally transform the produced value and its properties, and return the value. Any violations of the JSON syntax, including those pertaining to the differences between JavaScript and JSON, cause a [`SyntaxError`](syntaxerror) to be thrown. The `reviver` option allows for interpreting what the `replacer` has used to stand in for other datatypes.

[`JSON.stringify(value[, replacer[, space]])`](json/stringify)  
Return a JSON string corresponding to the specified value, optionally including only certain properties or replacing property values in a user-defined manner. By default, all instances of [`undefined`](undefined) are replaced with [`null`](null), and other unsupported native data types are censored. The `replacer` option allows for specifying other behavior.

## Examples

### Example JSON

    {
      "browsers": {
        "firefox": {
          "name": "Firefox",
          "pref_url": "about:config",
          "releases": {
            "1": {
              "release_date": "2004-11-09",
              "status": "retired",
              "engine": "Gecko",
              "engine_version": "1.7"
            }
          }
        }
      }
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-json-object">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-json-object</span></a></td></tr></tbody></table>

`JSON`

3

12

3.5

8

10.5

4

≤37

18

4

11

4

1.0

`json_superset`

66

79

62

No

53

12

66

66

62

47

12

9.0

`parse`

3

12

3.5

8

10.5

4

≤37

18

4

11

4

1.0

`stringify`

3

12

3.5

8

10.5

4

≤37

18

4

11

4

1.0

## See also

-   [`Date.prototype.toJSON()`](date/tojson)
-   [JSON Diff](http://www.jsondiff.com/) checker
-   [JSON Beautifier/editor](https://jsonbeautifier.org/)
-   [JSON Parser](http://jsonparser.org/)
-   [JSON Validator](https://tools.learningcontainer.com/json-validator/)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON</a>

# SyntaxError: JSON.parse: bad parsing

The JavaScript exceptions thrown by [`JSON.parse()`](../global_objects/json/parse) occur when string failed to be parsed as JSON.

## Message

    SyntaxError: JSON.parse: unterminated string literal
    SyntaxError: JSON.parse: bad control character in string literal
    SyntaxError: JSON.parse: bad character in string literal
    SyntaxError: JSON.parse: bad Unicode escape
    SyntaxError: JSON.parse: bad escape character
    SyntaxError: JSON.parse: unterminated string
    SyntaxError: JSON.parse: no number after minus sign
    SyntaxError: JSON.parse: unexpected non-digit
    SyntaxError: JSON.parse: missing digits after decimal point
    SyntaxError: JSON.parse: unterminated fractional number
    SyntaxError: JSON.parse: missing digits after exponent indicator
    SyntaxError: JSON.parse: missing digits after exponent sign
    SyntaxError: JSON.parse: exponent part is missing a number
    SyntaxError: JSON.parse: unexpected end of data
    SyntaxError: JSON.parse: unexpected keyword
    SyntaxError: JSON.parse: unexpected character
    SyntaxError: JSON.parse: end of data while reading object contents
    SyntaxError: JSON.parse: expected property name or '}'
    SyntaxError: JSON.parse: end of data when ',' or ']' was expected
    SyntaxError: JSON.parse: expected ',' or ']' after array element
    SyntaxError: JSON.parse: end of data when property name was expected
    SyntaxError: JSON.parse: expected double-quoted property name
    SyntaxError: JSON.parse: end of data after property name when ':' was expected
    SyntaxError: JSON.parse: expected ':' after property name in object
    SyntaxError: JSON.parse: end of data after property value in object
    SyntaxError: JSON.parse: expected ',' or '}' after property value in object
    SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
    SyntaxError: JSON.parse: property names must be double-quoted strings
    SyntaxError: JSON.parse: expected property name or '}'
    SyntaxError: JSON.parse: unexpected character
    SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
    SyntaxError: JSON.parse Error: Invalid character at position {0} (Edge)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

[`JSON.parse()`](../global_objects/json/parse) parses a string as JSON. This string has to be valid JSON and will throw this error if incorrect syntax was encountered.

## Examples

### `JSON.parse()` does not allow trailing commas

Both lines will throw a SyntaxError:

    JSON.parse('[1, 2, 3, 4,]');
    JSON.parse('{"foo": 1,}');
    // SyntaxError JSON.parse: unexpected character
    // at line 1 column 14 of the JSON data

Omit the trailing commas to parse the JSON correctly:

    JSON.parse('[1, 2, 3, 4]');
    JSON.parse('{"foo": 1}');

### Property names must be double-quoted strings

You cannot use single-quotes around properties, like 'foo'.

    JSON.parse("{'foo': 1}");
    // SyntaxError: JSON.parse: expected property name or '}'
    // at line 1 column 2 of the JSON data

Instead write "foo":

    JSON.parse('{"foo": 1}');

### Leading zeros and decimal points

You cannot use leading zeros, like 01, and decimal points must be followed by at least one digit.

    JSON.parse('{"foo": 01}');
    // SyntaxError: JSON.parse: expected ',' or '}' after property value
    // in object at line 1 column 2 of the JSON data

    JSON.parse('{"foo": 1.}');
    // SyntaxError: JSON.parse: unterminated fractional number
    // at line 1 column 2 of the JSON data

Instead write just 1 without a zero and use at least one digit after a decimal point:

    JSON.parse('{"foo": 1}');
    JSON.parse('{"foo": 1.0}');

## See also

-   [`JSON`](../global_objects/json)
-   [`JSON.parse()`](../global_objects/json/parse)
-   [`JSON.stringify()`](../global_objects/json/stringify)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse</a>

# Symbol.keyFor()

The `Symbol.keyFor(sym)` method retrieves a shared symbol key from the global symbol registry for the given symbol.

## Syntax

    Symbol.keyFor(sym);

### Parameters

`sym`  
Symbol, required. The symbol to find a key for.

### Return value

A string representing the key for the given symbol if one is found on the global registry; otherwise, [`undefined`](../undefined).

## Examples

### Using keyFor()

    var globalSym = Symbol.for('foo'); // create a new global symbol
    Symbol.keyFor(globalSym); // "foo"

    var localSym = Symbol();
    Symbol.keyFor(localSym); // undefined

    // well-known symbols are not symbols registered
    // in the global symbol registry
    Symbol.keyFor(Symbol.iterator) // undefined

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-symbol.keyfor">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-symbol.keyfor</span></a></td></tr></tbody></table>

`keyFor`

40

12

36

No

27

9

40

40

36

27

9

4.0

## See also

-   [`Symbol.for()`](for)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/keyFor" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/keyFor</a>

# Object.keys()

The `Object.keys()` method returns an array of a given object's own enumerable property **names**, iterated in the same order that a normal loop would.

## Syntax

    Object.keys(obj)

### Parameters

`obj`  
The object of which the enumerable's own properties are to be returned.

### Return value

An array of strings that represent all the enumerable properties of the given object.

## Description

`Object.keys()` returns an array whose elements are strings corresponding to the enumerable properties found directly upon `object`. The ordering of the properties is the same as that given by looping over the properties of the object manually.

## Examples

### Using Object.keys

    // simple array
    const arr = ['a', 'b', 'c'];
    console.log(Object.keys(arr)); // console: ['0', '1', '2']

    // array-like object
    const obj = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.keys(obj)); // console: ['0', '1', '2']

    // array-like object with random key ordering
    const anObj = { 100: 'a', 2: 'b', 7: 'c' };
    console.log(Object.keys(anObj)); // console: ['2', '7', '100']

    // getFoo is a property which isn't enumerable
    const myObj = Object.create({}, {
      getFoo: {
        value: function () { return this.foo; }
      }
    });
    myObj.foo = 1;
    console.log(Object.keys(myObj)); // console: ['foo']

If you want _all_ properties—including non-enumerables—see [`Object.getOwnPropertyNames()`](getownpropertynames).

### Non-object coercion

In ES5, if the argument to this method is not an object (a primitive), then it will cause a [`TypeError`](../typeerror).

From ES2015 onwards, a non-object argument will be coerced to an object.

    // In ES5
    Object.keys('foo');  // TypeError: "foo" is not an object

    // In ES2015+
    Object.keys('foo');  // ["0", "1", "2"]

## Polyfill

To add compatible `Object.keys` support in older environments that do not natively support it, copy the following snippet:

    // From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
    if (!Object.keys) {
      Object.keys = (function() {
        'use strict';
        var hasOwnProperty = Object.prototype.hasOwnProperty,
            hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'),
            dontEnums = [
              'toString',
              'toLocaleString',
              'valueOf',
              'hasOwnProperty',
              'isPrototypeOf',
              'propertyIsEnumerable',
              'constructor'
            ],
            dontEnumsLength = dontEnums.length;

        return function(obj) {
          if (typeof obj !== 'function' && (typeof obj !== 'object' || obj === null)) {
            throw new TypeError('Object.keys called on non-object');
          }

          var result = [], prop, i;

          for (prop in obj) {
            if (hasOwnProperty.call(obj, prop)) {
              result.push(prop);
            }
          }

          if (hasDontEnumBug) {
            for (i = 0; i < dontEnumsLength; i++) {
              if (hasOwnProperty.call(obj, dontEnums[i])) {
                result.push(dontEnums[i]);
              }
            }
          }
          return result;
        };
      }());
    }

Please note that the above code includes non-enumerable keys in IE7 (and maybe IE8), when passing in an object from a different window.

For a simple Browser Polyfill, see [Javascript - Object.keys Browser Compatibility](https://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html).

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.keys">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.keys</span></a></td></tr></tbody></table>

`keys`

5

12

4

9

12

5

1

18

4

12

5

1.0

## See also

-   [Enumerability and ownership of properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
-   [`Object.prototype.propertyIsEnumerable()`](propertyisenumerable)
-   [`Object.create()`](create)
-   [`Object.getOwnPropertyNames()`](getownpropertynames)
-   [`Object.values()`](values)
-   [`Object.entries()`](entries)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys</a>

# label

The **labeled statement** can be used with [`break`](break) or [`continue`](continue) statements. It is prefixing a statement with an identifier which you can refer to.

## Syntax

    label :
      statement

`label`  
Any JavaScript identifier that is not a reserved word.

`statement`  
A JavaScript statement. `break` can be used with any labeled statement, and `continue` can be used with looping labeled statements.

## Description

You can use a label to identify a loop, and then use the `break` or `continue` statements to indicate whether a program should interrupt the loop or continue its execution.

Note that JavaScript has _no_ `goto` statement, you can only use labels with `break` or `continue`.

In [strict mode](../strict_mode) code, you can't use "`let`" as a label name. It will throw a [`SyntaxError`](../global_objects/syntaxerror) (let is a reserved identifier).

## Examples

### Using a labeled continue with for loops

    var i, j;

    loop1:
    for (i = 0; i < 3; i++) {      //The first for statement is labeled "loop1"
       loop2:
       for (j = 0; j < 3; j++) {   //The second for statement is labeled "loop2"
          if (i === 1 && j === 1) {
             continue loop1;
          }
          console.log('i = ' + i + ', j = ' + j);
       }
    }

    // Output is:
    //   "i = 0, j = 0"
    //   "i = 0, j = 1"
    //   "i = 0, j = 2"
    //   "i = 1, j = 0"
    //   "i = 2, j = 0"
    //   "i = 2, j = 1"
    //   "i = 2, j = 2"
    // Notice how it skips both "i = 1, j = 1" and "i = 1, j = 2"

### Using a labeled continue statement

Given an array of items and an array of tests, this example counts the number of items that passes all the tests.

    var itemsPassed = 0;
    var i, j;

    top:
    for (i = 0; i < items.length; i++) {
      for (j = 0; j < tests.length; j++) {
        if (!tests[j].pass(items[i])) {
          continue top;
        }
      }

      itemsPassed++;
    }

### Using a labeled break with for loops

    var i, j;

    loop1:
    for (i = 0; i < 3; i++) {      //The first for statement is labeled "loop1"
       loop2:
       for (j = 0; j < 3; j++) {   //The second for statement is labeled "loop2"
          if (i === 1 && j === 1) {
             break loop1;
          }
          console.log('i = ' + i + ', j = ' + j);
       }
    }

    // Output is:
    //   "i = 0, j = 0"
    //   "i = 0, j = 1"
    //   "i = 0, j = 2"
    //   "i = 1, j = 0"
    // Notice the difference with the previous continue example

### Using a labeled break statement

Given an array of items and an array of tests, this example determines whether all items pass all tests.

    var allPass = true;
    var i, j;

    top:
    for (i = 0; i < items.length; i++) {
      for (j = 0; j < tests.length; j++) {
        if (!tests[j].pass(items[i])) {
          allPass = false;
          break top;
        }
      }
    }

### Using a labeled block with break

You can use labels within simple blocks, but only `break` statements can make use of non-loop labels.

    foo: {
      console.log('face');
      break foo;
      console.log('this will not be executed');
    }
    console.log('swap');

    // this will log:

    // "face"
    // "swap"

### Labeled function declarations

Starting with ECMAScript 2015, labeled function declarations are now standardized for non-strict code in the [web compatibility annex of the specification](https://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations).

    L: function F() {}

In [strict mode](../strict_mode) code, however, this will throw a [`SyntaxError`](../global_objects/syntaxerror):

    'use strict';
    L: function F() {}
    // SyntaxError: functions cannot be labelled

[Generator functions](function*) can neither be labeled in strict code, nor in non-strict code:

    L: function* F() {}
    // SyntaxError: generator functions cannot be labelled

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-labelled-statements">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Labelled statement' in that specification.</span></a></td></tr></tbody></table>

`label`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`break`](break)
-   [`continue`](continue)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label</a>

# Intl.Locale.prototype.language

The `Intl.Locale.prototype.language` property is an accessor property that returns the language associated with the locale.

## Description

Language is one of the core features of a locale. The Unicode specification treats the language identifier of a locale as the language and the region together (to make a distinction between dialects and variations, e.g. British English vs. American English). The `language` property of a [`Locale`](../locale) returns strictly the locale's language subtag.

## Examples

### Setting the language in the locale identifer string argument

In order to be a valid Unicode locale identifier, a string must start with the language subtag. The main argument to the [`Locale`](locale) constructor must be a valid Unicode locale identifier, so whenever the constructor is used, it must be passed an identifier with a language subtag.

    let langStr = new Intl.Locale("en-Latn-US");

    console.log(langStr.language); // Prints "en"

### Overriding language via the configuration object

While the language subtag must be specified, the [`Locale`](../locale) constructor takes a configuration object, which can override the language subtag.

    let langObj = new Intl.Locale("en-Latn-US", {language: "es"});

    console.log(langObj.language); // Prints "es"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.Locale.prototype.language">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.Locale.prototype.language</span></a></td></tr></tbody></table>

`language`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl.Locale`](../locale)
-   [Unicode language subtag specification](https://www.unicode.org/reports/tr35/#unicode_language_subtag_validity)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/language" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/language</a>

# RegExp: lastIndex

`lastIndex` is a read/write integer property of [`RegExp`](../regexp) instances that specifies the index at which to start the next match.

Note that `lastIndex` is not a property of the [`RegExp`](../regexp) prototype but is instead only exposed from [`RegExp`](../regexp) instances.

Property attributes of `RegExp: lastIndex`

Writable

yes

Enumerable

no

Configurable

no

## Description

This property is set only if the regular expression instance used the `g` flag to indicate a global search, or the `y` flag to indicate a sticky search. The following rules apply:

-   If `lastIndex` is greater than the length of the string, [`test()`](test) and [`exec()`](exec) fail, then `lastIndex` is set to 0.
-   If `lastIndex` is equal to or less than the length of the string and if the regular expression matches the empty string, then the regular expression matches input starting from `lastIndex`.
-   If `lastIndex` is equal to the length of the string and if the regular expression does not match the empty string, then the regular expression mismatches input, and `lastIndex` is reset to 0.
-   Otherwise, `lastIndex` is set to the next position following the most recent match.

## Examples

### Using lastIndex

Consider the following sequence of statements:

    var re = /(hi)?/g;

Matches the empty string.

    console.log(re.exec('hi'));
    console.log(re.lastIndex);

Returns `["hi", "hi"]` with `lastIndex` equal to 2.

    console.log(re.exec('hi'));
    console.log(re.lastIndex);

Returns `["", undefined]`, an empty array whose zeroth element is the match string. In this case, the empty string because `lastIndex` was 2 (and still is 2) and `hi` has length 2.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-properties-of-regexp-instances">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-properties-of-regexp-instances</span></a></td></tr></tbody></table>

`lastIndex`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

## See also

-   [`RegExp.prototype.dotAll`](dotall)
-   [`RegExp.prototype.global`](global)
-   [`RegExp.prototype.hasIndices`](hasindices)
-   [`RegExp.prototype.ignoreCase`](ignorecase)
-   [`RegExp.prototype.multiline`](multiline)
-   [`RegExp.prototype.source`](source)
-   [`RegExp.prototype.sticky`](sticky)
-   [`RegExp.prototype.unicode`](unicode)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex</a>

# Array.prototype.lastIndexOf()

The `lastIndexOf()` method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at `fromIndex`.

## Syntax

    lastIndexOf(searchElement)
    lastIndexOf(searchElement, fromIndex)

### Parameters

`searchElement`  
Element to locate in the array.

`fromIndex` <span class="badge inline optional">Optional</span>  
The index at which to start searching backwards. Defaults to the array's length minus one (`arr.length - 1`), i.e. the whole array will be searched. If the index is greater than or equal to the length of the array, the whole array will be searched. If negative, it is taken as the offset from the end of the array. Note that even when the index is negative, the array is still searched from back to front. If the calculated index is less than 0, -1 is returned, i.e. the array will not be searched.

### Return value

The last index of the element in the array; **-1** if not found.

## Description

`lastIndexOf` compares `searchElement` to elements of the Array using [strict equality](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#using_the_equality_operators) (the same method used by the ===, or triple-equals, operator).

## Examples

### Using `lastIndexOf`

The following example uses `lastIndexOf` to locate values in an array.

    var numbers = [2, 5, 9, 2];
    numbers.lastIndexOf(2);     // 3
    numbers.lastIndexOf(7);     // -1
    numbers.lastIndexOf(2, 3);  // 3
    numbers.lastIndexOf(2, 2);  // 0
    numbers.lastIndexOf(2, -2); // 0
    numbers.lastIndexOf(2, -1); // 3

### Finding all the occurrences of an element

The following example uses `lastIndexOf` to find all the indices of an element in a given array, using [`push`](push) to add them to another array as they are found.

    var indices = [];
    var array = ['a', 'b', 'a', 'c', 'a', 'd'];
    var element = 'a';
    var idx = array.lastIndexOf(element);
    while (idx != -1) {
      indices.push(idx);
      idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
    }

    console.log(indices);
    // [4, 2, 0]

Note that we have to handle the case `idx == 0` separately here because the element will always be found regardless of the `fromIndex` parameter if it is the first element of the array. This is different from the [`indexOf`](indexof) method.

## Polyfill

`lastIndexOf` was added to the ECMA-262 standard in the 5th edition; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of `lastIndexOf` in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming [`Object`](../object), [`TypeError`](../typeerror), [`Number`](../number), [`Math.floor`](../math/floor), [`Math.abs`](../math/abs), and [`Math.min`](../math/min) have their original values.

    // Production steps of ECMA-262, Edition 5, 15.4.4.15
    // Reference: https://es5.github.io/#x15.4.4.15
    if (!Array.prototype.lastIndexOf) {
      Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
        'use strict';

        if (this === void 0 || this === null) {
          throw new TypeError();
        }

        var n, k,
          t = Object(this),
          len = t.length >>> 0;
        if (len === 0) {
          return -1;
        }

        n = len - 1;
        if (arguments.length > 1) {
          n = Number(arguments[1]);
          if (n != n) {
            n = 0;
          }
          else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {
            n = (n > 0 || -1) * Math.floor(Math.abs(n));
          }
        }

        for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) {
          if (k in t && t[k] === searchElement) {
            return k;
          }
        }
        return -1;
      };
    }

Again, note that this implementation aims for absolute compatibility with `lastIndexOf` in Firefox and the SpiderMonkey JavaScript engine, including in several cases which are arguably edge cases. If you intend to use this in real-world applications, you may be able to calculate `from` with less complicated code if you ignore those cases.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.lastindexof">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.lastindexof</span></a></td></tr></tbody></table>

`lastIndexOf`

1

12

1.5

9

9.5

3

≤37

18

4

10.1

1

1.0

## See also

-   [`Array.prototype.indexOf()`](indexof)
-   [`TypedArray.prototype.lastIndexOf()`](../typedarray/lastindexof)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf</a>

# Left shift (&lt;&lt;)

The `<<` shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.

## Syntax

    a << b

## Description

This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.

For example, `9 << 2` yields 36:

    .    9 (base 10): 00000000000000000000000000001001 (base 2)
                      --------------------------------
    9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)

Bitwise shifting any number `x` to the left by `y` bits yields `x * 2 ** y`.  
So e.g.: `9 << 3` translates to: `9 * (2 ** 3) = 9 * (8) = 72`.

## Examples

### Using left shift

    9 << 3; // 72

    // 9 * (2 ** 3) = 9 * (8) = 72

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-left-shift-operator">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-left-shift-operator</span></a></td></tr></tbody></table>

`Left_shift`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Bitwise operators in the JS guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)
-   [Left shift assignment operator](left_shift_assignment)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Left_shift" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Left_shift</a>

# Left shift assignment (&lt;&lt;=)

The left shift assignment operator (`<<=`) moves the specified amount of bits to the left and assigns the result to the variable.

## Syntax

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

## Examples

### Using left shift assignment

    let a = 5;
    // 00000000000000000000000000000101

    a <<= 2; // 20
    // 00000000000000000000000000010100

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-assignment-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-assignment-operators</span></a></td></tr></tbody></table>

`Left_shift_assignment`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Assignment operators in the JS guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
-   [Left shift operator](left_shift)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment</a>

# Array.prototype.length

The `length` property of an object which is an instance of type `Array` sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array.

## Description

The value of the `length` property is an integer with a positive sign and a value less than 2 to the 32nd power (2<sup>32</sup>).

    var namelistA = new Array(4294967296); //2 to the 32nd power = 4294967296
    var namelistC = new Array(-100) //negative sign

    console.log(namelistA.length); //RangeError: Invalid array length
    console.log(namelistC.length); //RangeError: Invalid array length

    var namelistB = [];
    namelistB.length = Math.pow(2,32)-1; //set array length less than 2 to the 32nd power
    console.log(namelistB.length);

    //4294967295

You can set the `length` property to truncate an array at any time. When you extend an array by changing its `length` property, the number of actual elements increases; for example, if you set `length` to 3 when it is currently 2, the array now contains 3 elements, which causes the third element to be a non-iterable empty slot.

    const arr = [1, 2];
    console.log(arr);
    // [ 1, 2 ]

    arr.length = 5; // set array length to 5 while currently 2.
    console.log(arr);
    // [ 1, 2, <3 empty items> ]

    arr.forEach(element => console.log(element));
    // 1
    // 2

As you can see, the `length` property does not necessarily indicate the number of defined values in the array. See also [Relationship between `length` and numerical properties](../array#relationship_between_length_and_numerical_properties).

Property attributes of `Array.prototype.length`

Writable

yes

Enumerable

no

Configurable

no

-   `Writable`: If this attribute set to `false`, the value of the property cannot be changed.
-   `Configurable`: If this attribute set to `false`, any attempts to delete the property or change its attributes (`Writable`, `Configurable`, or `Enumerable`) will fail.
-   `Enumerable`: If this attribute set to `true`, the property will be iterated over during [for](../../statements/for) or [for..in](../../statements/for...in) loops.

## Examples

### Iterating over an array

In the following example, the array `numbers` is iterated through by looking at the `length` property. The value in each element is then doubled.

    var numbers = [1, 2, 3, 4, 5];
    var length = numbers.length;
    for (var i = 0; i < length; i++) {
      numbers[i] *= 2;
    }
    // numbers is now [2, 4, 6, 8, 10]

### Shortening an array

The following example shortens the array `numbers` to a length of 3 if the current length is greater than 3.

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

    if (numbers.length > 3) {
      numbers.length = 3;
    }

    console.log(numbers); // [1, 2, 3]
    console.log(numbers.length); // 3

### Create empty array of fixed length

    var numbers = [];
    numbers.length = 3;
    console.log(numbers); // [undefined, undefined, undefined]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-properties-of-array-instances-length">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-properties-of-array-instances-length</span></a></td></tr></tbody></table>

`length`

1

12

1

4

4

1

≤37

18

4

10.1

1

1.0

## See also

-   [`Array`](../array)
-   [RangeError: invalid array length](../../errors/invalid_array_length)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length</a>

# Less than (&lt;)

The less than operator (`<`) returns `true` if the left operand is less than the right operand, and `false` otherwise.

## Syntax

     x < y

## Description

The operands are compared using the [Abstract Relational Comparison](https://tc39.es/ecma262/#sec-abstract-relational-comparison) algorithm, which is roughly summarised below:

-   First, objects are converted to primitives using `Symbol.ToPrimitive` with the `hint` parameter be `'number'`.
-   If both values are strings, they are compared as strings, based on the values of the Unicode code points they contain.
-   Otherwise JavaScript attempts to convert non-numeric types to numeric values:
    -   Boolean values `true` and `false` are converted to 1 and 0 respectively.
    -   `null` is converted to 0.
    -   `undefined` is converted to `NaN`.
    -   Strings are converted based on the values they contain, and are converted as `NaN` if they do not contain numeric values.
-   If either value is `NaN`, the operator returns `false`.
-   Otherwise the values are compared as numeric values.

## Examples

### String to string comparison

    console.log("a" < "b");        // true
    console.log("a" < "a");        // false
    console.log("a" < "3");        // false

### String to number comparison

    console.log("5" < 3);          // false
    console.log("3" < 3);          // false
    console.log("3" < 5);          // true

    console.log("hello" < 5);      // false
    console.log(5 < "hello");      // false

    console.log("5" < 3n);         // false
    console.log("3" < 5n);         // true

### Number to Number comparison

    console.log(5 < 3);            // false
    console.log(3 < 3);            // false
    console.log(3 < 5);            // true

### Number to BigInt comparison

    console.log(5n < 3);           // false
    console.log(3 < 5n);           // true

### Comparing Boolean, null, undefined, NaN

    console.log(true < false);     // false
    console.log(false < true);     // true

    console.log(0 < true);         // true
    console.log(true < 1);         // false

    console.log(null < 0);         // false
    console.log(null < 1);         // true

    console.log(undefined < 3);    // false
    console.log(3 < undefined);    // false

    console.log(3 < NaN);          // false
    console.log(NaN < 3);          // false

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-relational-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-relational-operators</span></a></td></tr></tbody></table>

`Less_than`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Greater than operator](greater_than)
-   [Greater than or equal operator](greater_than_or_equal)
-   [Less than or equal operator](less_than_or_equal)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than</a>

# Less than or equal (&lt;=)

The less than or equal operator (`<=`) returns `true` if the left operand is less than or equal to the right operand, and `false` otherwise.

## Syntax

     x <= y

## Description

The operands are compared using the [Abstract Relational Comparison](https://tc39.es/ecma262/#sec-abstract-relational-comparison) algorithm. See the documentation for the [Less than](less_than) operator for a summary of this algorithm.

## Examples

### String to string comparison

    console.log("a" <= "b");     // true
    console.log("a" <= "a");     // true
    console.log("a" <= "3");     // false

### String to number comparison

    console.log("5" <= 3);       // false
    console.log("3" <= 3);       // true
    console.log("3" <= 5);       // true

    console.log("hello" <= 5);   // false
    console.log(5 <= "hello");   // false

### Number to Number comparison

    console.log(5 <= 3);         // false
    console.log(3 <= 3);         // true
    console.log(3 <= 5);         // true

### Number to BigInt comparison

    console.log(5n <= 3);        // false
    console.log(3 <= 3n);        // true
    console.log(3 <= 5n);        // true

### Comparing Boolean, null, undefined, NaN

    console.log(true <= false);  // false
    console.log(true <= true);   // true
    console.log(false <= true);  // true

    console.log(true <= 0);      // false
    console.log(true <= 1);      // true

    console.log(null <= 0);      // true
    console.log(1 <= null);      // false

    console.log(undefined <= 3); // false
    console.log(3 <= undefined); // false

    console.log(3 <= NaN);       // false
    console.log(NaN <= 3);       // false

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-relational-operators">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Relational operators' in that specification.</span></a></td></tr></tbody></table>

`Less_than_or_equal`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Greater than operator](greater_than)
-   [Greater than or equal operator](greater_than_or_equal)
-   [Less than operator](less_than)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal</a>

# let

The `let` statement declares a block-scoped local variable, optionally initializing it to a value.

## Syntax

    let name1 [= value1] [, name2 [= value2]] [, ..., nameN [= valueN];

### Parameters

`nameN`  
The names of the variable or variables to declare. Each must be a legal JavaScript identifier.

` value``N ` <span class="badge inline optional">Optional</span>  
For each variable declared, you may optionally specify its initial value to any legal JavaScript expression.

Alternatively, the [Destructuring Assignment](../operators/destructuring_assignment) syntax can also be used to declare variables.

    let { bar } = foo; // where foo = { bar:10, baz:12 };
    /* This creates a variable with the name 'bar', which has a value of 10 */

## Description

`let` allows you to declare variables that are limited to the scope of a [block](block) statement, or expression on which it is used, unlike the [`var`](var) keyword, which declares a variable globally, or locally to an entire function regardless of block scope. The other difference between [`var`](var) and `let` is that the latter is initialized to a value only when a [parser evaluates it (see below)](#temporal_dead_zone).

Just like [`const`](const#description) the `let` does _not_ create properties of the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object when declared globally (in the top-most scope).

An explanation of why the name "**let**" was chosen can be found [here](https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri).

**Note:** Many issues with `let` variables can be avoided by declaring them at the top of the scope in which they are used (doing so may impact readibility).

## Examples

### Scoping rules

Variables declared by `let` have their scope in the block for which they are declared, as well as in any contained sub-blocks. In this way, `let` works very much like `var`. The main difference is that the scope of a `var` variable is the entire enclosing function:

    function varTest() {
      var x = 1;
      {
        var x = 2;  // same variable!
        console.log(x);  // 2
      }
      console.log(x);  // 2
    }

    function letTest() {
      let x = 1;
      {
        let x = 2;  // different variable
        console.log(x);  // 2
      }
      console.log(x);  // 1
    }

At the top level of programs and functions, `let`, unlike `var`, does not create a property on the global object. For example:

    var x = 'global';
    let y = 'global';
    console.log(this.x); // "global"
    console.log(this.y); // undefined

### Emulating private members

In dealing with [constructors](https://developer.mozilla.org/en-US/docs/Glossary/Constructor) it is possible to use the `let` bindings to share one or more private members without using [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures):

    var Thing;

    {
      let privateScope = new WeakMap();
      let counter = 0;

      Thing = function() {
        this.someProperty = 'foo';

        privateScope.set(this, {
          hidden: ++counter,
        });
      };

      Thing.prototype.showPublic = function() {
        return this.someProperty;
      };

      Thing.prototype.showPrivate = function() {
        return privateScope.get(this).hidden;
      };
    }

    console.log(typeof privateScope);
    // "undefined"

    var thing = new Thing();

    console.log(thing);
    // Thing {someProperty: "foo"}

    thing.showPublic();
    // "foo"

    thing.showPrivate();
    // 1

The same privacy pattern with closures over local variables can be created with `var`, but those need a function scope (typically an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) in the module pattern) instead of just a block scope like in the example above.

### Redeclarations

Redeclaring the same variable within the same function or block scope raises a [`SyntaxError`](../global_objects/syntaxerror).

    if (x) {
      let foo;
      let foo; // SyntaxError thrown.
    }

You may encounter errors in [`switch`](switch) statements because there is only one block.

    let x = 1;
    switch(x) {
      case 0:
        let foo;
        break;

      case 1:
        let foo; // SyntaxError for redeclaration.
        break;
    }

However, it's important to point out that a block nested inside a case clause will create a new block scoped lexical environment, which will not produce the redeclaration errors shown above.

    let x = 1;

    switch(x) {
      case 0: {
        let foo;
        break;
      }
      case 1: {
        let foo;
        break;
      }
    }

### Temporal dead zone (TDZ)

`let` variables cannot be read/written until they have been fully initialized, which happens when they are declared (if no initial value is specified on declaration, the variable is initialized with a value of `undefined`). Accessing the variable before the initialization results in a [`ReferenceError`](../global_objects/referenceerror).

**Note:** This differs from [`var`](var#var_hoisting) variables, which will return a value of `undefined` if they are accessed before they are declared.

The variable is said to be in a "temporal dead zone" (TDZ) from the start of the block until the initialization has completed.

    { // TDZ starts at beginning of scope
      console.log(bar); // undefined
      console.log(foo); // ReferenceError
      var bar = 1;
      let foo = 2; // End of TDZ (for foo)
    }

The term "temporal" is used because the zone depends on the order of execution (time) rather than the order in which the code is written (position). For example, the code below works because, even though the function that uses the `let` variable appears before the variable is declared, the function is _called_ outside the TDZ.

    {
        // TDZ starts at beginning of scope
        const func = () => console.log(letVar); // OK

        // Within the TDZ letVar access throws `ReferenceError`

        let letVar = 3; // End of TDZ (for letVar)
        func(); // Called outside TDZ!
    }

#### The TDZ and `typeof`

Using the `typeof` operator for a `let` variable in its TDZ will throw a [`ReferenceError`](../global_objects/referenceerror):

    // results in a 'ReferenceError'
    console.log(typeof i);
    let i = 10;

This differs from using `typeof` for undeclared variables, and variables that hold a value of `undefined`:

    // prints out 'undefined'
    console.log(typeof undeclaredVariable);

#### TDZ combined with lexical scoping

The following code results in a `ReferenceError` at the line shown:

    function test(){
       var foo = 33;
       if(foo) {
          let foo = (foo + 55); // ReferenceError
       }
    }
    test();

The `if` block is evaluated because the outer `var foo` has a value. However due to lexical scoping this value is not available inside the block: the identifier `foo` _inside_ the `if` block is the `let foo`. The expression `(foo + 55)` throws a `ReferenceError` because initialization of `let foo` has not completed — it is still in the temporal dead zone.

This phenomenon can be confusing in a situation like the following. The instruction `let n of n.a` is already inside the private scope of the for loop's block. So, the identifier `n.a` is resolved to the property '`a`' of the '`n`' object located in the first part of the instruction itself (`let n`).

This is still in the temporal dead zone as its declaration statement has not been reached and terminated.

    function go(n) {
      // n here is defined!
      console.log(n); // Object {a: [1,2,3]}

      for (let n of n.a) { // ReferenceError
        console.log(n);
      }
    }

    go({a: [1, 2, 3]});

### Other situations

When used inside a block, `let` limits the variable's scope to that block. Note the difference between `var`, whose scope is inside the function where it is declared.

    var a = 1;
    var b = 2;

    if (a === 1) {
      var a = 11; // the scope is global
      let b = 22; // the scope is inside the if-block

      console.log(a);  // 11
      console.log(b);  // 22
    }

    console.log(a); // 11
    console.log(b); // 2

However, this combination of `var` and `let` declaration below is a [`SyntaxError`](../global_objects/syntaxerror) due to `var` being hoisted to the top of the block. This results in an implicit re-declaration of the variable.

    let x = 1;

    {
      var x = 2; // SyntaxError for re-declaration
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-let-and-const-declarations">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-let-and-const-declarations</span></a></td></tr></tbody></table>

`let`

49

48-49

Support outside of [strict mode](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode).

41-49

[Strict mode](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode) is required.

14

12-14

In Edge 12 and 13, `let` within a `for` loop initializer does not create a separate variable for each loop iteration as defined by ES2015. Instead, it behaves as though the loop were wrapped in a scoping block with the `let` immediately before the loop.

44

\["Prior to Firefox 44, `let` is only available to code blocks in HTML wrapped in a `<script type=\"application/javascript;version=1.7\">` block (or higher version) and has different semantics (e.g. no temporal dead zone).", "Prior to Firefox 46, a `TypeError` is thrown on redeclaration instead of a `SyntaxError`.", "Firefox 54 adds support of `let` in workers."\]

11

In Internet Explorer, `let` within a `for` loop initializer does not create a separate variable for each loop iteration as defined by ES2015. Instead, it behaves as though the loop were wrapped in a scoping block with the `let` immediately before the loop.

17

10

49

41-49

[Strict mode](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode) is required.

49

48-49

Support outside of [strict mode](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode).

41-49

[Strict mode](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode) is required.

44

\["Prior to Firefox 44, `let` is only available to code blocks in HTML wrapped in a `<script type=\"application/javascript;version=1.7\">` block (or higher version) and has different semantics (e.g. no temporal dead zone).", "Prior to Firefox 46, a `TypeError` is thrown on redeclaration instead of a `SyntaxError`.", "Firefox 54 adds support of `let` in workers."\]

18

10

5.0

4.0-5.0

[Strict mode](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode) is required.

## See also

-   [`var`](var)
-   [`const`](const)
-   [ES6 In Depth: `let` and `const`](https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/)
-   [Breaking changes in `let` and `const` in Firefox 44](https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/)
-   [You Don't Know JS: Scope & Closures: Chapter 3: Function vs. Block Scope](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/scope%20%26%20closures/ch3.md)
-   [StackOverflow: What is the Temporal Dead Zone](https://stackoverflow.com/a/33198850/1125029)?
-   [StackOverflow: What is the difference between using `let` and `var`?](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let</a>

# Lexical grammar

This page describes JavaScript's lexical grammar. The source text of ECMAScript scripts gets scanned from left to right and is converted into a sequence of input elements which are tokens, control characters, line terminators, comments or [white space](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace). ECMAScript also defines certain keywords and literals and has rules for automatic insertion of semicolons to end statements.

## Control characters

Control characters have no visual representation but are used to control the interpretation of the text.

<table><caption>Unicode format-control characters</caption><thead><tr class="header"><th>Code point</th><th>Name</th><th>Abbreviation</th><th>Description</th></tr></thead><tbody><tr class="odd"><td><code>U+200C</code></td><td>Zero width non-joiner</td><td>&lt;ZWNJ&gt;</td><td>Placed between characters to prevent being connected into ligatures in certain languages (<a href="https://en.wikipedia.org/wiki/Zero-width_non-joiner">Wikipedia</a>).</td></tr><tr class="even"><td><code>U+200D</code></td><td>Zero width joiner</td><td>&lt;ZWJ&gt;</td><td>Placed between characters that would not normally be connected in order to cause the characters to be rendered using their connected form in certain languages (<a href="https://en.wikipedia.org/wiki/Zero-width_joiner">Wikipedia</a>).</td></tr><tr class="odd"><td><code>U+FEFF</code></td><td>Byte order mark</td><td>&lt;BOM&gt;</td><td>Used at the start of the script to mark it as Unicode and the text's byte order (<a href="https://en.wikipedia.org/wiki/Byte_order_mark">Wikipedia</a>).</td></tr></tbody></table>

## White space

[White space](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace) characters improve the readability of source text and separate tokens from each other. These characters are usually unnecessary for the functionality of the code. [Minification tools](https://en.wikipedia.org/wiki/Minification_%28programming%29) are often used to remove whitespace in order to reduce the amount of data that needs to be transferred.

<table><caption>White space characters</caption><thead><tr class="header"><th>Code point</th><th>Name</th><th>Abbreviation</th><th>Description</th><th>Escape sequence</th></tr></thead><tbody><tr class="odd"><td>U+0009</td><td>Character tabulation</td><td>&lt;HT&gt;</td><td>Horizontal tabulation</td><td>\t</td></tr><tr class="even"><td>U+000B</td><td>Line tabulation</td><td>&lt;VT&gt;</td><td>Vertical tabulation</td><td>\v</td></tr><tr class="odd"><td>U+000C</td><td>Form feed</td><td>&lt;FF&gt;</td><td>Page breaking control character (<a href="https://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipedia</a>).</td><td>\f</td></tr><tr class="even"><td>U+0020</td><td>Space</td><td>&lt;SP&gt;</td><td>Normal space</td><td></td></tr><tr class="odd"><td>U+00A0</td><td>No-break space</td><td>&lt;NBSP&gt;</td><td>Normal space, but no point at which a line may break</td><td></td></tr><tr class="even"><td>Others</td><td>Other Unicode space characters</td><td>&lt;USP&gt;</td><td><a href="https://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_in_Unicode">Spaces in Unicode on Wikipedia</a></td><td></td></tr></tbody></table>

## Line terminators

In addition to [white space](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace) characters, line terminator characters are used to improve the readability of the source text. However, in some cases, line terminators can influence the execution of JavaScript code as there are a few places where they are forbidden. Line terminators also affect the process of [automatic semicolon insertion](#automatic_semicolon_insertion). Line terminators are matched by the **\\s** class in [regular expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).

Only the following Unicode code points are treated as line terminators in ECMAScript, other line breaking characters are treated as white space (for example, Next Line, NEL, U+0085 is considered as white space).

<table><caption>Line terminator characters</caption><thead><tr class="header"><th>Code point</th><th>Name</th><th>Abbreviation</th><th>Description</th><th>Escape sequence</th></tr></thead><tbody><tr class="odd"><td>U+000A</td><td>Line Feed</td><td>&lt;LF&gt;</td><td>New line character in UNIX systems.</td><td>\n</td></tr><tr class="even"><td>U+000D</td><td>Carriage Return</td><td>&lt;CR&gt;</td><td>New line character in Commodore and early Mac systems.</td><td>\r</td></tr><tr class="odd"><td>U+2028</td><td>Line Separator</td><td>&lt;LS&gt;</td><td><a href="https://en.wikipedia.org/wiki/Newline">Wikipedia</a></td><td></td></tr><tr class="even"><td>U+2029</td><td>Paragraph Separator</td><td>&lt;PS&gt;</td><td><a href="https://en.wikipedia.org/wiki/Newline">Wikipedia</a></td><td></td></tr></tbody></table>

## Comments

Comments are used to add hints, notes, suggestions, or warnings to JavaScript code. This can make it easier to read and understand. They can also be used to disable code to prevent it from being executed; this can be a valuable debugging tool.

JavaScript has two long-standing ways to add comments to code.

The first way is the `//` comment**;** this makes all text following it on the same line into a comment. For example:

    function comment() {
      // This is a one line JavaScript comment
      console.log('Hello world!');
    }
    comment();

The second way is the `/* */` style, which is much more flexible.

For example, you can use it on a single line:

    function comment() {
      /* This is a one line JavaScript comment */
      console.log('Hello world!');
    }
    comment();

You can also make multiple-line comments, like this:

    function comment() {
      /* This comment spans multiple lines. Notice
         that we don't need to end the comment until we're done. */
      console.log('Hello world!');
    }
    comment();

You can also use it in the middle of a line, if you wish, although this can make your code harder to read so it should be used with caution:

    function comment(x) {
      console.log('Hello ' + x /* insert the value of x */ + ' !');
    }
    comment('world');

In addition, you can use it to disable code to prevent it from running, by wrapping code in a comment, like this:

    function comment() {
      /* console.log('Hello world!'); */
    }
    comment();

In this case, the `console.log()` call is never issued, since it's inside a comment. Any number of lines of code can be disabled this way.

## Hashbang comments

A specialized third comment syntax, the **hashbang comment**, is in the process of being standardized in ECMAScript (see the [Hashbang Grammar proposal](https://github.com/tc39/proposal-hashbang)).

A hashbang comment behaves exactly like a single line-only (`//`) comment. Instead, it begins with `#!` and **is only valid at the absolute start of a script or module**. Note also that no whitespace of any kind is permitted before the `#!`. The comment consists of all the characters after `#!` up to the end of the first line; only one such comment is permitted.

The hashbang comment specifies the path to a specific JavaScript interpreter that you want to use to execute the script. An example is as follows:

    #!/usr/bin/env node

    console.log("Hello world");

**Note:** Hashbang comments in JavaScript mimic [shebangs in Unix](<https://en.wikipedia.org/wiki/Shebang_(Unix)>) used to run files with proper interpreter.

**Warning:** Although [BOM](https://en.wikipedia.org/wiki/Byte_order_mark) before hashbang comment will work in a browser it is not advised to use BOM in a script with hasbang. BOM will not work when you try to run the script in Unix/Linux. So use UTF-8 without BOM if you want to run scripts directly from shell.

You must only use the `#!` comment style to specify a JavaScript interpreter. In all other cases just use a `//` comment (or mulitiline comment).

## Keywords

### Reserved keywords as of ECMAScript 2015

-   [`break`](statements/break)
-   [`case`](statements/switch)
-   [`catch`](statements/try...catch)
-   [`class`](statements/class)
-   [`const`](statements/const)
-   [`continue`](statements/continue)
-   [`debugger`](statements/debugger)
-   [`default`](statements/switch)
-   [`delete`](operators/delete)
-   [`do`](statements/do...while)
-   [`else`](statements/if...else)
-   [`export`](statements/export)
-   [`extends`](statements/class)
-   [`finally`](statements/try...catch)
-   [`for`](statements/for)
-   [`function`](statements/function)
-   [`if`](statements/if...else)
-   [`import`](statements/import)
-   [`in`](operators/in)
-   [`instanceof`](operators/instanceof)
-   [`new`](operators/new)
-   [`return`](statements/return)
-   [`super`](operators/super)
-   [`switch`](statements/switch)
-   [`this`](operators/this)
-   [`throw`](statements/throw)
-   [`try`](statements/try...catch)
-   [`typeof`](operators/typeof)
-   [`var`](statements/var)
-   [`void`](operators/void)
-   [`while`](statements/while)
-   [`with`](statements/with)
-   [`yield`](operators/yield)

### Future reserved keywords

The following are reserved as future keywords by the ECMAScript specification. They have no special functionality at present, but they might at some future time, so they cannot be used as identifiers.

These are always reserved:

-   `enum`

The following are only reserved when they are found in strict mode code:

-   `implements`
-   `interface`
-   [`let`](statements/let)
-   `package`
-   `private`
-   `protected`
-   `public`
-   `static`
-   [`yield`](operators/yield)

The following are only reserved when they are found in module code:

-   `await`

#### Future reserved keywords in older standards

The following are reserved as future keywords by older ECMAScript specifications (ECMAScript 1 till 3).

-   `abstract`
-   `boolean`
-   `byte`
-   `char`
-   `double`
-   `final`
-   `float`
-   `goto`
-   `int`
-   `long`
-   `native`
-   `short`
-   `synchronized`
-   `throws`
-   `transient`
-   `volatile`

Additionally, the literals `null`, `true`, and `false` cannot be used as identifiers in ECMAScript.

### Reserved word usage

Reserved words actually only apply to *Identifier*s (vs. *IdentifierName*s) . As described in [es5.github.com/\#A.1](https://es5.github.com/#A.1), these are all *IdentifierName*s which do not exclude _ReservedWords_.

    a.import
    a['import']
    a = { import: 'test' }.

On the other hand the following is illegal because it's an _Identifier_, which is an _IdentifierName_ without the reserved words. Identifiers are used for _FunctionDeclaration_, _FunctionExpression_, _VariableDeclaration_ and so on. _IdentifierNames_ are used for _MemberExpression_, _CallExpression_ and so on.

    function import() {} // Illegal.

### Identifiers with special meanings

A few identifiers have a special meaning in some contexts without being keywords of any kind. They include:

-   [`arguments`](functions/arguments)
-   [`get`](functions/get)
-   [`set`](functions/set)

## Literals

### Null literal

See also [`null`](global_objects/null) for more information.

    null

### Boolean literal

See also [`Boolean`](global_objects/boolean) for more information.

    true
    false

### Numeric literals

The [`Number`](global_objects/number) and [`BigInt`](global_objects/bigint) types use numeric literals.

#### Decimal

    1234567890
    42

    // Caution when using with a leading zero:
    0888 // 888 parsed as decimal
    0777 // parsed as octal, 511 in decimal

Note that decimal literals can start with a zero (`0`) followed by another decimal digit, but If all digits after the leading `0` are smaller than 8, the number is interpreted as an octal number. This won't throw in JavaScript, see [bug 957513](https://bugzilla.mozilla.org/show_bug.cgi?id=957513). See also the page about [`parseInt()`](global_objects/parseint)

##### Exponential

The decimal exponential literal is specified by the following format: `beN`; where `b` is a base number (integer or floating), followed by `e` char (which serves as separator or _exponent indicator_) and `N`, which is _exponent_ or _power_ number – a signed integer (as per 2019 ECMA-262 specs):

    0e-5   // => 0
    0e+5   // => 0
    5e1    // => 50
    175e-2 // => 1.75
    1e3    // => 1000
    1e-3   // => 0.001

#### Binary

Binary number syntax uses a leading zero followed by a lowercase or uppercase Latin letter "B" (`0b` or `0B`). Because this syntax is new in ECMAScript 2015, see the browser compatibility table, below. If the digits after the `0b` are not 0 or 1, the following [`SyntaxError`](global_objects/syntaxerror) is thrown: "Missing binary digits after 0b".

    var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
    var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
    var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607

#### Octal

Octal number syntax uses a leading zero followed by a lowercase or uppercase Latin letter "O" (`0o` or `0O)`. Because this syntax is new in ECMAScript 2015, see the browser compatibility table, below. If the digits after the `0o` are outside the range (01234567), the following [`SyntaxError`](global_objects/syntaxerror) is thrown: "Missing octal digits after 0o".

    var n = 0O755; // 493
    var m = 0o644; // 420

    // Also possible with just a leading zero (see note about decimals above)
    0755
    0644

#### Hexadecimal

Hexadecimal number syntax uses a leading zero followed by a lowercase or uppercase Latin letter "X" (`0x` or `0X)`. If the digits after 0x are outside the range (0123456789ABCDEF), the following [`SyntaxError`](global_objects/syntaxerror) is thrown: "Identifier starts immediately after numeric literal".

    0xFFFFFFFFFFFFFFFFF // 295147905179352830000
    0x123456789ABCDEF   // 81985529216486900
    0XA                 // 10

#### BigInt literal

The [`BigInt`](global_objects/bigint) type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. BigInt literals are created by appending `n` to the end of an integer.

    123456789123456789n     // 123456789123456789
    0o777777777777n         // 68719476735
    0x123456789ABCDEFn      // 81985529216486895‬
    0b11101001010101010101n // 955733

Note that legacy octal numbers with just a leading zero won't work for `BigInt`:

    // 0755n
    // SyntaxError: invalid BigInt syntax

For octal `BigInt` numbers, always use zero followed by the letter "o" (uppercase or lowercase):

    0o755n

For more information about `BigInt`, see also [JavaScript data structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#bigint_type).

#### Numeric separators

To improve readability for numeric literals, underscores (`_`, `U+005F`) can be used as separators:

    // separators in decimal numbers
    1_000_000_000_000
    1_050.95

    // separators in binary numbers
    0b1010_0001_1000_0101

    // separators in octal numbers
    0o2_2_5_6

    // separators in hex numbers
    0xA0_B0_C0

    // separators in BigInts
    1_000_000_000_000_000_000_000n

Note these limitations:

    // More than one underscore in a row is not allowed
    100__000; // SyntaxError

    // Not allowed at the end of numeric literals
    100_; // SyntaxError

    // Can not be used after leading 0
    0_1; // SyntaxError

### Object literals

See also [`Object`](global_objects/object) and [Object initializer](operators/object_initializer) for more information.

    var o = { a: 'foo', b: 'bar', c: 42 };

    // shorthand notation. New in ES2015
    var a = 'foo', b = 'bar', c = 42;
    var o = {a, b, c};

    // instead of
    var o = { a: a, b: b, c: c };

### Array literals

See also [`Array`](global_objects/array) for more information.

    [1954, 1974, 1990, 2014]

### String literals

A string literal is zero or more Unicode code points enclosed in single or double quotes. Unicode code points may also be represented by an escape sequence. All code points may appear literally in a string literal except for these closing quote code points:

-   U+005C \\ (backslash),
-   U+000D &lt;CR&gt;,
-   and U+000A &lt;LF&gt;.

Prior to the [proposal to make all JSON text valid ECMA-262](https://github.com/tc39/proposal-json-superset), U+2028 &lt;LS&gt; and U+2029 &lt;PS&gt;, were also disallowed from appearing unescaped in string literals.

Any code points may appear in the form of an escape sequence. String literals evaluate to ECMAScript String values. When generating these String values Unicode code points are UTF-16 encoded.

    'foo'
    "bar"

#### Hexadecimal escape sequences

Hexadecimal escape sequences consist of `\x` followed by exactly two hexadecimal digits representing a code unit or code point in the range 0x0000 to 0x00FF.

    '\xA9' // "©"

#### Unicode escape sequences

A Unicode escape sequence consists of exactly four hexadecimal digits following `\u`. It represents a code unit in the UTF-16 encoding. For code points U+0000 to U+FFFF, the code unit is equal to the code point. Code points U+10000 to U+10FFFF require two escape sequences representing the two code units (a surrogate pair) used to encode the character; the surrogate pair is distinct from the code point.

See also [`String.fromCharCode()`](global_objects/string/fromcharcode) and [`String.prototype.charCodeAt()`](global_objects/string/charcodeat).

    '\u00A9' // "©" (U+A9)

#### Unicode code point escapes

A Unicode code point escape consists of `\u{`, followed by a code point in hexadecimal base, followed by `}`. The value of the hexadecimal digits must be in the range 0 and 0x10FFFF inclusive. Code points in the range U+10000 to U+10FFFF do not need to be represented as a surrogate pair. Code point escapes were added to JavaScript in ECMAScript 2015 (ES6).

See also [`String.fromCodePoint()`](global_objects/string/fromcodepoint) and [`String.prototype.codePointAt()`](global_objects/string/codepointat).

    '\u{2F804}' // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)

    // the same character represented as a surrogate pair
    '\uD87E\uDC04'

### Regular expression literals

See also [`RegExp`](global_objects/regexp) for more information.

    /ab+c/g

    // An "empty" regular expression literal
    // The empty non-capturing group is necessary
    // to avoid ambiguity with single-line comments.
    /(?:)/

### Template literals

See also [template strings](template_literals) for more information.

    `string text`

    `string text line 1
     string text line 2`

    `string text ${expression} string text`

    tag `string text ${expression} string text`

## Automatic semicolon insertion

Some [JavaScript statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) must be terminated with semicolons and are therefore affected by automatic semicolon insertion (ASI):

-   Empty statement
-   `let`, `const`, variable statement
-   `import`, `export`, module declaration
-   Expression statement
-   `debugger`
-   `continue`, `break`, `throw`
-   `return`

The ECMAScript specification mentions [three rules of semicolon insertion](https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion).

1. A semicolon is inserted before, when a [Line terminator](#line_terminators) or "}" is encountered that is not allowed by the grammar.

    { 1
    2 } 3

    // is transformed by ASI into:

    { 1
    ;2 ;} 3;

2. A semicolon is inserted at the end, when the end of the input stream of tokens is detected and the parser is unable to parse the single input stream as a complete program.

Here `++` is not treated as a [postfix operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#increment) applying to variable `b`, because a line terminator occurs between `b` and `++`.

    a = b
    ++c

    // is transformend by ASI into

    a = b;
    ++c;

3. A semicolon is inserted at the end, when a statement with restricted productions in the grammar is followed by a line terminator. These statements with "no LineTerminator here" rules are:

-   PostfixExpressions (`++` and `--`)
-   `continue`
-   `break`
-   `return`
-   `yield`, `yield*`
-   `module`

<!-- -->

    return
    a + b

    // is transformed by ASI into

    return;
    a + b;

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-ecmascript-language-lexical-grammar">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Lexical Grammar' in that specification.</span></a></td></tr></tbody></table>

`array_literals`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`binary_numeric_literals`

41

12

25

No

28

9

41

41

25

28

9

4.0

`boolean_literals`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`decimal_numeric_literals`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`hashbang_comments`

74

79

67

No

62

No

74

74

67

53

No

No

`hexadecimal_escape_sequences`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`hexadecimal_numeric_literals`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`null_literal`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`numeric_separators`

75

79

70

No

62

13

75

75

79

No

13

No

`octal_numeric_literals`

41

12

25

No

28

9

41

41

25

28

9

4.0

`regular_expression_literals`

1

12

1

4

5

1

1

18

4

10.1

1

1.0

`string_literals`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`unicode_escape_sequences`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`unicode_point_escapes`

44

12

40

No

31

9

44

44

40

32

9

4.0

`shorthand_object_literals`

43

12

33

No

30

9

43

43

33

30

9

4.0

`template_literals`

41

12

34

No

28

9

41

41

34

28

9

4.0

`trailing_commas`

1

12

1

9

9.5

1

1

18

4

10.1

1

1.0

## See also

-   [Jeff Walden: Binary and octal numbers](https://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/)
-   [Mathias Bynens: JavaScript character escape sequences](https://mathiasbynens.be/notes/javascript-escapes)
-   [`Boolean`](global_objects/boolean)
-   [`Number`](global_objects/number)
-   [`RegExp`](global_objects/regexp)
-   [`String`](global_objects/string)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar</a>

# Error.prototype.lineNumber

**Non-standard**

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The `lineNumber` property contains the line number in the file that raised this error.

## Examples

### Using lineNumber

    var e = new Error('Could not parse input');
    throw e;
    console.log(e.lineNumber) // 2

### Alternative example using error event

    window.addEventListener('error', function(e) {
      console.log(e.lineNumber); // 5
    });
    var e = new Error('Could not parse input');
    throw e;

This is not a standard feature and lacks widespread support. See the browser compatibility table below.

## Specifications

Not part of any standard.

`lineNumber`

No

No

1

No

No

No

No

No

4

No

No

No

## See also

-   [`Error.prototype.stack`](stack)
-   [`Error.prototype.columnNumber`](columnnumber)
-   [`Error.prototype.fileName`](filename)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/lineNumber" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/lineNumber</a>

# String.prototype.link()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `link()` method creates a string representing the code for an [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) HTML element to be used as a hypertext link to another URL.

## Syntax

    link(url)

### Parameters

`url`  
Any string that specifies the `href` attribute of the `<a>` element; it should be a valid URL (relative or absolute), with any `&` characters escaped as `&amp;`, and any `"` characters escaped as `&quot;`.

### Return value

A string containing an [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) HTML element.

## Description

Use the `link()` method to create an HTML snippet for a hypertext link. The returned string can then be added to the document via [`document.write()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/write) or [`element.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML).

Links created with the `link()` method become elements in the `links` array of the `document` object. See [`document.links`](https://developer.mozilla.org/en-US/docs/Web/API/Document/links).

## Examples

### Using link()

The following example displays the word "MDN" as a hypertext link that returns the user to the Mozilla Developer Network.

    var hotText = 'MDN';
    var url = 'https://developer.mozilla.org/';

    console.log('Click to return to ' + hotText.link(url));
    // Click to return to <a href="https://developer.mozilla.org/">MDN</a>

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.link">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'String.prototype.link' in that specification.</span></a></td></tr></tbody></table>

`link`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.anchor()`](anchor)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/link" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/link</a>

# WebAssembly.LinkError

The `WebAssembly.LinkError` object indicates an error during module instantiation (besides [traps](https://webassembly.org/docs/semantics/#traps) from the start function).

## Constructor

[`WebAssembly.LinkError()`](linkerror/linkerror)  
Creates a new `WebAssembly.LinkError` object.

## Instance properties

[`WebAssembly.LinkError.prototype.message`](../error/message)  
Error message. Although ECMA-262 specifies that [`URIError`](../urierror) should provide its own `message` property, in [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), it inherits [`Error.prototype.message`](../error/message).

[`WebAssembly.LinkError.prototype.name`](../error/name)  
Error name. Inherited from [`Error`](../error).

[`WebAssembly.LinkError.prototype.fileName`](../error/filename)  
Path to file that raised this error. Inherited from [`Error`](../error).

[`WebAssembly.LinkError.prototype.lineNumber`](../error/linenumber)  
Line number in file that raised this error. Inherited from [`Error`](../error).

[`WebAssembly.LinkError.prototype.columnNumber`](../error/columnnumber)  
Column number in line that raised this error. Inherited from [`Error`](../error).

[`WebAssembly.LinkError.prototype.stack`](../error/stack)  
Stack trace. Inherited from [`Error`](../error).

## Instance methods

[`WebAssembly.LinkError.prototype.toSource()`](../error/tosource)  
Returns code that could eval to the same error. Inherited from [`Error`](../error).

[`WebAssembly.LinkError.prototype.toString()`](../error/tostring)  
Returns a string representing the specified `Error` object.. Inherited from [`Error`](../error).

## Examples

### Creating a new LinkError instance

The following snippet creates a new `LinkError` instance, and logs its details to the console:

    try {
      throw new WebAssembly.LinkError('Hello', 'someFile', 10);
    } catch (e) {
      console.log(e instanceof LinkError); // true
      console.log(e.message);                 // "Hello"
      console.log(e.name);                    // "LinkError"
      console.log(e.fileName);                // "someFile"
      console.log(e.lineNumber);              // 10
      console.log(e.columnNumber);            // 0
      console.log(e.stack);                   // returns the location where the code was run
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#exceptiondef-linkerror">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#exceptiondef-linkerror</span></a></td></tr><tr class="even"><td><a href="https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard">ECMAScript Language Specification (ECMAScript)
<br/>

<span class="small">#sec-native-error-types-used-in-this-standard</span></a></td></tr></tbody></table>

`LinkError`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

`LinkError`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError</a>

# Intl.ListFormat

The `Intl.ListFormat` object enables language-sensitive list formatting.

## Constructor

[`Intl.ListFormat()`](listformat/listformat)  
Creates a new `Intl.ListFormat` object.

## Static methods

[`Intl.ListFormat.supportedLocalesOf()`](listformat/supportedlocalesof)  
Returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale.

## Instance methods

[`Intl.ListFormat.prototype.format()`](listformat/format)  
Returns a language-specific formatted string representing the elements of the list.

[`Intl.ListFormat.prototype.formatToParts()`](listformat/formattoparts)  
Returns an array of objects representing the different components that can be used to format a list of values in a locale-aware fashion.

## Examples

### Using format

The following example shows how to create a List formatter using the English language.

    const list = ['Motorcycle', 'Bus', 'Car'];

     console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list));
    // > Motorcycle, Bus and Car

     console.log(new Intl.ListFormat('en-GB', { style: 'short', type: 'disjunction' }).format(list));
    // > Motorcycle, Bus or Car

     console.log(new Intl.ListFormat('en-GB', { style: 'narrow', type: 'unit' }).format(list));
    // > Motorcycle Bus Car

### Using formatToParts

The following example shows how to create a List formatter returning formatted parts

    const list = ['Motorcycle', 'Bus', 'Car'];
    console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).formatToParts(list));

    // [ { "type": "element", "value": "Motorcycle" },
    //   { "type": "literal", "value": ", " },
    //   { "type": "element", "value": "Bus" },
    //   { "type": "literal", "value": ", and " },
    //   { "type": "element", "value": "Car" } ];

## Polyfill

[formatjs Intl.ListFormat polyfill](https://formatjs.io/docs/polyfills/intl-listformat)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#listformat-objects">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#listformat-objects</span></a></td></tr></tbody></table>

`ListFormat`

72

79

78

No

60

14.1

72

72

79

51

14.5

No

`ListFormat`

72

79

78

No

60

14.1

72

72

79

51

14.5

No

`format`

72

79

78

No

60

14.1

72

72

79

51

14.5

No

`formatToParts`

72

79

78

No

60

14.1

72

72

79

51

14.5

No

`resolvedOptions`

72

79

78

No

60

14.1

72

72

79

51

14.5

No

`supportedLocalesOf`

72

79

78

No

60

14.1

72

72

79

51

14.5

No

## See also

-   [`Intl`](../intl)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat</a>

# Math.LN10

The `Math.LN10` property represents the natural logarithm of 10, approximately 2.302:

` M``a``t``h``.``L``N``10 ` = ln (10) ≈ 2.302

Property attributes of `Math.LN10`

Writable

no

Enumerable

no

Configurable

no

## Description

Because `LN10` is a static property of `Math`, you always use it as `Math.LN10`, rather than as a property of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.LN10

The following function returns the natural log of 10:

    function getNatLog10() {
      return Math.LN10;
    }

    getNatLog10(); // 2.302585092994046

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.ln10">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.ln10</span></a></td></tr></tbody></table>

`LN10`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.exp()`](exp)
-   [`Math.log()`](log)
-   [`Math.log10()`](log10)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/LN10" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/LN10</a>

# Math.LN2

The `Math.LN2` property represents the natural logarithm of 2, approximately 0.693:

` M``a``t``h``.``L``N``2 ` = ln (2) ≈ 0.693

Property attributes of `Math.LN2`

Writable

no

Enumerable

no

Configurable

no

## Description

Because `LN2` is a static property of `Math`, you always use it as `Math.LN2`, rather than as a property of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.LN2

The following function returns the natural log of 2:

    function getNatLog2() {
      return Math.LN2;
    }

    getNatLog2(); // 0.6931471805599453

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.ln2">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.ln2</span></a></td></tr></tbody></table>

`LN2`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.exp()`](exp)
-   [`Math.log()`](log)
-   [`Math.log2()`](log2)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/LN2" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/LN2</a>

# Atomics.load()

The static ` Atomics``.load() ` method returns a value at a given position in the array.

## Syntax

    Atomics.load(typedArray, index)

### Parameters

`typedArray`  
An integer typed array. One of [`Int8Array`](../int8array), [`Uint8Array`](../uint8array), [`Int16Array`](../int16array), [`Uint16Array`](../uint16array), [`Int32Array`](../int32array), [`Uint32Array`](../uint32array), [`BigInt64Array`](../bigint64array), or [`BigUint64Array`](../biguint64array).

`index`  
The position in the `typedArray` to load from.

### Return value

The value at the given position (`typedArray[index]`).

### Exceptions

-   Throws a [`TypeError`](../typeerror), if `typedArray` is not one of the allowed integer types.
-   Throws a [`RangeError`](../rangeerror), if `index` is out of bounds in the `typedArray`.

## Examples

### Using `load`

    const sab = new SharedArrayBuffer(1024);
    const ta = new Uint8Array(sab);

    Atomics.add(ta, 0, 12);
    Atomics.load(ta, 0); // 12

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-atomics.load">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-atomics.load</span></a></td></tr></tbody></table>

`load`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

## See also

-   [`Atomics`](../atomics)
-   [`Atomics.store()`](store)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/load" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/load</a>

# Intl.Locale

The `Intl.Locale` object is a standard built-in property of the Intl object that represents a Unicode locale identifier.

## Description

The `Intl.Locale` object was created to allow for easier manipulation of Unicode locales. Unicode represents locales with a string, called a _locale identifier_. The locale identifier consists of a _language identifier_ and _extension tags_. Language identifiers are the core of the locale, consisting of _language_, _script_, and _region subtags_. Additional information about the locale is stored in the optional _extension tags_. Extension tags hold information about locale aspects such as calendar type, clock type, and numbering system type.

Traditionally, the Intl API used strings to represent locales, just as Unicode does. This is a simple and lightweight solution that works well. Adding a Locale class, however, adds ease of parsing and manipulating the language, script, and region, as well as extension tags.

## Constructor

[`Intl.Locale()`](locale/locale)  
Creates a new `Locale` object.

## Instance properties

[`Intl.Locale.prototype.baseName`](locale/basename)  
Returns basic, core information about the `Locale` in the form of a substring of the complete data string.

[`Intl.Locale.prototype.calendar`](locale/calendar)  
Returns the part of the `Locale` that indicates the Locale's calendar era.

[`Intl.Locale.prototype.caseFirst`](locale/casefirst)  
Returns whether case is taken into account for the locale's collation rules.

[`Intl.Locale.prototype.collation`](locale/collation)  
Returns the collation type for the `Locale`, which is used to order strings according to the locale's rules.

[`Intl.Locale.prototype.hourCycle`](locale/hourcycle)  
Returns the time keeping format convention used by the locale.

[`Intl.Locale.prototype.language`](locale/language)  
Returns the language associated with the locale.

[`Intl.Locale.prototype.numberingSystem`](locale/numberingsystem)  
Returns the numeral system used by the locale.

[`Intl.Locale.prototype.numeric`](locale/numeric)  
Returns whether the locale has special collation handling for numeric characters.

[`Intl.Locale.prototype.region`](locale/region)  
Returns the region of the world (usually a country) associated with the locale.

[`Intl.Locale.prototype.script`](locale/script)  
Returns the script used for writing the particular language used in the locale.

## Instance methods

[`Intl.Locale.prototype.maximize()`](locale/maximize)  
Gets the most likely values for the language, script, and region of the locale based on existing values.

[`Intl.Locale.prototype.minimize()`](locale/minimize)  
Gets the most likely values for the language, script, and region of the locale based on existing values.

[`Intl.Locale.prototype.toString()`](locale/tostring)  
Returns the Locale's full locale identifier string.

## Examples

### Basic usage

At its very simplest, the [`Intl.Locale`](locale/locale) constructor takes a locale identifier string as its argument:

    let us = new Intl.Locale('en-US');

### Using the Locale constructor with an options object

The constructor also takes an optional configuration object argument, which can contain any of several extension types. For example, set the [`hourCycle`](locale/hourcycle) property of the configuration object to your desired hour cycle type, and then pass it into the constructor:

    let us12hour = new Intl.Locale("en-US", {hourCycle: "h12"});
    console.log(us12hour.hourCycle); // Prints "h12"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#locale-objects">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#locale-objects</span></a></td></tr></tbody></table>

`Locale`

74

79

75

No

62

14

74

74

79

53

14

11.0

`Locale`

74

79

75

No

62

14

74

74

79

53

14

11.0

`baseName`

74

79

75

No

62

14

74

74

79

53

14

11.0

`calendar`

74

79

75

No

62

14

74

74

79

53

14

11.0

`caseFirst`

74

79

75

No

62

14

74

74

79

53

14

11.0

`collation`

74

79

75

No

62

14

74

74

79

53

14

11.0

`hourCycle`

74

79

75

No

62

14

74

74

79

53

14

11.0

`language`

74

79

75

No

62

14

74

74

79

53

14

11.0

`maximize`

74

79

75

No

62

14

74

74

79

53

14

11.0

`minimize`

74

79

75

No

62

14

74

74

79

53

14

11.0

`numberingSystem`

74

79

75

No

62

14

74

74

79

53

14

11.0

`numeric`

74

79

75

No

62

14

74

74

79

53

14

11.0

`region`

74

79

75

No

62

14

74

74

79

53

14

11.0

`script`

74

79

75

No

62

14

74

74

79

53

14

11.0

`toString`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl`](../intl)
-   [The Intl.Locale Polyfill](https://formatjs.io/docs/polyfills/intl-locale)
-   [Unicode locale identifiers spec](https://www.unicode.org/reports/tr35/#Canonical_Unicode_Locale_Identifiers)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale</a>

# String.prototype.localeCompare()

The `localeCompare()` method returns a number indicating whether a reference string comes before, or after, or is the same as the given string in sort order.

The new `locales` and `options` arguments let applications specify the language whose sort order should be used and customize the behavior of the function. In older implementations, which ignore the `locales` and `options` arguments, the locale and sort order used are entirely implementation-dependent.

## Syntax

    localeCompare(compareString)
    localeCompare(compareString, locales)
    localeCompare(compareString, locales, options)

### Parameters

`compareString`  
The string against which the `referenceStr` is compared.

`locales` and `options`  
These arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. In implementations which ignore the `locales` and `options` arguments, the locale used and the form of the string returned are entirely implementation-dependent.

See the [`Intl.Collator()` constructor](../intl/collator/collator) for details on these parameters and how to use them.

### Return value

A **negative** number if `referenceStr` occurs before `compareString`; **positive** if the `referenceStr` occurs after `compareString`; `0` if they are equivalent.

## Description

Returns an integer indicating whether the `referenceStr` comes before, after or is equivalent to the `compareString`.

-   Negative when the `referenceStr` occurs before `compareString`
-   Positive when the `referenceStr` occurs after `compareString`
-   Returns `0` if they are equivalent

**Warning:** Do not rely on exact return values of `-1` or `1`!

Negative and positive integer results vary between browsers (as well as between browser versions) because the W3C specification only mandates negative and positive values. Some browsers may return `-2` or `2`, or even some other negative or positive value.

## Performance

When comparing large numbers of strings, such as in sorting large arrays, it is better to create an [`Intl.Collator`](../intl/collator) object and use the function provided by its [`compare`](../intl/collator/compare) property.

## Examples

### Using `localeCompare()`

    // The letter "a" is before "c" yielding a negative value
    'a'.localeCompare('c'); // -2 or -1 (or some other negative value)

    // Alphabetically the word "check" comes after "against" yielding a positive value
    'check'.localeCompare('against'); // 2 or 1 (or some other positive value)

    // "a" and "a" are equivalent yielding a neutral value of zero
    'a'.localeCompare('a'); // 0

### Sort an array

`localeCompare()` enables case-insensitive sorting for an array.

    let items = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu'];
    items.sort( (a, b) => a.localeCompare(b, 'fr', {ignorePunctuation: true}));
    // ['Adieu', 'café', 'Cliché', 'communiqué', 'Premier', 'réservé']

### Check browser support for extended arguments

The `locales` and `options` arguments are not supported in all browsers yet.

To check whether an implementation supports them, use the `"i"` argument (a requirement that illegal language tags are rejected) and look for a [`RangeError`](../rangeerror) exception:

    function localeCompareSupportsLocales() {
      try {
        'foo'.localeCompare('bar', 'i');
      } catch (e) {
        return e.name === 'RangeError';
      }
      return false;
    }

### Using `locales`

The results provided by `localeCompare()` vary between languages. In order to get the sort order of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the `locales` argument:

    console.log('ä'.localeCompare('z', 'de')); // a negative value: in German, ä sorts before z
    console.log('ä'.localeCompare('z', 'sv')); // a positive value: in Swedish, ä sorts after z

### Using `options`

The results provided by `localeCompare()` can be customized using the `options` argument:

    // in German, ä has a as the base letter
    console.log('ä'.localeCompare('a', 'de', { sensitivity: 'base' })); // 0

    // in Swedish, ä and a are separate base letters
    console.log('ä'.localeCompare('a', 'sv', { sensitivity: 'base' })); // a positive value

### Numeric sorting

    // by default, "2" > "10"
    console.log("2".localeCompare("10")); // 1

    // numeric using options:
    console.log("2".localeCompare("10", undefined, {numeric: true})); // -1

    // numeric using locales tag:
    console.log("2".localeCompare("10", "en-u-kn-true")); // -1

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.localecompare">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.localecompare</span></a></td></tr><tr class="even"><td><a href="https://tc39.es/ecma402/#sup-String.prototype.localeCompare">ECMAScript Internationalization API Specification (ECMAScript Internationalization API)
<br/>

<span class="small">#sup-String.prototype.localeCompare</span></a></td></tr></tbody></table>

`localeCompare`

1

12

1

5.5

7

3

1

18

4

10.1

1

1.0

`locales`

24

12

29

11

15

10

No

26

56

No

10

1.5

`options`

24

12

29

11

15

10

No

26

56

No

10

1.5

## See also

-   [`Intl.Collator`](../intl/collator)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare</a>

# Math.log()

The `Math.log()` function returns the natural logarithm (base [`e`](e)) of a number, that is

∀*x* &gt; 0, `Math.log` ` (``x``) ` = ln (_x_) = the unique *y* such that *e*<sup>_y_</sup> = *x*

The JavaScript `Math.log()` function is equivalent to _ln(x)_ in mathematics.

## Syntax

    Math.log(x)

### Parameters

`x`  
A number.

### Return value

The natural logarithm (base [`e`](e)) of the given number. If the number is negative, [`NaN`](../nan) is returned.

## Description

If the value of `x` is 0, the return value is always [`-Infinity`](../number/negative_infinity).

If the value of `x` is negative, the return value is always [`NaN`](../nan).

Because `log()` is a static method of `Math`, you always use it as `Math.log()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

If you need the natural log of 2 or 10, use the constants [`Math.LN2`](ln2) or [`Math.LN10`](ln10). If you need a logarithm to base 2 or 10, use [`Math.log2()`](log2) or [`Math.log10()`](log10). If you need a logarithm to other bases, use Math.log(x) / Math.log(otherBase) as in the example below; you might want to precalculate 1 / Math.log(otherBase).

## Examples

### Using Math.log()

    Math.log(-1); // NaN, out of range
    Math.log(0);  // -Infinity
    Math.log(1);  // 0
    Math.log(10); // 2.302585092994046

### Using Math.log() with a different base

The following function returns the logarithm of `y` with base `x` (ie. log<sub>_x_</sub>_y_):

    function getBaseLog(x, y) {
      return Math.log(y) / Math.log(x);
    }

If you run `getBaseLog(10, 1000)` it returns `2.9999999999999996` due to floating-point rounding, which is very close to the actual answer of 3.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.log">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.log</span></a></td></tr></tbody></table>

`log`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.exp()`](exp)
-   [`Math.log1p()`](log1p)
-   [`Math.log10()`](log10)
-   [`Math.log2()`](log2)
-   [`Math.pow()`](pow)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log</a>

# Math.log10()

The `Math.log10()` function returns the base 10 logarithm of a number, that is

∀*x* &gt; 0, `Math.log10` ` (``x``) ` = log<sub>10</sub>(_x_) = the unique *y* such that 10<sup>_y_</sup> = *x*

## Syntax

    Math.log10(x)

### Parameters

`x`  
A number.

### Return value

The base 10 logarithm of the given number. If the number is negative, [`NaN`](../nan) is returned.

## Description

If the value of `x` is less than 0, the return value is always [`NaN`](../nan).

Because `log10()` is a static method of `Math`, you always use it as `Math.log10()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

This function is the equivalent of Math.log(x) / Math.log(10). For log10(e) use the constant [`Math.LOG10E`](log10e) which is 1 / [`Math.LN10`](ln10).

## Examples

### Using Math.log10()

    Math.log10(2);      // 0.3010299956639812
    Math.log10(1);      // 0
    Math.log10(0);      // -Infinity
    Math.log10(-2);     // NaN
    Math.log10(100000); // 5

## Polyfill

This can be emulated with the following function:

    Math.log10 = Math.log10 || function(x) {
      return Math.log(x) * Math.LOG10E;
    };

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.log10">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.log10</span></a></td></tr></tbody></table>

`log10`

38

12

25

No

25

8

38

38

25

25

8

3.0

## See also

-   [`Math.exp()`](exp)
-   [`Math.log()`](log)
-   [`Math.log1p()`](log1p)
-   [`Math.log2()`](log2)
-   [`Math.pow()`](pow)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log10" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log10</a>

# Math.LOG10E

The `Math.LOG10E` property represents the base 10 logarithm of e, approximately 0.434:

` M``a``t``h``.``L``O``G``10``E ` = log<sub>10</sub>(_e_) ≈ 0.434

Property attributes of `Math.LOG10E`

Writable

no

Enumerable

no

Configurable

no

## Description

Because `LOG10E` is a static property of `Math`, you always use it as `Math.LOG10E`, rather than as a property of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.LOG10E

The following function returns the base 10 logarithm of e:

    function getLog10e() {
      return Math.LOG10E;
    }

    getLog10e(); // 0.4342944819032518

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.log10e">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.log10e</span></a></td></tr></tbody></table>

`LOG10E`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.exp()`](exp)
-   [`Math.log()`](log)
-   [`Math.log10()`](log10)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/LOG10E" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/LOG10E</a>

# Math.log1p()

The `Math.log1p()` function returns the natural logarithm (base [`e`](e)) of 1 + a number, that is

∀*x* &gt;  − 1, `Math.log1p` ` (``x``) ` = ln (1 + *x*)

## Syntax

    Math.log1p(x)

### Parameters

`x`  
A number.

### Return value

The natural logarithm (base [`e`](e)) of **1** plus the given number. If the number is less than **-1**, [`NaN`](../nan) is returned.

## Description

For very small values of _x_, adding 1 can reduce or eliminate precision. The double floats used in JS give you about 15 digits of precision. 1 + 1e-15 = 1.000000000000001, but 1 + 1e-16 = 1.000000000000000 and therefore exactly 1.0 in that arithmetic, because digits past 15 are rounded off.

When you calculate log(1 + x), you should get an answer very close to x, if x is small (that's why these are called 'natural' logarithms). If you calculate Math.log(1 + 1.1111111111e-15) you should get an answer close to 1.1111111111e-15. Instead, you will end up taking the logarithm of 1.00000000000000111022 (the roundoff is in binary so sometimes it gets ugly), so you get the answer 1.11022...e-15, with only 3 correct digits. If, instead, you calculate Math.log1p(1.1111111111e-15) you will get a much more accurate answer 1.1111111110999995e-15 with 15 correct digits of precision (actually 16 in this case).

If the value of `x` is less than -1, the return value is always [`NaN`](../nan).

Because `log1p()` is a static method of `Math`, you always use it as `Math.log1p()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using `Math.log1p()`

    Math.log1p(1);  // 0.6931471805599453
    Math.log1p(0);  // 0
    Math.log1p(-1); // -Infinity
    Math.log1p(-2); // NaN

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.log1p">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.log1p</span></a></td></tr></tbody></table>

`log1p`

38

12

25

No

25

8

38

38

25

25

8

3.0

## See also

-   [`Math.exp()`](exp)
-   [`Math.log()`](log)
-   [`Math.expm1()`](expm1)
-   [`Math.log10()`](log10)
-   [`Math.log2()`](log2)
-   [`Math.pow()`](pow)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log1p" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log1p</a>

# Math.log2()

The `Math.log2()` function returns the base 2 logarithm of a number, that is

∀*x* &gt; 0, `Math.log2` ` (``x``) ` = log<sub>2</sub>(_x_) = the unique *y* such that 2<sup>_y_</sup> = *x*

## Syntax

    Math.log2(x)

### Parameters

`x`  
A number.

### Return value

The base 2 logarithm of the given number. If the number is negative, [`NaN`](../nan) is returned.

## Description

If the value of `x` is less than 0, the return value is always [`NaN`](../nan).

Because `log2()` is a static method of `Math`, you always use it as `Math.log2()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

This function is the equivalent of Math.log(x) / Math.log(2). For log2(e) use the constant [`Math.LOG2E`](log2e) which is 1 / [`Math.LN2`](ln2).

## Polyfill

This Polyfill emulates the `Math.log2` function. Note that it returns imprecise values on some inputs (like 1 &lt;&lt; 29), wrap into [`Math.round()`](round) if working with bit masks.

    if (!Math.log2) Math.log2 = function(x) {
      return Math.log(x) * Math.LOG2E;
    };

## Examples

### Using Math.log2()

    Math.log2(3);    // 1.584962500721156
    Math.log2(2);    // 1
    Math.log2(1);    // 0
    Math.log2(0);    // -Infinity
    Math.log2(-2);   // NaN
    Math.log2(1024); // 10

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.log2">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.log2</span></a></td></tr></tbody></table>

`log2`

38

12

25

No

25

8

38

38

25

25

8

3.0

## See also

-   [`Math.exp()`](exp)
-   [`Math.log()`](log)
-   [`Math.log10()`](log10)
-   [`Math.log1p()`](log1p)
-   [`Math.pow()`](pow)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log2" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log2</a>

# Math.LOG2E

The `Math.LOG2E` property represents the base 2 logarithm of e, approximately 1.442:

` M``a``t``h``.``L``O``G``2``E ` = log<sub>2</sub>(_e_) ≈ 1.442

Property attributes of `Math.LOG2E`

Writable

no

Enumerable

no

Configurable

no

## Description

Because `LOG2E` is a static property of `Math`, you always use it as `Math.LOG2E`, rather than as a property of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.LOG2E

The following function returns the base 2 logarithm of e:

    function getLog2e() {
      return Math.LOG2E;
    }

    getLog2e(); // 1.4426950408889634

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.log2e">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.log2e</span></a></td></tr></tbody></table>

`LOG2E`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.exp()`](exp)
-   [`Math.log()`](log)
-   [`Math.log2()`](log2)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/LOG2E" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/LOG2E</a>

# Logical AND (&&)

The logical AND (`&&`) operator (logical conjunction) for a set of operands is true if and only if all of its operands are true. It is typically used with [`Boolean`](../global_objects/boolean) (logical) values. When it is, it returns a Boolean value. However, the `&&` operator actually returns the value of one of the specified operands, so if this operator is used with non-Boolean values, it will return a non-Boolean value.

## Syntax

    expr1 && expr2

## Description

If `expr1` can be converted to `true`, returns `expr2`; else, returns `expr1`.

If a value can be converted to `true`, the value is so-called [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). If a value can be converted to `false`, the value is so-called [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).

Examples of expressions that can be converted to false are:

-   `null`;
-   `NaN`;
-   `0`;
-   empty string (`""` or `''` or ` `` `);
-   `undefined`.

Even though the `&&` operator can be used with operands that are not Boolean values, it can still be considered a boolean operator since its return value can always be converted to a [boolean primitive](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#boolean_type). To explicitly convert its return value (or any expression in general) to the corresponding boolean value, use a double [NOT operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#logical_not) or the [`Boolean`](../global_objects/boolean/boolean) constructor.

### Short-circuit evaluation

The logical AND expression is evaluated left to right, it is tested for possible "short-circuit" evaluation using the following rule:

`(some falsy expression) && expr` is short-circuit evaluated to the falsy expression;

Short circuit means that the `expr` part above is **not evaluated**, hence any side effects of doing so do not take effect (e.g., if `expr` is a function call, the calling never takes place). This happens because the value of the operator is already determined after the evaluation of the first operand. See example:

    function A(){ console.log('called A'); return false; }
    function B(){ console.log('called B'); return true; }

    console.log( A() && B() );
    // logs "called A" due to the function call,
    // then logs false (which is the resulting value of the operator)

### Operator precedence

The following expressions might seem equivalent, but they are not, because the `&&` operator is executed before the `||` operator (see [operator precedence](operator_precedence)).

    true || false && false      // returns true, because && is executed first
    (true || false) && false    // returns false, because operator precedence cannot apply

## Examples

### Using AND

The following code shows examples of the `&&` (logical AND) operator.

    a1 = true  && true       // t && t returns true
    a2 = true  && false      // t && f returns false
    a3 = false && true       // f && t returns false
    a4 = false && (3 == 4)   // f && f returns false
    a5 = 'Cat' && 'Dog'      // t && t returns "Dog"
    a6 = false && 'Cat'      // f && t returns false
    a7 = 'Cat' && false      // t && f returns false
    a8 = ''    && false      // f && f returns ""
    a9 = false && ''         // f && f returns false

### Conversion rules for booleans

#### Converting AND to OR

The following operation involving **booleans**:

    bCondition1 && bCondition2

is always equal to:

    !(!bCondition1 || !bCondition2)

#### Converting OR to AND

The following operation involving **booleans**:

    bCondition1 || bCondition2

is always equal to:

    !(!bCondition1 && !bCondition2)

### Removing nested parentheses

As logical expressions are evaluated left to right, it is always possible to remove parentheses from a complex expression following some rules.

The following composite operation involving **booleans**:

    bCondition1 || (bCondition2 && bCondition3)

is always equal to:

    bCondition1 || bCondition2 && bCondition3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#prod-LogicalANDExpression">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#prod-LogicalANDExpression</span></a></td></tr></tbody></table>

`Logical_AND`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Boolean`](../global_objects/boolean)
-   [Truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)
-   [Falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND</a>

# Logical NOT (!)

The logical NOT (`!`) operator (logical complement, negation) takes truth to falsity and vice versa. It is typically used with [`Boolean`](../global_objects/boolean) (logical) values. When used with non-Boolean values, it returns `false` if its single operand can be converted to `true`; otherwise, returns `true`.

## Syntax

    !expr

## Description

Returns `false` if its single operand can be converted to `true`; otherwise, returns `true`.

If a value can be converted to `true`, the value is so-called [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). If a value can be converted to `false`, the value is so-called [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).

Examples of expressions that can be converted to false are:

-   `null`;
-   `NaN`;
-   `0`;
-   empty string (`""` or `''` or ` `` `);
-   `undefined`.

Even though the `!` operator can be used with operands that are not Boolean values, it can still be considered a boolean operator since its return value can always be converted to a [boolean primitive](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#boolean_type). To explicitly convert its return value (or any expression in general) to the corresponding boolean value, use a double [NOT operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#logical_not) or the [`Boolean`](../global_objects/boolean/boolean) constructor.

## Examples

### Using NOT

The following code shows examples of the `!` (logical NOT) operator.

    n1 = !true               // !t returns false
    n2 = !false              // !f returns true
    n3 = !''                 // !f returns true
    n4 = !'Cat'              // !t returns false

### Double NOT (`!!`)

It is possible to use a couple of NOT operators in series to explicitly force the conversion of any value to the corresponding [boolean primitive](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#boolean_type). The conversion is based on the "truthyness" or "falsyness" of the value (see [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)).

The same conversion can be done through the [`Boolean`](../global_objects/boolean/boolean) function.

    n1 = !!true                   // !!truthy returns true
    n2 = !!{}                     // !!truthy returns true: any object is truthy...
    n3 = !!(new Boolean(false))   // ...even Boolean objects with a false .valueOf()!
    n4 = !!false                  // !!falsy returns false
    n5 = !!""                     // !!falsy returns false
    n6 = !!Boolean(false)         // !!falsy returns false

### Converting between NOTs

The following operation involving **booleans**:

    !!bCondition

is always equal to:

    bCondition

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-logical-not-operator">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Logical NOT expression' in that specification.</span></a></td></tr></tbody></table>

`Logical_NOT`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Boolean`](../global_objects/boolean)
-   [Truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)
-   [Falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT</a>

# Logical OR (||)

The logical OR (`||`) operator (logical disjunction) for a set of operands is true if and only if one or more of its operands is true. It is typically used with [`Boolean`](../global_objects/boolean) (logical) values. When it is, it returns a Boolean value. However, the `||` operator actually returns the value of one of the specified operands, so if this operator is used with non-Boolean values, it will return a non-Boolean value.

## Syntax

    expr1 || expr2

## Description

If `expr1` can be converted to `true`, returns `expr1`; else, returns `expr2`.

If a value can be converted to `true`, the value is so-called [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). If a value can be converted to `false`, the value is so-called [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).

Examples of expressions that can be converted to false are:

-   `null`;
-   `NaN`;
-   `0`;
-   empty string (`""` or `''` or ` `` `);
-   `undefined`.

Even though the `||` operator can be used with operands that are not Boolean values, it can still be considered a boolean operator since its return value can always be converted to a [boolean primitive](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#boolean_type). To explicitly convert its return value (or any expression in general) to the corresponding boolean value, use a double [NOT operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#logical_not) or the [`Boolean`](../global_objects/boolean/boolean) constructor.

### Short-circuit evaluation

The logical OR expression is evaluated left to right, it is tested for possible "short-circuit" evaluation using the following rule:

`(some truthy expression) || expr` is short-circuit evaluated to the truthy expression.

Short circuit means that the `expr` part above is **not evaluated**, hence any side effects of doing so do not take effect (e.g., if `expr` is a function call, the calling never takes place). This happens because the value of the operator is already determined after the evaluation of the first operand. See example:

    function A(){ console.log('called A'); return false; }
    function B(){ console.log('called B'); return true; }

    console.log( B() || A() );
    // logs "called B" due to the function call,
    // then logs true (which is the resulting value of the operator)

### Operator precedence

The following expressions might seem equivalent, but they are not, because the `&&` operator is executed before the `||` operator (see [operator precedence](operator_precedence)).

    true || false && false      // returns true, because && is executed first
    (true || false) && false    // returns false, because operator precedence cannot apply

## Examples

### Using OR

The following code shows examples of the `||` (logical OR) operator.

    o1 = true  || true       // t || t returns true
    o2 = false || true       // f || t returns true
    o3 = true  || false      // t || f returns true
    o4 = false || (3 == 4)   // f || f returns false
    o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
    o6 = false || 'Cat'      // f || t returns "Cat"
    o7 = 'Cat' || false      // t || f returns "Cat"
    o8 = ''    || false      // f || f returns false
    o9 = false || ''         // f || f returns ""
    o10 = false || varObject // f || object returns varObject

**Note:** If you use this operator to provide a default value to some variable, be aware that any _falsy_ value will not be used. If you only need to filter out [`null`](../global_objects/null) or [`undefined`](../global_objects/undefined), consider using [the nullish coalescing operator](nullish_coalescing_operator).

### Conversion rules for booleans

#### Converting AND to OR

The following operation involving **booleans**:

    bCondition1 && bCondition2

is always equal to:

    !(!bCondition1 || !bCondition2)

#### Converting OR to AND

The following operation involving **booleans**:

    bCondition1 || bCondition2

is always equal to:

    !(!bCondition1 && !bCondition2)

### Removing nested parentheses

As logical expressions are evaluated left to right, it is always possible to remove parentheses from a complex expression following some rules.

The following composite operation involving **booleans**:

    bCondition1 && (bCondition2 || bCondition3)

is always equal to:

    !(!bCondition1 || !bCondition2 && !bCondition3)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#prod-LogicalORExpression">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Logical OR expression' in that specification.</span></a></td></tr></tbody></table>

`Logical_OR`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [The nullish coalescing operator (`??`)](nullish_coalescing_operator)
-   [`Boolean`](../global_objects/boolean)
-   [Truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)
-   [Falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR</a>

# Logical OR assignment (||=)

The logical OR assignment (`x ||= y`) operator only assigns if `x` is [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).

## Syntax

    expr1 ||= expr2

## Description

### Short-circuit evaluation

The [logical OR](logical_or) operator works like this:

    x || y;
    // returns x when x is truthy
    // returns y when x is not truthy

The logical OR operator short-circuits: the second operand is only evaluated if the first operand doesn't already determine the result.

Logical OR assignment short-circuits as well, meaning it only performs an assignment if the logical operation would evaluate the right-hand side. In other words, `x ||= y` is equivalent to:

    x || (x = y);

And not equivalent to the following which would always perform an assignment:

    x = x || y;

Note that this behavior is different to mathematical and bitwise assignment operators.

## Examples

### Setting default content

If the "lyrics" element is empty, display a default value:

    document.getElementById('lyrics').textContent ||= 'No lyrics.'

Here the short-circuit is especially beneficial, since the element will not be updated unnecessarily and won't cause unwanted side-effects such as additional parsing or rendering work, or loss of focus, etc.

Note: Pay attention to the value returned by the API you're checking against. If an empty string is returned (a [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) value), `||=` must be used, otherwise you want to use the `??=` operator (for [`null`](../global_objects/null) or [`undefined`](../global_objects/undefined) return values).

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-assignment-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-assignment-operators</span></a></td></tr></tbody></table>

`Logical_OR_assignment`

85

85

79

No

No

14

85

85

79

No

14

No

## See also

-   [Logical OR (||)](logical_or)
-   [The nullish coalescing operator (`??`)](nullish_coalescing_operator)
-   [Bitwise OR assignment (`|=`)](bitwise_or_assignment)
-   [`Boolean`](../global_objects/boolean)
-   [Truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)
-   [Falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment</a>

# SyntaxError: Malformed formal parameter

The JavaScript exception "malformed formal parameter" occurs when the argument list of a `Function()` constructor call is invalid somehow.

## Message

    SyntaxError: Expected {x} (Edge)
    SyntaxError: malformed formal parameter (Firefox)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

There is a `Function()` constructor with at least two arguments passed in the code. The last argument is the source code for the new function you're creating. All the rest make up your new function's argument list.

The argument list is invalid somehow. Perhaps you accidentally picked a keyword like `if` or `var` as an argument name, or perhaps there's some stray punctuation in your argument list. Or maybe you accidentally passed an invalid value, like a number or object.

### OK, that fixed my problem. But why didn't you say that in the first place?

Admittedly the wording in the error message is slightly strange. "Formal parameter" is a fancy way of saying "function argument". And we use the word "malformed" because all Firefox engineers are huge fans of 19th-century Gothic horror novels.

## Examples

### Invalid cases

    var f = Function('x y', 'return x + y;');
    // SyntaxError (missing a comma)

    var f = Function('x,', 'return x;');
    // SyntaxError (extraneous comma)

    var f = Function(37, "alert('OK')");
    // SyntaxError (numbers can't be argument names)

### Valid cases

    var f = Function('x, y', 'return x + y;');  // correctly punctuated

    var f = Function('x', 'return x;');

    // if you can, avoid using Function - this is much faster
    var f = function(x) { return x; };

## See also

-   `Function()`
-   [About functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)
-   [_Frankenstein_ by Mary Wollstonecraft Shelley, full e-text](https://www.gutenberg.org/ebooks/84) ("Cursed (although I curse myself) be the hands that formed you! You have made me wretched beyond expression. You have left me no power to consider whether I am just to you or not. Begone! Relieve me from the sight of your detested form.")

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter</a>

# URIError: malformed URI sequence

The JavaScript exception "malformed URI sequence" occurs when URI encoding or decoding wasn't successful.

## Message

    URIError: The URI to be encoded contains invalid character (Edge)
    URIError: malformed URI sequence (Firefox)
    URIError: URI malformed (Chrome)

## Error type

[`URIError`](../global_objects/urierror)

## What went wrong?

URI encoding or decoding wasn't successful. An argument given to either the [`decodeURI`](../global_objects/decodeuri), [`encodeURI`](../global_objects/encodeuri), [`encodeURIComponent`](../global_objects/encodeuricomponent), or [`decodeURIComponent`](../global_objects/decodeuricomponent) function was not valid, so that the function was unable encode or decode properly.

## Examples

### Encoding

Encoding replaces each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character. An [`URIError`](../global_objects/urierror) will be thrown if there is an attempt to encode a surrogate which is not part of a high-low pair, for example:

    encodeURI('\uD800');
    // "URIError: malformed URI sequence"

    encodeURI('\uDFFF');
    // "URIError: malformed URI sequence"

A high-low pair is ok. For example:

    encodeURI('\uD800\uDFFF');
    // "%F0%90%8F%BF"

### Decoding

Decoding replaces each escape sequence in the encoded URI component with the character that it represents. If there isn't such a character, an error will be thrown:

    decodeURIComponent('%E0%A4%A');
    // "URIError: malformed URI sequence"

With proper input, this should usually look like something like this:

    decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
    // "JavaScript_шеллы"

## See also

-   [`URIError`](../global_objects/urierror)
-   [`decodeURI`](../global_objects/decodeuri)
-   [`encodeURI`](../global_objects/encodeuri)
-   [`encodeURIComponent`](../global_objects/encodeuricomponent)
-   [`decodeURIComponent`](../global_objects/decodeuricomponent)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Malformed_URI" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Malformed_URI</a>

# Map

The `Map` object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and [primitive values](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)) may be used as either a key or a value.

## Description

A `Map` object iterates its elements in insertion order — a [`for...of`](../statements/for...of) loop returns an array of `[key, value]` for each iteration.

### Key equality

-   Key equality is based on the [`sameValueZero`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value-zero_equality) algorithm.
-   [`NaN`](nan) is considered the same as `NaN` (even though `NaN !== NaN`) and all other values are considered equal according to the semantics of the `===` operator.
-   In the current ECMAScript specification, `-0` and `+0` are considered equal, although this was not so in earlier drafts. See _"Value equality for -0 and 0"_ in the [Browser compatibility](#browser_compatibility) table for details.

### Objects vs. Maps

[`Object`](object) is similar to `Map`—both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. For this reason (and because there were no built-in alternatives), `Object` has been used as `Map` historically.

However, there are important differences that make `Map` preferable in certain cases:

<table><colgroup><col style="width: 33%" /><col style="width: 33%" /><col style="width: 33%" /></colgroup><thead><tr class="header"><th></th><th>Map</th><th>Object</th></tr></thead><tbody><tr class="odd"><td>Accidental Keys</td><td>A <code>Map</code> does not contain any keys by default. It only contains what is explicitly put into it.</td><td><p>An <code>Object</code> has a prototype, so it contains default keys that could collide with your own keys if you're not careful.</p><div class="notecard note"><p><strong>Note:</strong> As of ES5, this can be bypassed by using <a href="object/create"><code>Object.create(null)</code></a>, but this is seldom done.</p></div></td></tr><tr class="even"><td>Key Types</td><td>A <code>Map</code>'s keys can be any value (including functions, objects, or any primitive).</td><td>The keys of an <code>Object</code> must be either a <a href="string"><code>String</code></a> or a <a href="symbol"><code>Symbol</code></a>.</td></tr><tr class="odd"><td>Key Order</td><td><p>The keys in <code>Map</code> are ordered in a simple, straightforward way: A <code>Map</code> object iterates entries, keys, and values in the order of entry insertion.</p></td><td><p>Although the keys of an ordinary <code>Object</code> are ordered now, this was not always the case, and the order is complex. As a result, it's best not to rely on property order.</p><p>The order was first defined for own properties only in ECMAScript 2015; ECMAScript 2020 defines order for inherited properties as well. See the <a href="https://tc39.es/ecma262/#sec-ordinaryownpropertykeys">OrdinaryOwnPropertyKeys</a> and <a href="https://tc39.es/ecma262/#sec-enumerate-object-properties">EnumerateObjectProperties</a> abstract specification operations. But note that no single mechanism iterates <strong>all</strong> of an object's properties; the various mechanisms each include different subsets of properties. (<a href="../statements/for...in"><code>for-in</code></a> includes only enumerable string-keyed properties; <a href="object/keys"><code>Object.keys</code></a> includes only own, enumerable, string-keyed properties; <a href="object/getownpropertynames"><code>Object.getOwnPropertyNames</code></a> includes own, string-keyed properties even if non-enumerable; <a href="object/getownpropertysymbols"><code>Object.getOwnPropertySymbols</code></a> does the same for just <code>Symbol</code>-keyed properties, etc.)</p></td></tr><tr class="even"><td><p>Size</p></td><td>The number of items in a <code>Map</code> is easily retrieved from its <a href="map/size"><code>size</code></a> property.</td><td>The number of items in an <code>Object</code> must be determined manually.</td></tr><tr class="odd"><td>Iteration</td><td>A <code>Map</code> is an <a href="../iteration_protocols">iterable</a>, so it can be directly iterated.</td><td><p><code>Object</code> does not implement an <a href="../iteration_protocols#the_iterable_protocol">iteration protocol</a>, and so objects are not directly iterable using the JavaScript <a href="../statements/for...of">for...of</a> statement (by default).</p><div class="notecard note"><p><strong>Note:</strong></p><ul><li>An object can implement the iteration protocol, or you can get an iterable for an object using <a href="object/keys"><code>Object.keys</code></a> or <a href="object/entries"><code>Object.entries</code></a>.</li><li>The <a href="../statements/for...in">for...in</a> statement allows you to iterate over the <em>enumerable</em> properties of an object.</li></ul></div></td></tr><tr class="even"><td>Performance</td><td><p>Performs better in scenarios involving frequent additions and removals of key-value pairs.</p></td><td><p>Not optimized for frequent additions and removals of key-value pairs.</p></td></tr></tbody></table>

### Setting object properties

Setting Object properties works for Map objects as well, and can cause considerable confusion.

Therefore, this appears to work in a way:

    let wrongMap = new Map()
    wrongMap['bla'] = 'blaa'
    wrongMap['bla2'] = 'blaaa2'

    console.log(wrongMap)  // Map { bla: 'blaa', bla2: 'blaaa2' }

But that way of setting a property does not interact with the Map data structure. It uses the feature of the generic object. The value of 'bla' is not stored in the Map for queries. Other operations on the data fail:

    wrongMap.has('bla')    // false
    wrongMap.delete('bla') // false
    console.log(wrongMap)  // Map { bla: 'blaa', bla2: 'blaaa2' }

The correct usage for storing data in the Map is through the `set(key, value)` method.

    let contacts = new Map()
    contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"})
    contacts.has('Jessie') // true
    contacts.get('Hilary') // undefined
    contacts.set('Hilary', {phone: "617-555-4321", address: "321 S 2nd St"})
    contacts.get('Jessie') // {phone: "213-555-1234", address: "123 N 1st Ave"}
    contacts.delete('Raymond') // false
    contacts.delete('Jessie') // true
    console.log(contacts.size) // 1

## Constructor

[`Map()`](map/map)  
Creates a new `Map` object.

## Static properties

[`get Map[@@species]`](map/@@species)  
The constructor function that is used to create derived objects.

## Instance properties

[`Map.prototype.size`](map/size)  
Returns the number of key/value pairs in the `Map` object.

## Instance methods

[`Map.prototype.clear()`](map/clear)  
Removes all key-value pairs from the `Map` object.

[`Map.prototype.delete(key)`](map/delete)  
Returns `true` if an element in the `Map` object existed and has been removed, or `false` if the element does not exist. `Map.prototype.has(key)` will return `false` afterwards.

[`Map.prototype.get(key)`](map/get)  
Returns the value associated to the `key`, or `undefined` if there is none.

[`Map.prototype.has(key)`](map/has)  
Returns a boolean asserting whether a value has been associated to the `key` in the `Map` object or not.

[`Map.prototype.set(key, value)`](map/set)  
Sets the `value` for the `key` in the `Map` object. Returns the `Map` object.

### Iteration methods

[`Map.prototype[@@iterator]()`](map/@@iterator)  
Returns a new Iterator object that contains `[key, value]` for each element in the `Map` object in insertion order.

[`Map.prototype.keys()`](map/keys)  
Returns a new Iterator object that contains the **keys** for each element in the `Map` object in insertion order.

[`Map.prototype.values()`](map/values)  
Returns a new Iterator object that contains the **values** for each element in the `Map` object in insertion order.

[`Map.prototype.entries()`](map/entries)  
Returns a new Iterator object that contains `[key, value]` for each element in the `Map` object in insertion order.

[`Map.prototype.forEach(callbackFn[, thisArg])`](map/foreach)  
Calls `callbackFn` once for each key-value pair present in the `Map` object, in insertion order. If a `thisArg` parameter is provided to `forEach`, it will be used as the `this` value for each callback.

## Examples

### Using the Map object

    let myMap = new Map()

    let keyString = 'a string'
    let keyObj    = {}
    let keyFunc   = function() {}

    // setting the values
    myMap.set(keyString, "value associated with 'a string'")
    myMap.set(keyObj, 'value associated with keyObj')
    myMap.set(keyFunc, 'value associated with keyFunc')

    myMap.size              // 3

    // getting the values
    myMap.get(keyString)    // "value associated with 'a string'"
    myMap.get(keyObj)       // "value associated with keyObj"
    myMap.get(keyFunc)      // "value associated with keyFunc"

    myMap.get('a string')    // "value associated with 'a string'"
                             // because keyString === 'a string'
    myMap.get({})            // undefined, because keyObj !== {}
    myMap.get(function() {}) // undefined, because keyFunc !== function () {}

### Using NaN as Map keys

[`NaN`](nan) can also be used as a key. Even though every `NaN` is not equal to itself (`NaN !== NaN` is true), the following example works because `NaN`s are indistinguishable from each other:

    let myMap = new Map()
    myMap.set(NaN, 'not a number')

    myMap.get(NaN)
    // "not a number"

    let otherNaN = Number('foo')
    myMap.get(otherNaN)
    // "not a number"

### Iterating Map with for..of

Maps can be iterated using a `for..of` loop:

    let myMap = new Map()
    myMap.set(0, 'zero')
    myMap.set(1, 'one')

    for (let [key, value] of myMap) {
      console.log(key + ' = ' + value)
    }
    // 0 = zero
    // 1 = one

    for (let key of myMap.keys()) {
      console.log(key)
    }
    // 0
    // 1

    for (let value of myMap.values()) {
      console.log(value)
    }
    // zero
    // one

    for (let [key, value] of myMap.entries()) {
      console.log(key + ' = ' + value)
    }
    // 0 = zero
    // 1 = one

### Iterating Map with forEach()

Maps can be iterated using the [`forEach()`](map/foreach) method:

    myMap.forEach(function(value, key) {
      console.log(key + ' = ' + value)
    })
    // 0 = zero
    // 1 = one

### Relation with Array objects

    let kvArray = [['key1', 'value1'], ['key2', 'value2']]

    // Use the regular Map constructor to transform a 2D key-value Array into a map
    let myMap = new Map(kvArray)

    myMap.get('key1') // returns "value1"

    // Use Array.from() to transform a map into a 2D key-value Array
    console.log(Array.from(myMap)) // Will show you exactly the same Array as kvArray

    // A succinct way to do the same, using the spread syntax
    console.log([...myMap])

    // Or use the keys() or values() iterators, and convert them to an array
    console.log(Array.from(myMap.keys())) // ["key1", "key2"]

### Cloning and merging Maps

Just like `Array`s, `Map`s can be cloned:

    let original = new Map([
      [1, 'one']
    ])

    let clone = new Map(original)

    console.log(clone.get(1))       // one
    console.log(original === clone) // false (useful for shallow comparison)

**Note:** Keep in mind that _the data itself_ is not cloned.

Maps can be merged, maintaining key uniqueness:

    let first = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ])

    let second = new Map([
      [1, 'uno'],
      [2, 'dos']
    ])

    // Merge two maps. The last repeated key wins.
    // Spread operator essentially converts a Map to an Array
    let merged = new Map([...first, ...second])

    console.log(merged.get(1)) // uno
    console.log(merged.get(2)) // dos
    console.log(merged.get(3)) // three

Maps can be merged with Arrays, too:

    let first = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ])

    let second = new Map([
      [1, 'uno'],
      [2, 'dos']
    ])

    // Merge maps with an array. The last repeated key wins.
    let merged = new Map([...first, ...second, [1, 'eins']])

    console.log(merged.get(1)) // eins
    console.log(merged.get(2)) // dos
    console.log(merged.get(3)) // three

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-map-objects">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Map' in that specification.</span></a></td></tr></tbody></table>

`Map`

38

12

13

11

25

8

38

38

14

25

8

3.0

`Map`

38

12

13

11

25

8

38

38

14

25

8

3.0

`clear`

38

12

19

11

25

8

38

38

19

25

8

3.0

`delete`

38

12

13

11

25

8

38

38

14

25

8

3.0

`entries`

38

12

20

No

25

8

38

38

20

25

8

3.0

`forEach`

38

12

25

11

25

8

38

38

25

25

8

3.0

`get`

38

12

13

11

25

8

38

38

14

25

8

3.0

`has`

38

12

13

11

25

8

38

38

14

25

8

3.0

`key_equality_for_zeros`

38

12

29

No

25

9

38

38

29

25

9

3.0

`keys`

38

12

20

No

25

8

38

38

20

25

8

3.0

`set`

38

12

13

11

Returns 'undefined' instead of the 'Map' object.

25

8

38

38

14

25

8

3.0

`size`

38

12

19

From Firefox 13 to Firefox 18, the `size` property was implemented as a `Map.prototype.size()` method, this has been changed to a property in later versions conform to the ECMAScript 2015 specification.

11

25

8

38

38

19

From Firefox 13 to Firefox 18, the `size` property was implemented as a `Map.prototype.size()` method, this has been changed to a property in later versions conform to the ECMAScript 2015 specification.

25

8

3.0

`values`

38

12

20

No

25

8

38

38

20

25

8

3.0

`@@iterator`

43

12

36

27-36

A placeholder property named `@@iterator` is used.

17-27

A placeholder property named `iterator` is used.

No

30

10

43

43

36

27-36

A placeholder property named `@@iterator` is used.

17-27

A placeholder property named `iterator` is used.

30

10

4.0

`@@species`

51

13

41

No

38

10

51

51

41

41

10

5.0

`@@toStringTag`

44

79

51

No

No

9.1

44

44

51

No

9.3

4.0

## See also

-   [`Set`](set)
-   [`WeakMap`](weakmap)
-   [`WeakSet`](weakset)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map</a>

# String.prototype.match()

The `match()` method retrieves the result of matching a _string_ against a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).

## Syntax

    match(regexp)

### Parameters

`regexp`  
A regular expression object.

If `regexp` is a non-`RegExp` object, it is implicitly converted to a [`RegExp`](../regexp) by using `new RegExp(regexp)`.

If you don't give any parameter and use the `match()` method directly, you will get an [`Array`](../array) with an empty string: `[""]`.

### Return value

An [`Array`](../array) whose contents depend on the presence or absence of the global (`g`) flag, or [`null`](../null) if no matches are found.

-   If the `g` flag is used, all results matching the complete regular expression will be returned, but capturing groups will not.
-   if the `g` flag is not used, only the first complete match and its related capturing groups are returned. In this case, the returned item will have additional properties as described below.

#### Additional properties

As explained above, some results contain additional properties as described below.

`groups`  
An object of named capturing groups whose keys are the names and values are the capturing groups or [`undefined`](../undefined) if no named capturing groups were defined. See [Groups and Ranges](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges) for more information.

`index`  
The index of the search at which the result was found.

`input`  
A copy of the search string.

## Description

If the regular expression does not include the `g` flag, `str.match()` will return the same result as [`RegExp.exec()`](../regexp/exec).

### Other methods

-   If you need to know if a string matches a regular expression [`RegExp`](../regexp), use [`RegExp.test()`](../regexp/test).
-   If you only want the first match found, you might want to use [`RegExp.exec()`](../regexp/exec) instead.
-   If you want to obtain capture groups and the global flag is set, you need to use [`RegExp.exec()`](../regexp/exec) or [`String.prototype.matchAll()`](matchall) instead.

## Examples

### Using match()

In the following example, `match()` is used to find '`Chapter`' followed by 1 or more numeric characters followed by a decimal point and numeric character 0 or more times.

The regular expression includes the `i` flag so that upper/lower case differences will be ignored.

    const str = 'For more information, see Chapter 3.4.5.1';
    const re = /see (chapter \d+(\.\d)*)/i;
    const found = str.match(re);

    console.log(found);

    // logs [ 'see Chapter 3.4.5.1',
    //        'Chapter 3.4.5.1',
    //        '.1',
    //        index: 22,
    //        input: 'For more information, see Chapter 3.4.5.1' ]

    // 'see Chapter 3.4.5.1' is the whole match.
    // 'Chapter 3.4.5.1' was captured by '(chapter \d+(\.\d)*)'.
    // '.1' was the last value captured by '(\.\d)'.
    // The 'index' property (22) is the zero-based index of the whole match.
    // The 'input' property is the original string that was parsed.

### Using global and ignore case flags with match()

The following example demonstrates the use of the global and ignore case flags with `match()`. All letters `A` through `E` and `a` through `e` are returned, each its own element in the array.

    const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
    const regexp = /[A-E]/gi;
    const matches_array = str.match(regexp);

    console.log(matches_array);
    // ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']

**Note:** See also [`String.prototype.matchAll()`](matchall) and [Advanced searching with flags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags).

### Using named capturing groups

In browsers which support named capturing groups, the following code captures "`fox`" or "`cat`" into a group named "`animal`":

    const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';

    const capturingRegex = /(?<animal>fox|cat) jumps over/;
    const found = paragraph.match(capturingRegex);
    console.log(found.groups); // {animal: "fox"}

### Using match() with no parameter

    const str = "Nothing will come of nothing.";

    str.match();   // returns [""]

### A non-RegExp object as the parameter

When the `regexp` parameter is a string or a number, it is implicitly converted to a [`RegExp`](../regexp) by using `new RegExp(regexp)`.

If it is a positive number with a positive sign, `RegExp()` will ignore the positive sign.

    const str1 = "NaN means not a number. Infinity contains -Infinity and +Infinity in JavaScript.",
        str2 = "My grandfather is 65 years old and My grandmother is 63 years old.",
        str3 = "The contract was declared null and void.";
    str1.match("number");   // "number" is a string. returns ["number"]
    str1.match(NaN);        // the type of NaN is the number. returns ["NaN"]
    str1.match(Infinity);   // the type of Infinity is the number. returns ["Infinity"]
    str1.match(+Infinity);  // returns ["Infinity"]
    str1.match(-Infinity);  // returns ["-Infinity"]
    str2.match(65);         // returns ["65"]
    str2.match(+65);        // A number with a positive sign. returns ["65"]
    str3.match(null);       // returns ["null"]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.match">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'String.prototype.match' in that specification.</span></a></td></tr></tbody></table>

`match`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.matchAll()`](matchall)
-   [`RegExp`](../regexp)
-   [`RegExp.prototype.exec()`](../regexp/exec)
-   [`RegExp.prototype.test()`](../regexp/test)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match</a>

# String.prototype.matchAll()

The `matchAll()` method returns an iterator of all results matching a string against a _[regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)_, including [capturing groups](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges).

## Syntax

    matchAll(regexp)

### Parameters

`regexp`  
A regular expression object.

If a non-`RegExp` object `obj` is passed, it is implicitly converted to a [`RegExp`](../regexp) by using `new RegExp(obj)`.

The `RegExp` object must have the `/g` flag, otherwise a `TypeError` will be thrown.

### Return value

An [iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) (which is not a restartable iterable) of matches.

Each match is an array (with extra properties `index` and `input`; see the return value for [`RegExp.exec`](../regexp/exec)). The match array has the matched text as the first item, and then one item for each parenthetical capture group of the matched text.

## Examples

### Regexp.exec() and matchAll()

Prior to the addition of `matchAll` to JavaScript, it was possible to use calls to [regexp.exec](../regexp/exec) (and regexes with the `/g` flag) in a loop to obtain all the matches:

    const regexp = new RegExp('foo[a-z]*','g');
    const str = 'table football, foosball';
    let match;

    while ((match = regexp.exec(str)) !== null) {
      console.log(`Found ${match[0]} start=${match.index} end=${regexp.lastIndex}.`);
      // expected output: "Found football start=6 end=14."
      // expected output: "Found foosball start=16 end=24."
    }

With `matchAll` available, you can avoid the [`while`](../../statements/while) loop and `exec` with `g`.

Instead, by using `matchAll`, you get an iterator to use with the more convenient [`for...of`](../../statements/for...of), [`array spread`](../../operators/spread_syntax), or [`Array.from()`](../array/from) constructs:

    const regexp = new RegExp('foo[a-z]*','g');
    const str = 'table football, foosball';
    const matches = str.matchAll(regexp);

    for (const match of matches) {
      console.log(`Found ${match[0]} start=${match.index} end=${match.index + match[0].length}.`);
    }
    // expected output: "Found football start=6 end=14."
    // expected output: "Found foosball start=16 end=24."

    // matches iterator is exhausted after the for..of iteration
    // Call matchAll again to create a new iterator
    Array.from(str.matchAll(regexp), m => m[0]);
    // Array [ "football", "foosball" ]

`matchAll` will throw an exception if the `g` flag is missing.

    const regexp = new RegExp('[a-c]','');
    const str = 'abc';
    str.matchAll(regexp);
    // TypeError

`matchAll` internally makes a clone of the `regexp`—so, unlike [`regexp.exec()`](../regexp/exec), `lastIndex` does not change as the string is scanned.

    const regexp = new RegExp('[a-c]','g');
    regexp.lastIndex = 1;
    const str = 'abc';
    Array.from(str.matchAll(regexp), m => `${regexp.lastIndex}${m[0]}`);
    // Array [ "1 b", "1 c" ]

### Better access to capturing groups (than String.prototype.match())

Another compelling reason for `matchAll` is the improved access to capture groups.

Capture groups are ignored when using [`match()`](match) with the global `/g` flag:

    let regexp = /t(e)(st(\d?))/g;
    let str = 'test1test2';

    str.match(regexp);
    // Array ['test1', 'test2']

Using `matchAll`, you can access capture groups easily:

    let array = [...str.matchAll(regexp)];

    array[0];
    // ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
    array[1];
    // ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.matchall">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.matchall</span></a></td></tr></tbody></table>

`matchAll`

73

79

67

No

60

13

73

73

67

52

13

11.0

## See also

-   [`String.prototype.match()`](match)
-   [Using regular expressions in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
-   [Capturing groups](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges)
-   [`RegExp`](../regexp)
-   [`RegExp.prototype.exec()`](../regexp/exec)
-   [`RegExp.prototype.test()`](../regexp/test)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll</a>

# Math

`Math` is a built-in object that has properties and methods for mathematical constants and functions. It's not a function object.

`Math` works with the [`Number`](number) type. It doesn't work with [`BigInt`](bigint).

## Description

Unlike many other global objects, `Math` is not a constructor. All properties and methods of `Math` are static. You refer to the constant pi as `Math.PI` and you call the sine function as `Math.sin(x)`, where `x` is the method's argument. Constants are defined with the full precision of real numbers in JavaScript.

**Note:** Many `Math` functions have a precision that's _implementation-dependent._

This means that different browsers can give a different result. Even the same JavaScript engine on a different OS or architecture can give different results!

## Static properties

[`Math.E`](math/e)  
Euler's constant and the base of natural logarithms; approximately `2.718`.

[`Math.LN2`](math/ln2)  
Natural logarithm of `2`; approximately `0.693`.

[`Math.LN10`](math/ln10)  
Natural logarithm of `10`; approximately `2.303`.

[`Math.LOG2E`](math/log2e)  
Base-2 logarithm of `E`; approximately `1.443`.

[`Math.LOG10E`](math/log10e)  
Base-10 logarithm of `E`; approximately `0.434`.

[`Math.PI`](math/pi)  
Ratio of the a circle's circumference to its diameter; approximately `3.14159`.

[`Math.SQRT1_2`](math/sqrt1_2)  
Square root of ½ (or equivalently, <sup>1</sup>/<sub>√2</sub>); approximately `0.707`.

[`Math.SQRT2`](math/sqrt2)  
Square root of `2`; approximately `1.414`.

## Static methods

[`Math.abs(x)`](math/abs)  
Returns the absolute value of `x`.

[`Math.acos(x)`](math/acos)  
Returns the arccosine of `x`.

[`Math.acosh(x)`](math/acosh)  
Returns the hyperbolic arccosine of `x`.

[`Math.asin(x)`](math/asin)  
Returns the arcsine of `x`.

[`Math.asinh(x)`](math/asinh)  
Returns the hyperbolic arcsine of a number.

[`Math.atan(x)`](math/atan)  
Returns the arctangent of `x`.

[`Math.atanh(x)`](math/atanh)  
Returns the hyperbolic arctangent of `x`.

[`Math.atan2(y, x)`](math/atan2)  
Returns the arctangent of the quotient of its arguments.

[`Math.cbrt(x)`](math/cbrt)  
Returns the cube root of `x`.

[`Math.ceil(x)`](math/ceil)  
Returns the smallest integer greater than or equal to `x`.

[`Math.clz32(x)`](math/clz32)  
Returns the number of leading zero bits of the 32-bit integer `x`.

[`Math.cos(x)`](math/cos)  
Returns the cosine of `x`.

[`Math.cosh(x)`](math/cosh)  
Returns the hyperbolic cosine of `x`.

[`Math.exp(x)`](math/exp)  
Returns `Ex`, where `x` is the argument, and `E` is Euler's constant (`2.718`…, the base of the natural logarithm).

[`Math.expm1(x)`](math/expm1)  
Returns subtracting `1` from `exp(x)`.

[`Math.floor(x)`](math/floor)  
Returns the largest integer less than or equal to `x`.

[`Math.fround(x)`](math/fround)  
Returns the nearest [single precision](https://en.wikipedia.org/wiki/Single-precision_floating-point_format) float representation of `x`.

[`Math.hypot([x[, y[, …]]])`](math/hypot)  
Returns the square root of the sum of squares of its arguments.

[`Math.imul(x, y)`](math/imul)  
Returns the result of the 32-bit integer multiplication of `x` and `y`.

[`Math.log(x)`](math/log)  
Returns the natural logarithm (㏒<sub>e</sub>; also, ㏑) of `x`.

[`Math.log1p(x)`](math/log1p)  
Returns the natural logarithm (㏒<sub>e</sub>; also ㏑) of `1 + x` for the number `x`.

[`Math.log10(x)`](math/log10)  
Returns the base-10 logarithm of `x`.

[`Math.log2(x)`](math/log2)  
Returns the base-2 logarithm of `x`.

[`Math.max([x[, y[, …]]])`](math/max)  
Returns the largest of zero or more numbers.

[`Math.min([x[, y[, …]]])`](math/min)  
Returns the smallest of zero or more numbers.

[`Math.pow(x, y)`](math/pow)  
Returns base `x` to the exponent power `y` (that is, `xy`).

[`Math.random()`](math/random)  
Returns a pseudo-random number between `0` and `1`.

[`Math.round(x)`](math/round)  
Returns the value of the number `x` rounded to the nearest integer.

[`Math.sign(x)`](math/sign)  
Returns the sign of the `x`, indicating whether `x` is positive, negative, or zero.

[`Math.sin(x)`](math/sin)  
Returns the sine of `x`.

[`Math.sinh(x)`](math/sinh)  
Returns the hyperbolic sine of `x`.

[`Math.sqrt(x)`](math/sqrt)  
Returns the positive square root of `x`.

[`Math.tan(x)`](math/tan)  
Returns the tangent of `x`.

[`Math.tanh(x)`](math/tanh)  
Returns the hyperbolic tangent of `x`.

[`Math.trunc(x)`](math/trunc)  
Returns the integer portion of `x`, removing any fractional digits.

## Examples

### Converting between degrees and radians

The trigonometric functions `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, and `atan2()` expect (and return) angles in _radians_.

Since humans tend to think in degrees, and some functions (such as CSS transforms) can accept degrees, it is a good idea to keep functions handy that convert between the two:

    function degToRad(degrees) {
      return degrees * (Math.PI / 180);
    };

    function radToDeg(rad) {
      return rad / (Math.PI / 180);
    };

### Calculating the height of an equilateral triangle

If we want to calculate the height of an equilateral triangle, and we know its side length is 100, we can use the formulae _length of the adjacent multiplied by the tangent of the angle is equal to the opposite._

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACmCAMAAACoeDCGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAJnUExURf///9/f3x8fH19fX+/v77+/vz8/PwAAAICAgH9/fw8PDxAQEJ+fn///18/Pz/f//6+vr8/3/09PT///94+Pj29vb0cAAE8AAJ/X+C8vLzAwMP//5wBIpkcAR//319j//wAAR///7+///5fW9wAAT6dHAAAAc4/P9V8AANf3/y+g1f//39enRwAAL6fZ+KcvAMTx/wAvnp8vAPTPladPAJxMAPfv79ieSKzL2ezFke3x+U2n128AAP/qv//vzNy/oAAAitenTy+T0gAvfOf//rPR7Pbn15MAAM+1kLuPTBcXF2Kn1//fp9+nTc6PL/f/1ue+ddOmdIfJ76fM5/vXpXG55o2300ef1i8ALwBPpwAvp2+XvoyrxC8AAACP09T39vX3/9WZL9nu/PffuZPB48Hj+793ALHn/79vAItLAMmfX9fZ1+fTuf/v17mjg6PCyi9PcwBns4cAAPf783cAAABzv7qnpP/nrYcvANfPswBfoZe91a+np//338LV7dHj658AAF+PpwCJxwAAX6SqpP/3z8/t/6eiktqnX0cAL8end9XS1a+KbI9UdN/3//fv5826ooePnE+Pv82UR3et1XQvAL/H37m5uikpKc/n9wYGBu2/fPX/5XRMQsW/zy9LT18vAKJsP09HL6ers//380+nzUtLd3d/cy+Lw+vj44drT3dPdwAvL5Orq1dPXwBHk5dfANf32+v/1wAAl6OTT+fDp0+r30tLAIx8jHe/72NjY0cvAG8AX0cAby93r2+fvy9HLwBPh9/f5wBHby+atceHAMe3v19fd9eXAE9fL0dPVwAvT0+PlxgK/IcAAApOSURBVHja7VwHW9vIFh03rh1j3DY2YGNs00yvCRBKIEsCCSS7SUjbTSC9974pm82mbnp92WySfZvtvbfXe38/6o0sA8bIlkYaWaM87veBi0CfjnTm3HuuRoPQdEzHdEzHdKTGBf+BxLvFwRdWu9P/ofeqk2kgL0I4cfSLGw+9HU3/hw4oZhmHt+ls5wr8egX23w8+/rkYzfXB/ovIewXgD07uw8vO6uvn/bAysAOer2QYSBc0LGl0olY4OQBrMLWOwb0FX69Bl6FtLlS0w8pXfPMc/nDbwvDo3NX7WObWhqBzGLZ4639EqPWlF4rcp992eu82HmrqQGjp5rLXMfXKv/VXIIevzlHEMrUChwFHh8Nfh1ANByTwFH8Ohnx1HO1auI2l3xS5MZB8R5GbYSDNtW27di3seRyrwIOdA9JbfgY9anzcuQyhW231Vci54BeOMSAsX5HtnPYeg7rtPZXdsSAG0trT190ZjG7tubEJli0p3xiYFUwACfnms4vDgemPUKR/VQhT7F9rMJAuH8BHUBU6DvD7aGAWYKmKA/HXBY7Xssyt8TCvx7jwIXvNTvQ+/jx7Pfft7Dl6TPLVO8KV6FmIyNFX/+8rth+e/PskQt2fetZiSb/24Ra94miHtQOworrzxC3fx6j1g02/69MpJ/txufbD8prvoqg5XHx3WfVvBVKOxcp2WPAxhvz/ffKfk6g36EQXfHVdMVgpgNYGbIctno5g7V4YbFnFvS0RvmqGwkU2qgHjuwbSf/XAoo9Sv1tUaOCOHlc0SxqXjOC3voY0ecoIuVT5DALvpObMAihM+SoXjGZMLV8+ZzBrvnOioXC69O8Cu5kRIMg8A0yTv7CDK14mf3WjO9YxBJtxaZbWtOTEacgEEJQ3A55L/jwTcuKve+4DnOhDSwHK09djeQAGVoBgKsUvwdgABshLvOWLstmfZDKRpgRsFoBgEbXnJZHFRMhMCzNA8Gk1jo1ZC8wwE54FIztA0IR0GYlHr3HyENMWCE4IPKGeIz+/FooSnJSUZe4BS5eNl15yxufATPpXRHa4gEvSsjQoSecYAIJJZc+TmRVmUpNgK42dmMAukyRYgl0sOZACIJXeiatpZAmI+S34texzYGOHWji1LZL7r1iCDawMdmSwKyg2PGSFjapATOBRcBaASslFg1oWZQW5jWoVrCQUWiTqrldu5E4UwBrtgA61KJxQGq5X+WCnQHELBderGAgV0VEke5SoRSUNGKi6XpmsmEEjMdumtMiyHYWUSiXFiqGQWtSKV8WNR2WDPdFapJNVZ2oIhJ7BU9x4VEQtipabduORlA4mejszayfBFrn+Vg3hUEItmo1Cfn/EUs7NZ1A82G20+wbkjcedAPv8mxUCMdupc5p0zA3BvoP5A/ycGPnUUkFlSFVwwwiqL0GvVWiq+zTy0qMeZ31+daxOczMkJMEklUL14VrY7+uJKqGWi670ynS9gb2mL9dGlQx21RoGRI3H4UH8K3LdrQCIDQrUSrKSG4+OGEBB7eegRLUMdtXKCemOM/L377+yPHjwQMmsMgoem4brDWxkw9+mY600Cfa2VB2L3zIslU8tVaSXWEd2bzlt4YJ/FEHefAejWT0gePeSS649Z9DA7Ydy5RcXWer2aiVf8G6oaoafZFNL9e655Mbj4gNo+wjql1lrUbqfQUMUa+YFOitQU4naQq+66x2Cn86N7qxtkEUtizpFVip7pTUed/88v/rJcnmD3aim9JK66NPXPP9IPFhECiRL98WlNR5D/tLbnwI/25CQWhRbi2ISLKHxuJjDEIrlq2/hVDagG6q43/Uy5Jdqa1H5KWuuXY68AyBDtSjOr6LiehdyReMg+WB3ZUN6iWTl5q5diYeMiIDQbi0qFvq5PoA/XUSk1LJld0qSeOPxGJy9+srXpaTPEZrtWW6XizYeW49wjvcgaa2lor+VqZHNa3AeCRzcRkYtVVqLygxDF/zl/KV34Ivc+SSDPScrRVaqBGe0cJu+NHk8JpPn3XsEQHKzKb2STfVNw58TN0ikUkujuUiZG4/eeELcTEjXAg1wiDQem6Ft/aErfIkiVUDsGt2pNGWS4A0j3GXh749IpFYW/G2aM5jJ9Q6XVyLU/UaD9BIl0Vrs5XTbIVz/L3iYfdc7BPDLd/HPbwalAklMnalp5ID4BIH8c0QlCc6gMntOuU6953KdOj9fIrXGVLAmiLinDPOX3sHJ6MNvrl9aV4qd/1KAl6PtAPf45UbQtS92wB1n9WfFCP+EnkJ4OUpskSnBaUuu3Zest9sIdjveWuwNY/x7Ib897Ea9Pd/6y88shC2XoW237/U9T0885Jcb8bZwjxznO1a7Ef7ZGjyzE9z8Ftkll7AEB2ZBrWcdlF8krxQuw+cFBevwQcaWRfo7HL5t3LIKTT9iHTxX3Frl5Zcb6SvDR1zWEV9RoWi05cRG79U5iS10Xe+LcJIbm8cbpd5DnKjdal5KjJGtR7qggVuHw1v2V26pkeGwu3VeYrmR0foS/PUqHoh7U4wjHr+lUrYEC1Wr3rKO+Gs31ElUrYlqOg6Ee4B1+Nz3jU7HG27s/D/orBi7IvxyI94mHgje2hV2fxK9eQtK+C0KSi4BCfY28aLjfa1EGpCk1uK4agUOwwo86j92tsO27c/fOH3wCGo9EOWXG+GBVIV8g5GW0tH+KhSKlfBbFEiwUQjIr+KvWHykUSvJcXJPqPP/eDfMrSmC+XIHhe5zi4ygRzCPX27EG6dWBydmfyytbOdWuunjtyhxvQIee2tpPBPuDEtb1kS4B/C3I9xqI8Wz18cv/bg8Tlpu5P1D8RNnnjNlC3EINh5DnXDWcvQdWCHf31bvAOzKLkD2VngR7ENF9q4D2P+qtDJesE8WOcottxOxRNlxvWKDXQN/S3BCCYBksbUoKsGujH9gFRlkGvhbEtFRJHsahZI7TBr527Su1yyTWma75g9DSHepQFysaRaZ74tDpmvJiPROsROE1NKgtSgqwXJ6a7nsSG+q5aZm+jWLDCSxyiKkhhJsIBzsWZg6Q8/1ZgKiWWtRRILTNh6taf2tgUUgxM/5FbImvTI1SOVZi9RdbzpqZW3qDEUJBll2TMtIY1pBlkHWWIJzJFIrh03pTSq5pKU4C3tFVqoES3O9LPlb6UdopezyNXO9wLi/TSfBJlEgJpalN4OuWqWpNGshnumYaS2KSrBLpJJhXHqTqsGM1GLR3wpH6nQbSEk1BTrBMcX1TgJi0IP0pvGwVmmOmE0JtqS9WrqQ3olxkENmWZiV4EnKZNWFv5VgyCG5yMpF+opkCoEEyjEswROD2ipBBFh2vR4xWdaJBE91vcy2FsUkuDCFWoX6kt6prhd042/TlesJ1wtj0uvSJ5BxA2WVaLiYjUmWlvHWopgE5+jN36Z1vZYEtSx68bfCwQsVID20FsUk2BYHYtOr9Ca5XjOmltmuwyIrVYJNSCetRVHXm6eX1qKo67Xm6LTISpVg0Lf0Trhe0J2/FY4333rzmcCBDMiApmM6npH4Hy7cVIScwdnlAAAAAElFTkSuQmCC" width="200" height="166" />

In JavaScript, we can do this with the following:

    50 * Math.tan(degToRad(60)).

We use our `degToRad()` function to convert 60 degrees to radians, as [`Math.tan()`](math/tan) expects an input value in radians.

### Returning a random integer between two bounds

This can be achieved with a combination of [`Math.random()`](math/random) and [`Math.floor()`](math/floor):

    function random(min, max) {
      const num = Math.floor(Math.random() * (max - min + 1)) + min;
      return num;
    }

    random(1, 10);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math-object">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Math' in that specification.</span></a></td></tr></tbody></table>

`E`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`LN2`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`LN10`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`LOG2E`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`LOG10E`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`PI`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`SQRT1_2`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`SQRT2`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`abs`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`acos`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`acosh`

38

12

25

No

25

8

38

38

25

25

8

3.0

`asin`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`asinh`

38

12

25

No

25

8

38

38

25

25

8

3.0

`atan`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`atan2`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

`atanh`

38

12

25

No

25

8

38

38

25

25

8

3.0

`cbrt`

38

12

25

No

25

8

38

38

25

25

8

3.0

`ceil`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`clz32`

38

12

31

No

25

7

38

38

31

25

7

3.0

`cos`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`cosh`

38

12

25

No

25

8

38

38

25

25

8

3.0

`exp`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`expm1`

38

12

25

No

25

8

38

38

25

25

8

3.0

`floor`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`fround`

38

12

26

No

25

8

38

38

26

25

8

3.0

`hypot`

38

12

27

No

25

8

38

38

27

25

8

3.0

`imul`

28

12

20

No

16

7

≤37

28

20

15

7

1.5

`log`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`log1p`

38

12

25

No

25

8

38

38

25

25

8

3.0

`log2`

38

12

25

No

25

8

38

38

25

25

8

3.0

`log10`

38

12

25

No

25

8

38

38

25

25

8

3.0

`max`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`min`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`pow`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`random`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`round`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`sign`

38

12

25

No

25

9

38

38

25

25

9

3.0

`sin`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`sinh`

38

12

25

No

25

8

38

38

25

25

8

3.0

`sqrt`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`tan`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`tanh`

38

12

25

No

25

8

38

38

25

25

8

3.0

`trunc`

38

12

25

No

25

8

38

38

25

25

8

3.0

## See also

-   [`Number`](number)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math</a>

# Math.max()

The `Math.max()` function returns the largest of the zero or more numbers given as input parameters, or [`NaN`](../nan) if any parameter isn't a number and can't be converted into one.

## Syntax

    Math.max()
    Math.max(value0)
    Math.max(value0, value1)
    Math.max(value0, value1, ... , valueN)

### Parameters

`value1, value2, ...`  
Zero or more numbers among which the largest value will be selected and returned.

### Return value

The largest of the given numbers. If any one or more of the parameters cannot be converted into a number, [`NaN`](../nan) is returned. The result is -[`Infinity`](../infinity) if no parameters are provided.

## Description

Because `max()` is a static method of `Math`, you always use it as `Math.max()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

If no arguments are given, the result is -[`Infinity`](../infinity).

If at least one of arguments cannot be converted to a number, the result is [`NaN`](../nan).

## Examples

### Using Math.max()

    Math.max(10, 20);   //  20
    Math.max(-10, -20); // -10
    Math.max(-10, 20);  //  20

### Getting the maximum element of an array

[`Array.reduce()`](../array/reduce) can be used to find the maximum element in a numeric array, by comparing each value:

    var arr = [1,2,3];
    var max = arr.reduce(function(a, b) {
        return Math.max(a, b);
    });

The following function uses [`Function.prototype.apply()`](../function/apply) to get the maximum of an array. `getMaxOfArray([1, 2, 3])` is equivalent to `Math.max(1, 2, 3)`, but you can use `getMaxOfArray()` on programmatically constructed arrays. This should only be used for arrays with relatively few elements.

    function getMaxOfArray(numArray) {
      return Math.max.apply(null, numArray);
    }

The new [spread operator](../../operators/spread_syntax) is a shorter way of writing the `apply` solution to get the maximum of an array:

    var arr = [1, 2, 3];
    var max = Math.max(...arr);

However, both spread (`...`) and `apply` will either fail or return the wrong result if the array has too many elements, because they try to pass the array elements as function parameters. See [Using apply and built-in functions](../function/apply#using_apply_and_built-in_functions) for more details. The `reduce` solution does not have this problem.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.max">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.max</span></a></td></tr></tbody></table>

`max`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.min()`](min)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max</a>

# Number.MAX_SAFE_INTEGER

The `Number.MAX_SAFE_INTEGER` constant represents the maximum safe integer in JavaScript (`253 - 1`).

For larger integers, consider using [`BigInt`](../bigint).

Property attributes of `Number.MAX_SAFE_INTEGER`

Writable

no

Enumerable

no

Configurable

no

## Description

The `MAX_SAFE_INTEGER` constant has a value of `9007199254740991` (9,007,199,254,740,991 or ~9 quadrillion). The reasoning behind that number is that JavaScript uses [double-precision floating-point format numbers](https://en.wikipedia.org/wiki/Double_precision_floating-point_format) as specified in [IEEE 754](https://en.wikipedia.org/wiki/IEEE_floating_point) and can only safely represent integers between `-(253 - 1)` and `253 - 1`.

Safe in this context refers to the ability to represent integers exactly and to correctly compare them. For example, `Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2` will evaluate to true, which is mathematically incorrect. See [`Number.isSafeInteger()`](issafeinteger) for more information.

This field does not exist in old browsers. Using it without checking its existence, such as `Math.max(Number.MAX_SAFE_INTEGER, 2)`, will yield undesired results such as NaN.

Because `MAX_SAFE_INTEGER` is a static property of [`Number`](../number), you always use it as `Number.MAX_SAFE_INTEGER`, rather than as a property of a [`Number`](../number) object you created.

## Polyfill

    if (!Number.MAX_SAFE_INTEGER) {
        Number.MAX_SAFE_INTEGER = 9007199254740991; // Math.pow(2, 53) - 1;
    }

## Examples

### Return value of MAX_SAFE_INTEGER

    Number.MAX_SAFE_INTEGER; // 9007199254740991

### Numbers higher than safe integer

This returns 2 because in floating points, the value is actually the decimal trailing "1" except for in subnormal precision cases such as zero.

    Number.MAX_SAFE_INTEGER * Number.EPSILON; // 2

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-number.max_safe_integer">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-number.max_safe_integer</span></a></td></tr></tbody></table>

`MAX_SAFE_INTEGER`

34

12

31

No

21

9

≤37

34

31

21

9

2.0

## See also

-   [`Number.MIN_SAFE_INTEGER`](min_safe_integer)
-   [`Number.isSafeInteger()`](issafeinteger)
-   [`BigInt`](../bigint)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER</a>

# Number.MAX_VALUE

The `Number.MAX_VALUE` property represents the maximum numeric value representable in JavaScript.

Property attributes of `Number.MAX_VALUE`

Writable

no

Enumerable

no

Configurable

no

## Description

The `MAX_VALUE` property has a value of approximately `1.79E+308`, or 2<sup>1024</sup>. Values larger than `MAX_VALUE` are represented as [`Infinity`](../infinity).

Because `MAX_VALUE` is a static property of [`Number`](../number), you always use it as `Number.MAX_VALUE`, rather than as a property of a [`Number`](../number) object you created.

## Examples

### Using MAX_VALUE

The following code multiplies two numeric values. If the result is less than or equal to `MAX_VALUE`, the `func1` function is called; otherwise, the `func2` function is called.

    if (num1 * num2 <= Number.MAX_VALUE) {
      func1();
    } else {
      func2();
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-number.max_value">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-number.max_value</span></a></td></tr></tbody></table>

`MAX_VALUE`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Number.MIN_VALUE`](min_value)
-   The [`Number`](../number) object it belongs to

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE</a>

# Intl.Locale.prototype.maximize()

The `Intl.Locale.prototype.maximize()` method gets the most likely values for the language, script, and region of the locale based on existing values.

## Syntax

    maximize()

### Return value

A [`Locale`](../locale) instance whose `baseName` property returns the result of the [Add Likely Subtags](https://www.unicode.org/reports/tr35/#Likely_Subtags) algorithm executed against _[`locale.baseName`](basename)_.

## Description

Sometimes, it is convenient to be able to identify the most likely locale language identifier subtags based on an incomplete langauage ID. The Add Likely Subtags algorithm gives us this functionality. For instance, given the language ID "en", the algorithm would return "en-Latn-US", since English can only be written in the Latin script, and is most likely to be used in the United States, as it is the largest English-speaking country in the world. This functionality is provided to JavaScript programmers via the `maximize()` method. `maximize()` only affects the main subtags that comprise the [language identifier](https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions): language, script, and region subtags. Other subtags after the "-u" in the locale identifier are called extension subtags and are not affected by the `maximize()` method. Examples of these subtags include [`Locale.hourCycle`](hourcycle), [`Locale.calendar`](calendar), and [`Locale.numeric`](numeric).

## Examples

### Using maximize

    let myLocale = new Intl.Locale("fr", {hourCycle: "h24", calendar: "gregory"});
    console.log(myLocale.baseName); // Prints "fr"
    console.log(myLocale.toString()); // Prints "fr-u-ca-gregory-hc-h24"
    let myLocMaximized = myLocale.maximize();

    // Prints "fr-Latn-FR". The "Latn" and "FR" tags are added,
    // since French is only written in the Latin script and is most likely to be spoken in France.
    console.log(myLocMaximized.baseName);

    // Prints "fr-Latn-FR-u-ca-gregory-hc-h24".
    // Note that the extension tags (after "-u") remain unchanged.
    console.log(myLocMaximized.toString());

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.Locale.prototype.maximize">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.Locale.prototype.maximize</span></a></td></tr></tbody></table>

`maximize`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl.Locale`](../locale)
-   [`Intl.Locale.baseName`](basename)
-   [Unicode's Likely Subtags spec](https://www.unicode.org/reports/tr35/#Likely_Subtags)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize</a>

# WebAssembly.Memory

The `WebAssembly.Memory` object is a resizable [`ArrayBuffer`](../arraybuffer) or `SharedArrayBuffer` that holds the raw bytes of memory accessed by a WebAssembly `Instance`.

A memory created by JavaScript or in WebAssembly code will be accessible and mutable from both JavaScript and WebAssembly.

## Constructor

[`WebAssembly.Memory()`](memory/memory)  
Creates a new `Memory` object.

## Instance properties

[`Memory.prototype.buffer`](memory/buffer)  
An accessor property that returns the buffer contained in the memory.

## Instance methods

[`Memory.prototype.grow()`](memory/grow)  
Increases the size of the memory instance by a specified number of WebAssembly pages (each one is 64KB in size).

## Examples

### Creating a new Memory object

There are two ways to get a `WebAssembly.Memory` object. The first way is to construct it from JavaScript. The following snippet creates a new WebAssembly Memory instance with an initial size of 10 pages (640KiB), and a maximum size of 100 pages (6.4MiB). Its `buffer` property will return an `ArrayBuffer`.

    var memory = new WebAssembly.Memory({initial:10, maximum:100});

The following example (see [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) on GitHub, and [view it live also](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)) fetches and instantiates the loaded memory.wasm byte code using the [`WebAssembly.instantiateStreaming()`](instantiatestreaming) method, while importing the memory created in the line above. It then stores some values in that memory, then exports a function and uses it to sum some values.

    WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
    .then(obj => {
      var i32 = new Uint32Array(memory.buffer);
      for (var i = 0; i < 10; i++) {
        i32[i] = i;
      }
      var sum = obj.instance.exports.accumulate(0, 10);
      console.log(sum);
    });

The second way to get a WebAssembly.Memory object is to have it exported by a WebAssembly module. This memory can be accessed in the `exports` property of the Web Assembly instance (after the memory is exported within the Web Assembly module). The following snippet imports a memory exported from WebAssembly with the name `memory`, and then prints out the first element of the memory, interpreted as an Uint32Array.

    WebAssembly.instantiateStreaming(fetch('memory.wasm'))
    .then(obj => {
       var i32 = new Uint32Array(obj.instance.exports.memory.buffer);
       console.log(i32[0]);
     });

### Creating a shared memory

By default, WebAssembly memories are unshared. You can create a [shared memory](https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format#shared_memories) by passing `shared: true` in the constructor's initialization object:

    let memory = new WebAssembly.Memory({initial:10, maximum:100, shared: true});

This memory's `buffer` property will return a `SharedArrayBuffer`.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#memories">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#memories</span></a></td></tr></tbody></table>

`Memory`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

`Memory`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

`buffer`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

`grow`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory</a>

# Error.prototype.message

The `message` property is a human-readable description of the error.

## Description

This property contains a brief description of the error if one is available or has been set. [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) makes extensive use of the `message` property for exceptions. The `message` property combined with the [`name`](name) property is used by the [`Error.prototype.toString()`](tostring) method to create a string representation of the Error.

By default, the `message` property is an empty string, but this behavior can be overridden for an instance by specifying a message as the first argument to the [`Error`](error) constructor.

## Examples

### Throwing a custom error

    var e = new Error('Could not parse input');
    // e.message is 'Could not parse input'
    throw e;

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-error.prototype.message">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-error.prototype.message</span></a></td></tr></tbody></table>

`message`

1

12

1

6

5

1

1

18

4

10.1

1

1.0

## See also

-   [`Error.prototype.name`](name)
-   [`Error.prototype.toString()`](tostring)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/message" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/message</a>

# Method definitions

Starting with ECMAScript 2015, a shorter syntax for method definitions on objects initializers is introduced. It is a shorthand for a function assigned to the method's name.

## Syntax

    const obj = {
      get property() {},
      set property(value) {},
      property( parameters… ) {},
      *generator( parameters… ) {},
      async property( parameters… ) {},
      async* generator( parameters… ) {},

      //  with computed keys
      get [property]() {},
      set [property](value) {},
      [property]( parameters… ) {},
      *[generator]( parameters… ) {},
      async [property]( parameters… ) {},
      async* [generator]( parameters… ) {},
    };

## Description

The shorthand syntax is similar to the [getter](get) and [setter](set) syntax introduced in ES5.

Given the following code:

    const obj = {
      foo: function() {
        // ...
      },
      bar: function() {
        // ...
      }
    }

You are now able to shorten this to:

    const obj = {
      foo() {
        // ...
      },
      bar() {
        // ...
      }
    }

### Generator methods

[Generator methods](../statements/function*) can be defined using the shorthand syntax as well.

When doing so:

-   The asterisk (`*`) in the shorthand syntax must be _before_ the generator property name. (That is, `* g(){}` will work, but `g *(){}` will not.)
-   Non-generator method definitions cannot contain the `yield` keyword. This means that [legacy generator functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function) won't work either, and will throw a [`SyntaxError`](../global_objects/syntaxerror). Always use `yield` in conjunction with the asterisk (`*`).

<!-- -->

    // Using a named property
    const obj2 = {
      g: function* () {
        let index = 0
        while (true) {
          yield index++
        }
      }
    };

    // The same object using shorthand syntax
    const obj2 = {
      * g() {
        let index = 0
        while (true) {
          yield index++
        }
      }
    };

    const it = obj2.g()
    console.log(it.next().value)  // 0
    console.log(it.next().value)  // 1

### Async methods

[Async methods](../statements/async_function) can also be defined using the shorthand syntax.

    // Using a named property
    const obj3 = {
      f: async function () {
        await some_promise
      }
    }

    // The same object using shorthand syntax
    const obj3 = {
      async f() {
        await some_promise
      }
    }

### Async generator methods

[Generator methods](../statements/function*) can also be [async](../statements/async_function).

    const obj4 = {
      f: async function* () {
        yield 1
        yield 2
        yield 3
      }
    };

    // The same object using shorthand syntax
    const obj4 = {
      async* f() {
       yield 1
       yield 2
       yield 3
      }
    }

### Method definitions are not constructable

Methods cannot be constructors! They will throw a [`TypeError`](../global_objects/typeerror) if you try to instantiate them.

    const objA = {
      method() {}
    }
    new objA.method  // TypeError: obj.method is not a constructor

    const objB = {
      * g() {}
    }
    new objB.g       // TypeError: obj.g is not a constructor (changed in ES2016)

## Examples

### Simple test case

    const obj = {
      a: 'foo',
      b() { return this.a }
    };
    console.log(obj.b())  // "foo"

### Computed property names

The shorthand syntax also supports computed property names.

    const bar = {
      foo0: function() { return 0 },
      foo1() { return 1 },
      ['foo' + 2]() { return 2 }
    }

    console.log(bar.foo0())  // 0
    console.log(bar.foo1())  // 1
    console.log(bar.foo2())  // 2

    // A global function
    function foo() {
      return 1
    }

    let name = 'foo'
    console.log(window[name]())  // 1

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-method-definitions">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-method-definitions</span></a></td></tr></tbody></table>

`Method_definitions`

39

12

34

No

26

9

39

39

34

26

9

4.0

`async_generator_methods`

63

79

55

No

50

12

63

63

55

46

12

8.0

`async_methods`

55

15

52

No

42

10.1

55

55

52

42

10.3

6.0

`generator_methods_not_constructable`

42

13

43

No

29

9.1

42

42

43

29

9.3

4.0

## See also

-   `get`
-   `set`
-   [Lexical grammar](../lexical_grammar)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions</a>

# Math.min()

The static function `Math.min()` returns the lowest-valued number passed into it, or [`NaN`](../nan) if any parameter isn't a number and can't be converted into one.

## Syntax

    Math.min()
    Math.min(value0)
    Math.min(value0, value1)
    Math.min(value0, value1, ... , valueN)

### Parameters

`value1, value2, ...`  
Zero or more numbers among which the lowest value will be selected and returned.

### Return value

The smallest of the given numbers. If any one or more of the parameters cannot be converted into a number, [`NaN`](../nan) is returned. The result is [`Infinity`](../infinity) if no parameters are provided.

## Description

Because `min()` is a static method of `Math`, you always use it as `Math.min()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

If no arguments are given, the result is [`Infinity`](../infinity).

If at least one of arguments cannot be converted to a number, the result is [`NaN`](../nan).

## Examples

### Using Math.min()

This finds the min of `x` and `y` and assigns it to `z`:

    var x = 10, y = -20;
    var z = Math.min(x, y);

### Clipping a value with Math.min()

`Math.min()` is often used to clip a value so that it is always less than or equal to a boundary. For instance, this

    var x = f(foo);

    if (x > boundary) {
      x = boundary;
    }

may be written as this

    var x = Math.min(f(foo), boundary);

[`Math.max()`](max) can be used in a similar way to clip a value at the other end.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.min">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.min</span></a></td></tr></tbody></table>

`min`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.max()`](max)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min</a>

# Number.MIN_SAFE_INTEGER

The `Number.MIN_SAFE_INTEGER` constant represents the minimum safe integer in JavaScript (`-(253 - 1)`).

To represent integers smaller than this, consider using [`BigInt`](../bigint).

Property attributes of `Number.MIN_SAFE_INTEGER`

Writable

no

Enumerable

no

Configurable

no

## Description

The `MIN_SAFE_INTEGER` constant has a value of `-9007199254740991` (-9,007,199,254,740,991 or about -9 quadrillion). The reasoning behind that number is that JavaScript uses [double-precision floating-point format numbers](https://en.wikipedia.org/wiki/Double_precision_floating-point_format) as specified in [IEEE 754](https://en.wikipedia.org/wiki/IEEE_floating_point) and can only safely represent numbers between `-(253 - 1)` and `253 - 1`. See [`Number.isSafeInteger()`](issafeinteger) for more information.

Because `MIN_SAFE_INTEGER` is a static property of [`Number`](../number), you always use it as `Number.MIN_SAFE_INTEGER`, rather than as a property of a [`Number`](../number) object you created.

## Examples

### Using MIN_SAFE_INTEGER

    Number.MIN_SAFE_INTEGER // -9007199254740991
    -(Math.pow(2, 53) - 1)  // -9007199254740991

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-number.min_safe_integer">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-number.min_safe_integer</span></a></td></tr></tbody></table>

`MIN_SAFE_INTEGER`

34

12

31

No

21

9

≤37

34

31

21

9

2.0

## See also

-   [`Number.MAX_SAFE_INTEGER`](max_safe_integer)
-   [`Number.isSafeInteger()`](issafeinteger)
-   [`BigInt`](../bigint)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER</a>

# Number.MIN_VALUE

The `Number.MIN_VALUE` property represents the smallest positive numeric value representable in JavaScript.

Property attributes of `Number.MIN_VALUE`

Writable

no

Enumerable

no

Configurable

no

## Description

`Number.MIN_VALUE` is the smallest positive number (not the most negative number) that can be represented within float precision — in other words, the number closest to 0. That's approximately `5e-324` (`5 × 10-324`). The ECMAScript spec doesn't define a precise value that implementations are required to support — instead the spec says, _"must be the smallest non-zero positive value that can actually be represented by the implementation”_. But in practice, its precise value in browsers and in Node.js is `2-1074`.

Because `MIN_VALUE` is a static property of [`Number`](../number), you always use it as `Number.MIN_VALUE`, rather than as a property of a [`Number`](../number) object you created.

## Examples

### Using MIN_VALUE

The following code divides two numeric values. If the result is greater than or equal to `MIN_VALUE`, the `func1` function is called; otherwise, the `func2` function is called.

    if (num1 / num2 >= Number.MIN_VALUE) {
      func1();
    } else {
      func2();
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-number.min_value">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-number.min_value</span></a></td></tr></tbody></table>

`MIN_VALUE`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Number.MAX_VALUE`](max_value)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE</a>

# Intl.Locale.prototype.minimize()

The `Intl.Locale.prototype.minimize()` method attempts to remove information about the locale that would be added by calling [`Locale.maximize()`](maximize).

## Syntax

    minimize()

### Return value

A [`Locale`](../locale) instance whose `baseName` property returns the result of the [Remove Likely Subtags](https://www.unicode.org/reports/tr35/#Likely_Subtags) algorithm executed against _[`locale.baseName`](basename)_.

## Description

This method carries out the reverse of [`maximize()`](maximize), removing any language, script, or region subtags from the locale language identifier (essentially the contents of `baseName`). This is useful when there are superfluous subtags in the language identifier; for instance, "en-Latn" can be simplified to "en", since "Latn" is the only script used to write English. `minimize()` only affects the main subtags that comprise the [language identifier](https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions): language, script, and region subtags. Other subtags after the "-u" in the locale identifier are called extension subtags and are not affected by the `minimize()` method. Examples of these subtags include [`Locale.hourCycle`](hourcycle), [`Locale.calendar`](calendar), and [`Locale.numeric`](numeric).

## Examples

### Using minimize

    let myLocale = new Intl.Locale("fr-Latn-FR", {hourCycle: "h24", calendar: "gregory"});
    console.log(myLocale.baseName); // Prints "fr-Latn-FR"
    console.log(myLocale.toString()); // Prints "fr-Latn-FR-u-ca-gregory-hc-h24"

    let myLocMinimized = myLocale.minimize();

    // Prints "fr", since French is only written in the Latin script
    // and is most likely to be spoken in France.
    console.log(myLocMinimized.baseName);

    // Prints "fr-u-ca-gregory-hc-h24".
    // Note that the extension tags (after "-u") remain unchanged.
    console.log(myLocMinimized.toString());

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.Locale.prototype.minimize">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.Locale.prototype.minimize</span></a></td></tr></tbody></table>

`minimize`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl.Locale`](../locale)
-   [`Intl.Locale.baseName`](basename)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize</a>

# SyntaxError: missing \] after element list

The JavaScript exception "missing \] after element list" occurs when there is an error with the array initializer syntax somewhere. Likely there is a closing bracket ("`]`") or a comma ("`,`") missing.

## Message

    SyntaxError: missing ] after element list

## Error type

[`SyntaxError`](../global_objects/syntaxerror).

## What went wrong?

There is an error with the array initializer syntax somewhere. Likely there is a closing bracket ("`]`") or a comma ("`,`") missing.

## Examples

### Incomplete array initializer

    var list = [1, 2,

    var instruments = [
      'Ukulele',
      'Guitar',
      'Piano'
    };

    var data = [{foo: 'bar'} {bar: 'foo'}];

Correct would be:

    var list = [1, 2];

    var instruments = [
     'Ukulele',
     'Guitar',
     'Piano'
    ];

    var data = [{foo: 'bar'}, {bar: 'foo'}];

## See also

-   [`Array`](../global_objects/array)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_bracket_after_list" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_bracket_after_list</a>

# SyntaxError: missing : after property id

The JavaScript exception "missing : after property id" occurs when objects are created using the [object initializer](../operators/object_initializer) syntax. A colon (`:`) separates keys and values for the object's properties. Somehow, this colon is missing or misplaced.

## Message

    SyntaxError: Expected ':' (Edge)
    SyntaxError: missing : after property id (Firefox)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

When creating objects with the [object initializer](../operators/object_initializer) syntax, a colon (`:`) separates keys and values for the object's properties.

    var obj = { propertyKey: 'value' };

## Examples

### Colons vs. equal signs

This code fails, as the equal sign can't be used this way in this object initializer syntax.

    var obj = { propertyKey = 'value' };
    // SyntaxError: missing : after property id

Correct would be to use a colon, or to use square brackets to assign a new property after the object has been created already.

    var obj = { propertyKey: 'value' };

    // or alternatively

    var obj = { };
    obj['propertyKey'] = 'value';

### Empty properties

You can't create empty properties like this:

    var obj = { propertyKey; };
    // SyntaxError: missing : after property id

If you need to define a property without a value, you might use [`null`](../global_objects/null) as a value.

    var obj = { propertyKey: null };

### Computed properties

If you create a property key from an expression, you need to use square brackets. Otherwise the property name can't be computed:

    var obj = { 'b'+'ar': 'foo' };
    // SyntaxError: missing : after property id

Put the expression in brackets `[]`:

    var obj = { ['b'+'ar']: 'foo' };

## See also

-   [Object initializer](../operators/object_initializer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_colon_after_property_id" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_colon_after_property_id</a>

# SyntaxError: missing } after function body

The JavaScript exception "missing } after function body" occurs when there is a syntax mistake when creating a function somewhere. Check if any closing curly brackets or parenthesis are in the correct order.

## Message

    SyntaxError: Expected '}' (Edge)
    SyntaxError: missing } after function body (Firefox)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

There is a syntax mistake when creating a function somewhere. Also check if any closing curly brackets or parenthesis are in the correct order. Indenting or formatting the code a bit nicer might also help you to see through the jungle.

## Examples

### Forgotten closing curly bracket

Oftentimes, there is a missing curly bracket in your function code:

    var charge = function() {
      if (sunny) {
        useSolarCells();
      } else {
        promptBikeRide();
    };

Correct would be:

    var charge = function() {
      if (sunny) {
        useSolarCells();
      } else {
        promptBikeRide();
      }
    };

It can be more obscure when using [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE), [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), or other constructs that use a lot of different parenthesis and curly brackets, for example.

    (function() { if (true) { return false; } );

Oftentimes, indenting differently or double checking indentation helps to spot these errors.

    (function() {
      if (true) {
        return false;
      }
    });

## See also

-   [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_function_body" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_function_body</a>

# SyntaxError: missing } after property list

The JavaScript exception "missing } after property list" occurs when there is a mistake in the [object initializer](../operators/object_initializer) syntax somewhere. Might be in fact a missing curly bracket, but could also be a missing comma.

## Message

    SyntaxError: Expected '}' (Edge)
    SyntaxError: missing } after property list (Firefox)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

There is a mistake in the [object initializer](../operators/object_initializer) syntax somewhere. Might be in fact a missing curly bracket, but could also be a missing comma, for example. Also check if any closing curly brackets or parenthesis are in the correct order. Indenting or formatting the code a bit nicer might also help you to see through the jungle.

## Examples

### Forgotten comma

Oftentimes, there is a missing comma in your object initializer code:

    var obj = {
      a: 1,
      b: { myProp: 2 }
      c: 3
    };

Correct would be:

    var obj = {
      a: 1,
      b: { myProp: 2 },
      c: 3
    };

## See also

-   [Object initializer](../operators/object_initializer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_property_list" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_property_list</a>

# SyntaxError: missing formal parameter

The JavaScript exception "missing formal parameter" occurs when your function declaration is missing valid parameters.

## Message

    SyntaxError: missing formal parameter (Firefox)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

"Formal parameter" is a fancy way of saying "function parameter". Your function declaration is missing valid parameters. In the declaration of a function, the parameters must be [identifiers](https://developer.mozilla.org/en-US/docs/Glossary/Identifier), not any value like numbers, strings, or objects. Declaring functions and calling functions are two separate steps. Declarations require identifier as parameters, and only when calling (invoking) the function, you provide the values the function should use.

In [JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/JavaScript), identifiers can contain only alphanumeric characters (or "$" or "\_"), and may not start with a digit. An identifier differs from a **string** in that a string is data, while an identifier is part of the code.

## Examples

### Provide proper function parameters

Function parameters must be identifiers when setting up a function. All these function declarations fail, as they are providing values for their parameters:

    function square(3) {
      return number * number;
    };
    // SyntaxError: missing formal parameter

    function greet("Howdy") {
      return greeting;
    };
    // SyntaxError: missing formal parameter

    function log({ obj: "value"}) {
      console.log(arg)
    };
    // SyntaxError: missing formal parameter

You will need to use identifiers in function declarations:

    function square(number) {
      return number * number;
    };

    function greet(greeting) {
      return greeting;
    };

    function log(arg) {
      console.log(arg)
    };

You can then call these functions with the arguments you like:

    square(2); // 4

    greet("Howdy"); // "Howdy"

    log({obj: "value"}); // Object { obj: "value" }

## See also

-   Other errors regarding formal parameters:
    -   [SyntaxError: Malformed formal parameter](malformed_formal_parameter)
    -   [SyntaxError: redeclaration of formal parameter "x"](redeclared_parameter)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter</a>

# SyntaxError: missing = in const declaration

The JavaScript exception "missing = in const declaration" occurs when a const declaration was not given a value in the same statement (like `const RED_FLAG;`). You need to provide one (`const RED_FLAG = '#ff0'`).

## Message

    SyntaxError: Const must be initialized (Edge)
    SyntaxError: missing = in const declaration (Firefox)
    SyntaxError: Missing initializer in const declaration (Chrome)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

A constant is a value that cannot be altered by the program during normal execution. It cannot change through re-assignment, and it can't be redeclared. In JavaScript, constants are declared using the `const` keyword. An initializer for a constant is required; that is, you must specify its value in the same statement in which it's declared (which makes sense, given that it can't be changed later).

## Examples

### Missing const initializer

Unlike `var` or `let`, you must specify a value for a `const` declaration. This throws:

    const COLUMNS;
    // SyntaxError: missing = in const declaration

### Fixing the error

There are multiple options to fix this error. Check what was intended to be achieved with the constant in question.

#### Adding a constant value

Specify the constant value in the same statement in which it's declared:

    const COLUMNS = 80;

#### `const`, `let` or `var`?

Do not use `const` if you weren't meaning to declare a constant. Maybe you meant to declare a block-scoped variable with `let` or global variable with `var`. Both don't require an initial value.

    let columns;

## See also

-   `const`
-   `let`
-   `var`

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const</a>

# SyntaxError: missing name after . operator

The JavaScript exception "missing name after . operator" occurs when there is a problem with how the dot operator (`.`) is used for [property access](../operators/property_accessors).

## Message

    SyntaxError: missing name after . operator

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

The dot operator (`.`) is used for [property access](../operators/property_accessors). You will have to specify the name of the property that you want to access. For computed property access, you might need to change your property access from using a dot to using square brackets. These will allow you to compute an expression. Maybe you intended to do concatenation instead? A plus operator (`+`) is needed in that case. Please see the examples below.

## Examples

### Property access

[Property accessors](../operators/property_accessors) in JavaScript use either the dot (.) or square brackets (`[]`), but not both. Square brackets allow computed property access.

    var obj = { foo: { bar: "baz", bar2: "baz2" } };
    var i = 2;

    obj.[foo].[bar]
    // SyntaxError: missing name after . operator

    obj.foo."bar"+i;
    // SyntaxError: missing name after . operator

To fix this code, you need to access the object like this:

    obj.foo.bar; // "baz"
    // or alternatively
    obj["foo"]["bar"]; // "baz"

    // computed properties require square brackets
    obj.foo["bar" + i]; // "baz2"

### Property access vs. concatenation

If you are coming from another programming language (like [PHP](https://developer.mozilla.org/en-US/docs/Glossary/PHP)), it is also easy to mix up the dot operator (`.`) and the concatenation operator (`+`).

    console.log("Hello" . "world");

    // SyntaxError: missing name after . operator

Instead you need to use a plus sign for concatenation:

    console.log("Hello" + "World");

## See also

-   [Property accessors](../operators/property_accessors)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator</a>

# SyntaxError: missing ) after argument list

The JavaScript exception "missing ) after argument list" occurs when there is an error with how a function is called. This might be a typo, a missing operator, or an unescaped string.

## Message

    SyntaxError: Expected ')' (Edge)
    SyntaxError: missing ) after argument list (Firefox)

## Error type

[`SyntaxError`](../global_objects/syntaxerror).

## What went wrong?

There is an error with how a function is called. This might be a typo, a missing operator, or an unescaped string, for example.

## Examples

Because there is no "+" operator to concatenate the string, JavaScript expects the argument for the `log` function to be just `"PI: "`. In that case, it should be terminated by a closing parenthesis.

    console.log('PI: ' Math.PI);
    // SyntaxError: missing ) after argument list

You can correct the `log` call by adding the "`+`" operator:

    console.log('PI: ' + Math.PI);
    // "PI: 3.141592653589793"

### Unterminated strings

    console.log('"Java" + "Script" = \"' + 'Java' + 'Script\");
    // SyntaxError: missing ) after argument list

Here JavaScript thinks that you meant to have `);` inside the string and ignores it, and it ends up not knowing that you meant the `);` to end the function `console.log`. To fix this, we could put a`'` after the "Script" string:

    console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"');
    // '"Java" + "Script" = "JavaScript"'

## See also

-   [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list</a>

# SyntaxError: missing ) after condition

The JavaScript exception "missing ) after condition" occurs when there is an error with how an `if` condition is written. It must appear in parenthesis after the `if` keyword.

## Message

    SyntaxError: Expected ')' (Edge)
    SyntaxError: missing ) after condition (Firefox)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

There is an error with how an `if` condition is written. In any programming language, code needs to make decisions and carry out actions accordingly depending on different inputs. The if statement executes a statement if a specified condition is truthy. In JavaScript, this condition must appear in parenthesis after the `if` keyword, like this:

    if (condition) {
      // do something if the condition is true
    }

## Examples

### Missing parenthesis

It might just be an oversight, carefully check all you parenthesis in your code.

    if (3 > Math.PI {
      console.log("wait what?");
    }

    // SyntaxError: missing ) after condition

To fix this code, you would need to add a parenthesis that closes the condition.

    if (3 > Math.PI) {
      console.log("wait what?");
    }

### Misused `is` keyword

If you are coming from another programming language, it is also easy to add keywords that don't mean the same or have no meaning at all in JavaScript.

    if (done is true) {
     console.log("we are done!");
    }

    // SyntaxError: missing ) after condition

Instead you need to use a correct [comparison operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators). For example:

    if (done === true) {
     console.log("we are done!");
    }

## See also

-   `if...else`
-   [Comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
-   [Making decisions in your code — conditionals](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition</a>

# SyntaxError: missing ; before statement

The JavaScript exception "missing ; before statement" occurs when there is a semicolon (`;`) missing somewhere and can't be added by [automatic semicolon insertion (ASI)](../lexical_grammar#automatic_semicolon_insertion). You need to provide a semicolon, so that JavaScript can parse the source code correctly.

## Message

    SyntaxError: Expected ';' (Edge)
    SyntaxError: missing ; before statement (Firefox)

## Error type

[`SyntaxError`](../global_objects/syntaxerror).

## What went wrong?

There is a semicolon (`;`) missing somewhere. [JavaScript statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) must be terminated with semicolons. Some of them are affected by [automatic semicolon insertion (ASI)](../lexical_grammar#automatic_semicolon_insertion), but in this case you need to provide a semicolon, so that JavaScript can parse the source code correctly.

However, oftentimes, this error is only a consequence of another error, like not escaping strings properly, or using `var` wrongly. You might also have too many parenthesis somewhere. Carefully check the syntax when this error is thrown.

## Examples

### Unescaped strings

This error can occur easily when not escaping strings properly and the JavaScript engine is expecting the end of your string already. For example:

    var foo = 'Tom's bar';
    // SyntaxError: missing ; before statement

You can use double quotes, or escape the apostrophe:

    var foo = "Tom's bar";
    var foo = 'Tom\'s bar';

### Declaring properties with var

You **cannot** declare properties of an object or array with a `var` declaration.

    var obj = {};
    var obj.foo = 'hi'; // SyntaxError missing ; before statement

    var array = [];
    var array[0] = 'there'; // SyntaxError missing ; before statement

Instead, omit the `var` keyword:

    var obj = {};
    obj.foo = 'hi';

    var array = [];
    array[0] = 'there';

### Bad keywords

If you come from another programming language, it is also common to use keywords that don't mean the same or have no meaning at all in javaScript:

    def print(info){
      console.log(info);
    }; // SyntaxError missing ; before statement

Instead, use `function` instead of `def`:

    function print(info){
      console.log(info);
    };

## See also

-   [Automatic semicolon insertion (ASI)](../lexical_grammar#automatic_semicolon_insertion)
-   [JavaScript statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement</a>

# WebAssembly.Module

A `WebAssembly.Module` object contains stateless WebAssembly code that has already been compiled by the browser — this can be efficiently [shared with Workers](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage), and instantiated multiple times.

## Constructor

[`WebAssembly.Module()`](module/module)  
Creates a new `Module` object.

## Static properties

[`WebAssembly.Module.customSections()`](module/customsections)  
Given a `Module` and string, returns a copy of the contents of all custom sections in the module with the given string name.

[`WebAssembly.Module.exports()`](module/exports)  
Given a `Module`, returns an array containing descriptions of all the declared exports.

[`WebAssembly.Module.imports()`](module/imports)  
Given a `Module`, returns an array containing descriptions of all the declared imports.

## Examples

### Sending a compiled module to a worker

The following example (see our [index-compile.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html) demo on GitHub, and [view it live](https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html) also) compiles the loaded `simple.wasm` byte code using the [`WebAssembly.compileStreaming()`](compilestreaming) method and then sends the resulting `Module` instance to a [worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) using [`postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage).

    var worker = new Worker("wasm_worker.js");

    WebAssembly.compileStreaming(fetch('simple.wasm'))
    .then(mod =>
      worker.postMessage(mod)
    );

In the worker (see `wasm_worker.js`) we define an import object for the module to use, then set up an event handler to receive the module from the main thread. When the module is received, we create an instance from it using the [`WebAssembly.instantiate()`](instantiate) method and invoke an exported function from inside it.

    var importObject = {
      imports: {
        imported_func: function(arg) {
          console.log(arg);
        }
      }
    };

    onmessage = function(e) {
      console.log('module received from main thread');
      var mod = e.data;

      WebAssembly.instantiate(mod, importObject).then(function(instance) {
        instance.exports.exported_func();
      });
    };

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#modules">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#modules</span></a></td></tr></tbody></table>

`Module`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

`Module`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

`customSections`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

`exports`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

`imports`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module</a>

# TypeError: More arguments needed

The JavaScript exception "more arguments needed" occurs when there is an error with how a function is called. More arguments need to be provided.

## Message

    TypeError: argument is not an Object and is not null (Edge)
    TypeError: Object.create requires at least 1 argument, but only 0 were passed
    TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 0 were passed
    TypeError: Object.defineProperties requires at least 1 argument, but only 0 were passed

## Error type

[`TypeError`](../global_objects/typeerror).

## What went wrong?

There is an error with how a function is called. More arguments need to be provided.

## Examples

### Required arguments not provided

The [`Object.create()`](../global_objects/object/create) method requires at least one argument and the [`Object.setPrototypeOf()`](../global_objects/object/setprototypeof) method requires at least two arguments:

    var obj = Object.create();
    // TypeError: Object.create requires at least 1 argument, but only 0 were passed

    var obj = Object.setPrototypeOf({});
    // TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 1 were passed

You can fix this by setting [`null`](../global_objects/null) as the prototype, for example:

    var obj = Object.create(null);

    var obj = Object.setPrototypeOf({}, null);

## See also

-   [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/More_arguments_needed" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/More_arguments_needed</a>

# RegExp.prototype.multiline

The `multiline` property indicates whether or not the "`m`" flag is used with the regular expression. `multiline` is a read-only property of an individual regular expression instance.

Property attributes of `RegExp.prototype.multiline`

Writable

no

Enumerable

no

Configurable

yes

## Description

The value of `multiline` is a [`Boolean`](../boolean) and is true if the "`m`" flag was used; otherwise, false. The "`m`" flag indicates that a multiline input string should be treated as multiple lines. For example, if "`m`" is used, "`^`" and "`$`" change from matching at only the start or end of the entire string to the start or end of any line within the string.

You cannot change this property directly.

## Examples

### Using multiline

    var regex = new RegExp('foo', 'm');

    console.log(regex.multiline); // true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-get-regexp.prototype.multiline">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-get-regexp.prototype.multiline</span></a></td></tr></tbody></table>

`multiline`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`prototype_accessor`

48

12

38

5.5

35

1.3

48

48

38

35

1

5.0

## See also

-   [`RegExp.lastIndex`](lastindex)
-   [`RegExp.prototype.dotAll`](dotall)
-   [`RegExp.prototype.global`](global)
-   [`RegExp.prototype.hasIndices`](hasindices)
-   [`RegExp.prototype.ignoreCase`](ignorecase)
-   [`RegExp.prototype.source`](source)
-   [`RegExp.prototype.sticky`](sticky)
-   [`RegExp.prototype.unicode`](unicode)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline</a>

# Multiplication (\*)

The multiplication operator (`*`) produces the product of the operands.

## Syntax

    Operator: x * y

## Examples

### Multiplication using numbers

     2 * 2      // 4
    -2 * 2     // -4

### Multiplication with Infinity

    Infinity * 0         // NaN
    Infinity * Infinity  // Infinity

### Multiplication with non-numbers

    'foo' * 2 // NaN

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-multiplicative-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-multiplicative-operators</span></a></td></tr></tbody></table>

`Multiplication`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Addition operator](addition)
-   [Subtraction operator](subtraction)
-   [Division operator](division)
-   [Remainder operator](remainder)
-   [Exponentiation operator](exponentiation)
-   [Increment operator](increment)
-   [Decrement operator](decrement)
-   [Unary negation operator](unary_negation)
-   [Unary plus operator](unary_plus)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication</a>

# Function.name

A [`Function`](../function) object's read-only `name` property indicates the function's name as specified when it was created, or it may be either `anonymous` or `''` (an empty string) for functions created anonymously.

Property attributes of `Function.name`

Writable

no

Enumerable

no

Configurable

yes

**Note:** In non-standard, pre-ES2015 implementations the `configurable` attribute was `false` as well.

## JavaScript compressors and minifiers

**Warning:** Be careful when using `Function.name` and source code transformations, such as those carried out by JavaScript compressors (minifiers) or obfuscators. These tools are often used as part of a JavaScript build pipeline to reduce the size of a program prior to deploying it to production. Such transformations often change a function's name at build-time.

Source code such as:

    function Foo() {};
    let foo = new Foo();

    if (foo.constructor.name === 'Foo') {
      console.log("'foo' is an instance of 'Foo'");
    } else {
      console.log('Oops!');
    }

may be compressed to:

    function a() {};
    let b = new a();
    if (b.constructor.name === 'Foo') {
      console.log("'foo' is an instance of 'Foo'");
    } else {
      console.log('Oops!');
    }

In the uncompressed version, the program runs into the truthy-branch and logs "`'foo' is an instance of 'Foo'`". Whereas, in the compressed version it behaves differently, and runs into the else-branch. If you rely on `Function.name`, like in the example above, make sure your build pipeline doesn't change function names, or don't assume a function to have a particular name.

## Examples

### Function statement name

The `name` property returns the name of a function statement.

    function doSomething() {}
    doSomething.name; // "doSomething"

### Function constructor name

Functions created with the syntax `new Function(...)` or just `Function(...)` create [`Function`](../function) objects and their name is "anonymous".

    (new Function).name; // "anonymous"

### Anonymous function expression

Anonymous function expressions that were created using the keyword `function` or arrow functions would have `""` (an empty string) as their name.

    (function() {}).name; // ""
    (() => {}).name; // ""

### Inferred function names

Variables and methods can infer the name of an anonymous function from its syntactic position (new in ECMAScript 2015).

    let f = function() {};
    let object = {
      someMethod: function() {}
    };

    console.log(f.name); // "f"
    console.log(object.someMethod.name); // "someMethod"

You can define a function with a name in a [function expression](../../operators/function):

    let object = {
      someMethod: function object_someMethod() {}
    };
    console.log(object.someMethod.name); // logs "object_someMethod"

    try { object_someMethod } catch(e) { console.log(e); }
    // ReferenceError: object_someMethod is not defined

The name property is read-only and cannot be changed by the assigment operator:

     let object = {
      // anonymous
      someMethod: function() {}
    };

    object.someMethod.name = 'otherMethod';
    console.log(object.someMethod.name); // someMethod

To change it, use [`Object.defineProperty()`](../object/defineproperty).

### Shorthand method names

    var o = {
      foo(){}
    };
    o.foo.name; // "foo";

### Bound function names

[`Function.bind()`](bind) produces a function whose name is "bound " plus the function name.

    function foo() {};
    foo.bind({}).name; // "bound foo"

### Function names for getters and setters

When using `get` and `set` accessor properties, "get" or "set" will appear in the function name.

    let o = {
      get foo(){},
      set foo(x){}
    };

    var descriptor = Object.getOwnPropertyDescriptor(o, "foo");
    descriptor.get.name; // "get foo"
    descriptor.set.name; // "set foo";

### Function names in classes

You can use `obj.constructor.name` to check the "class" of an object (but be sure to read the warnings below):

    function Foo() {}  // ES2015 Syntax: class Foo {}

    var fooInstance = new Foo();
    console.log(fooInstance.constructor.name); // logs "Foo"

**Warning:** The script interpreter will set the built-in `Function.name` property only if a function does not have an own property called _name_ (see section [9.2.11 of the ECMAScript2015 Language Specification](https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname)). However, ES2015 specifies the _static_ keyword such that static methods will be set as OwnProperty of the class constructor function (ECMAScript2015, [14.5.14.21.b](https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation) + [12.2.6.9](https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation)).

Therefore we can't obtain the class name for virtually any class with a static method property `name()`:

    class Foo {
      constructor() {}
      static name() {}
    }

With a `static name()` method `Foo.name` no longer holds the actual class name but a reference to the `name()` function object. Above class definition in ES2015 syntax will behave in Chrome or Firefox similar to the following snippet in ES5 syntax:

    function Foo() {}
    Object.defineProperty(Foo, 'name', { writable: true });
    Foo.name = function() {};

Trying to obtain the class of `fooInstance` via `fooInstance.constructor.name` won't give us the class name at all but a reference to the static class method. Example:

    let fooInstance = new Foo();
    console.log(fooInstance.constructor.name); // logs function name()

You may also see from the ES5 syntax example that in Chrome or Firefox our static definition of `Foo.name` becomes _writable_. The built-in definition in the absence of a custom static definition is _read-only_:

    Foo.name = 'Hello';
    console.log(Foo.name); // logs "Hello" if class Foo has a static name() property but "Foo" if not.

Therefore you may not rely on the built-in `Function.name` property to always hold a class's name.

### Symbols as function names

If a [`Symbol`](../symbol) is used a function name and the symbol has a description, the method's name is the description in square brackets.

    let sym1 = Symbol("foo");
    let sym2 = Symbol();
    let o = {
      [sym1]: function(){},
      [sym2]: function(){}
    };

    o[sym1].name; // "[foo]"
    o[sym2].name; // ""

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-function-instances-name">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-function-instances-name</span></a></td></tr></tbody></table>

`name`

15

14

1

No

10.5

6

1

18

4

11

6

1.0

`configurable_true`

43

14

38

No

30

10

43

43

38

30

10

4.0

`inferred_names`

51

14

Names for functions defined in a dictionary are properly assigned; however, anonymous functions defined on a var/let variable assignment have blank names.

53

No

38

10

51

51

53

41

10

5.0

## See also

-   [`Function`](../function)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name</a>

# NaN

The global `NaN` property is a value representing Not-A-Number.

Property attributes of `NaN`

Writable

no

Enumerable

no

Configurable

no

## Description

`NaN` is a property of the _global object_. In other words, it is a variable in global scope.

The initial value of `NaN` is Not-A-Number — the same as the value of [`Number.NaN`](number/nan). In modern browsers, `NaN` is a non-configurable, non-writable property. Even when this is not the case, avoid overriding it. It is rather rare to use `NaN` in a program.

There are five different types of operations that return `NaN`:

-   Number cannot be parsed (e.g. `parseInt("blabla")` or `Number(undefined)`)
-   Math operation where the result is not a real number (e.g. `Math.sqrt(-1)`)
-   Operand of an argument is `NaN` (e.g. `7 ** NaN`)
-   Indeterminate form (e.g. `0 * Infinity`, or `undefined + undefined`)
-   Any operation that involves a string and is not an addition operation (e.g. `"foo" / 3`)

## Examples

### Testing against NaN

`NaN` compares unequal (via `==`, `!=`, `===`, and `!==`) to any other value -- including to another `NaN` value. Use [`Number.isNaN()`](number/isnan) or [`isNaN()`](isnan) to most clearly determine whether a value is `NaN`. Or perform a self-comparison: `NaN`, and only `NaN`, will compare unequal to itself.

    NaN === NaN;        // false
    Number.NaN === NaN; // false
    isNaN(NaN);         // true
    isNaN(Number.NaN);  // true
    Number.isNaN(NaN);  // true

    function valueIsNaN(v) { return v !== v; }
    valueIsNaN(1);          // false
    valueIsNaN(NaN);        // true
    valueIsNaN(Number.NaN); // true

However, do note the difference between `isNaN()` and `Number.isNaN()`: the former will return `true` if the value is currently `NaN`, or if it is going to be `NaN` after it is coerced to a number, while the latter will return `true` only if the value is currently `NaN`:

    isNaN('hello world');        // true
    Number.isNaN('hello world'); // false

Additionally, some array methods cannot find `NaN`, while others can.

    let arr = [2, 4, NaN, 12];
    arr.indexOf(NaN);                      // -1 (false)
    arr.includes(NaN);                     // true
    arr.findIndex(n => Number.isNaN(n));   // 2

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-value-properties-of-the-global-object-nan">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-value-properties-of-the-global-object-nan</span></a></td></tr></tbody></table>

`NaN`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Number.NaN`](number/nan)
-   [`Number.isNaN()`](number/isnan)
-   [`isNaN()`](isnan)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN</a>

# Number.NEGATIVE_INFINITY

The `Number.NEGATIVE_INFINITY` property represents the negative Infinity value.

Property attributes of `Number.NEGATIVE_INFINITY`

Writable

no

Enumerable

no

Configurable

no

## Description

The value of `Number.NEGATIVE_INFINITY` is the same as the negative value of the global object's [`Infinity`](../infinity) property.

This value behaves slightly differently than mathematical infinity:

-   Any positive value, including [`POSITIVE_INFINITY`](positive_infinity), multiplied by `NEGATIVE_INFINITY` is `NEGATIVE_INFINITY`.
-   Any negative value, including `NEGATIVE_INFINITY`, multiplied by `NEGATIVE_INFINITY` is [`POSITIVE_INFINITY`](positive_infinity).
-   Any positive value divided by `NEGATIVE_INFINITY` is negative zero.
-   Any negative value divided by `NEGATIVE_INFINITY` is positive zero.
-   Zero multiplied by `NEGATIVE_INFINITY` is [`NaN`](../nan).
-   [`NaN`](../nan) multiplied by `NEGATIVE_INFINITY` is [`NaN`](../nan).
-   `NEGATIVE_INFINITY`, divided by any negative value except `NEGATIVE_INFINITY`, is [`POSITIVE_INFINITY`](positive_infinity).
-   `NEGATIVE_INFINITY`, divided by any positive value except [`POSITIVE_INFINITY`](positive_infinity), is `NEGATIVE_INFINITY`.
-   `NEGATIVE_INFINITY`, divided by either `NEGATIVE_INFINITY` or [`POSITIVE_INFINITY`](positive_infinity), is [`NaN`](../nan).

You might use the `Number.NEGATIVE_INFINITY` property to indicate an error condition that returns a finite number in case of success. Note, however, that [`isFinite`](../isfinite) would be more appropriate in such a case.

Because `NEGATIVE_INFINITY` is a static property of [`Number`](../number), you always use it as `Number.NEGATIVE_INFINITY`, rather than as a property of a [`Number`](../number) object you created.

## Examples

### Using NEGATIVE_INFINITY

In the following example, the variable `smallNumber` is assigned a value that is smaller than the minimum value. When the [`if`](../../statements/if...else) statement executes, `smallNumber` has the value `-Infinity`, so `smallNumber` is set to a more manageable value before continuing.

    var smallNumber = (-Number.MAX_VALUE) * 2;

    if (smallNumber === Number.NEGATIVE_INFINITY) {
      smallNumber = returnFinite();
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-number.negative_infinity">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-number.negative_infinity</span></a></td></tr></tbody></table>

`NEGATIVE_INFINITY`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Number.POSITIVE_INFINITY`](positive_infinity)
-   [`Number.isFinite()`](isfinite)
-   [`Infinity`](../infinity)
-   [`isFinite()`](../isfinite)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY</a>

# RangeError: repeat count must be non-negative

The JavaScript exception "repeat count must be non-negative" occurs when the [`String.prototype.repeat()`](../global_objects/string/repeat) method is used with a `count` argument that is a negative number.

## Message

    RangeError: argument out of range
    RangeError: repeat count must be non-negative (Firefox)
    RangeError: Invalid count value (Chrome)

## Error type

[`RangeError`](../global_objects/rangeerror)

## What went wrong?

The [`String.prototype.repeat()`](../global_objects/string/repeat) method has been used. It has a `count` parameter indicating the number of times to repeat the string. It must be between 0 and less than positive [`Infinity`](../global_objects/infinity) and cannot be a negative number. The range of allowed values can be described like this: \[0, +∞).

## Examples

### Invalid cases

    'abc'.repeat(-1); // RangeError

### Valid cases

    'abc'.repeat(0);    // ''
    'abc'.repeat(1);    // 'abc'
    'abc'.repeat(2);    // 'abcabc'
    'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)

## See also

-   [`String.prototype.repeat()`](../global_objects/string/repeat)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Negative_repetition_count" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Negative_repetition_count</a>

# new operator

The `new` lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

## Syntax

    new constructor[([arguments])]

### Parameters

`constructor`  
A class or function that specifies the type of the object instance.

`arguments`  
A list of values that the `constructor` will be called with.

## Description

The `new` keyword does the following things:

1.  Creates a blank, plain JavaScript object.
2.  Adds a property to the new object (`__proto__`) that links to the constructor function's prototype object
    **Note:** Properties/objects added to the construction function prototype are therefore accessible to all instances created from the constructor function (using `new`).

3.  Binds the newly created object instance as the `this` context (i.e. all references to `this` in the constructor function now refer to the object created in the first step).
4.  Returns `this` if the function doesn't return an object.

Creating a user-defined object requires two steps:

1.  Define the object type by writing a function that specifies its name and properties. For example, a constructor function to create an object `Foo`might look like this:

        function Foo(bar1, bar2) {
              this.bar1 = bar1;
              this.bar2 = bar2;
            }

2.  Create an instance of the object with `new`.

        var myFoo = new Foo('Bar 1', 2021);

**Note:** An object can have a property that is itself another object. See the examples below.

When the code `new Foo(...)` is executed, the following things happen:

1.  A new object is created, inheriting from `Foo.prototype`.
2.  The constructor function `Foo` is called with the specified arguments, and with `this` bound to the newly created object. `new Foo` is equivalent to `new Foo()`, i.e. if no argument list is specified, `Foo` is called without arguments.
3.  The object (not null, false, 3.1415 or other primitive types) returned by the constructor function becomes the result of the whole `new` expression. If the constructor function doesn't explicitly return an object, the object created in step 1 is used instead (normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process).

You can always add a property to a previously defined object instance. For example, the statement `car1.color = "black"` adds a property `color` to `car1`, and assigns it a value of "`black`".

However, this does not affect any other objects. To add the new property to all objects of the same type, you must add the property to the definition of the `Car` object type.

You can add a shared property to a previously defined object type by using the `Function.prototype` property. This defines a property that is shared by all objects created with that function, rather than by just one instance of the object type. The following code adds a color property with value `"original color"` to all objects of type `Car`, and then overwrites that value with the string "`black`" only in the instance object `car1`. For more information, see [prototype](../global_objects/function).

    function Car() {}
    car1 = new Car();
    car2 = new Car();

    console.log(car1.color);    // undefined

    Car.prototype.color = 'original color';
    console.log(car1.color);    // 'original color'

    car1.color = 'black';
    console.log(car1.color);    // 'black'

    console.log(Object.getPrototypeOf(car1).color); // 'original color'
    console.log(Object.getPrototypeOf(car2).color); // 'original color'
    console.log(car1.color);   // 'black'
    console.log(car2.color);   // 'original color'

**Note:** While the constructor function can be invoked like any regular function (i.e. without the `new` operator), in this case a new Object is not created and the value of `this` is also different.

## Examples

### Object type and object instance

Suppose you want to create an object type for cars. You want this type of object to be called `Car`, and you want it to have properties for make, model, and year. To do this, you would write the following function:

    function Car(make, model, year) {
      this.make = make;
      this.model = model;
      this.year = year;
    }

Now you can create an object called `myCar` as follows:

    var myCar = new Car('Eagle', 'Talon TSi', 1993);

This statement creates `myCar` and assigns it the specified values for its properties. Then the value of `myCar.make` is the string "Eagle", `myCar.year` is the integer 1993, and so on.

You can create any number of `car` objects by calls to `new`. For example:

    var kensCar = new Car('Nissan', '300ZX', 1992);

### Object property that is itself another object

Suppose you define an object called `Person` as follows:

    function Person(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    }

And then instantiate two new `Person` objects as follows:

    var rand = new Person('Rand McNally', 33, 'M');
    var ken = new Person('Ken Jones', 39, 'M');

Then you can rewrite the definition of `Car` to include an `owner` property that takes a `Person` object, as follows:

    function Car(make, model, year, owner) {
      this.make = make;
      this.model = model;
      this.year = year;
      this.owner = owner;
    }

To instantiate the new objects, you then use the following:

    var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
    var car2 = new Car('Nissan', '300ZX', 1992, ken);

Instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects `rand` and `ken` as the parameters for the owners. To find out the name of the owner of `car2`, you can access the following property:

    car2.owner.name

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-new-operator">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-new-operator</span></a></td></tr></tbody></table>

`new`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Function`](../global_objects/function)
-   [`Reflect.construct()`](../global_objects/reflect/construct)
-   [`Object`](../global_objects/object)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new</a>

# new.target

The `new.target` pseudo-property lets you detect whether a function or constructor was called using the [new](new) operator. In constructors and functions invoked using the [new](new) operator, `new.target` returns a reference to the constructor or function. In normal function calls, `new.target` is [`undefined`](../global_objects/undefined).

## Syntax

    new.target

## Description

The `new.target` syntax consists of the keyword `new`, a dot, and the identifier `target`. Normally, the left-hand side of the dot is the object on which property access is performed, but here, `new` is not an object.

The `new.target` pseudo-property is available in all functions.

In class constructors, it refers to the constructed class.

In ordinary functions, it refers to the function itself, assuming it was invoked via the [new](new) operator; otherwise `new.target` is [`undefined`](../global_objects/undefined).

In [arrow functions](../functions/arrow_functions), `new.target` is inherited from the surrounding scope.

## Examples

### new.target in function calls

In normal function calls (as opposed to constructor function calls), `new.target` is [`undefined`](../global_objects/undefined). This lets you detect whether a function was called with [new](new) as a constructor.

    function Foo() {
      if (!new.target) { throw 'Foo() must be called with new' }
      console.log('Foo instantiated with new')
    }

    new Foo()  // logs "Foo instantiated with new"
    Foo()      // throws "Foo() must be called with new"

### new.target in constructors

In class constructors, `new.target` refers to the constructor that was directly invoked by `new`. This is also the case if the constructor is in a parent class and was delegated from a child constructor.

    class A {
      constructor() {
        console.log(new.target.name)
      }
    }

    class B extends A { constructor() { super() } }

    let a = new A()  // logs "A"
    let b = new B()  // logs "B"

    class C { constructor() { console.log(new.target)  } }
    class D extends C { constructor() { super()  } }

    let c = new C()  // logs class C{constructor(){console.log(new.target);}}
    let d = new D()  // logs class D extends C{constructor(){super();}}

Thus from the above example of class `C` and `D`, it seems that `new.target` points to the class definition of class which is initialized. For example, when `d` was initialized using `new D()`, the class definition of `D` was printed; and similarly, in case of `c`, the class `C` was printed.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-built-in-function-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-built-in-function-objects</span></a></td></tr></tbody></table>

`new.target`

46

13

41

No

33

11

46

46

41

33

11

5.0

## See also

-   [Functions](../functions)
-   [Classes](../classes)
-   `new`
-   `this`

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target</a>

# Generator.prototype.next()

The `next()` method returns an object with two properties `done` and `value`. You can also provide a parameter to the `next` method to send a value to the generator.

## Syntax

    next(value)

### Parameters

`value`  
The value to send to the generator.

The value will be assigned as a result of a `yield` expression. For example, in `variable = yield expression`, the value passed to the `.next()` function will be assigned to `variable`.

### Return value

An [`Object`](../object) with two properties:

`done` (boolean)  
Has the value `true` if the iterator is past the end of the iterated sequence. In this case `value` optionally specifies the _return value_ of the iterator.

Has the value `false` if the iterator was able to produce the next value in the sequence. This is equivalent of not specifying the `done` property altogether.

`value`  
Any JavaScript value returned by the iterator. Can be omitted when `done` is `true`.

## Examples

### Using next()

The following example shows a simple generator and the object that the `next` method returns:

    function* gen() {
      yield 1;
      yield 2;
      yield 3;
    }

    const g = gen(); // "Generator { }"
    g.next();      // "Object { value: 1, done: false }"
    g.next();      // "Object { value: 2, done: false }"
    g.next();      // "Object { value: 3, done: false }"
    g.next();      // "Object { value: undefined, done: true }"

### Using next() with a list

    function* getPage(pageSize = 1, list) {
        let output = [];
        let index = 0;

        while (index < list.length) {
            output = [];
            for (let i = index; i < index + pageSize; i++) {
                if (list[i]) {
                    output.push(list[i]);
                }
            }

            yield output;
            index += pageSize;
        }
    }

    list = [1, 2, 3, 4, 5, 6, 7, 8]
    var page = getPage(3, list);              // Generator { }

    page.next();                              // Object {value: (3) [1, 2, 3], done: false}
    page.next();                              // Object {value: (3) [4, 5, 6], done: false}
    page.next();                              // Object {value: (2) [7, 8], done: false}
    page.next();                              // Object {value: undefined, done: true}

### Sending values to the generator

In this example, `next` is called with a value.

Note that the first call does not log anything, because the generator was not yielding anything initially.

    function* gen() {
      while (true) {
        let value = yield null;
        console.log(value);
      }
    }

    const g = gen();
    g.next(1);
    // "{ value: null, done: false }"
    g.next(2);
    // 2
    // "{ value: null, done: false }"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-generator.prototype.next">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-generator.prototype.next</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`next`

39

13

26

No

26

10

39

39

26

26

10

4.0

## See also

-   [`function*`](../../statements/function*)
-   [Iterators and generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator/next" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator/next</a>

# TypeError: "x" is not a non-null object

The JavaScript exception "is not a non-null object" occurs when an object is expected somewhere and wasn't provided. [`null`](../global_objects/null) is not an object and won't work.

## Message

    TypeError: Invalid descriptor for property {x} (Edge)
    TypeError: "x" is not a non-null object (Firefox)
    TypeError: Property description must be an object: "x" (Chrome)
    TypeError: Invalid value used in weak set (Chrome)

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

An object is expected somewhere and wasn't provided. [`null`](../global_objects/null) is not an object and won't work. You must provide a proper object in the given situation.

## Examples

### Property descriptor expected

When methods like [`Object.create()`](../global_objects/object/create) or [`Object.defineProperty()`](../global_objects/object/defineproperty) and [`Object.defineProperties()`](../global_objects/object/defineproperties) are used, the optional descriptor parameter expects a property descriptor object. Providing no object (like just a number), will throw an error:

    Object.defineProperty({}, 'key', 1);
    // TypeError: 1 is not a non-null object

    Object.defineProperty({}, 'key', null);
    // TypeError: null is not a non-null object

A valid property descriptor object might look like this:

    Object.defineProperty({}, 'key', { value: 'foo', writable: false });

### `WeakMap` and `WeakSet` objects require object keys

[`WeakMap`](../global_objects/weakmap) and [`WeakSet`](../global_objects/weakset) objects store object keys. You can't use other types as keys.

    var ws = new WeakSet();
    ws.add('foo');
    // TypeError: "foo" is not a non-null object

Use objects instead:

    ws.add({foo: 'bar'});
    ws.add(window);

## See also

-   [`Object.create()`](../global_objects/object/create)
-   [`Object.defineProperty()`](../global_objects/object/defineproperty), [`Object.defineProperties()`](../global_objects/object/defineproperties)
-   [`WeakMap`](../global_objects/weakmap), [`WeakSet`](../global_objects/weakset)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/No_non-null_object" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/No_non-null_object</a>

# TypeError: "x" has no properties

The JavaScript exception "null (or undefined) has no properties" occurs when you attempt to access properties of [`null`](../global_objects/null) and [`undefined`](../global_objects/undefined). They don't have any.

## Message

    TypeError: Unable to get property {x} of undefined or null reference (Edge)
    TypeError: null has no properties (Firefox)
    TypeError: undefined has no properties (Firefox)

## Error type

[`TypeError`](../global_objects/typeerror).

## What went wrong?

Both, [`null`](../global_objects/null) and [`undefined`](../global_objects/undefined), have no properties you could access.

## Examples

### null and undefined have no properties

    null.foo;
    // TypeError: null has no properties

    undefined.bar;
    // TypeError: undefined has no properties

## See also

-   [`null`](../global_objects/null)
-   [`undefined`](../global_objects/undefined)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/No_properties" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/No_properties</a>

# SyntaxError: missing variable name

The JavaScript exception "missing variable name" occurs way too often as naming things is so hard. Or maybe a comma is wrong. Check for typos!

## Message

    SyntaxError: missing variable name (Firefox)
    SyntaxError: Unexpected token = (Chrome)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

A variable is missing a name. This is likely due to a syntax error in your code. Probably a comma is wrong somewhere or you struggled with coming up with a name. Totally understandable! Naming things is so hard.

-   Check to ensure the previous lines / declaration does not end with a comma instead of a semi-colon.

## Examples

### Missing a variable name

    var = "foo";

It's tough coming up with good variable names. We all have been there.

    var ohGodWhy = "foo";

### Reserved keywords can't be variable names

There are a few variable names that are [reserved keywords](../lexical_grammar#keywords). You can't use these. Sorry :(

    var debugger = "whoop";
    // SyntaxError: missing variable name

### Declaring multiple variables

Pay special attention to commas when declaring multiple variables. Is there an excess comma? Did you accidentally add commas instead of semicolons?

    var x, y = "foo",
    var x, = "foo"

    var first = document.getElementById('one'),
    var second = document.getElementById('two'),

    // SyntaxError: missing variable name

The fixed version:

    var x, y = "foo";
    var x = "foo";

    var first = document.getElementById('one');
    var second = document.getElementById('two');

### Arrays

[`Array`](../global_objects/array) literals in JavaScript need square brackets around the values. This won't work:

    var arr = 1,2,3,4,5;
    // SyntaxError: missing variable name

This would be correct:

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

## See also

-   [Good variable names](https://wiki.c2.com/?GoodVariableNames)
-   [`var`](../statements/var)
-   [Variable declarations in the JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#declarations)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/No_variable_name" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/No_variable_name</a>

# TypeError: can't delete non-configurable array element

The JavaScript exception "can't delete non-configurable array element" occurs when it was attempted to [shorten the length](../global_objects/array/length#shortening_an_array) of an array, but one of the array's elements is [non-configurable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#properties).

## Message

    TypeError: can't delete non-configurable array element (Firefox)
    TypeError: Cannot delete property '2' of [object Array] (Chrome)

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

It was attempted to [shorten the length](../global_objects/array/length#shortening_an_array) of an array, but one of the array's elements is [non-configurable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#properties). When shortening an array, the elements beyond the new array length will be deleted, which failed in this situation.

The `configurable` attribute controls whether the property can be deleted from the object and whether its attributes (other than `writable`) can be changed.

Usually, properties in an object created by an [array initializer](../global_objects/array#syntax) are configurable. However, for example, when using [`Object.defineProperty()`](../global_objects/object/defineproperty), the property isn't configurable by default.

## Examples

### Non-configurable properties created by `Object.defineProperty`

The [`Object.defineProperty()`](../global_objects/object/defineproperty) creates non-configurable properties by default if you haven't specified them as configurable.

    var arr = [];
    Object.defineProperty(arr, 0, {value: 0});
    Object.defineProperty(arr, 1, {value: "1"});

    arr.length = 1;
    // TypeError: can't delete non-configurable array element

You will need to set the elements as configurable, if you intend to shorten the array.

    var arr = [];
    Object.defineProperty(arr, 0, {value: 0, configurable: true});
    Object.defineProperty(arr, 1, {value: "1", configurable: true});

    arr.length = 1;

### `Seal`-ed Arrays

The [`Object.seal()`](../global_objects/object/seal) function marks all existing elements as non-configurable.

    var arr = [1,2,3];
    Object.seal(arr);

    arr.length = 1;
    // TypeError: can't delete non-configurable array element

You either need to remove the [`Object.seal()`](../global_objects/object/seal) call, or make a copy of it. In case of a copy, shortening the copy of the array does not modify the original array length.

    var arr = [1,2,3];
    Object.seal(arr);

    // Copy the initial array to shorten the copy
    var copy = Array.from(arr);
    copy.length = 1;
    // arr.length == 3

## See also

-   [\[\[Configurable\]\]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#properties)
-   [`Array.length`](../global_objects/array/length)
-   [`Object.defineProperty()`](../global_objects/object/defineproperty)
-   [`Object.seal()`](../global_objects/object/seal)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Non_configurable_array_element" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Non_configurable_array_element</a>

# String.prototype.normalize()

The `normalize()` method returns the Unicode Normalization Form of the string.

## Syntax

    normalize()
    normalize(form)

### Parameters

`form` <span class="badge inline optional">Optional</span>  
One of `"NFC"`, `"NFD"`, `"NFKC"`, or `"NFKD"`, specifying the Unicode Normalization Form. If omitted or [`undefined`](../undefined), `"NFC"` is used.

These values have the following meanings:

`"NFC"`  
Canonical Decomposition, followed by Canonical Composition.

`"NFD"`  
Canonical Decomposition.

`"NFKC"`  
Compatibility Decomposition, followed by Canonical Composition.

`"NFKD"`  
Compatibility Decomposition.

### Return value

A string containing the Unicode Normalization Form of the given string.

### Errors thrown

[`RangeError`](../rangeerror)  
A [`RangeError`](../rangeerror) is thrown if `form` isn't one of the values specified above.

## Description

Unicode assigns a unique numerical value, called a _code point_, to each character. For example, the code point for `"A"` is given as U+0041. However, sometimes more than one code point, or sequence of code points, can represent the same abstract character — the character `"ñ"` for example can be represented by either of:

-   The single code point U+00F1.
-   The code point for `"n"` (U+006E) followed by the code point for the combining tilde (U+0303).

<!-- -->

    let string1 = '\u00F1';
    let string2 = '\u006E\u0303';

    console.log(string1);  //  ñ
    console.log(string2);  //  ñ

However, since the code points are different, string comparison will not treat them as equal. And since the number of code points in each version is different, they even have different lengths.

    let string1 = '\u00F1';            // ñ
    let string2 = '\u006E\u0303';      // ñ

    console.log(string1 === string2); // false
    console.log(string1.length);      // 1
    console.log(string2.length);      // 2

The `normalize()` method helps solve this problem by converting a string into a normalized form common for all sequences of code points that represent the same characters. There are two main normalization forms, one based on **canonical equivalence** and the other based on **compatibility**.

### Canonical equivalence normalization

In Unicode, two sequences of code points have canonical equivalence if they represent the same abstract characters, and should always have the same visual appearance and behavior (for example, they should always be sorted in the same way).

You can use `normalize()` using the `"NFD"` or `"NFC"` arguments to produce a form of the string that will be the same for all canonically equivalent strings. In the example below we normalize two representations of the character `"ñ"`:

    let string1 = '\u00F1';           // ñ
    let string2 = '\u006E\u0303';     // ñ

    string1 = string1.normalize('NFD');
    string2 = string2.normalize('NFD');

    console.log(string1 === string2); // true
    console.log(string1.length);      // 2
    console.log(string2.length);      // 2

#### Composed and decomposed forms

Note that the length of the normalized form under `"NFD"` is `2`. That's because `"NFD"` gives you the **decomposed** version of the canonical form, in which single code points are split into multiple combining ones. The decomposed canonical form for `"ñ"` is `"\u006E\u0303"`.

You can specify `"NFC"` to get the **composed** canonical form, in which multiple code points are replaced with single code points where possible. The composed canonical form for `"ñ"` is `"\u00F1"`:

    let string1 = '\u00F1';                           // ñ
    let string2 = '\u006E\u0303';                     // ñ

    string1 = string1.normalize('NFC');
    string2 = string2.normalize('NFC');

    console.log(string1 === string2);                 // true
    console.log(string1.length);                      // 1
    console.log(string2.length);                      // 1
    console.log(string2.codePointAt(0).toString(16)); // f1

### Compatibility normalization

In Unicode, two sequences of code points are compatible if they represent the same abstract characters, and should be treated alike in some — but not necessarily all — applications.

All canonically equivalent sequences are also compatible, but not vice versa.

For example:

-   the code point U+FB00 represents the [ligature](https://developer.mozilla.org/en-US/docs/Glossary/Ligature) `"ff"`. It is compatible with two consecutive U+0066 code points (`"ff"`).
-   the code point U+24B9 represents the symbol `"Ⓓ"`. It is compatible with the U+0044 code point (`"D"`).

In some respects (such as sorting) they should be treated as equivalent—and in some (such as visual appearance) they should not, so they are not canonically equivalent.

You can use `normalize()` using the `"NFKD"` or `"NFKC"` arguments to produce a form of the string that will be the same for all compatible strings:

    let string1 = '\uFB00';
    let string2 = '\u0066\u0066';

    console.log(string1);             // ff
    console.log(string2);             // ff
    console.log(string1 === string2); // false
    console.log(string1.length);      // 1
    console.log(string2.length);      // 2

    string1 = string1.normalize('NFKD');
    string2 = string2.normalize('NFKD');

    console.log(string1);             // ff <- visual appearance changed
    console.log(string2);             // ff
    console.log(string1 === string2); // true
    console.log(string1.length);      // 2
    console.log(string2.length);      // 2

When applying compatibility normalization it's important to consider what you intend to do with the strings, since the normalized form may not be appropriate for all applications. In the example above the normalization is appropriate for search, because it enables a user to find the string by searching for `"f"`. But it may not be appropriate for display, because the visual representation is different.

As with canonical normalization, you can ask for decomposed or composed compatible forms by passing `"NFKD"` or `"NFKC"`, respectively.

## Examples

### Using `normalize()`

    // Initial string

    // U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
    // U+0323: COMBINING DOT BELOW
    let str = '\u1E9B\u0323';

    // Canonically-composed form (NFC)

    // U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
    // U+0323: COMBINING DOT BELOW
    str.normalize('NFC'); // '\u1E9B\u0323'
    str.normalize();      // same as above

    // Canonically-decomposed form (NFD)

    // U+017F: LATIN SMALL LETTER LONG S
    // U+0323: COMBINING DOT BELOW
    // U+0307: COMBINING DOT ABOVE
    str.normalize('NFD'); // '\u017F\u0323\u0307'

    // Compatibly-composed (NFKC)

    // U+1E69: LATIN SMALL LETTER S WITH DOT BELOW AND DOT ABOVE
    str.normalize('NFKC'); // '\u1E69'

    // Compatibly-decomposed (NFKD)

    // U+0073: LATIN SMALL LETTER S
    // U+0323: COMBINING DOT BELOW
    // U+0307: COMBINING DOT ABOVE
    str.normalize('NFKD'); // '\u0073\u0323\u0307'

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.normalize">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.normalize</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`normalize`

34

12

31

No

21

10

No

34

31

21

10

2.0

## See also

-   [Unicode Standard Annex \#15, Unicode Normalization Forms](https://www.unicode.org/reports/tr15/)
-   [Unicode equivalence](https://en.wikipedia.org/wiki/Unicode_equivalence)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize</a>

# RangeError: argument is not a valid code point

The JavaScript exception "Invalid code point" occurs when [`NaN`](../global_objects/nan) values, negative Integers (-1), non-Integers (5.4), or values larger than 0x10FFFF (1114111) are used with [`String.fromCodePoint()`](../global_objects/string/fromcodepoint).

## Message

    RangeError: {0} is not a valid code point (Firefox)
    RangeError: Invalid code point {0} (Chromium)

## Error type

[`RangeError`](../global_objects/rangeerror)

## What went wrong?

[`String.fromCodePoint()`](../global_objects/string/fromcodepoint) throws this error when passed [`NaN`](../global_objects/nan) values, negative Integers (-1), non-Integers (5.4), or values larger than 0x10FFFF (1114111).

A [code point](https://en.wikipedia.org/wiki/Code_point) is a value in the Unicode codespace; that is, the range of integers from `0` to `0x10FFFF`.

## Examples

### Invalid cases

    String.fromCodePoint('_');      // RangeError
    String.fromCodePoint(Infinity); // RangeError
    String.fromCodePoint(-1);       // RangeError
    String.fromCodePoint(3.14);     // RangeError
    String.fromCodePoint(3e-2);     // RangeError
    String.fromCodePoint(NaN);      // RangeError

### Valid cases

    String.fromCodePoint(42);       // "*"
    String.fromCodePoint(65, 90);   // "AZ"
    String.fromCodePoint(0x404);    // "\u0404"
    String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
    String.fromCodePoint(194564);   // "\uD87E\uDC04"
    String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"

## See also

-   [`String.fromCodePoint()`](../global_objects/string/fromcodepoint)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint</a>

# TypeError: "x" is not a constructor

The JavaScript exception "is not a constructor" occurs when there was an attempt to use an object or a variable as a constructor, but that object or variable is not a constructor.

## Message

    TypeError: Object doesn't support this action (Edge)
    TypeError: "x" is not a constructor

    TypeError: Math is not a constructor
    TypeError: JSON is not a constructor
    TypeError: Symbol is not a constructor
    TypeError: Reflect is not a constructor
    TypeError: Intl is not a constructor
    TypeError: Atomics is not a constructor

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

There was an attempt to use an object or a variable as a constructor, but that object or variable is not a constructor. See [constructor](https://developer.mozilla.org/en-US/docs/Glossary/Constructor) or the [`new` operator](../operators/new) for more information on what a constructor is.

There are many global objects, like [`String`](../global_objects/string) or [`Array`](../global_objects/array), which are constructable using `new`. However, some global objects are not and their properties and methods are static. The following JavaScript standard built-in objects are not a constructor: [`Math`](../global_objects/math), [`JSON`](../global_objects/json), [`Symbol`](../global_objects/symbol), [`Reflect`](../global_objects/reflect), [`Intl`](../global_objects/intl), [`Atomics`](../global_objects/atomics).

[Generator functions](../statements/function*) cannot be used as constructors either.

## Examples

### Invalid cases

    var Car = 1;
    new Car();
    // TypeError: Car is not a constructor

    new Math();
    // TypeError: Math is not a constructor

    new Symbol();
    // TypeError: Symbol is not a constructor

    function* f() {};
    var obj = new f;
    // TypeError: f is not a constructor

### A car constructor

Suppose you want to create an object type for cars. You want this type of object to be called `car`, and you want it to have properties for make, model, and year. To do this, you would write the following function:

    function Car(make, model, year) {
      this.make = make;
      this.model = model;
      this.year = year;
    }

Now you can create an object called `mycar` as follows:

    var mycar = new Car('Eagle', 'Talon TSi', 1993);

### In Promises

When returning an immediately-resolved or immediately-rejected Promise, you do not need to create a _new Promise(...)_ and act on it.

This is not legal (the [Promise constructor](https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise#Constructor) is not being called correctly) and will throw a `TypeError: this is not a constructor` exception:

    return new Promise.resolve(true);

Instead, use the [Promise.resolve()](../global_objects/promise/resolve) or [Promise.reject()](../global_objects/promise/reject) [static methods](<https://en.wikipedia.org/wiki/Method_(computer_programming)#Static_methods>):

    // This is legal, but unnecessarily long:
    return new Promise((resolve, reject) => { resolve(true); })

    // Instead, return the static method:
    return Promise.resolve(true);
    return Promise.reject(false);

## See also

-   [constructor](https://developer.mozilla.org/en-US/docs/Glossary/Constructor)
-   [`new` operator](../operators/new)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_constructor" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_constructor</a>

# TypeError: "x" is not a function

The JavaScript exception "is not a function" occurs when there was an attempt to call a value from a function, but the value is not actually a function.

## Message

    TypeError: Object doesn't support property or method {x} (Edge)
    TypeError: "x" is not a function

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

It attempted to call a value from a function, but the value is not actually a function. Some code expects you to provide a function, but that didn't happen.

Maybe there is a typo in the function name? Maybe the object you are calling the method on does not have this function? For example, JavaScript `Objects` have no `map` function, but the JavaScript `Array` object does.

There are many built-in functions in need of a (callback) function. You will have to provide a function in order to have these methods working properly:

-   When working with [`Array`](../global_objects/array) or [`TypedArray`](../global_objects/typedarray) objects:
    -   [`Array.prototype.every()`](../global_objects/array/every), [`Array.prototype.some()`](../global_objects/array/some), [`Array.prototype.forEach()`](../global_objects/array/foreach), [`Array.prototype.map()`](../global_objects/array/map), [`Array.prototype.filter()`](../global_objects/array/filter), [`Array.prototype.reduce()`](../global_objects/array/reduce), [`Array.prototype.reduceRight()`](../global_objects/array/reduceright), [`Array.prototype.find()`](../global_objects/array/find)
-   When working with [`Map`](../global_objects/map) and [`Set`](../global_objects/set) objects:
    -   [`Map.prototype.forEach()`](../global_objects/map/foreach) and [`Set.prototype.forEach()`](../global_objects/set/foreach)

## Examples

### A typo in the function name

In this case, which happens way too often, there is a typo in the method name:

    let x = document.getElementByID('foo');
    // TypeError: document.getElementByID is not a function

The correct function name is `getElementById`:

    let x = document.getElementById('foo');

### Function called on the wrong object

For certain methods, you have to provide a (callback) function and it will work on specific objects only. In this example, [`Array.prototype.map()`](../global_objects/array/map) is used, which will work with [`Array`](../global_objects/array) objects only.

    let obj = {a: 13, b: 37, c: 42};

    obj.map(function(num) {
      return num * 2;
    });

    // TypeError: obj.map is not a function

Use an array instead:

    let numbers = [1, 4, 9];

    numbers.map(function(num) {
      return num * 2;
    });

    // Array [2, 8, 18]

### Function shares a name with a pre-existing property

Sometimes when making a class, you may have a property and a function with the same name. Upon calling the function, the compiler thinks that the function ceases to exist.

    var Dog = function () {
     this.age = 11;
     this.color = "black";
     this.name = "Ralph";
     return this;
    }

    Dog.prototype.name = function(name) {
     this.name = name;
     return this;
    }

    var myNewDog = new Dog();
    myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function

Use a different property name instead:

    var Dog = function () {
     this.age = 11;
     this.color = "black";
     this.dogName = "Ralph"; //Using this.dogName instead of .name
     return this;
    }

    Dog.prototype.name = function(name) {
     this.dogName = name;
     return this;
    }

    var myNewDog = new Dog();
    myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }

### Using brackets for multiplication

In math, you can write 2 × (3 + 5) as 2\*(3 + 5) or just 2(3 + 5).

Using the latter will throw an error:

    const sixteen = 2(3 + 5);
    alert('2 x (3 + 5) is ' + String(sixteen));
    //Uncaught TypeError: 2 is not a function

You can correct the code by adding a `*` operator:

    const sixteen = 2 * (3 + 5);
    alert('2 x (3 + 5) is ' + String(sixteen));
    //2 x (3 + 5) is 16

### Import the exported module correctly

Ensure you are importing the module correctly.

An example helpers library (`helpers.js`)

    let helpers = function () { };

    helpers.groupBy = function (objectArray, property) {
      return objectArray.reduce(function (acc, obj) {
        var key = obj[property];
        if (!acc[key]) {
          acc[key] = [];
        }
        acc[key].push(obj);
        return acc;
      },
    {});
    }

    export default helpers;

The correct import usage (`App.js`):

    import helpers from './helpers'

## See also

-   [Functions](../functions)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function</a>

# ReferenceError: "x" is not defined

The JavaScript exception "_variable_ is not defined" occurs when there is a non-existent variable referenced somewhere.

## Message

    ReferenceError: "x" is not defined

## Error type

[`ReferenceError`](../global_objects/referenceerror).

## What went wrong?

There is a non-existent variable referenced somewhere. This variable needs to be declared, or you need to make sure it is available in your current script or [scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope).

**Note:** When loading a library (such as jQuery), make sure it is loaded before you access library variables, such as "$". Put the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) element that loads the library before your code that uses it.

## Examples

### Variable not declared

    foo.substring(1); // ReferenceError: foo is not defined

The "foo" variable isn't defined anywhere. It needs to be some string, so that the [`String.prototype.substring()`](../global_objects/string/substring) method will work.

    var foo = 'bar';
    foo.substring(1); // "ar"

### Wrong scope

A variable needs to be available in the current context of execution. Variables defined inside a [function](../functions) cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function

    function numbers() {
      var num1 = 2,
          num2 = 3;
      return num1 + num2;
    }

    console.log(num1); // ReferenceError num1 is not defined.

However, a function can access all variables and functions defined inside the scope in which it is defined. In other words, a function defined in the global scope can access all variables defined in the global scope.

    var num1 = 2,
        num2 = 3;

    function numbers() {
      return num1 + num2;
    }

    console.log(numbers()); // 5

## See also

-   [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope)
-   [Declaring variables in the JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#declaring_variables)
-   [Function scope in the JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#function_scope)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined</a>

# Atomics.notify()

The static ` Atomics``.notify() ` method notifies up some agents that are sleeping in the wait queue.

**Note:** This operation works with a shared [`Int32Array`](../int32array) only.  
It will return `0` on non-shared `ArrayBuffer` objects.

## Syntax

    Atomics.notify(typedArray, index, count)

### Parameters

`typedArray`  
A shared [`Int32Array`](../int32array).

`index`  
The position in the `typedArray` to wake up on.

`count` <span class="badge inline optional">Optional</span>  
The number of sleeping agents to notify. Defaults to [`+Infinity`](../infinity).

### Return value

-   Returns the number of woken up agents.
-   Returns `0`, if a non-shared [`ArrayBuffer`](../arraybuffer) object is used.

### Exceptions

-   Throws a [`TypeError`](../typeerror), if `typedArray` is not a [`Int32Array`](../int32array).
-   Throws a [`RangeError`](../rangeerror), if `index` is out of bounds in the `typedArray`.

## Examples

### Using `notify`

Given a shared `Int32Array`:

    const sab = new SharedArrayBuffer(1024);
    const int32 = new Int32Array(sab);

A reading thread is sleeping and waiting on location 0 which is expected to be 0. As long as that is true, it will not go on. However, once the writing thread has stored a new value, it will be notified by the writing thread and return the new value (123).

    Atomics.wait(int32, 0, 0);
    console.log(int32[0]); // 123

A writing thread stores a new value and notifies the waiting thread once it has written:

    console.log(int32[0]); // 0;
    Atomics.store(int32, 0, 123);
    Atomics.notify(int32, 0, 1);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-atomics.notify">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-atomics.notify</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`notify`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

78

63

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

48-55

46-48

The `count` parameter defaults to `0` instead of the later-specified `+Infinity`.

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

63

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

48-55

46-48

The `count` parameter defaults to `0` instead of the later-specified `+Infinity`.

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

## See also

-   [`Atomics`](../atomics)
-   [`Atomics.wait()`](wait)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/notify" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/notify</a>

# Date.now()

The static `Date.now()` method returns the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC.

## Syntax

    Date.now()

### Return value

A [`Number`](../number) representing the milliseconds elapsed since the UNIX epoch.

## Polyfill

This method was standardized in ECMA-262 5<sup>th</sup> edition. Engines which have not been updated to support this method can work around the absence of this method using the following shim:

    if (!Date.now) {
      Date.now = function now() {
        return new Date().getTime();
      };
    }

## Examples

### Reduced time precision

To offer protection against timing attacks and fingerprinting, the precision of `Date.now()` might get rounded depending on browser settings.  
In Firefox, the `privacy.reduceTimerPrecision` preference is enabled by default and defaults to 20µs in Firefox 59; in 60 it will be 2ms.

    // reduced time precision (2ms) in Firefox 60
    Date.now()
    // 1519211809934
    // 1519211810362
    // 1519211811670
    // ...

    // reduced time precision with `privacy.resistFingerprinting` enabled
    Date.now();
    // 1519129853500
    // 1519129858900
    // 1519129864400
    // ...

In Firefox, you can also enable `privacy.resistFingerprinting`, the precision will be 100ms or the value of `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, whichever is larger.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.now">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.now</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`now`

5

12

3

9

10.5

4

1

18

4

14

4

1.0

## See also

-   [`Performance.now()`](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now) — provides timestamps with sub-millisecond resolution for use in measuring web page performance
-   [`console.time()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/time) / [`console.timeEnd()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/timeEnd)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now</a>

# null

The value `null` represents the intentional absence of any object value. It is one of JavaScript's [primitive values](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) and is treated as [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) for boolean operations.

## Syntax

    null

## Description

The value `null` is written with a literal: `null`. `null` is not an identifier for a property of the global object, like [`undefined`](undefined) can be. Instead, `null` expresses a lack of identification, indicating that a variable points to no object. In APIs, `null` is often retrieved in a place where an object can be expected but no object is relevant.

    // foo does not exist. It is not defined and has never been initialized:
    foo; //ReferenceError: foo is not defined

    // foo is known to exist now but it has no type or value:
    var foo = null;
    foo; //null

## Examples

### Difference between `null` and `undefined`

When checking for `null` or `undefined`, beware of the [differences between equality (==) and identity (===) operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators), as the former performs type-conversion.

    typeof null          // "object" (not "null" for legacy reasons)
    typeof undefined     // "undefined"
    null === undefined   // false
    null  == undefined   // true
    null === null        // true
    null == null         // true
    !null                // true
    isNaN(1 + null)      // false
    isNaN(1 + undefined) // true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-null-value">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-null-value</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`null`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`undefined`](undefined)
-   [`NaN`](nan)
-   [`void operator`](../operators/void)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null</a>

# Nullish coalescing operator (??)

The `??` is a logical operator that returns its right-hand side operand when its left-hand side operand is [`null`](../global_objects/null) or [`undefined`](../global_objects/undefined), and otherwise returns its left-hand side operand.

This can be contrasted with the [logical OR (`||`) operator](logical_or), which returns the right-hand side operand if the left operand is _any_ [falsy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#description)value, not only `null` or `undefined`. In other words, if you use `||` to provide some default value to another variable `foo`, you may encounter unexpected behaviors if you consider some falsy values as usable (e.g., `''` or `0`). See below for more examples.

The nullish coalescing operator has the fifth-lowest [operator precedence](operator_precedence), directly lower than `||` and directly higher than the [conditional (ternary) operator](conditional_operator).

## Syntax

    leftExpr ?? rightExpr

## Examples

### Using the nullish coalescing operator

In this example, we will provide default values but keep values other than `null` or `undefined`.

    const nullValue = null;
    const emptyText = ""; // falsy
    const someNumber = 42;

    const valA = nullValue ?? "default for A";
    const valB = emptyText ?? "default for B";
    const valC = someNumber ?? 0;

    console.log(valA); // "default for A"
    console.log(valB); // "" (as the empty string is not null or undefined)
    console.log(valC); // 42

### Assigning a default value to a variable

Earlier, when one wanted to assign a default value to a variable, a common pattern was to use the logical OR operator (`||`):

    let foo;

    //  foo is never assigned any value so it is still undefined
    let someDummyText = foo || 'Hello!';

However, due to `||` being a boolean logical operator, the left hand-side operand was coerced to a boolean for the evaluation and any _falsy_ value (`0`, `''`, `NaN`, `null`, `undefined`) was not returned. This behavior may cause unexpected consequences if you consider `0`, `''`, or `NaN` as valid values.

    let count = 0;
    let text = "";

    let qty = count || 42;
    let message = text || "hi!";
    console.log(qty);     // 42 and not 0
    console.log(message); // "hi!" and not ""

The nullish coalescing operator avoids this pitfall by only returning the second operand when the first one evaluates to either `null` or `undefined` (but no other falsy values):

    let myText = ''; // An empty string (which is also a falsy value)

    let notFalsyText = myText || 'Hello world';
    console.log(notFalsyText); // Hello world

    let preservingFalsy = myText ?? 'Hi neighborhood';
    console.log(preservingFalsy); // '' (as myText is neither undefined nor null)

### Short-circuiting

Like the OR and AND logical operators, the right-hand side expression is not evaluated if the left-hand side proves to be neither `null` nor `undefined`.

    function A() { console.log('A was called'); return undefined;}
    function B() { console.log('B was called'); return false;}
    function C() { console.log('C was called'); return "foo";}

    console.log( A() ?? C() );
    // logs "A was called" then "C was called" and then "foo"
    // as A() returned undefined so both expressions are evaluated

    console.log( B() ?? C() );
    // logs "B was called" then "false"
    // as B() returned false (and not null or undefined), the right
    // hand side expression was not evaluated

### No chaining with AND or OR operators

It is not possible to combine both the AND (`&&`) and OR operators (`||`) directly with `??`. A `SyntaxError` will be thrown in such cases.

    null || undefined ?? "foo"; // raises a SyntaxError
    true || undefined ?? "foo"; // raises a SyntaxError

However, providing parenthesis to explicitly indicate precedence is correct:

    (null || undefined) ?? "foo"; // returns "foo"

### Relationship with the optional chaining operator (`?.`)

The nullish coalescing operator treats `undefined` and `null` as specific values and so does the [optional chaining operator (`?.`)](optional_chaining) which is useful to access a property of an object which may be `null` or `undefined`.

    let foo = { someFooProp: "hi" };

    console.log(foo.someFooProp?.toUpperCase() ?? "not available"); // "HI"
    console.log(foo.someBarProp?.toUpperCase() ?? "not available"); // "not available"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#prod-CoalesceExpression">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#prod-CoalesceExpression</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Nullish_coalescing_operator`

80

80

72

No

67

13.1

80

80

79

No

13.4

No

## See also

-   [The optional chaining operator](optional_chaining)
-   [The logical OR (`||`) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#logical_or_2)
-   [Default parameters in functions](../functions/default_parameters)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator</a>

# Number

`Number` is a [primitive wrapper object](https://developer.mozilla.org/en-US/docs/Glossary/Primitive#primitive_wrapper_objects_in_javascript) used to represent and manipulate numbers like `37` or `-9.25`.

The `Number` constructor contains constants and methods for working with numbers. Values of other types can be converted to numbers using the `Number()`.

The JavaScript **Number** type is a [double-precision 64-bit binary format IEEE 754](https://en.wikipedia.org/wiki/Floating-point_arithmetic) value, like `double` in Java or C\#. This means it can represent fractional values, but there are some limits to what it can store. A Number only keeps about 17 decimal places of precision; arithmetic is subject to [rounding](https://en.wikipedia.org/wiki/Floating-point_arithmetic#Representable_numbers,_conversion_and_rounding). The largest value a Number can hold is about 1.8×10<sup>308</sup>. Numbers beyond that are replaced with the special Number constant [`Infinity`](infinity).

A number literal like `37` in JavaScript code is a floating-point value, not an integer. There is no separate integer type in common everyday use. (JavaScript now has a [`BigInt`](bigint) type, but it was not designed to replace Number for everyday uses. `37` is still a Number, not a BigInt.)

Number may also be expressed in literal forms like `0b101`, `0o13`, `0x0A`. Learn more on numeric [lexical grammar here](../lexical_grammar#numeric_literals).

## Description

When used as a function, `Number(value)` converts a string or other value to the Number type. If the value can't be converted, it returns [`NaN`](nan).

### Literal syntax

    123    // one-hundred twenty-three
    123.0  // same
    123 === 123.0  // true

### Function syntax

    Number('123')  // returns the number 123
    Number('123') === 123  // true

    Number("unicorn")  // NaN
    Number(undefined)  // NaN

## Constructor

[`Number()`](number/number)  
Creates a new `Number` value.

## Static properties

[`Number.EPSILON`](number/epsilon)  
The smallest interval between two representable numbers.

[`Number.MAX_SAFE_INTEGER`](number/max_safe_integer)  
The maximum safe integer in JavaScript (`253 - 1`).

[`Number.MAX_VALUE`](number/max_value)  
The largest positive representable number.

[`Number.MIN_SAFE_INTEGER`](number/min_safe_integer)  
The minimum safe integer in JavaScript (`-(253 - 1)`).

[`Number.MIN_VALUE`](number/min_value)  
The smallest positive representable number—that is, the positive number closest to zero (without actually being zero).

[`Number.NaN`](number/nan)  
Special "**N**ot **a** **N**umber" value.

[`Number.NEGATIVE_INFINITY`](number/negative_infinity)  
Special value representing negative infinity. Returned on overflow.

[`Number.POSITIVE_INFINITY`](number/positive_infinity)  
Special value representing infinity. Returned on overflow.

[`Number.prototype`](number)  
Allows the addition of properties to the `Number` object.

## Static methods

[`Number.isNaN()`](number/isnan)  
Determine whether the passed value is `NaN`.

[`Number.isFinite()`](number/isfinite)  
Determine whether the passed value is a finite number.

[`Number.isInteger()`](number/isinteger)  
Determine whether the passed value is an integer.

[`Number.isSafeInteger()`](number/issafeinteger)  
Determine whether the passed value is a safe integer (number between `-(253 - 1)` and `253 - 1`).

[`Number.parseFloat(string)`](number/parsefloat)  
This is the same as the global [`parseFloat()`](parsefloat) function.

[`Number.parseInt(string, [radix])`](number/parseint)  
This is the same as the global [`parseInt()`](parseint) function.

## Instance methods

[`Number.prototype.toExponential(fractionDigits)`](number/toexponential)  
Returns a string representing the number in exponential notation.

[`Number.prototype.toFixed(digits)`](number/tofixed)  
Returns a string representing the number in fixed-point notation.

[`Number.prototype.toLocaleString([locales [, options]])`](number/tolocalestring)  
Returns a string with a language sensitive representation of this number. Overrides the [`Object.prototype.toLocaleString()`](object/tolocalestring) method.

[`Number.prototype.toPrecision(precision)`](number/toprecision)  
Returns a string representing the number to a specified precision in fixed-point or exponential notation.

[`Number.prototype.toString([radix])`](number/tostring)  
Returns a string representing the specified object in the specified radix ("base"). Overrides the [`Object.prototype.toString()`](object/tostring) method.

[`Number.prototype.valueOf()`](number/valueof)  
Returns the primitive value of the specified object. Overrides the [`Object.prototype.valueOf()`](object/valueof) method.

## Examples

### Using the Number object to assign values to numeric variables

The following example uses the `Number` object's properties to assign values to several numeric variables:

    const biggestNum     = Number.MAX_VALUE
    const smallestNum    = Number.MIN_VALUE
    const infiniteNum    = Number.POSITIVE_INFINITY
    const negInfiniteNum = Number.NEGATIVE_INFINITY
    const notANum        = Number.NaN

### Integer range for Number

The following example shows the minimum and maximum integer values that can be represented as `Number` object. (More details on this are described in the ECMAScript standard, chapter _[6.1.6 The Number Type](https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type)._)

    const biggestInt  = Number.MAX_SAFE_INTEGER  //  (2**53 - 1) =>  9007199254740991
    const smallestInt = Number.MIN_SAFE_INTEGER  // -(2**53 - 1) => -9007199254740991

When parsing data that has been serialized to JSON, integer values falling outside of this range can be expected to become corrupted when JSON parser coerces them to `Number` type.

A possible workaround is to use [`String`](string) instead.

Larger numbers can be represented using the [`BigInt`](bigint) type.

### Using Number to convert a Date object

The following example converts the [`Date`](date) object to a numerical value using `Number` as a function:

    let d = new Date('December 17, 1995 03:24:00')
    console.log(Number(d))

This logs `819199440000`.

### Convert numeric strings and null to numbers

    Number('123')     // 123
    Number('123') === 123 /// true
    Number('12.3')    // 12.3
    Number('12.00')   // 12
    Number('123e-1')  // 12.3
    Number('')        // 0
    Number(null)      // 0
    Number('0x11')    // 17
    Number('0b11')    // 3
    Number('0o11')    // 9
    Number('foo')     // NaN
    Number('100a')    // NaN
    Number('-Infinity') //-Infinity

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-number-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-number-objects</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Number`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`EPSILON`

34

12

25

No

21

9

≤37

34

25

21

9

2.0

`MAX_SAFE_INTEGER`

34

12

31

No

21

9

≤37

34

31

21

9

2.0

`MAX_VALUE`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

`MIN_SAFE_INTEGER`

34

12

31

No

21

9

≤37

34

31

21

9

2.0

`MIN_VALUE`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

`NaN`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

`NEGATIVE_INFINITY`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

`Number`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`POSITIVE_INFINITY`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

`isFinite`

19

12

16

No

15

9

≤37

25

16

14

9

1.5

`isInteger`

34

12

16

No

21

9

≤37

34

16

21

9

2.0

`isNaN`

25

12

15

No

15

9

≤37

25

15

14

9

1.5

`isSafeInteger`

34

12

32

No

21

10

≤37

34

32

21

10

2.0

`parseFloat`

34

12

25

No

21

9

≤37

34

25

21

9

2.0

`parseInt`

34

12

25

No

21

9

≤37

34

25

21

9

2.0

`toExponential`

1

12

1

5.5

7

2

1

18

4

10.1

1

1.0

`toFixed`

1

12

1

5.5

7

2

1

18

4

10.1

1

1.0

`toLocaleString`

1

12

Before Edge 18, numbers are rounded to 15 decimal digits. For example, `(1000000000000005).toLocaleString('en-US')` returns `"1,000,000,000,000,010"`.

1

5

In Internet Explorer 11, numbers are rounded to 15 decimal digits. For example, `(1000000000000005).toLocaleString('en-US')` returns `"1,000,000,000,000,010"`.

4

1

1

18

4

10.1

1

1.0

`toPrecision`

1

12

1

5.5

7

2

1

18

4

10.1

1

1.0

`toSource`

No

No

1-74

Starting in Firefox 74, `toSource()` is no longer available for use by web content. It is still allowed for internal and privileged code.

No

No

No

No

No

4

No

No

No

`toString`

1

12

1

3

4

1

1

18

4

10.1

1

1.0

`valueOf`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`NaN`](nan)
-   <span class="page-not-created">`Arithmetic operators`</span>
-   The [`Math`](math) global object
-   Integers with arbitrary precision: [`BigInt`](bigint)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number</a>

# Intl.NumberFormat() constructor

The `Intl.NumberFormat()` constructor creates [`Intl.NumberFormat`](../numberformat) objects that enable language-sensitive number formatting.

## Syntax

    new Intl.NumberFormat()
    new Intl.NumberFormat(locales)
    new Intl.NumberFormat(locales, options)

### Parameters

`locales` <span class="badge inline optional">Optional</span>  
A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the `locales` argument, see the [Intl](../../intl#locale_identification_and_negotiation) page. The following Unicode extension key is allowed:

`nu`  
The numbering system to be used. Possible values include: "`adlm`", "`ahom`", "`arab`", "`arabext`", "`bali`", "`beng`", "`bhks`", "`brah`", "`cakm`", "`cham`", "`deva`", "`diak`", "`fullwide`", "`gong`", "`gonm`", "`gujr`", "`guru`", "`hanidec`", "`hmng`", "`hmnp`", "`java`", "`kali`", "`khmr`", "`knda`", "`lana`", "`lanatham`", "`laoo`", "`latn`", "`lepc`", "`limb`", "`mathbold`", "`mathdbl`", "`mathmono`", "`mathsanb`", "`mathsans`", "`mlym`", "`modi`", "`mong`", "`mroo`", "`mtei`", "`mymr`", "`mymrshan`", "`mymrtlng`", "`newa`", "`nkoo`", "`olck`", "`orya`", "`osma`", "`rohg`", "`saur`", "`segment`", "`shrd`", "`sind`", "`sinh`", "`sora`", "`sund`", "`takr`", "`talu`", "`tamldec`", "`telu`", "`thai`", "`tibt`", "`tirh`", "`vaii`", "`wara`", "`wcho`". — see the [standard Unicode numeral systems list](../locale/numberingsystem).

`options` <span class="badge inline optional">Optional</span>  
An object with some or all of the following properties:

`compactDisplay`  
Only used when `notation` is "`compact`". Takes either "`short`" (default) or "`long`".

`currency`  
The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "`USD`" for the US dollar, "`EUR`" for the euro, or "`CNY`" for the Chinese RMB — see the [Current currency & funds code list](https://www.currency-iso.org/en/home/tables/table-a1.html). There is no default value; if the `style` is "`currency`", the `currency` property must be provided.

`currencyDisplay`  
How to display the currency in currency formatting. Possible values are:

-   "`symbol`" to use a localized currency symbol such as €, this is the default value,
-   "`narrowSymbol`" to use a narrow format symbol ("$100" rather than "US$100"),
-   "`code`" to use the ISO currency code,
-   "`name`" to use a localized currency name such as "`dollar`",

`currencySign`  
In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. You can enable this formatting by setting the `currencySign` option to "`accounting`". The default value is "`standard`".

`localeMatcher`  
The locale matching algorithm to use. Possible values are "`lookup`" and "`best fit`"; the default is "`best fit`". For information about this option, see the [Intl](../../intl#locale_negotiation) page.

`notation`  
The formatting that should be displayed for the number, the defaults is "`standard`"

-   "`standard`" plain number formatting
-   "`scientific`" return the order-of-magnitude for formatted number.
-   "`engineering`" return the exponent of ten when divisible by three
-   "`compact`" string representing exponent, defaults is using the "short" form.

`numberingSystem`  
Numbering System. Possible values include: "`arab`", "`arabext`", " `bali`", "`beng`", "`deva`", "`fullwide`", " `gujr`", "`guru`", "`hanidec`", "`khmr`", " `knda`", "`laoo`", "`latn`", "`limb`", "`mlym`", " `mong`", "`mymr`", "`orya`", "`tamldec`", " `telu`", "`thai`", "`tibt`".

`signDisplay`  
When to display the sign for the number; defaults to "`auto`"

-   "`auto`" sign display for negative numbers only
-   "`never`" never display sign
-   "`always`" always display sign
-   "`exceptZero`" sign display for positive and negative numbers, but not zero

`style`  
The formatting style to use , the default is "`decimal`".

-   "`decimal`" for plain number formatting.
-   "`currency`" for currency formatting.
-   "`percent`" for percent formatting
-   "`unit`" for unit formatting

`unit`  
The unit to use in `unit` formatting, Possible values are core unit identifiers, defined in [UTS \#35, Part 2, Section 6](https://unicode.org/reports/tr35/tr35-general.html#Unit_Elements). A [subset](https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier) of units from the [full list](https://github.com/unicode-org/cldr/blob/master/common/validity/unit.xml) was selected for use in ECMAScript. Pairs of simple units can be concatenated with "`-per-`" to make a compound unit. There is no default value; if the `style` is "`unit`", the `unit` property must be provided.

`unitDisplay`  
The unit formatting style to use in `unit` formatting, the defaults is "`short`".

-   "`long`" (e.g., `16 litres`)
-   "`short`" (e.g., `16 l`)
-   "`narrow`" (e.g., `16l`)

`useGrouping`  
Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. Possible values are true and false; the default is true.

The following properties fall into two groups: `minimumIntegerDigits`, `minimumFractionDigits`, and `maximumFractionDigits` in one group, `minimumSignificantDigits` and `maximumSignificantDigits` in the other. If at least one property from the second group is defined, then the first group is ignored.

`minimumIntegerDigits`  
The minimum number of integer digits to use. Possible values are from 1 to 21; the default is 1.

`minimumFractionDigits`  
The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.currency-iso.org/en/home/tables/table-a1.html) (2 if the list doesn't provide that information).

`maximumFractionDigits`  
The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of `minimumFractionDigits` and 3; the default for currency formatting is the larger of `minimumFractionDigits` and the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.currency-iso.org/en/home/tables/table-a1.html) (2 if the list doesn't provide that information); the default for percent formatting is the larger of `minimumFractionDigits` and 0.

`minimumSignificantDigits`  
The minimum number of significant digits to use. Possible values are from 1 to 21; the default is 1.

`maximumSignificantDigits`  
The maximum number of significant digits to use. Possible values are from 1 to 21; the default is 21.

## Examples

### Basic usage

In basic use without specifying a locale, a formatted string in the default locale and with default options is returned.

    let amount = 3500;

    console.log(new Intl.NumberFormat().format(amount));
    // → '3,500' if in US English locale

### Decimal and percent formatting

    let amount = 3500;

    new Intl.NumberFormat('en-US', {style: 'decimal'}).format(amount);
    // → '3,500'
    new Intl.NumberFormat('en-US', {style: 'percent'}).format(amount);
    // → '350,000%'

### Unit formatting

If the `style` is `'unit'`, a `unit` property must be provided. Optionally, `unitDisplay` controls the unit formatting.

    let amount = 3500;

    new Intl.NumberFormat('en-US', {style: 'unit', unit: 'liter'}).format(amount);
    // → '3,500 L'

    new Intl.NumberFormat('en-US', {style: 'unit', unit: 'liter', unitDisplay: 'long'}).format(amount);
    // → '3,500 liters'

### Currency formatting

If the `style` is `'currency'`, a `currency` property must be provided. Optionally, `currencyDisplay` and `currencySign` control the unit formatting.

    let amount = -3500;
    new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(amount);
    // → '-$3,500.00'

    new Intl.NumberFormat('bn', {
      style: 'currency',
      currency: 'USD',
      currencyDisplay: 'name'
    }).format(amount);
    // →  '-3,500.00 US dollars'

    new Intl.NumberFormat('bn', {
      style: 'currency',
      currency: 'USD',
      currencySign: 'accounting'
    }).format(amount);
    // →  '($3,500.00)'

### Scientific, engineering or compact notations

Scientific and compact notation are represented by the `notation` option and can be formatted like this:

    new Intl.NumberFormat('en-US', { notation: "scientific" }).format(987654321);
    // → 9.877E8

    new Intl.NumberFormat('pt-PT', { notation: "scientific" }).format(987654321);
    // → 9,877E8

    new Intl.NumberFormat('en-GB', { notation: "engineering" }).format(987654321);
    // → 987.654E6

    new Intl.NumberFormat('de', { notation: "engineering" }).format(987654321);
    // → 987,654E6

    new Intl.NumberFormat('zh-CN', { notation: "compact" }).format(987654321);
    // → 9.9亿

    new Intl.NumberFormat('fr', {
      notation: "compact",
      compactDisplay: "long"
    }).format(987654321);
    // → 988 millions

    new Intl.NumberFormat('en-GB', {
      notation: "compact",
      compactDisplay: "short"
    }).format(987654321);
    // → 988M

### Displaying signs

Display a sign for positive and negative numbers, but not zero:

    new Intl.NumberFormat("en-US", {
        style: "percent",
        signDisplay: "exceptZero"
    }).format(0.55);
    // → '+55%'

Note that when the currency sign is "accounting", parentheses might be used instead of a minus sign:

    new Intl.NumberFormat('bn', {
      style: 'currency',
      currency: 'USD',
      currencySign: 'accounting',
      signDisplay: 'always'
    }).format(-3500);

    // → '($3,500.00)'

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-intl-numberformat-constructor">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-intl-numberformat-constructor</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`NumberFormat`

24

12

29

11

15

10

4.4

25

56

14

10

1.5

`compactDisplay`

77

79

78

No

64

14.1

77

77

79

55

14.5

12.0

`currencyDisplay`

77

79

78

No

64

14.1

10-14.1

Doesn't support `currencyDisplay: 'narrowSymbol'`.

77

77

79

55

14.5

10-14.5

Doesn't support `currencyDisplay: 'narrowSymbol'`.

12.0

`currencySign`

77

79

78

No

64

14.1

77

77

79

55

14.5

12.0

`notation`

77

79

78

No

64

14.1

77

77

79

55

14.5

12.0

`signDisplay`

77

79

78

No

64

14.1

77

77

79

55

14.5

12.0

`unit`

77

79

78

No

64

14.1

77

77

79

55

14.5

12.0

`unitDisplay`

77

79

78

No

64

14.1

77

77

79

55

14.5

12.0

## See also

-   [`Intl.NumberFormat`](../numberformat)
-   [`Intl`](../../intl)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat</a>

# Intl.Locale.prototype.numberingSystem

The `Intl.Locale.prototype.numberingSystem` property is an accessor property that returns the [numeral system](https://en.wikipedia.org/wiki/Numeral_system) used by the locale.

## Description

A numeral system is a system for expressing numbers. The `numberingSystem` property helps to represent the different numeral systems used by various countries, regions, and cultures around the world. As with most internationalization schemas, the numeral systems that can be represented in a `Locale` object by `numberingSystem` are standardized by Unicode. A table of the standard Unicode numeral systems can be seen below.

<table><thead><tr class="header"><th>Value</th><th>Description</th></tr></thead><tbody><tr class="odd"><td>adlm</td><td>Adlam digits</td></tr><tr class="even"><td>ahom</td><td>Ahom digits</td></tr><tr class="odd"><td>arab</td><td>Arabic-Indic digits</td></tr><tr class="even"><td>arabext</td><td>Extended Arabic-Indic digits</td></tr><tr class="odd"><td>armn</td><td>Armenian upper case numerals — algorithmic</td></tr><tr class="even"><td>armnlow</td><td>Armenian lower case numerals — algorithmic</td></tr><tr class="odd"><td>bali</td><td>Balinese digits</td></tr><tr class="even"><td>beng</td><td>Bengali digits</td></tr><tr class="odd"><td>bhks</td><td>Bhaiksuki digits</td></tr><tr class="even"><td>brah</td><td>Brahmi digits</td></tr><tr class="odd"><td>cakm</td><td>Chakma digits</td></tr><tr class="even"><td>cham</td><td>Cham digits</td></tr><tr class="odd"><td>cyrl</td><td>Cyrillic numerals — algorithmic</td></tr><tr class="even"><td>deva</td><td>Devanagari digits</td></tr><tr class="odd"><td>ethi</td><td>Ethiopic numerals — algorithmic</td></tr><tr class="even"><td>finance</td><td>Financial numerals — may be algorithmic</td></tr><tr class="odd"><td>fullwide</td><td>Full width digits</td></tr><tr class="even"><td>geor</td><td>Georgian numerals — algorithmic</td></tr><tr class="odd"><td>gong</td><td>Gunjala Gondi digits</td></tr><tr class="even"><td>gonm</td><td>Masaram Gondi digits</td></tr><tr class="odd"><td>grek</td><td>Greek upper case numerals — algorithmic</td></tr><tr class="even"><td>greklow</td><td>Greek lower case numerals — algorithmic</td></tr><tr class="odd"><td>gujr</td><td>Gujarati digits</td></tr><tr class="even"><td>guru</td><td>Gurmukhi digits</td></tr><tr class="odd"><td>hanidays</td><td>Han-character day-of-month numbering for lunar/other traditional calendars</td></tr><tr class="even"><td>hanidec</td><td>Positional decimal system using Chinese number ideographs as digits</td></tr><tr class="odd"><td>hans</td><td>Simplified Chinese numerals — algorithmic</td></tr><tr class="even"><td>hansfin</td><td>Simplified Chinese financial numerals — algorithmic</td></tr><tr class="odd"><td>hant</td><td>Traditional Chinese numerals — algorithmic</td></tr><tr class="even"><td>hantfin</td><td>Traditional Chinese financial numerals — algorithmic</td></tr><tr class="odd"><td>hebr</td><td>Hebrew numerals — algorithmic</td></tr><tr class="even"><td>hmng</td><td>Pahawh Hmong digits</td></tr><tr class="odd"><td>hmnp</td><td>Nyiakeng Puachue Hmong digits</td></tr><tr class="even"><td>java</td><td>Javanese digits</td></tr><tr class="odd"><td>jpan</td><td>Japanese numerals — algorithmic</td></tr><tr class="even"><td>jpanfin</td><td>Japanese financial numerals — algorithmic</td></tr><tr class="odd"><td>jpanyear</td><td>Japanese first-year Gannen numbering for Japanese calendar</td></tr><tr class="even"><td>kali</td><td>Kayah Li digits</td></tr><tr class="odd"><td>khmr</td><td>Khmer digits</td></tr><tr class="even"><td>knda</td><td>Kannada digits</td></tr><tr class="odd"><td>lana</td><td>Tai Tham Hora (secular) digits</td></tr><tr class="even"><td>lanatham</td><td>Tai Tham (ecclesiastical) digits</td></tr><tr class="odd"><td>laoo</td><td>Lao digits</td></tr><tr class="even"><td>latn</td><td>Latin digits</td></tr><tr class="odd"><td>lepc</td><td>Lepcha digits</td></tr><tr class="even"><td>limb</td><td>Limbu digits</td></tr><tr class="odd"><td>mathbold</td><td>Mathematical bold digits</td></tr><tr class="even"><td>mathdbl</td><td>Mathematical double-struck digits</td></tr><tr class="odd"><td>mathmono</td><td>Mathematical monospace digits</td></tr><tr class="even"><td>mathsanb</td><td>Mathematical sans-serif bold digits</td></tr><tr class="odd"><td>mathsans</td><td>Mathematical sans-serif digits</td></tr><tr class="even"><td>mlym</td><td>Malayalam digits</td></tr><tr class="odd"><td>modi</td><td>Modi digits</td></tr><tr class="even"><td>mong</td><td>Mongolian digits</td></tr><tr class="odd"><td>mroo</td><td>Mro digits</td></tr><tr class="even"><td>mtei</td><td>Meetei Mayek digits</td></tr><tr class="odd"><td>mymr</td><td>Myanmar digits</td></tr><tr class="even"><td>mymrshan</td><td>Myanmar Shan digits</td></tr><tr class="odd"><td>mymrtlng</td><td>Myanmar Tai Laing digits</td></tr><tr class="even"><td>native</td><td>Native digits</td></tr><tr class="odd"><td>newa</td><td>Newa digits</td></tr><tr class="even"><td>nkoo</td><td>N'Ko digits</td></tr><tr class="odd"><td>olck</td><td>Ol Chiki digits</td></tr><tr class="even"><td>orya</td><td>Oriya digits</td></tr><tr class="odd"><td>osma</td><td>Osmanya digits</td></tr><tr class="even"><td>rohg</td><td>Hanifi Rohingya digits</td></tr><tr class="odd"><td>roman</td><td>Roman upper case numerals — algorithmic</td></tr><tr class="even"><td>romanlow</td><td>Roman lowercase numerals — algorithmic</td></tr><tr class="odd"><td>saur</td><td>Saurashtra digits</td></tr><tr class="even"><td>shrd</td><td>Sharada digits</td></tr><tr class="odd"><td>sind</td><td>Khudawadi digits</td></tr><tr class="even"><td>sinh</td><td>Sinhala Lith digits</td></tr><tr class="odd"><td>sora</td><td>Sora_Sompeng digits</td></tr><tr class="even"><td>sund</td><td>Sundanese digits</td></tr><tr class="odd"><td>takr</td><td>Takri digits</td></tr><tr class="even"><td>talu</td><td>New Tai Lue digits</td></tr><tr class="odd"><td>taml</td><td>Tamil numerals — algorithmic</td></tr><tr class="even"><td>tamldec</td><td>Modern Tamil decimal digits</td></tr><tr class="odd"><td>telu</td><td>Telugu digits</td></tr><tr class="even"><td>thai</td><td>Thai digits</td></tr><tr class="odd"><td>tirh</td><td>Tirhuta digits</td></tr><tr class="even"><td>tibt</td><td>Tibetan digits</td></tr><tr class="odd"><td>traditio</td><td>Traditional numerals — may be algorithmic</td></tr><tr class="even"><td>vaii</td><td>Vai digits</td></tr><tr class="odd"><td>wara</td><td>Warang Citi digits</td></tr><tr class="even"><td>wcho</td><td>Wancho digits</td></tr></tbody></table>

## Examples

### Setting the `numberingSystem` value via the locale string

In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), the values that `numberingSystem` represents correspond to the key `nu`. `nu` is considered a locale string "extension subtag". These subtags add additional data about the locale, and are added to locale identifiers by first adding the `-u` key. To set the `numberingSystem` value via the string argument to the [`Locale`](locale) constructor, first add the `-u` extension key. Next, add the `-nu` extension key to indicate that you are adding a value for `numberingSystem`. Finally, add the `numberingSystem` value to the string.

    let numberingSystemViaStr = new Intl.Locale("fr-Latn-FR-u-nu-mong");
    console.log(numberingSystemStr.numberingSystem); // Prints "mong"

### Setting the `numberingSystem` value via the configuration object argument

The [`Intl.Locale`](locale) constructor has an optional configuration object argument, which can be used to pass extension types. Set the `numberingSystem` property of the configuration object to your desired `numberingSystem` value and pass it into the constructor.

    let numberingSystemViaObj= new Intl.Locale("en-Latn-US", {numberingSystem: "latn"});
    console.log(us12hour.numberingSystem); // Prints "latn"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.Locale.prototype.numberingSystem">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.Locale.prototype.numberingSystem</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`numberingSystem`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl.Locale`](../locale)
-   [Details on the standard Unicode numeral systems](https://github.com/unicode-org/cldr/blob/master/common/supplemental/numberingSystems.xml)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem</a>

# Intl.Locale.prototype.numeric

The `Intl.Locale.prototype.numeric` property is an accessor property that returns whether the locale has special collation handling for numeric characters.

## Description

Like [`Intl.Locale.caseFirst`](casefirst), `numeric` represents a modification to the collation rules utilized by the locale. `numeric` is a [`Boolean`](../../boolean) value, which means that it can be either `true` or `false`. If `numeric` is set to `false`, there will be no special handling of numeric values in strings. If `numeric` is set to `true`, then the locale will take numeric characters into account when collating strings. This special numeric handling means that sequences of decimal digits will be compared as numbers. For example, the string "A-21" will be considered less than "A-123".

## Examples

### Setting the numeric value via the locale string

In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), the values that `numeric` represents correspond to the key `kn`. `kn` is considered a locale string "extension subtag". These subtags add additional data about the locale, and are added to locale identifiers by using the `-u` extension key. Thus, the `numeric` value can be added to the initial locale identifier string that is passed into the [`Locale`](locale) constructor. To set the `numeric` value, first add the `-u` extension key to the string. Next, add the `-kn` extension key to indicate that you are adding a value for `numeric`. Finally, add the `numeric` value to the string. If you want to set `numeric` to `true`, adding the `kn` key will suffice. To set the value to `false`, you must specify in by adding "`false`" after the `kn` key.

    let numericViaStr = new Intl.Locale("fr-Latn-FR-u-kn-false");
    console.log(numericStr.numeric); // Prints "false"

### Setting the `numeric` value via the configuration object argument

The [`Intl.Locale`](locale) constructor has an optional configuration object argument, which can be used to pass extension types. Set the `numeric` property of the configuration object to your desired `numeric` value and pass it into the constructor.

    let numericViaObj= new Intl.Locale("en-Latn-US", {numeric: true});
    console.log(us12hour.numeric); // Prints "true"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.Locale.prototype.numeric">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.Locale.prototype.numeric</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`numeric`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl.Locale`](../locale)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numeric" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numeric</a>

# Object

The `Object` class represents one of [JavaScript's data types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures). It is used to store various keyed collections and more complex entities. Objects can be created using the [`Object()`](object/object) constructor or the [object initializer / literal syntax](../operators/object_initializer).

## Description

Nearly all objects in JavaScript are instances of [`Object`](object); a typical object inherits properties (including methods) from `Object.prototype`, although these properties may be shadowed (a.k.a. overridden). However, an `Object` may be deliberately created for which this is not true (e.g. by [`Object.create(null)`](object/create)), or it may be altered so that this is no longer true (e.g. with [`Object.setPrototypeOf`](object/setprototypeof)).

Changes to the `Object` prototype object are seen by **all** objects through prototype chaining, unless the properties and methods subject to those changes are overridden further along the prototype chain. This provides a very powerful although potentially dangerous mechanism to override or extend object behavior.

The `Object` constructor creates an object wrapper for the given value.

-   If the value is [`null`](null) or [`undefined`](undefined), it will create and return an empty object.
-   Otherwise, it will return an object of a Type that corresponds to the given value.
-   If the value is an object already, it will return the value.

When called in a non-constructor context, `Object` behaves identically to `new Object()`.

See also the [object initializer / literal syntax](../operators/object_initializer).

### Deleting a property from an object

There isn't any method in an Object itself to delete its own properties (such as [`Map.prototype.delete()`](map/delete)). To do so, one must use the [delete operator](../operators/delete).

## Constructor

[`Object()`](object/object)  
Creates a new `Object` object. It is a wrapper for the given value.

## Static methods

[`Object.assign()`](object/assign)  
Copies the values of all enumerable own properties from one or more source objects to a target object.

[`Object.create()`](object/create)  
Creates a new object with the specified prototype object and properties.

[`Object.defineProperty()`](object/defineproperty)  
Adds the named property described by a given descriptor to an object.

[`Object.defineProperties()`](object/defineproperties)  
Adds the named properties described by the given descriptors to an object.

[`Object.entries()`](object/entries)  
Returns an array containing all of the `[key, value]` pairs of a given object's **own** enumerable string properties.

[`Object.freeze()`](object/freeze)  
Freezes an object. Other code cannot delete or change its properties.

[`Object.fromEntries()`](object/fromentries)  
Returns a new object from an iterable of `[key, value]` pairs. (This is the reverse of [`Object.entries`](object/entries)).

[`Object.getOwnPropertyDescriptor()`](object/getownpropertydescriptor)  
Returns a property descriptor for a named property on an object.

[`Object.getOwnPropertyDescriptors()`](object/getownpropertydescriptors)  
Returns an object containing all own property descriptors for an object.

[`Object.getOwnPropertyNames()`](object/getownpropertynames)  
Returns an array containing the names of all of the given object's **own** enumerable and non-enumerable properties.

[`Object.getOwnPropertySymbols()`](object/getownpropertysymbols)  
Returns an array of all symbol properties found directly upon a given object.

[`Object.getPrototypeOf()`](object/getprototypeof)  
Returns the prototype (internal `[[Prototype]]` property) of the specified object.

[`Object.is()`](object/is)  
Compares if two values are the same value. Equates all `NaN` values (which differs from both Abstract Equality Comparison and Strict Equality Comparison).

[`Object.isExtensible()`](object/isextensible)  
Determines if extending of an object is allowed.

[`Object.isFrozen()`](object/isfrozen)  
Determines if an object was frozen.

[`Object.isSealed()`](object/issealed)  
Determines if an object is sealed.

[`Object.keys()`](object/keys)  
Returns an array containing the names of all of the given object's **own** enumerable string properties.

[`Object.preventExtensions()`](object/preventextensions)  
Prevents any extensions of an object.

[`Object.seal()`](object/seal)  
Prevents other code from deleting properties of an object.

[`Object.setPrototypeOf()`](object/setprototypeof)  
Sets the object's prototype (its internal `[[Prototype]]` property).

[`Object.values()`](object/values)  
Returns an array containing the values that correspond to all of a given object's **own** enumerable string properties.

## Instance properties

[`Object.prototype.constructor`](object/constructor)  
Specifies the function that creates an object's prototype.

[`Object/proto`](object/proto)  
Points to the object which was used as prototype when the object was instantiated.

## Instance methods

[`Object.prototype.__defineGetter__()`](object/__definegetter__)  
Associates a function with a property that, when accessed, executes that function and returns its return value.

[`Object.prototype.__defineSetter__()`](object/__definesetter__)  
Associates a function with a property that, when set, executes that function which modifies the property.

[`Object.prototype.__lookupGetter__()`](object/__lookupgetter__)  
Returns the function associated with the specified property by the [`__defineGetter__()`](object/__definegetter__) method.

[`Object.prototype.__lookupSetter__()`](object/__lookupsetter__)  
Returns the function associated with the specified property by the [`__defineSetter__()`](object/__definesetter__) method.

[`Object.prototype.hasOwnProperty()`](object/hasownproperty)  
Returns a boolean indicating whether an object contains the specified property as a direct property of that object and not inherited through the prototype chain.

[`Object.prototype.isPrototypeOf()`](object/isprototypeof)  
Returns a boolean indicating whether the object this method is called upon is in the prototype chain of the specified object.

[`Object.prototype.propertyIsEnumerable()`](object/propertyisenumerable)  
Returns a boolean indicating if the internal [ECMAScript \[\[Enumerable\]\] attribute](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#properties) is set.

[`Object.prototype.toLocaleString()`](object/tolocalestring)  
Calls [`toString()`](object/tostring).

[`Object.prototype.toString()`](object/tostring)  
Returns a string representation of the object.

[`Object.prototype.valueOf()`](object/valueof)  
Returns the primitive value of the specified object.

## Examples

### Using `Object` given `undefined` and `null` types

The following examples store an empty `Object` object in `o`:

    let o = new Object()

    let o = new Object(undefined)

    let o = new Object(null)

### Using `Object` to create `Boolean` objects

The following examples store [`Boolean`](boolean) objects in `o`:

    // equivalent to o = new Boolean(true)
    let o = new Object(true)

    // equivalent to o = new Boolean(false)
    let o = new Object(Boolean())

### Object prototypes

When altering the behavior of existing `Object.prototype` methods, consider injecting code by wrapping your extension before or after the existing logic. For example, this (untested) code will pre-conditionally execute custom logic before the built-in logic or someone else's extension is executed.

When a function is called, the arguments to the call are held in the array-like "variable" [arguments](../functions/arguments). For example, in the call `myFn(a, b, c)`, the arguments within `myFn`'s body will contain 3 array-like elements corresponding to `(a, b, c)`.

When modifying prototypes with hooks, pass `this` and the arguments (the call state) to the current behavior by calling `apply()` on the function. This pattern can be used for any prototype, such as `Node.prototype`, `Function.prototype`, etc.

    var current = Object.prototype.valueOf;

    // Since my property "-prop-value" is cross-cutting and isn't always
    // on the same prototype chain, I want to modify Object.prototype:
    Object.prototype.valueOf = function() {
      if (this.hasOwnProperty('-prop-value')) {
        return this['-prop-value'];
      } else {
        // It doesn't look like one of my objects, so let's fall back on
        // the default behavior by reproducing the current behavior as best we can.
        // The apply behaves like "super" in some other languages.
        // Even though valueOf() doesn't take arguments, some other hook may.
        return current.apply(this, arguments);
      }
    }

Since JavaScript doesn't exactly have sub-class objects, prototype is a useful workaround to make a "base class” object of certain functions that act as objects. For example:

    var Person = function(name) {
      this.name = name;
      this.canTalk = true;
    };

    Person.prototype.greet = function() {
      if (this.canTalk) {
        console.log('Hi, I am ' + this.name);
      }
    };

    var Employee = function(name, title) {
      Person.call(this, name);
      this.title = title;
    };

    Employee.prototype = Object.create(Person.prototype);
    Employee.prototype.constructor = Employee; //If you don't set Object.prototype.constructor to Employee,
                                               //it will take prototype.constructor of Person (parent).
                                               //To avoid that, we set the prototype.constructor to Employee (child).

    Employee.prototype.greet = function() {
      if (this.canTalk) {
        console.log('Hi, I am ' + this.name + ', the ' + this.title);
      }
    };

    var Customer = function(name) {
      Person.call(this, name);
    };

    Customer.prototype = Object.create(Person.prototype);
    Customer.prototype.constructor = Customer; //If you don't set Object.prototype.constructor to Customer,
                                               //it will take prototype.constructor of Person (parent).
                                               //To avoid that, we set the prototype.constructor to Customer (child).

    var Mime = function(name) {
      Person.call(this, name);
      this.canTalk = false;
    };

    Mime.prototype = Object.create(Person.prototype);
    Mime.prototype.constructor = Mime; //If you don't set Object.prototype.constructor to Mime,
                                       //it will take prototype.constructor of Person (parent).
                                       //To avoid that, we set the prototype.constructor to Mime (child).

    var bob = new Employee('Bob', 'Builder');
    var joe = new Customer('Joe');
    var rg = new Employee('Red Green', 'Handyman');
    var mike = new Customer('Mike');
    var mime = new Mime('Mime');

    bob.greet();
    // Hi, I am Bob, the Builder

    joe.greet();
    // Hi, I am Joe

    rg.greet();
    // Hi, I am Red Green, the Handyman

    mike.greet();
    // Hi, I am Mike

    mime.greet();

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object-objects">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Object' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Object`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`Object`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`assign`

45

12

34

No

32

9

45

45

34

32

9

5.0

`constructor`

1

12

1

8

4

1

1

18

4

10.1

1

1.0

`create`

5

12

4

9

11.6

5

1

18

4

12

5

1.0

`defineGetter`

1

12

1

Starting with Firefox 48, this method can no longer be called at the global scope without any object. A `TypeError` will be thrown otherwise. Previously, the global object was used in these cases automatically, but this is no longer the case.

11

9.5

3

1

18

4

10.1

1

1.0

`defineProperties`

5

12

4

9

11.6

5

1

18

4

12

5

1.0

`defineProperty`

5

12

4

9

8

In Internet Explorer 8, this was only supported on DOM objects and with some non-standard behaviors. This was later fixed in Internet Explorer 9.

11.6

5.1

Also supported in Safari 5, but not on DOM objects.

1

18

4

12

6

Also supported in Safari for iOS 4.2, but not on DOM objects.

1.0

`defineSetter`

1

12

1

Starting with Firefox 48, this method can no longer be called at the global scope without any object. A `TypeError` will be thrown otherwise. Previously, the global object was used in these cases automatically, but this is no longer the case.

11

9.5

3

1

18

4

10.1

1

1.0

`entries`

54

14

47

No

41

10.1

54

54

47

41

10.3

6.0

`freeze`

6

12

4

9

12

5.1

1

18

4

12

6

1.0

`fromEntries`

73

79

63

No

60

12.1

73

73

63

No

12.2

No

`getOwnPropertyDescriptor`

5

12

4

9

8

In Internet Explorer 8, this was only supported on DOM objects and with some non-standard behaviors. This was later fixed in Internet Explorer 9.

12

5

1

18

4

12

5

1.0

`getOwnPropertyDescriptors`

54

15

50

No

41

10

54

54

50

41

10

6.0

`getOwnPropertyNames`

5

12

4

9

12

5

1

18

4

12

5

1.0

`getOwnPropertySymbols`

38

12

36

No

25

9

38

38

36

25

9

3.0

`getPrototypeOf`

5

12

3.5

9

12.1

5

1

18

4

12.1

5

1.0

`hasOwnProperty`

1

12

1

5.5

5

3

1

18

4

10.1

1

1.0

`is`

30

12

22

No

17

9

≤37

30

22

18

9

2.0

`isExtensible`

6

12

4

9

12

5.1

1

18

4

12

6

1.0

`isFrozen`

6

12

4

9

12

5.1

1

18

4

12

6

1.0

`isPrototypeOf`

1

12

1

9

4

3

1

18

4

10.1

1

1.0

`isSealed`

6

12

4

9

12

5.1

1

18

4

12

6

1.0

`keys`

5

12

4

9

12

5

1

18

4

12

5

1.0

`lookupGetter`

1

12

1

11

9.5

3

1

18

4

10.1

1

1.0

`lookupSetter`

1

12

1

11

9.5

3

1

18

4

10.1

1

1.0

`preventExtensions`

6

12

4

9

12

5.1

1

18

4

12

6

1.0

`propertyIsEnumerable`

1

12

1

5.5

4

3

1

18

4

10.1

1

1.0

`proto`

1

12

1

11

10.5

3

1

18

4

11

1

1.0

`seal`

6

12

4

9

12

5.1

1

18

4

12

6

1.0

`setPrototypeOf`

34

12

31

11

21

9

37

34

31

21

9

2.0

`toLocaleString`

1

12

1

5.5

4

1

1

18

4

10.1

1

1.0

`toSource`

No

No

1-74

Starting in Firefox 74, `toSource()` is no longer available for use by web content. It is still allowed for internal and privileged code.

No

No

No

No

No

4

No

No

No

`toString`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`valueOf`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

`values`

54

14

47

No

41

10.1

54

54

47

41

10.3

6.0

## See also

-   [Object initializer](../operators/object_initializer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object</a>

# Object initializer

Objects can be initialized using [`new Object()`](../global_objects/object/object), `Object.create()`, or using the _literal_ notation (_initializer_ notation). An object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces (`{}`).

## Syntax

    let o = {}
    let o = {a: 'foo', b: 42, c: {}}

    let a = 'foo', b = 42, c = {}
    let o = {a: a, b: b, c: c}

    let o = {
      property: function (parameters) {},
      get property() {},
      set property(value) {}
    };

### New notations in ECMAScript 2015

Please see the compatibility table for support for these notations. In non-supporting environments, these notations will lead to syntax errors.

    // Shorthand property names (ES2015)
    let a = 'foo', b = 42, c = {};
    let o = {a, b, c}

    // Shorthand method names (ES2015)
    let o = {
      property(parameters) {}
    }

    // Computed property names (ES2015)
    let prop = 'foo';
    let o = {
      [prop]: 'hey',
      ['b' + 'ar']: 'there'
    }

## Description

An object initializer is an expression that describes the initialization of an [`Object`](../global_objects/object). Objects consist of _properties_, which are used to describe an object. The values of object properties can either contain [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) data types or other objects.

### Object literal notation vs JSON

The object literal notation is not the same as the **J**ava**S**cript **O**bject **N**otation ([JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON)). Although they look similar, there are differences between them:

-   JSON permits _only_ property definition using `"property": value` syntax. The property name must be double-quoted, and the definition cannot be a shorthand.
-   In JSON the values can only be strings, numbers, arrays, `true`, `false`, `null`, or another (JSON) object.
-   A function value (see "Methods" below) can not be assigned to a value in JSON.
-   Objects like [`Date`](../global_objects/date) will be a string after [`JSON.parse()`](../global_objects/json/parse).
-   [`JSON.parse()`](../global_objects/json/parse) will reject computed property names and an error will be thrown.

## Examples

### Creating objects

An empty object with no properties can be created like this:

    let object = {}

However, the advantage of the _literal_ or _initializer_ notation is, that you are able to quickly create objects with properties inside the curly braces. You notate a list of `key: value` pairs delimited by commas.

The following code creates an object with three properties and the keys are `"foo"`, `"age"` and `"baz"`. The values of these keys are a string `"bar"`, the number `42`, and another object.

    let object = {
      foo: 'bar',
      age: 42,
      baz: {myProp: 12}
    }

### Accessing properties

Once you have created an object, you might want to read or change them. Object properties can be accessed by using the dot notation or the bracket notation. (See [property accessors](property_accessors) for detailed information.)

    object.foo // "bar"
    object['age'] // 42

    object.foo = 'baz'

### Property definitions

We have already learned how to notate properties using the initializer syntax. Oftentimes, there are variables in your code that you would like to put into an object. You will see code like this:

    let a = 'foo',
        b = 42,
        c = {};

    let o = {
      a: a,
      b: b,
      c: c
    }

With ECMAScript 2015, there is a shorter notation available to achieve the same:

    let a = 'foo',
        b = 42,
        c = {};

    // Shorthand property names (ES2015)
    let o = {a, b, c}

    // In other words,
    console.log((o.a === {a}.a)) // true

#### Duplicate property names

When using the same name for your properties, the second property will overwrite the first.

    let a = {x: 1, x: 2}
    console.log(a) // {x: 2}

In ECMAScript 5 strict mode code, duplicate property names were considered a [`SyntaxError`](../global_objects/syntaxerror). With the introduction of computed property names making duplication possible at runtime, ECMAScript 2015 has removed this restriction.

    function haveES2015DuplicatePropertySemantics() {
      'use strict';
      try {
        ({prop: 1, prop: 2});

        // No error thrown, duplicate property names allowed in strict mode
        return true;
      } catch(e) {
        // Error thrown, duplicates prohibited in strict mode
        return false;
      }
    }

### Method definitions

A property of an object can also refer to a [function](../functions) or a [getter](../functions/get) or [setter](../functions/set) method.

    let o = {
      property: function (parameters) {},
      get property() {},
      set property(value) {}
    }

In ECMAScript 2015, a shorthand notation is available, so that the keyword "`function`" is no longer necessary.

    // Shorthand method names (ES2015)
    let o = {
      property(parameters) {},
    }

In ECMAScript 2015, there is a way to concisely define properties whose values are generator functions:

    let o = {
      *generator() {
        ...........
      }
    };

Which is equivalent to this ES5-like notation (but note that ECMAScript 5 has no generators):

    let o = {
      generator: function* () {
        ...........
      }
    };

For more information and examples about methods, see [method definitions](../functions/method_definitions).

### Computed property names

Starting with ECMAScript 2015, the object initializer syntax also supports computed property names. That allows you to put an expression in brackets `[]`, that will be computed and used as the property name. This is reminiscent of the bracket notation of the [property accessor](property_accessors) syntax, which you may have used to read and set properties already.

Now you can use a similar syntax in object literals, too:

    // Computed property names (ES2015)
    let i = 0
    let a = {
      ['foo' + ++i]: i,
      ['foo' + ++i]: i,
      ['foo' + ++i]: i
    }

    console.log(a.foo1) // 1
    console.log(a.foo2) // 2
    console.log(a.foo3) // 3

    const items = ["A","B","C"];
    const obj = {
    [items]: "Hello"
    }
    console.log(obj); // A,B,C: "Hello"
    console.log(obj["A,B,C"]) // "Hello"

    let param = 'size'
    let config = {
      [param]: 12,
      ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
    }

    console.log(config) // {size: 12, mobileSize: 4}

### Spread properties

The [Rest/Spread Properties for ECMAScript](https://github.com/tc39/proposal-object-rest-spread) proposal (stage 4) adds [spread](spread_syntax) properties to object literals. It copies own enumerable properties from a provided object onto a new object.

Shallow-cloning (excluding `prototype`) or merging objects is now possible using a shorter syntax than [`Object.assign()`](../global_objects/object/assign).

    let obj1 = { foo: 'bar', x: 42 }
    let obj2 = { foo: 'baz', y: 13 }

    let clonedObj = { ...obj1 }
    // Object { foo: "bar", x: 42 }

    let mergedObj = { ...obj1, ...obj2 }
    // Object { foo: "baz", x: 42, y: 13 }

**Warning:** Note that [`Object.assign()`](../global_objects/object/assign) triggers [setters](../functions/set), whereas the spread operator doesn't!

### Prototype mutation

A property definition of the form `__proto__: value` or `"__proto__": value` does not create a property with the name `__proto__`. Instead, if the provided value is an object or [`null`](../global_objects/null), it changes the `[[Prototype]]` of the created object to that value. (If the value is not an object or `null`, the object is not changed.)

    let obj1 = {}
    assert(Object.getPrototypeOf(obj1) === Object.prototype)

    let obj2 = {__proto__: null}
    assert(Object.getPrototypeOf(obj2) === null)

    let protoObj = {}
    let obj3 = {'__proto__': protoObj}
    assert(Object.getPrototypeOf(obj3) === protoObj)

    let obj4 = {__proto__: 'not an object or null'}
    assert(Object.getPrototypeOf(obj4) === Object.prototype)
    assert(!obj4.hasOwnProperty('__proto__'))

Only a single prototype mutation is permitted in an object literal. Multiple prototype mutations are a syntax error.

Property definitions that do not use "colon" notation are not prototype mutations. They are property definitions that behave identically to similar definitions using any other name.

    let __proto__ = 'variable'

    let obj1 = {__proto__}
    assert(Object.getPrototypeOf(obj1) === Object.prototype)
    assert(obj1.hasOwnProperty('__proto__'))
    assert(obj1.__proto__ === 'variable')

    let obj2 = {__proto__() { return 'hello'; }}
    assert(obj2.__proto__() === 'hello')

    let obj3 = {['__prot' + 'o__']: 17}
    assert(obj3.__proto__ === 17)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object-initializer">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Object Initializer' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Object_initializer`

1

12

1

1

4

1

1

18

4

10.1

1

1.0

`computed_property_names`

47

12

34

No

34

8

47

47

34

34

8

5.0

`shorthand_method_names`

47

12

34

No

34

9

47

47

34

34

9

5.0

`shorthand_property_names`

47

12

33

No

34

9

47

47

33

34

9

5.0

`spread_properties`

60

79

55

No

47

11.1

60

60

55

44

11.3

8.0

## See also

-   [Property accessors](property_accessors)
-   `get` / `set`
-   [Method definitions](../functions/method_definitions)
-   [Lexical grammar](../lexical_grammar)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer</a>

# TypedArray.of()

The `TypedArray.of()` method creates a new [typed array](../typedarray#typedarray_objects) from a variable number of arguments. This method is nearly the same as [`Array.of()`](../array/of).

## Syntax

    TypedArray.of(element0[, element1[, ...[, elementN]]])

Where `TypedArray` is one of:

-   [`Int8Array`](../int8array)
-   [`Uint8Array`](../uint8array)
-   [`Uint8ClampedArray`](../uint8clampedarray)
-   [`Int16Array`](../int16array)
-   [`Uint16Array`](../uint16array)
-   [`Int32Array`](../int32array)
-   [`Uint32Array`](../uint32array)
-   [`Float32Array`](../float32array)
-   [`Float64Array`](../float64array)
-   [`BigInt64Array`](../bigint64array)
-   [`BigUint64Array`](../biguint64array)

### Parameters

`elementN`  
Elements of which to create the typed array.

### Return value

A new [`TypedArray`](../typedarray) instance.

## Description

Some subtle distinctions between [`Array.of()`](../array/of) and `TypedArray.of()`:

-   If the `this` value passed to `TypedArray.of()` is not a constructor, `TypedArray.of()` will throw a [`TypeError`](../typeerror), where `Array.of()` defaults to creating a new [`Array`](../array).
-   `TypedArray.of()` uses `[[Put]]` where `Array.of()` uses `[[DefineProperty]]`. Hence, when working with [`Proxy`](../proxy) objects, it calls [`handler.set`](../proxy/proxy/set) to create new elements rather than [`handler.defineProperty()`](../proxy/proxy/defineproperty).

## Examples

### Using of()

    Uint8Array.of(1);            // Uint8Array [ 1 ]
    Int8Array.of('1', '2', '3'); // Int8Array [ 1, 2, 3 ]
    Float32Array.of(1, 2, 3);    // Float32Array [ 1, 2, 3 ]
    Int16Array.of(undefined);    // Int16Array [ 0 ]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="#">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of '%TypedArray%.of' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`of`

45

14

38

No

No

9.1

No

No

38

No

9.3

No

## See also

-   [`TypedArray.from()`](from)
-   [`Array.of()`](../array/of)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/of" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/of</a>

# Operator precedence

**Operator precedence** determines how operators are parsed concerning each other. Operators with higher precedence become the operands of operators with lower precedence.

## Precedence And Associativity

Consider an expression describable by the representation below. Note that both OP<sub>1</sub> and OP<sub>2</sub> are fill-in-the-blanks for OPerators.

    a OP1 b OP2 c

If `OP1` and `OP2` have different precedence levels (see the table below), the operator with the highest precedence goes first and associativity does not matter. Observe how multiplication has higher precedence than addition and executed first, even though addition is written first in the code.

    console.log(3 + 10 * 2);   // logs 23
    console.log(3 + (10 * 2)); // logs 23 because parentheses here are superfluous
    console.log((3 + 10) * 2); // logs 26 because the parentheses change the order

Left-associativity (left-to-right) means that it is processed as `(a OP1 b) OP2 c`, while right-associativity (right-to-left) means it is interpreted as `a OP1 (b OP2 c)`. Assignment operators are right-associative, so you can write:

    a = b = 5; // same as writing a = (b = 5);

with the expected result that `a` and `b` get the value 5. This is because the assignment operator returns the value that is assigned. First, `b` is set to 5. Then the `a` is also set to 5, the return value of `b = 5`, aka right operand of the assignment.

As another example, the unique exponentiation operator has right-associativity, whereas other arithmetic operators have left-associativity. It is interesting to note that, the order of evaluation is always left-to-right irregardless of associativity and precedence.

<table><colgroup><col style="width: 50%" /><col style="width: 50%" /></colgroup><tbody><tr class="odd"><td>Code</td><td>Output</td></tr><tr class="even"><td><pre data-language="js"><code>function echo(name, num) {
    console.log(&quot;Evaluating the &quot; + name + &quot; side&quot;);
    return num;
}
// Notice the division operator (/)
console.log(echo(&quot;left&quot;, 6) / echo(&quot;right&quot;, 2));</code></pre></td><td><pre data-language="plain"><code>Evaluating the left side
Evaluating the right side
3</code></pre></td></tr><tr class="odd"><td><pre data-language="js"><code>function echo(name, num) {
    console.log(&quot;Evaluating the &quot; + name + &quot; side&quot;);
    return num;
}
// Notice the exponentiation operator (**)
console.log(echo(&quot;left&quot;, 2) ** echo(&quot;right&quot;, 3));</code></pre></td><td><pre data-language="plain"><code>Evaluating the left side
Evaluating the right side
8</code></pre></td></tr></tbody></table>

The difference in associativity comes into play when there are multiple operators of the same precedence. With only one operator or operators of different precedences, associativity doesn't affect the output, as seen in the example above. In the example below, observe how associativity affects the output when multiple of the same operator are used.

<table><colgroup><col style="width: 50%" /><col style="width: 50%" /></colgroup><tbody><tr class="odd"><td>Code</td><td>Output</td></tr><tr class="even"><td><pre data-language="js"><code>function echo(name, num) {
    console.log(&quot;Evaluating the &quot; + name + &quot; side&quot;);
    return num;
}
// Notice the division operator (/)
console.log(echo(&quot;left&quot;, 6) / echo(&quot;middle&quot;, 2) / echo(&quot;right&quot;, 3));</code></pre></td><td><pre data-language="plain"><code>Evaluating the left side
Evaluating the middle side
Evaluating the right side
1</code></pre></td></tr><tr class="odd"><td><pre data-language="js"><code>function echo(name, num) {
    console.log(&quot;Evaluating the &quot; + name + &quot; side&quot;);
    return num;
}
// Notice the exponentiation operator (**)
console.log(echo(&quot;left&quot;, 2) ** echo(&quot;middle&quot;, 3) ** echo(&quot;right&quot;, 2));</code></pre></td><td><pre data-language="plain"><code>Evaluating the left side
Evaluating the middle side
Evaluating the right side
512</code></pre></td></tr><tr class="even"><td><pre data-language="js"><code>function echo(name, num) {
    console.log(&quot;Evaluating the &quot; + name + &quot; side&quot;);
    return num;
}
// Notice the parentheses around the left and middle exponentiation
console.log((echo(&quot;left&quot;, 2) ** echo(&quot;middle&quot;, 3)) ** echo(&quot;right&quot;, 2));</code></pre></td><td><pre data-language="plain"><code>Evaluating the left side
Evaluating the middle side
Evaluating the right side
64</code></pre></td></tr></tbody></table>

Looking at the code snippets above, `6 / 3 / 2` is the same as `(6 / 3) / 2` because division is left-associative. Exponentiation, on the other hand, is right-associative, so `2 ** 3 ** 2` is the same as `2 ** (3 ** 2)`. Thus, doing `(2 ** 3) ** 2` changes the order and results in the 64 seen in the table above.

Remember that precedence comes before associativity. So, mixing division and exponentiation, the exponentiation comes before the division. For example, `2 ** 3 / 3 ** 2` results in 0.8888888888888888 because it is the same as `(2 ** 3) / (3 ** 2)`.

### Note on grouping and short-circuiting

In the table below, **Grouping** is listed as having the highest precedence. However, that does not always mean the expression within the grouping symbols `( … )` is evaluated first, especially when it comes to short-circuiting.

Short-circuiting is jargon for conditional evaluation. For example, in the expression `a && (b + c)`, if `a` is [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), then the sub-expression `(b + c)` will not even get evaluated, even if it is in parentheses. We could say that the logical disjunction operator ("OR") is "short-circuited". Along with logical disjunction, other short-circuited operators include logical conjunction ("AND"), nullish-coalescing, optional chaining, and the conditional operator. Some more examples follow.

    a || (b * c);  // evaluate `a` first, then produce `a` if `a` is "truthy"
    a && (b < c);  // evaluate `a` first, then produce `a` if `a` is "falsy"
    a ?? (b || c); // evaluate `a` first, then produce `a` if `a` is not `null` and not `undefined`
    a?.b.c;        // evaluate `a` first, then produce `undefined` if `a` is `null` or `undefined`

## Examples

    3 > 2 && 2 > 1
    // returns true

    3 > 2 > 1
    // Returns false because 3 > 2 is true, then true is converted to 1
    // in inequality operators, therefore true > 1 becomes 1 > 1, which
    //  is false. Adding parentheses makes things clear: (3 > 2) > 1.

## Table

The following table lists operators in order from highest precedence (21) to lowest precedence (1).

Note that [spread syntax](spread_syntax) is intentionally not included in the table — because, to quote an [an answer at Stack Overflow](https://stackoverflow.com/a/48656377), "[Spread syntax is not an operator](https://stackoverflow.com/q/44934828/1048572) and therefore does not have a precedence. It is part of the array literal and function call (and object literal) syntax.”

Precedence

Operator type

Associativity

Individual operators

21

[Grouping](grouping)

n/a

`( … )`

20

[Member Access](property_accessors#dot_notation)

left-to-right

`… . …`

[Computed Member Access](property_accessors#bracket_notation)

left-to-right

`… [ … ]`

[`new`](new) (with argument list)

n/a

`new … ( … )`

[Function Call](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)

left-to-right

`… ( … )`

[Optional chaining](optional_chaining)

left-to-right

`?.`

19

[`new`](new) (without argument list)

right-to-left

`new …`

18

[Postfix Increment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#increment)

n/a

`… ++`

[Postfix Decrement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#decrement)

`… --`

17

[Logical NOT (!)](logical_not)

right-to-left

`! …`

[Bitwise NOT (~)](bitwise_not)

`~ …`

[Unary plus (+)](unary_plus)

`+ …`

[Unary negation (-)](unary_negation)

`- …`

[Prefix Increment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#increment)

`++ …`

[Prefix Decrement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#decrement)

`-- …`

[`typeof`](typeof)

`typeof …`

[`void`](void)

`void …`

[`delete`](delete)

`delete …`

[`await`](await)

`await …`

16

[Exponentiation (\*\*)](exponentiation)

right-to-left

`… ** …`

15

[Multiplication (\*)](multiplication)

left-to-right

`… * …`

[Division (/)](division)

`… / …`

[Remainder (%)](remainder)

`… % …`

14

[Addition (+)](addition)

left-to-right

`… + …`

[Subtraction (-)](subtraction)

`… - …`

13

[Bitwise Left Shift (&lt;&lt;)](left_shift)

left-to-right

`… << …`

[Bitwise Right Shift (&gt;&gt;)](right_shift)

`… >> …`

[Bitwise Unsigned Right Shift (&gt;&gt;&gt;)](unsigned_right_shift)

`… >>> …`

12

[Less Than (&lt;)](less_than)

left-to-right

`… < …`

[Less Than Or Equal (&lt;=)](less_than_or_equal)

`… <= …`

[Greater Than (&gt;)](greater_than)

`… > …`

[Greater Than Or Equal (&gt;=)](greater_than_or_equal)

`… >= …`

[`in`](in)

`… in …`

[`instanceof`](instanceof)

`… instanceof …`

11

[Equality (==)](equality)

left-to-right

`… == …`

[Inequality (!=)](inequality)

`… != …`

[Strict Equality (===)](strict_equality)

`… === …`

[Strict Inequality (!==)](strict_inequality)

`… !== …`

10

[Bitwise AND (&)](bitwise_and)

left-to-right

`… & …`

9

[Bitwise XOR (^)](bitwise_xor)

left-to-right

`… ^ …`

8

[Bitwise OR (|)](bitwise_or)

left-to-right

`… | …`

7

[Logical AND (&&)](logical_and)

left-to-right

`… && …`

6

[Logical OR (||)](logical_or)

left-to-right

`… || …`

5

[Nullish coalescing operator (??)](nullish_coalescing_operator)

left-to-right

`… ?? …`

4

[Conditional (ternary) operator](conditional_operator)

right-to-left

`… ? … : …`

3

[Assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#assignment_operators)

right-to-left

`… = …`

`… += …`

`… -= …`

`… **= …`

`… *= …`

`… /= …`

`… %= …`

`… <<= …`

`… >>= …`

`… >>>= …`

`… &= …`

`… ^= …`

`… |= …`

`… &&= …`

`… ||= …`

`… ??= …`

2

[`yield`](yield)

right-to-left

`yield …`

[`yield*`](yield*)

`yield* …`

1

[Comma / Sequence](comma_operator)

left-to-right

`… , …`

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence</a>

# Optional chaining (?.)

The **optional chaining** operator (`?.`) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

The `?.` operator is like the `.` chaining operator, except that instead of causing an error if a reference is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) ([`null`](../global_objects/null) or [`undefined`](../global_objects/undefined)), the expression short-circuits with a return value of `undefined`. When used with function calls, it returns `undefined` if the given function does not exist.

This results in shorter and simpler expressions when accessing chained properties when the possibility exists that a reference may be missing. It can also be helpful while exploring the content of an object when there's no known guarantee as to which properties are required.

Optional chaining cannot be used on a non-declared root object, but can be used with an undefined root object.

## Syntax

    obj.val?.prop
    obj.val?.[expr]
    obj.arr?.[index]
    obj.func?.(args)

## Description

The optional chaining operator provides a way to simplify accessing values through connected objects when it's possible that a reference or function may be `undefined` or `null`.

For example, consider an object `obj` which has a nested structure. Without optional chaining, looking up a deeply-nested subproperty requires validating the references in between, such as:

    let nestedProp = obj.first && obj.first.second;

The value of `obj.first` is confirmed to be non-`null` (and non-`undefined`) before then accessing the value of `obj.first.second`. This prevents the error that would occur if you accessed `obj.first.second` directly without testing `obj.first`.

With the optional chaining operator (`?.`), however, you don't have to explicitly test and short-circuit based on the state of `obj.first` before trying to access `obj.first.second`:

    let nestedProp = obj.first?.second;

By using the `?.` operator instead of just `.`, JavaScript knows to implicitly check to be sure `obj.first` is not `null` or `undefined` before attempting to access `obj.first.second`. If `obj.first` is `null` or `undefined`, the expression automatically short-circuits, returning `undefined`.

This is equivalent to the following, except that the temporary variable is in fact not created:

    let temp = obj.first;
    let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

### Optional chaining with function calls

You can use optional chaining when attempting to call a method which may not exist. This can be helpful, for example, when using an API in which a method might be unavailable, either due to the age of the implementation or because of a feature which isn't available on the user's device.

Using optional chaining with function calls causes the expression to automatically return `undefined` instead of throwing an exception if the method isn't found:

    let result = someInterface.customMethod?.();

**Note:** If there is a property with such a name and which is not a function, using `?.` will still raise a [`TypeError`](../global_objects/typeerror) exception (`someInterface.customMethod is not a function`).

**Note:** If `someInterface` itself is `null` or `undefined`, a [`TypeError`](../global_objects/typeerror) exception will still be raised (`someInterface is null`). If you expect that `someInterface` itself may be `null` or `undefined`, you have to use `?.` at this position as well: `someInterface?.customMethod?.()`

#### Dealing with optional callbacks or event handlers

If you use callbacks or fetch methods from an object with [a destructuring assignment](destructuring_assignment#object_destructuring), you may have non-existent values that you cannot call as functions unless you have tested their existence. Using `?.`, you can avoid this extra test:

    // Written as of ES2019
    function doSomething(onContent, onError) {
      try {
        // ... do something with the data
      }
      catch (err) {
        if (onError) { // Testing if onError really exists
          onError(err.message);
        }
      }
    }

    // Using optional chaining with function calls
    function doSomething(onContent, onError) {
      try {
       // ... do something with the data
      }
      catch (err) {
        onError?.(err.message); // no exception if onError is undefined
      }
    }

### Optional chaining with expressions

You can also use the optional chaining operator when accessing properties with an expression using [the bracket notation of the property accessor](property_accessors#bracket_notation):

    let nestedProp = obj?.['prop' + 'Name'];

### Optional chaining not valid on the left-hand side of an assignment

    let object = {};
    object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

### Array item access with optional chaining

    let arrayItem = arr?.[42];

## Examples

### Basic example

This example looks for the value of the `name` property for the member `bar` in a map when there is no such member. The result is therefore `undefined`.

    let myMap = new Map();
    myMap.set("foo", {name: "baz", desc: "inga"});

    let nameBar = myMap.get("bar")?.name;

### Short-circuiting evaluation

When using optional chaining with expressions, if the left operand is `null` or `undefined`, the expression will not be evaluated. For instance:

    let potentiallyNullObj = null;
    let x = 0;
    let prop = potentiallyNullObj?.[x++];

    console.log(x); // 0 as x was not incremented

### Stacking the optional chaining operator

With nested structures, it is possible to use optional chaining multiple times:

    let customer = {
      name: "Carl",
      details: {
        age: 82,
        location: "Paradise Falls" // detailed address is unknown
      }
    };
    let customerCity = customer.details?.address?.city;

    // … this also works with optional chaining function call
    let customerName = customer.name?.getName?.(); // method does not exist, customerName is undefined

### Combining with the nullish coalescing operator

The [nullish coalescing operator](nullish_coalescing_operator) may be used after optional chaining in order to build a default value when none was found:

    let customer = {
      name: "Carl",
      details: { age: 82 }
    };
    const customerCity = customer?.city ?? "Unknown city";
    console.log(customerCity); // Unknown city

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#prod-OptionalExpression">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#prod-OptionalExpression</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Optional_chaining`

80

79

80

79

74

No

67

66

13.1

80

80

79

79

57

13.4

13.0

## See also

-   The [Nullish Coalescing Operator](nullish_coalescing_operator)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining</a>

# Atomics.or()

The static ` Atomics``.or() ` method computes a bitwise OR with a given value at a given position in the array, and returns the old value at that position. This atomic operation guarantees that no other write happens until the modified value is written back.

## Syntax

    Atomics.or(typedArray, index, value)

### Parameters

`typedArray`  
An integer typed array. One of [`Int8Array`](../int8array), [`Uint8Array`](../uint8array), [`Int16Array`](../int16array), [`Uint16Array`](../uint16array), [`Int32Array`](../int32array), [`Uint32Array`](../uint32array), [`BigInt64Array`](../bigint64array), or [`BigUint64Array`](../biguint64array).

`index`  
The position in the `typedArray` to compute the bitwise OR.

`value`  
The number to compute the bitwise OR with.

### Return value

The old value at the given position (`typedArray[index]`).

### Exceptions

-   Throws a [`TypeError`](../typeerror), if `typedArray` is not one of the allowed integer types.
-   Throws a [`RangeError`](../rangeerror), if `index` is out of bounds in the `typedArray`.

## Description

The bitwise OR operation yields 1, if either `a` or `b` are 1. The truth table for the OR operation is:

<table><thead><tr class="header"><th><code>a</code></th><th><code>b</code></th><th><code>a | b</code></th></tr></thead><tbody><tr class="odd"><td>0</td><td>0</td><td>0</td></tr><tr class="even"><td>0</td><td>1</td><td>1</td></tr><tr class="odd"><td>1</td><td>0</td><td>1</td></tr><tr class="even"><td>1</td><td>1</td><td>1</td></tr></tbody></table>

For example, a bitwise OR of `5 | 1` results in `0101` which is 5 in decimal.

    5  0101
    1  0001
       ----
    5  0101

## Examples

### Using or

    const sab = new SharedArrayBuffer(1024);
    const ta = new Uint8Array(sab);
    ta[0] = 2;

    Atomics.or(ta, 0, 1); // returns 2, the old value
    Atomics.load(ta, 0);  // 3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-atomics.or">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-atomics.or</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`or`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

## See also

-   [`Atomics`](../atomics)
-   [`Atomics.and()`](and)
-   [`Atomics.xor()`](xor)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/or" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/or</a>

# handler.ownKeys()

The `handler.ownKeys()` method is a trap for [`Reflect.ownKeys()`](../../reflect/ownkeys).

## Syntax

    const p = new Proxy(target, {
      ownKeys: function(target) {
      }
    });

### Parameters

The following parameter is passed to the `ownKeys()` method. `this` is bound to the handler.

`target`  
The target object.

### Return value

The `ownKeys()` method must return an enumerable object.

## Description

The `handler.ownKeys()` method is a trap for [`Reflect.ownKeys()`](../../reflect/ownkeys).

### Interceptions

This trap can intercept these operations:

-   [`Object.getOwnPropertyNames()`](../../object/getownpropertynames)
-   [`Object.getOwnPropertySymbols()`](../../object/getownpropertysymbols)
-   [`Object.keys()`](../../object/keys)
-   [`Reflect.ownKeys()`](../../reflect/ownkeys)

### Invariants

If the following invariants are violated, the proxy will throw a [`TypeError`](../../typeerror):

-   The result of `ownKeys()` must be an array.
-   The type of each array element is either a [`String`](../../string) or a [`Symbol`](../../symbol).
-   The result List must contain the keys of all non-configurable own properties of the target object.
-   If the target object is not extensible, then the result List must contain all the keys of the own properties of the target object and no other values.

## Examples

### Trapping of getOwnPropertyNames

The following code traps [`Object.getOwnPropertyNames()`](../../object/getownpropertynames).

    const p = new Proxy({}, {
      ownKeys: function(target) {
        console.log('called');
        return ['a', 'b', 'c'];
      }
    });

    console.log(Object.getOwnPropertyNames(p)); // "called"
                                                // [ 'a', 'b', 'c' ]

The following code violates an invariant.

    const obj = {};
    Object.defineProperty(obj, 'a', {
      configurable: false,
      enumerable: true,
      value: 10 }
    );

    const p = new Proxy(obj, {
      ownKeys: function(target) {
        return [123, 12.5, true, false, undefined, null, {}, []];
      }
    });

    console.log(Object.getOwnPropertyNames(p));

    // TypeError: proxy [[OwnPropertyKeys]] must return an array
    // with only string and symbol elements

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`ownKeys`

49

12

18

In Firefox 42, the implementation got updated to reflect the final ES2015 specification: The result is now checked if it is an array and if the array elements are either of type string or of type symbol. Enumerating duplicate own property names is not a failure anymore.

No

36

10

49

49

18

In Firefox 42, the implementation got updated to reflect the final ES2015 specification: The result is now checked if it is an array and if the array elements are either of type string or of type symbol. Enumerating duplicate own property names is not a failure anymore.

36

10

5.0

## See also

-   [`Proxy`](../../proxy)
-   [`handler`](../proxy)
-   [`Object.getOwnPropertyNames()`](../../object/getownpropertynames)
-   [`Reflect.ownKeys()`](../../reflect/ownkeys)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys</a>

# String.prototype.padEnd()

The `padEnd()` method pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given length. The padding is applied from the end of the current string.

## Syntax

    padEnd(targetLength)
    padEnd(targetLength, padString)

### Parameters

`targetLength`  
The length of the resulting string once the current `str` has been padded. If the value is lower than `str.length`, the current string will be returned as-is.

`padString` <span class="badge inline optional">Optional</span>  
The string to pad the current `str` with. If `padString` is too long to stay within `targetLength`, it will be truncated: for left-to-right languages the left-most part and for right-to-left languages the right-most will be applied. The default value for this parameter is "" (`U+0020`).

### Return value

A [`String`](../string) of the specified `targetLength` with the `padString` applied at the end of the current `str`.

## Examples

### Using padEnd

    'abc'.padEnd(10);          // "abc       "
    'abc'.padEnd(10, "foo");   // "abcfoofoof"
    'abc'.padEnd(6, "123456"); // "abc123"
    'abc'.padEnd(1);           // "abc"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.padend">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.padend</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`padEnd`

57

15

48

No

44

10

57

57

48

43

10

7.0

## See also

-   [`String.prototype.padStart()`](padstart)
-   [A polyfill](https://github.com/behnammodi/polyfill/blob/master/string.polyfill.js)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd</a>

# String.prototype.padStart()

The `padStart()` method pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length. The padding is applied from the start of the current string.

## Syntax

    padStart(targetLength)
    padStart(targetLength, padString)

### Parameters

`targetLength`  
The length of the resulting string once the current `str` has been padded. If the value is less than `str.length`, then `str` is returned as-is.

`padString` <span class="badge inline optional">Optional</span>  
The string to pad the current `str` with. If `padString` is too long to stay within the `targetLength`, it will be truncated from the end. The default value is "" (`U+0020 'SPACE'`).

### Return value

A [`String`](../string) of the specified `targetLength` with `padString` applied from the start.

## Examples

### Basic examples

    'abc'.padStart(10);         // "       abc"
    'abc'.padStart(10, "foo");  // "foofoofabc"
    'abc'.padStart(6,"123465"); // "123abc"
    'abc'.padStart(8, "0");     // "00000abc"
    'abc'.padStart(1);          // "abc"

### Fixed width string number conversion

    // Javascript version of: (unsigned)
    //  printf "%0*d" width num
    function leftFillNum(num, targetLength) {
        return num.toString().padStart(targetLength, 0);
    }

    const num = 123;
    console.log(leftFillNum(num, 5));
    // expected output: "00123"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.padstart">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.padstart</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`padStart`

57

15

48

No

44

10

57

57

48

43

10

7.0

## See also

-   [`String.prototype.padEnd()`](padend)
-   [A polyfill](https://github.com/behnammodi/polyfill/blob/master/string.polyfill.js)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart</a>

# Date.parse()

The `Date.parse()` method parses a string representation of a date, and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC or `NaN` if the string is unrecognized or, in some cases, contains illegal date values (e.g. 2015-02-31).

It is not recommended to use `Date.parse` as until ES5, parsing of strings was entirely implementation dependent. There are still many differences in how different hosts parse date strings, therefore date strings should be manually parsed (a library can help if many different formats are to be accommodated).

## Syntax

Direct call:

    Date.parse(dateString)

Implicit call:

    new Date(dateString)

### Parameters

`dateString`  
A string representing [a simplification of the ISO 8601 calendar date extended format](#date_time_string_format). (Other formats may be used, but results are implementation-dependent.)

### Return value

A number representing the milliseconds elapsed since January 1, 1970, 00:00:00 UTC and the date obtained by parsing the given string representation of a date. If the argument doesn't represent a valid date, [`NaN`](../nan) is returned.

## Description

The `parse()` method takes a date string (such as "`2011-10-10T14:48:00`") and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC.

This function is useful for setting date values based on string values, for example in conjunction with the [`setTime()`](settime) method and the [`Date`](../date) object.

### Date Time String Format

The standard string representation of a date time string is a simplification of the ISO 8601 calendar date extended format. (See the section [Date Time String Format](https://tc39.github.io/ecma262/#sec-date-time-string-format) in the ECMAScript specification for more details.)

For example, "`2011-10-10`" (_date-only_ form), "`2011-10-10T14:48:00`" (_date-time_ form), or "`2011-10-10T14:48:00.000+09:00`" (_date-time_ form with milliseconds and time zone) can be passed and will be parsed. When the time zone offset is absent, date-only forms are interpreted as a UTC time and date-time forms are interpreted as local time.

While time zone specifiers are used during date string parsing to interpret the argument, the value returned is always the number of milliseconds between January 1, 1970 00:00:00 UTC and the point in time represented by the argument or `NaN`.

Because `parse()` is a static method of [`Date`](../date), it is called as `Date.parse()` rather than as a method of a [`Date`](../date) instance.

### Fall-back to implementation-specific date formats

**Note:** This section contains implementation-specific behavior that can be inconsistent across implementations.

The ECMAScript specification states: If the String does not conform to the standard format the function may fall back to any implementation–specific heuristics or implementation–specific parsing algorithm. Unrecognizable strings or dates containing illegal element values in ISO formatted strings shall cause `Date.parse()` to return [`NaN`](../nan).

However, invalid values in date strings not recognized as simplified ISO format as defined by ECMA-262 may or may not result in [`NaN`](../nan), depending on the browser and values provided, e.g.:

    // Non-ISO string with invalid date values
    new Date('23/25/2014');

will be treated as a local date of 25 November, 2015 in Firefox 30 and an invalid date in Safari 7.

However, if the string is recognized as an ISO format string and it contains invalid values, it will return [`NaN`](../nan) in all browsers compliant with ES5 and later:

    // ISO string with invalid values
    new Date('2014-25-23').toISOString();
    // throws "RangeError: invalid date" in all ES5-compliant browsers

SpiderMonkey's implementation-specific heuristic can be found in [`jsdate.cpp`](https://dxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889). The string "`10 06 2014`" is an example of a non-conforming ISO format and thus falls back to a custom routine. See also this [rough outline](https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6) on how the parsing works.

    new Date('10 06 2014');

will be treated as a local date of 6 October, 2014, and not 10 June, 2014.

Other examples:

    new Date('foo-bar 2014').toString();
    // returns: "Invalid Date"

    Date.parse('foo-bar 2014');
    // returns: NaN

### Differences in assumed time zone

**Note:** This section contains implementation-specific behavior that can be inconsistent across implementations.

Given a non-standard date string of "`March 7, 2014`", `parse()` assumes a local time zone, but given a simplification of the ISO 8601 calendar date extended format such as "`2014-03-07`", it will assume a time zone of UTC (ES5 and ECMAScript 2015). Therefore [`Date`](../date) objects produced using those strings may represent different moments in time depending on the version of ECMAScript supported unless the system is set with a local time zone of UTC. This means that two date strings that appear equivalent may result in two different values depending on the format of the string that is being converted.

## Examples

### Using `Date.parse()`

The following calls all return `1546300800000`. The first according to ES5 will imply UTC time, and the others are specifying UTC timezone via the ISO date specification (`Z` and `+00:00`)

    Date.parse("2019-01-01")
    Date.parse("2019-01-01T00:00:00.000Z")
    Date.parse("2019-01-01T00:00:00.000+00:00")

The following call, which does not specify a time zone will be set to 2019-01-01 at 00:00:00 in the local timezone of the system.

    Date.parse("2019-01-01T00:00:00")

### Non-standard date strings

**Note:** This section contains implementation-specific behavior that can be inconsistent across implementations.

If `IPOdate` is an existing [`Date`](../date) object, it can be set to August 9, 1995 (local time) as follows:

    IPOdate.setTime(Date.parse('Aug 9, 1995'));

Some other examples of parsing non-standard date strings:

    Date.parse('Aug 9, 1995');

Returns `807937200000` in time zone GMT-0300, and other values in other time zones, since the string does not specify a time zone and is not ISO format, therefore the time zone defaults to local.

    Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');

Returns `807926400000` no matter the local time zone as GMT (UTC) is provided.

    Date.parse('Wed, 09 Aug 1995 00:00:00');

Returns `807937200000` in time zone GMT-0300, and other values in other time zones, since there is no time zone specifier in the argument and it is not ISO format, so is treated as local.

    Date.parse('Thu, 01 Jan 1970 00:00:00 GMT');

Returns `0` no matter the local time zone as a time zone GMT (UTC) is provided.

    Date.parse('Thu, 01 Jan 1970 00:00:00');

Returns `14400000` in time zone GMT-0400, and other values in other time zones, since no time zone is provided and the string is not in ISO format, therefore the local time zone is used.

    Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400');

Returns `14400000` no matter the local time zone as a time zone GMT (UTC) is provided.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.parse">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.parse</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`parse`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`iso_8601`

6

12

4

9

6

5.1

≤37

18

4

10.1

5.1

1.0

### Compatibility notes

-   Firefox 49 changed the parsing of 2-digit years to be aligned with the Google Chrome browser instead of Internet Explorer. Now, 2-digit years that are less than `50` are parsed as 21<sup>st</sup> century years. For example, `04/16/17`, previously parsed as April 16, 1917, will be April 16, 2017 now. To avoid any interoperability issues or ambiguous years, it is recommended to use the ISO 8601 format like "`2017-04-16`" ([bug 1265136](https://bugzilla.mozilla.org/show_bug.cgi?id=1265136)).
-   Google Chrome will accept a numerical string as a valid `dateString` parameter. This means that, for instance, while `!!Date.parse("42")` evaluates to `false` in Firefox, it evaluates to `true` in Google Chrome because "`42`" is interpreted as January 1<sup>st</sup>, 2042.

## See also

-   [`Date.UTC()`](utc)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse</a>

# parseFloat()

The `parseFloat()` function parses an argument (converting it to a string first if needed) and returns a floating point number.

## Syntax

    parseFloat(string)

### Parameters

`string`  
The value to parse. If this argument is not a string, then it is converted to one using the `ToString` abstract operation. Leading [whitespace](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace) in this argument is ignored.

### Return value

A floating point number parsed from the given `string`.

Or [`NaN`](nan) when the first non-whitespace character cannot be converted to a number.

## Description

`parseFloat` is a function property of the global object.

-   If `parseFloat` encounters a character other than a plus sign (`+`), minus sign (`-` U+002D HYPHEN-MINUS), numeral (`0`–`9`), decimal point (`.`), or exponent (`e` or `E`), it returns the value up to that character, ignoring the invalid character and characters following it.
-   A _second_ decimal point also stops parsing (characters up to that point will still be parsed).
-   Leading and trailing spaces in the argument are ignored.
-   If the argument's first character can't be converted to a number (it's not any of the above characters), `parseFloat` returns [`NaN`](nan).
-   `parseFloat` can also parse and return [`Infinity`](infinity).
-   `parseFloat` converts [`BigInt`](bigint) syntax to [`Numbers`](number), losing precision. This happens because the trailing `n` character is discarded.

Consider [`Number(value)`](number) for stricter parsing, which converts to [`NaN`](nan) for arguments with invalid characters anywhere.

`parseFloat` will parse non-string objects if they have a [`toString`](object/tostring) or [`valueOf`](object/valueof) method. The returned value is the same as if `parseFloat` had been called on the result of those methods.

## Examples

### `parseFloat` returning a number

The following examples all return `3.14`:

    parseFloat(3.14);
    parseFloat('3.14');
    parseFloat('  3.14  ');
    parseFloat('314e-2');
    parseFloat('0.0314E+2');
    parseFloat('3.14some non-digit characters');
    parseFloat({ toString: function() { return "3.14" } });

### `parseFloat` returning `NaN`

The following example returns `NaN`:

    parseFloat('FF2');

### `parseFloat` and `BigInt`

The following examples both return `900719925474099300`, losing precision as the integer is too large to be represented as a float:

    parseFloat(900719925474099267n);
    parseFloat('900719925474099267n');

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-parsefloat-string">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'parseFloat' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`parseFloat`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`parseInt()`](parseint)
-   [`Number.parseFloat()`](number/parsefloat)
-   [`Number.parseInt()`](number/parseint)
-   [`Number.toFixed()`](number/tofixed)
-   [`isNaN()`](isnan)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat</a>

# parseInt()

The `parseInt()` function parses a string argument and returns an integer of the specified [radix](https://en.wikipedia.org/wiki/Radix) (the base in mathematical numeral systems).

## Syntax

    parseInt(string)
    parseInt(string, radix)

### Parameters

`string`  
The value to parse. If this argument is not a string, then it is converted to one using the `ToString` abstract operation. Leading [whitespace](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace) in this argument is ignored.

`radix` <span class="badge inline optional">Optional</span>  
An integer between `2` and `36` that represents the _radix_ (the base in mathematical numeral systems) of the `string`. Be careful—this does **_not_** default to `10`! If the radix value is not of the `Number` type it will be coerced to a `Number`.

**Warning:** The [description below](#description) explains in more detail what happens when `radix` is not provided.

### Return value

An integer parsed from the given `string`.

Or [`NaN`](nan) when

-   the `radix` is smaller than `2` or bigger than `36`, or
-   the first non-whitespace character cannot be converted to a number.

## Description

The `parseInt` function converts its first argument to a string, parses that string, then returns an integer or `NaN`.

If not `NaN`, the return value will be the integer that is the first argument taken as a number in the specified `radix`. (For example, a `radix` of `10` converts from a decimal number, `8` converts from octal, `16` from hexadecimal, and so on.)

For radices above `10`, letters of the English alphabet indicate numerals greater than `9`. For example, for hexadecimal numbers (base `16`), `A` through `F` are used.

If `parseInt` encounters a character that is not a numeral in the specified `radix`, it ignores it and all succeeding characters and returns the integer value parsed up to that point. `parseInt` truncates numbers to integer values. Leading and trailing spaces are allowed.

Because some numbers use the `e` character in their string representation (e.g. `6.022e23` for 6.022 × 10<sup>23</sup>), using `parseInt` to truncate numbers will produce unexpected results when used on very large or very small numbers. `parseInt` should _not_ be used as a substitute for [`Math.floor()`](math/floor).

`parseInt` understands exactly two signs: `+` for positive, and `-` for negative (since ECMAScript 1). It is done as an initial step in the parsing after whitespace is removed. If no signs are found, the algorithm moves to the following step; otherwise, it removes the sign and runs the number-parsing on the rest of the string.

A value passed as the radix argument is coerced to a Number (if necessary), then if the value is 0, `NaN` or `Infinity` (undefined is coerced to `NaN`), JavaScript assumes the following:

1.  If the input `string` begins with "`0x`" or "`0X`" (a zero, followed by lowercase or uppercase X), `radix` is assumed to be `16` and the rest of the string is parsed as a hexadecimal number.
2.  If the input `string` begins with any other value, the radix is `10` (decimal).

Else if the radix value (coerced if necessary) is not in range \[2, 36\] (inclusive) `parseInt` returns `NaN`.

If the first character cannot be converted to a number with the radix in use, `parseInt` returns `NaN`.

For arithmetic purposes, the `NaN` value is not a number in any radix. You can call the [`isNaN`](isnan) function to determine if the result of `parseInt` is `NaN`. If `NaN` is passed on to arithmetic operations, the operation result will also be `NaN`.

To convert a number to its string literal in a particular radix, use `thatNumber.toString(radix)`.

**Warning:** `parseInt` converts a [`BigInt`](bigint) to a [`Number`](number) and loses precision in the process. This is because trailing non-numeric values, including "`n`", are discarded.

### Octal interpretations with no radix

Please note that following information doesn't apply to recent implementations as of 2021.

Although discouraged by ECMAScript 3, many ECMAScript 3 implementations had interpreted a numeric string beginning with a leading `0` as octal. The following might have had an octal result, or it might have had a decimal result.

    parseInt('0e0')  // 0
    parseInt('08')   // 0, because '8' is not an octal digit.

The ECMAScript 5 specification of the function `parseInt` no longer allows implementations to treat Strings beginning with a `0` character as octal values. Many implementations have adopted this behavior as of 2021.

    parseInt('0e0')  // 0
    parseInt('08')   // 8

### A stricter parse function

It is sometimes useful to have a stricter way to parse integers.

Regular expressions can help:

    function filterInt(value) {
      if (/^[-+]?(\d+|Infinity)$/.test(value)) {
        return Number(value)
      } else {
        return NaN
      }
    }

    console.log(filterInt('421'))                // 421
    console.log(filterInt('-421'))               // -421
    console.log(filterInt('+421'))               // 421
    console.log(filterInt('Infinity'))           // Infinity
    console.log(filterInt('421e+0'))             // NaN
    console.log(filterInt('421hop'))             // NaN
    console.log(filterInt('hop1.61803398875'))   // NaN
    console.log(filterInt('1.61803398875'))      // NaN

## Examples

### Using parseInt

The following examples all return `15`:

    parseInt('0xF', 16)
    parseInt('F', 16)
    parseInt('17', 8)
    parseInt(021, 8)
    parseInt('015', 10)    // but `parseInt(015, 8)` will return 13
    parseInt(15.99, 10)
    parseInt('15,123', 10)
    parseInt('FXX123', 16)
    parseInt('1111', 2)
    parseInt('15 * 3', 10)
    parseInt('15e2', 10)
    parseInt('15px', 10)
    parseInt('12', 13)

The following examples all return `NaN`:

    parseInt('Hello', 8)  // Not a number at all
    parseInt('546', 2)    // Digits other than 0 or 1 are invalid for binary radix

The following examples all return `-15`:

    parseInt('-F', 16)
    parseInt('-0F', 16)
    parseInt('-0XF', 16)
    parseInt(-15.1, 10)
    parseInt('-17', 8)
    parseInt('-15', 10)
    parseInt('-1111', 2)
    parseInt('-15e1', 10)
    parseInt('-12', 13)

The following examples all return `4`.

    parseInt(4.7, 10)
    parseInt(4.7 * 1e22, 10)        // Very large number becomes 4
    parseInt(0.00000000000434, 10)  // Very small number becomes 4

If the number is greater than 1e+21 (including) or less than 1e-7 (including), it will return `1`. (when using radix 10).

    parseInt(0.0000001,10);
    parseInt(0.000000123,10);
    parseInt(1e-7,10);
    parseInt(1000000000000000000000,10);
    parseInt(123000000000000000000000,10);
    parseInt(1e+21,10);

The following example returns `224`:

    parseInt('0e0', 16)

[`BigInt`](bigint) values lose precision:

    parseInt('900719925474099267n')
    // 900719925474099300

`parseInt` doesn't work with [numeric separators](../lexical_grammar#numeric_separators):

    parseInt('123_456')
    // 123

The radix is coerced to a `Number`:

    const obj = {
      valueOf() {return 8}
    };
    parseInt('11', obj); // 9

    obj.valueOf = function() {return 1};
    parseInt('11', obj); // NaN

    obj.valueOf = function() {return Infinity};
    parseInt('11', obj); // 11

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-parseint-string-radix">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-parseint-string-radix</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`parseInt`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

`leading_zero_strings_as_decimal`

23

12

21

9

15

6

4.4

25

21

14

6

1.5

## See also

-   [`parseFloat()`](parsefloat)
-   [`Number.parseFloat()`](number/parsefloat)
-   [`Number.parseInt()`](number/parseint)
-   [`isNaN()`](isnan)
-   [`Number.toString()`](number/tostring)
-   [`Object.valueOf`](object/valueof)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt</a>

# Math.PI

The `Math.PI` property represents the ratio of the circumference of a circle to its diameter, approximately 3.14159:

` M``a``t``h``.``P``I ` = *π* ≈ 3.14159

Property attributes of `Math.PI`

Writable

no

Enumerable

no

Configurable

no

## Description

Because `PI` is a static property of `Math`, you always use it as `Math.PI`, rather than as a property of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.PI

The following function uses `Math.PI` to calculate the circumference of a circle with a passed radius.

    function calculateCircumference(radius) {
      return Math.PI * (radius + radius);
    }

    calculateCircumference(1);  // 6.283185307179586

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.pi">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.pi</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`PI`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math`](../math)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI</a>

# Planned changes to shared memory

There is standardization work ongoing that enables developers to create [`SharedArrayBuffer`](../sharedarraybuffer) objects again, but changes are needed in order to be use these across threads (i.e., `postMessage()` for `SharedArrayBuffer` objects throws by default). These changes provide further isolation between sites and help reduce the impact of attacks with high-resolution timers, which can be created with shared memory.

**Note:** Starting with Firefox 79, the features described in this document are enabled by default.

Chrome intends to implement similar restrictions.

## New HTTP header bonanza

As a baseline requirement, documents will need to be in a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).

For top-level documents, two headers will need to be set:

-   [`Cross-Origin-Opener-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) with `same-origin` as value (protects your origin from attackers)
-   [`Cross-Origin-Embedder-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) with `require-corp` as value (protects victims from your origin)

With these two headers set, `postMessage()` will no longer throw for `SharedArrayBuffer` objects and shared memory across threads is therefore available.

Nested documents and dedicated workers will need to set the [`Cross-Origin-Embedder-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) header as well with the same value. No further changes are needed for same-origin nested documents and subresources. Same-site (but cross-origin) nested documents and subresources will need to set the [`Cross-Origin-Resource-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Resource-Policy) header with `same-site` as value. And their cross-origin (and cross-site) counterparts need to set the same header with `cross-origin` as value. Note that setting the [`Cross-Origin-Resource-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Resource-Policy) header to any other value than `same-origin` opens up the resource to potential attacks, such as [Spectre](<https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)>).

Note that the [`Cross-Origin-Opener-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) header limits your ability to retain a reference to popups. Direct access between two top-level window contexts will essentially only work if they are same-origin and carry the same two headers with the same two values.

## API changes

As a result of this newly required environment, there are a couple API implications:

-   The `Atomics` object is always available.
-   `SharedArrayBuffer` objects are in principle always available, but unfortunately the constructor on the global object is hidden, unless the two headers mentioned above are set, for compatibility with web content. There is hope that this restriction can be removed in the future. `WebAssembly.Memory` can still be used to get an instance.
-   Unless the two headers mentioned above are set, the various `postMessage()` APIs will throw for `SharedArrayBuffer` objects. If they are set, `postMessage()` on `Window` objects and dedicated workers will function and allow for memory sharing.
-   To avoid having to check whether `postMessage()` throws, [`self.crossOriginIsolated`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated) is being standardized (a getter that returns a boolean; `true` if the headers are set), available in window and worker contexts.

## WebAssembly Shared Memory

The WebAssembly [Threads](https://github.com/WebAssembly/threads/blob/master/proposals/threads/Overview.md) proposal allows `WebAssembly.Memory` objects to be created with a new `shared` constructor flag. When this flag is set to `true`, the constructed `Memory` object can be shared between workers via `postMessage()`, just like `SharedArrayBuffer`, and the backing `buffer` of the `Memory` object is a `SharedArrayBuffer`. Therefore, the requirements listed above for sharing a `SharedArrayBuffer` between workers also apply to sharing a `WebAssembly.Memory`.

The WebAssembly Threads proposal also defines a new set of [atomic](https://github.com/WebAssembly/threads/blob/master/proposals/threads/Overview.md#atomic-memory-accesses) instructions. Just as `SharedArrayBuffer` and its methods are unconditionally enabled (and only sharing between threads is gated on the new headers), the WebAssembly atomic instructions are also unconditionally allowed.

## Further reading

-   [COOP and COEP explained](https://docs.google.com/document/d/1zDlfvfTJ_9e8Jdc8ehuV4zMEu9ySMCiTGMS9y0GU92k/edit).
-   `Cross-Origin-Opener-Policy`: [whatwg/html issue \#3740](https://github.com/whatwg/html/issues/3740), [draft specification](https://gist.github.com/annevk/6f2dd8c79c77123f39797f6bdac43f3e).
-   `Cross-Origin-Embedder-Policy`: [whatwg/html issue \#4175](https://github.com/whatwg/html/issues/4175), [draft specification](https://mikewest.github.io/corpp/).
-   `Cross-Origin-Resource-Policy`: [standardized in Fetch](https://fetch.spec.whatwg.org/#cross-origin-resource-policy-header), new `cross-origin` value is part of the `Cross-Origin-Embedder-Policy` effort.
-   `postMessage()` changes and [`self.crossOriginIsolated`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated): [whatwg/html issue \#4732](https://github.com/whatwg/html/issues/4732), [whatwg/html issue \#4872](https://github.com/whatwg/html/issues/4872), [draft specification](https://github.com/whatwg/html/pull/4734).

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Planned_changes" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Planned_changes</a>

# Intl.PluralRules() constructor

The `Intl.PluralRules()` constructor creates [`Intl.PluralRules`](../pluralrules) objects.

## Syntax

    new Intl.PluralRules()
    new Intl.PluralRules(locales)
    new Intl.PluralRules(locales, options)

### Parameters

`locales` <span class="badge inline optional">Optional</span>  
A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the `locales` argument, see the [Intl](../../intl#locale_identification_and_negotiation) page.

`options` <span class="badge inline optional">Optional</span>  
An object with some or all of the following properties:

`localeMatcher`  
The locale matching algorithm to use. Possible values are "`lookup`" and "`best fit`"; the default is "`best fit`". For information about this option, see the [Intl](../../intl#locale_negotiation) page.

`type`  
The type to use. Possible values are:

-   "`cardinal`" for cardinal numbers (refering to the quantity of things). This is the default value.
-   "`ordinal`" for ordinal number (refering to the ordering or ranking of things, e.g. "1st", "2nd", "3rd" in English).

The following properties fall into two groups: `minimumIntegerDigits`, `minimumFractionDigits`, and `maximumFractionDigits` in one group, `minimumSignificantDigits` and `maximumSignificantDigits` in the other. If at least one property from the second group is defined, then the first group is ignored.

`minimumIntegerDigits`  
The minimum number of integer digits to use. Possible values are from 1 to 21; the default is 1.

`minimumFractionDigits`  
The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.currency-iso.org/en/home/tables/table-a1.html) (2 if the list doesn't provide that information).

`maximumFractionDigits`  
The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of `minimumFractionDigits` and 3; the default for currency formatting is the larger of `minimumFractionDigits` and the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.currency-iso.org/en/home/tables/table-a1.html) (2 if the list doesn't provide that information); the default for percent formatting is the larger of `minimumFractionDigits` and 0.

`minimumSignificantDigits`  
The minimum number of significant digits to use. Possible values are from 1 to 21; the default is 1.

`maximumSignificantDigits`  
The maximum number of significant digits to use. Possible values are from 1 to 21; the default is 21.

## Examples

### Basic usage

In basic use without specifying a locale, a formatted string in the default locale and with default options is returned. This is useful to distinguish between singular and plural forms, e.g. "dog" and "dogs".

    var pr = new Intl.PluralRules();

    pr.select(0);
    // → 'other' if in US English locale

    pr.select(1);
    // → 'one' if in US English locale

    pr.select(2);
    // → 'other' if in US English locale

### Using options

The results can be customized using the `options` argument, which has one property called `type` which you can set to `ordinal`. This is useful to figure out the ordinal indicator, e.g. "1st", "2nd", "3rd", "4th", "42nd" and so forth.

    var pr = new Intl.PluralRules('en-US', { type: 'ordinal' });

    pr.select(0);
    // → 'other'
    pr.select(1);
    // → 'one'
    pr.select(2);
    // → 'two'
    pr.select(3);
    // → 'few'
    pr.select(4);
    // → 'other'
    pr.select(42);
    // → 'two'

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-intl-pluralrules-constructor">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-intl-pluralrules-constructor</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`PluralRules`

63

18

58

No

50

13

63

63

58

46

13

8.0

## See also

-   [`Intl.PluralRules`](../pluralrules)
-   [`Intl`](../../intl)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/PluralRules" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/PluralRules</a>

# Array.prototype.pop()

The `pop()` method removes the **last** element from an array and returns that element. This method changes the length of the array.

## Syntax

    pop()

### Return value

The removed element from the array; [`undefined`](../undefined) if the array is empty.

## Description

The `pop` method removes the last element from an array and returns that value to the caller.

`pop` is intentionally generic; this method can be [called](../function/call) or [applied](../function/apply) to objects resembling arrays. Objects which do not contain a `length` property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.

If you call `pop()` on an empty array, it returns [`undefined`](../undefined).

[`Array.prototype.shift()`](shift) has similar behavior to `pop`, but applied to the first element in an array.

## Examples

### Removing the last element of an array

The following code creates the `myFish` array containing four elements, then removes its last element.

    var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

    var popped = myFish.pop();

    console.log(myFish); // ['angel', 'clown', 'mandarin' ]

    console.log(popped); // 'sturgeon'

### Using apply( ) or call ( ) on array-like objects

The following code creates the `myFish` array-like object containing four elements and a length parameter, then removes its last element and decrements the length parameter.

    var myFish = {0:'angel', 1:'clown', 2:'mandarin', 3:'sturgeon', length: 4};

    var popped = Array.prototype.pop.call(myFish); //same syntax for using apply( )

    console.log(myFish); // {0:'angel', 1:'clown', 2:'mandarin', length: 3}

    console.log(popped); // 'sturgeon'

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.pop">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Array.prototype.pop' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`pop`

1

12

1

5.5

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Array.prototype.push()`](push)
-   [`Array.prototype.shift()`](shift)
-   [`Array.prototype.unshift()`](unshift)
-   [`Array.prototype.concat()`](concat)
-   [`Array.prototype.splice()`](splice)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop</a>

# Number.POSITIVE_INFINITY

The `Number.POSITIVE_INFINITY` property represents the positive Infinity value.

Property attributes of `Number.POSITIVE_INFINITY`

Writable

no

Enumerable

no

Configurable

no

## Description

The value of `Number.POSITIVE_INFINITY` is the same as the value of the global object's [`Infinity`](../infinity) property.

This value behaves slightly differently than mathematical infinity:

-   Any positive value, including `POSITIVE_INFINITY`, multiplied by `POSITIVE_INFINITY` is `POSITIVE_INFINITY`.
-   Any negative value, including [`NEGATIVE_INFINITY`](negative_infinity), multiplied by `POSITIVE_INFINITY` is [`NEGATIVE_INFINITY`](negative_infinity).
-   Any positive number divided by `POSITIVE_INFINITY` is positive Zero.
-   Any negative number divided by `POSITIVE_INFINITY` is negative Zero.
-   Zero multiplied by `POSITIVE_INFINITY` is [`NaN`](../nan).
-   [`NaN`](../nan) multiplied by `POSITIVE_INFINITY` is [`NaN`](../nan).
-   `POSITIVE_INFINITY`, divided by any negative value except [`NEGATIVE_INFINITY`](negative_infinity), is [`NEGATIVE_INFINITY`](negative_infinity).
-   `POSITIVE_INFINITY`, divided by any positive value except `POSITIVE_INFINITY`, is `POSITIVE_INFINITY`.
-   `POSITIVE_INFINITY`, divided by either [`NEGATIVE_INFINITY`](negative_infinity) or `POSITIVE_INFINITY`, is [`NaN`](../nan).

You might use the `Number.POSITIVE_INFINITY` property to indicate an error condition that returns a finite number in case of success. Note, however, that [`isFinite`](../isfinite) would be more appropriate in such a case.

Because `POSITIVE_INFINITY` is a static property of [`Number`](../number), you always use it as `Number.POSITIVE_INFINITY`, rather than as a property of a [`Number`](../number) object you created.

## Examples

### Using POSITIVE_INFINITY

In the following example, the variable `bigNumber` is assigned a value that is larger than the maximum value. When the [`if`](../../statements/if...else) statement executes, `bigNumber` has the value `Infinity`, so `bigNumber` is set to a more manageable value before continuing.

    var bigNumber = Number.MAX_VALUE * 2;

    if (bigNumber == Number.POSITIVE_INFINITY) {
      bigNumber = returnFinite();
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-number.positive_infinity">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-number.positive_infinity</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`POSITIVE_INFINITY`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Number.NEGATIVE_INFINITY`](negative_infinity)
-   [`Number.isFinite()`](isfinite)
-   [`Infinity`](../infinity)
-   [`isFinite()`](../isfinite)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY</a>

# Math.pow()

The `Math.pow()` function returns the `base` to the `exponent` power, as in `baseexponent`.

## Syntax

    Math.pow(base, exponent)

### Parameters

`base`  
The base number.

`exponent`  
The exponent used to raise the `base`.

### Return value

A number representing the given base taken to the power of the given exponent.

## Description

The `Math.pow()` function returns the `base` to the `exponent` power, as in `baseexponent`, the `base` and the `exponent` are in decimal numeral system.

Because `pow()` is a static method of `Math`, use it as `Math.pow()`, rather than as a method of a `Math` object you created. (`Math` has no constructor.) If the base is negative and the exponent is not an integer, the result is NaN.

## Examples

### Using Math.pow()

    // simple
    Math.pow(7, 2);    // 49
    Math.pow(7, 3);    // 343
    Math.pow(2, 10);   // 1024
    // fractional exponents
    Math.pow(4, 0.5);  // 2 (square root of 4)
    Math.pow(8, 1/3);  // 2 (cube root of 8)
    Math.pow(2, 0.5);  // 1.4142135623730951 (square root of 2)
    Math.pow(2, 1/3);  // 1.2599210498948732 (cube root of 2)
    // signed exponents
    Math.pow(7, -2);   // 0.02040816326530612 (1/49)
    Math.pow(8, -1/3); // 0.5
    // signed bases
    Math.pow(-7, 2);   // 49 (squares are positive)
    Math.pow(-7, 3);   // -343 (cubes can be negative)
    Math.pow(-7, 0.5); // NaN (negative numbers don't have a real square root)
    // due to "even" and "odd" roots laying close to each other,
    // and limits in the floating number precision,
    // negative bases with fractional exponents always return NaN
    Math.pow(-7, 1/3); // NaN

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.pow">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.pow</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`pow`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.cbrt()`](cbrt)
-   [`Math.exp()`](exp)
-   [`Math.log()`](log)
-   [`Math.sqrt()`](sqrt)
-   [Exponentiation operator](../../operators/exponentiation)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow</a>

# RangeError: precision is out of range

The JavaScript exception "precision is out of range" occurs when a number that's outside of the range of 0 and 20 (or 21) was passed into `toFixed` or `toPrecision`.

## Message

    RangeError: The number of fractional digits is out of range (Edge)
    RangeError: The precision is out of range (Edge)
    RangeError: precision {0} out of range (Firefox)
    RangeError: toExponential() argument must be between 0 and 20 (Chrome)
    RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
    RangeError: toPrecision() argument must be between 1 and 21 (Chrome)

## Error type

[`RangeError`](../global_objects/rangeerror)

## What went wrong?

There was an out of range precision argument in one of these methods:

-   [`Number.prototype.toExponential()`](../global_objects/number/toexponential)
-   [`Number.prototype.toFixed()`](../global_objects/number/tofixed)
-   [`Number.prototype.toPrecision()`](../global_objects/number/toprecision)

The allowed range for these methods is usually between 0 and 20 (or 21). However, the ECMAScript specification allows to extend this range.

<table><thead><tr class="header"><th>Method</th><th>Firefox (SpiderMonkey)</th><th>Chrome, Opera (V8)</th></tr></thead><tbody><tr class="odd"><td><a href="../global_objects/number/toexponential"><code>Number.prototype.toExponential()</code></a></td><td>0 to 100</td><td>0 to 20</td></tr><tr class="even"><td><a href="../global_objects/number/tofixed"><code>Number.prototype.toFixed()</code></a></td><td>-20 to 100</td><td>0 to 20</td></tr><tr class="odd"><td><a href="../global_objects/number/toprecision"><code>Number.prototype.toPrecision()</code></a></td><td>1 to 100</td><td>1 to 21</td></tr></tbody></table>

## Examples

### Invalid cases

    77.1234.toExponential(-1);  // RangeError
    77.1234.toExponential(101); // RangeError

    2.34.toFixed(-100);         // RangeError
    2.34.toFixed(1001);         // RangeError

    1234.5.toPrecision(-1);     // RangeError
    1234.5.toPrecision(101);    // RangeError

### Valid cases

    77.1234.toExponential(4); // 7.7123e+1
    77.1234.toExponential(2); // 7.71e+1

    2.34.toFixed(1); // 2.3
    2.35.toFixed(1); // 2.4 (note that it rounds up in this case)

    5.123456.toPrecision(5); // 5.1235
    5.123456.toPrecision(2); // 5.1
    5.123456.toPrecision(1); // 5

## See also

-   [`Number.prototype.toExponential()`](../global_objects/number/toexponential)
-   [`Number.prototype.toFixed()`](../global_objects/number/tofixed)
-   [`Number.prototype.toPrecision()`](../global_objects/number/toprecision)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Precision_range" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Precision_range</a>

# Object.preventExtensions()

The `Object.preventExtensions()` method prevents new properties from ever being added to an object (i.e. prevents future extensions to the object).

## Syntax

    Object.preventExtensions(obj)

### Parameters

`obj`  
The object which should be made non-extensible.

### Return value

The object being made non-extensible.

## Description

An object is extensible if new properties can be added to it. `Object.preventExtensions()` marks an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible. Note that the properties of a non-extensible object, in general, may still be _deleted_. Attempting to add new properties to a non-extensible object will fail, either silently or by throwing a [`TypeError`](../typeerror) (most commonly, but not exclusively, when in [strict mode](../../strict_mode)).

`Object.preventExtensions()` only prevents addition of own properties. Properties can still be added to the object prototype.

This method makes the `[[prototype]]` of the target immutable; any `[[prototype]]` re-assignment will throw a `TypeError`. This behavior is specific to the internal `[[prototype]]` property, other properties of the target object will remain mutable.

There is no way to make an object extensible again once it has been made non-extensible.

## Examples

### Using Object.preventExtensions

    // Object.preventExtensions returns the object
    // being made non-extensible.
    var obj = {};
    var obj2 = Object.preventExtensions(obj);
    obj === obj2; // true

    // Objects are extensible by default.
    var empty = {};
    Object.isExtensible(empty); // === true

    // ...but that can be changed.
    Object.preventExtensions(empty);
    Object.isExtensible(empty); // === false

    // Object.defineProperty throws when adding
    // a new property to a non-extensible object.
    var nonExtensible = { removable: true };
    Object.preventExtensions(nonExtensible);
    Object.defineProperty(nonExtensible, 'new', {
      value: 8675309
    }); // throws a TypeError

    // In strict mode, attempting to add new properties
    // to a non-extensible object throws a TypeError.
    function fail() {
      'use strict';
      // throws a TypeError
      nonExtensible.newProperty = 'FAIL';
    }
    fail();

A non-extensible object's prototype is immutable:

    var fixed = Object.preventExtensions({});
    // throws a 'TypeError'.
    fixed.__proto__ = { oh: 'hai' };

### Non-object coercion

In ES5, if the argument to this method is not an object (a primitive), then it will cause a [`TypeError`](../typeerror). In ES2015, a non-object argument will be treated as if it was a non-extensible ordinary object, return it.

    Object.preventExtensions(1);
    // TypeError: 1 is not an object (ES5 code)

    Object.preventExtensions(1);
    // 1                             (ES2015 code)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.preventextensions">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.preventextensions</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`preventExtensions`

6

12

4

9

12

5.1

1

18

4

12

6

1.0

`ES2015_behavior`

44

12

35

11

31

9

44

44

35

32

9

4.0

## See also

-   [`Object.isExtensible()`](isextensible)
-   [`Object.seal()`](seal)
-   [`Object.isSealed()`](issealed)
-   [`Object.freeze()`](freeze)
-   [`Object.isFrozen()`](isfrozen)
-   [`Reflect.preventExtensions()`](../reflect/preventextensions)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions</a>

# Private class fields

Class properties are public by default and can be examined or modified outside the class. There is however [a stage 3 proposal](https://github.com/tc39/proposal-private-methods) to allow defining private class fields using a hash `#` prefix.

## Syntax

    class ClassWithPrivateField {
      #privateField
    }

    class ClassWithPrivateMethod {
      #privateMethod() {
        return 'hello world'
      }
    }

    class ClassWithPrivateStaticField {
      static #PRIVATE_STATIC_FIELD
    }

## Examples

### Private static fields

Private fields are accessible on the class constructor from inside the class declaration itself.

The limitation of static variables being called by only static methods still holds.

    class ClassWithPrivateStaticField {
      static #PRIVATE_STATIC_FIELD

      static publicStaticMethod() {
        ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
        return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
      }
    }

    console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)

Private static fields are added to the class constructor at class evaluation time.

There is a provenance restriction on private static fields. Only the class which defines the private static field can access the field.

This can lead to unexpected behavior when using `this`.

    class BaseClassWithPrivateStaticField {
      static #PRIVATE_STATIC_FIELD

      static basePublicStaticMethod() {
        this.#PRIVATE_STATIC_FIELD = 42
        return this.#PRIVATE_STATIC_FIELD
      }
    }

    class SubClass extends BaseClassWithPrivateStaticField { }

    let error = null

    try {
      SubClass.basePublicStaticMethod()
    } catch(e) { error = e}

    console.assert(error instanceof TypeError)

### Private instance fields

Private instance fields are declared with **\# names** (pronounced "_hash names_"), which are identifiers prefixed with `#`. The `#` is a part of the name itself. It is used for declaration and accessing as well.

The encapsulation is enforced by the language. It is a syntax error to refer to `#` names from out of scope.

    class ClassWithPrivateField {
      #privateField

      constructor() {
        this.#privateField = 42
        this.#randomField = 444 // Syntax error
      }
    }

    const instance = new ClassWithPrivateField()
    instance.#privateField === 42 // Syntax error

### Private methods

#### Private static methods

Like their public equivalent, private static methods are called on the class itself, not instances of the class. Like private static fields, they are only accessible from inside the class declaration.

Private static methods may be generator, async, and async generator functions.

    class ClassWithPrivateStaticMethod {
      static #privateStaticMethod() {
        return 42
      }

      static publicStaticMethod1() {
        return ClassWithPrivateStaticMethod.#privateStaticMethod();
      }

      static publicStaticMethod2() {
        return this.#privateStaticMethod();
      }
    }

    console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42);
    console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42);

This can lead to unexpected behavior when using `this`. In the following example `this` refers to the `Derived` class (not the `Base` class) when we try to call `Derived.publicStaticMethod2()`, and thus exhibits the same "provenance restriction" as mentioned above:

    class Base {
      static #privateStaticMethod() {
        return 42;
      }
      static publicStaticMethod1() {
        return Base.#privateStaticMethod();
      }
      static publicStaticMethod2() {
        return this.#privateStaticMethod();
      }
    }

    class Derived extends Base {}

    console.log(Derived.publicStaticMethod1()); // 42
    console.log(Derived.publicStaticMethod2()); // TypeError

#### Private instance methods

Private instance methods are methods available on class instances whose access is restricted in the same manner as private instance fields.

    class ClassWithPrivateMethod {
      #privateMethod() {
        return 'hello world'
      }

      getPrivateMessage() {
        return this.#privateMethod()
      }
    }

    const instance = new ClassWithPrivateMethod()
    console.log(instance.getPrivateMessage())
    // expected output: "hello world"

Private instance methods may be generator, async, or async generator functions. Private getters and setters are also possible:

    class ClassWithPrivateAccessor {
      #message

      get #decoratedMessage() {
        return `✨${this.#message}✨`
      }
      set #decoratedMessage(msg) {
        this.#message = msg
      }

      constructor() {
        this.#decoratedMessage = 'hello world'
        console.log(this.#decoratedMessage)
      }
    }

    new ClassWithPrivateAccessor();
    // expected output: "✨hello world✨"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/proposal-class-fields/#prod-PrivateIdentifier">Public and private instance fields proposal (Public and private instance fields proposal) 
<br/>

<span class="small">#prod-PrivateIdentifier</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Private_class_fields`

74

79

No

Available only in nightly builds. See [bug 1562054](https://bugzil.la/1562054).

No

62

14.1

74

74

No

Available only in nightly builds. See [bug 1562054](https://bugzil.la/1562054).

53

14.5

No

## See also

-   [Public class fields](public_class_fields)
-   [Public and private class fields](https://v8.dev/features/class-fields) article at the v8.dev site.
-   [Class field declarations for JavaScript](https://github.com/tc39/proposal-class-fields#class-field-declarations-for-javascript) explainer, by the [Public and private instance fields](https://github.com/tc39/proposal-class-fields) authors
-   [The Semantics of All JS Class Elements](https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields</a>

# Promise

The `Promise` object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

**Note:** This feature is available in [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API).

To learn about the way promises work and how you can use them, we advise you to read [Using promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) first.

## Description

A `Promise` is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a _promise_ to supply the value at some point in the future.

A `Promise` is in one of these states:

-   _pending_: initial state, neither fulfilled nor rejected.
-   _fulfilled_: meaning that the operation was completed successfully.
-   _rejected_: meaning that the operation failed.

A pending promise can either be _fulfilled_ with a value or _rejected_ with a reason (error). When either of these options happens, the associated handlers queued up by a promise's `then` method are called. If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached.

As the `Promise.prototype.then()` and `Promise.prototype.catch()` methods return promises, they can be chained.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyEAAAEpCAMAAACz/N2FAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAJkUExURf////3//u/u7v///ikmdM73/xAQEAAAAPjSewsKCv//+dP4/xkZGSAgH6ioqPbHafD+/y0sLHx8e/j4+Nj6/wYEBfLy8icmJvv7+/fPd/X//0FCQoKCgtPR0zc3OOTk5VVVVf/98rS0tLm5uazt/nZ2dhQUFPb39s3NzYiIiCIthf/wsyUoejIxMpaWltvb29bX1ygOAqSkpA9ErI2Nja+urwEDEltbW0ZGRjw8PHwxDnFxcbzy/0ESMufn58jIx0tKSqDn/WpqauCVNOvr60USPr6+vmBgX/bMcf/zwvn//5ubm97e3xdUuf/76t36/05OTuzr1sPDw/nairTw/xEvjOLg4GVlZQAAB1FRUScPO+b8/+v+/6CfodiHMKZgI//63//xu8j1//zgli6J2c51I5DZ+G3K9oO/4So7gCMDEv/2zQUNLf/41lwXHTmX4fzloCESUEYjDJGRkeunPNiiZFW58HC664DV+f7qqsF9M+reuTFioyZ40DkXCs739jEZVQQWOnGx2pE1IM2NUw4bZKV8R8dpH+azb0MdUg44kxthwb5YFz1/wYg3DYpHGwMTUubz5eysRS4iZq/h+VMaOvbqyQEHQ6Lc9idZlVWW1em+f7jY5G0jLPC3UrN2MqhBEy4NLPXfvRcwWfXarBc3aR9Bb2Oq1hAldR5syJ+/5Fg7GH6SyOzJkw4yf0YSIlkQBEao6N26obrn+05+rcbh8tn39uTl1WCIiqK4ccXq/MKYasCmqkxBh2F/bnw+WIlfOChBopB2S0SNyLC002pakM/165yjvEVmV7C0komhfJaxz2mFEBIAABnBSURBVHja7J35XxNJGocraZKQDkiQ0wjIHZBLRFEiAQEVOQS5FEEhiOAFirqiMiog4wEoILreo3jfB473zDjuzoyr81dtdXcCBBLIhBiS+H0+/JDqVHdjpx7e961CihAAAAAAAAAAAAAAAAAAAAAAAAAAAHsjszN44sDJDHHp2wEAQwCAIQDAEABgCAwBMASGABgCQwAMgSEAwBAAYAgAMAQAGAIADAEAhgDwXRkStzLSa74vDAEwxKwhF/5UwhDwvRgS9mOy7HYjaa6Vp55Rn96Szzb0ztl+IrnzgIjdfzT1sO9oF779tk828H6+L/d6+8/EXejJn7wRhgBXNKSsaltJ7RrV4INrT7UHB3uKmzWt7jvOnG2rKKbv/KDZkj/SRWgLWVbZzWMltSnV+p7CyTAEuKIhRfPydW0pysHjj1RiZcvKrLKOdPc95WSOW3tDr4q58yjf0EUttHlD3tSsUZL6qiyhp0Q4GYYAVzREd8I75HGKsuiXvU2vfHVDwzW9Snc3CXF3az/NxY/RLmqhLRhy8kg+qdM2Cj0lwskwBLigIUzOsw9kMEV56zVzS7NFlHNZ00r0hpzsVZGnT1SGLmqhPSaGaLP0huhPhiHA9Qxhc3p8b2lSNtY8e/2DZreoLHkgXW+IZE7Vtgt9NG4YugjtOG3WmDpEcEl/MgwBLphl1WlSb/99dDiv34+buNqpocFBb0jY/uTUy4rRLkK7uf/imLksoaf+ZBgCXNAQPfoAoOtqHZOBmewyetz4fQaGABc2RKDoVEe6HW8HgHMZwgw2XcmHIQCGuObtAIAhAMAQAGAIADAEhgAYAkMADIEhAIbAEABgCAAwBAAYAgAMAQCGAOBghmA/dQAAAAAAAAAAAAAAAPhuCAyS62dr5cF4GgBMZIE374g8HI8CAFOsC+EECcKDAMAE4ih5NhUkFE8CgIn4x0qXJBGZn7cPngUA4/FJ9FjO1eey6BV4GACMQ7TQM62Uf4VpLAAmEO7tbZi+wjQWcEbiVkbSr9XxitFDTIut/l57aZrnQhGeMXAxQ4iNDIlZ7pGI2hw4HYyO36ycvbq38t755j5Z01HZwPt4hdDmtjpv+mgLQ5JCpbFqPG3ghIYIm5W3PL9fUttTPBJD9G0vbo/zgWkbkpEtjxLjWQPnNITfrDwnZSM5pM0aMURoXzr9UEW89kzTEG6BMANPGjgp/GblbxoqpVJpU6PBkHZ9e2i3iJRNL8sSFggBcFJEwmblOWuUpChYORpD+LZ62jHEsEAIgJPCCpuV12uPldyo8I2jiZY2ixqib3N1SJ/1dcjoAiEAzoqwWTl7am/l3Uukuf/itf6L3FyW0Obmst51W2vImAVCAJy7Xh/zc5+x0TWxQAiAebBACIB5sEAIgHmwQAiAebBACIB5sEAIgHmwQAiAebBACMAkYIEQAPNggRAA82CBEADzYIEQOCnYVxCASQ1x4bsBAEMAgCEAwBAAYAgMATAEhgAYAkMADIEhAMAQAGAIADAEABgCAAwBAIYAAENgCIAhMATAEBgCYIij3419eR4fE4AhZtF1fUnYKlZyL8Pwt37BzBgStzLS3U1i6gf4jweMD+S94P67uWHTqdXxCl1t5/v5vvSF8R7rRtDLn7qSb6Uhh46++vrYo+lVMSFe833xiQGHMqTlt3FjMm/XAbFY7C8aMaTu340X/lROacjO3yOtNOR6xZu2K8W3NEdUVx+nvEHKBawmTGmtIc19soH35/6b3HlAxF7dW3nvPHHffoJv1ewWsfuPpm7/2XAkb9dW7gzup7kXFzo+D9FTDTHE3e2T/O7Xx6mHq40uw10+kl7JKkPCTm7Z+XtuwO3HPcV5mnvbulpJ2MsP+LDBP9ejaGh4WjFkx5mzbRXFLc/vl9T2FOtbuq6DpOzmsZLalGr9kfGG0BiS5TViyI4rFzQDl67ebDS+DL088fpPtVWGNGu25v1VzVz4+kTV0h1Jv0jeT42o3sE/9MN/aFiUk7JxOobsKSdz4hXcRQ5ps/iWmySuu5ytWaMk9VWGI3wdkjpsxpBzm9mGh6qdPx0cdxlqyCFuO1ArDCn61beo9tWCX35LJ9d7qukXofkgX73b0ZKWjnTUQE6sx8vPQ8N0SNZ3R06zDnGPb2+olEqlTY18y01Sf25z2Mkj+aROaziSt+t+YWFhtRlD3CRswxHOEOPLcIbQfqOGzE5Yv2+VZRNTXMWT98nz9jEVzbfoVz5b06ui1Xvp2a4vIfcaRfYyhBZbGGrOmV0x149fevqI6qGjOfp0DVHk0IhRFKwcNUSIITQcGAwxZFnMYIV5Q4wvM8GQwOCFUUujPdfOnpVk2RBnGIbo+v5Qn+5R3HkxTKt3X3Lo+RV12wOJDZ8l86/Ln+S3G4lxLcbth/2RjyGGA/uTO9+d24yx5xTQ4oMZTNnIvj3b1cpyw3ISAjN9TBpS9OuHOL0B8Yp67bGSGxW+hqHdXT5ShxgZ4l617ZZmEkPGXUabZSrLyoiIXeItDVmfWOpvyfgVPf1rc92nhC9VWVwooZYUcxmcTQ1J/ePtjQcK4yLKq2rbD5oB3hDhwBzuwHEY4hypK8NlV9p317paqR71HeWTdo6QJgSVBk4wpO5Fa3P/xfeCIeypvZV3LxH90OYqdcNclpEhulp559/bzRtifBl6+UhzlbpPzKZlc6M9N1gSThhuJ/ed/6um1Tvhsj82p1dlU0MeKEjdrq1GRVT76Ycq4rWHN0Q4cPKhisZtGOLQqevohCfNrtrkh9/krCnrKJ8yzYrw85PKjS2ZvHZm+TlaW8BOPts7Lzw21OJwwtDqnZvjItZN301iCFWjWdNqVER9HqLfeJmQZfEH2rkDq5FlOXTqypUe/E/yxcU6Ibsq66BhhC8ZJldELpPJ/Pyikyw0ZOKKobVYsmLoE1PAh5OgxYWiKRIufo6LxHG1zTeIIWOLqLExRDhAYwhBDHHs1FUoPaoJl87weqRTUaged55MOt+7IjwqwI8a4rHA0hhCwsb/1om137Hlv3WyLjwoNECall2Q6T/VHBdNuL7BhykxLqK4D7NvYNQQyWrUIY6fugqlB5+L1/PZFQ0fnB58om6Swk3rA6I3LIqVy+QhYmKxITZ7TsJ3ZvHd1JkF2WnSgNCg8EJ7fpjP+v24hMCoiOISgnfdYwyhBzo/2nSKwLUNmYHUlWGF0kNJvOYreD16JwsfgTH7Qj0Ccgu41CpbJs8NJPY3xLq7FRrCSYzaTh8mzVKZqXrdeSRMpAHHTV0ZfW5Fw9ZBVp9dmQ4f/hFBc6UhyxZn6NueskXTGrP2NUT4J2Qm8uEkNnydXQyZEq/j55v7j6gw+B06dRVKD3Z/8pZ8Xg9TfTJmLUuQLg1aNSadF0sjiLMZIlQdhYuDNnhGz11WEOMz04YUtSWnHlZg7Dt26kr1YAblHpczr4lMRo8FBbkBHqH7YsatfsQkEec0RB9OShPXh0i9Q2Mj5s34B4+x79ipK1d6sG9f55sqOzIXrY32Xr+w0B5j1r6GCOEkadbstVw42RSD3aedxZAZSF2F0mO8muLw2XOlaVHhYruOWTIDdxML4WRJbEQGRqELGGL71JWXw0iQdbOyvaOXx5b6zNCYnYG7BdJwstzTY2nUwuBAE29PzCmBY9v0za4sCk5c4um5JDFYNNNjdibuJl61LzdBnpC7KGLFuDcmzEsQ8aI0D/k33TFe7jk3UY3B7kCoS4OW/5+9c3Fu4rjj+EmCUw7uFEuyJWG9pehVKlkoErLRIClClSA2jjCpXQdUSIaGFEJp6pY2hT5m8pyQkklmkgwp7RDotB1omClDkk5pMh3alE7zT/VOd7IlWSfrfXfS9zNj3519d6vb3a9297d7vx+pz+mcMqqzEqRmiep8WZptTnQ1zckm23aZLiYG3CtTOWMuxtuPvBouo6mOvMfnIK0Gr0mOdVaK1NSFON+c8K9nNc6PpvTRoTxmhonLP6+kTG0oCMtIMhaUQ2Nzwr2eRdNZny5Sv8Zm3jwsf1tO2gOFSEjtMhKUg1j76o0nmbp1mnl/dGipFxgjSkYaGpeRoBzEaVjrH1oZYtqzsTEqGdnYP5osI4FCWgik4X0xR2GIiZdd41My8rB/iCwjgULEBdL4zjE1zCn4GfPYlIz09o/OlpFAIdVcaxTE1DCf1EiNS8lIbP/ofBkJFDIij6qQjyul/aO7ZSSd5sz4zEtBIYNITSL7Rw/LSAAUMszUJLB/9LiMBEAhw0xNAvuHobdlJAAKGWZqCrN/gDFUSKsAYrwTpkF+XEz9QyGKVcgPv5jkHflBIWCMFdI6gFi7bmWhEDDSbYhYADE+9BcUAsZdISIBxAg+KAUUAjAOaRpAjOADG0EhoC+5W4nR+OJHE03/2WkwGAkUsjmAGBQC+qqQH/xUfeT+mdNN/9lpMJjhKESzRQAx9LJAXxVymotOfX7X91/f9qtq5K1qhHi2DTl3gtr7m+OCwajfZbkp8Gl7N9gigBhG6qDPCtnx2zMXdp25em09inw1QjyrkPf+fO2T/T8TDEb9Lks7WYz2tzLA2gsGMQ75zqVju17aiCK/HiGeU8hrt6bVE4LBqO9ladNSDo+qn5UBM4ag323InxYW2E7Jrm3ba6LIC7FLWYUs3v/Ri/c+EwxGfS9Li1mrpei4un+VwS2LVSfysn+AnschmopCaqLIbyjkxqeaG/tOCQajNlMLdfDyzBT3y2+Xz5eze9k5Xf0ZEfsH6FkhREUhNVHk1xXy2XfvfHpx33nBYNT/snSxCqFWl2XUfTm658Onqz/KtH+AVuR7UchGFPmNNuTQO1N7L00KBqO+l+UMpaX0mZ4qw+5vCaOO6krG9lf3DlYhktk/QCs8JO1IhnSZdF9zt13/5B2n5tL6dSqivwppf6w+4HGIZPYP0ArOo9wURU4JXXt5W11mKFugixtwbd2lSfere7Q3n+dW+T5WOX5EWOvbvr13gAqR1P4BtpTIhltSeSvEu9zNDTRHuQiZp9jfR04cnmbbEP6489W9g1RI/+0foDnu5SP3iy+0HcnLsmTTT9W4th7FlYs7vnd5WvOHW4vOJ0/+/PEJViH8sbDWt4N1JwNWiHT2j94LUiHegNzLH5Qvvp/924Nn2lqJpwrGs+ScIUXVhEcYRYW43z7FDcRPvq533K4ohD+urtNqf+3icBQyfPuHDApyoKk9eum4e2GCePmL5559//al/1z5xZOL1y9seVU0suoP+zh3GOHaEDsj2Ya8cXma+OQvB+78nXivohD+WE4Kkdb+MeoKeeTXDy+yBXzod8+fvHJ5gvvC3PHGqZbWy+VyktbnEnzPKl8Xpm3kFMIt7N31zAsfXDl14K3JG/seP757/xP8saAQWfSyFFxdZf2Ai3cjD586eWLvvXdfOU2cvH6BVYdKc+DwtObHh0WHc2ndipkpxjbckHvtxCgrhFvY6/7Jnr1Xdz67b+/N//3yr+fe+fCxyrGgEFmM1KGQ/vet2SHHuydu5m7f2X7uldPut8+ruMaDVQfx6LefIg42X8lj8qT0tGt+YXTKsr0bqDT1XZXaY0IW1l455GqjL5j1iSNlPiA35Lj70ef/eEBd4ORx4PL04vXDE5w6Xv5qJ+He7OMvUDA4/KW1rVy4jqFHOTnMGMohV8/++/gIKUTDDTmOfmz98uG1YztYeRz8+Mt//vcbk5w6mmBZsllJa6idcI5jqBB3b6tOlK0QbiHYc4J/pG3bhYVflRnWz7mp1c6SzDZNO5bc6mKtdopJNP3wm+6Y1BHtWzBVh746Rpzdd4H4/WtfB+4abgWaOodV2Ssm3YJR6WU5yI+r0RDjqpAzV69V/SNt2y7s8TOqnbch2mZpq7cMncJeY/HQ7T1K5W7tzROzQ44dr/7RcPutSeLsg3vHmtsCZyIufzjlMY1CWSr548pYIS89ran6R9q2XdjjZ1Q7Vgg3lactm6cShHOWmpshtDaG3bcZml3gtFJWp3AGpxAdXb1I2LK/9cHKHevOJQy2dh+QG3K479q+Pi52grNcZMw5Xb6z3B2qV+SxiUElY4Vw85JV/0hVT0n8jGp3bYhPnZgiXDqjzkpoDQF2P2xvdsGqweQrCWdws+Rmb/UiYVtKmXR6vlWqPZewh9ttQypDDrHOQV6X40y6XcSOQBzD8VPIhn8kfi/Az6h2p5AAtyG5yLyE1sTtU03D85JqQk0KZ2gJU5YdXggXCVtKvd5vqz2XCFA9Z6fJkwrTrkiXceQRC3fsFEJs+EcS9vgZ1d37n+hCIZUNma/+USvyncvVeko4g/2dZ/LrF/Fbsl4h1XMr/Y4estNYMMyR2XgPUbkQT338FLLhH0nY42dYuanVDhWSF+pxyReIOIT9cLTZBSW25zS7oRAivrZ+Eb9lu1ZcL4u7Y+25RFTfdXZaMiErabVleguVnffbh1aSXsYIhcjnY9bMGGq6SVJLZKvf9MtWihUGv28LETUNTNXcxZ4xt1CjEOPq+kX8lh2ph4P8HWvPJUKGrh5QZV8r+R1tm3RbIXFc49FUiBLsH5o3v7lzEDmjNjeYUlv2UnRbhOsyMc4uXrybd9H6jky6LUnph9OKZJg4MTYKUYD94+CZf00PJGfKxfpjX6sb+RKtE0rOd1gO6ViRMa90atJtTYxOJtKDLUSVM7bKeImxUYjC7B99zBmNiv+RpBzUiZyZTpaX+/646vgcTQ30HTGKsUYCxPgoRGH2jwHmjKrzMU53qZm8vrDfFYkSY45C3v6Uwv5hoPVWV84Qj3kyM2rZfncMJDXBpBtUEUApSGD/CCwHvbqILZWcdTDUFK2fKxV9ofnEUjRtGWWFWIKhWdJqW7Kg0ikLie0fxrS9kJgPpYolh9mvJc2ObDJli+gKdqexf3V20SK1QqJrq36HzxtAfVMgMrJ/qPLRJU85blhZterpKYoJz7K9sbWYN7PQlj3UspaWYxuyMJ/kTLpqVDWlIlf7h2kh442tGXKu2XClN2ZdXTHEy56laF6sG28nbQF5KSStW2GYFV0atQwMGKPTXqgMXrIOM6n1mx2lYoodvBTs6dremK3BN6ykClEnUno62fLVcgAGgiUdXWIHL75iac7M9cYcs5XBize4YK73Ly6ZQgJen8O/uhZFWQEZ9BJnMp5YnO2NcYOX+hgVkinEMBsKwmgF5IerPs4RwtABUMsMVR8rDwoBoK4JaYi3CoUAUNeEFKOS1lkoBMiaqLqNOptt+FeD16yOfWSto4JCgPLQiv+F32n0mtWxjywoBChfIRUfV0TGQdFlbiE0f8h70OK8ZvXkIwsKAcpWiFtDCD6uzDpL0M/VYsHlVcWDFuc1qycfWVAIULZCTrIK4X1c5W2rTMU9g+DyKlD1mtWTjyyM1IHye1m8j6u5SGGmopB1l1eC16yefGRBIUD5CuF9XFHBdFLLeboSXF4RVa9ZPfnIgkKA0hWiFXxcRUg6XvGdxR9ueM3qyUcWFAKU34a0YJPXrBra8pEFhYCRVsgmr1k1tOUjCwoBo60Q5aYGABQCABQCABQCABQChQAoBAoBUAgUAqAQKAQAKASALeusMqJUAKAsAp6c2ZzrW4BBAEaQmbUsaQ3ZkREAiGEs+PT0ig6BDQAQxTnv8jtsGQRWA0AMS8bgoJMxRAEBQJR8LEmHDQU4dAdADFUwNOd3IWQOAOKodSuMOeU1IicAECManyWza1FkBABiBDwpM5NLYEYRAFEWIiXSGgrCDAyAGMaCL0wXMaMIgDjpssvvMGRgBgZADEvG5vC7yphRBEAUta5Ih30FmIEBEEMVDFnJUgQzigCIYkrkGHPOE0BOACBGdC1LzsajyAgAxDB6U2Zm84slmDsBYJ3leZd/rn5GsRBEtgCwgaVgCNPJWL56rCYhEQDqSceS9PqMIkNBIgA0oqrMKM47CSL3//bu7qWpMA7g+GN738RtMC820rAoMAYxBgtGI2JdjIEbY42GSfOFxImRChKtdE1ylvRiKVEU9mIvWFBEN+aFFxFd9Ff1nJ1zgtlZ4FV2+n7gwJ6fF4PBl+c8B9kcJAIY2ddxtt1/eL+LRIBWunr9nQ4SAVo55FK+mJFEAONA5A7S6bK7jhzjswB+c9De3n28t+Mk/wMMGDnNRwAAAAAAAIA9wsFPwgF/KsTUbwdQCEAhAIUAFEIhoBAKAYVQCCiEQgAKASgEoBCAQgAKASgEMGshTqvNcG6ZvH4iFfZ4jwYoBBRiQC3k4TcfhcDkhbifTBffrIpguW79Iq/qzFys/LmxHJaFrHyN1C639dyIONZHhbNc11YT2/oeos9mIrXNlWEKgekKmfz4NldaygbHHz9VrvyL+Vwpek55GZKFjN+5Xylk8/1juVJfSFt5+8euxpf1QtRZUJktUAhMV4glGR0QVxKnglNnhLzc5/t8YqS/sVTuspRp2JM5kB6sRH2NlbV6eyMkvFN6IepscSNkWaMQmK8Q94Wi3W6fGA3KE4e8ehZn02Io0Vhq5xBn2DNY93e/l4UoK+v355faRP7XXVZjVlVmKe6yYMJCknLTyHT5tELUPURuKU2FJD9siQd6ITv2EHUm9xDBHgIznkNGEvO5Z4WAVojQzyHNhSwFXsajA2oNNuUccne5qRBbinMITFqI++Z08fUjoRfi1p5lNRUyFI+t/5j7pNWgPMvavNVciJzVtg0eDVMI/vVCjFh2NVb+8updWqwVshSC/6KQ3fMurF68NxuiEFCIoUwlErvmERQCCml9q2WhEFDInn47gEIACgEoBKAQCgGFUAgohEJAIRQCUAhAIQCFABQC/IVC+D11AAAAAAAAAAAAAAAAAAB2+gmClD1PTc6eHQAAAABJRU5ErkJggg==" width="801" height="297" />

**Note:** Several other languages have mechanisms for lazy evaluation and deferring a computation, which they also call "promises", e.g. Scheme. Promises in JavaScript represent processes that are already happening, which can be chained with callback functions. If you are looking to lazily evaluate an expression, consider the [arrow function](../functions/arrow_functions) with no arguments: `f = () => expression` to create the lazily-evaluated expression, and `f()` to evaluate.

**Note:** A promise is said to be _settled_ if it is either fulfilled or rejected, but not pending. You will also hear the term _resolved_ used with promises — this means that the promise is settled or "locked-in” to match the state of another promise. [States and fates](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md) contain more details about promise terminology.

### Chained Promises

The methods `promise.then()`, `promise.catch()`, and `promise.finally()` are used to associate further action with a promise that becomes settled.

The `.then()` method takes up to two arguments; the first argument is a callback function for the resolved case of the promise, and the second argument is a callback function for the rejected case. Each `.then()` returns a newly generated promise object, which can optionally be used for chaining; for example:

    const myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('foo');
      }, 300);
    });

    myPromise
      .then(handleResolvedA, handleRejectedA)
      .then(handleResolvedB, handleRejectedB)
      .then(handleResolvedC, handleRejectedC);

Processing continues to the next link of the chain even when a `.then()` lacks a callback function that returns a Promise object. Therefore, a chain can safely omit every _rejection_ callback function until the final `.catch()`.

Handling a rejected promise in each `.then()` has consequences further down the promise chain. Sometimes there is no choice, because an error must be handled immediately. In such cases we must throw an error of some type to maintain error state down the chain. On the other hand, in the absence of an immediate need, it is simpler to leave out error handling until a final `.catch()` statement. A `.catch()` is really just a `.then()` without a slot for a callback function for the case when the promise is resolved.

    myPromise
    .then(handleResolvedA)
    .then(handleResolvedB)
    .then(handleResolvedC)
    .catch(handleRejectedAny);

Using `Arrow Function Expressions` for the callback functions, an implementation of a promise chain might look something like this:

    promise1
    .then(value => { return value + ' and bar'; })
    .then(value => { return value + ' and bar again'; })
    .then(value => { return value + ' and again'; })
    .then(value => { return value + ' and again'; })
    .then(value => { console.log(value) })
    .catch(err => { console.log(err) });

The termination condition of a promise determines the "settled" state of the next promise in the chain. A "resolved" state indicates a successful completion of the promise, while a "rejected" state indicates a lack of success. The return value of each resolved promise in the chain is passed along to the next `.then()`, while the reason for rejection is passed along to the next rejection-handler function in the chain.

The promises of a chain are nested like Russian dolls, but get popped like the top of a stack. The first promise in the chain is most deeply nested and is the first to pop.

    (promise D, (promise C, (promise B, (promise A) ) ) )

When a `nextValue` is a promise, the effect is a dynamic replacement. The `return` causes a promise to be popped, but the `nextValue` promise is pushed into its place. For the nesting shown above, suppose the `.then()` associated with "promise B" returns a `nextValue` of "promise X". The resulting nesting would look like this:

    (promise D, (promise C, (promise X) ) )

A promise can participate in more than one nesting. For the following code, the transition of `promiseA` into a "settled" state will cause both instances of `.then()` to be invoked.

    const promiseA = new Promise(myExecutorFunc);
    const promiseB = promiseA.then(handleFulfilled1, handleRejected1);
    const promiseC = promiseA.then(handleFulfilled2, handleRejected2);

An action can be assigned to an already "settled" promise. In that case, the action (if appropriate) will be performed at the first asynchronous opportunity. Note that promises are guaranteed to be asynchronous. Therefore, an action for an already "settled" promise will occur only after the stack has cleared and a clock-tick has passed. The effect is much like that of `setTimeout(action,10)`.

    const promiseA = new Promise( (resolutionFunc,rejectionFunc) => {
        resolutionFunc(777);
    });
    // At this point, "promiseA" is already settled.
    promiseA.then( (val) => console.log("asynchronous logging has val:",val) );
    console.log("immediate logging");

    // produces output in this order:
    // immediate logging
    // asynchronous logging has val: 777

### Incumbent settings object tracking

A settings object is an [environment](https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object) that provides additional information when JavaScript code is running. This includes the realm and module map, as well as HTML specific information such as the origin. The incumbent settings object is tracked in order to ensure that the browser knows which one to use for a given piece of user code.

To better picture this, we can take a closer look at how the realm might be an issue. A **realm** can be roughly thought of as the global object. What is unique about realms is that they hold all of the necessary information to run JavaScript code. This includes objects like `Array` and `Error`. Each settings object has its own "copy" of these and they are not shared. That can cause some unexpected behavior in relation to promises. In order to get around this, we track something called the **incumbent settings object**. This represents information specific to the context of the user code responsible for a certain function call.

To illustrate this a bit further we can take a look at how an `<iframe>` embedded in a document communicates with its host. Since all web APIs are aware of the incumbent settings object, the following will work in all browsers:

    <!DOCTYPE html>
    <iframe></iframe> <!-- we have a realm here -->
    <script> // we have a realm here as well
      const bound = frames[0].postMessage.bind(
        frames[0], "some data", "*");
        // bound is a built-in function -- there is no user
        // code on the stack, so which realm do we use?
      window.setTimeout(bound);
      // this still works, because we use the youngest
      // realm (the incumbent) on the stack
    </script>

The same concept applies to promises. If we modify the above example a little bit, we get this:

    <!DOCTYPE html>
    <iframe></iframe> <!-- we have a realm here -->
    <script> // we have a realm here as well
      const bound = frames[0].postMessage.bind(
        frames[0], "some data", "*");
        // bound is a built in function -- there is no user
        // code on the stack -- which realm do we use?
      Promise.resolve(undefined).then(bound);
      // this still works, because we use the youngest
      // realm (the incumbent) on the stack
    </script>

If we change this so that the `<iframe>` in the document is listening to post messages, we can observe the effect of the incumbent settings object:

    <!-- y.html -->
    <!DOCTYPE html>
    <iframe src="x.html"></iframe>
    <script>
      const bound = frames[0].postMessage.bind(frames[0], "some data", "*");
      Promise.resolve(undefined).then(bound);
    </script>

    <!-- x.html -->
    <!DOCTYPE html>
    <script>
    window.addEventListener("message", (event) => {
      document.querySelector("#text").textContent = "hello";
      // this code will only run in browsers that track the incumbent settings object
      console.log(event);
    }, false);
    </script>

In the above example, the inner text of the `<iframe>` will be updated only if the incumbent settings object is tracked. This is because without tracking the incumbent, we may end up using the wrong environment to send the message.

**Note:** Currently, incumbent realm tracking is fully implemented in Firefox, and has partial implementations in Chrome and Safari.

## Constructor

[`Promise()`](promise/promise)  
Creates a new `Promise` object. The constructor is primarily used to wrap functions that do not already support promises.

## Static methods

[`Promise.all(iterable)`](promise/all)  
Wait for all promises to be resolved, or for any to be rejected.

If the returned promise resolves, it is resolved with an aggregating array of the values from the resolved promises, in the same order as defined in the iterable of multiple promises.

If it rejects, it is rejected with the reason from the first promise in the iterable that was rejected.

[`Promise.allSettled(iterable)`](promise/allsettled)  
Wait until all promises have settled (each may resolve or reject).

Returns a Promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describe the outcome of each promise.

[`Promise.any(iterable)`](promise/any)  
Takes an iterable of Promise objects and, as soon as one of the promises in the iterable fulfills, returns a single promise that resolves with the value from that promise.

[`Promise.race(iterable)`](promise/race)  
Wait until any of the promises is resolved or rejected.

If the returned promise resolves, it is resolved with the value of the first promise in the iterable that resolved.

If it rejects, it is rejected with the reason from the first promise that was rejected.

[`Promise.reject(reason)`](promise/reject)  
Returns a new `Promise` object that is rejected with the given reason.

[`Promise.resolve(value)`](promise/resolve)  
Returns a new `Promise` object that is resolved with the given value. If the value is a thenable (i.e. has a `then` method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise, the returned promise will be fulfilled with the value.

Generally, if you don't know if a value is a promise or not, [`Promise.resolve(value)`](promise/resolve) it instead and work with the return value as a promise.

## Instance methods

See the [Microtask guide](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) to learn more about how these methods use the Microtask queue and services.

[`Promise.prototype.catch()`](promise/catch)  
Appends a rejection handler callback to the promise, and returns a new promise resolving to the return value of the callback if it is called, or to its original fulfillment value if the promise is instead fulfilled.

[`Promise.prototype.then()`](promise/then)  
Appends fulfillment and rejection handlers to the promise, and returns a new promise resolving to the return value of the called handler, or to its original settled value if the promise was not handled (i.e. if the relevant handler `onFulfilled` or `onRejected` is not a function).

[`Promise.prototype.finally()`](promise/finally)  
Appends a handler to the promise, and returns a new promise that is resolved when the original promise is resolved. The handler is called when the promise is settled, whether fulfilled or rejected.

## Examples

### Basic Example

    let myFirstPromise = new Promise((resolve, reject) => {
      // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
      // In this example, we use setTimeout(...) to simulate async code.
      // In reality, you will probably be using something like XHR or an HTML5 API.
      setTimeout( function() {
        resolve("Success!")  // Yay! Everything went well!
      }, 250)
    })

    myFirstPromise.then((successMessage) => {
      // successMessage is whatever we passed in the resolve(...) function above.
      // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
      console.log("Yay! " + successMessage)
    });

### Example with diverse situations

This example shows diverse techniques for using Promise capabilities and diverse situations that can occur. To understand this, start by scrolling to the bottom of the code block, and examine the promise chain. Upon provision of an initial promise, a chain of promises can follow. The chain is composed of `.then()` calls, and typically (but not necessarily) has a single `.catch()` at the end, optionally followed by `.finally()`. In this example, the promise chain is initiated by a custom-written `new Promise()` construct; but in actual practice, promise chains more typically start with an API function (written by someone else) that returns a promise.

The example function `tetheredGetNumber()` shows that a promise generator will utilize `reject()` while setting up an asynchronous call, or within the call-back, or both. The function `promiseGetWord()` illustrates how an API function might generate and return a promise in a self-contained manner.

Note that the function `troubleWithGetNumber()` ends with a `throw()`. That is forced because an ES6 promise chain goes through all the `.then()` promises, even after an error, and without the "throw()", the error would seem "fixed". This is a hassle, and for this reason, it is common to omit `rejectionFunc` throughout the chain of `.then()` promises, and just have a single `rejectionFunc` in the final `catch()`. The alternative is to throw a special value (in this case "-999", but a custom Error type would be more appropriate).

This code can be run under NodeJS. Comprehension is enhanced by seeing the errors actually occur. To force more errors, change the `threshold` values.

    "use strict";

    // To experiment with error handling, "threshold" values cause errors randomly
    const THRESHOLD_A = 8; // can use zero 0 to guarantee error

    function tetheredGetNumber(resolve, reject) {
      try {
        setTimeout(
          function() {
            const randomInt = Date.now();
            const value = randomInt % 10;
            try {
              if(value >= THRESHOLD_A) {
                throw new Error(`Too large: ${value}`);
              }
            } catch(msg) {
                reject(`Error in callback ${msg}`);
            }
          resolve(value);
          return;
        }, 500);
        // To experiment with error at set-up, uncomment the following 'throw'.
        // throw new Error("Bad setup");
      } catch(err) {
        reject(`Error during setup: ${err}`);
      }
      return;
    }

    function determineParity(value) {
      const isOdd = value % 2 ? true : false ;
      const parityInfo = { theNumber: value, isOdd: isOdd };
      return parityInfo;
    }

    function troubleWithGetNumber(reason) {
      console.error(`Trouble getting number: ${reason}`);
      throw -999; // must "throw" something, to maintain error state down the chain
    }

    function promiseGetWord(parityInfo) {
      // The "tetheredGetWord()" function gets "parityInfo" as closure variable.
      const tetheredGetWord = function(resolve,reject) {
        const theNumber = parityInfo.theNumber;
        const threshold_B = THRESHOLD_A - 1;
        if(theNumber >= threshold_B) {
          reject(`Still too large: ${theNumber}`);
        } else {
          parityInfo.wordEvenOdd = parityInfo.isOdd ? 'odd' : 'even';
          resolve(parityInfo);
        }
        return;
      }
      return new Promise(tetheredGetWord);
    }

    (new Promise(tetheredGetNumber))
      .then(determineParity,troubleWithGetNumber)
      .then(promiseGetWord)
      .then((info) => {
        console.log("Got: ",info.theNumber," , ", info.wordEvenOdd);
        return info;
      })
      .catch((reason) => {
        if(reason === -999) {
          console.error("Had previously handled error");
        }
        else {
          console.error(`Trouble with promiseGetWord(): ${reason}`);
        }
       })
      .finally((info) => console.log("All done"));

### Advanced Example

This small example shows the mechanism of a `Promise`. The `testPromise()` method is called each time the [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) is clicked. It creates a promise that will be fulfilled, using [`WindowOrWorkerGlobalScope.setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), to the promise count (number starting from 1) every 1-3 seconds, at random. The `Promise()` constructor is used to create the promise.

The fulfillment of the promise is logged, via a fulfill callback set using [`p1.then()`](promise/then). A few logs show how the synchronous part of the method is decoupled from the asynchronous completion of the promise.

By clicking the button several times in a short amount of time, you'll even see the different promises being fulfilled one after another.

#### HTML

    <button id="make-promise">Make a promise!</button>
    <div id="log"></div>

#### JavaScript

    "use strict";
    let promiseCount = 0;

    function testPromise() {
      let thisPromiseCount = ++promiseCount;
      let log = document.getElementById('log');
      // begin
      log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Started<br>');
      // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s)
      let p1 = new Promise((resolve, reject) => {
        // The executor function is called with the ability to resolve or reject the promise
        log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise constructor<br>');
        // This is only an example to create asynchronism
        window.setTimeout(function() {
            // We fulfill the promise !
            resolve(thisPromiseCount);
        }, Math.random() * 2000 + 1000);
      });

      // We define what to do when the promise is resolved with the then() call,
      // and what to do when the promise is rejected with the catch() call
      p1.then(function(val) {
        // Log the fulfillment value
        log.insertAdjacentHTML('beforeend', val + ') Promise fulfilled<br>');
      }).catch((reason) => {
        // Log the rejection reason
        console.log(`Handle rejected promise (${reason}) here.`);
      });
      // end
      log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise made<br>');
    }

    if ("Promise" in window) {
      let btn = document.getElementById("make-promise");
      btn.addEventListener("click",testPromise);
    } else {
      log = document.getElementById('log');
      log.textContent = "Live example not available as your browser doesn't support the <code>Promise<code> interface.";
    }

#### Result

### Loading an image with XHR

Another simple example using `Promise` and [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) to load an image is available at the MDN GitHub [js-examples](https://github.com/mdn/js-examples/tree/master/promises-test) repository. You can also [see it in action](https://mdn.github.io/js-examples/promises-test/). Each step is commented on and allows you to follow the Promise and XHR architecture closely.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-promise-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-promise-objects</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Promise`

32

12

29

No

19

8

4.4.3

32

29

19

8

2.0

`Promise`

32

12

29

Constructor requires a new operator since version 37.

No

19

8

Constructor requires a new operator since version 10.

4.4.3

32

29

Constructor requires a new operator since version 37.

19

8

Constructor requires a new operator since version 10.

2.0

`all`

32

12

29

No

19

8

4.4.3

32

29

19

8

2.0

`allSettled`

76

79

71

No

63

13

76

76

79

54

13

12.0

`any`

85

85

79

No

No

14

85

85

79

No

14

No

`catch`

32

12

29

No

19

8

4.4.3

32

29

19

8

2.0

`finally`

63

18

58

No

50

11.1

63

63

58

46

11.3

8.0

`incumbent_settings_object_tracking`

No

No

50

No

No

No

No

No

50

No

No

No

`race`

32

12

29

No

19

8

4.4.3

32

29

19

8

2.0

`reject`

32

12

29

No

19

8

4.4.3

32

29

19

8

2.0

`resolve`

32

12

29

No

19

8

4.4.3

32

29

19

8

2.0

`then`

32

12

29

No

19

8

4.4.3

32

29

19

8

2.0

## See also

-   [Using promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)
-   [Promises/A+ specification](https://promisesaplus.com/)
-   [Venkatraman.R - JS Promise (Part 1, Basics)](https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53)
-   [Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)](https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski)
-   [Venkatraman.R - Tools for Promises Unit Testing](https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction)
-   [Jake Archibald: JavaScript Promises: There and Back Again](https://www.html5rocks.com/en/tutorials/es6/promises/)
-   [Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript](https://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript)
-   [Matt Greer: JavaScript Promises ... In Wicked Detail](https://www.mattgreer.org/articles/promises-in-wicked-detail/)
-   [Forbes Lindesay: promisejs.org](https://www.promisejs.org/)
-   [Speed-polyfill to polyfill both promise availability and promise performance.](https://github.com/anonyco/SPromiseMeSpeedJS/blob/master/README.md)
-   [Promise polyfill](https://github.com/jakearchibald/es6-promise/)
-   [Udacity: JavaScript Promises](https://www.udacity.com/course/javascript-promises--ud898)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise</a>

# Error: Permission denied to access property "x"

The JavaScript exception "Permission denied to access property" occurs when there was an attempt to access an object for which you have no permission.

## Message

    Error: Permission denied to access property "x"

## Error type

[`Error`](../global_objects/error).

## What went wrong?

There was attempt to access an object for which you have no permission. This is likely an [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) element loaded from a different domain for which you violated the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy).

## Examples

### No permission to access document

    <!DOCTYPE html>
    <html>
      <head>
        <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe>
        <script>
          onload = function() {
            console.log(frames[0].document);
            // Error: Permission denied to access property "document"
          }
        </script>
      </head>
      <body></body>
    </html>

## See also

-   [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
-   [Same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Property_access_denied" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Property_access_denied</a>

# Property accessors

**Property accessors** provide access to an object's properties by using the dot notation or the bracket notation.

## Syntax

    object.property
    object['property']

## Description

One can think of an object as an _associative array_ (a.k.a. _map_, _dictionary_, _hash_, _lookup table_). The _keys_ in this array are the names of the object's properties.

It's typical when speaking of an object's properties to make a distinction between properties and methods. However, the property/method distinction is little more than a convention. A method is a property that can be called (for example, if it has a reference to a [`Function`](../global_objects/function) instance as its value).

There are two ways to access properties: _dot notation_ and _bracket notation_.

### Dot notation

In the `object.property` syntax, the `property` must be a valid JavaScript [identifier](https://developer.mozilla.org/en-US/docs/Glossary/Identifier). (In the ECMAScript standard, the names of properties are technically "IdentifierNames", not "Identifiers", so reserved words can be used but are not recommended). For example, `object.$1` is valid, while `object.1` is not.

    const variable = object.property_name;

    object.property_name = value;

    const object = {};

    object.$1 = 'foo';
    console.log(object.$1);  // 'foo'

    object.1 = 'bar';        // SyntaxError
    console.log(object.1);   // SyntaxError

Here, the method named `createElement` is retrieved from `document` and is called.

    document.createElement('pre')

If you use a method for a numeric literal, and the numeric literal has no exponent and no decimal point, you should leave [white-space(s)](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace) before the dot preceding the method call, so that the dot is not interpreted as a decimal point.

    77 .toExponential()
    // or
    77
    .toExponential()
    // or
    ;(77).toExponential()
    // or
    77..toExponential()
    // or
    77.0.toExponential()
    // because 77. === 77.0, no ambiguity

### Bracket notation

In the `object[property_name]` syntax, the `property_name` is just a string or [Symbol](https://developer.mozilla.org/en-US/docs/Glossary/Symbol). So, it can be any string, including `'1foo'`, `'!bar!'`, or even `' '` (a space).

    const variable = object[property_name]
    object[property_name] = value;

This does the exact same thing as the previous example.

    document['createElement']('pre')

A space before bracket notation is allowed.

    document ['createElement']('pre')

### Property names

Property names are string or [Symbol](https://developer.mozilla.org/en-US/docs/Glossary/Symbol). Any other value, including a number, is coerced to a string. This outputs `'value'`, since `1` is coerced into `'1'`.

    let object = {}
    object['1'] = 'value'
    console.log(object[1])

This also outputs `'value'`, since both `foo` and `bar` are converted to the same string.

    let foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
    object[foo] = 'value'
    console.log(object[bar])

In the [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) JavaScript engine, this string would be "`[object Object]`".

### Method binding

A method is not bound to the object that it is a method of. Specifically, `this` is not fixed in a method. Put another way, `this` does not necessarily refer to the object containing a method. Instead, `this` is "passed" by the function call. See [method binding](this#method_binding).

## Examples

### Bracket notation vs. `eval`

JavaScript novices often make the mistake of using [`eval()`](../global_objects/eval) where the bracket notation can be used instead.

For example, the following syntax is often seen in many scripts.

    x = eval('document.forms.form_name.elements.' + strFormControl + '.value')

`eval()` is slow and should be avoided whenever possible. Also, `strFormControl` would have to hold an identifier, which is not required for names and `id`s of form controls. It is better to use bracket notation instead:

    x = document.forms['form_name'].elements[strFormControl].value

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-property-accessors">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Property Accessors' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Property_Accessors`

1

12

1

3

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Object`](../global_objects/object)
-   [`Object.defineProperty()`](../global_objects/object/defineproperty)
-   [Optional chaining](optional_chaining)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors</a>

# Object.prototype.propertyIsEnumerable()

The `propertyIsEnumerable()` method returns a Boolean indicating whether the specified property is enumerable and is the object's own property.

## Syntax

    propertyIsEnumerable(prop)

### Parameters

`prop`  
The name of the property to test.

### Return value

A [`Boolean`](../boolean) indicating whether the specified property is enumerable and is the object's own property.

## Description

Every object has a `propertyIsEnumerable` method. This method can determine whether the specified property in an object can be enumerated by a [`for...in`](../../statements/for...in) loop, with the exception of properties inherited through the prototype chain. If the object does not have the specified property, this method returns `false`.

**Note:** Bear in mind that enumerable properties are looped over by [`for...in`](../../statements/for...in) loops, with the exception of [`Symbol`](../symbol)s.

## Examples

### A basic use of `propertyIsEnumerable`

The following example shows the use of `propertyIsEnumerable` on objects and arrays:

    var o = {};
    var a = [];
    o.prop = 'is enumerable';
    a[0] = 'is enumerable';

    o.propertyIsEnumerable('prop');   // returns true
    a.propertyIsEnumerable(0);        // returns true

### User-defined vs. built-in objects

The following example demonstrates the enumerability of user-defined vs. built-in properties:

    var a = ['is enumerable'];

    a.propertyIsEnumerable(0);          // returns true
    a.propertyIsEnumerable('length');   // returns false

    Math.propertyIsEnumerable('random');   // returns false
    this.propertyIsEnumerable('Math');     // returns false

### Direct vs. inherited properties

    var a = [];
    a.propertyIsEnumerable('constructor');         // returns false

    function firstConstructor() {
      this.property = 'is not enumerable';
    }

    firstConstructor.prototype.firstMethod = function() {};

    function secondConstructor() {
      this.method = function() { return 'is enumerable'; };
    }

    secondConstructor.prototype = new firstConstructor;
    secondConstructor.prototype.constructor = secondConstructor;

    var o = new secondConstructor();
    o.arbitraryProperty = 'is enumerable';

    o.propertyIsEnumerable('arbitraryProperty');   // returns true
    o.propertyIsEnumerable('method');              // returns true
    o.propertyIsEnumerable('property');            // returns false

    o.property = 'is enumerable';

    o.propertyIsEnumerable('property');            // returns true

    // These return false as they are on the prototype which
    // propertyIsEnumerable does not consider (even though the last two
    // are iteratable with for-in)
    o.propertyIsEnumerable('prototype');   // returns false (as of JS 1.8.1/FF3.6)
    o.propertyIsEnumerable('constructor'); // returns false
    o.propertyIsEnumerable('firstMethod'); // returns false

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.prototype.propertyisenumerable</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`propertyIsEnumerable`

1

12

1

5.5

4

3

1

18

4

10.1

1

1.0

## See also

-   [Enumerability and ownership of properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
-   [`for...in`](../../statements/for...in)
-   [`Object.keys()`](keys)
-   [`Object.defineProperty()`](defineproperty)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable</a>

# Object.prototype.\_\_proto\_\_

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Warning:** Changing the `[[Prototype]]` of an object is, by the nature of how modern JavaScript engines optimize property accesses, a very slow operation, in **_every_** browser and JavaScript engine. The effects on the performance of altering inheritance are subtle and far-flung, and are not limited to the time spent in `obj.__proto__ = ...` statements, but may extend to **_any_** code that has access to **_any_** object whose `[[Prototype]]` has been altered. If you care about performance you should avoid setting the `[[Prototype]]` of an object. Instead, create a new object with the desired `[[Prototype]]` using [`Object.create()`](create).

**Warning:** While `Object.prototype.__proto__` is supported today in most browsers, its existence and exact behavior has only been standardized in the ECMAScript 2015 specification as a legacy feature to ensure compatibility for web browsers. For better support, use [`Object.getPrototypeOf()`](getprototypeof) instead.

The `__proto__` property of [`Object.prototype`](../object) is an accessor property (a getter function and a setter function) that exposes the internal `[[Prototype]]` (either an object or [`null`](../null)) of the object through which it is accessed.

The use of `__proto__` is controversial and discouraged. It was never originally included in the ECMAScript language spec, but modern browsers implemented it anyway. Only recently was the `__proto__` property standardized by the ECMAScript 2015 specification for compatibility with web browsers, so it will be supported into the future. It is deprecated in favor of [`Object.getPrototypeOf`](getprototypeof)/[`Reflect.getPrototypeOf`](../reflect/getprototypeof) and [`Object.setPrototypeOf`](setprototypeof)/[`Reflect.setPrototypeOf`](../reflect/setprototypeof) (though still, setting the `[[Prototype]]` of an object is a slow operation that should be avoided if performance is a concern).

The `__proto__` property can also be used in an object literal definition to set the object `[[Prototype]]` on creation, as an alternative to [`Object.create()`](create). See: [object initializer / literal syntax](../../operators/object_initializer).

## Description

The `__proto__` getter function exposes the value of the internal `[[Prototype]]` of an object. For objects created using an object literal, this value is [`Object.prototype`](../object). For objects created using array literals, this value is <span class="page-not-created">`Array.prototype`</span>. For functions, this value is [`Function.prototype`](../function). For objects created using `new fun`, where `fun` is one of the built-in constructor functions provided by JavaScript ([`Array`](../array), [`Boolean`](../boolean), [`Date`](../date), [`Number`](../number), [`Object`](../object), [`String`](../string), and so on — including new constructors added as JavaScript evolves), this value is always `fun.prototype`. For objects created using `new fun`, where `fun` is a function defined in a script, this value is the value of `fun.prototype`. (That is, if the constructor didn't return an other object explicitly, or the `fun.prototype` has been reassigned since the instance was created.)

The `__proto__` setter allows the `[[Prototype]]` of an object to be mutated. The object must be extensible according to [`Object.isExtensible()`](isextensible): if it is not, a [`TypeError`](../typeerror) is thrown. The value provided must be an object or [`null`](../null). Providing any other value will do nothing.

To understand how prototypes are used for inheritance, see guide article [Inheritance and the prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).

The `__proto__` property is a simple accessor property on [`Object.prototype`](../object) consisting of a getter and setter function. A property access for `__proto__` that eventually consults [`Object.prototype`](../object) will find this property, but an access that does not consult [`Object.prototype`](../object) will not. If some other `__proto__` property is found before [`Object.prototype`](../object) is consulted, that property will hide the one found on [`Object.prototype`](../object).

## Examples

### Using \_\_proto\_\_

    function Circle() {}
    const shape = {};
    const circle = new Circle();

    // Set the object prototype.
    // DEPRECATED. This is for example purposes only. DO NOT DO THIS in real code.
    shape.__proto__ = circle;

    // Get the object prototype
    console.log(shape.__proto__ === Circle);  // false

    const ShapeA = function () {};
    const ShapeB = {
        a() {
            console.log('aaa');
        }
    };
    console.log(ShapeA.prototype.__proto__ = ShapeB);

    const shapea = new ShapeA();
    shapea.a(); // aaa
    console.log(ShapeA.prototype === shapea.__proto__); // true

    // or
    const ShapeC = function () {};
    const ShapeD = {
        a() {
            console.log('a');
        }
    };

    const shapeC = new ShapeC();
    shapeC.__proto__ = ShapeD;
    shapeC.a(); // a
    console.log(ShapeC.prototype === shapeC.__proto__); // false

    // or
    function Test() {}
    Test.prototype.myname = function () {
        console.log('myname');
    };

    const a = new Test();
    console.log(a.__proto__ === Test.prototype); // true
    a.myname(); // myname

    // or
    const fn = function () {};
    fn.prototype.myname = function () {
        console.log('myname');
    };

    var obj = {
        __proto__: fn.prototype
    };

    obj.myname(); // myname

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-additional-properties-of-the-object.prototype-object">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-additional-properties-of-the-object.prototype-object</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`proto`

1

12

1

11

10.5

3

1

18

4

11

1

1.0

## See also

-   [`Object.prototype.isPrototypeOf()`](isprototypeof)
-   [`Object.getPrototypeOf()`](getprototypeof)
-   [`Object.setPrototypeOf()`](setprototypeof)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto</a>

# Proxy

The `Proxy` object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.

## Description

A `Proxy` is created with two parameters:

-   `target`: the original object which you want to proxy
-   `handler`: an object that defines which operations will be intercepted and how to redefine intercepted operations.

For example, this code defines a simple target with just two properties, and an even simpler handler with no properties:

    const target = {
      message1: "hello",
      message2: "everyone"
    };

    const handler1 = {};

    const proxy1 = new Proxy(target, handler1);

Because the handler is empty, this proxy behaves just like the original target:

    console.log(proxy1.message1); // hello
    console.log(proxy1.message2); // everyone

To customise the proxy, we define functions on the handler object:

    const target = {
      message1: "hello",
      message2: "everyone"
    };

    const handler2 = {
      get: function(target, prop, receiver) {
        return "world";
      }
    };

    const proxy2 = new Proxy(target, handler2);

Here we've provided an implementation of the [`get()`](proxy/proxy/get) handler, which intercepts attempts to access properties in the target.

Handler functions are sometimes called _traps_, presumably because they trap calls to the target object. The very simple trap in `handler2` above redefines all property accessors:

    console.log(proxy2.message1); // world
    console.log(proxy2.message2); // world

With the help of the [`Reflect`](reflect) class we can give some accessors the original behavior and redefine others:

    const target = {
      message1: "hello",
      message2: "everyone"
    };

    const handler3 = {
      get: function (target, prop, receiver) {
        if (prop === "message2") {
          return "world";
        }
        return Reflect.get(...arguments);
      },
    };

    const proxy3 = new Proxy(target, handler3);

    console.log(proxy3.message1); // hello
    console.log(proxy3.message2); // world

## Constructor

[`Proxy()`](proxy/proxy)  
Creates a new `Proxy` object.

## Static methods

[`Proxy.revocable()`](proxy/revocable)  
Creates a revocable `Proxy` object.

## Examples

### Basic example

In this simple example, the number `37` gets returned as the default value when the property name is not in the object. It is using the [`get()`](proxy/proxy/get) handler.

    const handler = {
      get: function(obj, prop) {
        return prop in obj ?
          obj[prop] :
          37;
      }
    };

    const p = new Proxy({}, handler);
    p.a = 1;
    p.b = undefined;

    console.log(p.a, p.b);
    //  1, undefined

    console.log('c' in p, p.c);
    //  false, 37

### No-op forwarding proxy

In this example, we are using a native JavaScript object to which our proxy will forward all operations that are applied to it.

    const target = {};
    const p = new Proxy(target, {});

    p.a = 37;
    //  operation forwarded to the target

    console.log(target.a);
    //  37
    //  (The operation has been properly forwarded!)

Note that while this "no-op" works for JavaScript objects, it does not work for native browser objects like DOM Elements.

### Validation

With a `Proxy`, you can easily validate the passed value for an object. This example uses the [`set()`](proxy/proxy/set) handler.

    let validator = {
      set: function(obj, prop, value) {
        if (prop === 'age') {
          if (!Number.isInteger(value)) {
            throw new TypeError('The age is not an integer');
          }
          if (value > 200) {
            throw new RangeError('The age seems invalid');
          }
        }

        // The default behavior to store the value
        obj[prop] = value;

        // Indicate success
        return true;
      }
    };

    const person = new Proxy({}, validator);

    person.age = 100;
    console.log(person.age); // 100
    person.age = 'young';    // Throws an exception
    person.age = 300;        // Throws an exception

### Extending constructor

A function proxy could easily extend a constructor with a new constructor. This example uses the [`construct()`](proxy/proxy/construct) and [`apply()`](proxy/proxy/apply) handlers.

    function extend(sup, base) {
      var descriptor = Object.getOwnPropertyDescriptor(
        base.prototype, 'constructor'
      );
      base.prototype = Object.create(sup.prototype);
      var handler = {
        construct: function(target, args) {
          var obj = Object.create(base.prototype);
          this.apply(target, obj, args);
          return obj;
        },
        apply: function(target, that, args) {
          sup.apply(that, args);
          base.apply(that, args);
        }
      };
      var proxy = new Proxy(base, handler);
      descriptor.value = proxy;
      Object.defineProperty(base.prototype, 'constructor', descriptor);
      return proxy;
    }

    var Person = function(name) {
      this.name = name;
    };

    var Boy = extend(Person, function(name, age) {
      this.age = age;
    });

    Boy.prototype.gender = 'M';

    var Peter = new Boy('Peter', 13);

    console.log(Peter.gender);  // "M"
    console.log(Peter.name);    // "Peter"
    console.log(Peter.age);     // 13

### Manipulating DOM nodes

Sometimes you want to toggle the attribute or class name of two different elements. Here's how using the [`set()`](proxy/proxy/set) handler.

    let view = new Proxy({
      selected: null
    },
    {
      set: function(obj, prop, newval) {
        let oldval = obj[prop];

        if (prop === 'selected') {
          if (oldval) {
            oldval.setAttribute('aria-selected', 'false');
          }
          if (newval) {
            newval.setAttribute('aria-selected', 'true');
          }
        }

        // The default behavior to store the value
        obj[prop] = newval;

        // Indicate success
        return true;
      }
    });

    let i1 = view.selected = document.getElementById('item-1');  //giving error here, i1 is null
    console.log(i1.getAttribute('aria-selected'));
    //  'true'

    let i2 = view.selected = document.getElementById('item-2');
    console.log(i1.getAttribute('aria-selected'));
    //  'false'

    console.log(i2.getAttribute('aria-selected'));
    //  'true'
    Note: even if selected: !null, then giving oldval.setAttribute is not a function

### Value correction and an extra property

The `products` proxy object evaluates the passed value and converts it to an array if needed. The object also supports an extra property called `latestBrowser` both as a getter and a setter.

    let products = new Proxy({
      browsers: ['Internet Explorer', 'Netscape']
    },
    {
      get: function(obj, prop) {
        // An extra property
        if (prop === 'latestBrowser') {
          return obj.browsers[obj.browsers.length - 1];
        }

        // The default behavior to return the value
        return obj[prop];
      },
      set: function(obj, prop, value) {
        // An extra property
        if (prop === 'latestBrowser') {
          obj.browsers.push(value);
          return true;
        }

        // Convert the value if it is not an array
        if (typeof value === 'string') {
          value = [value];
        }

        // The default behavior to store the value
        obj[prop] = value;

        // Indicate success
        return true;
      }
    });

    console.log(products.browsers);
    //  ['Internet Explorer', 'Netscape']

    products.browsers = 'Firefox';
    //  pass a string (by mistake)

    console.log(products.browsers);
    //  ['Firefox'] <- no problem, the value is an array

    products.latestBrowser = 'Chrome';

    console.log(products.browsers);
    //  ['Firefox', 'Chrome']

    console.log(products.latestBrowser);
    //  'Chrome'

### Finding an array item object by its property

This proxy extends an array with some utility features. As you see, you can flexibly "define" properties without using [`Object.defineProperties()`](object/defineproperties). This example can be adapted to find a table row by its cell. In that case, the target will be [`table.rows`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows).

    let products = new Proxy([
      { name: 'Firefox', type: 'browser' },
      { name: 'SeaMonkey', type: 'browser' },
      { name: 'Thunderbird', type: 'mailer' }
    ],
    {
      get: function(obj, prop) {
        // The default behavior to return the value; prop is usually an integer
        if (prop in obj) {
          return obj[prop];
        }

        // Get the number of products; an alias of products.length
        if (prop === 'number') {
          return obj.length;
        }

        let result, types = {};

        for (let product of obj) {
          if (product.name === prop) {
            result = product;
          }
          if (types[product.type]) {
            types[product.type].push(product);
          } else {
            types[product.type] = [product];
          }
        }

        // Get a product by name
        if (result) {
          return result;
        }

        // Get products by type
        if (prop in types) {
          return types[prop];
        }

        // Get product types
        if (prop === 'types') {
          return Object.keys(types);
        }

        return undefined;
      }
    });

    console.log(products[0]);          // { name: 'Firefox', type: 'browser' }
    console.log(products['Firefox']);  // { name: 'Firefox', type: 'browser' }
    console.log(products['Chrome']);   // undefined
    console.log(products.browser);     // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }]
    console.log(products.types);       // ['browser', 'mailer']
    console.log(products.number);      // 3

### A complete `traps` list example

Now in order to create a complete sample `traps` list, for didactic purposes, we will try to proxify a _non-native_ object that is particularly suited to this type of operation: the `docCookies` global object created by [the "little framework" published on the `document.cookie` page](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework).

    /*
      var docCookies = ... get the "docCookies" object here:
      https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
    */

    var docCookies = new Proxy(docCookies, {
      get: function (oTarget, sKey) {
        return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
      },
      set: function (oTarget, sKey, vValue) {
        if (sKey in oTarget) { return false; }
        return oTarget.setItem(sKey, vValue);
      },
      deleteProperty: function (oTarget, sKey) {
        if (!sKey in oTarget) { return false; }
        return oTarget.removeItem(sKey);
      },
      enumerate: function (oTarget, sKey) {
        return oTarget.keys();
      },
      ownKeys: function (oTarget, sKey) {
        return oTarget.keys();
      },
      has: function (oTarget, sKey) {
        return sKey in oTarget || oTarget.hasItem(sKey);
      },
      defineProperty: function (oTarget, sKey, oDesc) {
        if (oDesc && 'value' in oDesc) { oTarget.setItem(sKey, oDesc.value); }
        return oTarget;
      },
      getOwnPropertyDescriptor: function (oTarget, sKey) {
        var vValue = oTarget.getItem(sKey);
        return vValue ? {
          value: vValue,
          writable: true,
          enumerable: true,
          configurable: false
        } : undefined;
      },
    });

    /* Cookies test */

    console.log(docCookies.my_cookie1 = 'First value');
    console.log(docCookies.getItem('my_cookie1'));

    docCookies.setItem('my_cookie1', 'Changed value');
    console.log(docCookies.my_cookie1);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-proxy-objects">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Proxy' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Proxy`

49

12

18

No

36

10

49

49

18

36

10

5.0

`Proxy`

49

12

18

No

36

10

49

49

18

36

10

5.0

`revocable`

63

12

34

No

50

10

63

63

34

46

10

8.0

## See also

-   ["Proxies are awesome" Brendan Eich presentation at JSConf](https://www.youtube.com/watch?v=sClk6aB_CPk) ([slides](https://www.slideshare.net/BrendanEich/metaprog-5303821))
-   [ECMAScript Harmony Proxy proposal page](http://wiki.ecmascript.org/doku.php?id=harmony:proxies) and [ECMAScript Harmony proxy semantics page](http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics)
-   [Tutorial on proxies](https://web.archive.org/web/20171007221059/http://soft.vub.ac.be/~tvcutsem/proxies/)
-   [SpiderMonkey specific Old Proxy API](https://developer.mozilla.org/en-US/docs/JavaScript/Old_Proxy_API)
-   <span class="page-not-created">`Object.watch()`</span> is a non-standard feature, but has been supported in Gecko for a long time.

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy</a>

# Public class fields

**Note:** This page describes experimental features.

Both public and private field declarations are an [experimental feature (stage 3)](https://github.com/tc39/proposal-class-fields) proposed at [TC39](https://tc39.es/), the JavaScript standards committee.

Support in browsers is limited, but the feature can be used through a build step with systems like [Babel](https://babeljs.io/). See the [compat information](#browser_compatibility) below.

Both static and instance public fields are writable, enumerable, and configurable properties. As such, unlike their private counterparts, they participate in prototype inheritance.

## Syntax

    class ClassWithInstanceField {
      instanceField = 'instance field'
    }

    class ClassWithStaticField {
      static staticField = 'static field'
    }

    class ClassWithPublicInstanceMethod {
      publicMethod() {
        return 'hello world'
      }
    }

## Examples

### Public static fields

Public static fields are useful when you want a field to exist only once per class, not on every class instance you create. This is useful for caches, fixed-configuration, or any other data you don't need to be replicated across instances.

Public static fields are declared using the `static` keyword. They are added to the class constructor at the time of class evaluation using [`Object.defineProperty()`](../global_objects/object/defineproperty). They are accessed again from the class constructor.

    class ClassWithStaticField {
      static staticField = 'static field'
    }

    console.log(ClassWithStaticField.staticField)
    // expected output: "static field"

Fields without initializers are initialized to `undefined`.

    class ClassWithStaticField {
      static staticField
    }

    console.assert(ClassWithStaticField.hasOwnProperty('staticField'))
    console.log(ClassWithStaticField.staticField)
    // expected output: "undefined"

Public static fields are not reinitialized on subclasses, but can be accessed via the prototype chain.

    class ClassWithStaticField {
      static baseStaticField = 'base field'
    }

    class SubClassWithStaticField extends ClassWithStaticField {
      static subStaticField = 'sub class field'
    }

    console.log(SubClassWithStaticField.subStaticField)
    // expected output: "sub class field"

    console.log(SubClassWithStaticField.baseStaticField)
    // expected output: "base field"

When initializing fields, `this` refers to the class constructor. You can also reference it by name, and use `super` to get the superclass constructor (if one exists).

    class ClassWithStaticField {
      static baseStaticField = 'base static field'
      static anotherBaseStaticField = this.baseStaticField

      static baseStaticMethod() { return 'base static method output' }
    }

    class SubClassWithStaticField extends ClassWithStaticField {
      static subStaticField = super.baseStaticMethod()
    }

    console.log(ClassWithStaticField.anotherBaseStaticField)
    // expected output: "base static field"

    console.log(SubClassWithStaticField.subStaticField)
    // expected output: "base static method output"

### Public instance fields

Public instance fields exist on every created instance of a class. By declaring a public field, you can ensure the field is always present, and the class definition is more self-documenting.

Public instance fields are added with [`Object.defineProperty()`](../global_objects/object/defineproperty) either at construction time in the base class (before the constructor body runs), or just after `super()` returns in a subclass.

    class ClassWithInstanceField {
      instanceField = 'instance field'
    }

    const instance = new ClassWithInstanceField()
    console.log(instance.instanceField)
    // expected output: "instance field"

Fields without initializers are initialized to `undefined`.

    class ClassWithInstanceField {
      instanceField
    }

    const instance = new ClassWithInstanceField()
    console.assert(instance.hasOwnProperty('instanceField'))
    console.log(instance.instanceField)
    // expected output: "undefined"

Like properties, field names may be computed.

    const PREFIX = 'prefix'

    class ClassWithComputedFieldName {
        [`${PREFIX}Field`] = 'prefixed field'
    }

    const instance = new ClassWithComputedFieldName()
    console.log(instance.prefixField)
    // expected output: "prefixed field"

When initializing fields `this` refers to the class instance under construction. Just as in public instance methods, if you're in a subclass you can access the superclass prototype using `super`.

    class ClassWithInstanceField {
      baseInstanceField = 'base field'
      anotherBaseInstanceField = this.baseInstanceField
      baseInstanceMethod() { return 'base method output' }
    }

    class SubClassWithInstanceField extends ClassWithInstanceField {
      subInstanceField = super.baseInstanceMethod()
    }

    const base = new ClassWithInstanceField()
    const sub = new SubClassWithInstanceField()

    console.log(base.anotherBaseInstanceField)
    // expected output: "base field"

    console.log(sub.subInstanceField)
    // expected output: "base method output"

### Public methods

#### Public static methods

The `static` keyword defines a static method for a class. Static methods aren't called on instances of the class. Instead, they're called on the class itself. These are often utility functions, such as functions to create or clone objects.

    class ClassWithStaticMethod {
      static staticMethod() {
        return 'static method has been called.';
      }
    }

    console.log(ClassWithStaticMethod.staticMethod());
    // expected output: "static method has been called."

The static methods are added to the class constructor with [`Object.defineProperty()`](../global_objects/object/defineproperty) at class evaluation time. These methods are writable, non-enumerable, and configurable.

#### Public instance methods

As the name implies, public instance methods are methods available on class instances.

    class ClassWithPublicInstanceMethod {
      publicMethod() {
        return 'hello world'
      }
    }

    const instance = new ClassWithPublicInstanceMethod()
    console.log(instance.publicMethod())
    // expected output: "hello world"

Public instance methods are added to the class prototype at the time of class evaluation using [`Object.defineProperty()`](../global_objects/object/defineproperty). They are writable, non-enumerable, and configurable.

You may make use of generator, async, and async generator functions.

    class ClassWithFancyMethods {
      *generatorMethod() { }
      async asyncMethod() { }
      async *asyncGeneratorMethod() { }
    }

Inside instance methods, `this` refers to the instance itself. In subclasses, `super` lets you access the superclass prototype, allowing you to call methods from the superclass.

    class BaseClass {
      msg = 'hello world'
      basePublicMethod() {
        return this.msg
      }
    }

    class SubClass extends BaseClass {
      subPublicMethod() {
        return super.basePublicMethod()
      }
    }

    const instance = new SubClass()
    console.log(instance.subPublicMethod())
    // expected output: "hello world"

Getters and setters are special methods that bind to a class property and are called when that property is accessed or set. Use the [get](../functions/get) and [set](../functions/set) syntax to declare a public instance getter or setter.

    class ClassWithGetSet {
      #msg = 'hello world'
      get msg() {
        return this.#msg
      }
      set msg(x) {
        this.#msg = `hello ${x}`
      }
    }

    const instance = new ClassWithGetSet()
    console.log(instance.msg)
    // expected output: "hello world"

    instance.msg = 'cake'
    console.log(instance.msg)
    // expected output: "hello cake"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/proposal-class-fields/#prod-FieldDefinition">Public and private instance fields proposal (Public and private instance fields proposal) 
<br/>

<span class="small">#prod-FieldDefinition</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Public_class_fields`

72

79

69

No

60

14.1

14-14.1

Doesn't support public static fields. See WebKit bug [194095](https://webkit.org/b/194095).

72

72

79

51

14.5

14-14.5

Doesn't support public static fields. See WebKit bug [194095](https://webkit.org/b/194095).

No

## See also

-   [Public and private class fields](https://v8.dev/features/class-fields) article at the v8.dev site.
-   [Class field declarations for JavaScript](https://github.com/tc39/proposal-class-fields#class-field-declarations-for-javascript) explainer, by the [Public and private instance fields](https://github.com/tc39/proposal-class-fields) authors
-   [The Semantics of All JS Class Elements](https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields</a>

# Array.prototype.push()

The `push()` method adds one or more elements to the end of an array and returns the new length of the array.

## Syntax

    push(element0)
    push(element0, element1)
    push(element0, element1, ... , elementN)

### Parameters

`elementN`  
The element(s) to add to the end of the array.

### Return value

The new [`length`](length) property of the object upon which the method was called.

## Description

The `push` method appends values to an array.

`push` is intentionally generic. This method can be used with [`call()`](../function/call) or [`apply()`](../function/apply) on objects resembling arrays. The `push` method relies on a `length` property to determine where to start inserting the given values. If the `length` property cannot be converted into a number, the index used is 0. This includes the possibility of `length` being nonexistent, in which case `length` will also be created.

Although [strings](../string) are native, Array-like objects, they are not suitable in applications of this method, as strings are immutable. Similarly for the native, Array-like object [arguments](../../functions/arguments).

## Examples

### Adding elements to an array

The following code creates the `sports` array containing two elements, then appends two elements to it. The `total` variable contains the new length of the array.

    let sports = ['soccer', 'baseball']
    let total = sports.push('football', 'swimming')

    console.log(sports)  // ['soccer', 'baseball', 'football', 'swimming']
    console.log(total)   // 4

### Merging two arrays

This example uses [`apply()`](../function/apply) to push all elements from a second array.

Do _not_ use this method if the second array (`moreVegs` in the example) is very large because the maximum number of parameters that one function can take is limited in practice. See [`apply()`](../function/apply) for more details.

    let vegetables = ['parsnip', 'potato']
    let moreVegs = ['celery', 'beetroot']

    // Merge the second array into the first one
    // Equivalent to vegetables.push('celery', 'beetroot')
    Array.prototype.push.apply(vegetables, moreVegs)

    console.log(vegetables)  // ['parsnip', 'potato', 'celery', 'beetroot']

### Using an object in an array-like fashion

As mentioned above, `push` is intentionally generic, and we can use that to our advantage. `Array.prototype.push` can work on an object just fine, as this example shows.

Note that we don't create an array to store a collection of objects. Instead, we store the collection on the object itself and use `call` on `Array.prototype.push` to trick the method into thinking we are dealing with an array—and it just works, thanks to the way JavaScript allows us to establish the execution context in any way we want.

    let obj = {
        length: 0,

        addElem: function addElem(elem) {
            // obj.length is automatically incremented
            // every time an element is added.
            [].push.call(this, elem)
        }
    }

    // Let's add some empty objects just to illustrate.
    obj.addElem({})
    obj.addElem({})
    console.log(obj.length)
    // → 2

Note that although `obj` is not an array, the method `push` successfully incremented `obj`'s `length` property just like if we were dealing with an actual array.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.push">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.push</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`push`

1

12

1

5.5

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Array.prototype.pop()`](pop)
-   [`Array.prototype.shift()`](shift)
-   [`Array.prototype.unshift()`](unshift)
-   [`Array.prototype.concat()`](concat)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push</a>

# Promise.race()

The `Promise.race()` method returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise.

## Syntax

    Promise.race(iterable);

### Parameters

`iterable`  
An iterable object, such as an [`Array`](../array). See [iterable](../../iteration_protocols#the_iterable_protocol).

### Return value

A **pending** [`Promise`](../promise) that **asynchronously** yields the value of the first promise in the given iterable to fulfill or reject.

## Description

The `race` function returns a `Promise` that is settled the same way (and takes the same value) as the first promise that settles amongst the promises of the iterable passed as an argument.

If the iterable passed is empty, the promise returned will be forever pending.

If the iterable contains one or more non-promise value and/or an already settled promise, then `Promise.race` will resolve to the first of these values found in the iterable.

## Examples

### Asynchronicity of Promise.race

This following example demonstrates the asynchronicity of `Promise.race`:

    // we are passing as argument an array of promises that are already resolved,
    // to trigger Promise.race as soon as possible
    var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];

    var p = Promise.race(resolvedPromisesArray);
    // immediately logging the value of p
    console.log(p);

    // using setTimeout we can execute code after the stack is empty
    setTimeout(function(){
        console.log('the stack is now empty');
        console.log(p);
    });

    // logs, in order:
    // Promise { <state>: "pending" }
    // the stack is now empty
    // Promise { <state>: "fulfilled", <value>: 33 }

An empty iterable causes the returned promise to be forever pending:

    var foreverPendingPromise = Promise.race([]);
    console.log(foreverPendingPromise);
    setTimeout(function(){
        console.log('the stack is now empty');
        console.log(foreverPendingPromise);
    });

    // logs, in order:
    // Promise { <state>: "pending" }
    // the stack is now empty
    // Promise { <state>: "pending" }

If the iterable contains one or more non-promise value and/or an already settled promise, then `Promise.race` will resolve to the first of these values found in the array:

    var foreverPendingPromise = Promise.race([]);
    var alreadyFulfilledProm = Promise.resolve(100);

    var arr = [foreverPendingPromise, alreadyFulfilledProm, "non-Promise value"];
    var arr2 = [foreverPendingPromise, "non-Promise value", Promise.resolve(100)];
    var p = Promise.race(arr);
    var p2 = Promise.race(arr2);

    console.log(p);
    console.log(p2);
    setTimeout(function(){
        console.log('the stack is now empty');
        console.log(p);
        console.log(p2);
    });

    // logs, in order:
    // Promise { <state>: "pending" }
    // Promise { <state>: "pending" }
    // the stack is now empty
    // Promise { <state>: "fulfilled", <value>: 100 }
    // Promise { <state>: "fulfilled", <value>: "non-Promise value" }

### Using Promise.race – examples with setTimeout

    var p1 = new Promise(function(resolve, reject) {
        setTimeout(() => resolve('one'), 500);
    });
    var p2 = new Promise(function(resolve, reject) {
        setTimeout(() => resolve('two'), 100);
    });

    Promise.race([p1, p2])
    .then(function(value) {
      console.log(value); // "two"
      // Both fulfill, but p2 is faster
    });

    var p3 = new Promise(function(resolve, reject) {
        setTimeout(() => resolve('three'), 100);
    });
    var p4 = new Promise(function(resolve, reject) {
        setTimeout(() => reject(new Error('four')), 500);
    });

    Promise.race([p3, p4])
    .then(function(value) {
      console.log(value); // "three"
      // p3 is faster, so it fulfills
    }, function(error) {
      // Not called
    });

    var p5 = new Promise(function(resolve, reject) {
        setTimeout(() => resolve('five'), 500);
    });
    var p6 = new Promise(function(resolve, reject) {
        setTimeout(() => reject(new Error('six')), 100);
    });

    Promise.race([p5, p6])
    .then(function(value) {
      // Not called
    }, function(error) {
      console.log(error.message); // "six"
      // p6 is faster, so it rejects
    });

### Comparison with Promise.any

`Promise.race` takes the first settled [`Promise`](../promise).

    const promise1 = new Promise((resolve, reject) => {
      setTimeout(resolve, 500, 'one');
    });

    const promise2 = new Promise((resolve, reject) => {
      setTimeout(reject, 100, 'two');
    });

    Promise.race([promise1, promise2]).then((value) => {
      console.log('succeeded with value:', value);
    }).catch((reason) => {
      // Only promise1 is fulfilled, but promise2 is faster
      console.log('failed with reason:', reason);
    });
    // expected output: "failed with reason: two"

[`Promise.any`](any) takes the first fulfilled [`Promise`](../promise).

    const promise1 = new Promise((resolve, reject) => {
      setTimeout(resolve, 500, 'one');
    });

    const promise2 = new Promise((resolve, reject) => {
      setTimeout(reject, 100, 'two');
    });

    Promise.any([promise1, promise2]).then((value) => {
      // Only promise1 is fulfilled, even though promise2 settled sooner
      console.log('succeeded with value:', value);
    }).catch((reason) => {
      console.log('failed with reason:', reason);
    });
    // expected output: "succeeded with value: one"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-promise.race">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-promise.race</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`race`

32

12

29

No

19

8

4.4.3

32

29

19

8

2.0

## See also

-   [`Promise`](../promise)
-   [`Promise.all()`](all)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race</a>

# Math.random()

The `Math.random()` function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range. The implementation selects the initial seed to the random number generation algorithm; it cannot be chosen or reset by the user.

**Note:** `Math.random()` _does not_ provide cryptographically secure random numbers. Do not use them for anything related to security. Use the Web Crypto API instead, and more precisely the [`window.crypto.getRandomValues()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues) method.

## Syntax

    Math.random()

### Return value

A floating-point, pseudo-random number between `0` (inclusive) and 1 (exclusive).

## Examples

Note that as numbers in JavaScript are IEEE 754 floating point numbers with round-to-nearest-even behavior, the ranges claimed for the functions below (excluding the one for `Math.random()` itself) aren't exact. If extremely large bounds are chosen (2<sup>53</sup> or higher), it's possible in _extremely_ rare cases to calculate the usually-excluded upper bound.

### Getting a random number between 0 (inclusive) and 1 (exclusive)

    function getRandom() {
      return Math.random();
    }

### Getting a random number between two values

This example returns a random number between the specified values. The returned value is no lower than (and may possibly equal) `min`, and is less than (and not equal) `max`.

    function getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min;
    }

### Getting a random integer between two values

This example returns a random _integer_ between the specified values. The value is no lower than `min` (or the next integer greater than `min` if `min` isn't an integer), and is less than (but not equal to) `max`.

    function getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
    }

**Note:** It might be tempting to use `Math.round()` to accomplish that, but doing so would cause your random numbers to follow a non-uniform distribution, which may not be acceptable for your needs.

### Getting a random integer between two values, inclusive

While the `getRandomInt()` function above is inclusive at the minimum, it's exclusive at the maximum. What if you need the results to be inclusive at both the minimum and the maximum? The `getRandomIntInclusive()` function below accomplishes that.

    function getRandomIntInclusive(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.random">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Math.random' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`random`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`window.crypto.getRandomValues()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random</a>

# RangeError

The `RangeError` object indicates an error when a value is not in the set or range of allowed values.

## Description

A `RangeError` is thrown when trying to pass a value as an argument to a function that does not allow a range that includes the value.

This can be encountered when:

-   passing a value that is not one of the allowed string values to [`String.prototype.normalize()`](string/normalize), or
-   when attempting to create an array of an illegal length with the [`Array`](array) constructor, or
-   when passing bad values to the numeric methods [`Number.prototype.toExponential()`](number/toexponential), [`Number.prototype.toFixed()`](number/tofixed) or [`Number.prototype.toPrecision()`](number/toprecision).

## Constructor

[`RangeError()`](rangeerror/rangeerror)  
Creates a new `RangeError` object.

## Instance properties

[`RangeError.prototype.message`](error/message)  
Error message. Although ECMA-262 specifies that [`RangeError`](rangeerror) should provide its own `message` property, in [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), it inherits [`Error.prototype.message`](error/message).

[`RangeError.prototype.name`](error/name)  
Error name. Inherited from [`Error`](error).

[`RangeError.prototype.fileName`](error/filename)  
Path to file that raised this error. Inherited from [`Error`](error).

[`RangeError.prototype.lineNumber`](error/linenumber)  
Line number in file that raised this error. Inherited from [`Error`](error).

[`RangeError.prototype.columnNumber`](error/columnnumber)  
Column number in line that raised this error. Inherited from [`Error`](error).

[`RangeError.prototype.stack`](error/stack)  
Stack trace. Inherited from [`Error`](error).

## Examples

### Using RangeError (for numeric values)

    function check(n)
    {
        if( !(n >= -500 && n <= 500) )
        {
            throw new RangeError("The argument must be between -500 and 500.")
        }
    }

    try
    {
        check(2000)
    }
    catch(error)
    {
        if (error instanceof RangeError)
        {
            // Handle the error
        }
    }

### Using RangeError (for non-numeric values)

    function check(value)
    {
        if(["apple", "banana", "carrot"].includes(value) === false)
        {
            throw new RangeError('The argument must be an "apple", "banana", or "carrot".')
        }
    }

    try
    {
        check("cabbage")
    }
    catch(error)
    {
        if(error instanceof RangeError)
        {
            // Handle the error
        }
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-rangeerror">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-native-error-types-used-in-this-standard-rangeerror</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`RangeError`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`RangeError`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

## See also

-   [`Error`](error)
-   [`Array`](array)
-   [`Number.toExponential()`](number/toexponential)
-   [`Number.toFixed()`](number/tofixed)
-   [`Number.toPrecision()`](number/toprecision)
-   [`String.prototype.normalize()`](string/normalize)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError</a>

# String.raw()

The static `String.raw()` method is a tag function of [template literals](../../template_literals). This is _similar_ to the `r` prefix in Python, or the `@` prefix in C\# for string literals. (But it is not _identical_; see explanations in [this issue](https://bugs.chromium.org/p/v8/issues/detail?id=5016).) It's used to get the raw string form of template literals, that is, substitutions (e.g. `${foo}`) are processed, but escapes (e.g. `\n`) are not.

## Syntax

    String.raw(callSite, ...substitutions)

    String.raw`templateString`

### Parameters

`callSite`  
Well-formed template call site object, like `{ raw: ['foo', 'bar', 'baz'] }`.

`...substitutions`  
Contains substitution values.

`templateString`  
A [template literal](../../template_literals), optionally with substitutions (`${...}`).

### Return value

The raw string form of a given template literal.

### Exceptions

[`TypeError`](../typeerror)  
A [`TypeError`](../typeerror) is thrown if the first argument is not a well-formed object.

## Description

In most cases, `String.raw()` is used with template literal. The first syntax mentioned above is only rarely used, because the JavaScript engine will call this with proper arguments for you, (just like with other [tag functions](../../template_literals#tagged_template_literals)).

`String.raw()` is the only built-in tag function of template literals. It works just like the default template function and performs concatenation. You can even re-implement it with normal JavaScript code.

## Examples

### Using String.raw()

    String.raw`Hi\n${2+3}!`;
    // 'Hi\n5!', the character after 'Hi'
    // is not a newline character,
    // '\' and 'n' are two characters.

    String.raw`Hi\u000A!`;
    // 'Hi\u000A!', same here, this time we will get the
    //  \, u, 0, 0, 0, A, 6 characters.
    // All kinds of escape characters will be ineffective
    // and backslashes will be present in the output string.
    // You can confirm this by checking the .length property
    // of the string.

    let name = 'Bob';
    String.raw`Hi\n${name}!`;
    // 'Hi\nBob!', substitutions are processed.

    // Normally you would not call String.raw() as a function,
    // but to simulate `foo${2 + 3}bar${'Java' + 'Script'}baz` you can do:
    String.raw({
      raw: ['foo', 'bar', 'baz']
    }, 2 + 3, 'Java' + 'Script'); // 'foo5barJavaScriptbaz'
    // Notice the first argument is an object with a 'raw' property,
    // whose value is an iterable representing the separated strings
    // in the template literal.
    // The rest of the arguments are the substitutions.

    // The first argument's 'raw' value can be any iterable, even a string!
    // For example, 'test' is treated as ['t', 'e', 's', 't'].
    // The following is equivalent to
    // `t${0}e${1}s${2}t`:
    String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.raw">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.raw</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`raw`

41

12

34

No

No

10

No

41

34

No

10

4.0

## See also

-   [Template literals](../../template_literals)
-   [`String`](../string)
-   [Lexical grammar](../../lexical_grammar)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw</a>

# TypeError: "x" is read-only

The JavaScript [strict mode](../strict_mode)-only exception "is read-only" occurs when a global variable or object property that was assigned to is a read-only property.

## Message

    TypeError: Assignment to read-only properties is not allowed in strict mode (Edge)
    TypeError: "x" is read-only (Firefox)
    TypeError: 0 is read-only (Firefox)
    TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome)
    TypeError: Cannot assign to read only property '0' of [object Array] (Chrome)

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

The global variable or object property that was assigned to is a read-only property. (Technically, it is a [non-writable data property](../global_objects/object/defineproperty#writable_attribute).)

This error happens only in [strict mode code](../strict_mode). In non-strict code, the assignment is silently ignored.

## Examples

### Invalid cases

Read-only properties are not super common, but they can be created using [`Object.defineProperty()`](../global_objects/object/defineproperty) or [`Object.freeze()`](../global_objects/object/freeze).

    'use strict';
    var obj = Object.freeze({name: 'Elsa', score: 157});
    obj.score = 0;  // TypeError

    'use strict';
    Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false});
    LUNG_COUNT = 3;  // TypeError

    'use strict';
    var frozenArray = Object.freeze([0, 1, 2]);
    frozenArray[0]++;  // TypeError

There are also a few read-only properties built into JavaScript. Maybe you tried to redefine a mathematical constant.

    'use strict';
    Math.PI = 4;  // TypeError

Sorry, you can't do that.

The global variable `undefined` is also read-only, so you can't silence the infamous "undefined is not a function" error by doing this:

    'use strict';
    undefined = function() {};  // TypeError: "undefined" is read-only

### Valid cases

    'use strict';
    var obj = Object.freeze({name: 'Score', points: 157});
    obj = {name: obj.name, points: 0};   // replacing it with a new object works

    'use strict';
    var LUNG_COUNT = 2;  // a `var` works, because it's not read-only
    LUNG_COUNT = 3;  // ok (anatomically unlikely, though)

## See also

-   [`Object.defineProperty()`](../global_objects/object/defineproperty)
-   [`Object.freeze()`](../global_objects/object/freeze)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Read-only" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Read-only</a>

# SyntaxError: redeclaration of formal parameter "x"

The JavaScript exception "redeclaration of formal parameter" occurs when the same variable name occurs as a function parameter and is then redeclared using a [`let`](../statements/let) assignment in a function body again.

## Message

    SyntaxError: Let/Const redeclaration (Edge)
    SyntaxError: redeclaration of formal parameter "x" (Firefox)
    SyntaxError: Identifier "x" has already been declared (Chrome)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

The same variable name occurs as a function parameter and is then redeclared using a [`let`](../statements/let) assignment in a function body again. Redeclaring the same variable within the same function or block scope using `let` is not allowed in JavaScript.

## Examples

### Redeclared argument

In this case, the variable "arg" redeclares the argument.

    function f(arg) {
      let arg = 'foo';
    }

    // SyntaxError: redeclaration of formal parameter "arg"

If you want to change the value of "arg" in the function body, you can do so, but you do not need to declare the same variable again. In other words: you can omit the `let` keyword. If you want to create a new variable, you need to rename it as conflicts with the function parameter already.

    function f(arg) {
      arg = 'foo';
    }

    function f(arg) {
      let bar = 'foo';
    }

## See also

-   [`let`](../statements/let)
-   [`const`](../statements/const)
-   [`var`](../statements/var)
-   [Declaring variables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#declarations) in the [JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter</a>

# Array.prototype.reduce()

The `reduce()` method executes a **reducer** function (that you provide) on each element of the array, resulting in a single output value.

The **reducer** function takes four arguments:

1.  Accumulator
2.  Current Value
3.  Current Index
4.  Source Array

Your **reducer** function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value.

## Syntax

    // Arrow function
    reduce((accumulator, currentValue) => { ... } )
    reduce((accumulator, currentValue, index) => { ... } )
    reduce((accumulator, currentValue, index, array) => { ... } )
    reduce((accumulator, currentValue, index, array) => { ... }, initialValue)

    // Reducer function
    reduce(reducerFn)
    reduce(reducerFn, initialValue)

    // Inline reducer function
    reduce(function reducerFn(accumulator, currentValue) { ... })
    reduce(function reducerFn(accumulator, currentValue, index) { ... })
    reduce(function reducerFn(accumulator, currentValue, index, array){ ... })
    reduce(function reducerFn(accumulator, currentValue, index, array) { ... }, initialValue)

### Parameters

`callback`  
A function to execute on each element in the array (except for the first, if no `initialValue` is supplied).

It takes four arguments:

`accumulator`  
The accumulator accumulates callback's return values. It is the accumulated value previously returned in the last invocation of the callback—or `initialValue`, if it was supplied (see below).

`currentValue`  
The current element being processed in the array.

`index` <span class="badge inline optional">Optional</span>  
The index of the current element being processed in the array. Starts from index `0` if an `initialValue` is provided. Otherwise, it starts from index `1`.

`array` <span class="badge inline optional">Optional</span>  
The array `reduce()` was called upon.

`initialValue` <span class="badge inline optional">Optional</span>  
A value to use as the first argument to the first call of the `callback`. If no `initialValue` is supplied, the first element in the array will be used as the initial `accumulator` value and skipped as `currentValue`. Calling `reduce()` on an empty array without an `initialValue` will throw a [`TypeError`](../typeerror).

### Return value

The single value that results from the reduction.

## Description

The `reduce()` method executes the `callback` once for each assigned value present in the array, taking four arguments:

1.  `accumulator`
2.  `currentValue`
3.  `currentIndex`
4.  `array`

The first time the callback is called, `accumulator` and `currentValue` can be one of two values. If `initialValue` is provided in the call to `reduce()`, then `accumulator` will be equal to `initialValue`, and `currentValue` will be equal to the first value in the array. If no `initialValue` is provided, then `accumulator` will be equal to the first value in the array, and `currentValue` will be equal to the second.

**Note:** If `initialValue` is not provided, `reduce()` will execute the callback function starting at index `1`, skipping the first index. If `initialValue` is provided, it will start at index `0`.

If the array is empty and no `initialValue` is provided, [`TypeError`](../typeerror) will be thrown.

If the array only has one element (regardless of position) and no `initialValue` is provided, or if `initialValue` is provided but the array is empty, the solo value will be returned _without_ calling _`callback`._

It is almost always safer to provide an `initialValue`, because there can be up to _four_ possible output types without `initialValue`, as shown in the following example:

    let maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
    let maxCallback2 = ( max, cur ) => Math.max( max, cur );

    // reduce without initialValue
    [ { x: 2 }, { x: 22 }, { x: 42 } ].reduce( maxCallback ); // NaN
    [ { x: 2 }, { x: 22 }            ].reduce( maxCallback ); // 22
    [ { x: 2 }                       ].reduce( maxCallback ); // { x: 2 }
    [                                ].reduce( maxCallback ); // TypeError

    // map & reduce with initialValue; better solution, also works for empty or larger arrays
    [ { x: 22 }, { x: 42 } ].map( el => el.x )
                            .reduce( maxCallback2, -Infinity );

### How reduce() works

Suppose the following use of `reduce()` occurred:

    [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
      return accumulator + currentValue
    })

The callback would be invoked four times, with the arguments and return values in each call being as follows:

<table><thead><tr class="header"><th><code>callback</code> iteration</th><th><code>accumulator</code></th><th><code>currentValue</code></th><th><code>currentIndex</code></th><th><code>array</code></th><th>return value</th></tr></thead><tbody><tr class="odd"><td>first call</td><td><code>0</code></td><td><code>1</code></td><td><code>1</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>1</code></td></tr><tr class="even"><td>second call</td><td><code>1</code></td><td><code>2</code></td><td><code>2</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>3</code></td></tr><tr class="odd"><td>third call</td><td><code>3</code></td><td><code>3</code></td><td><code>3</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>6</code></td></tr><tr class="even"><td>fourth call</td><td><code>6</code></td><td><code>4</code></td><td><code>4</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>10</code></td></tr></tbody></table>

The value returned by `reduce()` would be that of the last callback invocation (`10`).

You can also provide an [Arrow Function](../../functions/arrow_functions) instead of a full function. The code below will produce the same output as the code in the block above:

    [0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) => accumulator + currentValue )

If you were to provide an `initialValue` as the second argument to `reduce()`, the result would look like this:

    [0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
        return accumulator + currentValue
    }, 10)

<table><thead><tr class="header"><th><code>callback</code> iteration</th><th><code>accumulator</code></th><th><code>currentValue</code></th><th><code>currentIndex</code></th><th><code>array</code></th><th>return value</th></tr></thead><tbody><tr class="odd"><td>first call</td><td><code>10</code></td><td><code>0</code></td><td><code>0</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>10</code></td></tr><tr class="even"><td>second call</td><td><code>10</code></td><td><code>1</code></td><td><code>1</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>11</code></td></tr><tr class="odd"><td>third call</td><td><code>11</code></td><td><code>2</code></td><td><code>2</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>13</code></td></tr><tr class="even"><td>fourth call</td><td><code>13</code></td><td><code>3</code></td><td><code>3</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>16</code></td></tr><tr class="odd"><td>fifth call</td><td><code>16</code></td><td><code>4</code></td><td><code>4</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>20</code></td></tr></tbody></table>

The value returned by `reduce()` in this case would be `20`.

## Polyfill

    // Production steps of ECMA-262, Edition 5, 15.4.4.21
    // Reference: https://es5.github.io/#x15.4.4.21
    // https://tc39.github.io/ecma262/#sec-array.prototype.reduce
    if (!Array.prototype.reduce) {
      Object.defineProperty(Array.prototype, 'reduce', {
        value: function(callback /*, initialValue*/) {
          if (this === null) {
            throw new TypeError( 'Array.prototype.reduce ' +
              'called on null or undefined' );
          }
          if (typeof callback !== 'function') {
            throw new TypeError( callback +
              ' is not a function');
          }

          // 1. Let O be ? ToObject(this value).
          var o = Object(this);

          // 2. Let len be ? ToLength(? Get(O, "length")).
          var len = o.length >>> 0;

          // Steps 3, 4, 5, 6, 7
          var k = 0;
          var value;

          if (arguments.length >= 2) {
            value = arguments[1];
          } else {
            while (k < len && !(k in o)) {
              k++;
            }

            // 3. If len is 0 and initialValue is not present,
            //    throw a TypeError exception.
            if (k >= len) {
              throw new TypeError( 'Reduce of empty array ' +
                'with no initial value' );
            }
            value = o[k++];
          }

          // 8. Repeat, while k < len
          while (k < len) {
            // a. Let Pk be ! ToString(k).
            // b. Let kPresent be ? HasProperty(O, Pk).
            // c. If kPresent is true, then
            //    i.  Let kValue be ? Get(O, Pk).
            //    ii. Let accumulator be ? Call(
            //          callbackfn, undefined,
            //          « accumulator, kValue, k, O »).
            if (k in o) {
              value = callback(value, o[k], k, o);
            }

            // d. Increase k by 1.
            k++;
          }

          // 9. Return accumulator.
          return value;
        }
      });
    }

**Note:** If you need to support truly obsolete JavaScript engines that do not support [`Object.defineProperty()`](../object/defineproperty), it is best not to polyfill `Array.prototype` methods at all, as you cannot make them **non-enumerable**.

## Examples

### Sum all the values of an array

    let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
      return accumulator + currentValue
    }, 0)
    // sum is 6

Alternatively written with an arrow function:

    let total = [ 0, 1, 2, 3 ].reduce(
      ( accumulator, currentValue ) => accumulator + currentValue,
      0
    )

### Sum of values in an object array

To sum up the values contained in an array of objects, you **must** supply an `initialValue`, so that each item passes through your function.

    let initialValue = 0
    let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(function (accumulator, currentValue) {
        return accumulator + currentValue.x
    }, initialValue)

    console.log(sum) // logs 6

Alternatively written with an arrow function:

    let initialValue = 0
    let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(
        (accumulator, currentValue) => accumulator + currentValue.x
        , initialValue
    )

    console.log(sum) // logs 6

### Flatten an array of arrays

    let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
      function(accumulator, currentValue) {
        return accumulator.concat(currentValue)
      },
      []
    )
    // flattened is [0, 1, 2, 3, 4, 5]

Alternatively written with an arrow function:

    let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
      ( accumulator, currentValue ) => accumulator.concat(currentValue),
      []
    )

### Counting instances of values in an object

    let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']

    let countedNames = names.reduce(function (allNames, name) {
      if (name in allNames) {
        allNames[name]++
      }
      else {
        allNames[name] = 1
      }
      return allNames
    }, {})
    // countedNames is:
    // { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

### Grouping objects by a property

    let people = [
      { name: 'Alice', age: 21 },
      { name: 'Max', age: 20 },
      { name: 'Jane', age: 20 }
    ];

    function groupBy(objectArray, property) {
      return objectArray.reduce(function (acc, obj) {
        let key = obj[property]
        if (!acc[key]) {
          acc[key] = []
        }
        acc[key].push(obj)
        return acc
      }, {})
    }

    let groupedPeople = groupBy(people, 'age')
    // groupedPeople is:
    // {
    //   20: [
    //     { name: 'Max', age: 20 },
    //     { name: 'Jane', age: 20 }
    //   ],
    //   21: [{ name: 'Alice', age: 21 }]
    // }

### Bonding arrays contained in an array of objects using the spread operator and initialValue

    // friends - an array of objects
    // where object field "books" is a list of favorite books
    let friends = [{
      name: 'Anna',
      books: ['Bible', 'Harry Potter'],
      age: 21
    }, {
      name: 'Bob',
      books: ['War and peace', 'Romeo and Juliet'],
      age: 26
    }, {
      name: 'Alice',
      books: ['The Lord of the Rings', 'The Shining'],
      age: 18
    }]

    // allbooks - list which will contain all friends' books +
    // additional list contained in initialValue
    let allbooks = friends.reduce(function(accumulator, currentValue) {
      return [...accumulator, ...currentValue.books]
    }, ['Alphabet'])

    // allbooks = [
    //   'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
    //   'Romeo and Juliet', 'The Lord of the Rings',
    //   'The Shining'
    // ]

### Remove duplicate items in an array

**Note:** If you are using an environment compatible with [`Set`](../set) and [`Array.from()`](from), you could use `let orderedArray = Array.from(new Set(myArray))` to get an array where duplicate items have been removed.

    let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
    let myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
      if (accumulator.indexOf(currentValue) === -1) {
        accumulator.push(currentValue)
      }
      return accumulator
    }, [])

    console.log(myOrderedArray)

### Replace .filter().map() with .reduce()

Using [`Array.filter()`](filter) then [`Array.map()`](map) traverses the array twice, but you can achieve the same effect while traversing only once with [`Array.reduce()`](reduce), thereby being more efficient. (If you like for loops, you can filter and map while traversing once with [`Array.forEach()`](foreach)).

    const numbers = [-5, 6, 2, 0,];

    const doubledPositiveNumbers = numbers.reduce((accumulator, currentValue) => {
      if (currentValue > 0) {
        const doubled = currentValue * 2;
        accumulator.push(doubled);
      }
      return accumulator;
    }, []);

    console.log(doubledPositiveNumbers); // [12, 4]

### Running Promises in Sequence

    /**
     * Runs promises from array of functions that can return promises
     * in chained manner
     *
     * @param {array} arr - promise arr
     * @return {Object} promise object
     */
    function runPromiseInSequence(arr, input) {
      return arr.reduce(
        (promiseChain, currentFunction) => promiseChain.then(currentFunction),
        Promise.resolve(input)
      )
    }

    // promise function 1
    function p1(a) {
      return new Promise((resolve, reject) => {
        resolve(a * 5)
      })
    }

    // promise function 2
    function p2(a) {
      return new Promise((resolve, reject) => {
        resolve(a * 2)
      })
    }

    // function 3  - will be wrapped in a resolved promise by .then()
    function f3(a) {
     return a * 3
    }

    // promise function 4
    function p4(a) {
      return new Promise((resolve, reject) => {
        resolve(a * 4)
      })
    }

    const promiseArr = [p1, p2, f3, p4]
    runPromiseInSequence(promiseArr, 10)
      .then(console.log)   // 1200

### Function composition enabling piping

    // Building-blocks to use for composition
    const double = x => x + x
    const triple = x => 3 * x
    const quadruple = x => 4 * x

    // Function composition enabling pipe functionality
    const pipe = (...functions) => input => functions.reduce(
        (acc, fn) => fn(acc),
        input
    )

    // Composed functions for multiplication of specific values
    const multiply6 = pipe(double, triple)
    const multiply9 = pipe(triple, triple)
    const multiply16 = pipe(quadruple, quadruple)
    const multiply24 = pipe(double, triple, quadruple)

    // Usage
    multiply6(6)   // 36
    multiply9(9)   // 81
    multiply16(16) // 256
    multiply24(10) // 240

### Write map using reduce

    if (!Array.prototype.mapUsingReduce) {
      Array.prototype.mapUsingReduce = function(callback, initialValue) {
        return this.reduce(function(mappedArray, currentValue, index, array) {
          mappedArray[index] = callback.call(initialValue, currentValue, index, array)
          return mappedArray
        }, [])
      }
    }

    [1, 2, , 3].mapUsingReduce(
      (currentValue, index, array) => currentValue + index + array.length
    ) // [5, 7, , 10]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.reduce">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Array.prototype.reduce()' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Reduce`

3

12

3

9

10.5

5

≤37

18

4

14

4

1.0

## See also

-   [`Array.prototype.reduceRight()`](reduceright)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce</a>

# TypeError: Reduce of empty array with no initial value

The JavaScript exception "reduce of empty array with no initial value" occurs when a reduce function is used.

## Message

    TypeError: reduce of empty array with no initial value

## Error type

[`TypeError`](../global_objects/typeerror)

## What went wrong?

In JavaScript, there are several reduce functions:

-   [`Array.prototype.reduce()`](../global_objects/array/reduce), [`Array.prototype.reduceRight()`](../global_objects/array/reduceright) and
-   [`TypedArray.prototype.reduce()`](../global_objects/typedarray/reduce), [`TypedArray.prototype.reduceRight()`](../global_objects/typedarray/reduceright)).

These functions optionally take an `initialValue` (which will be used as the first argument to the first call of the `callback`). However, if no initial value is provided, it will use the first element of the [`Array`](../global_objects/array) or [`TypedArray`](../global_objects/typedarray) as the initial value. This error is raised when an empty array is provided because no initial value can be returned in that case.

## Examples

### Invalid cases

This problem appears frequently when combined with a filter ([`Array.prototype.filter()`](../global_objects/array/filter), [`TypedArray.prototype.filter()`](../global_objects/typedarray/filter)) which will remove all elements of the list. Thus leaving none to be used as the initial value.

    var ints = [0, -1, -2, -3, -4, -5];
    ints.filter(x => x > 0)         // removes all elements
        .reduce((x, y) => x + y)    // no more elements to use for the initial value.

Similarly, the same issue can happen if there is a typo in a selector, or an unexpected number of elements in a list:

    var names = document.getElementsByClassName("names");
    var name_list = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);

### Valid cases

These problems can be solved in two different ways.

One way is to actually provide an `initialValue` as the neutral element of the operator, such as 0 for the addition, 1 for a multiplication, or an empty string for a concatenation.

    var ints = [0, -1, -2, -3, -4, -5];
    ints.filter(x => x > 0)         // removes all elements
        .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition

Another way would be to handle the empty case, either before calling `reduce`, or in the callback after adding an unexpected dummy initial value.

    var names = document.getElementsByClassName("names");

    var name_list1 = "";
    if (names1.length >= 1)
      name_list1 = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
    // name_list1 == "" when names is empty.

    var name_list2 = Array.prototype.reduce.call(names, (acc, name) => {
      if (acc == "") // initial value
        return name;
      return acc + ", " + name;
    }, "");
    // name_list2 == "" when names is empty.

## See also

-   [`Array.prototype.reduce()`](../global_objects/array/reduce)
-   [`Array.prototype.reduceRight()`](../global_objects/array/reduceright)
-   [`TypedArray.prototype.reduce()`](../global_objects/typedarray/reduce)
-   [`TypedArray.prototype.reduceRight()`](../global_objects/typedarray/reduceright)
-   [`Array`](../global_objects/array)
-   [`TypedArray`](../global_objects/typedarray)
-   [`Array.prototype.filter()`](../global_objects/array/filter)
-   [`TypedArray.prototype.filter()`](../global_objects/typedarray/filter)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value</a>

# Array.prototype.reduceRight()

The `reduceRight()` method applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.

See also [`Array.prototype.reduce()`](reduce) for left-to-right.

## Syntax

    // Arrow function
    reduceRight((accumulator, currentValue) => { ... } )
    reduceRight((accumulator, currentValue, index) => { ... } )
    reduceRight((accumulator, currentValue, index, array) => { ... } )
    reduceRight((accumulator, currentValue, index, array) => { ... }, initialValue)

    // Callback function
    reduceRight(callbackFn)
    reduceRight(callbackFn, initialValue)

    // Callback reducer function
    reduceRight(function callbackFn(accumulator, currentValue) { ... })
    reduceRight(function callbackFn(accumulator, currentValue, index) { ... })
    reduceRight(function callbackFn(accumulator, currentValue, index, array){ ... })
    reduceRight(function callbackFn(accumulator, currentValue, index, array) { ... }, thisArg)

### Parameters

`callbackFn`  
Function to execute on each value in the array, taking four arguments:

`accumulator`  
The value previously returned in the last invocation of the callback, or `initialValue`, if supplied. (See below.)

`currentValue`  
The current element being processed in the array.

`index`<span class="badge inline optional">Optional</span>  
The index of the current element being processed in the array.

`array`<span class="badge inline optional">Optional</span>  
The array `reduceRight()` was called upon.

`initialValue` <span class="badge inline optional">Optional</span>  
Value to use as accumulator to the first call of the `callbackFn`. If no initial value is supplied, the last element in the array will be used and skipped. Calling reduce or reduceRight on an empty array without an initial value creates a `TypeError`.

### Return value

The value that results from the reduction.

## Description

`reduceRight` executes the callback function once for each element present in the array, excluding holes in the array, receiving four arguments: the initial value (or value from the previous callback call), the value of the current element, the current index, and the array over which iteration is occurring.

The call to the reduceRight `callbackFn` would look something like this:

    arr.reduceRight(function(accumulator, currentValue, index, array) {
      // ...
    });

The first time the function is called, the `accumulator` and `currentValue` can be one of two values. If an `initialValue` was provided in the call to `reduceRight`, then `accumulator` will be equal to `initialValue` and `currentValue` will be equal to the last value in the array. If no `initialValue` was provided, then `accumulator` will be equal to the last value in the array and `currentValue` will be equal to the second-to-last value.

If the array is empty and no `initialValue` was provided, [`TypeError`](../typeerror) would be thrown. If the array has only one element (regardless of position) and no `initialValue` was provided, or if `initialValue` is provided but the array is empty, the solo value would be returned without calling `callbackFn`.

Some example run-throughs of the function would look like this:

    [0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) {
      return accumulator + currentValue;
    });

The callback would be invoked four times, with the arguments and return values in each call being as follows:

<table><thead><tr class="header"><th><code>callback</code></th><th><code>accumulator</code></th><th><code>currentValue</code></th><th><code>index</code></th><th><code>array</code></th><th>return value</th></tr></thead><tbody><tr class="odd"><td>first call</td><td><code>4</code></td><td><code>3</code></td><td><code>3</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>7</code></td></tr><tr class="even"><td>second call</td><td><code>7</code></td><td><code>2</code></td><td><code>2</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>9</code></td></tr><tr class="odd"><td>third call</td><td><code>9</code></td><td><code>1</code></td><td><code>1</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>10</code></td></tr><tr class="even"><td>fourth call</td><td><code>10</code></td><td><code>0</code></td><td><code>0</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>10</code></td></tr></tbody></table>

The value returned by `reduceRight` would be that of the last callback invocation (`10`).

And if you were to provide an `initialValue`, the result would look like this:

    [0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) {
      return accumulator + currentValue;
    }, 10);

<table><thead><tr class="header"><th><code>callback</code></th><th><code>accumulator</code></th><th><code>currentValue</code></th><th><code>index</code></th><th><code>array</code></th><th>return value</th></tr></thead><tbody><tr class="odd"><td>first call</td><td><code>10</code></td><td><code>4</code></td><td><code>4</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>14</code></td></tr><tr class="even"><td>second call</td><td><code>14</code></td><td><code>3</code></td><td><code>3</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>17</code></td></tr><tr class="odd"><td>third call</td><td><code>17</code></td><td><code>2</code></td><td><code>2</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>19</code></td></tr><tr class="even"><td>fourth call</td><td><code>19</code></td><td><code>1</code></td><td><code>1</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>20</code></td></tr><tr class="odd"><td>fifth call</td><td><code>20</code></td><td><code>0</code></td><td><code>0</code></td><td><code>[0, 1, 2, 3, 4]</code></td><td><code>20</code></td></tr></tbody></table>

The value returned by `reduceRight` this time would be, of course, `20`.

## Polyfill

`reduceRight` was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of `reduceRight` in implementations which do not natively support it.

    // Production steps of ECMA-262, Edition 5, 15.4.4.22
    // Reference: https://es5.github.io/#x15.4.4.22
    if ('function' !== typeof Array.prototype.reduceRight) {
      Array.prototype.reduceRight = function(callback /*, initialValue*/) {
        'use strict';
        if (null === this || 'undefined' === typeof this) {
          throw new TypeError('Array.prototype.reduce called on null or undefined');
        }
        if ('function' !== typeof callback) {
          throw new TypeError(callback + ' is not a function');
        }
        var t = Object(this), len = t.length >>> 0, k = len - 1, value;
        if (arguments.length >= 2) {
          value = arguments[1];
        } else {
          while (k >= 0 && !(k in t)) {
            k--;
          }
          if (k < 0) {
            throw new TypeError('Reduce of empty array with no initial value');
          }
          value = t[k--];
        }
        for (; k >= 0; k--) {
          if (k in t) {
            value = callback(value, t[k], k, t);
          }
        }
        return value;
      };
    }

## Examples

### Sum up all values within an array

    var sum = [0, 1, 2, 3].reduceRight(function(a, b) {
      return a + b;
    });
    // sum is 6

### Flatten an array of arrays

    var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
        return a.concat(b);
    }, []);
    // flattened is [4, 5, 2, 3, 0, 1]

### Run a list of asynchronous functions with callbacks in series each passing their results to the next

    const waterfall = (...functions) => (callback, ...args) =>
      functions.reduceRight(
        (composition, fn) => (...results) => fn(composition, ...results),
        callback
      )(...args);

    const randInt = max => Math.floor(Math.random() * max)

    const add5 = (callback, x) => {
      setTimeout(callback, randInt(1000), x + 5);
    };
    const mult3 = (callback, x) => {
      setTimeout(callback, randInt(1000), x * 3);
    };
    const sub2 = (callback, x) => {
      setTimeout(callback, randInt(1000), x - 2);
    };
    const split = (callback, x) => {
      setTimeout(callback, randInt(1000), x, x);
    };
    const add = (callback, x, y) => {
      setTimeout(callback, randInt(1000), x + y);
    };
    const div4 = (callback, x) => {
      setTimeout(callback, randInt(1000), x / 4);
    };

    const computation = waterfall(add5, mult3, sub2, split, add, div4);
    computation(console.log, 5) // -> 14

    // same as:

    const computation2 = (input, callback) => {
      const f6 = x=> div4(callback, x);
      const f5 = (x, y) => add(f6, x, y);
      const f4 = x => split(f5, x);
      const f3 = x => sub2(f4, x);
      const f2 = x => mult3(f3, x);
      add5(f2, input);
    }

### Difference between `reduce` and `reduceRight`

    var a = ['1', '2', '3', '4', '5'];
    var left  = a.reduce(function(prev, cur)      { return prev + cur; });
    var right = a.reduceRight(function(prev, cur) { return prev + cur; });

    console.log(left);  // "12345"
    console.log(right); // "54321"

### Defining composable functions

Function composition is a mechanism for combining functions, in which the output of each function is passed into the next one, and the output of the last function is the final result. In this example we use `reduceRight()` to implement function composition.

See also [Function composition](<https://en.wikipedia.org/wiki/Function_composition_(computer_science)>) on Wikipedia.

    const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value)

    // Increment passed number
    const inc = (n) => n + 1

    // Doubles the passed value
    const double = (n) => n * 2

    // using composition function
    console.log(compose(double, inc)(2)); // 6

    // using composition function
    console.log(compose(inc, double)(2)); // 5

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.reduceright">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.reduceright</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`ReduceRight`

3

12

3

9

10.5

5

≤37

18

4

14

4

1.0

## See also

-   [`Array.prototype.reduce()`](reduce)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight</a>

# ReferenceError

The `ReferenceError` object represents an error when a non-existent variable is referenced.

## Constructor

[`ReferenceError()`](referenceerror/referenceerror)  
Creates a new `ReferenceError` object.

## Instance properties

[`ReferenceError.prototype.message`](error/message)  
Error message. Although ECMA-262 specifies that [`ReferenceError`](referenceerror) should provide its own `message` property, in [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), it inherits [`Error.prototype.message`](error/message).

[`ReferenceError.prototype.name`](error/name)  
Error name. Inherited from [`Error`](error).

[`ReferenceError.prototype.fileName`](error/filename)  
Path to file that raised this error. Inherited from [`Error`](error).

[`ReferenceError.prototype.lineNumber`](error/linenumber)  
Line number in file that raised this error. Inherited from [`Error`](error).

[`ReferenceError.prototype.columnNumber`](error/columnnumber)  
Column number in line that raised this error. Inherited from [`Error`](error).

[`ReferenceError.prototype.stack`](error/stack)  
Stack trace. Inherited from [`Error`](error).

## Examples

### Catching a ReferenceError

    try {
      let a = undefinedVariable
    } catch (e) {
      console.log(e instanceof ReferenceError)  // true
      console.log(e.message)                    // "undefinedVariable is not defined"
      console.log(e.name)                       // "ReferenceError"
      console.log(e.fileName)                   // "Scratchpad/1"
      console.log(e.lineNumber)                 // 2
      console.log(e.columnNumber)               // 6
      console.log(e.stack)                      // "@Scratchpad/2:2:7\n"
    }

### Creating a ReferenceError

    try {
      throw new ReferenceError('Hello', 'someFile.js', 10)
    } catch (e) {
      console.log(e instanceof ReferenceError)  // true
      console.log(e.message)                    // "Hello"
      console.log(e.name)                       // "ReferenceError"
      console.log(e.fileName)                   // "someFile.js"
      console.log(e.lineNumber)                 // 10
      console.log(e.columnNumber)               // 0
      console.log(e.stack)                      // "@Scratchpad/2:2:9\n"
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-referenceerror">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-native-error-types-used-in-this-standard-referenceerror</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`ReferenceError`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`ReferenceError`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

## See also

-   [`Error`](error)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError</a>

# Reflect

**Reflect** is a built-in object that provides methods for interceptable JavaScript operations. The methods are the same as those of [proxy handlers](proxy/proxy). `Reflect` is not a function object, so it's not constructible.

## Description

Unlike most global objects, `Reflect` is not a constructor. You cannot use it with a [`new` operator](../operators/new) or invoke the `Reflect` object as a function. All properties and methods of `Reflect` are static (just like the [`Math`](math) object).

The `Reflect` object provides the following static functions which have the same names as the [proxy handler methods](proxy/proxy).

Some of these methods are also the same as corresponding methods on [`Object`](object), although they do have [some subtle differences](reflect/comparing_reflect_and_object_methods) between them.

## Static methods

[`Reflect.apply(target, thisArgument, argumentsList)`](reflect/apply)  
Calls a `target` function with arguments as specified by the `argumentsList` parameter. See also [`Function.prototype.apply()`](function/apply).

[`Reflect.construct(target, argumentsList[, newTarget])`](reflect/construct)  
The [`new` operator](../operators/new) as a function. Equivalent to calling `new target(...argumentsList)`. Also provides the option to specify a different prototype.

[`Reflect.defineProperty(target, propertyKey, attributes)`](reflect/defineproperty)  
Similar to [`Object.defineProperty()`](object/defineproperty). Returns a [`Boolean`](boolean) that is `true` if the property was successfully defined.

[`Reflect.deleteProperty(target, propertyKey)`](reflect/deleteproperty)  
The [`delete` operator](../operators/delete) as a function. Equivalent to calling `delete target[propertyKey]`.

[`Reflect.get(target, propertyKey[, receiver])`](reflect/get)  
Returns the value of the property. Works like getting a property from an object (`target[propertyKey]`) as a function.

[`Reflect.getOwnPropertyDescriptor(target, propertyKey)`](reflect/getownpropertydescriptor)  
Similar to [`Object.getOwnPropertyDescriptor()`](object/getownpropertydescriptor). Returns a property descriptor of the given property if it exists on the object, [`undefined`](undefined) otherwise.

[`Reflect.getPrototypeOf(target)`](reflect/getprototypeof)  
Same as [`Object.getPrototypeOf()`](object/getprototypeof).

[`Reflect.has(target, propertyKey)`](reflect/has)  
Returns a [`Boolean`](boolean) indicating whether the target has the property. Either as own or inherited. Works like the [`in` operator](../operators/in) as a function.

[`Reflect.isExtensible(target)`](reflect/isextensible)  
Same as [`Object.isExtensible()`](object/isextensible). Returns a [`Boolean`](boolean) that is `true` if the target is extensible.

[`Reflect.ownKeys(target)`](reflect/ownkeys)  
Returns an array of the target object's own (not inherited) property keys.

[`Reflect.preventExtensions(target)`](reflect/preventextensions)  
Similar to [`Object.preventExtensions()`](object/preventextensions). Returns a [`Boolean`](boolean) that is `true` if the update was successful.

[`Reflect.set(target, propertyKey, value[, receiver])`](reflect/set)  
A function that assigns values to properties. Returns a [`Boolean`](boolean) that is `true` if the update was successful.

[`Reflect.setPrototypeOf(target, prototype)`](reflect/setprototypeof)  
A function that sets the prototype of an object. Returns a [`Boolean`](boolean) that is `true` if the update was successful.

## Examples

### Detecting whether an object contains certain properties

    const duck = {
      name: 'Maurice',
      color: 'white',
      greeting: function() {
        console.log(`Quaaaack! My name is ${this.name}`);
      }
    }

    Reflect.has(duck, 'color');
    // true
    Reflect.has(duck, 'haircut');
    // false

### Returning the object's own keys

    Reflect.ownKeys(duck);
    // [ "name", "color", "greeting" ]

### Adding a new property to the object

    Reflect.set(duck, 'eyes', 'black');
    // returns "true" if successful
    // "duck" now contains the property "eyes: 'black'"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-reflect-object">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-reflect-object</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Reflect`

49

12

42

No

36

10

49

49

42

36

10

5.0

`apply`

49

12

42

No

36

10

49

49

42

36

10

5.0

`construct`

49

12

42

No

36

10

49

49

42

36

10

5.0

`defineProperty`

49

12

42

No

36

10

49

49

42

36

10

5.0

`deleteProperty`

49

12

42

No

36

10

49

49

42

36

10

5.0

`get`

49

12

42

No

36

10

49

49

42

36

10

5.0

`getOwnPropertyDescriptor`

49

12

42

No

36

10

49

49

42

36

10

5.0

`getPrototypeOf`

49

12

42

No

36

10

49

49

42

36

10

5.0

`has`

49

12

42

No

36

10

49

49

42

36

10

5.0

`isExtensible`

49

12

42

No

36

10

49

49

42

36

10

5.0

`ownKeys`

49

12

42

No

36

10

49

49

42

36

10

5.0

`preventExtensions`

49

12

42

No

36

10

49

49

42

36

10

5.0

`set`

49

12

42

No

36

10

49

49

42

36

10

5.0

`setPrototypeOf`

49

12

42

No

36

10

49

49

42

36

10

5.0

## See also

-   The [`Proxy`](proxy) global object.
-   The [`handler`](proxy/proxy) object.

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect</a>

# RegExp

The `RegExp` object is used for matching text with a pattern.

For an introduction to regular expressions, read the [Regular Expressions chapter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) in the [JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).

## Description

### Literal notation and constructor

There are two ways to create a `RegExp` object: a _literal notation_ and a _constructor_.

-   **The literal notation's** parameters are enclosed between slashes and do not use quotation marks.
-   **The constructor function's** parameters are not enclosed between slashes but do use quotation marks.

The following three expressions create the same regular expression object:

    let re = /ab+c/i; // literal notation
    let re = new RegExp('ab+c', 'i') // constructor with string pattern as first argument
    let re = new RegExp(/ab+c/, 'i') // constructor with regular expression literal as first argument (Starting with ECMAScript 6)

The literal notation results in compilation of the regular expression when the expression is evaluated. Use literal notation when the regular expression will remain constant. For example, if you use literal notation to construct a regular expression used in a loop, the regular expression won't be recompiled on each iteration.

The constructor of the regular expression object—for example, `new RegExp('ab+c')`—results in runtime compilation of the regular expression. Use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and obtain it from another source, such as user input.

### Flags in constructor

Starting with ECMAScript 6, `new RegExp(/ab+c/, 'i')` no longer throws a [`TypeError`](typeerror) (`"can't supply flags when constructing one RegExp from another"`) when the first argument is a `RegExp` and the second `flags` argument is present. A new `RegExp` from the arguments is created instead.

When using the constructor function, the normal string escape rules (preceding special characters with `\` when included in a string) are necessary.

For example, the following are equivalent:

    let re = /\w+/
    let re = new RegExp('\\w+')

### Perl-like RegExp properties

Note that several of the [`RegExp`](regexp) properties have both long and short (Perl-like) names. Both names always refer to the same value. (Perl is the programming language from which JavaScript modeled its regular expressions.). See also [deprecated `RegExp` properties.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp_properties)

## Constructor

[`RegExp()`](regexp/regexp)  
Creates a new `RegExp` object.

## Static properties

[`get RegExp[@@species]`](regexp/@@species)  
The constructor function that is used to create derived objects.

## Instance properties

[`RegExp.prototype.flags`](regexp/flags)  
A string that contains the flags of the `RegExp` object.

[`RegExp.prototype.dotAll`](regexp/dotall)  
Whether `.` matches newlines or not.

[`RegExp.prototype.global`](regexp/global)  
Whether to test the regular expression against all possible matches in a string, or only against the first.

[`RegExp.prototype.hasIndices`](regexp/hasindices)  
Whether the regular expression result exposes the start and end indices of captured substrings.

[`RegExp.prototype.ignoreCase`](regexp/ignorecase)  
Whether to ignore case while attempting a match in a string.

[`RegExp.prototype.multiline`](regexp/multiline)  
Whether or not to search in strings across multiple lines.

[`RegExp.prototype.source`](regexp/source)  
The text of the pattern.

[`RegExp.prototype.sticky`](regexp/sticky)  
Whether or not the search is sticky.

[`RegExp.prototype.unicode`](regexp/unicode)  
Whether or not Unicode features are enabled.

[`RegExp: lastIndex`](regexp/lastindex)  
The index at which to start the next match.

## Instance methods

[`RegExp.prototype.compile()`](regexp/compile) <span class="icon deprecated" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img"> This deprecated API should no longer be used, but will probably still work. </span>  
(Re-)compiles a regular expression during execution of a script.

[`RegExp.prototype.exec()`](regexp/exec)  
Executes a search for a match in its string parameter.

[`RegExp.prototype.test()`](regexp/test)  
Tests for a match in its string parameter.

[`RegExp.prototype.toString()`](regexp/tostring)  
Returns a string representing the specified object. Overrides the [`Object.prototype.toString()`](object/tostring) method.

[`RegExp.prototype[@@match]()`](regexp/@@match)  
Performs match to given string and returns match result.

[`RegExp.prototype[@@matchAll]()`](regexp/@@matchall)  
Returns all matches of the regular expression against a string.

[`RegExp.prototype[@@replace]()`](regexp/@@replace)  
Replaces matches in given string with new substring.

[`RegExp.prototype[@@search]()`](regexp/@@search)  
Searches the match in given string and returns the index the pattern found in the string.

[`RegExp.prototype[@@split]()`](regexp/@@split)  
Splits given string into an array by separating the string into substrings.

## Examples

### Using a regular expression to change data format

The following script uses the [`replace()`](string/replace) method of the [`String`](string) instance to match a name in the format _first last_ and output it in the format _last, first_.

In the replacement text, the script uses `$1` and `$2` to indicate the results of the corresponding matching parentheses in the regular expression pattern.

    let re = /(\w+)\s(\w+)/
    let str = 'John Smith'
    let newstr = str.replace(re, '$2, $1')
    console.log(newstr)

This displays `"Smith, John"`.

### Using regular expression to split lines with different line endings/ends of line/line breaks

The default line ending varies depending on the platform (Unix, Windows, etc.). The line splitting provided in this example works on all platforms.

    let text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end'
    let lines = text.split(/\r\n|\r|\n/)
    console.log(lines) // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ]

Note that the order of the patterns in the regular expression matters.

### Using regular expression on multiple lines

    let s = 'Please yes\nmake my day!'

    s.match(/yes.*day/);
    // Returns null

    s.match(/yes[^]*day/);
    // Returns ["yes\nmake my day"]

### Using a regular expression with the sticky flag

The [`sticky`](regexp/sticky) flag indicates that the regular expression performs sticky matching in the target string by attempting to match starting at [`RegExp.prototype.lastIndex`](regexp/lastindex).

    let str = '#foo#'
    let regex = /foo/y

    regex.lastIndex = 1
    regex.test(str)      // true
    regex.lastIndex = 5
    regex.test(str)      // false (lastIndex is taken into account with sticky flag)
    regex.lastIndex      // 0 (reset after match failure)

### The difference between the sticky flag and the global flag

With the sticky flag `y`, the next match has to happen at the `lastIndex` position, while with the global flag `g`, the match can happen at the `lastIndex` position or later:

    re = /\d/y;
    while (r = re.exec("123 456")) console.log(r, "AND re.lastIndex", re.lastIndex);

    // [ '1', index: 0, input: '123 456', groups: undefined ] AND re.lastIndex 1
    // [ '2', index: 1, input: '123 456', groups: undefined ] AND re.lastIndex 2
    // [ '3', index: 2, input: '123 456', groups: undefined ] AND re.lastIndex 3
    //   ... and no more match.

With the global flag `g`, all 6 digits would be matched, not just 3.

### Regular expression and Unicode characters

`\w` and `\W` only matches ASCII based characters; for example, `a` to `z`, `A` to `Z`, `0` to `9`, and `_`.

To match characters from other languages such as Cyrillic or Hebrew, use `\uhhhh`, where `hhhh` is the character's Unicode value in hexadecimal.

This example demonstrates how one can separate out Unicode characters from a word.

    let text = 'Образец text на русском языке'
    let regex = /[\u0400-\u04FF]+/g

    let match = regex.exec(text)
    console.log(match[0])        // logs 'Образец'
    console.log(regex.lastIndex) // logs '7'

    let match2 = regex.exec(text)
    console.log(match2[0])       // logs 'на' [did not log 'text']
    console.log(regex.lastIndex) // logs '15'

    // and so on

The [Unicode property escapes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes) feature introduces a solution, by allowing for a statement as simple as `\p{scx=Cyrl}`.

### Extracting sub-domain name from URL

    let url = 'http://xxx.domain.com'
    console.log(/[^.]+/.exec(url)[0].substr(7)) // logs 'xxx'

**Note:** Instead of using regular expressions for parsing URLs, it is usually better to use the browsers built-in URL parser by using the [URL API](https://developer.mozilla.org/en-US/docs/Web/API/URL_API).

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-regexp-regular-expression-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-regexp-regular-expression-objects</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`RegExp`

1

12

1

4

5

1

1

18

4

10.1

1

1.0

`RegExp`

1

12

1

4

5

1

1

18

4

10.1

1

1.0

`compile`

1

12

1

4

6

3.1

1

18

4

10.1

2

1.0

`dotAll`

62

79

78

No

49

12

62

62

79

46

12

8.0

`exec`

1

12

1

4

5

1

1

18

4

10.1

1

1.0

`flags`

49

79

37

No

39

9

49

49

37

41

9

5.0

`global`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`hasIndices`

90

90

88

No

No

No

90

90

88

No

No

No

`ignoreCase`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`input`

1

12

1

5.5

15

3

1

18

4

14

1

1.0

`lastIndex`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`lastMatch`

1

12

1

5.5

10.5

3

1

18

4

11

1

1.0

`lastParen`

1

12

1

5.5

10.5

3

1

18

4

11

1

1.0

`leftContext`

1

12

1

5.5

8

3

1

18

4

10.1

1

1.0

`lookbehind_assertion`

62

79

78

No

49

No

62

62

79

46

No

8.0

`multiline`

1

12

1

5.5

5

1

1

18

4

10.1

1

1.0

`n`

1

12

1

4

5

1

1

18

4

10.1

1

1.0

`named_capture_groups`

64

79

78

No

51

11.1

64

64

79

47

11.3

9.0

`property_escapes`

64

79

78

No

51

11.1

64

64

79

47

11.3

9.0

`rightContext`

1

12

1

5.5

8

3

1

18

4

10.1

1

1.0

`source`

1

12

1

4

5

1

1

18

4

10.1

1

1.0

`sticky`

49

13

3

No

36

10

49

49

4

36

10

5.0

`test`

1

12

1

4

5

1

1

18

4

10.1

1

1.0

`toSource`

No

No

1-74

Starting in Firefox 74, `toSource()` is no longer available for use by web content. It is still allowed for internal and privileged code.

No

No

No

No

No

4

No

No

No

`toString`

1

12

1

4

5

1

1

18

4

10.1

1

1.0

`unicode`

50

12

Case folding is implemented in version 13

46

No

37

10

50

50

46

37

10

5.0

`@@match`

50

13

49

No

37

10

50

50

49

37

10

5.0

`@@matchAll`

73

79

67

No

60

13

73

73

67

52

13

5.0

`@@replace`

50

79

49

No

37

10

50

50

49

37

10

5.0

`@@search`

50

13

49

No

37

10

50

50

49

37

10

5.0

`@@species`

50

13

49

No

37

10

50

50

49

37

10

5.0

`@@split`

50

79

49

No

37

10

50

50

49

37

10

5.0

### Firefox-specific notes

Starting with Firefox 34, in the case of a capturing group with quantifiers preventing its exercise, the matched text for a capturing group is now `undefined` instead of an empty string:

    // Firefox 33 or older
    'x'.replace(/x(.)?/g, function(m, group) {
      console.log("'group:" + group + "'");
    });
    // 'group:'

    // Firefox 34 or newer
    'x'.replace(/x(.)?/g, function(m, group) {
      console.log("'group:" + group + "'");
    });
    // 'group:undefined'

Note that due to web compatibility, `RegExp.$N` will still return an empty string instead of `undefined` ([bug 1053944](https://bugzilla.mozilla.org/show_bug.cgi?id=1053944)).

## See also

-   [Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) chapter in the [JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
-   [`String.prototype.match()`](string/match)
-   [`String.prototype.replace()`](string/replace)
-   [`String.prototype.split()`](string/split)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp</a>

# Intl.Locale.prototype.region

The `Intl.Locale.prototype.region` property is an accessor property that returns the region of the world (usually a country) associated with the locale.

## Description

The region is an essential part of the locale identifier, as it places the locale in a specific area of the world. Knowing the locale's region is vital to identifying differences between locales. For example, English is spoken in the United Kingdom and the United States of America, but there are differences in spelling and other language conventions between those two countries. Knowing the locale's region helps JavaScript programmers make sure that the content from their sites and applications is correctly displayed when viewed from different areas of the world.

## Examples

### Setting the region in the locale identifer string argument

The region is the third part of a valid Unicode language identifier string, and can be set by adding it to the locale identifier string that is passed into the [`Locale`](locale) constructor. The region is a mandatory part of a

    let regionStr = new Intl.Locale("en-Latn-US");

    console.log(regionStr.region); // Prints "US"

### Setting the region via the configuration object

The [`Locale`](locale) constructor takes a configuration object, which can be used to set the region subtag and property.

    let regionObj = new Intl.Locale("fr-Latn", {region: "FR"});

    console.log(regionObj.region); // Prints "FR"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.Locale.prototype.region">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.Locale.prototype.region</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`region`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl.Locale`](../locale)
-   [Unicode region chart](https://www.unicode.org/cldr/charts/latest/supplemental/territory_containment_un_m_49.html)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/region" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/region</a>

# Promise.reject()

The `Promise.reject()` method returns a `Promise` object that is rejected with a given reason.

## Syntax

    Promise.reject(reason);

### Parameters

`reason`  
Reason why this `Promise` rejected.

### Return value

A [`Promise`](../promise) that is rejected with the given reason.

## Description

The static `Promise.reject` function returns a `Promise` that is rejected. For debugging purposes and selective error catching, it is useful to make `reason` an `instanceof` [`Error`](../error).

## Examples

### Using the static Promise.reject() method

    Promise.reject(new Error('fail')).then(function() {
      // not called
    }, function(error) {
      console.error(error); // Stacktrace
    });

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-promise.reject">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-promise.reject</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`reject`

32

12

29

No

19

8

4.4.3

32

29

19

8

2.0

## See also

-   [`Promise`](../promise)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject</a>

# Intl.RelativeTimeFormat

The `Intl.RelativeTimeFormat` object enables language-sensitive relative time formatting.

## Constructor

[`Intl.RelativeTimeFormat()`](relativetimeformat/relativetimeformat)  
Creates a new `Intl.RelativeTimeFormat` object.

## Static methods

[`Intl.RelativeTimeFormat.supportedLocalesOf()`](relativetimeformat/supportedlocalesof)  
Returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale.

## Instance methods

[`Intl.RelativeTimeFormat.prototype.format()`](relativetimeformat/format)  
Formats a `value` and a `unit` according to the locale and formatting options of the given [`Intl.RelativeTimeFormat`](relativetimeformat) object.

[`Intl.RelativeTimeFormat.prototype.formatToParts()`](relativetimeformat/formattoparts)  
Returns an [`Array`](../array) of objects representing the relative time format in parts that can be used for custom locale-aware formatting.

[`Intl.RelativeTimeFormat.prototype.resolvedOptions()`](relativetimeformat/resolvedoptions)  
Returns a new object with properties reflecting the locale and formatting options computed during initialization of the object.

## Examples

### Basic format usage

The following example shows how to use a relative time formatter for the English language.

    // Create a relative time formatter in your locale
    // with default values explicitly passed in.
    const rtf = new Intl.RelativeTimeFormat("en", {
        localeMatcher: "best fit", // other values: "lookup"
        numeric: "always", // other values: "auto"
        style: "long", // other values: "short" or "narrow"
    });

    // Format relative time using negative value (-1).
    rtf.format(-1, "day");
    // > "1 day ago"

    // Format relative time using positive  value (1).
    rtf.format(1, "day");
    // > "in 1 day"

### Using formatToParts

The following example shows how to create a relative time formatter returning formatted parts

    const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });

    // Format relative time using the day unit.
    rtf.formatToParts(-1, "day");
    // > [{ type: "literal", value: "yesterday"}]

    rtf.formatToParts(100, "day");
    // > [{ type: "literal", value: "in " },
    // >  { type: "integer", value: "100", unit: "day" },
    // >  { type: "literal", value: " days" }]

## Polyfill

[formatjs Intl.RelativeTimeFormat polyfill](https://formatjs.io/docs/polyfills/intl-relativetimeformat)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#relativetimeformat-objects">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#relativetimeformat-objects</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`RelativeTimeFormat`

71

79

65

No

58

14

71

71

65

50

14

10.0

`RelativeTimeFormat`

71

79

65

No

58

14

71

71

65

50

14

10.0

`format`

71

79

65

No

58

14

71

71

65

50

14

10.0

`formatToParts`

71

79

70

No

58

14

71

71

79

50

14

10.0

`resolvedOptions`

71

79

65

No

58

14

71

71

65

50

14

10.0

`supportedLocalesOf`

71

79

65

No

58

14

71

71

65

50

14

10.0

## See also

-   [`Intl`](../intl)
-   [The Intl.RelativeTimeFormat API](https://developers.google.com/web/updates/2018/10/intl-relativetimeformat)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat</a>

# Remainder (%)

The remainder operator (`%`) returns the remainder left over when one operand is divided by a second operand. It always takes the sign of the dividend.

Note that while in most languages, '%' is a remainder operator, in some (e.g. [Python, Perl](https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages)) it is a modulo operator. For positive values, the two are equivalent, but when the dividend and divisor are of different signs, they give different results. To obtain a modulo in JavaScript, in place of `a % n`, use `((a % n ) + n ) % n`.

## Syntax

    Operator: var1 % var2

## Examples

### Remainder with positive dividend

     12 % 5  //  2
     1 % -2 //  1
     1 % 2  //  1
     2 % 3  //  2
    5.5 % 2 // 1.5

### Remainder with negative dividend

    -12 % 5 // -2
    -1 % 2  // -1
    -4 % 2  // -0

### Remainder with NaN

    NaN % 2 // NaN

### Remainder with Infinity

    Infinity % 2 // NaN
    Infinity % 0 // NaN
    Infinity % Infinity // NaN

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-multiplicative-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-multiplicative-operators</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Remainder`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Addition operator](addition)
-   [Subtraction operator](subtraction)
-   [Division operator](division)
-   [Multiplication operator](multiplication)
-   [Exponentiation operator](exponentiation)
-   [Increment operator](increment)
-   [Decrement operator](decrement)
-   [Unary negation operator](unary_negation)
-   [Unary plus operator](unary_plus)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder</a>

# String.prototype.repeat()

The `repeat()` method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

## Syntax

    repeat(count)

### Parameters

`count`  
An integer between `0` and [`+Infinity`](../number/positive_infinity), indicating the number of times to repeat the string.

### Return value

A new string containing the specified number of copies of the given string.

### Exceptions

-   [`RangeError`](../../errors/negative_repetition_count): repeat count must be non-negative.
-   [`RangeError`](../../errors/resulting_string_too_large): repeat count must be less than infinity and not overflow maximum string size.

## Examples

### Using repeat()

    'abc'.repeat(-1)    // RangeError
    'abc'.repeat(0)     // ''
    'abc'.repeat(1)     // 'abc'
    'abc'.repeat(2)     // 'abcabc'
    'abc'.repeat(3.5)   // 'abcabcabc' (count will be converted to integer)
    'abc'.repeat(1/0)   // RangeError

    ({ toString: () => 'abc', repeat: String.prototype.repeat }).repeat(2)
    // 'abcabc' (repeat() is a generic method)

## Polyfill

This method has been added to the ECMAScript 2015 specification and may not be available in all JavaScript implementations yet. However, you can polyfill `String.prototype.repeat()` with the following snippet:

    if (!String.prototype.repeat) {
      String.prototype.repeat = function(count) {
        'use strict';
        if (this == null)
          throw new TypeError('can\'t convert ' + this + ' to object');

        var str = '' + this;
        // To convert string to integer.
        count = +count;
        // Check NaN
        if (count != count)
          count = 0;

        if (count < 0)
          throw new RangeError('repeat count must be non-negative');

        if (count == Infinity)
          throw new RangeError('repeat count must be less than infinity');

        count = Math.floor(count);
        if (str.length == 0 || count == 0)
          return '';

        // Ensuring count is a 31-bit integer allows us to heavily optimize the
        // main part. But anyway, most current (August 2014) browsers can't handle
        // strings 1 << 28 chars or longer, so:
        if (str.length * count >= 1 << 28)
          throw new RangeError('repeat count must not overflow maximum string size');

        var maxCount = str.length * count;
        count = Math.floor(Math.log(count) / Math.log(2));
        while (count) {
           str += str;
           count--;
        }
        str += str.substring(0, maxCount - str.length);
        return str;
      }
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.repeat">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'String.prototype.repeat' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`repeat`

41

12

24

No

28

9

41

36

24

28

9

3.0

## See also

-   [`String.prototype.concat()`](concat)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat</a>

# String.prototype.replace()

The `replace()` method returns a new string with some or all matches of a `pattern` replaced by a `replacement`. The `pattern` can be a string or a [`RegExp`](../regexp), and the `replacement` can be a string or a function to be called for each match. If `pattern` is a string, only the first occurrence will be replaced.

The original string is left unchanged.

## Syntax

    replace(regexp, newSubstr)
    replace(regexp, replacerFunction)

    replace(substr, newSubstr)
    replace(substr, replacerFunction)

### Parameters

`regexp` (pattern)  
A [`RegExp`](../regexp) object or literal. The match or matches are replaced with `newSubstr` or the value returned by the specified `replacerFunction`.

`substr`  
A [`String`](../string) that is to be replaced by `newSubstr`. It is treated as a literal string and is _not_ interpreted as a regular expression. Only the first occurrence will be replaced.

`newSubstr` (replacement)  
The [`String`](../string) that replaces the substring specified by the specified `regexp` or `substr` parameter. A number of special replacement patterns are supported; see the "[Specifying a string as a parameter](#specifying_a_string_as_a_parameter)" section below.

`replacerFunction` (replacement)  
A function to be invoked to create the new substring to be used to replace the matches to the given `regexp` or `substr`. The arguments supplied to this function are described in the "[Specifying a function as a parameter](#specifying_a_function_as_a_parameter)" section below.

### Return value

A new string, with some or all matches of a pattern replaced by a replacement.

## Description

This method does not change the calling [`String`](../string) object. It returns a new string.

To perform a global search and replace, include the `g` switch in the regular expression.

### Specifying a string as a parameter

The replacement string can include the following special replacement patterns:

<table><thead><tr class="header"><th>Pattern</th><th>Inserts</th></tr></thead><tbody><tr class="odd"><td><code>$$</code></td><td>Inserts a <code>"$"</code>.</td></tr><tr class="even"><td><code>$&amp;</code></td><td>Inserts the matched substring.</td></tr><tr class="odd"><td><code>$`</code></td><td>Inserts the portion of the string that precedes the matched substring.</td></tr><tr class="even"><td><code>$'</code></td><td>Inserts the portion of the string that follows the matched substring.</td></tr><tr class="odd"><td><code>$n</code></td><td>Where <code>n</code> is a positive integer less than 100, inserts the <code>n</code>th parenthesized submatch string, provided the first argument was a <a href="../regexp"><code>RegExp</code></a> object. Note that this is <code>1</code>-indexed. If a group <code>n</code> is not present (e.g., if group is 3), it will be replaced as a literal (e.g., <code>$3</code>).</td></tr><tr class="even"><td><code>$&lt;Name&gt;</code></td><td>Where <code>Name</code> is a capturing group name. If the group is not in the match, or not in the regular expression, or if a string was passed as the first argument to <code>replace</code> instead of a regular expression, this resolves to a literal (e.g., <code>$&lt;Name&gt;</code>). Only available in browser versions supporting named capturing groups.</td></tr></tbody></table>

### Specifying a function as a parameter

You can specify a function as the second parameter. In this case, the function will be invoked after the match has been performed. The function's result (return value) will be used as the replacement string. (**Note:** The above-mentioned special replacement patterns do _not_ apply in this case.)

Note that the function will be invoked multiple times for each full match to be replaced if the regular expression in the first parameter is global.

The arguments to the function are as follows:

<table><thead><tr class="header"><th>Possible name</th><th>Supplied value</th></tr></thead><tbody><tr class="odd"><td><code>match</code></td><td>The matched substring. (Corresponds to <code>$&amp;</code> above.)</td></tr><tr class="even"><td><code>p1, p2, ...</code></td><td>The nth string found by a parenthesized capture group (including named capturing groups), provided the first argument to <code>replace()</code> was a <a href="../regexp"><code>RegExp</code></a> object. (Corresponds to <code>$1</code>, <code>$2</code>, etc. above.) For example, if <code>/(\a+)(\b+)/</code>, was given, <code>p1</code> is the match for <code>\a+</code>, and <code>p2</code> for <code>\b+</code>.</td></tr><tr class="odd"><td><code>offset</code></td><td>The offset of the matched substring within the whole string being examined. (For example, if the whole string was <code>'abcd'</code>, and the matched substring was <code>'bc'</code>, then this argument will be <code>1</code>.)</td></tr><tr class="even"><td><code>string</code></td><td>The whole string being examined.</td></tr><tr class="odd"><td><code>groups</code></td><td>In browser versions supporting named capturing groups, will be an object whose keys are the used group names, and whose values are the matched portions (<code>undefined</code> if not matched).</td></tr></tbody></table>

(The exact number of arguments depends on whether the first argument is a [`RegExp`](../regexp) object—and, if so, how many parenthesized submatches it specifies.)

The following example will set `newString` to `'abc - 12345 - #$*%'`:

    function replacer(match, p1, p2, p3, offset, string) {
      // p1 is nondigits, p2 digits, and p3 non-alphanumerics
      return [p1, p2, p3].join(' - ');
    }
    let newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
    console.log(newString);  // abc - 12345 - #$*%

## Examples

### Defining the regular expression in replace()

In the following example, the regular expression is defined in `replace()` and includes the ignore case flag.

    let str = 'Twas the night before Xmas...';
    let newstr = str.replace(/xmas/i, 'Christmas');
    console.log(newstr);  // Twas the night before Christmas...

This logs `'Twas the night before Christmas...'`.

**Note:** See [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) for more explanations about regular expressions.

### Using global and ignore with replace()

Global replace can only be done with a regular expression. In the following example, the regular expression includes the [global and ignore case flags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags_2) which permits `replace()` to replace each occurrence of `'apples'` in the string with `'oranges'`.

    let re = /apples/gi;
    let str = 'Apples are round, and apples are juicy.';
    let newstr = str.replace(re, 'oranges');
    console.log(newstr);  // oranges are round, and oranges are juicy.

This logs `'oranges are round, and oranges are juicy'`.

### Switching words in a string

The following script switches the words in the string. For the replacement text, the script uses [capturing groups](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges) and the `$1` and `$2` replacement patterns.

    let re = /(\w+)\s(\w+)/;
    let str = 'John Smith';
    let newstr = str.replace(re, '$2, $1');
    console.log(newstr);  // Smith, John

This logs `'Smith, John'`.

### Using an inline function that modifies the matched characters

In this example, all occurrences of capital letters in the string are converted to lower case, and a hyphen is inserted just before the match location. The important thing here is that additional operations are needed on the matched item before it is given back as a replacement.

The replacement function accepts the matched snippet as its parameter, and uses it to transform the case and concatenate the hyphen before returning.

    function styleHyphenFormat(propertyName) {
      function upperToHyphenLower(match, offset, string) {
        return (offset > 0 ? '-' : '') + match.toLowerCase();
      }
      return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
    }

Given `styleHyphenFormat('borderTop')`, this returns `'border-top'`.

Because we want to further transform the _result_ of the match before the final substitution is made, we must use a function. This forces the evaluation of the match prior to the [`toLowerCase()`](tolowercase) method. If we had tried to do this using the match without a function, the [`toLowerCase()`](tolowercase) would have no effect.

    let newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase());  // won't work

This is because `'$&'.toLowerCase()` would first be evaluated as a string literal (resulting in the same `'$&'`) before using the characters as a pattern.

### Replacing a Fahrenheit degree with its Celsius equivalent

The following example replaces a Fahrenheit degree with its equivalent Celsius degree. The Fahrenheit degree should be a number ending with `"F"`. The function returns the Celsius number ending with `"C"`. For example, if the input number is `"212F"`, the function returns `"100C"`. If the number is `"0F"`, the function returns `"-17.77777777777778C"`.

The regular expression `test` checks for any number that ends with `F`. The number of Fahrenheit degree is accessible to the function through its second parameter, `p1`. The function sets the Celsius number based on the Fahrenheit degree passed in a string to the `f2c()` function. `f2c()` then returns the Celsius number. This function approximates Perl's `s///e` flag.

    function f2c(x) {
      function convert(str, p1, offset, s) {
        return ((p1 - 32) * 5/9) + 'C';
      }
      let s = String(x);
      let test = /(-?\d+(?:\.\d*)?)F\b/g;
      return s.replace(test, convert);
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.replace">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'String.prototype.replace' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`replace`

1

12

1

5.5

4-5.5

A replacement function as second argument is not supported.

4

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.replaceAll()`](replaceall)
-   [`String.prototype.match()`](match)
-   [`RegExp.prototype.exec()`](../regexp/exec)
-   [`RegExp.prototype.test()`](../regexp/test)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace</a>

# String.prototype.replaceAll()

The `replaceAll()` method returns a new string with all matches of a `pattern` replaced by a `replacement`. The `pattern` can be a string or a [`RegExp`](../regexp), and the `replacement` can be a string or a function to be called for each match.

The original string is left unchanged.

## Syntax

    replaceAll(regexp, newSubstr)
    replaceAll(regexp, replacerFunction)

    replaceAll(substr, newSubstr)
    replaceAll(substr, replacerFunction)

**Note:** When using a \`regexp\` you have to set the global ("g") flag; otherwise, it will throw a `TypeError`: "replaceAll must be called with a global RegExp".

### Parameters

`regexp` (pattern)  
A [`RegExp`](../regexp) object or literal with the global flag. The matches are replaced with `newSubstr` or the value returned by the specified `replacerFunction`. A RegExp without the global ("g") flag will throw a `TypeError`: "replaceAll must be called with a global RegExp".

`substr`  
A [`String`](../string) that is to be replaced by `newSubstr`. It is treated as a literal string and is _not_ interpreted as a regular expression.

`newSubstr` (replacement)  
The [`String`](../string) that replaces the substring specified by the specified `regexp` or `substr` parameter. A number of special replacement patterns are supported; see the "[Specifying a string as a parameter](#specifying_a_string_as_a_parameter)" section below.

`replacerFunction` (replacement)  
A function to be invoked to create the new substring to be used to replace the matches to the given `regexp` or `substr`. The arguments supplied to this function are described in the "[Specifying a function as a parameter](#specifying_a_function_as_a_parameter)" section below.

### Return value

A new string, with all matches of a pattern replaced by a replacement.

## Description

This method does not change the calling [`String`](../string) object. It returns a new string.

### Specifying a string as a parameter

The replacement string can include the following special replacement patterns:

<table><thead><tr class="header"><th>Pattern</th><th>Inserts</th></tr></thead><tbody><tr class="odd"><td><code>$$</code></td><td>Inserts a <code>"$"</code>.</td></tr><tr class="even"><td><code>$&amp;</code></td><td>Inserts the matched substring.</td></tr><tr class="odd"><td><code>$`</code></td><td>Inserts the portion of the string that precedes the matched substring.</td></tr><tr class="even"><td><code>$'</code></td><td>Inserts the portion of the string that follows the matched substring.</td></tr><tr class="odd"><td><code>$n</code></td><td>Where <code>n</code> is a positive integer less than 100, inserts the <code>n</code>th parenthesized submatch string, provided the first argument was a <a href="../regexp"><code>RegExp</code></a> object. Note that this is <code>1</code>-indexed.</td></tr></tbody></table>

### Specifying a function as a parameter

You can specify a function as the second parameter. In this case, the function will be invoked after the match has been performed. The function's result (return value) will be used as the replacement string. (**Note:** The above-mentioned special replacement patterns do _not_ apply in this case.)

Note that if the first argument of an `replaceAll()` invocation is a [`RegExp`](../regexp) object or regular expression literal, the function will be invoked multiple times.

The arguments to the function are as follows:

<table><thead><tr class="header"><th>Possible name</th><th>Supplied value</th></tr></thead><tbody><tr class="odd"><td><code>match</code></td><td>The matched substring. (Corresponds to <code>$&amp;</code> above.)</td></tr><tr class="even"><td><code>p1, p2, ...</code></td><td>The nth string found by a parenthesized capture group, provided the first argument to <code>replaceAll()</code> was a <a href="../regexp"><code>RegExp</code></a> object. (Corresponds to <code>$1</code>, <code>$2</code>, etc. above.) For example, if <code>/(\a+)(\b+)/</code>, was given, <code>p1</code> is the match for <code>\a+</code>, and <code>p2</code> for <code>\b+</code>.</td></tr><tr class="odd"><td><code>offset</code></td><td>The offset of the matched substring within the whole string being examined. (For example, if the whole string was <code>'abcd'</code>, and the matched substring was <code>'bc'</code>, then this argument will be <code>1</code>.)</td></tr><tr class="even"><td><code>string</code></td><td>The whole string being examined.</td></tr></tbody></table>

(The exact number of arguments depends on whether the first argument is a [`RegExp`](../regexp) object—and, if so, how many parenthesized submatches it specifies.)

## Examples

### Using replaceAll

    'aabbcc'.replaceAll('b', '.');
    // 'aa..cc'

### Non-global regex throws

When using a regular expression search value, it must be global. This won't work:

    'aabbcc'.replaceAll(/b/, '.');
    TypeError: replaceAll must be called with a global RegExp

This will work:

    'aabbcc'.replaceAll(/b/g, '.');
    "aa..cc"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.replaceall">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'String.prototype.replaceAll' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`replaceAll`

85

85

77

No

71

13.1

85

85

79

60

13.4

No

## See also

-   [`String.prototype.replace()`](replace)
-   [`String.prototype.match()`](match)
-   [`RegExp.prototype.exec()`](../regexp/exec)
-   [`RegExp.prototype.test()`](../regexp/test)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll</a>

# SyntaxError: "x" is a reserved identifier

The JavaScript exception "_variable_ is a reserved identifier" occurs when [reserved keywords](../lexical_grammar#keywords) are used as identifiers.

## Message

    SyntaxError: The use of a future reserved word for an identifier is invalid (Edge)
    SyntaxError: "x" is a reserved identifier (Firefox)
    SyntaxError: Unexpected reserved word (Chrome)

## Error type

[`SyntaxError`](../global_objects/syntaxerror)

## What went wrong?

[Reserved keywords](../lexical_grammar#keywords) will throw in if they are used as identifiers. These are reserved in strict mode and sloppy mode:

-   `enum`

The following are only reserved when they are found in strict mode code:

-   `implements`
-   `interface`
-   [`let`](../statements/let)
-   `package`
-   `private`
-   `protected`
-   `public`
-   `static`

## Examples

### Strict and non-strict reserved keywords

The `enum` identifier is generally reserved.

    var enum = { RED: 0, GREEN: 1, BLUE: 2 };
    // SyntaxError: enum is a reserved identifier

In strict mode code, more identifiers are reserved.

    "use strict";
    var package = ["potatoes", "rice", "fries"];
    // SyntaxError: package is a reserved identifier

You'll need to rename these variables.

    var colorEnum = { RED: 0, GREEN: 1, BLUE: 2 };
    var list = ["potatoes", "rice", "fries"];

### Update older browsers

If you are using an older browser that does not yet implement `let` or `class`, for example, you should update to a more recent browser version that does support these new language features.

    "use strict";
    class DocArchiver {}

    // SyntaxError: class is a reserved identifier
    // (throws in older browsers only, e.g. Firefox 44 and older)

## See also

-   [Good variable names](https://wiki.c2.com/?GoodVariableNames)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Reserved_identifier" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Reserved_identifier</a>

# Promise.resolve()

The `Promise.resolve()` method returns a [`Promise`](../promise) object that is resolved with a given value. If the value is a promise, that promise is returned; if the value is a thenable (i.e. has a [`"then" method`](then)), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value. This function flattens nested layers of promise-like objects (e.g. a promise that resolves to a promise that resolves to something) into a single layer.

## Syntax

    Promise.resolve(value);

### Parameters

`value`  
Argument to be resolved by this `Promise`. Can also be a `Promise` or a thenable to resolve.

### Return value

A [`Promise`](../promise) that is resolved with the given value, or the promise passed as value, if the value was a promise object.

## Description

The static `Promise.resolve` function returns a `Promise` that is resolved.

## Examples

### Using the static Promise.resolve method

    Promise.resolve('Success').then(function(value) {
      console.log(value); // "Success"
    }, function(value) {
      // not called
    });

### Resolving an array

    var p = Promise.resolve([1,2,3]);
    p.then(function(v) {
      console.log(v[0]); // 1
    });

### Resolving another Promise

    var original = Promise.resolve(33);
    var cast = Promise.resolve(original);
    cast.then(function(value) {
      console.log('value: ' + value);
    });
    console.log('original === cast ? ' + (original === cast));

    // logs, in order:
    // original === cast ? true
    // value: 33

The inverted order of the logs is due to the fact that the `then` handlers are called asynchronously. See how `then` works [here](then#return_value).

### Resolving thenables and throwing Errors

    // Resolving a thenable object
    var p1 = Promise.resolve({
      then: function(onFulfill, onReject) { onFulfill('fulfilled!'); }
    });
    console.log(p1 instanceof Promise) // true, object casted to a Promise

    p1.then(function(v) {
        console.log(v); // "fulfilled!"
      }, function(e) {
        // not called
    });

    // Thenable throws before callback
    // Promise rejects
    var thenable = { then: function(resolve) {
      throw new TypeError('Throwing');
      resolve('Resolving');
    }};

    var p2 = Promise.resolve(thenable);
    p2.then(function(v) {
      // not called
    }, function(e) {
      console.error(e); // TypeError: Throwing
    });

    // Thenable throws after callback
    // Promise resolves
    var thenable = { then: function(resolve) {
      resolve('Resolving');
      throw new TypeError('Throwing');
    }};

    var p3 = Promise.resolve(thenable);
    p3.then(function(v) {
      console.log(v); // "Resolving"
    }, function(e) {
      // not called
    });

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-promise.resolve">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-promise.resolve</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`resolve`

32

12

29

No

19

8

4.4.3

32

29

19

8

2.0

## See also

-   [`Promise`](../promise)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve</a>

# Intl.NumberFormat.prototype.resolvedOptions()

The `Intl.NumberFormat.prototype.resolvedOptions()` method returns a new object with properties reflecting the locale and number formatting options computed during initialization of this [`Intl/NumberFormat`](../numberformat) object.

## Syntax

    resolvedOptions()

### Return value

A new object with properties reflecting the locale and number formatting options computed during the initialization of the given [`Intl/NumberFormat`](../numberformat) object.

## Description

The resulting object has the following properties:

`locale`  
The BCP 47 language tag for the locale actually used. If any Unicode extension values were requested in the input BCP 47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in `locale`.

`numberingSystem`  
The value provided for this properties in the `options` argument, if present, or the value requested using the Unicode extension key "`nu`" or filled in as a default.

`notation`  
The value provided for this property in the `options` argument, if present, or "`standard`" filled in as a default.

`compactDisplay`  
The value provided for this property in the `options` argument, or "`short`" filled in as a default.  
This property is only present if the `notation` is set to "compact".

`signDisplay`  
The value provided for this property in the `options` argument, or "`auto`" filled in as a default.

`useGrouping`  
The values provided for these properties in the `options` argument or filled in as defaults.

`currency`  
`currencyDisplay`  
The values provided for these properties in the `options` argument or filled in as defaults. These properties are only present if `style` is "`currency`".

Only one of the following two groups of properties is included:

`minimumIntegerDigits`  
`minimumFractionDigits`  
`maximumFractionDigits`  
The values provided for these properties in the `options` argument or filled in as defaults. These properties are present only if neither `minimumSignificantDigits` nor `maximumSignificantDigits` was provided in the `options` argument.

`minimumSignificantDigits`  
`maximumSignificantDigits`  
The values provided for these properties in the `options` argument or filled in as defaults. These properties are present only if at least one of them was provided in the `options` argument.

## Examples

### Using the `resolvedOptions` method

    var de = new Intl.NumberFormat('de-DE');
    var usedOptions = de.resolvedOptions();

    usedOptions.locale;                // "de-DE"
    usedOptions.numberingSystem;       // "latn"
    usedOptions.notation;              // "standard"
    usedOptions.signDisplay;           // "auto"
    usedOption.style;                  // "decimal"
    usedOptions.minimumIntegerDigits;  // 1
    usedOptions.minimumFractionDigits; // 0
    usedOptions.maximumFractionDigits; // 3
    usedOptions.useGrouping;           // true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-intl.numberformat.prototype.resolvedoptions">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-intl.numberformat.prototype.resolvedoptions</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`resolvedOptions`

24

12

29

11

15

10

4.4

25

56

14

10

1.5

## See also

-   [`Intl.NumberFormat`](../numberformat)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolvedOptions" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolvedOptions</a>

# Rest parameters

The **rest parameter** syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent [variadic functions](https://en.wikipedia.org/wiki/Variadic_function) in JavaScript.

## Syntax

    function f(a, b, ...theArgs) {
      // ...
    }

## Description

A function definition's last parameter can be prefixed with "`...`" (three U+002E FULL STOP characters), which will cause all remaining (user supplied) parameters to be placed within a ["standard" JavaScript array.](../global_objects/array). Only the last parameter in a function definition can be a rest parameter.

    function myFun(a,  b, ...manyMoreArgs) {
      console.log("a", a)
      console.log("b", b)
      console.log("manyMoreArgs", manyMoreArgs)
    }

    myFun("one", "two", "three", "four", "five", "six")

    // Console Output:
    // a, one
    // b, two
    // manyMoreArgs, ["three", "four", "five", "six"]

#### Quick reference

A function definition can have only one `...`restParam.

    foo(...one, ...wrong, ...wrong)

The rest parameter must be the last parameter in the function definition.

    foo(...wrong, arg2, arg3)

    foo(arg1, arg2, ...correct)

### The difference between rest parameters and the `arguments` object

There are three main differences between rest parameters and the [`arguments`](arguments) object:

-   The `arguments` object is **not a real array**, while rest parameters are [`Array`](../global_objects/array) instances, meaning methods like [`sort`](../global_objects/array/sort), [`map`](../global_objects/array/map), [`forEach`](../global_objects/array/foreach) or [`pop`](../global_objects/array/pop) can be applied on it directly;
-   The `arguments` object has additional functionality specific to itself (like the `callee` property).
-   The `...restParam` bundles all the extra parameters into a single array, therefore it does not contain any named argument defined **before** the `...restParam`. Whereas the `arguments` object contains all of the parameters -- including all of the stuff in the `...restParam` -- **un**bundled.

### From arguments to an array

Rest parameters were introduced to reduce the boilerplate code that was commonly used for converting a set of arguments to an array.

    // Before rest parameters, "arguments" could be converted to a normal array using:

    function f(a, b) {

      let normalArray = Array.prototype.slice.call(arguments)
      // -- or --
      let normalArray = [].slice.call(arguments)
      // -- or --
      let normalArray = Array.from(arguments)

      let first = normalArray.shift()  // OK, gives the first argument
      let first = arguments.shift()    // ERROR (arguments is not a normal array)
    }

    // Now, you can easily gain access to a normal array using a rest parameter

    function f(...args) {
      let normalArray = args
      let first = normalArray.shift() // OK, gives the first argument
    }

## Examples

### Using rest parameters

In this example, the first argument is mapped to `a` and the second to `b`, so these named arguments are used as normal.

However, the third argument, `manyMoreArgs`, will be an array that contains the 3<sup>rd</sup>, 4<sup>th</sup>, 5<sup>th</sup>, 6<sup>th</sup> ... n<sup>th</sup> — as many arguments that the user includes.

    function myFun(a, b, ...manyMoreArgs) {
      console.log("a", a)
      console.log("b", b)
      console.log("manyMoreArgs", manyMoreArgs)
    }

    myFun("one", "two", "three", "four", "five", "six")

    // a, "one"
    // b, "two"
    // manyMoreArgs, ["three", "four", "five", "six"] <-- notice it's an array

Below, even though there is just one value, the last argument still gets put into an array.

    // using the same function definition from example above

    myFun("one", "two", "three")

    // a, "one"
    // b, "two"
    // manyMoreArgs, ["three"] <-- notice it's an array, even though there's just one value

Below, the third argument isn't provided, but `manyMoreArgs` is still an array (albeit an empty one).

    // using the same function definition from example above

    myFun("one", "two")

    // a, "one"
    // b, "two"
    // manyMoreArgs, [] <-- yip, still an array

### Argument length

Since `theArgs` is an array, a count of its elements is given by the `length` property:

    function fun1(...theArgs) {
      console.log(theArgs.length)
    }

    fun1()         // 0
    fun1(5)        // 1
    fun1(5, 6, 7)  // 3

### Using rest parameters in combination with ordinary parameters

In the next example, a rest parameter is used to collect all parameters after the first parameter into an array. Each one of the parameter values collected into the array is then multiplied by the first parameter, and the array is returned:

    function multiply(multiplier, ...theArgs) {
      return theArgs.map(element => {
        return multiplier * element
      })
    }

    let arr = multiply(2, 15, 25, 42)
    console.log(arr)  // [30, 50, 84]

### Rest parameters are real arrays; the arguments object is not.

`Array` methods can be used on rest parameters, but not on the `arguments` object:

    function sortRestArgs(...theArgs) {
      let sortedArgs = theArgs.sort()
      return sortedArgs
    }

    console.log(sortRestArgs(5, 3, 7, 1)) // 1, 3, 5, 7

    function sortArguments() {
      let sortedArgs = arguments.sort()
      return sortedArgs  // this will never happen
    }

    console.log(sortArguments(5, 3, 7, 1))
    // throws a TypeError (arguments.sort is not a function)

To use `Array` methods on the `arguments` object, it must be converted to a real array first.

    function sortArguments() {
      let args = Array.from(arguments)
      let sortedArgs = args.sort()
      return sortedArgs
    }
    console.log(sortArguments(5, 3, 7, 1))  // 1, 3, 5, 7

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-function-definitions">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-function-definitions</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`rest_parameters`

47

12

15

No

34

10

47

47

15

34

10

5.0

`destructuring`

49

79

52

No

36

10

49

49

52

36

10

5.0

## See also

-   [Spread syntax](../operators/spread_syntax) (also '`...`')
-   [Arguments object](arguments)
-   [Array](../global_objects/array)
-   [Functions](../functions)
-   [Original proposal at ecmascript.org](http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters)
-   [JavaScript arguments object and beyond](https://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/)
-   [Destructuring assignment](../operators/destructuring_assignment)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters</a>

# RangeError: repeat count must be less than infinity

The JavaScript exception "repeat count must be less than infinity" occurs when the [`String.prototype.repeat()`](../global_objects/string/repeat) method is used with a `count` argument that is infinity.

## Message

    RangeError: argument out of range (Edge)
    RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
    RangeError: Invalid count value (Chrome)

## Error type

[`RangeError`](../global_objects/rangeerror)

## What went wrong?

The [`String.prototype.repeat()`](../global_objects/string/repeat) method has been used. It has a `count` parameter indicating the number of times to repeat the string. It must be between 0 and less than positive [`Infinity`](../global_objects/infinity) and cannot be a negative number. The range of allowed values can be described like this: \[0, +∞).

The resulting string can also not be larger than the maximum string size, which can differ in JavaScript engines. In Firefox (SpiderMonkey) the maximum string size is 2<sup>28</sup> -1 (`0xFFFFFFF`).

## Examples

### Invalid cases

    'abc'.repeat(Infinity); // RangeError
    'a'.repeat(2**28);      // RangeError

### Valid cases

    'abc'.repeat(0);    // ''
    'abc'.repeat(1);    // 'abc'
    'abc'.repeat(2);    // 'abcabc'
    'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)

## See also

-   [`String.prototype.repeat()`](../global_objects/string/repeat)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Resulting_string_too_large" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Resulting_string_too_large</a>

# return

The `return` statement ends function execution and specifies a value to be returned to the function caller.

## Syntax

    return [expression];

`expression`  
The expression whose value is to be returned. If omitted, `undefined` is returned instead.

## Description

When a `return` statement is used in a function body, the execution of the function is stopped. If specified, a given value is returned to the function caller. For example, the following function returns the square of its argument, `x`, where `x` is a number.

    function square(x) {
       return x * x;
    }
    var demo = square(3);
    // demo will equal 9

If the value is omitted, `undefined` is returned instead.

The following return statements all break the function execution:

    return;
    return true;
    return false;
    return x;
    return x + y / 3;

### Automatic Semicolon Insertion

The `return` statement is affected by [automatic semicolon insertion (ASI)](../lexical_grammar#automatic_semicolon_insertion). No line terminator is allowed between the `return` keyword and the expression.

    return
    a + b;

is transformed by ASI into:

    return;
    a + b;

The console will warn "unreachable code after return statement".

**Note:** Starting with Firefox 40, a warning is shown in the console if unreachable code is found after a `return` statement.

To avoid this problem (to prevent ASI), you could use parentheses:

    return (
      a + b
    );

## Examples

### Interrupt a function

A function immediately stops at the point where `return` is called.

    function counter() {
      for (var count = 1; ; count++) {  // infinite loop
        console.log(count + 'A'); // until 5
          if (count === 5) {
            return;
          }
          console.log(count + 'B');  // until 4
        }
      console.log(count + 'C');  // never appears
    }

    counter();

    // Output:
    // 1A
    // 1B
    // 2A
    // 2B
    // 3A
    // 3B
    // 4A
    // 4B
    // 5A

### Returning a function

See also the article about [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures).

    function magic() {
      return function calc(x) { return x * 42; };
    }

    var answer = magic();
    answer(1337); // 56154

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-return-statement">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-return-statement</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`return`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Functions](../functions)
-   [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return</a>

# Array.prototype.reverse()

The `reverse()` method reverses an array _[in place](https://en.wikipedia.org/wiki/In-place_algorithm)_. The first array element becomes the last, and the last array element becomes the first.

## Syntax

    reverse()

### Return value

The reversed array.

## Description

The `reverse` method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array.

`reverse` is intentionally generic; this method can be [called](../function/call) or [applied](../function/apply) to objects resembling arrays. Objects which do not contain a `length` property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.

## Examples

### Reversing the elements in an array

The following example creates an array `a`, containing three elements, then reverses the array. The call to `reverse()` returns a reference to the reversed array `a`.

    const a = [1, 2, 3];

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

    a.reverse();

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

### Reversing the elements in an array-like object

The following example creates an array-like object `a`, containing three elements and a length property, then reverses the array-like object. The call to `reverse()` returns a reference to the reversed array-like object `a`.

    const a = {0: 1, 1: 2, 2: 3, length: 3};

    console.log(a); // {0: 1, 1: 2, 2: 3, length: 3}

    Array.prototype.reverse.call(a); //same syntax for using apply()

    console.log(a); // {0: 3, 1: 2, 2: 1, length: 3}

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.reverse">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.reverse</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`reverse`

1

12

1

5.5

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Array.prototype.join()`](join)
-   [`Array.prototype.sort()`](sort)
-   [`TypedArray.prototype.reverse()`](../typedarray/reverse)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse</a>

# Proxy.revocable()

The `Proxy.revocable()` method is used to create a revocable [`Proxy`](../proxy) object.

## Syntax

    Proxy.revocable(target, handler);

### Parameters

`target`  
A target object to wrap with `Proxy`. It can be any sort of object, including a native array, a function, or even another proxy.

`handler`  
An object whose properties are functions define the behavior of proxy `p` when an operation is performed on it.

### Return value

A newly created revocable `Proxy` object is returned.

## Description

A revocable `Proxy` is an object with following two properties `{proxy: proxy, revoke: revoke}`.

`proxy`  
A Proxy object created with `new Proxy(target, handler)` call.

`revoke`  
A function with no argument to invalidate (switch off) the `proxy`.

If the `revoke()` function gets called, the proxy becomes unusable: Any trap to a handler will throw a [`TypeError`](../typeerror). Once a proxy is revoked, it will remain revoked and can be garbage collected. Calling `revoke()` again has no effect.

## Examples

### Using Proxy.revocable

    var revocable = Proxy.revocable({}, {
      get: function(target, name) {
        return "[[" + name + "]]";
      }
    });
    var proxy = revocable.proxy;
    console.log(proxy.foo); // "[[foo]]"

    revocable.revoke();

    console.log(proxy.foo); // TypeError is thrown
    proxy.foo = 1           // TypeError again
    delete proxy.foo;       // still TypeError
    typeof proxy            // "object", typeof doesn't trigger any trap

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-proxy.revocable">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-proxy.revocable</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`revocable`

63

12

34

No

50

10

63

63

34

46

10

8.0

## See also

-   [`Proxy`](../proxy)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/revocable" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/revocable</a>

# Right shift (&gt;&gt;)

The `>>` shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".

## Syntax

    a >> b

## Description

This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".

For example, `9 >> 2` yields 2:

    .    9 (base 10): 00000000000000000000000000001001 (base 2)
                      --------------------------------
    9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)

Likewise, `-9 >> 2` yields `-3`, because the sign is preserved:

    .    -9 (base 10): 11111111111111111111111111110111 (base 2)
                       --------------------------------
    -9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)

## Examples

### Using right shift

     9 >> 2; //  2
    -9 >> 2; // -3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#prod-BitwiseORExpression">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#prod-BitwiseORExpression</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Right_shift`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Bitwise operators in the JS guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)
-   [Right shift assignment operator](right_shift_assignment)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Right_shift" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Right_shift</a>

# Right shift assignment (&gt;&gt;=)

The right shift assignment operator (`>>=`) moves the specified amount of bits to the right and assigns the result to the variable.

## Syntax

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

## Examples

### Using right shift assignment

    let a = 5; //   (00000000000000000000000000000101)
    a >>= 2;   // 1 (00000000000000000000000000000001)

    let b = -5; //  (-00000000000000000000000000000101)
    b >>= 2;  // -2 (-00000000000000000000000000000010)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-assignment-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-assignment-operators</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Right_shift_assignment`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [Assignment operators in the JS guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
-   [Right shift operator](right_shift)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment</a>

# Math.round()

The `Math.round()` function returns the value of a number rounded to the nearest integer.

## Syntax

    Math.round(x)

### Parameters

`x`  
A number.

### Return value

The value of the given number rounded to the nearest integer.

## Description

If the fractional portion of the argument is greater than 0.5, the argument is rounded to the integer with the next higher absolute value. If it is less than 0.5, the argument is rounded to the integer with the lower absolute value. If the fractional portion is exactly 0.5, the argument is rounded to the next integer in the direction of +∞. **Note that this differs from many languages' `round()` functions, which often round this case to the next integer _away from zero_**, instead giving a different result in the case of negative numbers with a fractional part of exactly 0.5.

Because `round()` is a static method of `Math`, you always use it as `Math.round()`, rather than as a method of a `Math` object you created (`Math` has no constructor).

## Examples

### Using round

    Math.round( 20.49); //  20
    Math.round( 20.5 ); //  21
    Math.round( 42   ); //  42
    Math.round(-20.5 ); // -20
    Math.round(-20.51); // -21

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.round">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.round</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`round`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Number.toPrecision()`](../number/toprecision)
-   [`Number.toFixed()`](../number/tofixed)
-   [`Math.abs()`](abs)
-   [`Math.ceil()`](ceil)
-   [`Math.floor()`](floor)
-   [`Math.sign()`](sign)
-   [`Math.trunc()`](trunc)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round</a>

# WebAssembly.RuntimeError

The `WebAssembly.RuntimeError` object is the error type that is thrown whenever WebAssembly specifies a [trap](https://webassembly.org/docs/semantics/#traps).

## Constructor

[`WebAssembly.RuntimeError()`](runtimeerror/runtimeerror)  
Creates a new `WebAssembly.RuntimeError` object.

## Instance properties

[`WebAssembly.RuntimeError.prototype.message`](../error/message)  
Error message. Although ECMA-262 specifies that [`URIError`](../urierror) should provide its own `message` property, in [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), it inherits [`Error.prototype.message`](../error/message).

[`WebAssembly.RuntimeError.prototype.name`](../error/name)  
Error name. Inherited from [`Error`](../error).

[`WebAssembly.RuntimeError.prototype.fileName`](../error/filename)  
Path to file that raised this error. Inherited from [`Error`](../error).

[`WebAssembly.RuntimeError.prototype.lineNumber`](../error/linenumber)  
Line number in file that raised this error. Inherited from [`Error`](../error).

[`WebAssembly.RuntimeError.prototype.columnNumber`](../error/columnnumber)  
Column number in line that raised this error. Inherited from [`Error`](../error).

[`WebAssembly.RuntimeError.prototype.stack`](../error/stack)  
Stack trace. Inherited from [`Error`](../error).

## Instance methods

[`WebAssembly.RuntimeError.prototype.toSource()`](../error/tosource)  
Returns code that could eval to the same error. Inherited from [`Error`](../error).

[`WebAssembly.RuntimeError.prototype.toString()`](../error/tostring)  
Returns a string representing the specified `Error` object.. Inherited from [`Error`](../error).

## Examples

### Creating a new RuntimeError instance

The following snippet creates a new `RuntimeError` instance, and logs its details to the console:

    try {
      throw new WebAssembly.RuntimeError('Hello', 'someFile', 10);
    } catch (e) {
      console.log(e instanceof WebAssembly.RuntimeError); // true
      console.log(e.message);                             // "Hello"
      console.log(e.name);                                // "RuntimeError"
      console.log(e.fileName);                            // "someFile"
      console.log(e.lineNumber);                          // 10
      console.log(e.columnNumber);                        // 0
      console.log(e.stack);                               // returns the location where the code was run
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://webassembly.github.io/spec/js-api/#exceptiondef-runtimeerror">WebAssembly JavaScript Interface (WebAssembly JavaScript Interface) 
<br/>

<span class="small">#exceptiondef-runtimeerror</span></a></td></tr><tr class="even"><td><a href="https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard">ECMAScript Language Specification (ECMAScript)
<br/>

<span class="small">#sec-native-error-types-used-in-this-standard</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`RuntimeError`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

`RuntimeError`

57

16

52

Disabled in the Firefox 52 Extended Support Release (ESR).

No

44

11

57

57

52

Disabled in the Firefox 52 Extended Support Release (ESR).

43

11

7.0

## See also

-   [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) overview page
-   [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
-   [Using the WebAssembly JavaScript API](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError</a>

# Intl.Locale.prototype.script

The `Intl.Locale.prototype.script` property is an accessor property which returns the script used for writing the particular language used in the locale.

## Description

A script, sometimes called writing system, is one of the core attributes of a locale. It indicates the set of symbols, or glyphs, that are used to write a particular language. For instance, the script associated with English is Latin, whereas the script typically associated with Korean is Hangul. In many cases, denoting a script is not strictly necessary, since the language (which is necessary) is only written in a single script. There are exceptions to this rule, however, and it is important to indicate the script whenever possible, in order to have a complete Unicode language identifier.

## Examples

### Setting the script in the locale identifer string argument

The script is the second part of a valid Unicode language identifier string, and can be set by adding it to the locale identifier string that is passed into the [`Locale`](locale) constructor. Note that the script is not a required part of a locale identifier.

    let scriptStr = new Intl.Locale("en-Latn-US");

    console.log(scriptStr.script); // Prints "Latn"

### Setting the script via the configuration object

The [`Locale`](locale) constructor takes a configuration object, which can be used to set the script subtag and property.

    let scriptObj = new Intl.Locale("fr-FR", {script: "Latn"});

    console.log(scriptObj.script); // Prints "Latn"

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-Intl.Locale.prototype.script">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-Intl.Locale.prototype.script</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`script`

74

79

75

No

62

14

74

74

79

53

14

11.0

## See also

-   [`Intl.Locale`](../locale)
-   [Unicode's script subtag specification](https://www.unicode.org/reports/tr35/#unicode_script_subtag_validity)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/script" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/script</a>

# Object.seal()

The `Object.seal()` method seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable. Values of present properties can still be changed as long as they are writable.

## Syntax

    Object.seal(obj)

### Parameters

`obj`  
The object which should be sealed.

### Return value

The object being sealed.

## Description

By default, objects are [extensible](isextensible) (new properties can be added to them). Sealing an object prevents new properties from being added and marks all existing properties as non-configurable. This has the effect of making the set of properties on the object fixed. Making all properties non-configurable also prevents them from being converted from data properties to accessor properties and vice versa, but it does not prevent the values of data properties from being changed. Attempting to delete or add properties to a sealed object, or to convert a data property to accessor or vice versa, will fail, either silently or by throwing a [`TypeError`](../typeerror) (most commonly, although not exclusively, when in [strict mode](../../strict_mode) code).

The prototype chain remains untouched. However, the [`__proto__`](proto) property is sealed as well.

### Comparison to Object.freeze()

Existing properties in objects frozen with [`Object.freeze()`](freeze) are made immutable. Objects sealed with `Object.seal()` can have their existing properties changed.

## Examples

### Using Object.seal

    var obj = {
      prop: function() {},
      foo: 'bar'
    };

    // New properties may be added, existing properties
    // may be changed or removed.
    obj.foo = 'baz';
    obj.lumpy = 'woof';
    delete obj.prop;

    var o = Object.seal(obj);

    o === obj; // true
    Object.isSealed(obj); // === true

    // Changing property values on a sealed object
    // still works.
    obj.foo = 'quux';

    // But you can't convert data properties to accessors,
    // or vice versa.
    Object.defineProperty(obj, 'foo', {
      get: function() { return 'g'; }
    }); // throws a TypeError

    // Now any changes, other than to property values,
    // will fail.
    obj.quaxxor = 'the friendly duck';
    // silently doesn't add the property
    delete obj.foo;
    // silently doesn't delete the property

    // ...and in strict mode such attempts
    // will throw TypeErrors.
    function fail() {
      'use strict';
      delete obj.foo; // throws a TypeError
      obj.sparky = 'arf'; // throws a TypeError
    }
    fail();

    // Attempted additions through
    // Object.defineProperty will also throw.
    Object.defineProperty(obj, 'ohai', {
      value: 17
    }); // throws a TypeError
    Object.defineProperty(obj, 'foo', {
      value: 'eit'
    }); // changes existing property value

### Non-object coercion

In ES5, if the argument to this method is not an object (a primitive), then it will cause a [`TypeError`](../typeerror). In ES2015, a non-object argument will be treated as if it was a sealed ordinary object by returning it.

    Object.seal(1);
    // TypeError: 1 is not an object (ES5 code)

    Object.seal(1);
    // 1                             (ES2015 code)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.seal">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Object.seal' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`seal`

6

12

4

9

12

5.1

1

18

4

12

6

1.0

## See also

-   [`Object.isSealed()`](issealed)
-   [`Object.preventExtensions()`](preventextensions)
-   [`Object.isExtensible()`](isextensible)
-   [`Object.freeze()`](freeze)
-   [`Object.isFrozen()`](isfrozen)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal</a>

# String.prototype.search()

The `search()` method executes a search for a match between a regular expression and this [`String`](../string) object.

## Syntax

    search(regexp)

### Parameters

`regexp`  
A [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) object.

If a non-RegExp object `regexp` is passed, it is implicitly converted to a [`RegExp`](../regexp) with `new RegExp(regexp)`.

### Return value

The index of the first match between the regular expression and the given string, or `-1` if no match was found.

## Description

When you want to know whether a pattern is found, and _also_ know its index within a string, use `search()`. (If you only want to know if it exists, use the similar [`test()`](../regexp/test) method on the `RegExp` prototype, which returns a boolean.)

For more information (but slower execution) use [`match()`](match) (similar to the regular expression [`exec()`](../regexp/exec) method).

## Examples

### Using search()

The following example searches a string with two different regex objects to show a successful search (positive value) vs. an unsuccessful search (`-1`)

    let str = "hey JudE"
    let re = /[A-Z]/g
    let reDot = /[.]/g
    console.log(str.search(re))    // returns 4, which is the index of the first capital letter "J"
    console.log(str.search(reDot)) // returns -1 cannot find '.' dot punctuation

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.search">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.search</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`search`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

`flags`

No

No

1-49

No

No

No

No

No

4-49

No

No

No

## See also

-   [Using regular expressions in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
-   [`String.prototype.match()`](match)
-   [`RegExp.prototype.exec()`](../regexp/exec)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/search" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/search</a>

# Intl.PluralRules.select()

The `Intl.PluralRules.prototype.select()` method returns a string indicating which plural rule to use for locale-aware formatting.

## Syntax

    select(number)

### Parameters

`number`  
The number to get a plural rule for.

### Return value

A string representing the pluralization category of the `number`, can be one of `zero`, `one`, `two`, `few`, `many` or `other`.

## Description

This function selects a pluralization category according to the locale and formatting options of a [`Intl/PluralRules`](../pluralrules) object.

## Examples

### Using select()

     new Intl.PluralRules('ar-EG').select(0);
    // → 'zero'

    new Intl.PluralRules('ar-EG').select(1);
    // → 'one'

    new Intl.PluralRules('ar-EG').select(2);
    // → 'two'

    new Intl.PluralRules('ar-EG').select(6);
    // → 'few'

    new Intl.PluralRules('ar-EG').select(18);
    // → 'many'

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma402/#sec-intl.pluralrules.prototype.select">ECMAScript Internationalization API Specification (ECMAScript Internationalization API) 
<br/>

<span class="small">#sec-intl.pluralrules.prototype.select</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`select`

63

18

58

No

50

13

63

63

58

46

13

8.0

## See also

-   [`Intl.PluralRules`](../pluralrules)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/select" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/select</a>

# Set

The `Set` object lets you store unique values of any type, whether [primitive values](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) or object references.

## Description

`Set` objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the `Set` **may only occur once**; it is unique in the `Set`'s collection.

### Value equality

Because each value in the `Set` has to be unique, the value equality will be checked. In an earlier version of ECMAScript specification, this was not based on the same algorithm as the one used in the `===` operator. Specifically, for `Set`s, `+0` (which is strictly equal to `-0`) and `-0` were different values. However, this was changed in the ECMAScript 2015 specification. See _"Key equality for -0 and 0"_ in the [browser compatibility](#browser_compatibility) table for details.

[`NaN`](nan) and [`undefined`](undefined) can also be stored in a Set. All `NaN` values are equated (i.e. `NaN` is considered the same as `NaN`, even though `NaN !== NaN`).

## Constructor

[`Set()`](set/set)  
Creates a new `Set` object.

## Static properties

[`get Set[@@species]`](set/@@species)  
The constructor function that is used to create derived objects.

## Instance properties

[`Set.prototype.size`](set/size)  
Returns the number of values in the `Set` object.

## Instance methods

[`Set.prototype.add(value)`](set/add)  
Appends `value` to the `Set` object. Returns the `Set` object with added value.

[`Set.prototype.clear()`](set/clear)  
Removes all elements from the `Set` object.

[`Set.prototype.delete(value)`](set/delete)  
Removes the element associated to the `value` and returns a boolean asserting whether an element was successfully removed or not. `Set.prototype.has(value)` will return `false` afterwards.

[`Set.prototype.has(value)`](set/has)  
Returns a boolean asserting whether an element is present with the given value in the `Set` object or not.

### Iteration methods

[`Set.prototype[@@iterator]()`](set/@@iterator)  
Returns a new iterator object that yields the **values** for each element in the `Set` object in insertion order.

[`Set.prototype.keys()`](set/values)  
Returns a new iterator object that yields the values for each element in the `Set` object in insertion order. (For Sets, this is the same as the `values()` method.)

[`Set.prototype.values()`](set/values)  
Returns a new iterator object that yields the **values** for each element in the `Set` object in insertion order. (For Sets, this is the same as the `keys()` method.)

[`Set.prototype.entries()`](set/entries)  
Returns a new iterator object that contains `[value, value]` for each element in the `Set` object, in insertion order.

This is similar to the [`Map`](map) object, so that each entry's _key_ is the same as its _value_ for a `Set`.

[`Set.prototype.forEach(callbackFn[, thisArg])`](set/foreach)  
Calls `callbackFn` once for each value present in the `Set` object, in insertion order. If a `thisArg` parameter is provided, it will be used as the `this` value for each invocation of `callbackFn`.

## Examples

### Using the Set object

    const mySet1 = new Set()

    mySet1.add(1)           // Set [ 1 ]
    mySet1.add(5)           // Set [ 1, 5 ]
    mySet1.add(5)           // Set [ 1, 5 ]
    mySet1.add('some text') // Set [ 1, 5, 'some text' ]
    const o = {a: 1, b: 2}
    mySet1.add(o)

    mySet1.add({a: 1, b: 2})   // o is referencing a different object, so this is okay

    mySet1.has(1)              // true
    mySet1.has(3)              // false, since 3 has not been added to the set
    mySet1.has(5)              // true
    mySet1.has(Math.sqrt(25))  // true
    mySet1.has('Some Text'.toLowerCase()) // true
    mySet1.has(o)       // true

    mySet1.size         // 5

    mySet1.delete(5)    // removes 5 from the set
    mySet1.has(5)       // false, 5 has been removed

    mySet1.size         // 4, since we just removed one value

    console.log(mySet1)
    // logs Set(4) [ 1, "some text", {…}, {…} ] in Firefox
    // logs Set(4) { 1, "some text", {…}, {…} } in Chrome

### Iterating Sets

    // iterate over items in set
    // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
    for (let item of mySet1) console.log(item)

    // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
    for (let item of mySet1.keys()) console.log(item)

    // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
    for (let item of mySet1.values()) console.log(item)

    // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
    // (key and value are the same here)
    for (let [key, value] of mySet1.entries()) console.log(key)

    // convert Set object to an Array object, with Array.from
    const myArr = Array.from(mySet1) // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}]

    // the following will also work if run in an HTML document
    mySet1.add(document.body)
    mySet1.has(document.querySelector('body')) // true

    // converting between Set and Array
    const mySet2 = new Set([1, 2, 3, 4])
    mySet2.size                    // 4
    [...mySet2]                    // [1, 2, 3, 4]

    // intersect can be simulated via
    const intersection = new Set([...mySet1].filter(x => mySet2.has(x)))

    // difference can be simulated via
    const difference = new Set([...mySet1].filter(x => !mySet2.has(x)))

    // Iterate set entries with forEach()
    mySet1.forEach(function(value) {
      console.log(value)
    })

    // 1
    // 2
    // 3
    // 4

### Implementing basic set operations

    function isSuperset(set, subset) {
        for (let elem of subset) {
            if (!set.has(elem)) {
                return false
            }
        }
        return true
    }

    function union(setA, setB) {
        let _union = new Set(setA)
        for (let elem of setB) {
            _union.add(elem)
        }
        return _union
    }

    function intersection(setA, setB) {
        let _intersection = new Set()
        for (let elem of setB) {
            if (setA.has(elem)) {
                _intersection.add(elem)
            }
        }
        return _intersection
    }

    function symmetricDifference(setA, setB) {
        let _difference = new Set(setA)
        for (let elem of setB) {
            if (_difference.has(elem)) {
                _difference.delete(elem)
            } else {
                _difference.add(elem)
            }
        }
        return _difference
    }

    function difference(setA, setB) {
        let _difference = new Set(setA)
        for (let elem of setB) {
            _difference.delete(elem)
        }
        return _difference
    }

    // Examples
    const setA = new Set([1, 2, 3, 4])
    const setB = new Set([2, 3])
    const setC = new Set([3, 4, 5, 6])

    isSuperset(setA, setB)          // returns true
    union(setA, setC)               // returns Set {1, 2, 3, 4, 5, 6}
    intersection(setA, setC)        // returns Set {3, 4}
    symmetricDifference(setA, setC) // returns Set {1, 2, 5, 6}
    difference(setA, setC)          // returns Set {1, 2}

### Relation with Array objects

    let myArray = ['value1', 'value2', 'value3']

    // Use the regular Set constructor to transform an Array into a Set
    let mySet = new Set(myArray)

    mySet.has('value1')     // returns true

    // Use the spread operator to transform a set into an Array.
    console.log([...mySet]) // Will show you exactly the same Array as myArray

### Remove duplicate elements from the array

    // Use to remove duplicate elements from the array

    const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]

    console.log([...new Set(numbers)])

    // [2, 3, 4, 5, 6, 7, 32]

### Relation with Strings

    let text = 'India'

    const mySet = new Set(text)  // Set(5) {'I', 'n', 'd', 'i', 'a'}
    mySet.size  // 5

    //case sensitive & duplicate ommision
    new Set("Firefox")  // Set(7) { "F", "i", "r", "e", "f", "o", "x" }
    new Set("firefox")  // Set(6) { "f", "i", "r", "e", "o", "x" }

### Use Set to ensure the uniqueness of a list of values

    const array = Array
      .from(document.querySelectorAll('[id]'))
      .map(function(e) {
          return e.id
      });

    const set = new Set(array);
    console.assert(set.size == array.length);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-set-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-set-objects</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Set`

38

12

13

11

25

8

38

38

14

25

8

3.0

`Set`

38

12

13

11

25

8

38

38

14

25

8

3.0

`add`

38

12

13

11

Returns 'undefined' instead of the 'Set' object.

25

8

38

38

14

25

8

3.0

`clear`

38

12

19

11

25

8

38

38

19

25

8

3.0

`delete`

38

12

13

11

25

8

38

38

14

25

8

3.0

`entries`

38

12

24

No

25

8

38

38

24

25

8

3.0

`forEach`

38

12

25

11

25

8

38

38

25

25

8

3.0

`has`

38

12

13

11

25

8

38

38

14

25

8

3.0

`key_equality_for_zeros`

38

12

29

No

25

9

38

38

29

25

9

3.0

`size`

38

12

19

From Firefox 13 to Firefox 18, the `size` property was implemented as a `Set.prototype.size()` method, this has been changed to a property in later versions conform to the ECMAScript 2015 specification.

11

25

8

38

38

19

From Firefox 13 to Firefox 18, the `size` property was implemented as a `Set.prototype.size()` method, this has been changed to a property in later versions conform to the ECMAScript 2015 specification.

25

8

3.0

`values`

38

38

12

12

24

24

No

25

25

8

8

38

38

38

38

24

24

25

25

8

8

3.0

3.0

`@@iterator`

43

12

36

27-36

A placeholder property named `@@iterator` is used.

17-27

A placeholder property named `iterator` is used.

No

30

9

43

43

36

27-36

A placeholder property named `@@iterator` is used.

17-27

A placeholder property named `iterator` is used.

30

9

4.0

`@@species`

51

13

41

No

38

10

51

51

41

41

10

5.0

## See also

-   [`Map`](map)
-   [`WeakMap`](weakmap)
-   [`WeakSet`](weakset)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set</a>

# DataView.prototype.setBigInt64()

The `setBigInt64()` method stores a signed 64-bit integer (long long) value at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    setBigInt64(byteOffset, value)
    setBigInt64(byteOffset, value, littleEndian)

### Parameters

byteOffset  
The offset, in bytes, from the start of the view to store the data from.

value  
The value to set as a [`BigInt`](../bigint). The highest possible value that fits in a signed 64-bit integer is `2n ** (64n -1n) - 1n`<span class="blob-code-inner blob-code-marker"> (`9223372036854775807n`). Upon overflow, it will be negative (</span>`-9223372036854775808n`<span class="blob-code-inner blob-code-marker">).</span>

littleEndian  
<span class="badge inline optional">Optional</span> Indicates whether the 64-bit int is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is written.

### Return value

[`undefined`](../undefined).

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such that it would store beyond the end of the view.

## Examples

### Using the `setBigInt64` method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.setBigInt64(0, 3n);
    dataview.getBigInt64(0); // 3n

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.setbigint64">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.setbigint64</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setBigInt64`

67

79

68

No

54

No

67

67

68

48

No

9.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)
-   [`BigInt`](../bigint)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64</a>

# DataView.prototype.setBigUint64()

The `setBigUint64()` method stores an unsigned 64-bit integer (unsigned long long) value at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    setBigUint64(byteOffset, value)
    setBigUint64(byteOffset, value, littleEndian)

### Parameters

byteOffset  
The offset, in bytes, from the start of the view to store the data from.

value  
The value to set as a [`BigInt`](../bigint). The highest possible value that fits in an unsigned 64-bit integer is `2n ** 64n - 1n`<span class="blob-code-inner blob-code-marker"> (</span>`18446744073709551615n`<span class="blob-code-inner blob-code-marker">). Upon overflow, it will be zero (</span>`0n`<span class="blob-code-inner blob-code-marker">).</span>

littleEndian  
<span class="badge inline optional">Optional</span> Indicates whether the 64-bit int is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is written.

### Return value

[`undefined`](../undefined).

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such that it would store beyond the end of the view.

## Examples

### Using the `setBigUint64` method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.setBigUint64(0, 3n);
    dataview.getBigUint64(0); // 3n

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.setbiguint64">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.setbiguint64</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setBigUint64`

67

79

68

No

54

No

67

67

68

48

No

9.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)
-   [`BigInt`](../bigint)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64</a>

# Date.prototype.setDate()

The `setDate()` method changes the day of the month of a given [`Date`](../date) instance, based on local time.

To instead change the day of the month for a given [`Date`](../date) instance based on UTC time, use the [`setUTCDate()`](setutcdate) method.

## Syntax

    setDate(dayValue)

### Parameters

`dayValue`  
An integer representing the day of the month.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the given date (the [`Date`](../date) object is also changed in place).

## Description

If the `dayValue` is outside of the range of date values for the month, `setDate()` will update the [`Date`](../date) object accordingly.

For example, if 0 is provided for `dayValue`, the date will be set to the last day of the previous month.

If a negative number is provided for `dayValue`, the date will be set counting backwards from the last day of the previous month. -1 would result in the date being set to 1 day before the last day of the previous month.

## Examples

### Using setDate()

    var theBigDay = new Date(1962, 6, 7); // 1962-07-07 (7th of July 1962)
    theBigDay.setDate(24);  // 1962-07-24 (24th of July 1962)
    theBigDay.setDate(32);  // 1962-08-01 (1st of August 1962)
    theBigDay.setDate(22);  // 1962-08-22 (22th of August 1962)
    theBigDay.setDate(0);   // 1962-07-31 (31th of July 1962)
    theBigDay.setDate(98);  // 1962-10-06 (6th of October 1962)
    theBigDay.setDate(-50); // 1962-08-11 (11th of August 1962)

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setdate">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Date.prototype.setDate' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setDate`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getDate()`](getdate)
-   [`Date.prototype.setUTCDate()`](setutcdate)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setDate" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setDate</a>

# DataView.prototype.setFloat32()

The `setFloat32()` method stores a signed 32-bit float (float) value at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    setFloat32(byteOffset, value)
    setFloat32(byteOffset, value, littleEndian)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to store the data.

`value`  
The value to set.

`littleEndian`  
<span class="badge inline optional">Optional</span> Indicates whether the 32-bit float is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is written.

### Return value

[`undefined`](../undefined).

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would store beyond the end of the view.

## Examples

### Using the setFloat32 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.setFloat32(1, 3);
    dataview.getFloat32(1); // 3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.setfloat32">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.setfloat32</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setFloat32`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setFloat32" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setFloat32</a>

# DataView.prototype.setFloat64()

The `setFloat64()` method stores a signed 64-bit float (double) value at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    setFloat64(byteOffset, value)
    setFloat64(byteOffset, value, littleEndian)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to store the data.

`value`  
The value to set.

`littleEndian`  
<span class="badge inline optional">Optional</span> Indicates whether the 64-bit float is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is written.

### Return value

[`undefined`](../undefined).

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would store beyond the end of the view.

## Examples

### Using the setFloat64 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.setFloat64(0, 3);
    dataview.getFloat64(0); // 3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.setfloat64">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.setfloat64</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setFloat64`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setFloat64" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setFloat64</a>

# Date.prototype.setFullYear()

The `setFullYear()` method sets the full year for a specified date according to local time. Returns new timestamp.

## Syntax

    setFullYear(yearValue)
    setFullYear(yearValue, monthValue)
    setFullYear(yearValue, monthValue, dateValue)

### Parameters

`yearValue`  
An integer specifying the numeric value of the year, for example, 1995.

`monthValue`  
Optional. An integer between 0 and 11 representing the months January through December.

`dateValue`  
Optional. An integer between 1 and 31 representing the day of the month. If you specify the `dateValue` parameter, you must also specify the `monthValue`.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date.

## Description

If you do not specify the `monthValue` and `dateValue` parameters, the values returned from the [`getMonth()`](getmonth) and [`getDate()`](getdate) methods are used.

If a parameter you specify is outside of the expected range, `setFullYear()` attempts to update the other parameters and the date information in the [`Date`](../date) object accordingly. For example, if you specify 15 for `monthValue`, the year is incremented by 1 (`yearValue + 1`), and 3 is used for the month.

## Examples

### Using setFullYear()

    var theBigDay = new Date();
    theBigDay.setFullYear(1997);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setfullyear">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setfullyear</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setFullYear`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCFullYear()`](getutcfullyear)
-   [`Date.prototype.setUTCFullYear()`](setutcfullyear)
-   [`Date.prototype.setYear()`](setyear)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setFullYear" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setFullYear</a>

# Date.prototype.setHours()

The `setHours()` method sets the hours for a specified date according to local time, and returns the number of milliseconds since January 1, 1970 00:00:00 UTC until the time represented by the updated [`Date`](../date) instance.

## Syntax

    setHours(hoursValue)
    setHours(hoursValue, minutesValue)
    setHours(hoursValue, minutesValue, secondsValue)
    setHours(hoursValue, minutesValue, secondsValue, msValue)

### Parameters

`hoursValue`  
Ideally, an integer between 0 and 23, representing the hour. If a value greater than 23 is provided, the datetime will be incremented by the extra hours.

`minutesValue`  
Optional. Ideally, an integer between 0 and 59, representing the minutes. If a value greater than 59 is provided, the datetime will be incremented by the extra minutes.

`secondsValue`  
Optional. Ideally, an integer between 0 and 59, representing the seconds. If a value greater than 59 is provided, the datetime will be incremented by the extra seconds. If you specify the `secondsValue` parameter, you must also specify the `minutesValue`.

`msValue`  
Optional. Ideally, a number between 0 and 999, representing the milliseconds. If a value greater than 999 is provided, the datetime will be incremented by the extra milliseconds. If you specify the `msValue` parameter, you must also specify the `minutesValue` and `secondsValue`.

### Return value

The number of milliseconds between January 1, 1970 00:00:00 UTC and the updated date.

## Description

If you do not specify the `minutesValue`, `secondsValue`, and `msValue` parameters, the values returned from the [`getMinutes()`](getminutes), [`getSeconds()`](getseconds), and [`getMilliseconds()`](getmilliseconds) methods are used.

If a parameter you specify is outside of the expected range, `setHours()` attempts to update the date information in the [`Date`](../date) object accordingly. For example, if you use 100 for `secondsValue`, the minutes will be incremented by 1 (`minutesValue + 1`), and 40 will be used for seconds.

## Examples

### Using setHours()

    var theBigDay = new Date();
    theBigDay.setHours(7);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.sethours">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.sethours</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setHours`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getHours()`](gethours)
-   [`Date.prototype.setUTCHours()`](setutchours)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setHours" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setHours</a>

# DataView.prototype.setInt16()

The `setInt16()` method stores a signed 16-bit integer (short) value at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    setInt16(byteOffset, value)
    setInt16(byteOffset, value, littleEndian)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to store the data.

`value`  
The value to set.

`littleEndian`  
<span class="badge inline optional">Optional</span> Indicates whether the 16-bit int is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is written.

### Return value

[`undefined`](../undefined).

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would store beyond the end of the view.

## Examples

### Using the setInt16 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.setInt16(1, 3);
    dataview.getInt16(1); // 3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.setint16">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.setint16</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setInt16`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setInt16" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setInt16</a>

# DataView.prototype.setInt32()

The `setInt32()` method stores a signed 32-bit integer (long) value at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    setInt32(byteOffset, value)
    setInt32(byteOffset, value, littleEndian)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to store the data.

`value`  
The value to set.

`littleEndian`  
<span class="badge inline optional">Optional</span> Indicates whether the 32-bit int is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is written.

### Return value

[`undefined`](../undefined).

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would store beyond the end of the view.

## Examples

### Using the setInt32 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.setInt32(1, 3);
    dataview.getInt32(1); // 3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.setint32">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.setint32</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setInt32`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setInt32" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setInt32</a>

# DataView.prototype.setInt8()

The `setInt8()` method stores a signed 8-bit integer (byte) value at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    setInt8(byteOffset, value)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to store the data.

`value`  
The value to set.

### Return value

[`undefined`](../undefined).

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would store beyond the end of the view.

## Examples

### Using the setInt8 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.setInt8(1, 3);
    dataview.getInt8(1); // 3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.setint8">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.setint8</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setInt8`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setInt8" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setInt8</a>

# Date.prototype.setMilliseconds()

The `setMilliseconds()` method sets the milliseconds for a specified date according to local time.

## Syntax

    setMilliseconds(millisecondsValue)

### Parameters

`millisecondsValue`  
A number between 0 and 999, representing the milliseconds.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date.

## Description

If you specify a number outside the expected range, the date information in the [`Date`](../date) object is updated accordingly. For example, if you specify 1005, the number of seconds is incremented by 1, and 5 is used for the milliseconds.

## Examples

### Using setMilliseconds()

    var theBigDay = new Date();
    theBigDay.setMilliseconds(100);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setmilliseconds">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setmilliseconds</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setMilliseconds`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getMilliseconds()`](getmilliseconds)
-   [`Date.prototype.setUTCMilliseconds()`](setutcmilliseconds)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds</a>

# Date.prototype.setMinutes()

The `setMinutes()` method sets the minutes for a specified date according to local time.

## Syntax

    setMinutes(minutesValue)
    setMinutes(minutesValue, secondsValue)
    setMinutes(minutesValue, secondsValue, msValue)

### Parameters

`minutesValue`  
An integer between 0 and 59, representing the minutes.

`secondsValue`  
Optional. An integer between 0 and 59, representing the seconds. If you specify the `secondsValue` parameter, you must also specify the `minutesValue`.

`msValue`  
Optional. A number between 0 and 999, representing the milliseconds. If you specify the `msValue` parameter, you must also specify the `minutesValue` and `secondsValue`.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date.

## Description

If you do not specify the `secondsValue` and `msValue` parameters, the values returned from [`getSeconds()`](getseconds) and [`getMilliseconds()`](getmilliseconds) methods are used.

If a parameter you specify is outside of the expected range, `setMinutes()` attempts to update the date information in the [`Date`](../date) object accordingly. For example, if you use 100 for `secondsValue`, the minutes will be incremented by 1 (`minutesValue + 1`), and 40 will be used for seconds.

## Examples

### Using setMinutes()

    var theBigDay = new Date();
    theBigDay.setMinutes(45);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setminutes">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setminutes</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setMinutes`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getMinutes()`](getminutes)
-   [`Date.prototype.setUTCMinutes()`](setutcminutes)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMinutes" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMinutes</a>

# Date.prototype.setMonth()

The `setMonth()` method sets the month for a specified date according to the currently set year.

## Syntax

    setMonth(monthValue)
    setMonth(monthValue, dayValue)

### Parameters

`monthValue`  
A zero-based integer representing the month of the year offset from the start of the year. So, 0 represents January, 11 represents December, -1 represents December of the previous year, and 12 represents January of the following year.

`dayValue`  
Optional. An integer from 1 to 31, representing the day of the month.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date.

## Description

If you do not specify the `dayValue` parameter, the value returned from the [`getDate()`](getdate) method is used.

If a parameter you specify is outside of the expected range, `setMonth()` attempts to update the date information in the [`Date`](../date) object accordingly. For example, if you use 15 for `monthValue`, the year will be incremented by 1, and 3 will be used for month.

The current day of month will have an impact on the behavior of this method. Conceptually it will add the number of days given by the current day of the month to the 1st day of the new month specified as the parameter, to return the new date. For example, if the current value is 31st August 2016, calling setMonth with a value of 1 will return 2nd March 2016. This is because in 2016 February had 29 days.

## Examples

### Using setMonth()

    var theBigDay = new Date();
    theBigDay.setMonth(6);

    //Watch out for end of month transitions
    var endOfMonth = new Date(2016, 7, 31);
    endOfMonth.setMonth(1);
    console.log(endOfMonth); //Wed Mar 02 2016 00:00:00

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setmonth">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setmonth</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setMonth`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getMonth()`](getmonth)
-   [`Date.prototype.setUTCMonth()`](setutcmonth)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth</a>

# Object.setPrototypeOf()

The `Object.setPrototypeOf()` method sets the prototype (i.e., the internal `[[Prototype]]` property) of a specified object to another object or [`null`](../null).

**Warning:** Changing the `[[Prototype]]` of an object is, by the nature of [how modern JavaScript engines optimize property accesses](https://mathiasbynens.be/notes/prototypes), currently a very slow operation in every browser and JavaScript engine. In addition, the effects of altering inheritance are subtle and far-flung, and are not limited to the time spent in the `Object.setPrototypeOf(...)` statement, but may extend to **_any_** code that has access to any object whose `[[Prototype]]` has been altered.

Because this feature is a part of the language, it is still the burden on engine developers to implement that feature performantly (ideally). Until engine developers address this issue, if you are concerned about performance, you should avoid setting the `[[Prototype]]` of an object. Instead, create a new object with the desired `[[Prototype]]` using [`Object.create()`](create).

## Syntax

    Object.setPrototypeOf(obj, prototype)

### Parameters

`obj`  
The object which is to have its prototype set.

`prototype`  
The object's new prototype (an object or [`null`](../null)).

### Return value

The specified object.

## Description

Throws a [`TypeError`](../typeerror) exception if the object whose `[[Prototype]]` is to be modified is non-extensible according to [`Object.isExtensible()`](isextensible). Does nothing if the `prototype` parameter isn't an object or [`null`](../null) (i.e., number, string, boolean, or [`undefined`](../undefined)). Otherwise, this method changes the `[[Prototype]]` of `obj` to the new value.

`Object.setPrototypeOf()` is in the ECMAScript 2015 specification. It is generally considered the proper way to set the prototype of an object, vs. the more controversial [`Object.prototype.__proto__`](proto) property.

## Appending Prototype Chains

A combination of `Object.getPrototypeOf()` and [`Object.prototype.__proto__`](proto) permits appending a whole prototype chain to a new prototype object:

    /**
    *** Object.appendChain(@object, @prototype)
    *
    * Appends the first non-native prototype of a chain to a new prototype.
    * Returns @object (if it was a primitive value it will transformed into an object).
    *
    *** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body")
    *** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body")
    *
    * Appends the first non-native prototype of a chain to the native Function.prototype object, then appends a
    * new Function(["@arg"(s)], "@function_body") to that chain.
    * Returns the function.
    *
    **/

    Object.appendChain = function(oChain, oProto) {
      if (arguments.length < 2) {
        throw new TypeError('Object.appendChain - Not enough arguments');
      }
      if (typeof oProto !== 'object' && typeof oProto !== 'string') {
        throw new TypeError('second argument to Object.appendChain must be an object or a string');
      }

      var oNewProto = oProto,
          oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain);

      for (var o1st = this.getPrototypeOf(o2nd);
        o1st !== Object.prototype && o1st !== Function.prototype;
        o1st = this.getPrototypeOf(o2nd)
      ) {
        o2nd = o1st;
      }

      if (oProto.constructor === String) {
        oNewProto = Function.prototype;
        oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1));
        this.setPrototypeOf(oReturn, oLast);
      }

      this.setPrototypeOf(o2nd, oNewProto);
      return oReturn;
    }

### Usage

#### First example: Appending a chain to a prototype

    function Mammal() {
      this.isMammal = 'yes';
    }

    function MammalSpecies(sMammalSpecies) {
      this.species = sMammalSpecies;
    }

    MammalSpecies.prototype = new Mammal();
    MammalSpecies.prototype.constructor = MammalSpecies;

    var oCat = new MammalSpecies('Felis');

    console.log(oCat.isMammal); // 'yes'

    function Animal() {
      this.breathing = 'yes';
    }

    Object.appendChain(oCat, new Animal());

    console.log(oCat.breathing); // 'yes'

#### Second example: Transforming a primitive value into an instance of its constructor and append its chain to a prototype

    function MySymbol() {
      this.isSymbol = 'yes';
    }

    var nPrime = 17;

    console.log(typeof nPrime); // 'number'

    var oPrime = Object.appendChain(nPrime, new MySymbol());

    console.log(oPrime); // '17'
    console.log(oPrime.isSymbol); // 'yes'
    console.log(typeof oPrime); // 'object'

#### Third example: Appending a chain to the Function.prototype object and appending a new function to that chain

    function Person(sName) {
      this.identity = sName;
    }

    var george = Object.appendChain(new Person('George'),
                                    'console.log("Hello guys!!");');

    console.log(george.identity); // 'George'
    george(); // 'Hello guys!!'

## Examples

### Using Object.setPrototypeOf

    var dict = Object.setPrototypeOf({}, null);

## Polyfill

Using the older [`Object.prototype.__proto__`](proto) property, we can easily define `Object.setPrototypeOf` if it isn't available already:

    if (!Object.setPrototypeOf) {
        // Only works in Chrome and FireFox, does not work in IE:
         Object.prototype.setPrototypeOf = function(obj, proto) {
             if(obj.__proto__) {
                 obj.__proto__ = proto;
                 return obj;
             } else {
                 // If you want to return prototype of Object.create(null):
                 var Fn = function() {
                     for (var key in obj) {
                         Object.defineProperty(this, key, {
                             value: obj[key],
                         });
                     }
                 };
                 Fn.prototype = proto;
                 return new Fn();
             }
         }
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-object.setprototypeof">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-object.setprototypeof</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setPrototypeOf`

34

12

31

11

21

9

37

34

31

21

9

2.0

## See also

-   [`Reflect.setPrototypeOf()`](../reflect/setprototypeof)
-   [`Object.prototype.isPrototypeOf()`](isprototypeof)
-   [`Object.getPrototypeOf()`](getprototypeof)
-   [`Object.prototype.__proto__`](proto)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf</a>

# Date.prototype.setSeconds()

The `setSeconds()` method sets the seconds for a specified date according to local time.

## Syntax

    setSeconds(secondsValue)
    setSeconds(secondsValue, msValue)

### Parameters

`secondsValue`  
An integer between 0 and 59, representing the seconds.

`msValue` <span class="badge inline optional">Optional</span>  
Optional. A number between 0 and 999, representing the milliseconds.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date.

## Description

If you do not specify the `msValue` parameter, the value returned from the [`getMilliseconds()`](getmilliseconds) method is used.

If a parameter you specify is outside of the expected range, `setSeconds()` attempts to update the date information in the [`Date`](../date) object accordingly. For example, if you use 100 for `secondsValue`, the minutes stored in the [`Date`](../date) object will be incremented by 1, and 40 will be used for seconds.

## Examples

### Using setSeconds()

    var theBigDay = new Date();
    theBigDay.setSeconds(30);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setseconds">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setseconds</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setSeconds`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getSeconds()`](getseconds)
-   [`Date.prototype.setUTCSeconds()`](setutcseconds)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setSeconds" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setSeconds</a>

# Date.prototype.setTime()

The `setTime()` method sets the [`Date`](../date) object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC.

## Syntax

    setTime(timeValue)

### Parameters

`timeValue`  
An integer representing the number of milliseconds since 1 January 1970, 00:00:00 UTC.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date (effectively, the value of the argument).

## Description

Use the `setTime()` method to help assign a date and time to another [`Date`](../date) object.

## Examples

### Using setTime()

    var theBigDay = new Date('July 1, 1999');
    var sameAsBigDay = new Date();
    sameAsBigDay.setTime(theBigDay.getTime());

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.settime">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Date.prototype.setTime' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setTime`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getTime()`](gettime)
-   [`Date.prototype.setUTCHours()`](setutchours)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setTime" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setTime</a>

# DataView.prototype.setUint16()

The `setUint16()` method stores an unsigned 16-bit integer (unsigned short) value at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    setUint16(byteOffset, value)
    setUint16(byteOffset, value, littleEndian)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to store the data.

`value`  
The value to set.

`littleEndian`  
<span class="badge inline optional">Optional</span> Indicates whether the 16-bit int is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is written.

### Return value

[`undefined`](../undefined).

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would store beyond the end of the view.

## Examples

### Using the setUint16 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.setUint16(1, 3);
    dataview.getUint16(1); // 3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.setuint16">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.setuint16</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setUint16`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setUint16" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setUint16</a>

# DataView.prototype.setUint32()

The `setUint32()` method stores an unsigned 32-bit integer (unsigned long) value at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    setUint32(byteOffset, value)
    setUint32(byteOffset, value, littleEndian)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to store the data.

`value`  
The value to set.

`littleEndian`  
<span class="badge inline optional">Optional</span> Indicates whether the 32-bit int is stored in [little- or big-endian](https://developer.mozilla.org/en-US/docs/Glossary/Endianness) format. If `false` or `undefined`, a big-endian value is written.

### Return value

[`undefined`](../undefined).

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would store beyond the end of the view.

## Examples

### Using the setUint32 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.setUint32(1, 3);
    dataview.getUint32(1); // 3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.setuint32">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.setuint32</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setUint32`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setUint32" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setUint32</a>

# DataView.prototype.setUint8()

The `setUint8()` method stores an unsigned 8-bit integer (byte) value at the specified byte offset from the start of the [`DataView`](../dataview).

## Syntax

    setUint8(byteOffset, value)

### Parameters

`byteOffset`  
The offset, in byte, from the start of the view where to store the data.

`value`  
The value to set.

### Return value

[`undefined`](../undefined).

### Errors thrown

[`RangeError`](../rangeerror)  
Thrown if the `byteOffset` is set such as it would store beyond the end of the view.

## Examples

### Using the setUint8 method

    var buffer = new ArrayBuffer(8);
    var dataview = new DataView(buffer);
    dataview.setUint8(1, 3);
    dataview.getUint8(1); // 3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-dataview.prototype.setuint8">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-dataview.prototype.setuint8</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setUint8`

9

12

15

10

12.1

5.1

4

18

15

12.1

4.2

1.0

## See also

-   [`DataView`](../dataview)
-   [`ArrayBuffer`](../arraybuffer)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setUint8" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setUint8</a>

# Date.prototype.setUTCDate()

The `setUTCDate()` method changes the day of the month of a given [`Date`](../date) instance, based on UTC time.

To instead change the day of the month for a given [`Date`](../date) instance based on local time, use the [`setDate()`](setdate) method.

## Syntax

    setUTCDate(dayValue)

### Parameters

`dayValue`  
An integer from 1 to 31, representing the day of the month.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date.

## Description

If a parameter you specify is outside of the expected range, `setUTCDate()` attempts to update the date information in the [`Date`](../date) object accordingly. For example, if you use 40 for `dayValue`, and the month stored in the [`Date`](../date) object is June, the day will be changed to 10 and the month will be incremented to July.

## Examples

### Using setUTCDate()

    var theBigDay = new Date();
    theBigDay.setUTCDate(20);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setutcdate">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setutcdate</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setUTCDate`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCDate()`](getutcdate)
-   [`Date.prototype.setDate()`](setdate)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCDate" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCDate</a>

# Date.prototype.setUTCFullYear()

The `setUTCFullYear()` method sets the full year for a specified date according to universal time.

## Syntax

    setUTCFullYear(yearValue)
    setUTCFullYear(yearValue, monthValue)
    setUTCFullYear(yearValue, monthValue, dayValue)

### Parameters

`yearValue`  
An integer specifying the numeric value of the year, for example, 1995.

`monthValue`  
Optional. An integer between 0 and 11 representing the months January through December.

`dayValue`  
Optional. An integer between 1 and 31 representing the day of the month. If you specify the `dayValue` parameter, you must also specify the `monthValue`.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date.

## Description

If you do not specify the `monthValue` and `dayValue` parameters, the values returned from the [`getUTCMonth()`](getutcmonth) and [`getUTCDate()`](getutcdate) methods are used.

If a parameter you specify is outside of the expected range, `setUTCFullYear()` attempts to update the other parameters and the date information in the [`Date`](../date) object accordingly. For example, if you specify 15 for `monthValue`, the year is incremented by 1 (`yearValue + 1`), and 3 is used for the month.

## Examples

### Using setUTCFullYear()

    var theBigDay = new Date();
    theBigDay.setUTCFullYear(1997);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setutcfullyear">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setutcfullyear</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setUTCFullYear`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCFullYear()`](getutcfullyear)
-   [`Date.prototype.setFullYear()`](setfullyear)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear</a>

# Date.prototype.setUTCHours()

The `setUTCHours()` method sets the hour for a specified date according to universal time, and returns the number of milliseconds since January 1, 1970 00:00:00 UTC until the time represented by the updated [`Date`](../date) instance.

## Syntax

    setUTCHours(hoursValue)
    setUTCHours(hoursValue, minutesValue)
    setUTCHours(hoursValue, minutesValue, secondsValue)
    setUTCHours(hoursValue, minutesValue, secondsValue, msValue)

### Parameters

`hoursValue`  
An integer between 0 and 23, representing the hour.

`minutesValue`  
Optional. An integer between 0 and 59, representing the minutes.

`secondsValue`  
Optional. An integer between 0 and 59, representing the seconds. If you specify the `secondsValue` parameter, you must also specify the `minutesValue`.

`msValue`  
Optional. A number between 0 and 999, representing the milliseconds. If you specify the `msValue` parameter, you must also specify the `minutesValue` and `secondsValue`.

### Return value

The number of milliseconds between January 1, 1970 00:00:00 UTC and the updated date.

## Description

If you do not specify the `minutesValue`, `secondsValue`, and `msValue` parameters, the values returned from the [`getUTCMinutes()`](getutcminutes), [`getUTCSeconds()`](getutcseconds), and [`getUTCMilliseconds()`](getutcmilliseconds) methods are used.

If a parameter you specify is outside of the expected range, `setUTCHours()` attempts to update the date information in the [`Date`](../date) object accordingly. For example, if you use 100 for `secondsValue`, the minutes will be incremented by 1 (`minutesValue + 1`), and 40 will be used for seconds.

## Examples

### Using setUTCHours()

    var theBigDay = new Date();
    theBigDay.setUTCHours(8);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setutchours">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setutchours</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setUTCHours`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCHours()`](getutchours)
-   [`Date.prototype.setHours()`](sethours)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCHours" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCHours</a>

# Date.prototype.setUTCMilliseconds()

The `setUTCMilliseconds()` method sets the milliseconds for a specified date according to universal time.

## Syntax

    setUTCMilliseconds(millisecondsValue)

### Parameters

`millisecondsValue`  
A number between 0 and 999, representing the milliseconds.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date.

## Description

If a parameter you specify is outside of the expected range, `setUTCMilliseconds()` attempts to update the date information in the [`Date`](../date) object accordingly. For example, if you use 1100 for `millisecondsValue`, the seconds stored in the [`Date`](../date) object will be incremented by 1, and 100 will be used for milliseconds.

## Examples

### Using setUTCMilliseconds()

    var theBigDay = new Date();
    theBigDay.setUTCMilliseconds(500);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setutcmilliseconds">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setutcmilliseconds</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setUTCMilliseconds`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCMilliseconds()`](getutcmilliseconds)
-   [`Date.prototype.setMilliseconds()`](setmilliseconds)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds</a>

# Date.prototype.setUTCMinutes()

The `setUTCMinutes()` method sets the minutes for a specified date according to universal time.

## Syntax

    setUTCMinutes(minutesValue)
    setUTCMinutes(minutesValue, secondsValue)
    setUTCMinutes(minutesValue, secondsValue, msValue)

### Parameters

`minutesValue`  
An integer between 0 and 59, representing the minutes.

`secondsValue`  
Optional. An integer between 0 and 59, representing the seconds. If you specify the `secondsValue` parameter, you must also specify the `minutesValue`.

`msValue`  
Optional. A number between 0 and 999, representing the milliseconds. If you specify the `msValue` parameter, you must also specify the `minutesValue` and `secondsValue`.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date.

## Description

If you do not specify the `secondsValue` and `msValue` parameters, the values returned from [`getUTCSeconds()`](getutcseconds) and [`getUTCMilliseconds()`](getutcmilliseconds) methods are used.

If a parameter you specify is outside of the expected range, `setUTCMinutes()` attempts to update the date information in the [`Date`](../date) object accordingly. For example, if you use 100 for `secondsValue`, the minutes will be incremented by 1 (`minutesValue + 1`), and 40 will be used for seconds.

## Examples

### Using setUTCMinutes()

    var theBigDay = new Date();
    theBigDay.setUTCMinutes(43);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setutcminutes">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setutcminutes</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setUTCMinutes`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCMinutes()`](getutcminutes)
-   [`Date.prototype.setMinutes()`](setminutes)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes</a>

# Date.prototype.setUTCMonth()

The `setUTCMonth()` method sets the month for a specified date according to universal time.

## Syntax

    setUTCMonth(monthValue)
    setUTCMonth(monthValue, dayValue)

### Parameters

`monthValue`  
An integer between 0 and 11, representing the months January through December.

`dayValue`  
Optional. An integer from 1 to 31, representing the day of the month.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date.

## Description

If you do not specify the `dayValue` parameter, the value returned from the [`getUTCDate()`](getutcdate) method is used.

If a parameter you specify is outside of the expected range, `setUTCMonth()` attempts to update the date information in the [`Date`](../date) object accordingly. For example, if you use 15 for `monthValue`, the year will be incremented by 1, and 3 will be used for month.

## Examples

### Using setUTCMonth()

    var theBigDay = new Date();
    theBigDay.setUTCMonth(11);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setutcmonth">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setutcmonth</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setUTCMonth`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCMonth()`](getutcmonth)
-   [`Date.prototype.setMonth()`](setmonth)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth</a>

# Date.prototype.setUTCSeconds()

The `setUTCSeconds()` method sets the seconds for a specified date according to universal time.

## Syntax

    setUTCSeconds(secondsValue)
    setUTCSeconds(secondsValue, msValue)

### Parameters

`secondsValue`  
An integer between 0 and 59, representing the seconds.

`msValue`  
Optional. A number between 0 and 999, representing the milliseconds.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date.

## Description

If you do not specify the `msValue` parameter, the value returned from the [`getUTCMilliseconds()`](getutcmilliseconds) method is used.

If a parameter you specify is outside of the expected range, `setUTCSeconds()` attempts to update the date information in the [`Date`](../date) object accordingly. For example, if you use 100 for `secondsValue`, the minutes stored in the [`Date`](../date) object will be incremented by 1, and 40 will be used for seconds.

## Examples

### Using setUTCSeconds()

    var theBigDay = new Date();
    theBigDay.setUTCSeconds(20);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setutcseconds">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setutcseconds</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setUTCSeconds`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getUTCSeconds()`](getutcseconds)
-   [`Date.prototype.setSeconds()`](setseconds)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds</a>

# Date.prototype.setYear()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `setYear()` method sets the year for a specified date according to local time. Because `setYear()` does not set full years ("year 2000 problem"), it is no longer used and has been replaced by the [`setFullYear()`](setfullyear) method.

## Syntax

    setYear(yearValue)

### Parameters

`yearValue`  
An integer.

### Return value

The number of milliseconds between 1 January 1970 00:00:00 UTC and the updated date.

## Description

If `yearValue` is a number between 0 and 99 (inclusive), then the year for `dateObj` is set to `1900 + yearValue`. Otherwise, the year for `dateObj` is set to `yearValue`.

## Examples

### Using setYear()

The first two lines set the year to 1996. The third sets the year to 2000.

    var theBigDay = new Date();

    theBigDay.setYear(96);
    theBigDay.setYear(1996);
    theBigDay.setYear(2000);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-date.prototype.setyear">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-date.prototype.setyear</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`setYear`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Date.prototype.getFullYear()`](getfullyear)
-   [`Date.prototype.getUTCFullYear()`](getutcfullyear)
-   [`Date.prototype.setFullYear()`](setfullyear)
-   [`Date.prototype.setUTCFullYear()`](setutcfullyear)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setYear" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setYear</a>

# SharedArrayBuffer

The `SharedArrayBuffer` object is used to represent a generic, fixed-length raw binary data buffer, similar to the [`ArrayBuffer`](arraybuffer) object, but in a way that they can be used to create views on shared memory. Unlike an `ArrayBuffer`, a `SharedArrayBuffer` cannot become detached.

## Description

### Allocating and sharing memory

To share memory using [`SharedArrayBuffer`](sharedarraybuffer) objects from one agent in the cluster to another (an agent is either the web page's main program or one of its web workers), `postMessage` and [structured cloning](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) is used.

The structured clone algorithm accepts `SharedArrayBuffers` and `TypedArrays` mapped onto `SharedArrayBuffers`. In both cases, the `SharedArrayBuffer` object is transmitted to the receiver resulting in a new, private SharedArrayBuffer object in the receiving agent (just as for [`ArrayBuffer`](arraybuffer)). However, the shared data block referenced by the two `SharedArrayBuffer` objects is the same data block, and a side effect to the block in one agent will eventually become visible in the other agent.

    var sab = new SharedArrayBuffer(1024);
    worker.postMessage(sab);

### Updating and synchronizing shared memory with atomic operations

Shared memory can be created and updated simultaneously in workers or the main thread. Depending on the system (the CPU, the OS, the Browser) it can take a while until the change is propagated to all contexts. To synchronize, [atomic](atomics) operations are needed.

### APIs which use SharedArrayBuffer objects

-   [`WebGLRenderingContext.bufferData()`](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData)
-   [`WebGLRenderingContext.bufferSubData()`](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferSubData)
-   [`WebGL2RenderingContext.getBufferSubData()`](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/getBufferSubData)

### Security requirements

Shared memory and high-resolution timers were effectively [disabled at the start of 2018](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/) in light of [Spectre](<https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)>). In 2020, a new, secure approach has been standardized to re-enable shared memory. With a few security measures, `postMessage()` will no longer throw for `SharedArrayBuffer` objects and shared memory across threads will be available:

As a baseline requirement, your document needs to be in a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).

For top-level documents, two headers will need to be set to cross-origin isolate your site:

-   [`Cross-Origin-Opener-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) with `same-origin` as value (protects your origin from attackers)
-   [`Cross-Origin-Embedder-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) with `require-corp` as value (protects victims from your origin)

<!-- -->

    Cross-Origin-Opener-Policy: same-origin
    Cross-Origin-Embedder-Policy: require-corp

To check if cross origin isolation has been successful, you can test against the `crossOriginIsolated` property available to window and worker contexts:

    if (crossOriginIsolated) {
      // Post SharedArrayBuffer
    } else {
      // Do something else
    }

See also [Planned changes to shared memory](sharedarraybuffer/planned_changes) which is starting to roll out to browsers (Firefox 79, for example.)

### Always use the new operator to create a SharedArrayBuffer

`SharedArrayBuffer` constructors are required to be constructed with a [`new`](../operators/new) operator. Calling a `SharedArrayBuffer` constructor as a function without `new` will throw a [`TypeError`](typeerror).

    var sab = SharedArrayBuffer(1024);
    // TypeError: calling a builtin SharedArrayBuffer constructor
    // without new is forbidden

    var sab = new SharedArrayBuffer(1024);

## Constructor

[`SharedArrayBuffer()`](sharedarraybuffer/sharedarraybuffer)  
Creates a new `SharedArrayBuffer` object.

## Instance properties

[`SharedArrayBuffer.prototype.byteLength`](sharedarraybuffer/bytelength)  
The size, in bytes, of the array. This is established when the array is constructed and cannot be changed. **Read only.**

## Instance methods

[`SharedArrayBuffer.prototype.slice(begin, end)`](sharedarraybuffer/slice)  
Returns a new `SharedArrayBuffer` whose contents are a copy of this `SharedArrayBuffer`'s bytes from `begin`, inclusive, up to `end`, exclusive. If either `begin` or `end` is negative, it refers to an index from the end of the array, as opposed to from the beginning.

## Examples

### Creating a new SharedArrayBuffer

    var sab = new SharedArrayBuffer(1024);

### Slicing the SharedArrayBuffer

    sab.slice();    // SharedArrayBuffer { byteLength: 1024 }
    sab.slice(2);   // SharedArrayBuffer { byteLength: 1022 }
    sab.slice(-2);  // SharedArrayBuffer { byteLength: 2 }
    sab.slice(0, 1); // SharedArrayBuffer { byteLength: 1 }

### Using it in a WebGL buffer

    const canvas = document.querySelector('canvas');
    const gl = canvas.getContext('webgl');
    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, sab, gl.STATIC_DRAW);

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-sharedarraybuffer-objects">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-sharedarraybuffer-objects</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`SharedArrayBuffer`

68

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

79

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

89

`SharedArrayBuffer` is gated behind COOP/COEP. For more detail, read [Making your website "cross-origin isolated" using COOP and COEP](https://web.dev/coop-coep/).

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

79

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11

No

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`SharedArrayBuffer`

68

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

79

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

89

`SharedArrayBuffer` is gated behind COOP/COEP. For more detail, read [Making your website "cross-origin isolated" using COOP and COEP](https://web.dev/coop-coep/).

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

79

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11

No

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`byteLength`

68

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

79

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

89

`SharedArrayBuffer` is gated behind COOP/COEP. For more detail, read [Making your website "cross-origin isolated" using COOP and COEP](https://web.dev/coop-coep/).

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

79

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11

No

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

`slice`

68

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

79

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

89

`SharedArrayBuffer` is gated behind COOP/COEP. For more detail, read [Making your website "cross-origin isolated" using COOP and COEP](https://web.dev/coop-coep/).

60-63

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

79

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11

No

Chrome disabled SharedArrayBuffer on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

## See also

-   [`Atomics`](atomics)
-   [`ArrayBuffer`](arraybuffer)
-   [JavaScript typed arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)
-   [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)
-   [parlib-simple](https://github.com/lars-t-hansen/parlib-simple) – a simple library providing synchronization and work distribution abstractions.
-   [Shared Memory – a brief tutorial](https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md)
-   [A Taste of JavaScript's New Parallel Primitives – Mozilla Hacks](https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer</a>

# Array.prototype.shift()

The `shift()` method removes the **first** element from an array and returns that removed element. This method changes the length of the array.

## Syntax

    shift()

### Return value

The removed element from the array; [`undefined`](../undefined) if the array is empty.

## Description

The `shift` method removes the element at the zeroeth index and shifts the values at consecutive indexes down, then returns the removed value. If the [`length`](length) property is 0, [`undefined`](../undefined) is returned.

`shift` is intentionally generic; this method can be [called](../function/call) or [applied](../function/apply) to objects resembling arrays. Objects which do not contain a `length` property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.

[`Array.prototype.pop()`](pop) has similar behavior to `shift`, but applied to the last element in an array.

## Examples

### Removing an element from an array

The following code displays the `myFish` array before and after removing its first element. It also displays the removed element:

    var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

    console.log('myFish before:', JSON.stringify(myFish));
    // myFish before: ['angel', 'clown', 'mandarin', 'surgeon']

    var shifted = myFish.shift();

    console.log('myFish after:', myFish);
    // myFish after: ['clown', 'mandarin', 'surgeon']

    console.log('Removed this element:', shifted);
    // Removed this element: angel

### Using shift() method in while loop

The shift() method is often used in condition inside while loop. In the following example every iteration will remove the next element from an array, until it is empty:

    var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];

    while( typeof (i = names.shift()) !== 'undefined' ) {
        console.log(i);
    }
    // Andrew, Edward, Paul, Chris, John

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.shift">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.shift</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`shift`

1

12

1

5.5

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Array.prototype.push()`](push)
-   [`Array.prototype.pop()`](pop)
-   [`Array.prototype.unshift()`](unshift)
-   [`Array.prototype.concat()`](concat)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift</a>

# Math.sign()

The `Math.sign()` function returns either a **positive** or **negative** +/- 1, indicating the sign of a number passed into the argument. If the number passed into `Math.sign()` is 0, it will return a +/- 0. Note that if the number is positive, an explicit (+) will **not** be returned.

## Syntax

    Math.sign(x)

### Parameters

`x`  
A number. If this argument is not a `number`, it is implicitly converted to one.

### Return value

A number representing the sign of the given argument:

-   If the argument is positive, returns `1`.
-   If the argument is negative, returns `-1`.
-   If the argument is positive zero, returns `0`.
-   If the argument is negative zero, returns `-0`.
-   Otherwise, [`NaN`](../nan) is returned.

## Description

Because `sign()` is a static method of `Math`, you always use it as `Math.sign()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.sign()

    Math.sign(3);     //  1
    Math.sign(-3);    // -1
    Math.sign('-3');  // -1
    Math.sign(0);     //  0
    Math.sign(-0);    // -0
    Math.sign(NaN);   // NaN
    Math.sign('foo'); // NaN
    Math.sign();      // NaN

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.sign">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.sign</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`sign`

38

12

25

No

25

9

38

38

25

25

9

3.0

## See also

-   [A polyfill](https://github.com/behnammodi/polyfill/blob/master/math.polyfill.js)
-   [`Math.abs()`](abs)
-   [`Math.ceil()`](ceil)
-   [`Math.floor()`](floor)
-   [`Math.round()`](round)
-   [`Math.trunc()`](trunc)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign</a>

# Math.sin()

The `Math.sin()` function returns the sine of a number.

## Syntax

    Math.sin(x)

### Parameters

`x`  
A number (given in radians).

### Return value

The sine of the given number.

## Description

The `Math.sin()` method returns a numeric value between -1 and 1, which represents the sine of the angle given in radians.

Because `sin()` is a static method of `Math`, you always use it as `Math.sin()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.sin()

    Math.sin(0);           // 0
    Math.sin(1);           // 0.8414709848078965

    Math.sin(Math.PI / 2); // 1

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.sin">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.sin</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`sin`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.acos()`](acos)
-   [`Math.asin()`](asin)
-   [`Math.atan()`](atan)
-   [`Math.atan2()`](atan2)
-   [`Math.cos()`](cos)
-   [`Math.tan()`](tan)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin</a>

# Math.sinh()

The `Math.sinh()` function returns the hyperbolic sine of a number, that can be expressed using the [constant e](e):

$$\\mathtt{\\operatorname{Math.sinh(x)}} = \\frac{e^{x} - e^{- x}}{2}$$

## Syntax

    Math.sinh(x)

### Parameters

`x`  
A number.

### Return value

The hyperbolic sine of the given number.

## Description

Because `sinh()` is a static method of `Math`, you always use it as `Math.sinh()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Polyfill

This can be emulated with the help of the [`Math.exp()`](exp) function:

    Math.sinh = Math.sinh || function(x) {
      return (Math.exp(x) - Math.exp(-x)) / 2;
    }

or using only one call to the [`Math.exp()`](exp) function:

    Math.sinh = Math.sinh || function(x) {
      var y = Math.exp(x);
      return (y - 1 / y) / 2;
    }

## Examples

### Using Math.sinh()

    Math.sinh(0); // 0
    Math.sinh(1); // 1.1752011936438014

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.sinh">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.sinh</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`sinh`

38

12

25

No

25

8

38

38

25

25

8

3.0

## See also

-   [`Math.acosh()`](acosh)
-   [`Math.asinh()`](asinh)
-   [`Math.atanh()`](atanh)
-   [`Math.cosh()`](cosh)
-   [`Math.tanh()`](tanh)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sinh" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sinh</a>

# Map.prototype.size

The `size` accessor property returns the number of elements in a [`Map`](../map) object.

## Description

The value of `size` is an integer representing how many entries the `Map` object has. A set accessor function for `size` is `undefined`; you can not change this property.

## Examples

### Using size

    var myMap = new Map();
    myMap.set('a', 'alpha');
    myMap.set('b', 'beta');
    myMap.set('g', 'gamma');

    myMap.size // 3

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-get-map.prototype.size">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-get-map.prototype.size</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`size`

38

12

19

From Firefox 13 to Firefox 18, the `size` property was implemented as a `Map.prototype.size()` method, this has been changed to a property in later versions conform to the ECMAScript 2015 specification.

11

25

8

38

38

19

From Firefox 13 to Firefox 18, the `size` property was implemented as a `Map.prototype.size()` method, this has been changed to a property in later versions conform to the ECMAScript 2015 specification.

25

8

3.0

## See also

-   [`Map`](../map)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/size" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/size</a>

# Array.prototype.slice()

The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `start` to `end` (`end` not included) where `start` and `end` represent the index of items in that array. The original array will not be modified.

## Syntax

    slice()
    slice(start)
    slice(start, end)

### Parameters

`start` <span class="badge inline optional">Optional</span>  
Zero-based index at which to start extraction.

A negative index can be used, indicating an offset from the end of the sequence. `slice(-2)` extracts the last two elements in the sequence.

If `start` is undefined, `slice` starts from the index `0`.

If `start` is greater than the index range of the sequence, an empty array is returned.

`end` <span class="badge inline optional">Optional</span>  
Zero-based index _before_ which to end extraction. `slice` extracts up to but not including `end`. For example, `slice(1,4)` extracts the second element through the fourth element (elements indexed 1, 2, and 3).

A negative index can be used, indicating an offset from the end of the sequence. `slice(2,-1)` extracts the third element through the second-to-last element in the sequence.

If `end` is omitted, `slice` extracts through the end of the sequence (`arr.length`).

If `end` is greater than the length of the sequence, `slice` extracts through to the end of the sequence (`arr.length`).

### Return value

A new array containing the extracted elements.

## Description

`slice` does not alter the original array. It returns a shallow copy of elements from the original array. Elements of the original array are copied into the returned array as follows:

-   For object `slice` copies object references into the new array. Both the original and new array refer to the same object. If an object changes, the changes are visible to both the new and original arrays.
-   For strings, numbers and booleans (not [`String`](../string), [`Number`](../number) and [`Boolean`](../boolean) objects), `slice` copies the values into the new array. Changes to the string, number, or boolean in one array do not affect the other array.

If a new element is added to either array, the other array is not affected.

## Examples

### Return a portion of an existing array

    let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
    let citrus = fruits.slice(1, 3)

    // fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
    // citrus contains ['Orange','Lemon']

### Using slice

In the following example, `slice` creates a new array, `newCar`, from `myCar`. Both include a reference to the object `myHonda`. When the color of `myHonda` is changed to purple, both arrays reflect the change.

    // Using slice, create newCar from myCar.
    let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }
    let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']
    let newCar = myCar.slice(0, 2)

    // Display the values of myCar, newCar, and the color of myHonda
    //  referenced from both arrays.
    console.log('myCar = ' + JSON.stringify(myCar))
    console.log('newCar = ' + JSON.stringify(newCar))
    console.log('myCar[0].color = ' + myCar[0].color)
    console.log('newCar[0].color = ' + newCar[0].color)

    // Change the color of myHonda.
    myHonda.color = 'purple'
    console.log('The new color of my Honda is ' + myHonda.color)

    // Display the color of myHonda referenced from both arrays.
    console.log('myCar[0].color = ' + myCar[0].color)
    console.log('newCar[0].color = ' + newCar[0].color)

This script writes:

    myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
             'cherry condition', 'purchased 1997']
    newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
    myCar[0].color = red
    newCar[0].color = red
    The new color of my Honda is purple
    myCar[0].color = purple
    newCar[0].color = purple

### Array-like objects

`slice` method can also be called to convert Array-like objects/collections to a new Array. You just [`bind`](../function/bind) the method to the object. The [`arguments`](../../functions/arguments) inside a function is an example of an 'array-like object'.

    function list() {
      return Array.prototype.slice.call(arguments)
    }

    let list1 = list(1, 2, 3) // [1, 2, 3]

Binding can be done with the [`call()`](../function/call) method of [`Function`](../function) and it can also be reduced using `[].slice.call(arguments)` instead of `Array.prototype.slice.call`.

Anyway, it can be simplified using [`bind`](../function/bind).

    let unboundSlice = Array.prototype.slice
    let slice = Function.prototype.call.bind(unboundSlice)

    function list() {
      return slice(arguments)
    }

    let list1 = list(1, 2, 3) // [1, 2, 3]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.slice">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.slice</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`slice`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [`Array.prototype.splice()`](splice)
-   [`Function.prototype.call()`](../function/call)
-   [`Function.prototype.bind()`](../function/bind)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice</a>

# String.prototype.small()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `small()` method creates a [`<small>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small) HTML element that causes a string to be displayed in a small font.

## Syntax

    small()

### Return value

A string containing a [`<small>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small) HTML element.

## Description

The `small()` method embeds a string in a `<small>` element: "`<small>str</small>`".

## Examples

### Using small()

The following example uses string methods to change the size of a string:

    var worldString = 'Hello, world';

    console.log(worldString.small());     // <small>Hello, world</small>
    console.log(worldString.big());       // <big>Hello, world</big>
    console.log(worldString.fontsize(7)); // <font size="7">Hello, world</fontsize>

With the [`element.style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style) object you can get the element's `style` attribute and manipulate it more generically, for example:

    document.getElementById('yourElemId').style.fontSize = '0.7em';

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.small">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.small</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`small`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.fontsize()`](fontsize)
-   [`String.prototype.big()`](big)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/small" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/small</a>

# Array.prototype.some()

The `some()` method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.

## Syntax

    // Arrow function
    some((element) => { ... } )
    some((element, index) => { ... } )
    some((element, index, array) => { ... } )

    // Callback function
    some(callbackFn)
    some(callbackFn, thisArg)

    // Inline callback function
    some(function callbackFn(element) { ... })
    some(function callbackFn(element, index) { ... })
    some(function callbackFn(element, index, array){ ... })
    some(function callbackFn(element, index, array) { ... }, thisArg)

### Parameters

`callback`  
A function to test for each element, taking three arguments:

`element`  
The current element being processed in the array.

`index`<span class="badge inline optional">Optional</span>  
The index of the current element being processed in the array.

`array`<span class="badge inline optional">Optional</span>  
The array `some()` was called upon.

`thisArg`<span class="badge inline optional">Optional</span>  
A value to use as `this` when executing `callbackFn`.

### Return value

`true` if the callback function returns a [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) value for at least one element in the array. Otherwise, `false`.

## Description

The `some()` method executes the `callbackFn` function once for each element present in the array until it finds the one where `callbackFn` returns a _truthy_ value (a value that becomes true when converted to a Boolean). If such an element is found, `some()` immediately returns `true`. Otherwise, `some()` returns `false`. `callbackFn` is invoked only for indexes of the array with assigned values. It is not invoked for indexes which have been deleted or which have never been assigned values.

`callbackFn` is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.

If a `thisArg` parameter is provided to `some()`, it will be used as the callback's `this` value. Otherwise, the value [`undefined`](../undefined) will be used as its `this` value. The `this` value ultimately observable by `callbackFn` is determined according to [the usual rules for determining the `this` seen by a function](../../operators/this).

`some()` does not mutate the array on which it is called.

The range of elements processed by `some()` is set before the first invocation of `callbackFn`. Elements appended to the array after the call to `some()` begins will not be visited by `callbackFn`. If an existing, unvisited element of the array is changed by `callbackFn`, its value passed to the visiting `callbackFn` will be the value at the time that `some()` visits that element's index. Elements that are deleted are not visited.

**Note:** Calling this method on an empty array returns `false` for any condition!

## Polyfill

`some()` was added to the ECMA-262 standard in the 5<sup>th</sup> edition, and it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of `some()` in implementations which do not natively support it.

This algorithm is exactly the one specified in ECMA-262, 5<sup>th</sup> edition, assuming [`Object`](../object) and [`TypeError`](../typeerror) have their original values and that `fun.call` evaluates to the original value of [`Function.prototype.call()`](../function/call).

    // Production steps of ECMA-262, Edition 5, 15.4.4.17
    // Reference: https://es5.github.io/#x15.4.4.17
    if (!Array.prototype.some) {
      Array.prototype.some = function(fun, thisArg) {
        'use strict';

        if (this == null) {
          throw new TypeError('Array.prototype.some called on null or undefined');
        }

        if (typeof fun !== 'function') {
          throw new TypeError();
        }

        var t = Object(this);
        var len = t.length >>> 0;

        for (var i = 0; i < len; i++) {
          if (i in t && fun.call(thisArg, t[i], i, t)) {
            return true;
          }
        }

        return false;
      };
    }

## Examples

### Testing value of array elements

The following example tests whether any element in the array is bigger than 10.

    function isBiggerThan10(element, index, array) {
      return element > 10;
    }

    [2, 5, 8, 1, 4].some(isBiggerThan10);  // false
    [12, 5, 8, 1, 4].some(isBiggerThan10); // true

### Testing array elements using arrow functions

[Arrow functions](../../functions/arrow_functions) provide a shorter syntax for the same test.

    [2, 5, 8, 1, 4].some(x => x > 10);  // false
    [12, 5, 8, 1, 4].some(x => x > 10); // true

### Checking whether a value exists in an array

To mimic the function of the `includes()` method, this custom function returns `true` if the element exists in the array:

    const fruits = ['apple', 'banana', 'mango', 'guava'];

    function checkAvailability(arr, val) {
      return arr.some(function(arrVal) {
        return val === arrVal;
      });
    }

    checkAvailability(fruits, 'kela');   // false
    checkAvailability(fruits, 'banana'); // true

### Checking whether a value exists using an arrow function

    const fruits = ['apple', 'banana', 'mango', 'guava'];

    function checkAvailability(arr, val) {
      return arr.some(arrVal => val === arrVal);
    }

    checkAvailability(fruits, 'kela');   // false
    checkAvailability(fruits, 'banana'); // true

### Converting any value to Boolean

    const TRUTHY_VALUES = [true, 'true', 1];

    function getBoolean(value) {
      'use strict';

      if (typeof value === 'string') {
        value = value.toLowerCase().trim();
      }

      return TRUTHY_VALUES.some(function(t) {
        return t === value;
      });
    }

    getBoolean(false);   // false
    getBoolean('false'); // false
    getBoolean(1);       // true
    getBoolean('true');  // true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.some">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.some</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`some`

1

12

1.5

9

9.5

3

≤37

18

4

10.1

1

1.0

## See also

-   [`Array.prototype.every()`](every)
-   [`Array.prototype.forEach()`](foreach)
-   [`Array.prototype.find()`](find)
-   [`TypedArray.prototype.some()`](../typedarray/some)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some</a>

# Array.prototype.sort()

The `sort()` method sorts the elements of an array _[in place](https://en.wikipedia.org/wiki/In-place_algorithm)_ and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

The time and space complexity of the sort cannot be guaranteed as it depends on the implementation.

## Syntax

    // Functionless
    sort()

    // Arrow function
    sort((firstEl, secondEl) => { ... } )

    // Compare function
    sort(compareFn)

    // Inline compare function
    sort(function compareFn(firstEl, secondEl) { ... })

### Parameters

`compareFunction` <span class="badge inline optional">Optional</span>  
Specifies a function that defines the sort order. If omitted, the array elements are converted to strings, then sorted according to each character's Unicode code point value.

`firstEl`  
The first element for comparison.

`secondEl`  
The second element for comparison.

### Return value

The sorted array. Note that the array is sorted _[in place](https://en.wikipedia.org/wiki/In-place_algorithm)_, and no copy is made.

## Description

If `compareFunction` is not supplied, all non-`undefined` array elements are sorted by converting them to strings and comparing strings in UTF-16 code units order. For example, "banana" comes before "cherry". In a numeric sort, 9 comes before 80, but because numbers are converted to strings, "80" comes before "9" in the Unicode order. All `undefined` elements are sorted to the end of the array.

**Note:** In UTF-16, Unicode characters above `\uFFFF` are encoded as two surrogate code units, of the range `\uD800`-`\uDFFF`. The value of each code unit is taken separately into account for the comparison. Thus the character formed by the surrogate pair `\uD655\uDE55` will be sorted before the character `\uFF3A`.

If `compareFunction` is supplied, all non-`undefined` array elements are sorted according to the return value of the compare function (all `undefined` elements are sorted to the end of the array, with no call to `compareFunction`). If `a` and `b` are two elements being compared, then:

-   If `compareFunction(a, b)` returns less than 0, leave `a` and `b` unchanged.
-   If `compareFunction(a, b)` returns 0, leave `a` and `b` unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAScript standard only started guaranteeing this behavior [in 2019](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-intro), thus, older browsers may not respect this.
-   If `compareFunction(a, b)` returns greater than 0, sort `b` before `a`.
-   `compareFunction(a, b)` must always return the same value when given a specific pair of elements `a` and `b` as its two arguments. If inconsistent results are returned, then the sort order is undefined.

So, the compare function has the following form:

    function compare(a, b) {
      if (a is less than b by some ordering criterion) {
        return -1;
      }
      if (a is greater than b by the ordering criterion) {
        return 1;
      }
      // a must be equal to b
      return 0;
    }

To compare numbers instead of strings, the compare function can subtract `b` from `a`. The following function will sort the array in ascending order (if it doesn't contain `Infinity` and `NaN`):

    function compareNumbers(a, b) {
      return a - b;
    }

The `sort` method can be conveniently used with [function expressions](../../operators/function):

    var numbers = [4, 2, 5, 1, 3];
    numbers.sort(function(a, b) {
      return a - b;
    });
    console.log(numbers);

    // [1, 2, 3, 4, 5]

ES2015 provides [arrow function expressions](../../functions/arrow_functions) with even shorter syntax.

    let numbers = [4, 2, 5, 1, 3];
    numbers.sort((a, b) => a - b);
    console.log(numbers);

    // [1, 2, 3, 4, 5]

Arrays of objects can be sorted by comparing the value of one of their properties.

    var items = [
      { name: 'Edward', value: 21 },
      { name: 'Sharpe', value: 37 },
      { name: 'And', value: 45 },
      { name: 'The', value: -12 },
      { name: 'Magnetic', value: 13 },
      { name: 'Zeros', value: 37 }
    ];

    // sort by value
    items.sort(function (a, b) {
      return a.value - b.value;
    });

    // sort by name
    items.sort(function(a, b) {
      var nameA = a.name.toUpperCase(); // ignore upper and lowercase
      var nameB = b.name.toUpperCase(); // ignore upper and lowercase
      if (nameA < nameB) {
        return -1;
      }
      if (nameA > nameB) {
        return 1;
      }

      // names must be equal
      return 0;
    });

## Examples

### Creating, displaying, and sorting an array

The following example creates four arrays and displays the original array, then the sorted arrays. The numeric arrays are sorted without a compare function, then sorted using one.

    let stringArray = ['Blue', 'Humpback', 'Beluga'];
    let numericStringArray = ['80', '9', '700'];
    let numberArray = [40, 1, 5, 200];
    let mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];

    function compareNumbers(a, b) {
      return a - b;
    }

    stringArray.join(); // 'Blue,Humpback,Beluga'
    stringArray.sort(); // ['Beluga', 'Blue', 'Humpback']

    numberArray.join(); // '40,1,5,200'
    numberArray.sort(); // [1, 200, 40, 5]
    numberArray.sort(compareNumbers); // [1, 5, 40, 200]

    numericStringArray.join(); // '80,9,700'
    numericStringArray.sort(); // [700, 80, 9]
    numericStringArray.sort(compareNumbers); // [9, 80, 700]

    mixedNumericArray.join(); // '80,9,700,40,1,5,200'
    mixedNumericArray.sort(); // [1, 200, 40, 5, 700, 80, 9]
    mixedNumericArray.sort(compareNumbers); // [1, 5, 9, 40, 80, 200, 700]

### Sorting non-ASCII characters

For sorting strings with non-ASCII characters, i.e. strings with accented characters (e, é, è, a, ä, etc.), strings from languages other than English, use [`String.localeCompare`](../string/localecompare). This function can compare those characters so they appear in the right order.

    var items = ['réservé', 'premier', 'communiqué', 'café', 'adieu', 'éclair'];
    items.sort(function (a, b) {
      return a.localeCompare(b);
    });

    // items is ['adieu', 'café', 'communiqué', 'éclair', 'premier', 'réservé']

### Sorting with map

The `compareFunction` can be invoked multiple times per element within the array. Depending on the `compareFunction`'s nature, this may yield a high overhead. The more work a `compareFunction` does and the more elements there are to sort, it may be more efficient to use [map](map) for sorting. The idea is to traverse the array once to extract the actual values used for sorting into a temporary array, sort the temporary array, and then traverse the temporary array to achieve the right order.

    // the array to be sorted
    const in = ['delta', 'alpha', 'charlie', 'bravo'];

    // temporary array holds objects with position and sort-value
    const mapped = in.map((v, i) => {
      return { i, value: someSlowOperation(v) };
    })

    // sorting the mapped array containing the reduced values
    mapped.sort((a, b) => {
      if (a.value > b.value) {
        return 1;
      }
      if (a.value < b.value) {
        return -1;
      }
      return 0;
    });

    const result = mapped.map(v => in[v.i]);

There is an open source library available called [mapsort](https://null.house/open-source/mapsort) which applies this approach.

### Sort stability

Since version 10 (or EcmaScript 2019), the [specification](https://tc39.es/ecma262/#sec-array.prototype.sort) dictates that `Array.prototype.sort` is stable.

For example, say you had a list of students alongside their grades. Note that the list of students is already pre-sorted by name in alphabetical order:

    const students = [
      { name: "Alex",   grade: 15 },
      { name: "Devlin", grade: 15 },
      { name: "Eagle",  grade: 13 },
      { name: "Sam",    grade: 14 },
    ];

After sorting this array by `grade` in ascending order:

    students.sort((firstItem, secondItem) => firstItem.grade - secondItem.grade);

The `students` variable will then have the following value:

    [
      { name: "Eagle",  grade: 13 },
      { name: "Sam",    grade: 14 },
      { name: "Alex",   grade: 15 }, // original maintained for similar grade (stable sorting)
      { name: "Devlin", grade: 15 }, // original maintained for similar grade (stable sorting)
    ];

It's important to note that students that have the same grade (for example, Alex and Devlin), will remain in the same order as before calling the sort. This is what a stable sorting algorithm guarantees.

Before version 10 (or EcmaScript 2019), sort stabiliy was not guaranteed, meaning that you could end up with the following:

    [
      { name: "Eagle",  grade: 13 },
      { name: "Sam",    grade: 14 },
      { name: "Devlin", grade: 15 }, // original order not maintained
      { name: "Alex",   grade: 15 }, // original order not maintained
    ];

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.sort">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.sort</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`sort`

1

12

1

5.5

4

1

1

18

4

10.1

1

1.0

`stable`

70

79

3

No

57

10.1

70

70

4

49

10.3

10.0

## See also

-   [`Array.prototype.reverse()`](reverse)
-   [`String.prototype.localeCompare()`](../string/localecompare)
-   [About the stability of the algorithm used by V8 engine](https://v8.dev/blog/array-sort)
-   [V8 sort stability](https://v8.dev/features/stable-sort)
-   [Mathias Bynens' sort stability demo](https://mathiasbynens.be/demo/sort-stability)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort</a>

# RegExp.prototype.source

The `source` property returns a [`String`](../string) containing the source text of the regexp object, and it doesn't contain the two forward slashes on both sides and any flags.

Property attributes of `RegExp.prototype.source`

Writable

no

Enumerable

no

Configurable

yes

## Examples

### Using source

    var regex = /fooBar/ig;

    console.log(regex.source); // "fooBar", doesn't contain /.../ and "ig".

### Empty regular expressions and escaping

Starting with ECMAScript 5, the `source` property no longer returns an empty string for empty regular expressions. Instead, the string `(?:)` is returned. In addition, line terminators (such as "\\n") are escaped now.

    new RegExp().source; // "(?:)"

    new RegExp('\n').source === '\n';  // true, prior to ES5
    new RegExp('\n').source === '\\n'; // true, starting with ES5

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-get-regexp.prototype.source">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-get-regexp.prototype.source</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`source`

1

12

1

4

5

1

1

18

4

10.1

1

1.0

`empty_regex_string`

6

12

38

No

15

5

≤37

18

38

14

4.2

1.0

`escaping`

73

12

38

10

60

6

73

73

38

52

6

No

`prototype_accessor`

48

12

41

4

35

1.3

48

48

41

35

1

5.0

## See also

-   [`RegExp.prototype.flags`](flags)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/source" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/source</a>

# Symbol.species

The well-known symbol `Symbol.species` specifies a function-valued property that the constructor function uses to create derived objects.

## Description

The `species` accessor property allows subclasses to override the default constructor for objects.

Property attributes of `Symbol.species`

Writable

no

Enumerable

no

Configurable

no

## Examples

### Using species

You might want to return [`Array`](../array) objects in your derived array class `MyArray`. For example, when using methods such as [`map()`](../array/map) that return the default constructor, you want these methods to return a parent `Array` object, instead of the `MyArray` object. The `species` symbol lets you do this:

    class MyArray extends Array {
      // Overwrite species to the parent Array constructor
      static get [Symbol.species]() { return Array; }
    }
    let a = new MyArray(1,2,3);
    let mapped = a.map(x => x * x);

    console.log(mapped instanceof MyArray); // false
    console.log(mapped instanceof Array);   // true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-symbol.species">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-symbol.species</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`species`

51

13

41

No

38

10

51

51

41

41

10

5.0

## See also

-   [`Map[@@species]`](../map/@@species)
-   [`Set[@@species]`](../set/@@species)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/species" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/species</a>

# Array.prototype.splice()

The `splice()` method changes the contents of an array by removing or replacing existing elements and/or adding new elements [in place](https://en.wikipedia.org/wiki/In-place_algorithm).

## Syntax

    splice(start)
    splice(start, deleteCount)
    splice(start, deleteCount, item1)
    splice(start, deleteCount, item1, item2, itemN)

### Parameters

`start`  
The index at which to start changing the array.

If greater than the length of the array, `start` will be set to the length of the array. In this case, no element will be deleted but the method will behave as an adding function, adding as many element as item\[n\*\] provided.

If negative, it will begin that many elements from the end of the array. (In this case, the origin `-1`, meaning `-n` is the index of the `n`<sup>th</sup> last element, and is therefore equivalent to the index of `array.length - n`.) If `array.length + start` is less than `0`, it will begin from index `0`.

`deleteCount` <span class="badge inline optional">Optional</span>  
An integer indicating the number of elements in the array to remove from `start`.

If `deleteCount` is omitted, or if its value is equal to or larger than `array.length - start` (that is, if it is equal to or greater than the number of elements left in the array, starting at `start`), then all the elements from `start` to the end of the array will be deleted.

If `deleteCount` is `0` or negative, no elements are removed. In this case, you should specify at least one new element (see below).

`item1, item2, ...` <span class="badge inline optional">Optional</span>  
The elements to add to the array, beginning from `start`. If you do not specify any elements, `splice()` will only remove elements from the array.

### Return value

An array containing the deleted elements.

If only one element is removed, an array of one element is returned.

If no elements are removed, an empty array is returned.

## Description

If the specified number of elements to insert differs from the number of elements being removed, the array's `length` will be changed.

## Examples

### Remove 0 (zero) elements before index 2, and insert "drum"

    let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
    let removed = myFish.splice(2, 0, 'drum')

    // myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
    // removed is [], no elements removed

### Remove 0 (zero) elements before index 2, and insert "drum" and "guitar"

    let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
    let removed = myFish.splice(2, 0, 'drum', 'guitar')

    // myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
    // removed is [], no elements removed

### Remove 1 element at index 3

    let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']
    let removed = myFish.splice(3, 1)

    // myFish is ["angel", "clown", "drum", "sturgeon"]
    // removed is ["mandarin"]

### Remove 1 element at index 2, and insert "trumpet"

    let myFish = ['angel', 'clown', 'drum', 'sturgeon']
    let removed = myFish.splice(2, 1, 'trumpet')

    // myFish is ["angel", "clown", "trumpet", "sturgeon"]
    // removed is ["drum"]

### Remove 2 elements from index 0, and insert "parrot", "anemone" and "blue"

    let myFish = ['angel', 'clown', 'trumpet', 'sturgeon']
    let removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue')

    // myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
    // removed is ["angel", "clown"]

### Remove 2 elements, starting from index 2

    let myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']
    let removed = myFish.splice(2, 2)

    // myFish is ["parrot", "anemone", "sturgeon"]
    // removed is ["blue", "trumpet"]

### Remove 1 element from index -2

    let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
    let removed = myFish.splice(-2, 1)

    // myFish is ["angel", "clown", "sturgeon"]
    // removed is ["mandarin"]

### Remove all elements, starting from index 2

    let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
    let removed = myFish.splice(2)

    // myFish is ["angel", "clown"]
    // removed is ["mandarin", "sturgeon"]

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-array.prototype.splice">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-array.prototype.splice</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`splice`

1

12

1

5.5

From Internet Explorer 5.5 through 8, all elements of the array will not be deleted if `deleteCount` is omitted. This behavior was fixed in Internet Explorer 9.

4

1

1

18

4

10.1

1

1.0

## See also

-   [`push()`](push) / [`pop()`](pop)— add/remove elements from the end of the array
-   [`unshift()`](unshift) / [`shift()`](shift)— add/remove elements from the beginning of the array
-   [`concat()`](concat)— returns a new array comprised of this array joined with other array(s) and/or value(s)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice</a>

# String.prototype.split()

The `split()` method divides a [`String`](../string) into an ordered list of substrings, puts these substrings into an array, and returns the array. The division is done by searching for a pattern; where the pattern is provided as the first parameter in the method's call.

## Syntax

    split()
    split(separator)
    split(separator, limit)

### Parameters

`separator` <span class="badge inline optional">Optional</span>  
The pattern describing where each split should occur. The `separator` can be a simple string or it can be a [regular expression](../regexp).

-   The simplest case is when `separator` is just a single character; this is used to split a delimited string. For example, a string containing tab separated values (TSV) could be parsed by passing a tab character as the separator, like this: `myString.split("\t")`.
-   If `separator` contains multiple characters, that entire character sequence must be found in order to split.
-   If `separator` is omitted or does not occur in `str`, the returned array contains one element consisting of the entire string.
-   If `separator` appears at the beginning (or end) of the string, it still has the effect of splitting. The result is an empty (i.e. zero length) string, which appears at the first (or last) position of the returned array.
-   If `separator` is an empty string (`""`), `str` is converted to an array of each of its UTF-16 "characters".

**Warning:** When the empty string (`""`) is used as a separator, the string is **not** split by _user-perceived characters_ ([grapheme clusters](https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries)) or unicode characters (codepoints), but by UTF-16 codeunits. This destroys [surrogate pairs](https://unicode.org/faq/utf_bom.html#utf16-2). See ["How do you get a string to a character array in JavaScript?” on StackOverflow](https://stackoverflow.com/a/34717402).

`limit` <span class="badge inline optional">Optional</span>  
A non-negative integer specifying a limit on the number of substrings to be included in the array. If provided, splits the string at each occurrence of the specified `separator`, but stops when `limit` entries have been placed in the array. Any leftover text is not included in the array at all.

-   The array may contain fewer entries than `limit` if the end of the string is reached before the limit is reached.
-   If `limit` is `0`, `[]` is returned.

### Return value

An [`Array`](../array) of strings, split at each point where the `separator` occurs in the given string.

## Description

When found, `separator` is removed from the string, and the substrings are returned in an array.

If `separator` is a regular expression with capturing parentheses, then each time `separator` matches, the results (including any `undefined` results) of the capturing parentheses are spliced into the output array.

If the separator is an array, then that Array is coerced to a String and used as a separator.

## Examples

### Using `split()`

When the string is empty, `split()` returns an array containing one empty string, rather than an empty array. If the string and separator are both empty strings, an empty array is returned.

    const myString = ''
    const splits = myString.split()

    console.log(splits)

    // ↪ [""]

The following example defines a function that splits a string into an array of strings using `separator`. After splitting the string, the function logs messages indicating the original string (before the split), the separator used, the number of elements in the array, and the individual array elements.

    function splitString(stringToSplit, separator) {
      const arrayOfStrings = stringToSplit.split(separator)

      console.log('The original string is: ', stringToSplit)
      console.log('The separator is: ', separator)
      console.log('The array has ', arrayOfStrings.length, ' elements: ', arrayOfStrings.join(' / '))
    }

    const tempestString = 'Oh brave new world that has such people in it.'
    const monthString = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'

    const space = ' '
    const comma = ','

    splitString(tempestString, space)
    splitString(tempestString)
    splitString(monthString, comma)

This example produces the following output:

    The original string is: "Oh brave new world that has such people in it."
    The separator is: " "
    The array has 10 elements: Oh / brave / new / world / that / has / such / people / in / it.

    The original string is: "Oh brave new world that has such people in it."
    The separator is: "undefined"
    The array has 1 elements: Oh brave new world that has such people in it.

    The original string is: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
    The separator is: ","
    The array has 12 elements: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec

### Removing spaces from a string

In the following example, `split()` looks for zero or more spaces, followed by a semicolon, followed by zero or more spaces—and, when found, removes the spaces and the semicolon from the string. `nameList` is the array returned as a result of `split()`.

    const names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand '

    console.log(names)

    const re = /\s*(?:;|$)\s*/
    const nameList = names.split(re)

    console.log(nameList)

This logs two lines; the first line logs the original string, and the second line logs the resulting array.

    Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
    [ "Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand", "" ]

### Returning a limited number of splits

In the following example, `split()` looks for spaces in a string and returns the first 3 splits that it finds.

    const myString = 'Hello World. How are you doing?'
    const splits = myString.split(' ', 3)

    console.log(splits)

This script displays the following:

    ["Hello", "World.", "How"]

### Splitting with a `RegExp` to include parts of the separator in the result

If `separator` is a regular expression that contains capturing parentheses ` (``) `, matched results are included in the array.

    const myString = 'Hello 1 word. Sentence number 2.'
    const splits = myString.split(/(\d)/)

    console.log(splits)

This script displays the following:

    [ "Hello ", "1", " word. Sentence number ", "2", "." ]

**Note:** `\d` matches the [character class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes) for digits between 0 and 9.

### Reversing a String using `split()`

**Warning:** This is not a robust way to reverse a string:

    const str = 'asdfghjkl'
    const strReverse = str.split('').reverse().join('')
    // 'lkjhgfdsa'

    // split() returns an array on which reverse() and join() can be applied

It doesn't work if the string contains grapheme clusters, even when using a unicode-aware split. (Use, for example, [esrever](https://github.com/mathiasbynens/esrever) instead.)

    const str = 'résumé'
    const strReverse = str.split(/(?:)/u).reverse().join('')
    // => "́emuśer"

**Bonus:** use [`===`](<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#identity_strict_equality_(===)>) operator to test if the original string was a palindrome.

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.split">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.split</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`split`

1

12

1

4

3

1

1

18

4

10.1

1

1.0

## See also

-   [`String.prototype.charAt()`](charat)
-   [`String.prototype.indexOf()`](indexof)
-   [`String.prototype.lastIndexOf()`](lastindexof)
-   [`Array.prototype.join()`](../array/join)
-   [Using regular expressions in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split</a>

# Spread syntax (...)

**Spread syntax** (`...`) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

## Description

Spread syntax can be used when all elements from an object or array need to be included in a list of some kind.

In the above example, the defined function takes `x`, `y`, and `z` as arguments and returns the sum of these values. An array value is also defined.

When we invoke the function, we pass it all the values in the array using the spread syntax and the array name — `...numbers`.

If the array contained more than three numbers, e.g. `[1, 2, 3, 4]`, then it would still work fine, except that all four would be passed, but only the first three would be used unless you added more arguments to the function, e.g.:

    function sum(x, y, z, n) {
      return x + y + z + n;
    }

The above example is somewhat rigid; the real value in spread syntax is that it works with the same value, no matter how many elements are contained in the object, array, etc.

It is commonly used when you want to add a new item to a local data store, or display all stored items plus a new addition. A very simple version of this kind of action could look like so:

    let numberStore = [0, 1, 2];
    let newNumber = 12;
    numberStore = [...numberStore, newNumber];

In the above example you can rerun the last line as many times as you like, to keep adding an additional 12 to the end of the array.

## Syntax

For function calls:

    myFunction(...iterableObj); // pass all elements of iterableObj as arguments to function myFunction

For array literals or strings:

    [...iterableObj, '4', 'five', 6]; // combine two arrays by inserting all elements from iterableObj

For object literals (new in ECMAScript 2018):

    let objClone = { ...obj }; // pass all key:value pairs from an object

## Rest syntax (parameters)

Rest syntax looks exactly like spread syntax. In a way, rest syntax is the opposite of spread syntax. Spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element. See [rest parameters](../functions/rest_parameters).

## Examples

### Spread in function calls

#### Replace apply()

It is common to use [`Function.prototype.apply()`](../global_objects/function/apply) in cases where you want to use the elements of an array as arguments to a function.

    function myFunction(x, y, z) { }
    let args = [0, 1, 2];
    myFunction.apply(null, args);

With spread syntax the above can be written as:

    function myFunction(x, y, z) { }
    let args = [0, 1, 2];
    myFunction(...args);

Any argument in the argument list can use spread syntax, and the spread syntax can be used multiple times.

    function myFunction(v, w, x, y, z) { }
    let args = [0, 1];
    myFunction(-1, ...args, 2, ...[3]);

#### Apply for new operator

When calling a constructor with [`new`](new) it's not possible to **directly** use an array and `apply()` (`apply()` does a `[[Call]]` and not a `[[Construct]]`). However, an array can be easily used with `new` thanks to spread syntax:

    let dateFields = [1970, 0, 1];  // 1 Jan 1970
    let d = new Date(...dateFields);

To use `new` with an array of parameters without spread syntax, you would have to do it **indirectly** through partial application:

    function applyAndNew(constructor, args) {
       function partial () {
          return constructor.apply(this, args);
       };
       if (typeof constructor.prototype === "object") {
          partial.prototype = Object.create(constructor.prototype);
       }
       return partial;
    }

    function myConstructor () {
       console.log("arguments.length: " + arguments.length);
       console.log(arguments);
       this.prop1="val1";
       this.prop2="val2";
    };

    let myArguments = ["hi", "how", "are", "you", "mr", null];
    let myConstructorWithArguments = applyAndNew(myConstructor, myArguments);

    console.log(new myConstructorWithArguments);
    //  (internal log of myConstructor):           arguments.length: 6
    //  (internal log of myConstructor):           ["hi", "how", "are", "you", "mr", null]
    //  (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}

### Spread in array literals

#### A more powerful array literal

Without spread syntax, to create a new array using an existing array as one part of it, the array literal syntax is no longer sufficient and imperative code must be used instead using a combination of [`push()`](../global_objects/array/push), [`splice()`](../global_objects/array/splice), [`concat()`](../global_objects/array/concat), etc. With spread syntax this becomes much more succinct:

    let parts = ['shoulders', 'knees'];
    let lyrics = ['head', ...parts, 'and', 'toes'];
    //  ["head", "shoulders", "knees", "and", "toes"]

Just like spread for argument lists, `...` can be used anywhere in the array literal, and may be used more than once.

#### Copy an array

    let arr = [1, 2, 3];
    let arr2 = [...arr]; // like arr.slice()

    arr2.push(4);
    //  arr2 becomes [1, 2, 3, 4]
    //  arr remains unaffected

**Note:** Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays, as the following example shows. (The same is true with [`Object.assign()`](../global_objects/object/assign) and spread syntax.)

    let a = [[1], [2], [3]];
    let b = [...a];

    b.shift().shift();
    //  1

    //  Oh no!  Now array 'a' is affected as well:
    a
    //  [[], [2], [3]]

#### A better way to concatenate arrays

[`Array.prototype.concat()`](../global_objects/array/concat) is often used to concatenate an array to the end of an existing array. Without spread syntax, this is done as:

    let arr1 = [0, 1, 2];
    let arr2 = [3, 4, 5];

    //  Append all items from arr2 onto arr1
    arr1 = arr1.concat(arr2);

With spread syntax this becomes:

    let arr1 = [0, 1, 2];
    let arr2 = [3, 4, 5];

    arr1 = [...arr1, ...arr2];
    //  arr1 is now [0, 1, 2, 3, 4, 5]
    // Note: Not to use const otherwise, it will give TypeError (invalid assignment)

[`Array.prototype.unshift()`](../global_objects/array/unshift) is often used to insert an array of values at the start of an existing array. Without spread syntax, this is done as:

    let arr1 = [0, 1, 2];
    let arr2 = [3, 4, 5];

    //  Prepend all items from arr2 onto arr1
    Array.prototype.unshift.apply(arr1, arr2)

    //  arr1 is now [3, 4, 5, 0, 1, 2]

With spread syntax, this becomes:

    let arr1 = [0, 1, 2];
    let arr2 = [3, 4, 5];

    arr1 = [...arr2, ...arr1];
    //  arr1 is now [3, 4, 5, 0, 1, 2]

**Note:** Unlike `unshift()`, this creates a new `arr1`, and does not modify the original `arr1` array in-place.

### Spread in object literals

The [Rest/Spread Properties for ECMAScript](https://github.com/tc39/proposal-object-rest-spread) proposal (ES2018) added spread properties to [`object literals`](object_initializer#1). It copies own enumerable properties from a provided object onto a new object.

Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than [`Object.assign()`](../global_objects/object/assign).

    let obj1 = { foo: 'bar', x: 42 };
    let obj2 = { foo: 'baz', y: 13 };

    let clonedObj = { ...obj1 };
    // Object { foo: "bar", x: 42 }

    let mergedObj = { ...obj1, ...obj2 };
    // Object { foo: "baz", x: 42, y: 13 }

Note that [`Object.assign()`](../global_objects/object/assign) triggers [`setters`](../functions/set), whereas spread syntax doesn't.

Note that you cannot replace or mimic the [`Object.assign()`](../global_objects/object/assign) function:

    let obj1 = { foo: 'bar', x: 42 };
    let obj2 = { foo: 'baz', y: 13 };
    const merge = ( ...objects ) => ( { ...objects } );

    let mergedObj1 = merge (obj1, obj2);
    // Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }

    let mergedObj2 = merge ({}, obj1, obj2);
    // Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }

In the above example, the spread syntax does not work as one might expect: it spreads an _array_ of arguments into the object literal, due to the rest parameter.

### Only for iterables

Objects themselves are not iterable, but they become iterable when used in an Array, or with iterating functions such as `map()`, `reduce()`, and `assign()`. When merging 2 objects together with the spread operator, it is assumed another iterating function is used when the merging occurs.

Spread syntax (other than in the case of spread properties) can be applied only to [iterable](../global_objects/symbol/iterator) objects:

    let obj = {'key1': 'value1'};
    let array = [...obj]; // TypeError: obj is not iterable

### Spread with many values

When using spread syntax for function calls, be aware of the possibility of exceeding the JavaScript engine's argument length limit. See [`apply()`](../global_objects/function/apply) for more details.

## Specifications

**No specification found**

No specification data found for `javascript.operators.spread`.  
[Check for problems with this page](#on-github) or contribute a missing `spec_url` to [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). Also make sure the specification is included in [w3c/browser-specs](https://github.com/w3c/browser-specs).

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`spread_in_arrays`

46

12

16

No

37

8

46

46

16

37

8

5.0

`spread_in_function_calls`

46

12

27

No

37

8

46

46

27

37

8

5.0

`spread_in_object_literals`

60

79

55

No

47

11.1

60

60

55

44

11.3

8.2

## See also

-   [Rest parameters](../functions/rest_parameters) (also '`...`')
-   [`Function.prototype.apply()`](../global_objects/function/apply) (also '`...`')

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax</a>

# Math.sqrt()

The `Math.sqrt()` function returns the square root of a number, that is

$$\\forall x \\geq 0,\\mathtt{Math.sqrt(x)} = \\sqrt{x} = \\text{the\\ unique}\\; y \\geq 0\\;\\text{such\\ that}\\; y^{2} = x$$

## Syntax

    Math.sqrt(x)

### Parameters

`x`  
A number.

### Return value

The square root of the given number. If the number is negative, [`NaN`](../nan) is returned.

## Description

If the value of `x` is negative, `Math.sqrt()` returns [`NaN`](../nan).

Because `sqrt()` is a static method of `Math`, you always use it as `Math.sqrt()`, rather than as a method of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.sqrt()

    Math.sqrt(9); // 3
    Math.sqrt(2); // 1.414213562373095

    Math.sqrt(1);  // 1
    Math.sqrt(0);  // 0
    Math.sqrt(-1); // NaN
    Math.sqrt(-0); // -0

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.sqrt">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.sqrt</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`sqrt`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.cbrt()`](cbrt)
-   [`Math.exp()`](exp)
-   [`Math.log()`](log)
-   [`Math.pow()`](pow)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt</a>

# Math.SQRT1_2

The `Math.SQRT1_2` property represents the square root of 1/2 which is approximately 0.707:

$$\\mathtt{Math.SQRT1\\\_ 2} = \\sqrt{\\frac{1}{2}} = \\frac{1}{\\sqrt{2}} \\approx 0.707$$

Property attributes of `Math.SQRT1_2`

Writable

no

Enumerable

no

Configurable

no

## Description

Because `SQRT1_2` is a static property of `Math`, you always use it as `Math.SQRT1_2`, rather than as a property of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.SQRT1_2

The following function returns 1 over the square root of 2:

    function getRoot1_2() {
      return Math.SQRT1_2;
    }

    getRoot1_2(); // 0.7071067811865476

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.sqrt1_2">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.sqrt1_2</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`SQRT1_2`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.pow()`](pow)
-   [`Math.sqrt()`](sqrt)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2</a>

# Math.SQRT2

The `Math.SQRT2` property represents the square root of 2, approximately 1.414:

$$\\mathtt{Math.SQRT2} = \\sqrt{2} \\approx 1.414$$

Property attributes of `Math.SQRT2`

Writable

no

Enumerable

no

Configurable

no

## Description

Because `SQRT2` is a static property of `Math`, you always use it as `Math.SQRT2`, rather than as a property of a `Math` object you created (`Math` is not a constructor).

## Examples

### Using Math.SQRT2

The following function returns the square root of 2:

    function getRoot2() {
      return Math.SQRT2;
    }

    getRoot2(); // 1.4142135623730951

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-math.sqrt2">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-math.sqrt2</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`SQRT2`

1

12

1

3

3

1

1

18

4

10.1

1

1.0

## See also

-   [`Math.pow()`](pow)
-   [`Math.sqrt()`](sqrt)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/SQRT2" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/SQRT2</a>

# Error.prototype.stack

**Non-standard**

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The non-standard `stack` property of [`Error`](../error) objects offer a trace of which functions were called, in what order, from which line and file, and with what arguments. The stack string proceeds from the most recent calls to earlier ones, leading back to the original global scope call.

## Description

Each step will be separated by a newline, with the first part of the line being the function name (if not a call from the global scope), then by an at (@) sign, the file location (except when the function is the error constructor as the error is being thrown), a colon, and, if there is a file location, the line number. (Note that the [`Error`](../error) object also possesses the `fileName`, `lineNumber` and `columnNumber` properties for retrieving these from the error thrown (but only the error, and not its trace).)

Note that this is the format used by Firefox. There is no standard formatting. However, Safari 6+ and Opera 12- use a very similar format. Browsers using the V8 JavaScript engine (such as Chrome, Opera 15+, Android Browser) and IE10+, on the other hand, uses a different format (see [the archived MSDN error.stack docs](https://web.archive.org/web/20140210004225/https://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx)).

**Argument values in the stack**: Prior to Firefox 14, the function name would be followed by the argument values converted to string in parentheses immediately before the at (`@`) sign. While an object (or array, etc.) would appear in the converted form `"[object Object]"`, and as such could not be evaluated back into the actual objects, scalar values could be retrieved (though it may be — it is still possible in Firefox 14 — easier to use `arguments.callee.caller.arguments`, as could the function name be retrieved by `arguments.callee.caller.name`). `"undefined"` is listed as `"(void 0)"`. Note that if string arguments were passed in with values such as `"@"`, `"("`, `")"` (or if in file names), you could not easily rely on these for breaking the line into its component parts. Thus, in Firefox 14 and later this is less of an issue.

Different browsers set this value at different times. For example, Firefox sets it when creating an [`Error`](../error) object, while PhantomJS sets it only when throwing the [`Error`](../error), and [archived MSDN docs](https://web.archive.org/web/20140210004225/https://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx) also seem to match the PhantomJS implementation.

## Examples

### Using the stack property

The following HTML markup demonstrates the use of `stack` property.

    <!DOCTYPE HTML>
    <meta charset="UTF-8">
    <title>Stack Trace Example</title>
    <body>
    <script>
    function trace() {
      try {
        throw new Error('myError');
      }
      catch(e) {
        alert(e.stack);
      }
    }
    function b() {
      trace();
    }
    function a() {
      b(3, 4, '\n\n', undefined, {});
    }
    a('first call, firstarg');
    </script>

Assuming the above markup is saved as `C:\example.html` on a Windows file system it produces an alert message box with the following text:

Starting with Firefox 30 and later containing the column number:

    trace@file:///C:/example.html:9:17
    b@file:///C:/example.html:16:13
    a@file:///C:/example.html:19:13
    @file:///C:/example.html:21:9

Firefox 14 to Firefox 29:

    trace@file:///C:/example.html:9
    b@file:///C:/example.html:16
    a@file:///C:/example.html:19
    @file:///C:/example.html:21

Firefox 13 and earlier would instead produce the following text:

    Error("myError")@:0
    trace()@file:///C:/example.html:9
    b(3,4,"\n\n",(void 0),[object Object])@file:///C:/example.html:16
    a("first call, firstarg")@file:///C:/example.html:19
    @file:///C:/example.html:21

### Stack of eval'ed code

Starting with Firefox 30, the error stack of code in `Function()` and `eval()` calls, now produces stacks with more detailed information about the line and column numbers inside these calls. Function calls are indicated with `"> Function"` and eval calls with `"> eval"`.

    try {
      new Function('throw new Error()')();
    } catch (e) {
      console.log(e.stack);
    }

    // anonymous@file:///C:/example.html line 7 > Function:1:1
    // @file:///C:/example.html:7:6

    try {
      eval("eval('FAIL')");
    } catch (x) {
      console.log(x.stack);
    }

    // @file:///C:/example.html line 7 > eval line 1 > eval:1:1
    // @file:///C:/example.html line 7 > eval:1:1
    // @file:///C:/example.html:7:6

You can also use the `//# sourceURL` directive to name an eval source. See also [Debug eval sources](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources) in the [Debugger](https://developer.mozilla.org/en-US/docs/Tools/Debugger) docs and this [blog post](https://fitzgeraldnick.com/weblog/59/).

## Specifications

Not part of any standard.

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Stack`

3

12

1

10

10.5

6

≤37

18

4

11

6

1.0

## See also

-   [Components.stack](https://developer.mozilla.org/en-US/docs/Components.stack)
-   External projects: [TraceKit](https://github.com/csnover/TraceKit/) and [javascript-stacktrace](https://github.com/eriwen/javascript-stacktrace)
-   MSDN: [archived error.stack docs](https://web.archive.org/web/20140210004225/https://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx)
-   [Overview of the V8 JavaScript stack trace API](https://github.com/v8/v8/wiki/Stack%20Trace%20API)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack</a>

# String.prototype.startsWith()

The `startsWith()` method determines whether a string begins with the characters of a specified string, returning `true` or `false` as appropriate.

## Syntax

    startsWith(searchString)
    startsWith(searchString, position)

### Parameters

`searchString`  
The characters to be searched for at the start of this string.

`position` <span class="badge inline optional">Optional</span>  
The position in this string at which to begin searching for `searchString`. Defaults to `0`.

### Return value

`true` if the given characters are found at the beginning of the string; otherwise, `false`.

## Description

This method lets you determine whether or not a string begins with another string. This method is case-sensitive.

## Examples

### Using startsWith()

    //startswith
    let str = 'To be, or not to be, that is the question.'

    console.log(str.startsWith('To be'))          // true
    console.log(str.startsWith('not to be'))      // false
    console.log(str.startsWith('not to be', 10))  // true

## Polyfill

This method has been added to the ECMAScript 2015 specification and may not be available in all JavaScript implementations yet. However, you can polyfill `String.prototype.startsWith()` with the following snippet:

    if (!String.prototype.startsWith) {
        Object.defineProperty(String.prototype, 'startsWith', {
            value: function(search, rawPos) {
                var pos = rawPos > 0 ? rawPos|0 : 0;
                return this.substring(pos, pos + search.length) === search;
            }
        });
    }

A more robust (fully ES2015 specification compliant), but less performant and compact, Polyfill is available [on GitHub by Mathias Bynens](https://github.com/mathiasbynens/String.prototype.startsWith).

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.startswith">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.startswith</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`startsWith`

41

12

17

No

28

9

≤37

36

17

24

9

3.0

## See also

-   [`String.prototype.endsWith()`](endswith)
-   [`String.prototype.includes()`](includes)
-   [`String.prototype.indexOf()`](indexof)
-   [`String.prototype.lastIndexOf()`](lastindexof)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith</a>

# static

The `static` keyword defines a static method or property for a class. Neither static methods nor static properties can be called on instances of the class. Instead, they're called on the class itself.

Static methods are often utility functions, such as functions to create or clone objects, whereas static properties are useful for caches, fixed-configuration, or any other data you don't need to be replicated across instances.

Note that the examples throughout this article use [public class fields](public_class_fields) (including static public class fields), which are not yet part of the ECMAScript specification, but are instead specified in a [Public and private instance fields](https://tc39.es/proposal-class-fields/) proposal at [TC39](https://tc39.es/).

## Syntax

    static methodName() { ... }
    static propertyName [= value];

## Examples

### Using static members in classes

The following example demonstrates several things:

1.  How a static member (method or property) is defined on a class.
2.  That a class with a static member can be sub-classed.
3.  How a static member can and cannot be called.

<!-- -->

    class Triple {
      static customName = 'Tripler';
      static description = 'I triple any number you provide';
      static calculate(n = 1) {
        return n * 3;
      }
    }

    class SquaredTriple extends Triple {
      static longDescription;
      static description = 'I square the triple of any number you provide';
      static calculate(n) {
        return super.calculate(n) * super.calculate(n);
      }
    }

    console.log(Triple.description);            // 'I triple any number you provide'
    console.log(Triple.calculate());            // 3
    console.log(Triple.calculate(6));           // 18

    const tp = new Triple();

    console.log(SquaredTriple.calculate(3));    // 81 (not affected by parent's instantiation)
    console.log(SquaredTriple.description);     // 'I square the triple of any number you provide'
    console.log(SquaredTriple.longDescription); // undefined
    console.log(SquaredTriple.customName);      // 'Tripler'

    // This throws because calculate() is a static member, not an instance member.
    console.log(tp.calculate());                // 'tp.calculate is not a function'

### Calling static members from another static method

In order to call a static method or property within another static method of the same class, you can use the `this` keyword.

    class StaticMethodCall {
      static staticProperty = 'static property';
      static staticMethod() {
        return 'Static method and ' + this.staticProperty + ' has been called';
      }
      static anotherStaticMethod() {
        return this.staticMethod() + ' from another static method';
      }
    }
    StaticMethodCall.staticMethod();
    // 'Static method and static property has been called'

    StaticMethodCall.anotherStaticMethod();
    // 'Static method and static property has been called from another static method'

### Calling static members from a class constructor and other methods

Static members are not directly accessible using the [`this`](../operators/this) keyword from non-static methods. You need to call them using the class name: `CLASSNAME.STATIC_METHOD_NAME()` / `CLASSNAME.STATIC_PROPERTY_NAME` or by calling the method as a property of the `constructor`: `this.constructor.STATIC_METHOD_NAME() ` / `this.constructor.STATIC_PROPERTY_NAME`

    class StaticMethodCall {
      constructor() {
        console.log(StaticMethodCall.staticProperty); // 'static property'
        console.log(this.constructor.staticProperty); // 'static property'
        console.log(StaticMethodCall.staticMethod()); // 'static method has been called.'
        console.log(this.constructor.staticMethod()); // 'static method has been called.'
      }

      static staticProperty = 'static property';
      static staticMethod() {
        return 'static method has been called.';
      }
    }

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-class-definitions">ECMAScript (ECMA-262) 
<br/>

<span class="small">The definition of 'Class definitions' in that specification.</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`static`

49

42-49

Strict mode is required.

42-49

13

45

No

36

29-36

Strict mode is required.

29-36

14.1

49

42-49

Strict mode is required.

49

42-49

Strict mode is required.

42-49

45

36

29-36

Strict mode is required.

29-36

14.5

5.0

4.0-5.0

Strict mode is required.

## See also

-   [`class` expression](../operators/class)
-   [`class` declaration](../statements/class)
-   [Classes](../classes)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static</a>

# RegExp.prototype.sticky

The `sticky` property reflects whether or not the search is sticky (searches in strings only from the index indicated by the [`lastIndex`](lastindex) property of this regular expression). `sticky` is a read-only property of an individual regular expression object.

Property attributes of `RegExp.prototype.sticky`

Writable

no

Enumerable

no

Configurable

yes

## Description

The value of `sticky` is a [`Boolean`](../boolean) and true if the "`y`" flag was used; otherwise, false. The "`y`" flag indicates that it matches only from the index indicated by the [`lastIndex`](lastindex) property of this regular expression in the target string (and does not attempt to match from any later indexes). A regular expression defined as both `sticky` and `global` ignores the `global` flag.

You cannot change this property directly. It is read-only.

## Examples

### Using a regular expression with the sticky flag

    var str = '#foo#';
    var regex = /foo/y;

    regex.lastIndex = 1;
    regex.test(str); // true
    regex.lastIndex = 5;
    regex.test(str); // false (lastIndex is taken into account with sticky flag)
    regex.lastIndex; // 0 (reset after match failure)

### Anchored sticky flag

For several versions, Firefox's SpiderMonkey engine had [a bug](https://bugzilla.mozilla.org/show_bug.cgi?id=773687) with regard to the `^` assertion and the sticky flag which allowed expressions starting with the `^` assertion and using the sticky flag to match when they shouldn't. The bug was introduced some time after Firefox 3.6 (which had the sticky flag but not the bug) and fixed in 2015. Perhaps because of the bug, the ES2015 specification [specifically calls out](https://www.ecma-international.org/ecma-262/7.0/index.html#sec-assertion) the fact that:

> When the `y` flag is used with a pattern, ^ always matches only at the beginning of the input, or (if `multiline` is `true`) at the beginning of a line.

Examples of correct behavior:

    var regex = /^foo/y;
    regex.lastIndex = 2;
    regex.test('..foo');   // false - index 2 is not the beginning of the string

    var regex2 = /^foo/my;
    regex2.lastIndex = 2;
    regex2.test('..foo');  // false - index 2 is not the beginning of the string or line
    regex2.lastIndex = 2;
    regex2.test('.\nfoo'); // true - index 2 is the beginning of a line

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-get-regexp.prototype.sticky">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-get-regexp.prototype.sticky</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`sticky`

49

13

3

No

36

10

49

49

4

36

10

5.0

`anchored_sticky_flag`

49

13

44

No

36

10

49

49

44

36

10

5.0

`prototype_accessor`

49

13

38

No

36

10

49

49

38

36

10

5.0

## See also

-   [`RegExp.lastIndex`](lastindex)
-   [`RegExp.prototype.dotAll`](dotall)
-   [`RegExp.prototype.global`](global)
-   [`RegExp.prototype.hasIndices`](hasindices)
-   [`RegExp.prototype.ignoreCase`](ignorecase)
-   [`RegExp.prototype.multiline`](multiline)
-   [`RegExp.prototype.source`](source)
-   [`RegExp.prototype.unicode`](unicode)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky</a>

# Warning: unreachable code after return statement

The JavaScript warning "unreachable code after return statement" occurs when using an expression after a [`return`](../statements/return) statement, or when using a semicolon-less return statement but including an expression directly after.

## Message

    Warning: unreachable code after return statement (Firefox)

## Error type

Warning

## What went wrong?

Unreachable code after a return statement might occur in these situations:

-   When using an expression after a [`return`](../statements/return) statement, or
-   when using a semicolon-less return statement but including an expression directly after.

When an expression exists after a valid `return` statement, a warning is given to indicate that the code after the `return` statement is unreachable, meaning it can never be run.

Why should I have semicolons after `return` statements? In the case of semicolon-less `return` statements, it can be unclear whether the developer intended to return the statement on the following line, or to stop execution and return. The warning indicates that there is ambiguity in the way the `return` statement is written.

Warnings will not be shown for semicolon-less returns if these statements follow it:

-   [`throw`](../statements/throw)
-   [`break`](../statements/break)
-   [`var`](../statements/var)
-   [`function`](../statements/function)

## Examples

### Invalid cases

    function f() {
      var x = 3;
      x += 4;
      return x;   // return exits the function immediately
      x -= 3;     // so this line will never run; it is unreachable
    }

    function f() {
      return     // this is treated like `return;`
        3 + 4;   // so the function returns, and this line is never reached
    }

### Valid cases

    function f() {
      var x = 3;
      x += 4;
      x -= 3;
      return x;  // OK: return after all other statements
    }

    function f() {
      return 3 + 4  // OK: semicolon-less return with expression on the same line
    }

## See also

-   [Automatic Semicolon Insertion](../statements/return#automatic_semicolon_insertion)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Stmt_after_return" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Stmt_after_return</a>

# Atomics.store()

The static ` Atomics``.store() ` method stores a given value at the given position in the array and returns that value.

## Syntax

    Atomics.store(typedArray, index, value)

### Parameters

`typedArray`  
An integer typed array. One of [`Int8Array`](../int8array), [`Uint8Array`](../uint8array), [`Int16Array`](../int16array), [`Uint16Array`](../uint16array), [`Int32Array`](../int32array), [`Uint32Array`](../uint32array), [`BigInt64Array`](../bigint64array), or [`BigUint64Array`](../biguint64array).

`index`  
The position in the `typedArray` to store a `value` in.

`value`  
The number to store.

### Return value

The value that has been stored.

### Exceptions

-   Throws a [`TypeError`](../typeerror), if `typedArray` is not one of the allowed integer types.
-   Throws a [`RangeError`](../rangeerror), if `index` is out of bounds in the `typedArray`.

## Examples

### Using store()

    var sab = new SharedArrayBuffer(1024);
    var ta = new Uint8Array(sab);

    Atomics.store(ta, 0, 12); // 12

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-atomics.store">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-atomics.store</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`store`

68

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This was a temporary removal while mitigations were put in place.

79

16-17

Support was removed to mitigate [speculative execution side-channel attacks (Windows blog)](https://blogs.windows.com/msedgedev/2018/01/03/speculative-execution-mitigations-microsoft-edge-internet-explorer).

78

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

No

10.1-11.1

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

60-63

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

57

Support was disabled by default to mitigate [speculative execution side-channel attacks (Mozilla Security Blog)](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/).

55-57

46-55

No

10.3-11.3

No

Chrome disabled `SharedArrayBuffer` on January 5, 2018 to help reduce the efficacy of [speculative side-channel attacks](https://www.chromium.org/Home/chromium-security/ssca). This is intended as a temporary measure until other mitigations are in place.

## See also

-   [`Atomics`](../atomics)
-   [`Atomics.load()`](load)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/store" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/store</a>

# Strict equality (===)

The strict equality operator (`===`) checks whether its two operands are equal, returning a Boolean result. Unlike the [equality](equality) operator, the strict equality operator always considers operands of different types to be different.

## Syntax

    x === y

## Description

The strict equality operators (`===` and `!==`) use the [Strict Equality Comparison Algorithm](https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6) to compare two operands.

-   If the operands are of different types, return `false`.
-   If both operands are objects, return `true` only if they refer to the same object.
-   If both operands are `null` or both operands are `undefined`, return `true`.
-   If either operand is `NaN`, return `false`.
-   Otherwise, compare the two operand's values:
    -   Numbers must have the same numeric values. `+0` and `-0` are considered to be the same value.
    -   Strings must have the same characters in the same order.
    -   Booleans must be both `true` or both `false`.

The most notable difference between this operator and the [equality](equality) (`==`) operator is that if the operands are of different types, the `==` operator attempts to convert them to the same type before comparing.

## Examples

### Comparing operands of the same type

    console.log("hello" === "hello");   // true
    console.log("hello" === "hola");    // false

    console.log(3 === 3);               // true
    console.log(3 === 4);               // false

    console.log(true === true);         // true
    console.log(true === false);        // false

    console.log(null === null);         // true

### Comparing operands of different types

    console.log("3" === 3);           // false

    console.log(true === 1);          // false

    console.log(null === undefined);  // false

### Comparing objects

    const object1 = {
      name: "hello"
    }

    const object2 = {
      name: "hello"
    }

    console.log(object1 === object2);  // false
    console.log(object1 === object1);  // true

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-equality-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-equality-operators</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Strict_equality`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [Equality operator](equality)
-   [Inequality operator](inequality)
-   [Strict inequality operator](strict_inequality)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality</a>

# Strict inequality (!==)

The strict inequality operator (`!==`) checks whether its two operands are not equal, returning a Boolean result. Unlike the [inequality](inequality) operator, the strict inequality operator always considers operands of different types to be different.

## Syntax

    x !== y

## Description

The strict inequality operator checks whether its operands are not equal. It is the negation of the [strict equality](strict_equality) operator so the following two lines will always give the same result:

    x !== y

    !(x === y)

For details of the comparison algorithm, see the page for the [strict equality](strict_equality) operator.

Like the strict equality operator, the strict inequality operator will always consider operands of different types to be different:

    3 !== "3"; // true

## Examples

### Comparing operands of the same type

    console.log("hello" !== "hello");   // false
    console.log("hello" !== "hola");    // true

    console.log(3 !== 3);               // false
    console.log(3 !== 4);               // true

    console.log(true !== true);         // false
    console.log(true !== false);        // true

    console.log(null !== null);         // false

### Comparing operands of different types

    console.log("3" !== 3);           // true

    console.log(true !== 1);          // true

    console.log(null !== undefined);  // true

### Comparing objects

    const object1 = {
      name: "hello"
    }

    const object2 = {
      name: "hello"
    }

    console.log(object1 !== object2);  // true
    console.log(object1 !== object1);  // false

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-equality-operators">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-equality-operators</span></a></td></tr></tbody></table>

## Browser compatibility

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on IOS

Samsung Internet

`Strict_inequality`

1

12

1

4

4

1

1

18

4

10.1

1

1.0

## See also

-   [Equality operator](equality)
-   [Inequality operator](inequality)
-   [Strict equality operator](strict_equality)

© 2005–2021 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality</a>

# Strict mode

## Strict Mode Overview

**Note:** Sometimes you'll see the default, non-strict mode referred to as **" [sloppy mode](https://developer.mozilla.org/docs/Glossary/Sloppy_mode)"**. This isn't an official term, but be aware of it, just in case.

JavaScript's strict mode, introduced in ECMAScript 5, is a way to _opt in_ to a restricted variant of JavaScript, thereby implicitly opting-out of "[sloppy mode](https://developer.mozilla.org/docs/Glossary/Sloppy_mode)". Strict mode isn't just a subset: it _intentionally_ has different semantics from normal code. Browsers not supporting strict mode will run strict mode code with different behavior from browsers that do, so don't rely on strict mode without feature-testing for support for the relevant aspects of strict mode. Strict mode code and non-strict mode code can coexist, so scripts can opt into strict mode incrementally.

Strict mode makes several changes to normal JavaScript semantics:

1.  Eliminates some JavaScript silent errors by changing them to throw errors.
2.  Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode.
3.  Prohibits some syntax likely to be defined in future versions of ECMAScript.

See [transitioning to strict mode](strict_mode/transitioning_to_strict_mode), if you want to change your code to work in the restricted variant of JavaScript.

## Invoking strict mode

Strict mode applies to _entire scripts_ or to _individual functions_. It doesn't apply to block statements enclosed in `{}` braces; attempting to apply it to such contexts does nothing. `eval` code, `Function` code, event handler attributes, strings passed to [`WindowTimers.setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), and related functions are entire scripts, and invoking strict mode in them works as expected.

### Strict mode for scripts

To invoke strict mode for an entire script, put the _exact_ statement `"use strict";` (or `'use strict';`) before any other statements.

    // Whole-script strict mode syntax
    'use strict';
    var v = "Hi! I'm a strict mode script!";

This syntax has a trap that has [already bitten](https://bugzilla.mozilla.org/show_bug.cgi?id=579119) [a major site](https://bugzilla.mozilla.org/show_bug.cgi?id=627531): it isn't possible to blindly concatenate conflicting scripts. Consider concatenating a strict mode script with a non-strict mode script: the entire concatenation looks strict! The inverse is also true: non-strict plus strict looks non-strict. Obviously, concatenation of scripts is never ideal, but if you must, consider enabling strict on a function-by-function basis.

You can also take the approach of wrapping the entire contents of a script in a function and having that outer function use strict mode. This eliminates the concatenation problem and it means that you have to explicitly export any shared variables out of the function scope.

### Strict mode for functions

Likewise, to invoke strict mode for a function, put the _exact_ statement `"use strict";` (or `'use strict';`) in the function's body before any other statements.

    function strict() {
      // Function-level strict mode syntax
      'use strict';
      function nested() { return 'And so am I!'; }
      return "Hi!  I'm a strict mode function!  " + nested();
    }
    function notStrict() { return "I'm not strict."; }

### Strict mode for modules

ECMAScript 2015 introduced [JavaScript modules](statements/export) and therefore a 3rd way to enter strict mode. The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.

    function strict() {
        // because this is a module, I'm strict by default
    }
    export default strict;

## Changes in strict mode

Strict mode changes both syntax and runtime behavior. Changes generally fall into these categories: changes converting mistakes into errors (as syntax errors or at runtime), changes simplifying how the particular variable for a given use of a name is computed, changes simplifying `eval` and `arguments`, changes making it easier to write "secure" JavaScript, and changes anticipating future ECMAScript evolution.

### Converting mistakes into errors

Strict mode changes some previously-accepted mistakes into errors. JavaScript was designed to be easy for novice developers, and sometimes it gives operations which should be errors non-error semantics. Sometimes this fixes the immediate problem, but sometimes this creates worse problems in the future. Strict mode treats these mistakes as errors so that they're discovered and promptly fixed.

First, strict mode makes it impossible to accidentally create global variables. In normal JavaScript mistyping a variable in an assignment creates a new property on the global object and continues to "work" (although future failure is possible: likely, in modern JavaScript). Assignments, which would accidentally create global variables, instead throw an error in strict mode:

    'use strict';
                           // Assuming no global variable mistypeVariable exists
    mistypeVariable = 17;  // this line throws a ReferenceError due to the
                           // misspelling of variable

Second, strict mode makes assignments which would otherwise silently fail to throw an exception. For example, `NaN` is a non-writable global variable. In normal code assigning to `NaN` does nothing; the developer receives no failure feedback. In strict mode assigning to `NaN` throws an exception. Any assignment that silently fails in normal code (assignment to a non-writable global or property, assignment to a getter-only property, assignment to a new property on a [non-extensible](global_objects/object/preventextensions) object) will throw in strict mode:

    'use strict';

    // Assignment to a non-writable global
    var undefined = 5; // throws a TypeError
    var Infinity = 5; // throws a TypeError

    // Assignment to a non-writable property
    var obj1 = {};
    Object.defineProperty(obj1, 'x', { value: 42, writable: false });
    obj1.x = 9; // throws a TypeError

    // Assignment to a getter-only property
    var obj2 = { get x() { return 17; } };
    obj2.x = 5; // throws a TypeError

    // Assignment to a new property on a non-extensible object
    var fixed = {};
    Object.preventExtensions(fixed);
    fixed.newProp = 'ohai'; // throws a TypeError

Third, strict mode makes attempts to delete undeletable properties throw (where before the attempt would have no effect):

    'use strict';
    delete Object.prototype; // throws a TypeError

Fourth, strict mode requires that function parameter names be unique. In normal code the last duplicated argument hides previous identically-named arguments. Those previous arguments remain available through `arguments[i]`, so they're not completely inaccessible. Still, this hiding makes little sense and is probably undesirable (it might hide a typo, for example), so in strict mode duplicate argument names are a syntax error:

    function sum(a, a, c) { // !!! syntax error
      'use strict';
      return a + a + c; // wrong if this code ran
    }

Fifth, a strict mode in ECMAScript 5 [forbids a `0`-prefixed octal literal or octal escape sequence](errors/deprecated_octal). Outside strict mode, a number beginning with a `0`, such as `0644`, is interpreted as an octal number (`0644 === 420`), if all digits are smaller than 8. Octal escape sequences, such as `"\45"`, which is equal to `"%"`, can be used to represent characters by extended-ASCII character code numbers in octal. In strict mode, this is a syntax error. In ECMAScript 2015, octal literals are supported by prefixing a number with "`0o`"; for example:

    var a = 0o10; // ES2015: Octal

Novice developers sometimes believe a leading zero prefix has no semantic meaning, so they might use it as an alignment device — but this changes the number's meaning! A leading zero syntax for the octals is rarely useful and can be mistakenly used, so strict mode makes it a syntax error:

    'use strict';
    var sum = 015 + // !!! syntax error
              197 +
              142;

    var sumWithOctal = 0o10 + 8;
    console.log(sumWithOctal); // 16

Sixth, strict mode in ECMAScript 2015 forbids setting properties on [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) values. Without strict mode, setting properties is ignored (no-op), with strict mode, however, a [`TypeError`](global_objects/typeerror) is thrown.

    (function() {
    'use strict';

    false.true = '';         // TypeError
    (14).sailing = 'home';   // TypeError
    'with'.you = 'far away'; // TypeError

    })();

In ECMAScript 5 strict-mode code, duplicate property names were considered a [`SyntaxError`](global_objects/syntaxerror). With the introduction of [computed property names](operators/object_initializer), making duplication possible at runtime, ECMAScript 2015 removed that restriction.

    'use strict';
    var o = { p: 1, p: 2 }; // syntax error prior to ECMAScript 2015

### Simplifying variable uses

Strict mode simplifies how variable names map to particular variable definitions in the code. Many compiler optimizations rely on the ability to say that variable _X_ is stored in _that_ location: this is critical to fully optimizing JavaScript code. JavaScript sometimes makes this basic mapping of name to variable definition in the code impossible to perform until runtime. Strict mode removes most cases where this happens, so the compiler can better optimize strict mode code.

First, strict mode prohibits [`with`](statements/with). The problem with `with` is that any name inside the block might map either to a property of the object passed to it, or to a variable in surrounding (or even global) scope, at runtime; it's impossible to know which beforehand. Strict mode makes `with` a syntax error, so there's no chance for a name in a `with` to refer to an unknown location at runtime:

    'use strict';
    var x = 17;
    with (obj) { // !!! syntax error
      // If this weren't strict mode, would this be var x, or
      // would it instead be obj.x?  It's impossible in general
      // to say without running the code, so the name can't be
      // optimized.
      x;
    }

The simple alternative of assigning the object to a short name variable, then accessing the corresponding property on that variable, stands ready to replace `with`.

Second, [`eval` of strict mode code does not introduce new variables into the surrounding scope](https://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/). In normal code `eval("var x;")` introduces a variable `x` into the surrounding function or the global scope. This means that, in general, in a function containing a call to `eval` every name not referring to an argument or local variable must be mapped to a particular definition at runtime (because that `eval` might have introduced a new variable that would hide the outer variable). In strict mode `eval` creates variables only for the code being evaluated, so `eval` can't affect whether a name refers to an outer variable or some local variable:

    var x = 17;
    var evalX = eval("'use strict'; var x = 42; x;");
    console.assert(x === 17);
    console.assert(evalX === 42);

If the function `eval` is invoked by an expression of the form `eval(...)` in strict mode code, the code will be evaluated as strict mode code. The code may explicitly invoke strict mode, but it's unnecessary to do so.

    function strict1(str) {
      'use strict';
      return eval(str); // str will be treated as strict mode code
    }
    function strict2(f, str) {
      'use strict';
      return f(str); // not eval(...): str is strict if and only
                     // if it invokes strict mode
    }
    function nonstrict(str) {
      return eval(str); // str is strict if and only
                        // if it invokes strict mode
    }

    strict1("'Strict mode code!'");
    strict1("'use strict'; 'Strict mode code!'");
    strict2(eval, "'Non-strict code.'");
    strict2(eval, "'use strict'; 'Strict mode code!'");
    nonstrict("'Non-strict code.'");
    nonstrict("'use strict'; 'Strict mode code!'");

Thus names in strict mode `eval` code behave identically to names in strict mode code not being evaluated as the result of `eval`.

Third, strict mode forbids deleting plain names. `delete name` in strict mode is a syntax error:

    'use strict';

    var x;
    delete x; // !!! syntax error

    eval('var y; delete y;'); // !!! syntax error

### Making `eval` and `arguments` simpler

Strict mode makes `arguments` and `eval` less bizarrely magical. Both involve a considerable amount of magical behavior in normal code: `eval` to add or remove bindings and to change binding values, and `arguments` by its indexed properties aliasing named arguments. Strict mode makes great strides toward treating `eval` and `arguments` as keywords, although full fixes will not come until a future edition of ECMAScript.

First, the names `eval` and `arguments` can't be bound or assigned in language syntax. All these attempts to do so are syntax errors:

    'use strict';
    eval = 17;
    arguments++;
    ++eval;
    var obj = { set p(arguments) { } };
    var eval;
    try { } catch (arguments) { }
    function x(eval) { }
    function arguments() { }
    var y = function eval() { };
    var f = new Function('arguments', "'use strict'; return 17;");

Second, strict mode code doesn't alias properties of `arguments` objects created within it. In normal code within a function whose first argument is `arg`, setting `arg` also sets `arguments[0]`, and vice versa (unless no arguments were provided or `arguments[0]` is deleted). `arguments` objects for strict mode functions store the original arguments when the function was invoked. `arguments[i]` does not track the value of the corresponding named argument, nor does a named argument track the value in the corresponding `arguments[i]`.

    function f(a) {
      'use strict';
      a = 42;
      return [a, arguments[0]];
    }
    var pair = f(17);
    console.assert(pair[0] === 42);
    console.assert(pair[1] === 17);

Third, `arguments.callee` is no longer supported. In normal code `arguments.callee` refers to the enclosing function. This use case is weak: name the enclosing function! Moreover, `arguments.callee` substantially hinders optimizations like inlining functions, because it must be made possible to provide a reference to the un-inlined function if `arguments.callee` is accessed. `arguments.callee` for strict mode functions is a non-deletable property which throws an error when set or retrieved:

    'use strict';
    var f = function() { return arguments.callee; };
    f(); // throws a TypeError

### "Securing" JavaScript

Strict mode makes it easier to write "secure" JavaScript. Some websites now provide ways for users to write JavaScript which will be run by the website _on behalf of other users_. JavaScript in browsers can access the user's private information, so such JavaScript must be partially transformed before it is run, to censor access to forbidden functionality. JavaScript's flexibility makes it effectively impossible to do this without many runtime checks. Certain language functions are so pervasive that performing runtime checks has a considerable performance cost. A few strict mode tweaks, plus requiring that user-submitted JavaScript be strict mode code and that it be invoked in a certain manner, substantially reduce the need for those runtime checks.

First, the value passed as `this` to a function in strict mode is not forced into being an object (a.k.a. "boxed"). For a normal function, `this` is always an object: either the provided object if called with an object-valued `this`; the value, boxed, if called with a Boolean, string, or number `this`; or the global object if called with an `undefined` or `null` `this`. (Use [`call`](global_objects/function/call), [`apply`](global_objects/function/apply), or [`bind`](global_objects/function/bind) to specify a particular `this`.) Not only is automatic boxing a performance cost, but exposing the global object in browsers is a security hazard because the global object provides access to functionality that "secure" JavaScript environments must restrict. Thus for a strict mode function, the specified `this` is not boxed into an object, and if unspecified, `this` will be `undefined`:

    'use strict';
    function fun() { return this; }
    console.assert(fun() === undefined);
    console.assert(fun.call(2) === 2);
    console.assert(fun.apply(null) === null);
    console.assert(fun.call(undefined) === undefined);
    console.assert(fun.bind(true)() === true);

That means, among other things, that in browsers it's no longer possible to reference the `window` object through `this` inside a strict mode function.

Second, in strict mode it's no longer possible to "walk" the JavaScript stack via commonly-implemented extensions to ECMAScript. In normal code with these extensions, when a function `fun` is in the middle of being called, `fun.caller` is the function that most recently called `fun`, and `fun.arguments` is the `arguments` for that invocation of `fun`. Both extensions are problematic for "secure" JavaScript because they allow "secured" code to access "privileged" functions and their (potentially unsecured) arguments. If `fun` is in strict mode, both `fun.caller` and `fun.arguments` are non-deletable properties which throw when set or retrieved:

    function restricted() {
      'use strict';
      restricted.caller;    // throws a TypeError
      restricted.arguments; // throws a TypeError
    }
    function privilegedInvoker() {
      return restricted();
    }
    privilegedInvoker();

Third, `arguments` for strict mode functions no longer provide access to the corresponding function call's variables. In some old ECMAScript implementations `arguments.caller` was an object whose properties aliased variables in that function. This is a [security hazard](https://stuff.mit.edu/iap/2008/facebook/) because it breaks the ability to hide privileged values via function abstraction; it also precludes most optimizations. For these reasons no recent browsers implement it. Yet because of its historical functionality, `arguments.caller` for a strict mode function is also a non-deletable property which throws when set or retrieved:

    'use strict';
    function fun(a, b) {
      'use strict';
      var v = 12;
      return arguments.caller; // throws a TypeError
    }
    fun(1, 2); // doesn't expose v (or a or b)

### Paving the way for future ECMAScript versions

Future ECMAScript versions will likely introduce new syntax, and strict mode in ECMAScript 5 applies some restrictions to ease the transition. It will be easier to make some changes if the foundations of those changes are prohibited in strict mode.

First, in strict mode, a short list of identifiers become reserved keywords. These words are `implements`, `interface`, `let`, `package`, `private`, `protected`, `public`, `static`, and `yield`. In strict mode, then, you can't name or use variables or arguments with these names.

    function package(protected) { // !!!
      'use strict';
      var implements; // !!!

      interface: // !!!
      while (true) {
        break interface; // !!!
      }

      function private() { } // !!!
    }
    function fun(static) { 'use strict'; } // !!!

Two Mozilla-specific caveats: First, if your code is JavaScript 1.7 or greater (for example in chrome code or when using the right `<script type="">`) and is strict mode code, `let` and `yield` have the functionality they've had since those keywords were first introduced. But strict mode code on the web, loaded with `<script src="">` or `<script>...</script>`, won't be able to use `let`/`yield` as identifiers. Second, while ES5 unconditionally reserves the words `class`, `enum`, `export`, `extends`, `import`, and `super`, before Firefox 5 Mozilla reserved them only in strict mode.

Second, [strict mode prohibits function statements that are not at the top level of a script or function](https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/). In normal mode in browsers, function statements are permitted "everywhere". _This is not part of ES5 (or even ES3)!_ It's an extension with incompatible semantics in different browsers. Note that function statements outside top level are permitted in ES2015.

    'use strict';
    if (true) {
      function f() { } // !!! syntax error
      f();
    }

    for (var i = 0; i < 5; i++) {
      function f2() { } // !!! syntax error
      f2();
    }

    function baz() { // kosher
      function eit() { } // also kosher
    }

This prohibition isn't strict mode proper because such function statements are an extension of basic ES5. But it is the recommendation of the ECMAScript committee, and browsers will implement it.

## Strict mode in browsers

The major browsers now implement strict mode. However, don't blindly depend on it since there still are numerous [Browser versions used in the wild that only have partial support for strict mode](https://caniuse.com/use-strict) or do not support it at all (e.g. Internet Explorer below version 10!). _Strict mode changes semantics._ Relying on those changes will cause mistakes and errors in browsers which don't implement strict mode. Exercise caution in using strict mode, and back up reliance on strict mode with feature tests that check whether relevant parts of strict mode are implemented. Finally, make sure to _test your code in browsers that do and don't support strict mode_. If you test only in browsers that don't support strict mode, you're very likely to have problems in browsers that do, and vice versa.

## See also

-   [Strict Mode Code in the ECMAScript specification](https://tc39.es/ecma262/#sec-strict-mode-code)
-   [Where's Walden? » New ES5 strict mode support: now with poison pills!](https://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/)
-   [Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited](https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/)
-   [Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only](https://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/)
-   [JavaScript "use strict" tutorial for beginners.](http://qnimate.com/javascript-strict-mode-in-nutshell/)
-   [John Resig - ECMAScript 5 Strict Mode, JSON, and More](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/)
-   [ECMA-262-5 in detail. Chapter 2. Strict Mode.](http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/)
-   [Strict mode compatibility table](https://kangax.github.io/compat-table/es5/#Strict_mode)
-   [Transitioning to strict mode](strict_mode/transitioning_to_strict_mode)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode</a>

# SyntaxError: "use strict" not allowed in function with non-simple parameters

The JavaScript exception "`'use strict'` not allowed in function" occurs when a `"use strict"` directive is used at the top of a function with [default parameters](../functions/default_parameters), [rest parameters](../functions/rest_parameters), or [destructuring parameters](../operators/destructuring_assignment).

## Message

    Edge:
    Cannot apply strict mode on functions with non-simple parameter list

    Firefox:
    SyntaxError: "use strict" not allowed in function with default parameter
    SyntaxError: "use strict" not allowed in function with rest parameter
    SyntaxError: "use strict" not allowed in function with destructuring parameter

    Chrome:
    SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list

## Error type

[`SyntaxError`](../global_objects/syntaxerror).

## What went wrong?

A `"use strict"` directive is written at the top of a function that has one of the following parameters:

-   [Default parameters](../functions/default_parameters)
-   [Rest parameters](../functions/rest_parameters)
-   [Destructuring parameters](../operators/destructuring_assignment)

A `"use strict"` directive is not allowed at the top of such functions per the ECMAScript specification.

## Examples

### Function statement

In this case, the function `sum` has default parameters `a=1` and `b=2`:

    function sum(a = 1, b = 2) {
      // SyntaxError: "use strict" not allowed in function with default parameter
      'use strict';
      return a + b;
    }

If the function should be in [strict mode](../strict_mode), and the entire script or enclosing function is also okay to be in strict mode, you can move the `"use strict"` directive outside of the function:

    'use strict';
    function sum(a = 1, b = 2) {
      return a + b;
    }

### Function expression

A function expression can use yet another workaround:

    var sum = function sum([a, b]) {
      // SyntaxError: "use strict" not allowed in function with destructuring parameter
      'use strict';
      return a + b;
    };

This can be converted to the following expression:

    var sum = (function() {
      'use strict';
      return function sum([a, b]) {
        return a + b;
      };
    })();

### Arrow function

If an arrow function needs to access the `this` variable, you can use the arrow function as the enclosing function:

    var callback = (...args) => {
      // SyntaxError: "use strict" not allowed in function with rest parameter
      'use strict';
      return this.run(args);
    };

This can be converted to the following expression:

    var callback = (() => {
      'use strict';
      return (...args) => {
        return this.run(args);
      };
    })();

## See also

-   [Strict mode](../strict_mode)
-   [function statement](../statements/function)
-   [function expression](../operators/function)
-   [Default parameters](../functions/default_parameters)
-   [Rest parameters](../functions/rest_parameters)
-   [Destructuring parameters](../operators/destructuring_assignment)

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params</a>

# String.prototype.strike()

**Deprecated**

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `strike()` method creates a [`<strike>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strike) HTML element that causes a string to be displayed as struck-out text.

## Syntax

    strike()

### Return value

A string containing a [`<strike>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strike) HTML element.

## Description

The `strike()` method embeds a string in a `<strike>` element: "`<strike>str</strike>`".

## Examples

### Using strike()

The following example uses string methods to change the formatting of a string:

    var worldString = 'Hello, world';

    console.log(worldString.blink()); // <blink>Hello, world</blink>
    console.log(worldString.bold()); // <b>Hello, world</b>
    console.log(worldString.italics()); // <i>Hello, world</i>
    console.log(worldString.strike()); // <strike>Hello, world</strike>

## Specifications

<table><thead><tr class="header"><th>Specification</th></tr></thead><tbody><tr class="odd"><td><a href="https://tc39.es/ecma262/#sec-string.prototype.strike">ECMAScript Language Specification (ECMAScript) 
<br/>

<span class="small">#sec-string.prototype.strike</span></a></td></tr></tbody></table>