패스트캠퍼스 Javascirpt 퀴즈 정리 2)

1. 아래 코드의 실행결과는?

fuction sayHi() {
	console.log(name);
    console.log(age);
    
    var name = 'Lee';
    let age = 20;
}

sayHi();

 

var 키워드의 문제점 중 하나인 변수 호이스팅! 즉, var 키워드로 선언된 변수는 선언되기 이전에 참조하게되면 undefined를 나타낸다. 반면에 let은 변수호이스팅이 일어나지 않고, 바로 참조에러를 나타낸다.

 

 

2. 아래 코드의 실행결과는?

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

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

1ms 이후에 333과 012가 출력된다.

이 문제에서는 var는 블록레벨 스코프를 지원하지 않는다. let은 블록레벨 스코프를 지원한다.

setTimeout함수는 비동기 함수로 콜스택이 비어져있을때 호출된다. 

위 2가지 이유로 인하여, 1ms 이후에  var의 i는 이미 for문에서 빠져나올때 3이 되어서 빠져나오고 3을 3번 찍는다. 

아래의 let으로 선언된 i는 0,1,2가 차례대로 찍힌다.

 

3. 아래코드의 실행결과는?

 

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

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

 

첫번째 콘솔은 diameter의 리턴값에 있는 this.radius가 10을 가르키므로 20이 출력된다.

반면에 두번째 콘솔은 화살표함수로 되어있다. 화살표함수에서의 this는 window를 가르킨다.

즉, 동적으로 변하지 않고, 상위 스코프에 this를 가르킴.(여기선 window). 윈도우에 radius라는 값이 없으므로

숫자계산을 리턴한 NaN이 나오게 된다.

 

4. 아래코드의 실행결과는?

console.log(+true);
console.log(!'Lee');

true는 1, false는 0 이다. 위에 콘솔은 1

문자는 값이 있으므로 true, true의 반대는 false 즉, 아래콘솔은 false

 

 

5. 다음 중 에러를 발생시키는 것을 모두 고르세요.

const bird = {
  size: 'small'
};

const mouse = {
  name: 'Mickey',
  small: true
};

A. mouse.bird.size

B. mouse[bird.size]

C. mouse[bird["size"]]

 

A만 에러를 일으킨다. 

A의 경우 식별자 mouse를 전역부터 찾음. mouse를 찾으면 프로퍼티를 찾는다. 하지만 프로퍼티에 bird가 없음.

프로퍼티를 프로토 타입에서 찾아보지만 없음.

 

B의 경우 bird.size = small과 동치이다. 따라서 mouse[small]이 되기때문에 true가 된다.

 

C의 경우 bird["size"]가 대괄호 표기법에 의하여 bird.size가 된다. 즉 B번과 같아지기때문에 true가 된다.

 

6. 아래코드의 실행결과는?

let c = { greeting: 'Hey!' };
let d;

d = c;
c.greeting = 'Hello';
console.log(d.greeting);

Hello를 출력한다.

객체는 pass by ref에 의해서 c, d가 같은 객체를 가르키고 있다.

c의 greeting 프로퍼티를 hello라고 바뀌었기 때문에 d 또한 hello로 바뀐 것을 보고 있었고 그래서 답은 hello

 

 

7. 아래코드의 실행결과는?

 

let a = 3;
let b = new Number(3);
let c = 3;

console.log(a == b);
console.log(a === b);
console.log(b === c);

b같은 경우 래퍼객체를 만드는 생성자 함수이다. 즉 3이라는 원시값을 갖는 객체가 된다.

 

첫번째 == 은 값만 같은지 두번째 세번째 ===은 타입도 같은지를 본다. 

 

1) 따라서 a와 b는 값이 같기때문에 true

2) a는 number b는 객체 타입 이기때문에 타입이 달라서 false

3) b와 c도 2와 같은 이유로 false

 

 

8. 아래코드의 실행결과는?

class Chameleon {
  consturctor({ newColor = 'green' } = {}) {
    this.newColor = newColor;
  }
  
  static colorChange(newColor) {
    this.newColor = newColor;
    return this.newColor;
  }
}

const freddie =new Chameleon({newColor: 'purple });
freddie.colorChange('orange');

 

colorChange 함수가 static 메소드이기 때문에 찾을수가 없다. 

즉 TypeError가 뜬다.

 

9. 아래코드의 실행결과는?

let greeting;
greetign = {};

console.log(greetign);

 오타를 발생시켰을때 어떻게 해주냐인데, 답은 {}이다. 오타 잡지 않음.

 

10. 아래코드의 실행결과는?

function bark() {
  console.log('Woof!');
}

bark.animal = 'dog';

함수가 객체인지 물어보는 문제이다.

함수도 객체이기 때문에 bark라는 함수에 프로퍼티로 animal이 추가되고 할당할 수 있다.

답은 에러없이 성공!