[JS문법종합반3주차] 250107 TIL

 

실행 컨텍스트가 활성화 되는 시점에서 자바스크립트가 하는 일

1. 호이스팅

2. 외부 환경 정보 구성

3. this 값 설정

 

저번 강의에는 1.호이스팅에 대해 자세히 알아봤다.

이번에는 2.외부 환경 정보 구성와 3.this 값 설정에 대해 알아보자.

---

1. VariableEnvironment(VE)와 LexicalEnvironment(LE)

우선 VE와 LE의 차이에 대해 알아보자.

이 둘은 모두 동일하지만 스냅샷 유지 여부가 다르다.

 

VE는 스냅샷을 유지하지만, LE는 스냅샷을 유지하지 않는다. 즉, 실시간으로 변경사항을 계속해서 반영한다는 의미이다.

따라서 실행 컨텍스트가 생성될 때 VE에 정보를 먼저 담은 후에 LE는 이를 그대로 복사하고, 그 이후부터는 LE를 활용하게 된다.

 

자 이제 더 자세히 외부 환경 정보 구성에 대해 자세히 알아보자.

실행 컨텍스트는 environmentRecord(=record)와 outerEnvironmentReference(=outer)로 구성된다.

 

record에는 현재 컨텍스트와 관련된 코드의 식별자 정보(함수의 매개변수, 식별자, 함수 자체, var로 선언된 식별자)가 저장된다.

outer에는 컨텍스트가 생겨날 때의 환경정보가 담긴다.

 

** 각각의 실행 컨텍스트는 LE 안에 record와 outer를 가지고 있으며,

outer 안에는 그 실행 컨텍스트가 선언될 당시의 LE정보가 다 들어있기 때문에

scope chain에 의해 상위 컨텍스트의 record를 읽어올 수 있다.

 

아래의 예시를 정리하면서 개념을 명확히 이해해보자.

 

var a = 1;
var outer = function () {
	var inner = function () {
    	console.log(a); //undefined
        var a = 3;
    };
    inner();
    console.log(a); //1
};
outer();
console.log(a); //1

 

1. 콜스택에 전역 컨텍스트가 생성된다.

• 호이스팅이 일어나고 record에 식별자 정보가 담긴다. ( var a; var outer; )
• a에 1이 할당되고 outer에 함수가 할당된다.
• outer() 함수가 콜스택에 쌓이면서 전역 컨텍스트가 중단된다.

2. 콜스택에 outer 컨텍스트가 생성된다.

• 호이스팅이 일어나고 record에 식별자 정보가 담긴다. ( var inner; )
• outer(=outerEnvironmentReference)의 스코프 체인은 전역 컨텍스트의 LE를 참조한다.
• inner함수가 콜스택에 쌓이면서 outer 함수가 중단된다.

3. 콜스택에 inner 컨텍스트가 생성된다.

• 호이스팅이 일어나고 record에 식별자 정보가 담긴다. ( var a; )
• outer(=outerEnvironmentReference)의 스코프 체인은 outer 컨텍스트의 LE를 참조한다.
• 콘솔에 a를 출력하기 위해 inner스코프의 내부에서 식별자 a를 찾는다.
• a를 찾았지만 아직 값이 할당되기 전 초기값인 undefined가 출력된다.
• a에 3이 할당된다.
• inner함수가 종료되고 콜스택에서 제거된다.

4. 중단되었던 outer함수가 다시 실행된다.

• 콘솔에 a를 출력하기 위해 outer 스코프 내부에서 식별자 a를 찾는다.
• a의 정보가 존재하지 않아 outer 컨텍스트의 outer(=outerEnvironmentReference)의 스코프 체인에을 따라 전역 컨텍스트의 LE를 탐색한다.
• 전역 컨텍스트 LE record에 a 값 1이 존재한다.
• 콘솔에 1을 출력한다.
• outer함수가 종료되고 콜스택에서 제거된다.

5.전역 컨텍스트가 다시 활성화된다.

• 전역 컨텍스트 record에 a가 저장되어 있기 때문에 콘솔에 해당 값인 1을 출력한다. 

만약, inner 함수 내부에 var a = 3;이 없다면

inner 컨텍스트는 스코프 체인을 따라 outer 컨텍스트를 탐색한다.

하지만 outer 컨텍스트 내부에도 a의 정보가 없어 스코프 체인에 따라 전역 컨텍스트에서 a의 값을 받아온다.

---

2. this

this는 실행 컨텍스트가 생성될 때 결정된다. 이때 this가 bind된다고 한다.

함수가 정의될 때가 아니라 실행 될 때 실행 주체에 따라 this가 바뀐다.

아래의 예시로 this를 쉽게 이해할 수 있다.

 

var obj1 = {
    outer : function () {
        console.log(this); // obj1 { outer : function () {} }
        var innerFunc = function () {
            console.log(this); // node 글로벌 객체, // obj2 { innerMethod : innerFunc }
        };

        innerFunc(); 

        var obj2 = {
            innerMethod : innerFunc,
        };
        obj2.innerMethod();
    }
};

obj1.outer();

 

이를 위해하기 위해서 먼저 함수와 메서드의 차이를 알아야 한다.

함수는 독립적으로 기능을 수행한다.

함수를 호출할 때, 단지 함수명();으로 호출하는 것으로도 알 수 있다.

호출 시점의 실행 주체가 없기 때문에 함수 내부에서 this는 기본적으로 전역 객체를 가리킨다.

 

현재 코드 실행 환경은 node이므로, node의 전역 객체를 불러오게 된다.

(만약, 브라우저 콘솔창에 this를 출력한다면 window 객체를 불러올 것이다.)

 

반면 메서드는 객체의 호출에 의해 동작한다.

메서드를 호출하려면 객체.메서드명();의 형식으로 입력해야 한다.

즉 앞에 항상 함수를 호출하는 객체인 실행 주체가 있어야 하는 것이다.

따라서 매서드 내부에서 this는 해당 매서드를 호출한 객체가 되는 것이다.

 

이를 바탕으로 위의 코드를 해석해보자.

 

1.먼저 obj1의 메서드 outer()를 실행한다.

2.console에서 this를 출력한다. 

• 이 때 this는 해당 메서드를 실행시킨 주체 즉, obj1이 된다.

3. innerFunc() 함수를 실행한다.

• innerFunc(); 호출 방식만 봐도 일반 함수임을 알 수 있다. 현재 node.js의 환경이기 때문에 해당 함수 내부의 콘솔에는 node.js 글로벌 객체가 출력된다.

4. obj2.innerMethod(); 즉 obj2의 innerMethod 메서드를 호출한다.

• innerMethod가 innerFunc를 참조하므로 nnerFunc 함수가 실행된다.
• 여기서 this는 해당 메서드를 호출한 주체, 즉 obj2가 된다.
• 따라서 이번에는 콘솔에 obj2가 출력된다.

여기서 잠깐 ! 메서드 함수 내부에서 this를 우회하는 방법이 있을까?

네 있습니다. 변수 활용하기 or 화살표 함수 사용하기를 하면 됩니다.

 

우선 변수를 활용해보자.

const person = {
    name : 'Dana',
    sayHello : function () {
        const self = this;
        function innerFunc() {
            console.log(`hello ${self.name}`);
        }
        innerFunc();
    }
}

person.sayHello();

 

sayHello함수 내부 self라는 변수에 this를 할당해 주었다.

여기서 this는 이 메서드의 실행 주체인 person객체가 된다.

그리고 나서 innerFunc() 함수를 실행한다.

함수 내부에서는 self를 이용해 person객체에 접근할 수 있다.

결론적으로 우리가 원하는 콘솔을 출력할 수 있게 된다.

 

만약 self에 this를 할당하지 않는다면, innerFunc 함수 내부에서 this는 node.js의 전역 객체가 되기 때문에

우리가 원하는 출력값을 얻지 못할 것이다.

 

변수를 활용하여 this를 우회하는 것은 하드코딩이기 때문에 최근에는 화살표 함수나, call, apply, bind를 더 사용하니 참고하자.

 

다음으로 화살표 함수를 사용해보자.

const person = {
    name : 'Dana',
    sayHello : function () {
       const innerFunc = () => {
         console.log(`hello ${this.name}`);
       }   
        innerFunc();
    }
}

person.sayHello();

 

위와 같은 예제를 화살표 함수로 바꿔보았다.

sayHello() 내부 함수에 innerFunc를 화살표 함수로 만들었다.

그리고 일반 함수 호출을 했을 때

놀랍게도 화살표 함수로 만든 innerFunc의 this가 person객체를 참조한여 우리가 원하는 값을 출력하였다.

이게 가능한 이유는 화살표 함수는 this를 binding하지 않기 때문이다.

 

즉 위의 예시에서는

innerFunc내부에서 this를 찾을 수 없기 때문에 스코프체인을 따라 sayHello()를 탐색한다.

sayHello에서 this는 person객체를 가리키기 때문에, innerFunc에서 this를 알 수 있는 것이다.

 

2-1. 콜백함수에서의 this

콜백함수도 함수이기 때문에 콜백 함수 내부에서의 this는 모두 전역 객체를 가리킨다.

단, 콜백함수에 별도로 this를 지정한 경우는 예외이다.

예를들어, addEventListener 메서드는 콜백함수 호출 시, 자신의 this를 상속하도록 프로그래밍 되어 있다.

따라서 이때 this는 addEventListener를 호출 시키는 주체가 된다. ( ex : button 태그 )

const array = [1,2,3,4,5];

array.forEach(function(item) {console.log(this)}); // node.js 전역 객체가 5번 출력

 

 

2-2. 생성자 함수 내부에서의 this

const Person = function (name,age,isAdult) {
    this.name = name;
    this.age = age;
    this.isAdult = isAdult;
}

const person1 = new Person('Dana',30,true);
const person2 = new Person('Baby',5,false);

console.log('person1',person1); // Person { name: 'Dana', age: 30, isAdult: true }
console.log('person2',person2); // Person { name: 'Baby', age: 5, isAdult: false }

 

여기서 어떻게 this를 사용해서 property를 만들 수 있을까?

그 이유는 생성자 함수가 동작하는 방식에 있다.

생성자 함수가 실행되기 전에 빈객체가 생성된다. 이 객체가 생성자 함수가 새로 생성하는 객체이며, this로 바인딩 된다.

따라서 생성자 함수 내부에서 this는 바로 이 빈 객체를 가리키게 된다.

 

결과적으로 빈객체에 this를 활용해 프로퍼티를 만들 수 있는 것이다.

---

3.  명시적 this binding

자동으로 부여되는 상황별 this가 아니라 별도의 값을 this에 저장하는 방식을 의미한다.

3-1. call 매서드

호출 주체인 함수를 즉시 실행한다.

첫 번째 매개변수에 this로 binding할 객체를 넣어주면 명식적으로 binding을 할 수 있다.

const food = {
    name : '피자',
    sale : function (price) {
    	console.log(`${this.name}는 ${price}원 입니다.`) // 햄버거는 10000원 입니다.
    }
}

food.sale.call({ name : '햄버거' },10000);

 

call 매서드를 사용하지 않으면, sale 함수 내부의 this는 food객체를 참고해 '피자'를 출력한다.

위의 예시에서는 call 매서드를 이용해 첫 번째 매개변수에 this로 binding할 객체를  넣어

sale 함수 실행 시 this.name을 '햄버거'로 출력하게 된다. 

 

3-2. apply 매서드

call과 마찬가지로 호출 주체인 함수를 즉시 실행하며, 첫 번째 매개변수에 binding할 객체를 넣어준다.

다만 나머지 부분은 배열의 형태로 넘겨준다.

const food = {
	name : 'pizza',
    	sale : function (price) {
    	console.log(`${this.name}는 ${price}원 입니다.`)
    }
}

food.sale.apply({ name : 'hamburger'},[10000]);

 

3-3. bind 매서드

call과 비슷하지만, 즉시 호출하지 않고 넘겨받은 this와 인수들을 바탕으로 새로운 함수를 반환한다.

bind를 사용하는 목적은 다음과 같다.

• 함수에 this를 미리 적용한다.
• 함수를 부분적으로 미리 적용할 수 있다.

function getAverage (x,y) {
  const average = (x + y) / this.theNumberOfStudents;
  return average;
}

const getAverageByBind = getAverage.bind({theNumberOfStudents : 10})

const averageByCall = getAverage.call({ theNumberOfStudents : 10}, 20,30);
const averageByBind = getAverageByBind(20,30);

console.log(averageByCall); // 5
console.log(averageByBind); // 5


const getAverageByOneScore = getAverageByBind.bind(null,30);
const averageByOneScore = getAverageByOneScore(60);
console.log(averageByOneScore); // 9

 

위의 예시에서는 getAverage 함수 내부에 this로 값을 가져와 연산을 수행하도록 하였다.

 

우선 getAverageByBind는 bind를 통해 this를 미리 적용했다.

따라서 getAverageByBind(20,30); 함수를 보면 알겠지만,

call 매서드를 사용했을 때와는 달리 매개변수로 this객체를 전달하지 않는다.

 

call매서드를 사용한 것은 변수 averageByCall에 할당된 값을 보면 되는데, 매개변수로 this 객체를 전달하고 있다.

 

다음으로 변수 averageByOneScore의 값을보면 매개변수로 60만 전달하고 있다.

이는 getAaverageByBind함수에 bind 매서드를 사용하여 미리 매개변수 30을 전달했기 때문이다.

콘솔 출력 값 역시 우리가 기대한 대로 반환되는 것을 볼 수 있다.

 

---

오늘의 회고

그동안 코드를 치기만 했지 자바스크립트의 정확한 동작 원리는 잘 알지 못했다.

이번 3주차 강의를 공부하면서 많은 것을 배워가는 거 같아 뿌듯하다.

실행 컨텍스트는 이제 어느정도 감을 잡았는데

call, apply, bind 모두 아직 낯설어서 감이 잘 안 잡힌다.

 

반복하다 보면 눈에도 익고 손에도 익겠지^_ ㅠ

파이팅이다 파이팅..