JS Quiz 1-4. var와 let의 호이스팅과 스코프 / 함수의 this / 형변환과 truthy-falsy 값

1. What's the output?

function sayHi() {
  console.log(name);
  console.log(age);
  var name = 'Lydia';
  let age = 21;
}

sayHi();

정답: D // var와 let의 호이스팅을 묻는 문제

 

var는 호이스팅이 되어 var name; 이 console.log(name);위에 위치하고 있는 것처럼 인식된다. 그래서 undefined가 반환된 것이다. let 값이 할당되어 있는 상태이므로, 호이스팅이 적용되지 않아 ReferenceError이 반환된 것이다.

 

만약 아래와 같았다면, undefined가 반환됐을 것이다. 변수 키워드 let도 블록레벨 안에서는 호이스팅이 발생하기 때문이다. 그리고 변수가 선언되고 초기화된 사이를 '일시적 사각 지대' TDZ라고 한다.
(참고 글 https://young-taek.tistory.com/188)

function sayHi() {
  var name;
  console.log(name); // undefiend;
  let age;
  console.log(age); // undefined;
  name = 'Lydia';
  age = 21;
}

---

2. What's the output?

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

정답 : C // var와 let의 스코프 범위를 묻는 문제

 

var는 함수 레벨 스코프이므로, 함수가 없어서 전역 변수가 된다. 반복문에 의해

var i = 3;이 전역변수가 되어 첫 번째 반복문에 적용되어 3 3 3이 출력된다.

 

전역 변수 var i = 3이었지만, let은 블록레벨 스코프이므로 그 안에서 우선권을 갖는다. 그래서 0 1 2가 출력된다.

---

3. What's the output?

const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2;
  },
  perimeter: () => 2 * Math.PI * this.radius,
};

console.log(shape.diameter());
console.log(shape.perimeter());

정답 B // 함수 선언과 화살표 함수의 this 차이를 묻는 문제

 

함수 선언식으로 되어 있는 diameter()의 this는 소속된 객체를 가리킨다. 따라서 this.raius는 10이 된다.

 

반면, 화살표 함수의 this는 함수 자체의 this를 가리키는데, 함수 자체에 선언된 radius가 없으므로 undefined가 된다. 즉, 2* 3.14 * undefined이므로 NaN이 반환된다.

---

4. What's the output?

+true;
!'Lydia';

정답 A // 암묵적 형변환을 아는지에 대한 문제 - JS의 동적언어의 특징

 

+는 숫자형으로 바꾸므로 1이 된다. 'Lydia'는 thuthy값이므로 1이지만, !는 값을 Boolean 형태로 변환한 뒤 결과를 뒤집으므로 false