#
[](https://www.instagram.com/theavocoder)
: , , ! :muscle: :rocket:
, . :heart:
: . . `issue` .
---
###### 1.
```javascript
function sayHi() {
console.log(name);
console.log(age);
var name = "Lydia";
let age = 21;
}
sayHi();
```
- : `Lydia` `undefined`
- : `Lydia` `ReferenceError`
- : `ReferenceError` `21`
- : `undefined` `ReferenceError`
#### :
`name` `var`. `undefined` . `undefined`.
`let` `const` , . `temporal dead zone` " ". `ReferenceError`
---
###### 2.
```javascript
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1);
}
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1);
}
```
- : `0 1 2` `0 1 2`
- : `0 1 2` `3 3 3`
- : `3 3 3` `0 1 2`
#### :
`setTimeout` __ `event queue` . `var` `global` `i` 3 __ `setTimeout` . .
`i` `let` `scope` `block` `i` `block scope` , 3 `i` 3 !
---
###### 3.
```javascript
const shape = {
radius: 10,
diameter() {
return this.radius * 2;
},
perimeter: () => 2 * Math.PI * this.radius
};
shape.diameter();
shape.perimeter();
```
- : `20` `62.83185307179586`
- : `20` `NaN`
- : `20` `63`
- : `NaN` `63`
#### :
`diameter` `regular` `perimeter` `arrow function`.
, `this` . `perimeter` `this` `shape` `window` !
`radius` , `undefined`.
---
###### 4.
```javascript
+true;
!"Lydia";
```
- : `1` `false`
- : `NaN` `false`
- : `false` `false`
#### :
`true` `1` `false` `0`.
The unary plus tries to convert an operand to a number. `true` is `1`, and `false` is `0`.
`'Lydia'` . : " `false`.
---
###### 5.
```javascript
const bird = {
size: "small"
};
const mouse = {
name: "Mickey",
small: true
};
```
- : `mouse.bird.size`
- : `mouse[bird.size]`
- : mouse[bird["size"]]`
- :
#### :
`object keys` `string` `symbol`. `string` `string`
:
```javascriptlet obj = {
size: 'big'
}
```
size. size `""` `"size"`
. `[]` `bracket notation` `[` `]`. .
`mouse[bird.size]` `bird.size` `"small"` `mouse["small"]` `true`
`dot notation` . `mouse` `bird` `cannot read property of undefined`.
---
---
###### 6.
```javascript
let c = { greeting: "Hey!" };
let d;
d = c;
c.greeting = "Hello";
console.log(d.greeting);
```
- : `Hello`
- : `Hey`
- : `undefined`
- : `ReferenceError`
- : `TypeError`
#### :
`objects` `reference` . .
`c` `d`
.
[ko5k0fs.png]
.
---
###### 7.
```javascript
let a = 3;
let b = new Number(3);
let c = 3;
console.log(a == b);
console.log(a === b);
console.log(b === c);
```
- : `true` `false` `true`
- : `false` `false` `true`
- : `true` `false` `false`
- : `false` `true` `true`
#### :
`new Number()` `constructor` `primitive` `object` `methods` .
`==` **** . `3` `true`
`===` **** **** `object` `false`.
---
###### 8.
```javascript
class Chameleon {
static colorChange(newColor) {
this.newColor = newColor;
return this.newColor;
}
constructor({ newColor = "green" } = {}) {
this.newColor = newColor;
}
}
const freddie = new Chameleon({ newColor: "purple" });
freddie.colorChange("orange");
```
- : `orange`
- : `purple`
- : `green`
- : `TypeError`
#### :
`colorChange` `static` `constructor` `class` `freddie` `colorChange` `TypeError`.
---
###### 9.
```javascript
let greeting;
greetign = {}; // Typo!
console.log(greetign);
```
- : `{}`
- : `ReferenceError: greetign is not defined`
- : `undefined`
#### :
`global` `greetign` `greeting` `greetign` `window.greetign={}` .
`"use strict"` .
---
###### 10.
```javascript
function bark() {
console.log("Woof!");
}
bark.animal = "dog";
```
- : , !
- : `SyntaxError`
- : `undefined`
- : `ReferenceError`
#### :
`object` .
---
###### 11.
```javascript
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const member = new Person("Lydia", "Hallie");
Person.getFullName = function() {
return `${this.firstName} ${this.lastName}`;
};
console.log(member.getFullName());
```
- : `TypeError`
- : `SyntaxError`
- : `Lydia Hallie`
- : `undefined` `undefined`
#### :
`constructor` . `constructor` `prototype`
:
```js
Person.prototype.getFullName = function() {
return `${this.firstName} ${this.lastName}`;
};
```
`constructor` . -- -- `prototype` !
---
###### 12.
```javascript
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const lydia = new Person("Lydia", "Hallie");
const sarah = Person("Sarah", "Smith");
console.log(lydia);
console.log(sarah);
```
- : `Person {firstName: "Lydia", lastName: "Hallie"}` `undefined`
- : `Person {firstName: "Lydia", lastName: "Hallie"}` `Person {firstName: "Sarah", lastName: "Smith"}`
- : `Person {firstName: "Lydia", lastName: "Hallie"}` `{}`
- : `Person {firstName: "Lydia", lastName: "Hallie"}` `ReferenceError`
#### :
`new` . `new` `global` `window` `this.firstName = "Sarah"` `window.firstName = "Sarah"` `sarah `undefined`
---
###### 13. 3 `event propagation`
- : Target > Capturing > Bubbling
- : Bubbling > Target > Capturing
- : Target > Bubbling > Capturing
- : Capturing > Target > Bubbling
#### :
`capturing` . `target` `bubbling`
[N18oRgd.png]
---
###### 14. `objects` `prototype`. :
- :
- :
#### :
`prototype` **base object** . .
---
###### 15.
```javascript
function sum(a, b) {
return a + b;
}
sum(1, "2");
```
- : `NaN`
- : `TypeError`
- : `12`
- : `3`
#### :
`dynamic` `implicit coercion`.
`1` `string` . `1` `"2"` `"12"`.
---
###### 16.
```javascript
let number = 0;
console.log(number++);
console.log(++number);
console.log(number);
```
- : `1` `1` `2`
- : `1` `2` `2`
- : `0` `2` `2`
- : `0` `1` `2`
#### :
`x++`
`++x`
---
###### 17. ( )
```javascript
function getPersonInfo(one, two, three) {
console.log(one);
console.log(two);
console.log(three);
}
const person = "Lydia";
const age = 21;
getPersonInfo`${person} is ${age} years old`;
```
- : `"Lydia"` `21` `["", " is ", " years old"]`
- : `["", " is ", " years old"]` `"Lydia"` `21`
- : `"Lydia"` `["", " is ", " years old"]` `21`
#### :
`tagged template literals` `array` .
---
###### 18.
```javascript
function checkAge(data) {
if (data === { age: 18 }) {
console.log("You are an adult!");
} else if (data == { age: 18 }) {
console.log("You are still an adult.");
} else {
console.log(`Hmm.. You don't have an age I guess`);
}
}
checkAge({ age: 18 });
```
- : `You are an adult!`
- : `You are still an adult.`
- : `Hmm.. You don't have an age I guess`
#### :
, `primitive` `reference`. .
. .
---
###### 19.
```javascript
function getAge(...args) {
console.log(typeof args);
}
getAge(21);
```
- : `"number"`
- : `"array"`
- : `"object"`
- : `"NaN"`
#### :
`spread operator ...args` `array` . `array` `"object"`
---
###### 20.
```javascript
function getAge() {
"use strict";
age = 21;
console.log(age);
}
getAge();
```
- : `21`
- : `undefined`
- : `ReferenceError`
- : `TypeError`
#### :
`"use strict"` `global` . `declare` `age` `"use strict"` `ReferenceError`.
---
###### 21. `sum`?
```javascript
const sum = eval("10*10+5");
```
- : `105`
- : `"105"`
- : `TypeError`
- : `"10*10+5"`
#### :
`eval` `string`. `10 * 10 + 5` `105`.
---
###### 22. cool_secret
```javascript
sessionStorage.setItem("cool_secret", 123);
```
- : ,
- :
- :
- :
#### :
`sessionStorage` .
`localStorage` .
---
###### 23.
```javascript
var num = 8;
var num = 10;
console.log(num);
```
- : `8`
- : `10`
- : `SyntaxError`
- : `ReferenceError`
#### :
`var` . `let` `const`.
---
###### 24.
```javascript
const obj = { 1: "a", 2: "b", 3: "c" };
const set = new Set([1, 2, 3, 4, 5]);
obj.hasOwnProperty("1");
obj.hasOwnProperty(1);
set.has("1");
set.has(1);
```
- : `false` `true` `false` `true`
- : `false` `true` `true` `true`
- : `true` `true` `false` `true`
- : `true` `true` `true` `true`
#### :
`object keys` `Symbol` `string` . `obj.hasOwnProperty('1')` `true`
`set` `string` `'1'` .
---
###### 25.
```javascript
const obj = { a: "one", b: "two", a: "three" };
console.log(obj);
```
- : `{ a: "one", b: "two" }`
- : `{ b: "two", a: "three" }`
- : `{ a: "three", b: "two" }`
- : `SyntaxError`
#### :
`object key` , .
---
###### 26. , `global` `this` . :
- :
- :
- :
#### :
`global execution context` `global` .
---
###### 27.
```javascript
for (let i = 1; i < 5; i++) {
if (i === 3) continue;
console.log(i);
}
```
- : `1` `2`
- : `1` `2` `3`
- : `1` `2` `4`
- : `1` `3` `4`
#### :
`continue` .
---
###### 28.
```javascript
String.prototype.giveLydiaPizza = () => {
return "Just give Lydia pizza already!";
};
const name = "Lydia";
name.giveLydiaPizza();
```
- : `"Just give Lydia pizza already!"`
- : `TypeError: not a function`
- : `SyntaxError`
- : `undefined`
#### :
`String` `constructor` . `prototype` . `primitive` `object` .
---
###### 29.
```javascript
const a = {};
const b = { key: "b" };
const c = { key: "c" };
a[b] = 123;
a[c] = 456;
console.log(a[b]);
```
- : `123`
- : `456`
- : `undefined`
- : `ReferenceError`
#### :
`Object keys` string. . `[Object object] `a["Object object"]=123` `c` `a[b]` `a["Object object"]` 456 .
---
###### 30.
```javascript
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"));
const baz = () => console.log("Third");
bar();
foo();
baz();
```
- : `First` `Second` `Third`
- : `First` `Third` `Second`
- : `Second` `First` `Third`
- : `Second` `Third` `First`
#### :
`setTimeout` .
, `Web Application APIs` `WebAPIs` `setTimeout` .
`setTimeout` `callback` , `setTimeout` , `callback` .
[X5wsHOg.png]
[Pvc0dGq.png]
[WhA2bCP.png]
[NSnDZmU.png]
[uyiScAI.png]
---
###### 31. `event.target`
- : Outer `div`
- : Inner `div`
- : `button`
- :
#### :
`event.stopPropagation`.
---
###### 32.
- : `p` `div`
- : `div` `p`
- : `p`
- : `div`
#### :
: `p` `div`. 3 . `Bubbling` .
---
###### 33.
```javascript
const person = { name: "Lydia" };
function sayHi(age) {
console.log(`${this.name} is ${age}`);
}
sayHi.call(person, 21);
sayHi.bind(person, 21);
```
- : `undefined is 21` `Lydia is 21`
- : `function` `function`
- : `Lydia is 21` `Lydia is 21`
- : `Lydia is 21` `function`
#### :
`this` . `call` `bind` `this` .
---
###### 34.
```javascript
function sayHi() {
return (() => 0)();
}
typeof sayHi();
```
- : `"object"`
- : `"number"`
- : `"function"`
- : `"undefined"`
#### :
`sayHi` (IIFE) `"number"`.
: 3 : `null`, `undefined`, `boolean`, `number`, `string`, `object` `symbol`. `object`.
---
###### 35. `false`
```javascript
0;
new Number(0);
("");
(" ");
new Boolean(false);
undefined;
```
- : `0`, `''`, `undefined`
- : `0`, `new Number(0)`, `''`, `new Boolean(false)`, `undefined`
- : `0`, `''`, `new Boolean(false)`, `undefined`
- :
#### :
6 `false` :
- `undefined`
- `null`
- `NaN`
- `0`
- `''` (empty string)
- `false`
`constructor` `truthy` 6 .
---
###### 36.
```javascript
console.log(typeof typeof 1);
```
- : `"number"`
- : `"string"`
- : `"object"`
- : `"undefined"`
#### :
`typeof 1` `"number"` `""` `typeof "number"` `"string"`
---
###### 37.
```javascript
const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);
```
- : `[1, 2, 3, 7 x null, 11]`
- : `[1, 2, 3, 11]`
- : `[1, 2, 3, 7 x empty, 11]`
- : `SyntaxError`
#### :
`array` () " " "empty slots" `undefined` :
`[1, 2, 3, 7 x empty, 11]`
. , .
---
###### 38.
```javascript
(() => {
let x, y;
try {
throw new Error();
} catch (x) {
(x = 1), (y = 2);
console.log(x);
}
console.log(x);
console.log(y);
})();
```
- : `1` `undefined` `2`
- : `undefined` `undefined` `undefined`
- : `1` `1` `2`
- : `1` `undefined` `undefined`
#### :
`catch` `x` `catch`. `1` `y` `2`. `catch` .
`catch` `undefined` `y` `2`.
---
###### 39. ...
- : primitive `object`
- : function `object`
- : `object` !
- : `object`
#### :
\ `primitives` `object` . : `boolean`, `null`, `undefined`, `bigint`, `number`, `string`, `symbol`
`methods` `'foo'.toUpperCase()` `TypeError` `object` . `undefined` `null`.
---
###### 40.
```javascript
[[0, 1], [2, 3]].reduce(
(acc, cur) => {
return acc.concat(cur);
},
[1, 2]
);
```
- : `[0, 1, 2, 3, 1, 2]`
- : `[6, 1, 2]`
- : `[1, 2, 0, 1, 2, 3]`
- : `[1, 2, 6]`
#### :
`[1,2]` `acc`. `acc` `[1,2]` `cur` `[0,1]` `[1,2,0,1]` `acc` `[2,3]` `cur` `[1, 2, 0, 1, 2, 3]`.
---
###### 41.
```javascript
!!null;
!!"";
!!1;
```
- : `false` `true` `false`
- : `false` `false` `true`
- : `false` `true` `true`
- : `true` `true` `false`
#### :
`null` `falsy` `!null` `true` `!true` `false`
`""` `false` `true` `false`
`1` `true`.
---
###### 42. `setInterval`
```javascript
setInterval(() => console.log("Hi"), 1000);
```
- : `unique id`
- :
- :
- : `undefined`
#### :
`setInterval` `clearInterval` .
---
###### 43.
```javascript
[..."Lydia"];
```
- : `["L", "y", "d", "i", "a"]`
- : `["Lydia"]`
- : `[[], "Lydia"]`
- : `[["L", "y", "d", "i", "a"]]`
#### :
`string` Spread operator `...x` .
![[ko5k0fs.png]](https://i.imgur.com/ko5k0fs.png){kind=link}
![[N18oRgd.png]](https://i.imgur.com/N18oRgd.png){kind=link}
![[X5wsHOg.png]](https://i.imgur.com/X5wsHOg.png){kind=link}
![[Pvc0dGq.png]](https://i.imgur.com/Pvc0dGq.png){kind=link}
![[WhA2bCP.png]](https://i.imgur.com/WhA2bCP.png){kind=link}
![[NSnDZmU.png]](https://i.imgur.com/NSnDZmU.png){kind=link}
![[uyiScAI.png]](https://i.imgur.com/uyiScAI.png){kind=link}