실행 컨텍스트 2 - 자바스크립트 함수가 실행되는 과정

첫 번째 수업을 진행해 보겠다. 수업 영상이 정말 길지만 이 공부까지 마치고 다음 일정을 시작해보려고 한다.

---

 

 

 

 

이론 1 - 자바스크립트 함수가 실행되는 과정

브라우저와 node.js와 같은 환경에서 실행된다.

 

 

어떤 자바스크립트 코드 없이 실행해야 하는 경우에 대해서 알아보겠다.

 

 

 

 

 

어떤 코드도 없어도 세 가지 변수를 초기화한다. 이 세 가지 변수를 엔진이 만들게 된다.

 

 

 

 

 

 

this는 코드가 실행되는 시점의 환경 객체를 의미한다. 예를 들어 console.log(this)를 찍을 때 this는  window 객체를 가리킨다. window는 글로벌 스코프가 되고, 변수는 아무것도 실행되지 않았으므로 빈 객체가 된다. Scope chain의 경우 연결된 스코프가 없기 때문에 빈 객체가 된다. consol 객체는 전역 객체가 많아 global context에 속하게 된다.

---

 

 

 

 

 

 

자바스크립트에서는 this 포인터는 레퍼런스 변수를 의미한다. 자바스크립트 실행 환경을 실행 컨텍스트라고 하는데 영어로는 Execute Context라고 한다. 영어 명칭도 꼭 알아야 한다.

---

 

 

 

 

myFunc()는 변수 a, b를 포함하고 있고 특정 정수값을 가진다. add 함수의 경우 first, second라는 변수를 받아서 리턴하고 있다. 그런 다음 myFunc() 자체가 리턴한다. 마지막에 myFunc()를 호출한다.

 

 

 

 

 

 

myFunc()를 생성하기 전에 이 3가지 단계가 생성된다.

 

 

 

 

 

 

this를 포함한 Scope chain이 생성된다. 변수들에는 myFunc()가 포함된다. myFunc()가 실행되었을 때 새롭게 실행된 컨텍스트가 있고, 기존의 글로벌 컨텍스트는 그대로 존재한다. myFunc() 함수가 끝나면 맨 위의 실행 컨텍스트는 제거되고, 모든 코드가 끝나면 아래쪽의 글로벌 콘텍스트도 제거된다.

실행 컨텍스트가 쌓이는 구조는 스택 구조로 되어 있다. call stack은 실행 컨텍스트가 쌓이면서 구성된다.

 

자바스크립트의 strict mode로 실행되었을 때 this가 undefined가 된다는 뜻이다. strict mode 즉 엄격한 모드로 실행했을 때는 this가 뭘가를 지칭하지 않았다면 undefined가 된다.

Scope chain에는 global이라는 값이 저장된다. myFunc() 함수가 모두 끝나면 글로벌 스코프로 돌아간다.

 

 

 

 

 

 

마지막에 add fucntion을 호출하게 되어 여기는 호출 함수가 기록되어 있다. first와 second 인자를 넘겼기 때문에 a, b가 같은 값이 된다. first와 second를 넘겨 리턴을 하게 되고, 그 즉시 add Function은 끝난다. 스코프 체인은 myFunc, global이 된다. 아래쪽의 공간은 myFunc, global의 실행 컨텍스트이다.

 

 

 

 

---

 

 

 

 

 

 

이번에는 객체가 있고 객체의 메서드를 호출하는 경우이다. o라는 이름의 객체가 있는데, name과 method가 있다. name은 필드이고 method는 함수가 된다. method의 경우 number를 받아서 repeat이라는 함수의 인자로 넘긴다. repeat는 문자열 객체의 함수로 문자열을 반복해서 새로운 문자열을 리턴한다.

myFunc()를 호출하고 이 함수 안에서 method 함수를 리턴하게 되어 있다. 여기서 넘겨주는 값은 10이 되고, mumber는 10을 넘겨서 myFunc()가 10번을 반복하여 리턴하는 코드이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

메서드의 경우 this가 o 객체를 가리킨다. Scope chain에는 myFunc와 global이 들어간다.

 

 

 

 

 

---

 

 

 

 

 

퀴즈 1 - 자바스크립트 함수가 실행되는 과정

 

 

 

 

문제가 좀 어렵다. 무슨 말인지 거의 알아듣지 못하겠다.

 

함수의 실행이 끝나면 일반적으로 스코프가 사라지지만, 클로저(closure)라는 개념이 있다. 클로저는 함수가 자신이 정의된 스코프에 대한 접근을 유지하는 기능을 말한다.

즉, 함수 안에 정의된 또 다른 함수가 외부 변수에 접근할 수 있는 상황이 발생하는데, 이 경우 외부 변수가 사라지지 않고 메모리에서 유지됩니다. 그래서 그 내부 함수가 호출될 때 그 외부 변수를 기억하고 사용할 수 있다.

---

 

 

 

 

 

이번에는 문제를 잘 맞혔다. 모르는 물어보면 되고 배우면서 공부하는 것이다. 문제를 모른다고 해서 결코 좌절해서는 안 된다. 모든 것을 다 알면 공부할 필요도 없을 것이다.

모르는 게 많다는 건 아직 배울 것들이 많다는 뜻이기 오히려 감사한 일이다.

---

 

 

 

 

 

 

실습 1 - NameRepeater 구현하기

 

---

 

 

문제 코드

 

App.js

 

 

 

 

NameRepeater.js

 

문제로 풀 파일은 바로 이것이다. 이제 문제를 풀기 전 이 코드가 어떻게 작동되는지 확인하기 위해 실행해보겠다.

---

 

 

 

 

코드 실행해 보기

 

 

여기서 이름 반복을 누르면 이름이 반복되어야 하는데 아직 이러한 기능은 설정되지 않았다.

---

 

 

 

문제 풀기

name은 this로 접근할 수 있다. this가 쓰이는 경우 객체의 실행 컨텍스트를 따른다. 불필요한 return은 제거한다. 그리고 이름을 num만큼 반복하도록 코드를 작성해 본다.

 

 

 

 

이름 반복을 누르자 이렇게 이름이 반복되고 있다.

 

 

 

 

문제를 잘 맞혔다.

---

 

 

 

 

학습을 마치고

첫 수업이라 무척 긴장되고 정말 잘할 수 있을지 걱정이 많이 되었다. 하지만 심화 과정도 공부해 보니 충분히 이해하고 따라갈 수 있었다.

문제를 푸니 훨씬 더 재미있게 느껴졌다. 모든 과목을 공부할 때 난 언제나 이런 두려움과 기대가 공존한다. 이 수업도 분명 잘할 수 있을 것 같다. 이제 나머지 공부는 외출을 마치고 시작해 보겠다.