Skip to content

Commit

Permalink
Convert noteblocks for web/javascript folder (#35096)
Browse files Browse the repository at this point in the history
* Convert noteblocks for web/javascript folder

This PR converts the noteblocks for the 'web/javascript' folder to GFM syntax, using a [conversion script](https://github.com/queengooborg/mdn-toolkit/blob/main/upgrade-noteblock.js).

* Fixes

---------

Co-authored-by: Joshua Chen <[email protected]>
  • Loading branch information
queengooborg and Josh-Cena authored Jul 25, 2024
1 parent 1b2c87c commit 0b0cac4
Show file tree
Hide file tree
Showing 17 changed files with 100 additions and 50 deletions.
3 changes: 2 additions & 1 deletion files/en-us/web/javascript/closures/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,8 @@ console.log(counter2.value()); // 0.

Notice how the two counters maintain their independence from one another. Each closure references a different version of the `privateCounter` variable through its own closure. Each time one of the counters is called, its lexical environment changes by changing the value of this variable. Changes to the variable value in one closure don't affect the value in the other closure.

> **Note:** Using closures in this way provides benefits that are normally associated with object-oriented programming. In particular, _data hiding_ and _encapsulation_.
> [!NOTE]
> Using closures in this way provides benefits that are normally associated with object-oriented programming. In particular, _data hiding_ and _encapsulation_.
## Closure scope chain

Expand Down
6 changes: 4 additions & 2 deletions files/en-us/web/javascript/data_structures/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,8 @@ console.log(42 / -0); // -Infinity

Although a number is conceptually a "mathematical value" and is always implicitly floating-point-encoded, JavaScript provides [bitwise operators](/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators#bitwise_operators). When applying bitwise operators, the number is first converted to a 32-bit integer.

> **Note:** Although bitwise operators _can_ be used to represent several Boolean values within a single number using [bit masking](https://en.wikipedia.org/wiki/Mask_%28computing%29), this is usually considered a bad practice. JavaScript offers other means to represent a set of Booleans (like an array of Booleans, or an object with Boolean values assigned to named properties). Bit masking also tends to make the code more difficult to read, understand, and maintain.
> [!NOTE]
> Although bitwise operators _can_ be used to represent several Boolean values within a single number using [bit masking](https://en.wikipedia.org/wiki/Mask_%28computing%29), this is usually considered a bad practice. JavaScript offers other means to represent a set of Booleans (like an array of Booleans, or an object with Boolean values assigned to named properties). Bit masking also tends to make the code more difficult to read, understand, and maintain.
It may be necessary to use such techniques in very constrained environments, like when trying to cope with the limitations of local storage, or in extreme cases (such as when each bit over the network counts). This technique should only be considered when it is the last measure that can be taken to optimize size.

Expand Down Expand Up @@ -176,7 +177,8 @@ Data properties associate a key with a value. It can be described by the followi

Associates a key with one of two accessor functions (`get` and `set`) to retrieve or store a value.

> **Note:** It's important to recognize it's accessor _property_ — not accessor _method_. We can give a JavaScript object class-like accessors by using a function as a value — but that doesn't make the object a class.
> [!NOTE]
> It's important to recognize it's accessor _property_ — not accessor _method_. We can give a JavaScript object class-like accessors by using a function as a value — but that doesn't make the object a class.
An accessor property has the following attributes:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,8 @@ The following values evaluate to `false` (also known as [Falsy](/en-US/docs/Glos
All other values—including all objects—evaluate to `true` when passed to a
conditional statement.

> **Note:** Do not confuse the primitive boolean values
> [!NOTE]
> Do not confuse the primitive boolean values
> `true` and `false` with the true and false values of the
> {{jsxref("Boolean")}} object!
>
Expand Down Expand Up @@ -387,7 +388,8 @@ try {
}
```

> **Note:** When logging errors to the console inside
> [!NOTE]
> When logging errors to the console inside
> a `catch` block, using `console.error()` rather than
> `console.log()` is advised for debugging. It formats the message as an
> error, and adds it to the list of error messages generated by the page.
Expand Down
6 changes: 4 additions & 2 deletions files/en-us/web/javascript/guide/functions/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -516,7 +516,8 @@ const getCode = (function () {
console.log(getCode()); // "0]Eal(eh&2"
```

> **Note:** There are a number of pitfalls to watch out for when using closures!
> [!NOTE]
> There are a number of pitfalls to watch out for when using closures!
>
> If an enclosed function defines a variable with the same name as a variable in the outer scope, then there is no way to refer to the variable in the outer scope again. (The inner scope variable "overrides" the outer one, until the program exits the inner scope. It can be thought of as a [name conflict](#name_conflicts).)
>
Expand Down Expand Up @@ -570,7 +571,8 @@ console.log(myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"));
// "sage. basil. oregano. pepper. parsley. "
```

> **Note:** The `arguments` variable is "array-like", but not an array. It is array-like in that it has a numbered index and a `length` property. However, it does _not_ possess all of the array-manipulation methods.
> [!NOTE]
> The `arguments` variable is "array-like", but not an array. It is array-like in that it has a numbered index and a `length` property. However, it does _not_ possess all of the array-manipulation methods.
See the {{jsxref("Function")}} object in the JavaScript reference for more information.

Expand Down
18 changes: 12 additions & 6 deletions files/en-us/web/javascript/guide/grammar_and_types/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ In JavaScript, instructions are called {{Glossary("Statement", "statements")}} a

A semicolon is not necessary after a statement if it is written on its own line. But if more than one statement on a line is desired, then they _must_ be separated by semicolons.

> **Note:** ECMAScript also has rules for automatic insertion of semicolons ([ASI](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion)) to end statements. (For more information, see the detailed reference about JavaScript's [lexical grammar](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar).)
> [!NOTE]
> ECMAScript also has rules for automatic insertion of semicolons ([ASI](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion)) to end statements. (For more information, see the detailed reference about JavaScript's [lexical grammar](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar).)
It is considered best practice, however, to always write a semicolon after a statement, even when it is not strictly needed. This practice reduces the chances of bugs getting into the code.

Expand Down Expand Up @@ -56,7 +57,8 @@ In this case, you need to break up the `*/` pattern. For example, by inserting a

Comments behave like whitespace, and are discarded during script execution.

> **Note:** You might also see a third type of comment syntax at the start of some JavaScript files, which looks something like this: `#!/usr/bin/env node`.
> [!NOTE]
> You might also see a third type of comment syntax at the start of some JavaScript files, which looks something like this: `#!/usr/bin/env node`.
>
> This is called **hashbang comment** syntax, and is a special comment used to specify the path to a particular JavaScript engine that should execute the script. See [Hashbang comments](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#hashbang_comments) for more details.
Expand Down Expand Up @@ -296,7 +298,8 @@ In the case that a value representing a number is in memory as a string, there a

`parseInt` only returns whole numbers, so its use is diminished for decimals.

> **Note:** Additionally, a best practice for `parseInt` is to always include the _radix_ parameter. The radix parameter is used to specify which numerical system is to be used.
> [!NOTE]
> Additionally, a best practice for `parseInt` is to always include the _radix_ parameter. The radix parameter is used to specify which numerical system is to be used.
```js
parseInt("101", 2); // 5
Expand Down Expand Up @@ -333,7 +336,8 @@ const coffees = ["French Roast", "Colombian", "Kona"];

An array literal creates a new array object every time the literal is evaluated. For example, an array defined with a literal in the global scope is created once when the script loads. However, if the array literal is inside a function, a new array is instantiated every time that function is called.

> **Note:** Array literals create `Array` objects. See {{jsxref("Array")}} and [Indexed collections](/en-US/docs/Web/JavaScript/Guide/Indexed_collections) for details on `Array` objects.
> [!NOTE]
> Array literals create `Array` objects. See {{jsxref("Array")}} and [Indexed collections](/en-US/docs/Web/JavaScript/Guide/Indexed_collections) for details on `Array` objects.
#### Extra commas in array literals

Expand Down Expand Up @@ -394,7 +398,8 @@ const myList = ["home", /* empty */, "school", /* empty */, ];

The Boolean type has two literal values: `true` and `false`.

> **Note:** Do not confuse the primitive Boolean values `true` and `false` with the true and false values of the {{jsxref("Boolean")}} object.
> [!NOTE]
> Do not confuse the primitive Boolean values `true` and `false` with the true and false values of the {{jsxref("Boolean")}} object.
>
> The Boolean object is a wrapper around the primitive Boolean data type. See {{jsxref("Boolean")}} for more information.
Expand Down Expand Up @@ -455,7 +460,8 @@ For example:

An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces (`{}`).

> **Warning:** Do not use an object literal at the beginning of a statement! This will lead to an error (or not behave as you expect), because the `{` will be interpreted as the beginning of a block.
> [!WARNING]
> Do not use an object literal at the beginning of a statement! This will lead to an error (or not behave as you expect), because the `{` will be interpreted as the beginning of a block.
The following is an example of an object literal. The first element of the `car` object defines a property, `myCar`, and assigns to it a new string, `"Saturn"`; the second element, the `getCar` property, is immediately assigned the result of invoking the function `(carTypes("Honda"))`; the third element, the `special` property, uses an existing variable (`sales`).

Expand Down
12 changes: 8 additions & 4 deletions files/en-us/web/javascript/guide/indexed_collections/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ const arr3 = [];
arr3.length = arrayLength;
```

> **Note:** In the above code, `arrayLength` must be a `Number`. Otherwise, an array with a single element (the provided value) will be created. Calling `arr.length` will return `arrayLength`, but the array doesn't contain any elements. A {{jsxref("Statements/for...in", "for...in")}} loop will not find any property on the array.
> [!NOTE]
> In the above code, `arrayLength` must be a `Number`. Otherwise, an array with a single element (the provided value) will be created. Calling `arr.length` will return `arrayLength`, but the array doesn't contain any elements. A {{jsxref("Statements/for...in", "for...in")}} loop will not find any property on the array.
In addition to a newly defined variable as shown above, arrays can also be assigned as a property of a new or an existing object:

Expand Down Expand Up @@ -102,7 +103,8 @@ const myArray = ["Wind", "Rain", "Fire"];

You can refer to the first element of the array as `myArray[0]`, the second element of the array as `myArray[1]`, etc… The index of the elements begins with zero.

> **Note:** You can also use [property accessors](/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors) to access other properties of the array, like with an object.
> [!NOTE]
> You can also use [property accessors](/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors) to access other properties of the array, like with an object.
>
> ```js
> const arr = ["one", "two", "three"];
Expand All @@ -121,7 +123,8 @@ emp[1] = "Phil Lesh";
emp[2] = "August West";
```
> **Note:** If you supply a non-integer value to the array operator in the code above, a property will be created in the object representing the array, instead of an array element.
> [!NOTE]
> If you supply a non-integer value to the array operator in the code above, a property will be created in the object representing the array, instead of an array element.
>
> ```js
> const arr = [];
Expand Down Expand Up @@ -392,7 +395,8 @@ a.forEach((element) => {

The `forEach` method (and others below) that take a callback are known as _iterative methods_, because they iterate over the entire array in some fashion. Each one takes an optional second argument called `thisArg`. If provided, `thisArg` becomes the value of the `this` keyword inside the body of the callback function. If not provided, as with other cases where a function is invoked outside of an explicit object context, `this` will refer to the global object ([`window`](/en-US/docs/Web/API/Window), [`globalThis`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis), etc.) when the function is [not strict](/en-US/docs/Web/JavaScript/Reference/Strict_mode), or `undefined` when the function is strict.

> **Note:** The `sort()` method introduced above is not an iterative method, because its callback function is only used for comparison and may not be called in any particular order based on element order. `sort()` does not accept the `thisArg` parameter either.
> [!NOTE]
> The `sort()` method introduced above is not an iterative method, because its callback function is only used for comparison and may not be called in any particular order based on element order. `sort()` does not accept the `thisArg` parameter either.
The [`map()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) method returns a new array of the return value from executing `callback` on every array item.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@ while (!result.done) {
console.log("Iterated over sequence of size:", result.value); // [5 numbers returned, that took interval in between: 0 to 10]
```

> **Note:** It is not possible to know reflectively whether a particular object is an iterator. If you need to do this, use [Iterables](#iterables).
> [!NOTE]
> It is not possible to know reflectively whether a particular object is an iterator. If you need to do this, use [Iterables](#iterables).
## Generator functions

Expand Down Expand Up @@ -194,7 +195,8 @@ Generators compute their `yield`ed values _on demand_, which allows them to effi

The {{jsxref("Generator/next", "next()")}} method also accepts a value, which can be used to modify the internal state of the generator. A value passed to `next()` will be received by `yield` .

> **Note:** A value passed to the _first_ invocation of `next()` is always ignored.
> [!NOTE]
> A value passed to the _first_ invocation of `next()` is always ignored.
Here is the fibonacci generator using `next(x)` to restart the sequence:

Expand Down
Loading

0 comments on commit 0b0cac4

Please sign in to comment.