19. JS typeof, rest parameter
function getAge(...args) {
console.log(typeof args);
}
getAge(21); // "object" ([21])
- rest parameter는 모든 인자를 배열에 담는다
- JS에서 배열은 object 타입에 해당한다
20. "use strict"
function getAge() {
'use strict';
age = 21;
console.log(age); // ReferenceError
}
getAge();
'use strict'
- 전역 변수를 선언하지 않겠다고 명시하기 때문에 window.age = 21 불가능하므로 ReferenceError 발생
- 굳이 코드 최상단에 위치할 필요 없다
📌21. session storage
- session storage에 저장한 데이터는 브라우저의 그 탭을 닫으면 지워진다
📌22. 전역 실행 컨텍스트
- 가장 기본적인 실행 컨텍스트는 전역 실행 컨텍스트이며 global object를 갖고, this 키워드로 어디에서든지 참조할 수 있다
📌29. 객체의 키값
const a = {};
const b = { key: 'b' };
const c = { key: 'c' };
a[b] = 123;
a[c] = 456;
console.log(a[b]);
객체의 키값은 자동으로 문자열로 변환된다
- 객체의 키값에 객체를 사용한다면, 객체가 문자열로 변환되며 "[object Object]" 로 바뀐다
📌31. event target
- event.target: 이벤트가 발생한 엘리먼트
- event.currentTarget: 이벤트 핸들러가 바인딩된 엘리먼트
📌32. event handler
<div onclick="console.log('div')">
<p onclick="console.log('p')">
Click here!
</p>
</div>
<!-- <p> 클릭 시 출력 결과: p div -->
이벤트 전파 단계
- 캡쳐링 -> 타게팅 -> 버블링
- 하지만 기본적으로 이벤트 핸들러는 버블링 단계에서 실행된다 (캡쳐링 단계에서 실행되게 변경도 가능)
📌33. call(), bind()
const person = { name: 'Lydia' };
function sayHi(age) {
return `${this.name} is ${age}`;
}
console.log(sayHi.call(person, 21));
console.log(sayHi.bind(person, 21));
call() 과 bind() 모두 새로운 함수를 만든다
- 1번째 인자에는 this 키워드가 지칭할 수 있는 객체를 전달할 수 있다
- 2번째 인자부터는 함수의 매개변수로 차례로 전달된다
- 하지만 bind()는 새로운 함수를 만들기만 하고, call()은 만든 함수를 즉시 실행한다
📌35. JS falthy 값
- 숫자 0은 falsy하지만, new Number(0) 은 함수 생성자로 truthy 하다
- 마찬가지로 Boolean 생성자, String 생성자로 falsy 값을 만들어도 truthy 값이 된다
38. try catch 문의 스코프
(() => {
let x, y;
try {
throw new Error();
} catch (x) {
(x = 1), (y = 2);
console.log(x); // 1
}
console.log(x); // undefined
console.log(y); // 2
})();
- catch 문에서 매개변수로 받은 x에 1을 할당했기 때문에 해당 스코프에서는 x = 1, 앞서 선언한 y = 2 할당
- catch 문이 끝나면 앞서 선언한 x는 undefined, y는 2
📌43. 스프레드 연산자
console.log([...'Lydia']); // ['L', 'y', 'd', 'i', 'a']
- 문자열도 이터러블이기 때문에 스프레드 연산자로 분해할 수 있다
📌44. 제네레이터 함수
function* generator(i) {
yield i; // 1st stop
yield i * 2; // 2nd stop
}
const gen = generator(10);
console.log(gen.next().value); // 10
console.log(gen.next().value); // 20
제네레이터 함수
- function* 키워드로 정의된 함수는 제네레이터 객체를 반환한다
- 일반 함수와 다르게, 호출되고 중간에 멈출 수 있다
- yield 키워드가 있는 곳에서 함수가 멈추고 값을 yield 한다(return과 다르다)
- next() 메서드를 통해 yield된 값을 하나씩 가져올 수 있다
- 모든 yield가 종료되면 아래 값을 반환
{ value: undefined, done: true }
참고