Skip to content

Commit

Permalink
Remove a lot of mentions of JavaScript versions (mdn#19448)
Browse files Browse the repository at this point in the history
* Remove a lot of mentions of JavaScript versions

* improvements

* Address reviews
  • Loading branch information
Josh-Cena authored Aug 12, 2022
1 parent 44222cf commit 1ef12f2
Show file tree
Hide file tree
Showing 83 changed files with 183 additions and 358 deletions.
2 changes: 1 addition & 1 deletion files/en-us/glossary/tree_shaking/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ tags:
---
**Tree shaking** is a term commonly used within a JavaScript context to describe the removal of dead code.

It relies on the [import](/en-US/docs/Web/JavaScript/Reference/Statements/import) and [export](/en-US/docs/Web/JavaScript/Reference/Statements/export) statements in ES2015 to detect if code modules are exported and imported for use between JavaScript files.
It relies on the [import](/en-US/docs/Web/JavaScript/Reference/Statements/import) and [export](/en-US/docs/Web/JavaScript/Reference/Statements/export) statements to detect if code modules are exported and imported for use between JavaScript files.

In modern JavaScript applications, we use module bundlers (e.g., [webpack](https://webpack.js.org/) or [Rollup](https://github.com/rollup/rollup)) to automatically remove dead code when bundling multiple JavaScript files into single files. This is important for preparing code that is production ready, for example with clean structures and minimal file size.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ The _Nodejs_ package manager _NPM_ should also have been installed, and can be t

As a slightly more exciting test let's create a very basic "pure node" server that prints out "Hello World" in the browser when you visit the correct URL in your browser:

1. Copy the following text into a file named **hellonode.js**. This uses pure _Node_ features (nothing from Express) and some ES6 syntax:
1. Copy the following text into a file named **hellonode.js**. This uses pure Node features (nothing from Express):

```js
//Load HTTP module
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ If you'd like to try this API for yourself, Smashing Magazine has written an [in

## Class components

Although this tutorial doesn't mention them, it is possible to build React components using ES6 classes – these are called class components. Until the arrival of hooks, ES6 classes were the only way to bring state into components or manage rendering side effects. They're still the only way to handle certain other, more edge-case features, and they're very common in legacy React projects. The official React docs are a great place to start learning about them.
Although this tutorial doesn't mention them, it is possible to build React components using classes – these are called class components. Until the arrival of hooks, classes were the only way to bring state into components or manage rendering side effects. They're still the only way to handle certain other, more edge-case features, and they're very common in legacy React projects. The official React docs are a great place to start learning about them.

- [State and Lifecycle in the React Docs](https://reactjs.org/docs/state-and-lifecycle.html)
- [Intro To React in the React Docs](https://reactjs.org/tutorial/tutorial.html)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ In your extension, you include a background script using the [`"background"`](/

You can specify multiple background scripts. If you do, they run in the same context, just like scripts loaded into a web page.

Instead of specifying background scripts, you can specify a background page. This has the added advantage of support for ES6 modules:
Instead of specifying background scripts, you can specify a background page. This has the added advantage of support for ES modules:

**manifest.json**

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,31 +40,6 @@ const xCoord = 50;
const yCoord = 100;
const canvasWidth = 1024;

function getColorIndicesForCoord(x, y, width) {
const red = y * (width * 4) + x * 4;
return [red, red + 1, red + 2, red + 3];
}

const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);

const redIndex = colorIndices[0];
const greenIndex = colorIndices[1];
const blueIndex = colorIndices[2];
const alphaIndex = colorIndices[3];

const redForCoord = imageData.data[redIndex];
const greenForCoord = imageData.data[greenIndex];
const blueForCoord = imageData.data[blueIndex];
const alphaForCoord = imageData.data[alphaIndex];
```

Or, if ES2015 is appropriate:

```js
const xCoord = 50;
const yCoord = 100;
const canvasWidth = 1024;

const getColorIndicesForCoord = (x, y, width) => {
const red = y * (width * 4) + x * 4;
return [red, red + 1, red + 2, red + 3];
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/htmlscriptelement/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}._
- {{domxref("HTMLScriptElement.fetchPriority")}}
- : An optional string representing a hint given to the browser on how it should prioritize fetching of an external script relative to other external scripts. If this value is provided, it must be one of the possible permitted values: `high` to fetch at a high priority, `low` to fetch at a low priority, or `auto` to indicate no preference (which is the default).
- {{domxref("HTMLScriptElement.noModule")}}
- : A boolean value that if true, stops the script's execution in browsers that support [ES2015 modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) — used to run fallback scripts in older browsers that do _not_ support JavaScript modules.
- : A boolean value that if true, stops the script's execution in browsers that support [ES modules](/en-US/docs/Web/JavaScript/Guide/Modules) — used to run fallback scripts in older browsers that do _not_ support JavaScript modules.
- {{domxref("HTMLScriptElement.referrerPolicy")}}
- : A string that reflects the {{htmlattrxref("referrerPolicy", "script")}} HTML attribute indicating which referrer to use when fetching the script, and fetches done by that script.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,6 @@ Finally, there's the little box into which we'll insert the messages. This {{HTM

While you can just [look at the code itself on GitHub](https://github.com/mdn/samples-server/blob/master/s/webrtc-simple-datachannel/main.js), below we'll review the parts of the code that do the heavy lifting.

The WebRTC API makes heavy use of {{jsxref("Promise")}}s. They make it very easy to chain the steps of the connection process together; if you haven't already read up on this functionality of [ECMAScript 2015](/en-US/docs/Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla), you should read up on them. Similarly, this example uses [arrow functions](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) to simplify syntax.

### Starting up

When the script is run, we set up a {{domxref("Window/load_event", "load")}} event listener, so that once the page is fully loaded, our `startup()` function is called.
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/element/script/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
- {{htmlattrdef("integrity")}}
- : This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See [Subresource Integrity](/en-US/docs/Web/Security/Subresource_Integrity).
- {{htmlattrdef("nomodule")}}
- : This Boolean attribute is set to indicate that the script should not be executed in browsers that support [ES2015 modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.
- : This Boolean attribute is set to indicate that the script should not be executed in browsers that support [ES modules](/en-US/docs/Web/JavaScript/Guide/Modules) — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.
- {{htmlattrdef("nonce")}}
- : A cryptographic nonce (number used once) to allow scripts in a [script-src Content-Security-Policy](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src). The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.
- {{htmlattrdef("referrerpolicy")}}
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/javascript/closures/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,7 @@ console.log(getX()); // 2

## Creating closures in loops: A common mistake

Prior to the introduction of the [`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let) keyword in ECMAScript 2015, a common problem with closures occurred when you created them inside a loop. To demonstrate, consider the following example code.
Prior to the introduction of the [`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let) keyword, a common problem with closures occurred when you created them inside a loop. To demonstrate, consider the following example code.

```html
<p id="help">Helpful notes will appear here</p>
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/javascript/data_structures/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -202,11 +202,11 @@ Additionally, arrays inherit from `Array.prototype`, which provides to them a ha

### Keyed collections: Maps, Sets, WeakMaps, WeakSets

These data structures, introduced in ECMAScript Edition 6, take object references as keys. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object.
These data structures take object references as keys. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object.

The difference between `Map`s and `WeakMap`s is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.

One could implement `Map`s and `Set`s in pure ECMAScript 5. However, since objects cannot be compared (in the sense of `<` "less than", for instance), look-up performance would necessarily be linear. Native implementations of them (including `WeakMap`s) can have look-up performance that is approximately logarithmic to constant time.
You could implement `Map`s and `Set`s yourself. However, since objects cannot be compared (in the sense of `<` "less than", for instance), neither does the engine expose its hash function for objects, look-up performance would necessarily be linear. Native implementations of them (including `WeakMap`s) can have look-up performance that is approximately logarithmic to constant time.

Usually, to bind data to a DOM node, one could set properties directly on the object, or use `data-*` attributes. This has the downside that the data is available to any script running in the same context. `Map`s and `WeakMap`s make it easy to _privately_ bind data to an object.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,31 +56,19 @@ while (x < 10) {

Here, `{ x++; }` is the block statement.

> **Note:** JavaScript before ECMAScript2015 (6th edition)
> **does not** have block scope! In older JavaScript, 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 define a scope_.
>
> "Standalone" blocks in JavaScript can produce completely different results from what
> they would produce in C or Java. For example:
>
> **Note:** [`var`](/en-US/docs/Web/JavaScript/Reference/Statements/var)-declared variables are not block-scoped, but are scoped to the containing function or script, and the effects of setting them persist beyond the block itself. For example:
>
> ```js
> var x = 1;
> {
> var x = 2;
> }
> console.log(x); // outputs 2
> ```
>
> This outputs `2` because the `var x` statement within the block
> is in the same scope as the `var x` statement before the block. (In C or
> Java, the equivalent code would have output `1`.)
>
> **Since ECMAScript2015**, the `let` and
> `const` variable declarations are block-scoped. See the
> {{jsxref("Statements/let", "let")}} and {{jsxref("Statements/const", "const")}}
> reference pages for more information.
>
> This outputs `2` because the `var x` statement within the block is in the same scope as the `var x` statement before the block. (In C or Java, the equivalent code would have output `1`.)
>
> This scoping effect can be mitigated by using {{jsxref("Statements/let", "let")}} or {{jsxref("Statements/const", "const")}}.
## Conditional statements
Expand Down
12 changes: 4 additions & 8 deletions files/en-us/web/javascript/guide/functions/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -572,14 +572,12 @@ See the {{jsxref("Function")}} object in the JavaScript reference for more infor

## Function parameters

Starting with ECMAScript 2015, there are two new kinds of parameters: _default parameters_ and _rest parameters_.
There are two special kinds of parameter syntax: _default parameters_ and _rest parameters_.

### Default parameters

In JavaScript, parameters of functions default to `undefined`. However, in some situations it might be useful to set a different default value. This is exactly what default parameters do.

#### Without default parameters (pre-ECMAScript 2015)

In the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are `undefined`.

In the following example, if no value is provided for `b`, its value would be `undefined` when evaluating `a*b`, and a call to `multiply` would normally have returned `NaN`. However, this is prevented by the second line in this example:
Expand All @@ -593,8 +591,6 @@ function multiply(a, b) {
multiply(5); // 5
```

#### With default parameters (post-ECMAScript 2015)

With _default parameters_, a manual check in the function body is no longer necessary. You can put `1` as the default value for `b` in the function head:

```js
Expand Down Expand Up @@ -624,7 +620,7 @@ console.log(arr); // [2, 4, 6]

## Arrow functions

An [arrow function expression](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) (previously, and now incorrectly known as **fat arrow function**) has a shorter syntax compared to function expressions and does not have its own [`this`](/en-US/docs/Web/JavaScript/Reference/Operators/this), [arguments](/en-US/docs/Web/JavaScript/Reference/Functions/arguments), [super](/en-US/docs/Web/JavaScript/Reference/Operators/super), or [new.target](/en-US/docs/Web/JavaScript/Reference/Operators/new.target). Arrow functions are always anonymous. See also this hacks.mozilla.org blog post: "[ES6 In Depth: Arrow functions](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)".
An [arrow function expression](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) (also called a _fat arrow_ to distinguish from a hypothetical `->` syntax in future JavaScript) has a shorter syntax compared to function expressions and does not have its own [`this`](/en-US/docs/Web/JavaScript/Reference/Operators/this), [`arguments`](/en-US/docs/Web/JavaScript/Reference/Functions/arguments), [`super`](/en-US/docs/Web/JavaScript/Reference/Operators/super), or [`new.target`](/en-US/docs/Web/JavaScript/Reference/Operators/new.target). Arrow functions are always anonymous.

Two factors influenced the introduction of arrow functions: _shorter functions_ and _non-binding_ of `this`.

Expand All @@ -649,7 +645,7 @@ const a3 = a.map((s) => s.length);
console.log(a3); // logs [8, 6, 7, 9]
```

### No separate `this`
### No separate this

Until arrow functions, every new function defined its own [`this`](/en-US/docs/Web/JavaScript/Reference/Operators/this) value (a new object in the case of a constructor, undefined in [strict mode](/en-US/docs/Web/JavaScript/Reference/Strict_mode) function calls, the base object if the function is called as an "object method", etc.). This proved to be less than ideal with an object-oriented style of programming.

Expand Down Expand Up @@ -710,7 +706,7 @@ JavaScript has several top-level, built-in functions:
- {{jsxref("Global_Objects/isFinite", "isFinite()")}}
- : The global **`isFinite()`** function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.
- {{jsxref("Global_Objects/isNaN", "isNaN()")}}
- : The **`isNaN()`** function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the `isNaN` function has [interesting](/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#description) rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 2015, or you can use [`typeof`](/en-US/docs/Web/JavaScript/Reference/Operators/typeof) to determine if the value is Not-A-Number.
- : The **`isNaN()`** function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the `isNaN` function has [interesting](/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#description) rules; you may alternatively want to use {{jsxref("Number.isNaN()")}} to determine if the value is Not-A-Number.
- {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
- : The **`parseFloat()`** function parses a string argument and returns a floating point number.
- {{jsxref("Global_Objects/parseInt", "parseInt()")}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ var myvar = 'my value';

Because of hoisting, all `var` statements in a function should be placed as near to the top of the function as possible. This best practice increases the clarity of the code.

In ECMAScript 2015, `let` and `const` **are hoisted but not initialized**. Referencing the variable in the block before the variable declaration results in a {{jsxref("ReferenceError")}}, because the variable is in a "temporal dead zone" from the start of the block until the declaration is processed.
`let` and `const` **are hoisted but not initialized**. Referencing the variable in the block before the variable declaration results in a {{jsxref("ReferenceError")}}, because the variable is in a "temporal dead zone" from the start of the block until the declaration is processed.

```js
console.log(x); // ReferenceError
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ This chapter introduces collections of data which are indexed by a key; `Map` an

### Map object

ECMAScript 2015 introduces a new data structure to map values to values. A {{jsxref("Map")}} object is a simple key/value map and can iterate its elements in insertion order.
A {{jsxref("Map")}} object is a simple key/value map and can iterate its elements in insertion order.

The following code shows some basic operations with a `Map`. See also the {{jsxref("Map")}} reference page for more examples and the complete API. You can use a {{jsxref("Statements/for...of","for...of")}} loop to return an array of `[key, value]` for each iteration.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/javascript/guide/meta_programming/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ tags:
---
{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Iterators_and_Generators", "Web/JavaScript/Guide/Modules")}}

Starting with ECMAScript 2015, JavaScript gains support for the {{jsxref("Proxy")}} and {{jsxref("Reflect")}} objects allowing you to intercept and define custom behavior for fundamental language operations (e.g. property lookup, assignment, enumeration, function invocation, etc). With the help of these two objects you are able to program at the meta level of JavaScript.
The {{jsxref("Proxy")}} and {{jsxref("Reflect")}} objects allow you to intercept and define custom behavior for fundamental language operations (e.g. property lookup, assignment, enumeration, function invocation, etc). With the help of these two objects you are able to program at the meta level of JavaScript.

## Proxies

Expand Down
Loading

0 comments on commit 1ef12f2

Please sign in to comment.