1. var, let 변수 선언의 차이와 호이스팅
function sayHi() {
console.log(name); // undefined
console.log(age); // ReferenceError
var name = 'Lydia';
let age = 21;
}
sayHi();
var
- var로 선언한 변수는 값을 초기화하기 전까지 undefined 값을 갖는다
- 값을 초기화하기 전에 변수 접근 가능(호이스팅)
let, const
- let: 값을 초기화하기 전에 변수 접근 불가 (TDZ -> ReferenceError)
- const: 변수 선언시 반드시 값을 할당해야 함
📌2. 반복문과 setTimeout 및 var, let 차이
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1); // 3 3 3
}
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1); // 0 1 2
}
반복문 내부 setTimeout의 콜백 함수는 반복문이 완전히 끝나고 나서 호출된다
- var의 경우 i가 전역 변수 성격을 띄므로, 각 루프가 모두 같은 i(3)를 참조
- 반면, let으로 선언한 변수는 block level scope 이므로, 각 루프가 모두 새로운 i를 참조
3. 화살표 함수의 this
const shape = {
radius: 10,
diameter() {
return this.radius * 2;
},
perimeter: () => 2 * Math.PI * this.radius,
};
console.log(shape.diameter()); // 20
console.log(shape.perimeter()); // NaN
일반 함수
- 내부의 this 키워드가 현재 객체를 가리킴
화살표 함수
- this는 현재 객체가 아닌 전역 window를 가리킴
📌8. static 메서드
class Chameleon {
static colorChange(newColor) {
this.newColor = newColor;
return this.newColor;
}
constructor({ newColor = 'green' } = {}) {
this.newColor = newColor;
}
}
const freddie = new Chameleon({ newColor: 'purple' });
console.log(freddie.colorChange('orange')); // TypeError
static 메서드는 인스턴스로써 호출될 수 없다
- 무조건 클래스 바인딩으로 호출되어야 함
- 그래서 freddie.colorChange 가 undefined가 되는데, undefined('orange') 형태로 출력하려고 하면서 TypeError 발생
📌9. 전역 객체
let greeting;
greetign = {}; // Typo!
console.log(greetign); // {}
변수 선언 키워드 없이 변수에 값을 할당하면 전역 객체에 할당하는 것으로 동작된다
- Node.js에서는 global.greetign = {}
- 브라우저에서는 window.greetign = {} (또는 self, frames 도 가능)
- web worker에서는 self.greetign = {}
- globalThis 는 모든 JS 환경에서 동일한 전역 객체를 가리킴
- 변수를 선언하기 전에 할당하려는 행위를 방지하려면 "use strict" 를 사용하면 된다
14. 유저가 만든 객체를 제외한 모든 객체는 프로토타입을 갖는다
17. tagged template literals
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`;
// ['', ' is ', ' years old']
// Lydia
// 21
ES6에서 새로 추가된 tagged template literals
- tag함수`템플릿 리터럴` 형태로 사용
- tag함수의 첫 번째 인자에는 템플릿 기준으로 부분집합을 이루는 문자열들의 배열이 들어간다
- 그리고 두 번째 인자부터는 전달되는 값들이 들어간다
참고