Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correct a few usage of internal methods #18476

Merged
merged 1 commit into from
Jul 18, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 19 additions & 76 deletions files/en-us/web/javascript/data_structures/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -155,79 +155,20 @@ In computer science, an object is a value in memory which is possibly referenced

In JavaScript, objects can be seen as a collection of properties. With the [object literal syntax](/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#object_literals), a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using _key_ values. A _key_ value is either a {{Glossary("String", "String value")}} or a {{Glossary("Symbol", "Symbol value")}}.

There are two types of object properties: The [_data_ property](#data_property) and the [_accessor_ property](#accessor_property).

> **Note:** Each property has corresponding *attributes*. Attributes are used internally by the JavaScript engine, so you cannot directly access them. That's why attributes are listed in double square brackets, rather than single.
>
> See {{jsxref("Object.defineProperty()")}} to learn more.
There are two types of object properties: The [_data_ property](#data_property) and the [_accessor_ property](#accessor_property). Each property has corresponding _attributes_. Each attribute is accessed internally by the JavaScript engine, but you can set them through {{jsxref("Object.defineProperty()")}}, or read them through {{jsxref("Object.getOwnPropertyDescriptor()")}}. You can read more about the various nuances on the {{jsxref("Object.defineProperty()")}} page.

#### Data property

Associates a key with a value, and has the following attributes:

<table class="standard-table">
<caption>
Attributes of a data property
</caption>
<thead>
<tr>
<th scope="col">Attribute</th>
<th scope="col">Type</th>
<th scope="col">Description</th>
<th scope="col">Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td>[[Value]]</td>
<td>Any JavaScript type</td>
<td>The value retrieved by a get access of the property.</td>
<td><code>undefined</code></td>
</tr>
<tr>
<td>[[Writable]]</td>
<td>Boolean</td>
<td>
If <code>false</code>, the property's [[Value]] cannot be changed.
</td>
<td><code>false</code></td>
</tr>
<tr>
<td>[[Enumerable]]</td>
<td>Boolean</td>
<td>
<p>
If <code>true</code>, the property will be enumerated in
<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"
><code>for...in</code></a
>
loops.<br />See also
<a
href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties"
>Enumerability and ownership of properties</a
>.
</p>
</td>
<td><code>false</code></td>
</tr>
<tr>
<td>[[Configurable]]</td>
<td>Boolean</td>
<td>
If <code>false</code>, the property cannot be deleted, cannot be changed
to an accessor property, and attributes other than [[Value]] and
[[Writable]] cannot be changed.
</td>
<td><code>false</code></td>
</tr>
</tbody>
</table>

| Attribute | Type | Description |
| ---------- | ------- | ----------------------------------------------------- |
| Read-only | Boolean | Reversed state of the ES5 [[Writable]] attribute. |
| DontEnum | Boolean | Reversed state of the ES5 [[Enumerable]] attribute. |
| DontDelete | Boolean | Reversed state of the ES5 [[Configurable]] attribute. |
Data properties associate a key with a value. It can be described by the following attributes:

- `value`
- : The value retrieved by a get access of the property. Can be any JavaScript value.
- `writable`
- : A boolean value indicating if the property can be changed with an assignment.
- `enumerable`
- : A boolean value indicating if the property can be enumerated by a [`for...in`](/en-US/docs/Web/JavaScript/Reference/Statements/for...in) loop. See also [Enumerability and ownership of properties](/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) for how enumerability interacts with other functions and syntaxes.
- `configurable`
- : A boolean value indicating if the property can be deleted, can be changed to an accessor property, and can have its attributes changed.

#### Accessor property

Expand All @@ -237,12 +178,14 @@ Associates a key with one of two accessor functions (`get` and `set`) to retriev

An accessor property has the following attributes:

| Attribute | Type | Description | Default value |
| ---------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| [[Get]] | Function object or `undefined` | The function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed. See also [`get`](/en-US/docs/Web/JavaScript/Reference/Functions/get). | `undefined` |
| [[Set]] | Function object or `undefined` | The function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed. See also [`set`](/en-US/docs/Web/JavaScript/Reference/Functions/set). | `undefined` |
| [[Enumerable]] | Boolean | If `true`, the property will be enumerated in [`for...in`](/en-US/docs/Web/JavaScript/Reference/Statements/for...in) loops. | `false` |
| [[Configurable]] | Boolean | If `false`, the property can't be deleted and can't be changed to a data property. | `false` |
- `get`
- : A function called with an empty argument list to retrieve the property value whenever a get access to the value is performed. See also [getters](/en-US/docs/Web/JavaScript/Reference/Functions/get). May be `undefined`.
- `set`
- : A function called with an argument that contains the assigned value. Executed whenever a specified property is attempted to be changed. See also [setters](/en-US/docs/Web/JavaScript/Reference/Functions/get). May be `undefined`.
- `enumerable`
- : A boolean value indicating if the property can be enumerated by a [`for...in`](/en-US/docs/Web/JavaScript/Reference/Statements/for...in) loop. See also [Enumerability and ownership of properties](/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) for how enumerability interacts with other functions and syntaxes.
- `configurable`
- : A boolean value indicating if the property can be deleted, can be changed to an data property, and can have its attributes changed.

### "Normal" objects, and functions

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -74,22 +74,22 @@ method.
// but its handlers will be triggered asynchronously as demonstrated by the console.logs
const resolvedProm = Promise.resolve(33);

let thenProm = resolvedProm.then(value => {
console.log("this gets called after the end of the main stack. the value received and returned is: " + value);
return value;
const thenProm = resolvedProm.then((value) => {
console.log("this gets called after the end of the main stack. the value received and returned is: ", value);
return value;
});
// instantly logging the value of thenProm
console.log(thenProm);

// using setTimeout we can postpone the execution of a function to the moment the stack is empty
setTimeout(() => {
console.log(thenProm);
console.log(thenProm);
});

// logs, in order:
// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
// Promise {[[PromiseStatus]]: "pending", [[PromiseResult]]: undefined}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RE: mdn/mdn-community#150

This comment is outdated and doesn't describe what Chrome or Firefox dev tools does (and they display different texts).

The current text (after the change) matches Chrome's output, minus the [[Prototype]] slot.

image

(I quite like Chrome console's decision to display the internal slots ^^)

// "this gets called after the end of the main stack. the value received and returned is: 33"
// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33}
// Promise {[[PromiseStatus]]: "resolved", [[PromiseResult]]: 33}
```

## Description
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@ Some subtle distinctions between {{jsxref("Array.from()")}} and
`TypedArray.from()` is not a constructor,
`TypedArray.from()` will throw a {{jsxref("TypeError")}},
where `Array.from()` defaults to creating a new {{jsxref("Array")}}.
- `TypedArray.from()` uses `[[Put]]` where
`Array.from()` uses `[[DefineProperty]]`. Hence, when
- `TypedArray.from()` uses `[[Set]]` where
`Array.from()` uses `[[DefineOwnProperty]]`. Hence, when
working with {{jsxref("Proxy")}} objects, it calls
{{jsxref("Global_Objects/Proxy/handler/set", "handler.set")}} to create new
elements rather than {{jsxref("Global_Objects/Proxy/handler/defineProperty",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ Some subtle distinctions between {{jsxref("Array.of()")}} and
not a constructor, `TypedArray.of()` will throw a
{{jsxref("TypeError")}}, where `Array.of()` defaults to creating a new
{{jsxref("Array")}}.
- `TypedArray.of()` uses `[[Put]]` where
`Array.of()` uses `[[DefineProperty]]`. Hence, when working with
- `TypedArray.of()` uses `[[Set]]` where
`Array.of()` uses `[[DefineOwnProperty]]`. Hence, when working with
{{jsxref("Proxy")}} objects, it calls {{jsxref("Global_Objects/Proxy/handler/set",
"handler.set")}} to create new elements rather than
{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}.
Expand Down