This commit is contained in:
Ilya Kantor 2016-07-29 23:56:40 +03:00
parent 168a0d5d0f
commit eb49340d65
324 changed files with 854 additions and 142 deletions

View file

@ -385,12 +385,12 @@ let sum = (a, b) => a + b;
alert( sum(1, 2) ); // 3
```
Here the function is same as:
Here the arrow function is a shorter form of:
```js
let sum = function(a, b) {
return a + b;
}
};
```
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
// same as
// let double = function(n) { return n*2 }
*!*
let double = n => n*2;
*/!*
alert( double(3) ); // 6
```

View file

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 522 B

After

Width:  |  Height:  |  Size: 522 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 391 B

After

Width:  |  Height:  |  Size: 391 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 296 B

After

Width:  |  Height:  |  Size: 296 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 482 B

After

Width:  |  Height:  |  Size: 482 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 218 B

After

Width:  |  Height:  |  Size: 218 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 257 B

After

Width:  |  Height:  |  Size: 257 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 210 B

After

Width:  |  Height:  |  Size: 210 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 254 B

After

Width:  |  Height:  |  Size: 254 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 347 B

After

Width:  |  Height:  |  Size: 347 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 520 B

After

Width:  |  Height:  |  Size: 520 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 254 B

After

Width:  |  Height:  |  Size: 254 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 234 B

After

Width:  |  Height:  |  Size: 234 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 117 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 227 KiB

After

Width:  |  Height:  |  Size: 227 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 77 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 155 KiB

After

Width:  |  Height:  |  Size: 155 KiB

Before After
Before After

View file

@ -1 +0,0 @@
# Object basics

View file

@ -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 Javascript, objects penetrate almost every aspect of the language. So we must understand them first before going in-depth anywhere else.
[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".
@ -112,7 +114,7 @@ user[key] = true; // same as above
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
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")
```
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
let fruit = prompt("Which fruit to buy?", "apple");
@ -142,15 +144,18 @@ let bag = {
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:
```js
```js run
let fruit = prompt("Which fruit to buy?", "apple");
let bag = {};
// take property name from the fruit variable, assign 5 to it
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
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
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:
@ -183,7 +227,7 @@ let user = makeUser("John", 30);
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:
@ -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
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:

View file

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 3 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

Some files were not shown because too many files have changed in this diff Show more