[javascript] this 알기 - 1부

javascript 의 this 는 다른 언어에 비해 까다로운 것 같다. 

차일 피일 미루다, this 에 대해 정리하는 시간을 갖게 되었다.

this란?

- this는 함수의 현재 실행 Context이다.  (무슨 소리여?!)

실제 코드를 보면서 이해해보자. 

  var pizza = { cost : 25000, // 피자의 원가 getPrice : function() { // 직원가 var cost = 20000; return this.cost; }, price : this.cost + 10000 // 피자의 판매가 }; console.log(' 1. pizza.getPrice(): ' + pizza.getPrice()); console.log(' 2. pizza.price: ' + pizza.price);  

 - 코드 1-

 결과가 어떻게 나올까 예상해보자.

- 코드 1 실행 결과 -

결과를 보면, 해당 코드는 피자의 직원가, 판매가를 제대로 알려주지 않는다. 

1. 왜 피자의 직원가는 25000원인가? 

  

 - 객체의 프로퍼티로 만들어진 getPrice 함수는 실행시 scope가 새로 생성되지만, this는 스코프 영역과는 상관없이 해당 함수를 포함한 pizza 객체를 가리킨다.

따라서 this.cost의 결과값으로는 pizza.cost 의 값인 25000원이 나오는 것이다. 

2.  그렇다면, 피자의 판매가는 왜 NaN인가? 

- price값을 할당하는 시점에 this가 가리키는 것은 Window 이다. Window에는 cost라는 프로퍼티가 없으므로 this.cost를 콘솔에 찍어보면,undefined다. 

따라서 undefined 값에 숫자10000을 더해줌으로써 NaN(Not a Number) 가 출력되는 것이다. 

 사용할 때는 몰랐는데,  막상 알면 알수록 deep해지는 this에 대해 순차적으로 정리해보도록하겠다. 

 1부 끝.