📝 오늘 한 것

1. 실행 컨텍스트

2. this

📖 학습 자료

1. 책 『코어 자바스크립트』

📚 배운 것

2. 실행 컨텍스트

1) 실행 컨텍스트란?

실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 말한다.
동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.

'동일한 환경', 즉 하나의 실행 컨텍스트를 구성하는 방법으로 자동으로 생성되는 전역 공간과 eval() 함수, 함수 그리고 블록(ES6에서 추가)이 있다.

실행 컨텍스트는 variableEnvironment, LexicalEnvironment, ThisBinding이라는 세 가지 정보를 수집한다.

2) variableEnvironment

실행 컨텍스트를 생성할 때 varaibleEnvironment에는 현재 컨텍스트 내의 식별자들에 대한 정보(environmentRecord)와 외부 환경 정보(outerEnvironmentReference)가 담긴다.
변경 사항은 반영되지 않는다.

3) LexicalEnvironment

실행 컨텍스트를 생성할 때 variableEnvironment에 정보를 먼저 담은 다음, 이를 그대로 복사해 LexicalEnvironment를 만들고, 이후에는 LexicalEnvironment를 주로 이용하게 된다.
변경 사항이 실시간으로 반영된다.

(1) environmentRecord

environmentRecord에는 현재 컨텍스트와 관련된 코드의 식별자 정보들(매개변수명, 변수의 식별자, 선언한 함수의 함수명 등)을 수집한다.
이는 코드가 실행되기 전에 일어나는 과정으로 자바스크립트 엔진은 실제로 코드가 실행되기 전에 이미 해당 환경에 속한 코드의 변수명을 모두 알고 있게 된다.

여기서 호이스팅이란 개념이 등장한다.
자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행하는 것이다.

매개변수와 변수에 대한 호이스팅

environmentRecord는 현재 실행될 컨텍스트의 대상 코드 내에 어떤 식별자들이 있는지에만 관심이 있고, 각 식별자에 어떤 값이 할당될 것인지는 관심이 없다.
따라서, 변수를 호이스팅할 때 변수명만 끌어올리고, 할당 과정은 원래 자리에 그대로 남겨둔다.

함수 선언의 호이스팅

변수는 선언부와 할당부를 나누어 선언부만 끌어올리는 반면, 함수 '선언'은 함수 전체를 끌어올린다.

함수 선언문과 함수 표현식

console.log(sum(1, 2));
console.log(multiply(3, 4));

// 함수 선언문
function sum (a, b) {
  return a + b;
}

// 함수 표현식
var multiply = function (a, b) {
  return a * b;
}

함수 표현식이란 함수를 다른 변수에 값으로써 할당한 것을 말한다.

함수 선언문과 함수 표현식은 호이스팅에 있어 극명한 차이점을 가진다.
호이스팅을 마친 상태를 임의로 코드로써 표현하면 다음과 같다.

var sum = function sum (a, b) { // (함수 선언문) 함수 선언문 전체를 호이스팅
  return a + b;
}

var multiply; // (함수 표현식) 변수 선언부(함수를 할당한 변수명)만을 호이스팅

console.log(sum(1, 2));
console.log(multiply(3, 4));

multiply =function (a, b) { // (함수 표현식) 변수 할당부는 원래 자리에 남겨둠
  return a * b;
}

따라서, multiply(3, 4)를 출력하고자 할 때 변수 multiply에는 아직 함수가 할당되기 전이므로 'multiply is not a function'이라는 에러가 뜬다.

cf. 상대적으로 함수 선언문보다 함수 표현식을 사용하는 것이 안전하다. 함수 선언문은 통째로 호이스팅 되기 때문에 문제가 생길 확률이 높은 반면, 함수 표현식을 사용하면 변수명만 호이스팅 되기 때문에 변수에 함수가 할당되기 전에 함수를 실행하면 에러를 띄워줌으로써 더 큰 혼란을 방지할 수 있다.

(2) 스코프, 스코프 체인, outerEnvironmentReference

스코프란 식별자에 대한 유효범위를 말한다.
ES5까지의 자바스크립트는 전역 공간을 제외하면 오직 함수에 의해서만 스코프가 생성된다.
(ES6에서는 블록에 의해서도 스코프 경계가 발생한다.)

스코프 체인이란 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것을 말한다.
이를 가능케 하는 것이 LexicalEnvironment의 두 번째 수집 자료인 outerEnvironmentReference이다.
(첫 번째 수집 자료: environmentRecord / 두 번째 수집 자료: outerEnvironmentReference)

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

outerEnvironmentReference는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment(즉, 바로 직전 컨텍스트의 LexicalEnvironment)를 참조한다.

• 전역 컨텍스트 자동으로 생성
  전역 컨텍스트의 L.E
  e: { a, outer } (전역 컨텍스트는 선언 시점이 따로 없기 때문에 outerEnvironmentReference는 없고 environmentRecord만 있다.)

• outer() 함수 실행 시 outer 실행 컨텍스트 활성화
  outer 실행 컨텍스트의 L.E
  e: { inner }
  o: GLOBAL L.E ( = outer() 함수가 선언된 당시의 L.E )

• inner() 함수 실행 시 inner 실행 컨텍스트 활성화
  inner 실행 컨텍스트의 L.E
  e: { a }
  o: outer L.E ( = inner() 함수가 선언된 당시의 L.E )

따라서, 이처럼 여러 스코프에서 동일한 식별자를 선언한 경우에는 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근이 가능하다.
스코프 체인 상의 어떤 스코프의 LexicalEnvironment에 찾는 식별자가 존재한다면 더 이상 스코프 체인 검색을 진행하지 않고 찾은 식별자의 값을 반환하게 된다.
즉, 상위 스코프의 LexicalEnvironment에 같은 식별자가 존재하더라도 접근할 수 없다.
이를 변수 은닉화라고 한다.

이때 전역 컨텍스트의 LexicalEnvironment에 담긴 변수를 전역변수라고 하고, 그 밖의 함수에 의해 생성된 실행 컨텍스트의 변수들을 지역변수라고 한다.

4) this

마지막으로, 실행 컨텍스트의 thisBinding에는 this로 지정된 객체가 저장된다.
this는 실행 컨텍스트 활성화 당시에 지정되고, 함수를 호출하는 방법에 따라 그 값이 달라진다.
만약 실행 컨텍스트 활성화 당시에 this가 지정되지 않았다면, this에는 전역 객체가 저장된다.

3. this

1) 상황에 따라 달라지는 this ⑤

대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다.
그러나, 자바스크립트에서의 this는 어디서든 사용할 수 있어 혼란을 야기한다.

자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때(즉, 함수가 호출될 때) 결정된다.
함수를 어떤 방식으로 호출하느냐에 따라 그 값이 달라진다.

(1) 전역 공간에서의 this

전역 공간에서의 this는 전역 객체(브라우저에서는 window, Node.js에서는 global)을 가리킨다.

cf. 전역 변수와 전역 객체의 프로퍼티

전역 변수를 선언하면, 자바스크립트 엔진은 이를 전역 객체의 프로퍼티로 할당한다.
사실 자바스크립트의 모든 변수는 특정 객체의 프로퍼티로서 동작한다.
이때 특정 객체란 실행 컨텍스트의 LexicalEnvironment를 말한다.

따라서, 대부분의 경우 전역 컨텍스트에서는 var로 변수를 선언하는 것과 window의 프로퍼티에 직접 할당하는 것은 똑같이 동작한다.
그러나, 객체의 프로퍼티를 제거하는 'delete 연산자'는 전자의 경우에는 제대로 작동하지 않는다.
전역 변수를 선언하면 자바스크립트 엔진이 이를 자동으로 전역 객체의 프로퍼티로 할당하지만, 추가로 해당 프로퍼티의 configurable 속성(변경 및 삭제 가능성)을 false로 정의하기 때문이다.

console.log(window.c, this.c, c); // c is not defined

window.c = 3;

console.log(window.c, this.c, c); // 3 3 3

var c = 3;

delete c; // 혹은 delete window.c;

console.log(c, window.c, this.c); // 3 3 3 (delete 연산자가 작동 x)

정리하자면, var로 선언한 전역 변수와 전역 객체의 프로퍼티는 호이스팅 여부 및 configurable 여부에서 차이를 보인다고 할 수 있다.

(2) 메서드로서 호출할 때 그 메서드 내부에서의 this

메서드 내부에서의 this는 메서드 호출 주체(메서드명 앞의 객체)를 가리킨다.

(3) 함수로서 호출할 때 그 함수 내부에서의 this

함수 내부에서의 this

결론부터 말하자면, 함수 내부에서의 this는 전역 객체를 가리킨다.

위에서 this는 메서드나 함수를 호출한 주체를 가리킨다고 했다.
그런데 메서드와 달리 함수로서 호출하는 것은 호출 주체를 명시하지 않고 개발자가 코드에 직접 관여해서 실행한 것이기 때문에 호출 주체의 정보를 알 수 없다.
앞서 실행 컨텍스트를 활성화할 때(즉, 함수를 실행할 때) this가 지정되지 않은 경우 this는 전역 객체를 가리킨다고 했으므로, 함수 내부에서의 this는 전역 객체를 가리키게 되는 것이다.

메서드의 내부 함수에서의 this

헷갈리기 쉽지만 하나만 알면 된다.
메서드의 내부 함수를 함수로서 호출했는지, 메서드로서 호출했는지만 파악하면 this 값을 정확히 맞출 수 있다.
즉, this 바인딩에 있어 함수를 실행하는 당시의 주변 환경은 중요하지 않고, 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지가 관건이라고 할 수 있다.

cf. 함수가 실행될 때 실행 컨텍스트가 생성되면서 호이스팅, 스코프 체인 수집, this 바인딩 등을 수행한다.

그런데 이렇게 하면 this에 대한 구분은 명확히 할 수 있지만, this라는 단어가 주는 인상과는 달라져 버렸다.
호출 주체가 없을 때 자동으로 전역 객체를 바인딩하기보단, 호출 당시 주변 환경의 this를 그대로 상속받아 사용할 수 있다면 더 좋을 것이다.

💡 메서드의 내부 함수에서의 this를 우회하는 방법

ES5까지는 자체적으로 내부 함수에 this를 상속할 방법은 없다.
다만, 변수에 상위 스코프의 this를 저장해서 이를 내부 함수에서 활용하는 식으로 this를 우회할 수 있다.

var obj = {
  outer: function () {
    console.log(this); // obj
    var innerFunc1 = function () {
      console.log(this); // window
    };
    innerFunc1();
    
    var self = this; // outer 함수가 호출될 당시의 호출 주체 = obj ( ∵ obj.outer(); )
    var innerFunc2 = function () {
      console.log(self); // obj
    };
    innerFunc2();
  }
};
obj.outer();

이밖에도 call / apply / bind 메서드 등을 사용하는 방법이 있다. 이들은 뒤에서 살펴볼 것이다.

💡 화살표 함수: this를 바인딩하지 않는 함수

한편, ES6에서는 함수 내부에서 this가 전역 객체를 가리키는 문제를 보완하고자 화살표 함수를 이용할 수 있다.
화살표 함수는 실행 컨텍스트를 생성할 때 아예 this를 바인딩하지 않기 때문에 화살표 함수 내부에는 this가 아예 없어 이에 접근하려면 스코프체인상 가장 가까운 this에 접근하게 된다.

(4) 콜백 함수 호출 시 그 함수 내부에서의 this

setTimeout(function () { console.log(this) }, 300); // window

[1, 2, 3, 4, 5].forEach(function (x) {
  console.log(this, x); // window
});

// addEventListener는 자체적으로 콜백 함수를 호출할 때 자신의 this를 상속하도록 정의되어 있다
document.querySelector("button").addEventListener("click", function () {
  console.log(this); // <button>버튼</button>
  
});

콜백 함수에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수(setTimeout, forEach, addEventListener 등)가 정의한 바에 따르며, 정의하지 않은 경우에는 콜백 함수 또한 함수로서 호출하는 것이기 때문에 전역 객체를 가리키게 된다.

(5) 생성자 함수 내부에서의 this

생성자 함수 내부에서의 this는 생성자에 의해 곧 새로 만들어질 객체, 즉 인스턴스가 된다.

cf. 생성자 함수는 어떤 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수이다.
객체지향 언어에서는 생성자를 클래스, 클래스를 통해 만든 객체를 인스턴스라고 한다.

2) 명시적으로 this를 바인딩하는 방법

(1) call 메서드

call 메서드는 해당 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령이다.
call 메서드의 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로 한다.

(2) apply 메서드

apply 메서드 또한 call 메서드와 기능적으로 완전히 동일하다.
다만, apply 메서드는 call 메서드와 달리 두 번째 인자를 '배열'로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다는 점에서 차이가 있다.

(3) call / apply 메서드의 활용

유사배열객체에 배열 메서드를 적용

유사배열객체란 ① 배열의 구조와 유사한 객체, 즉 키가 0 또는 양의 정수인 프로퍼티가 존재하고 length 프로퍼티의 값이 0 또는 양의 정수인 객체를 말한다.
② 함수 내부에서 접근할 수 있는 arguments 객체나 ③ querySelectorAll, getElementsByClassName 등의 Node 선택자로 선택한 결과인 NodeList도 유사배열객체에 해당된다.

var str = "abc def";

var newArr = Array.prototype.map.call(str, function(char) { return char + "!"; });

console.log(newArr); // [ "a!", "b!", "c!", "!", "d!", "e!", "f!" ]

또한, ④ 배열처럼 인덱스와 length 프로퍼티를 가지는 문자열에 대해서도 배열 메서드를 적용할 수 있다.
다만, 이 경우에는 원본 문자열에 변경을 가하는 메서드는 적용할 수 없다.

그런데 사실 call/apply를 이용해 형변환을 하는 것은 'this를 원하는 값으로 지정해서 호출한다'라는 본래 메서드의 의도와는 다소 동떨어진 활용법이라고 할 수 있다.
이에 ES6에서는 유사배열객체 또는 순회 가능한 모든 종류의 데이터 타입을 배열로 전환하는 Array.from() 메서드를 도입했다.

생성자 내부에서 다른 생성자를 호출

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}

function Student(name, gender, school) {
  Person.call(this, name, gender); // this는 'syong'를 가리킨다
  this.school = school;
}

var syong = new Student("숑", "female", "대학교");

생성자 함수 내부에서 다른 생성자 함수를 호출하여 인스턴스의 속성을 정의함으로써 반복을 줄일 수 있다.

여러 인수를 묶어 하나의 배열로 전달하고 싶을 때 - apply 활용

var numbers = [10, 20, 3, 16, 45];
var max = Math.max.apply(null, numbers);
console.log(max); // 45

여러 개의 인수를 받는 메서드에, 하나의 배열로 인수들을 전달하고 싶을 때, apply 메서드를 활용할 수 있다.

(4) bind 메서드

bind 메서드는 call 메서드와 비슷하지만 해당 메서드의 호출 주체인 함수를 즉시 호출하지는 않고 넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환한다.
이는 this를 지정할 뿐 아니라 부분 적용 함수를 구현하기 위해서도 사용된다.

name 프로퍼티

call/apply 메서드는 명시적으로 별도의 this를 바인딩하는 방법이지만 오히려 이로 인해 this를 예측하기 어렵게 만들기도 한다.
반면, bind 메서드에 의해 반환된 함수의 name 프로퍼티에는 'bound'라는 접두어가 붙어 call이나 apply 메서드를 사용하는 것보다 코드를 추적하기가 쉽다는 장점이 있다.

💡 상위 컨텍스트의 this를 내부 함수나 콜백 함수에 전달하기

• 메서드의 내부 함수

var obj = {
  outer: function () {
    console.log(this); // obj
    var innerFunc = function () {
      console.log(this); // 원래는 window지만 call 메서드에 의해 obj가 됨
    };
    innerFunc.call(this);
  }
};
obj.outer();

var obj = {
  outer: function () {
    console.log(this); // obj
    var innerFunc = function () {
      console.log(this); // 원래는 window지만 bind 메서드에 의해 obj가 됨
    }.bind(this);
    innerFunc();
  },
};
obj.outer();

• 콜백 함수 🔥

var obj = {
  logThis: function () {
    console.log(this);
  },
  logThisLater1: function () {
    // console.log(this); // 여기서 this는 obj ( ∵ obj.logThisLater1(); )
    setTimeout(this.logThis, 500); // 따라서, 여기서 this도 obj
  },
  logThisLater2: function () {
    setTimeout(this.logThis.bind(this), 1000); // 여기서 this도 obj
    // ❗ 콜백 함수로 객체의 메서드를 전달했더라도 콜백 함수 또한 함수이기 때문에
    // this를 따로 바인딩해주지 않으면 '콜백 함수 내부에서의 this'는 원래 전역 객체를 가리킨다.
    // bind 메서드를 이용해 obj를 콜백 함수 내부에서의 this로 바인딩해줬다.
    // 주의! this.logThis에서의 this는 obj이다. 그러나 이는 콜백 함수 내부에서의 this에는 영향을 미치지 않는다.
    // bind(this)를 통해 콜백 함수 내부에서의 this가 obj가 되는 것이다.
  }
};
obj.logThisLater1(); // window
obj.logThisLater2(); // 원래는 window지만 bind 메서드에 의해 obj가 됨

(5) 별도의 인자로 this를 받는 경우 (콜백 함수 내에서의 this)

요소를 순회하면서 콜백 함수를 반복 호출하는 내용의 일부 메서드는, 별도의 인자로 this를 받기도 한다.
콜백 함수와 함께 this로 지정할 객체(thisArg)를 인자로 함께 받는 것이다.

var report = {
  sum: 0,
  count: 0,
  add: function () {
    // console.log(this); // 1. 여기서 this는 report ( ∵ report.add(60, 85, 95); )
    var args = Array.prototype.slice.call(arguments);
    args.forEach(function (entry) {
      this.sum += entry; // 3. 원래 콜백 함수도 함수이므로 콜백 함수 내부의 this는 window지만, '2'에 의해 report가 됨
      ++this.count;
    }, this); // 2. 따라서, 여기서 this도 report
  },
  average: function () {
    return this.sum / this.count; // 여기 this는 '1'과 같은 맥락에서 report
  }
};

report.add(60, 85, 95);
console.log(report.sum, report.count, report.average()); // 240 3 80

✨ 내일 할 것

1. 콜백 함수