this(전역 공간)

this는 함수와 객체의 구분의 느슨한 자바스크립트에서 실질적으로 이  둘을 구분하는 유일한 기능이다. 어떤 객체 내부에서 사용될 때 그 객체를 가리키는 역할을 한다. 만약 어떤 객체의 함수에서 this를 사용한다면, 그 this는 그 함수가 속한 객체를 가리킨다. 

 

자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. this는 함수를 호출할 때 결정된다. 

 

1.1.1 전역 공간에서의 this

전역 공간에서 this는 전역 객체를 가리킨다. 자바스크립트 런타임 환경에 따른 다른 이름과 정보를 가지고 있다. 

브라우저 환경에서 전역객체는 window이고 Node.js환경에서는 global이다. 

 

* 전역 공간에서의 this(브라우저 환경)

// { alert: f(), atob: f(), blur: f(), btoa: f(), ...}
console.log(this);
// { alert: f(), atob: f(), blur: f(), btoa: f(), ...}
console.log(window);
// true
consoel.log(this === window);

 

* 전역 공간에서의 this(Node.js 환경)

// { process: {title : "node", version: "v10.13.0",...}
console.log(this);
// { process: {title : "node", version: "v10.13.0",...}
console.log(global);
// true
console.log(this === global);

전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다. 

 

* 전역변수와 전역객체

var a = 1;
// 1
console.log(a);
// 1
console.log(window.a);
// 1
console.log(this.a);

전역공간에서 선언한 변수 a에 1을 할당했을 뿐인데 window.a, this.a 모두 1이 출력된다. 자바스크립트의 모든 변수는 실은 특정 객체의 프로퍼티로서 동작하기 때문이다. 

(+ 부가설명: 자바스크립트에서 모든 것이 사실상 객체이다. 객체 지향 언어이므로, 거의 모든 것들이 객체이다. 객체는 속성(프로퍼티) 와 기능(메서드)를 가진다. 자바스크립트에서 변수는 특정한 값을 가지고 있는 이름표와 같다. 이 변수는 실제로 어떤 객체의 프로퍼티로서 동작할 수 있다. 

* 예시

let car = {
   color: "red"
}

여기서 car.color라고 하면 우리는 red라는 값을 얻을 수 있다. color는 car라는 객체의 프로퍼티로서 동작한다. 

 

심지어 원시 자료형(숫자, 문자열, 불리언 등)도 객체처럼 동작할 수 있다. 

let str = "hello";
// 5
console.log(str.length);
// HELLO
console.log(str.toUpperCase());

여기서 문자열은 length라는 속성을 가지고 있고 toUpperCase()라는 메서드를 가지고 있다. 따라서 모든 변수는 실정 특정 객체의 프로퍼티로서 동작한다고 말할 수 있다. 

 

 

* 특정객체란 실행 컨텍스트의 LexicalEnvironment(L.E)이다. 실행 컨텍스트는 변수를 수집해서 L.E 프로퍼티로 저장한다. 이후 어떤 변수를 호출하면 L.E 조회해서 일치하는 프로퍼티가 있을 경우 그 값을 반환한다. 전역 컨텍스트의 경우 L.E는 전역객체를 그대로 참조한다. 

 

전역변수를 선언하면 자동으로 전역객체의 프로퍼티에 할당하는 것이 아니라 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다. 

 

전역변수 선언과 전역객체의 프로퍼티 할당 사이에 전혀 다른 경우

var a = 1; 
delete window.a;
// 1 1 1
console.log(a, window.a, this.a);

window.c = 3;
delete window.c;
// Uncaught ReferenceError: c is not defined
console.log(c, window.c, this.c)

전역변수로 선언한 경우에는 삭제가 되지 않고 전역객체의 프로퍼티로 할당하는 경우에는 삭제된다. 이는 사용자가 의도치 않게 삭제하는 것을 방지하는 차원에서 마련한 나름의 방어 전략이라고 해석할 수 있다. 즉 전역변수를 선언하면 자바스크립트 엔진이 이를 자동으로 전역객체의 프로퍼티로 할당하면서 해당 프로퍼티의 configurable 속성(변경 및 삭제 가능성)을 false로 정의한다.