|
| 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