Day16

Day16

Vanilla 사전 문제 해설

VanillaJS 사전 문제 해설

1.

• 문제

• 답 : 4번
• 풀이

function안이 this는 window를 가리키게 되고 따라서 window.name과 window.age에 값이 저장된다. Cat함수는 반환값이 없기 때문에 tabby1에는 undefined가 저장된다. undefined의 name 멤버는 없기 때문에 오류가 발생한다.

new 키워드를 통해 함수를 호출하면 this가 window가 아닌 해당 함수를 가리키게 된다. 따라서 위 코드가 정상적으로 실행되어서 ‘nana’가 출력된다.

2.

• 문제

• 답 : 3번
• 풀이

JS에서 변수나 함수를 선언하면 해당 변수나 함수는 그걸 감싸고 있는 function에 붙게 된다. 만약 감싸지 않고 그냥 선언하면 모두다 window 객체에 붙어서 전역변수화 되고 이는 추후에 문제가 될 수 있다.

밖에서는 logCount에 접근할 수 없다. 하지만 logCount함수를 통해 logCount 변수가 얼마인지 알 수 있다.

3.

• 문제

• 답 : band undefiend roto play start
• 풀이

this가 roto 객체를 가리키기 때문에 name은 undefined가 되고 memberName은 roto가 되서 위와 같이 출력된다.

thisTest.whoAmI() 멤버에서의 함수 안에서 this는 thisTest 객체를 가리키고 thisTest.testInTest.whoAmI() 멤버에서의 함수 안에서의 this는 testInTest 객체를 가리키게 된다.

코드를 위와 같이 바꾸면 idiots객체 내부의 name이므로 원래 의도한대로 출력된다.

4.

• 문제

• 답 : error가 발생한다.
• 풀이

setTimeout에 인자로 전달된 함수 내에서 사용되는 this는 해당 함수를 가리키는데 해당 함수 내부에는 members 멤버가 없기 때문에 오류가발생한다.

해결 방법은 3가지가 존재한다.

arrow function 은 해당 function 자체로 scope를 만들지 않고 해당 arrow function 상위에 있는 스코프를 자신의 scope로 가진다. 따라서 this가 rockband의 this를 가리키게 됨.

bind함수는 해당 함수의 scope를 인자로 전달받은 객체의 scope로 변경해주는 함수이다. 위 코드와 같이 bind내부의 this는 RockBand를 가리키는데 해당 scope를 setTimeOut 내부의 익명 함수의 this로 변경해주기 때문에 정상적으로 실행된다.

closure는 해당 function 밖의 scope에 해당하는 변수를 참조하는 것을 말한다. 위 코드가 클로저를 이용하여 setTimeOut함수에 전달된 익명 함수의 this를 RockBand의 scope로 변경해주는 코드이다.

5.

• 문제

• 답 : setTimeOut에 의하여 실행되는 익명 함수가 참조하는 i는 이미 for 루프가 다 끝난 상태에서의 i이기 때문에 5가 된다. 따라서 배열에서 다섯 번째 원소는 없기 때문에 undefined가 출력된다.
• 풀이

원래는 0은 바로 나오고 1은 1초 뒤, 2는 2초 뒤… 이런 식으로 나오도록 설계한 코드이지만 그렇게 동작하지 않는다.

이를 해결하는 방법에는 크게 3가지가 있다.

IIFE를 이용한 해결방법이다.

var는 function scope , let은 block scope

forEach 문 내부에 콜백 함수로 새로운 함수를 넘겨주기 때문에 해결1과 비슷한 해결 방법

6.

• 문제, 답

• 풀이

Hoisting : var로 선언된 변수는 실행 시 function scope 상의 가장 최상단으로 끌어올려진다.

if문 내부의 선언된 변수들은 밖에선 사용하지 못하여야 하는데 var로 선언된 변수들은 최상위에 있는 function scope로 hoisting 되기 때문에 사용할 수 있게 된다.

따라서 값이 할당되기도 전에 호출되는 버그를 만날 수도 있다.

let,const는 block scope라서 block을 벗어나면 더 이상 해당 변수를 사용하지 못하게 된다.

let, const 또한 hoisting이 일어나지만 Temporary Dead Zone이라는 개념 덕분에 할당되기 전에 호출하면 에러가 생긴다.

7.

• 문제

• 답 : 함수와 함수가 선언된 어휘적 환경의 조합이다.
• 풀이

클로져를 이용하여 private 효과를 낼 수 있다.