File tree

1 file changed

+309
-0
lines changed

1 file changed

+309
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,309 @@
1+
# 2.16 JavaScript specials
2+
3+
This chapter briefly recaps the features of JavaScript that we’ve learned by now, paying special attention to subtle moments.
4+
5+
## Code structure
6+
7+
Statements are delimited with a semicolon:
8+
9+
```
10+
alert('Hello'); alert('World');
11+
```
12+
13+
Usually, a line-break is also treated as a delimiter, so that would also work:
14+
15+
```
16+
alert('Hello')
17+
alert('World')
18+
```
19+
20+
That’s called “automatic semicolon insertion”. Sometimes it doesn’t work, for instance:
21+
22+
```
23+
alert("There will be an error after this message")
24+
25+
[1, 2].forEach(alert)
26+
```
27+
28+
Most codestyle guides agree that we should put a semicolon after each statement.
29+
30+
Semicolons are not required after code blocks `{...}` and syntax constructs with them like loops:
31+
32+
```
33+
function f() {
34+
// no semicolon needed after function declaration
35+
}
36+
37+
for(;;) {
38+
// no semicolon needed after the loop
39+
}
40+
```
41+
42+
... But even if we can put an “extra” semicolon somewhere, that’s not an error. It will be ignored.
43+
44+
More in: [Code structure](https://.com/Bunlong/The-Modern-JavaScript-Tutorial/blob/master/pages/2.2-Code-structure.md "Code structure").
45+
46+
## Strict mode
47+
48+
To fully enable all features of modern JavaScript, we should start scripts with `"use strict"`.
49+
50+
```
51+
'use strict';
52+
53+
...
54+
```
55+
56+
The directive must be at the top of a script or at the beginning of a function.
57+
58+
Without `"use strict"`, everything still works, but some features behave in the old-fashion, “compatible” way. We’d generally prefer the modern behavior.
59+
60+
Some modern features of the language (like classes that we’ll study in the future) enable strict mode implicitly.
61+
62+
More in: [ The modern mode, "use strict"](https://.com/Bunlong/The-Modern-JavaScript-Tutorial/blob/master/pages/2.3-The-modern-mode.md 'The modern mode, "use strict"').
63+
64+
## Variables
65+
66+
Can be declared using:
67+
68+
* `let`
69+
70+
* `const` (constant, can’t be changed)
71+
72+
* `var` (old-style, will see later)
73+
74+
A variable name can include:
75+
76+
* Letters and digits, but the first character may not be a digit.
77+
78+
* Characters `$` and `_` are normal, on par with letters.
79+
80+
* Non-Latin alphabets and hieroglyphs are also allowed, but commonly not used.
81+
82+
Variables are dynamically typed. They can store any value:
83+
84+
```
85+
let x = 5;
86+
x = "John";
87+
```
88+
89+
There are 7 data types:
90+
91+
* `number` for both floating-point and integer numbers,
92+
93+
* `string` for strings,
94+
95+
* `boolean` for logical values: `true/false`,
96+
97+
* `null` – a type with a single value `null`, meaning “empty” or “does not exist”,
98+
99+
* `undefined` – a type with a single value `undefined`, meaning “not assigned”,
100+
101+
* `object` and `symbol` – for complex data structures and unique identifiers, we haven’t learnt them yet.
102+
103+
The `typeof` operator returns the type for a value, with two exceptions:
104+
105+
```
106+
typeof null == "object" // error in the language
107+
typeof function(){} == "function" // functions are treated specially
108+
```
109+
110+
More in: [Variables](https://.com/Bunlong/The-Modern-JavaScript-Tutorial/blob/master/pages/2.4-Variables.md "Variables") and [Data types](https://.com/Bunlong/The-Modern-JavaScript-Tutorial/blob/master/pages/2.5-Data-types.md "Data types").
111+
112+
## Interaction
113+
114+
We’re using a browser as a working environment, so basic UI functions will be:
115+
116+
[prompt(question[, default])](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt#See_also "prompt(question[, default])")
117+
118+
Ask a question, and return either what the visitor entered or `null` if he pressed “cancel”.
119+
120+
[confirm(question)](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm "confirm(question)")
121+
122+
Ask a `question` and suggest to choose between Ok and Cancel. The choice is returned as `true/false`.
123+
124+
[alert(message)](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert "alert(message)")
125+
126+
Output a `message`.
127+
128+
All these functions are modal, they pause the code execution and prevent the visitor from interacting with the page until he answers.
129+
130+
For instance:
131+
132+
```
133+
let userName = prompt("Your name?", "Alice");
134+
let isTeaWanted = confirm("Do you want some tea?");
135+
136+
alert( "Visitor: " + userName ); // Alice
137+
alert( "Tea wanted: " + isTeaWanted ); // true
138+
```
139+
140+
More in: [Interaction: alert, prompt, confirm](https://.com/Bunlong/The-Modern-JavaScript-Tutorial/blob/master/pages/2.9-Interaction.md "Interaction: alert, prompt, confirm").
141+
142+
## Operators
143+
144+
JavaScript supports the following operators:
145+
146+
***Arithmetical***
147+
148+
Regular: `* + - /`, also `%` for the remainder and `**` for power of a number.
149+
150+
Binary plus `+` concatenates strings. And if any of the operands is a string, the other one is converted to string too:
151+
152+
```
153+
alert( '1' + 2 ); // '12', string
154+
alert( 1 + '2' ); // '12', string
155+
```
156+
157+
***Assignments***
158+
159+
There is a simple assignment: `a = b` and combined ones like `a *= 2`.
160+
161+
***Bitwise***
162+
163+
Bitwise operators work with integers on bit-level: see the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators "docs") when they are needed.
164+
165+
***Ternary***
166+
167+
The only operator with three parameters: `cond ? resultA : resultB`. If `cond` is truthy, returns `resultA`, otherwise `resultB`.
168+
169+
***Logical operators***
170+
171+
Logical AND `&&` and OR `||` perform short-circuit evaluation and then return the value where it stopped.
172+
173+
***Comparisons***
174+
175+
Equality check `==` for values of different types converts them to a number (except `null` and `undefined` that equal each other and nothing else), so these are equal:
176+
177+
```
178+
alert( 0 == false ); // true
179+
alert( 0 == '' ); // true
180+
```
181+
182+
Other comparisons convert to a number as well.
183+
184+
The strict equality operator `===` doesn’t do the conversion: different types always mean different values for it, so:
185+
186+
Values `null` and `undefined` are special: they equal `==` each other and don’t equal anything else.
187+
188+
Greater/less comparisons compare strings character-by-character, other types are converted to a number.
189+
190+
***Logical operators***
191+
192+
There are few others, like a comma operator.
193+
194+
More in: [Operators](https://.com/Bunlong/The-Modern-JavaScript-Tutorial/blob/master/pages/2.7-Operators.md "Operators"), [Comparisons](https://.com/Bunlong/The-Modern-JavaScript-Tutorial/blob/master/pages/2.8-Comparisons.md "Comparisons"), [Logical operators](https://.com/Bunlong/The-Modern-JavaScript-Tutorial/blob/master/pages/2.11-Logical-operators.md "Logical operators").
195+
196+
## Loops
197+
198+
* We covered 3 types of loops:
199+
200+
```
201+
// 1
202+
while (condition) {
203+
...
204+
}
205+
206+
// 2
207+
do {
208+
...
209+
} while (condition);
210+
211+
// 3
212+
for(let i = 0; i < 10; i++) {
213+
...
214+
}
215+
```
216+
217+
* The variable declared in `for(let...)` loop is visible only inside the loop. But we can also omit `let` and reuse an existing variable.
218+
219+
* Directives `break/continue` allow to exit the whole loop/current iteration. Use labels to break nested loops.
220+
221+
Details in: [Loops: while and for](https://.com/Bunlong/The-Modern-JavaScript-Tutorial/blob/master/pages/2.12-Loops.md "Loops: while and for").
222+
223+
Later we’ll study more types of loops to deal with objects.
224+
225+
## The “switch” construct
226+
227+
The “switch” construct can replace multiple `if` checks. It uses `===` for comparisons.
228+
229+
For instance:
230+
231+
```
232+
let age = prompt('Your age?', 18);
233+
234+
switch (age) {
235+
case 18:
236+
alert("Won't work"); // the result of prompt is a string, not a number
237+
238+
case "18":
239+
alert("This works!");
240+
break;
241+
242+
default:
243+
alert("Any value not equal to one above");
244+
}
245+
```
246+
247+
Details in: [The "switch" statement](https://.com/Bunlong/The-Modern-JavaScript-Tutorial/blob/master/pages/2.13-The-switch-statement.md 'The "switch" statement').
248+
249+
## Functions
250+
251+
We covered three ways to create a function in JavaScript:
252+
253+
1. Function Declaration: the function in the main code flow
254+
255+
```
256+
function sum(a, b) {
257+
let result = a + b;
258+
259+
return result;
260+
}
261+
```
262+
263+
2. Function Expression: the function in the context of an expression
264+
265+
```
266+
let sum = function(a, b) {
267+
let result = a + b;
268+
269+
return result;
270+
}
271+
```
272+
273+
Function expression can have a name, like `sum = function name(a, b)`, but that `name` is only visible inside that function.
274+
275+
3. Arrow functions:
276+
277+
```
278+
// expression at the right side
279+
let sum = (a, b) => a + b;
280+
281+
// or multi-line syntax with { ... }, need return here:
282+
let sum = (a, b) => {
283+
// ...
284+
return a + b;
285+
}
286+
287+
// without arguments
288+
let sayHi = () => alert("Hello");
289+
290+
// with a single argument
291+
let double = n => n * 2;
292+
```
293+
294+
* Functions may have local variables: those declared inside its body. Such variables are only visible inside the function.
295+
296+
* Parameters can have default values: `function sum(a = 1, b = 2) {...}`.
297+
298+
* Functions always return something. If there’s no `return` statement, then the result is `undefined`.
299+
300+
| Function Declaration | Function Expression |
301+
| :------------------------------- | :------------------------------------------------ |
302+
| visible in the whole code block | created when the execution reaches it |
303+
| - | can have a name, visible only inside the function |
304+
305+
More: see [Functions](https://.com/Bunlong/The-Modern-JavaScript-Tutorial/blob/master/pages/2.14-Functions.md "Functions"), [Function expressions and arrows](https://.com/Bunlong/The-Modern-JavaScript-Tutorial/blob/master/pages/2.15-Function-expressions-and-arrows.md "Function expressions and arrows").
306+
307+
## More to come
308+
309+
That was a brief list of JavaScript features. As of now we’ve studied only basics. Further in the tutorial you’ll find more specials and advanced features of JavaScript.

0 commit comments

Comments
 (0)