실행 컨텍스트 5 - 화살표 함수와 일반 함수의 this

이번에는 화살표 함수와 일반 함수의 차이에 대해서 공부해 보겠다.

---

 

 

 

 

이론 4 - 화살표 함수와 일반 함수의 this

 

 

자바스크립트 엔진이 함수를 실행할 때 새로운 함수 컨텍스트를 생성하고 그것을 콜 스택에 넣는다고 앞서 이야기했다. 제일 먼저 전역 컨텍스트가 들어가고 함수 컨텍스트가 쌓이게 된다. 그리고 함수 안에 다른 함수도 호출하며 콜 스택이 쌓이게 된다. 함수가 너무 많이 쌓이면 콜스택이 스택 오버플로가 생긴다.

변수를 참조할 때는 스코프 체인을 따라서 실행 컨텍스트 안에 참조하지 못하는 변수를 찾을 수 있다. 예를 들어 myFunc() 함수가 있을 때 a라는 변수가 있다고 하자. a가 어디에서 왔는지 스코프 체인을 따라 자바스크립트 엔진이 찾는데 전역 컨텐스트까지 가도 찾지 못하면 오류가 발생한다.

 

화살표 함수의 this의 경우 함수 컨텍스트가 생성될 때 가장 마지막에 생성된 스택을 가리키는 것이 아니라, 화살표 함수가 선언될 때의 this를 가리킨다. 그리고 this값을 계속 유지하면서 bind, apply 등으로 this를 바꾸려는 시도를 해도 바꾸지 못한다.

반면 일반 함수의 컨텍스트의 경우 this가 새롭게 생성된 내용을 가리킨다. this는 실행 컨텍스트 안에 정의되었는데 이 this를 바꿀 수 있다.

 

 

 

 

 

f1은 일반 함수로, f2는 화살표 함수로 정의되었다. method 함수 안의 this는 객체가 된다. method 함수가 어디에서 실행되었느냐에 따라 가리키는 값이 다른데, 마지막에서 실행되었다면 this는 o를 가리킨다. f1을 실행되면 globaal을 가리키는데 this는 바인딩된 컨텍스트가 없어 전역 객체를 가리키는 것이다.

use strlic를 해서 f1을 호출한다면 f1은 undefined가 된다. f2는 함수 컨텍스트가 생성될 때 this는 그 함수를 호출하는 환경인 객체 o를 가리친다.

 

 

 

 

 

 

this가 바뀌는 처리를 하려면 일반 함수를 사용한다.

 

 

 

 

 

 

this가 어떤 것을 가리키는지 따라가보자. bind를 하며 객체 o를 넘기면 o의  컨텍스트로 바인딩이 되어야 할 것 같은데 여전히 다니엘이라는 이름을 호출한다. 화살표 함수는 어떠한 경우라도 this값을 바꾸기 힘들다.

---

 

 

 

 

 

실습 3 - BankAccount 앱 만들기

 

---

 

 

 

문제 풀기

 

1. 문제 코드 실행하기

 

 

 

 

 

 

이름과 금액을 저장해도 아직은 금액도 이름도 저장이 되지 않는다. 이제 이 코드를 추가해 보겠다.

---

 

 

 

2. BackAccount 코드 바꾸기

 

 

 

 

위의 코드를 이렇게 수정했다. 이제 실행해 보자.

---

 

 

 

 

3. 코드 실행해 보기

 

 

유미라는 이름이 잘 저장된다.

 

 

 

 

50만 원을 입금하니 잔액이 50만 원이 되었다.

 

 

 

 

여기에 1만 원을 인출했더니 49만 원이 되었다.

 

 

 

---

 

 

 

 

학습을 마치고

this로 바꾸는 작업은 전에 자바 수업을 들을 때 많이 해보았던 내용이었다. 조금 잊어버리기도 했는데 이번 수업을 통해 this에 대해 확실히 짚고 넘어갈 수 있어서 좋았다.