ok
|
@ -385,12 +385,12 @@ let sum = (a, b) => a + b;
|
||||||
alert( sum(1, 2) ); // 3
|
alert( sum(1, 2) ); // 3
|
||||||
```
|
```
|
||||||
|
|
||||||
Here the function is same as:
|
Here the arrow function is a shorter form of:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
let sum = function(a, b) {
|
let sum = function(a, b) {
|
||||||
return a + b;
|
return a + b;
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
If we have only one argument, then brackets can be omitted, making that even shorter:
|
If we have only one argument, then brackets can be omitted, making that even shorter:
|
||||||
|
@ -398,7 +398,9 @@ If we have only one argument, then brackets can be omitted, making that even sho
|
||||||
```js run
|
```js run
|
||||||
// same as
|
// same as
|
||||||
// let double = function(n) { return n*2 }
|
// let double = function(n) { return n*2 }
|
||||||
|
*!*
|
||||||
let double = n => n*2;
|
let double = n => n*2;
|
||||||
|
*/!*
|
||||||
|
|
||||||
alert( double(3) ); // 6
|
alert( double(3) ); // 6
|
||||||
```
|
```
|
||||||
|
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 522 B After Width: | Height: | Size: 522 B |
Before Width: | Height: | Size: 391 B After Width: | Height: | Size: 391 B |
Before Width: | Height: | Size: 296 B After Width: | Height: | Size: 296 B |
Before Width: | Height: | Size: 482 B After Width: | Height: | Size: 482 B |
Before Width: | Height: | Size: 218 B After Width: | Height: | Size: 218 B |
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 257 B |
Before Width: | Height: | Size: 210 B After Width: | Height: | Size: 210 B |
Before Width: | Height: | Size: 254 B After Width: | Height: | Size: 254 B |
Before Width: | Height: | Size: 347 B After Width: | Height: | Size: 347 B |
Before Width: | Height: | Size: 520 B After Width: | Height: | Size: 520 B |
Before Width: | Height: | Size: 254 B After Width: | Height: | Size: 254 B |
Before Width: | Height: | Size: 234 B After Width: | Height: | Size: 234 B |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 117 KiB |
Before Width: | Height: | Size: 227 KiB After Width: | Height: | Size: 227 KiB |
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
Before Width: | Height: | Size: 155 KiB After Width: | Height: | Size: 155 KiB |
|
@ -1 +0,0 @@
|
||||||
# Object basics
|
|
|
@ -1,12 +1,14 @@
|
||||||
|
|
||||||
# Objects as dictionaries
|
# Objects
|
||||||
|
|
||||||
The `object` type is special.
|
As we know, there are 7 language types in Javascript.
|
||||||
|
|
||||||
All other types are called "primitive", because their values can contain only a single thing (be it a string or a number or whatever).
|
Six of them are called "primitive", because their values contain only a single thing (be it a string or a number or whatever).
|
||||||
|
|
||||||
In contrast, objects are used to store *keyed collections* of various data and more complex entities.
|
In contrast, objects are used to store *keyed collections* of various data and more complex entities.
|
||||||
|
|
||||||
|
In Javascript, objects penetrate almost every aspect of the language. So we must understand them first before going in-depth anywhere else.
|
||||||
|
|
||||||
[cut]
|
[cut]
|
||||||
|
|
||||||
An object is defined with the figure brackets `{…}` with an optional list of "key: value" pairs. In programming that's sometimes called an "associative array" or a "hash".
|
An object is defined with the figure brackets `{…}` with an optional list of "key: value" pairs. In programming that's sometimes called an "associative array" or a "hash".
|
||||||
|
@ -112,7 +114,7 @@ user[key] = true; // same as above
|
||||||
|
|
||||||
The square brackets mean: "take the property name from the variable".
|
The square brackets mean: "take the property name from the variable".
|
||||||
|
|
||||||
The variable can be assigned at run-time, for instance:
|
That variable can be assigned at run-time, for instance:
|
||||||
|
|
||||||
```js run
|
```js run
|
||||||
let user = {
|
let user = {
|
||||||
|
@ -126,9 +128,9 @@ let key = prompt("What do you want to know about the user?", "name");
|
||||||
alert( user[key] ); // John (if enter "name")
|
alert( user[key] ); // John (if enter "name")
|
||||||
```
|
```
|
||||||
|
|
||||||
Square brackets also can be used in an object literal.
|
### Computed properties
|
||||||
|
|
||||||
That's called a *computed property*:
|
*Computed properties* are square brackets used inside an object literal:
|
||||||
|
|
||||||
```js run
|
```js run
|
||||||
let fruit = prompt("Which fruit to buy?", "apple");
|
let fruit = prompt("Which fruit to buy?", "apple");
|
||||||
|
@ -142,15 +144,18 @@ let bag = {
|
||||||
alert( bag.apple ); // 5 if fruit="apple"
|
alert( bag.apple ); // 5 if fruit="apple"
|
||||||
```
|
```
|
||||||
|
|
||||||
Here, the object `bag` is created with a property with the name from `fruit` variable and the value `5`.
|
Here, the object `bag` is created with a property with the name from `fruit` variable and the value `5`. So, if a visitor enters `"apple"`, `bag` will become `{apple: 5}`.
|
||||||
|
|
||||||
Essentially, that works the same as:
|
Essentially, that works the same as:
|
||||||
```js
|
```js run
|
||||||
|
let fruit = prompt("Which fruit to buy?", "apple");
|
||||||
let bag = {};
|
let bag = {};
|
||||||
|
|
||||||
|
// take property name from the fruit variable, assign 5 to it
|
||||||
bag[fruit] = 5;
|
bag[fruit] = 5;
|
||||||
```
|
```
|
||||||
|
|
||||||
We could have used a more complex expression inside square brackets. Anything that results in a property name:
|
We can use more complex expressions inside square brackets. Anything that results in a property name:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
let fruit = 'apple';
|
let fruit = 'apple';
|
||||||
|
@ -159,12 +164,51 @@ let bag = {
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
Square brackets are much more powerful than the dot notation. They allow any property names and variables. But they are more cumbersome to write. So most of the time, when property names are known and simple, the dot is used. And if we need something more complex, then we can switch to square brackets.
|
Square brackets are much more powerful than the dot notation. They allow any property names and variables. But they are more cumbersome to write. So most of the time, when property names are known and simple, the dot is used. And if we need something more complex, then we switch to square brackets.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
````smart header="Trailing comma"
|
||||||
|
The last property in the list may end with a comma:
|
||||||
|
```js
|
||||||
|
let user = {
|
||||||
|
name: "John",
|
||||||
|
age: 30*!*,*/!*
|
||||||
|
}
|
||||||
|
```
|
||||||
|
That is called a "trailing" or "hanging" comma. Makes it easier to add/remove/move around properties, because all lines become alike.
|
||||||
|
````
|
||||||
|
|
||||||
|
|
||||||
|
````smart header="Reserved words are allowed as property names"
|
||||||
|
A variable cannot have a name equal to one of language-reserved words like "for", "let", "return" etc.
|
||||||
|
|
||||||
|
But for an object property, there's no such restruction. Any name is fine:
|
||||||
|
|
||||||
|
```js run
|
||||||
|
let obj = {
|
||||||
|
for: 1,
|
||||||
|
let: 2,
|
||||||
|
return: 3
|
||||||
|
}
|
||||||
|
|
||||||
|
alert( obj.for + obj.let + obj.return ); // 6
|
||||||
|
```
|
||||||
|
|
||||||
|
Basically, any name is allowed, but there's a special one: `"__proto__"` that gets special treatment for historical reasons. For instance, we can't set it to a non-object value:
|
||||||
|
|
||||||
|
```js run
|
||||||
|
let obj = { __proto__: 5 };
|
||||||
|
alert(obj.__proto__); // [object Object], didn't work as intended
|
||||||
|
```
|
||||||
|
|
||||||
|
Later we'll learn more about that `__proto__` and see how to work that problem [todo Object.create(null)]. Also we'll learn another data structure [Map](info:map-set-weakmap-weakset) that doesn't have such problems and supports arbitrary keys.
|
||||||
|
````
|
||||||
|
|
||||||
|
|
||||||
## Property name shorthand
|
## Property name shorthand
|
||||||
|
|
||||||
In real code we quite often want to create an object with a property from a variable.
|
In real code we often use existing variables as values for property names.
|
||||||
|
|
||||||
For instance:
|
For instance:
|
||||||
|
|
||||||
|
@ -183,7 +227,7 @@ let user = makeUser("John", 30);
|
||||||
alert(user.name); // John
|
alert(user.name); // John
|
||||||
```
|
```
|
||||||
|
|
||||||
There's a special shorthand notation that is shorter.
|
In the example above, properties have same names as variables. There's a special shorthand notation that is shorter.
|
||||||
|
|
||||||
Instead of `name:name` we can just write `name`, like this:
|
Instead of `name:name` we can just write `name`, like this:
|
||||||
|
|
||||||
|
@ -208,43 +252,6 @@ let user = {
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
````smart header="Trailing comma"
|
|
||||||
The last property may end with a comma:
|
|
||||||
```js
|
|
||||||
let user = {
|
|
||||||
name: "John",
|
|
||||||
age: 30*!*,*/!*
|
|
||||||
}
|
|
||||||
```
|
|
||||||
That is called a "trailing" or "hanging" comma. Makes it easier to add/move/remove properties, because all lines become alike.
|
|
||||||
````
|
|
||||||
|
|
||||||
|
|
||||||
````smart header="Reserved words are allowed as property names"
|
|
||||||
A variable cannot have a name equal to one of language-reserved words like "for", "let", "return" etc.
|
|
||||||
|
|
||||||
But for an object property, there's no such restruction. Any name is fine:
|
|
||||||
|
|
||||||
```js run
|
|
||||||
let obj = {
|
|
||||||
for: 1,
|
|
||||||
let: 2,
|
|
||||||
return: 3
|
|
||||||
}
|
|
||||||
|
|
||||||
alert( obj.for + obj.let + obj.return ); // 6
|
|
||||||
```
|
|
||||||
|
|
||||||
Basically, any name is allowed, but there's a special one: `"__proto__"`. We can't set it to a non-object value:
|
|
||||||
|
|
||||||
```js run
|
|
||||||
let obj = { __proto__: 5 };
|
|
||||||
alert(obj.__proto__); // [object Object], didn't work as intended
|
|
||||||
```
|
|
||||||
|
|
||||||
Later we'll learn more about that `__proto__` and see how to work around it [todo Object.create(null)]. Also we'll learn another data structure [Map](info:map-set-weakmap-weakset) that doesn't have such problems and supports arbitrary keys.
|
|
||||||
````
|
|
||||||
|
|
||||||
## Existance check
|
## Existance check
|
||||||
|
|
||||||
A notable objects feature is that it's possible to access any property. There will be no error if the property doesn't exist! Accessing a non-existing property just returns `undefined`. It provides a very common way to test whether the property exists -- to get it and compare vs undefined:
|
A notable objects feature is that it's possible to access any property. There will be no error if the property doesn't exist! Accessing a non-existing property just returns `undefined`. It provides a very common way to test whether the property exists -- to get it and compare vs undefined:
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 3 KiB After Width: | Height: | Size: 3 KiB |
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |