[NodeJS] Node 의 this 란? (+ 화살표 함수의 this)

✨ console.log(this) 의 결과

 

이전에 정리해두었던 자바스크립트(이하 JS)의 this 에서 주의사항으로 언급했듯, 브라우저에서 실행되는 JS 의 this 와 node 에서 실행되는 JS 의 this 는 다르다.

 

[Javascript] Javascript 의 this 란?

 

브라우저의 전역객체는 window 이다. 따라서 전역 scope 에서 console.log(this) 를 입력할 경우 window 가 뜨는 것이 맞다.

 

console.log(this) // window

하지만 동일한 코드를 node 환경에서 실행하면 어떤 결과가 나올까? 결과는 다음과 같다.

 

console.log(this) // {}

같은 코드를 쳤는데, 왜 노드에서는 빈 객체가 나올까? 그 이유를 자세히 한 번 알아보도록 하겠다.

✨ JS 런타임의 종류와 차이

앞서 언급했듯, node 에서의 this 는 빈 객체이다. 빈 객체가 나오는 이유는 단순히 말하면 JS의 "런타임 환경이 달라서" 이다.
조금 혼란스러울 수 있으니, JS 런타임의 개념과 종류를 간략히 짚고 넘어가겠다.

런타임 환경이란 프로그램이 실행되는 곳이다. 중요한 점은, 런타임 환경이 바로 프로그램이 접근할 수 있는 전역 객체와 작동 방식을 결정한다는 사실이다. 대표적인 JS 런타임은 브라우저와 Node 두 개가 있다.

📌 브라우저 (Chrome, Firefox 등)
- JS 가 실행되는 가장 보편적인 런타임 환경이다.
- 브라우저에는 window 라는 전역객체가 내장되어 있어, JS script 를 통해 window 와 관련된 메서드를 실행할 수 있다. (예시: window.alert())

📌 Node
- 브라우저 없이도 JS 코드를 실행할 수 있도록 하기 위해 만들어진 런타임 환경이다.
- 브라우저와는 전혀 다른 런타임 환경이기 때문에, 브라우저 관련 객체 (window 등) 에는 접근할 수 없다.
- 대신, 서버를 구축할 때 필요한 다른 변수들 (환경변수 등) 에 접근할 수 있도록 설정되어 있다.

✨ Node 의 전역 객체

다시 처음으로 돌아가, node 에서 this 를 출력하면 빈 객체가 나온다는 사실을 기억하자.

 

console.log(this) // {}

Node 에는 window 와 document 대신 다른 전역 객체가 존재한다. 바로 global 이라는 객체이다.
global 객체는 다음과 같이 구성되어 있다.

 

<ref *1> Object [global] { 
    global: [Circular *1], 
    clearInterval: [Function: clearInterval], 
    clearTimeout: [Function: clearTimeout], 
    setInterval: [Function: setInterval], 
    setTimeout: [Function: setTimeout] { 
        [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)] 
    }, 
    queueMicrotask: [Function: queueMicrotask], 
    clearImmediate: [Function: clearImmediate], 
    setImmediate: [Function: setImmediate] { 
        [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
    }
}

 

📌 전역 객체가 global 인데 왜 console.log(this) 를 실행하면 빈 객체가 나올까?

그 이유는 다음과 같다.

- Node에서 실행되는 js 파일은 하나의 모듈(module) 이다.
- 실제로 node 명령어를 통해 js 파일 하나를 실행하면, 파일의 전체 script 가 하나의 함수 안에 들어가게 된다.
- Node 엔진은 해당 함수를 실행함으로써 사용자가 작성한 코드의 결과를 출력하는 것이다.
- 결과적으로, js 파일에서 작성하는 코드 전체는 하나의 함수 내부에 들어가게 되는 것이므로, 지역 scope 를 가지게 된다.

위 사진의 코드 중 개발자가 작성한 코드가 시작하는 시점은 첫 번째 줄의 console.log 부터이다.
위처럼 js 코드를 node 실행환경에서 실행할 때 debugger 를 연결해서 확인해보면, 코드가 하나의 함수 안에 들어가 있다는 것을 볼 수 있을 것이다.

📌 js 파일은 하나의 함수 안에서 실행되므로, 해당 함수 내부에 존재하는 기본 객체가 this 의 참조값이 된다.
따라서, nodejs 파일 안에서의 this 를 출력한 결과는 다음과 같다.

 

console.log(this, module.exports, exports); // {}, {}, {} 
console.log(this === module.exports); // true 
console.log(this === exports); // true 
console.log(module.exports === exports); // true 
console.log(this === global); // false

module.exports 와 exports 는 하나의 js 파일을 모듈로 사용할 수 있도록 해주는 빈 객체이다. 이 빈 객체가 곧 nodejs 에서 실행되는 파일의 this 가 된다.


📌 그렇다면 global 이 전역 객체라는 것을 확인할 수 있는 방법은 없나?
당연히 확인할 수 있다!!

JS 의 this 의 특징 중, 어떤 함수든 일반 함수로 실행된다면 해당 함수 내부에서 참조하는 this 는 전역객체라는 점이 있었다. 이 특징을 활용해 js 파일 내부에 새로운 함수를 생성해 this 를 출력하도록 해보자.

 

function a() { 
    console.log(this) // global 
    console.log(this === global) // true 
} 

a()

a 함수는 일반 함수로 실행되었기 때문에 내부에서 출력한 this 는 전역객체이며, global 이라는 결과물이 출력된다. 또한, 해당 함수 내부의 this 와 global 을 비교해보면 '동일하다' (true) 라는 결과가 나온다.

---

✨ 화살표 함수의 this

이전 글에서 this 의 특징 대부분을 짚고 넘어갔지만, 화살표 함수일 때 나타나는 this 의 특수한 특징을 누락하여 이번 글에 이어서 설명해본다.

화살표 함수는 다른 함수와 다르게, 자신의 this가 없다. 이 말의 의미는, 화살표 함수 내부에서의 this 는 일반적인 함수처럼 해당 함수를 호출하거나 소유한 객체를 참조하지 않는다는 것이다. 대신, 화살표 함수의 this 는 화살표 함수를 둘러싸는 상위 스코프의 this 를 사용한다. (때문에 lexical this 로 불리기도 한다)

예시를 들어보겠다.

 

const temp = { 
    age: 10, 
    tempFunc() { 
    	console.log(this.age) // 10 
    } 
} 

temp.tempFunc(); 

const temp1 = { 
    age: 10, 
    tempFunc: () => { 
    	console.log(this.age) // undefined 
    } 
} 

temp1.tempFunc();

temp 객체의 tempFunc 의 경우 일반 함수를 사용하고 있으므로, 메서드로 호출될 시 호출된 객체를 this 의 값으로 참조하여 temp 내에서 age 를 찾고, 그 결과를 반환한다.

그러나 temp1 객체의 tempFunc 는 조금 다르다. 해당 함수는 화살표 함수이기 때문에, 상위 스코프의 this 를 사용한다. tempFunc 의 상위 스코프인 전역 객체에서는 age 라는 값이 선언되지 않았기 때문에, undefined 가 출력되었다.


📌 불편해도, 필요한 이유

화살표 함수에서의 this 는 작동 원리를 이해하기도, 사용하기도 어려운 것이 사실이다. 그러나 이러한 특징이 필요한 경우가 간혹 발생한다.
먼저 다음 코드를 살펴보자.

 

let group = { 
    title: "1모둠", 
    students: ["보라", "호진", "지민"], 
    showList() { 
        this.students.forEach(function(student) { 
            // TypeError: Cannot read property 'title' of undefined 
            console.log(this.title + ': ' + student) 
        }); 
    } 
};

showList() 함수의 this 는 group 객체이기 때문에, this.students 를 참조하여 forEach 문을 돌리는 것이 가능하다. 그러나 그 내부에서 작동하는 함수는 일반 함수이기 때문에, this 가 참조하는 값이 전역 객체인 window (또는 global) 이 되어, 따로 선언이 되어 있지 않은 이상 에러를 반환하게 된다.

앞서 화살표 함수는 상위 스코프의 this 를 사용한다고 언급했었는데, 그렇다면 똑같은 코드를 화살표 함수로 바꾼다면 어떻게 될까?

 

let group1 = { 
    title: "1모둠", 
    students: ["보라", "호진", "지민"], 
    showList() { 
        this.students.forEach( student => { 
            console.log(this.title + ': ' + student)  // 1모둠 : 보라, 1모둠 : 호진, 1모둥 : 지민
        }); 
    } 
};

의도한 결과인 "1모둠 : 보라", "1모둠 : 호진", "1모둥 : 지민"이 차례로 출력될 것이다. 그 이유는 바로 forEach 문 안의 함수가 화살표 함수이므로, 상위 스코프 (showList() 함수 스코프) 의 this 를 참조했기 때문이다.

이와 같이 일반 함수의 사용으로 인해 this 의 참조값이 바뀌는 경우, 화살표 함수를 사용하여 그 문제를 해결할 수 있기도 하다.


📌 마지막으로, 화살표 함수는 this가 없기 때문에 생성자 함수로 사용할 수 없으며, new 와 함께 호출할 수도 없다.

✨ 배운 점

• 화살표 함수의 고유한 규칙이 너무 복잡하고 어렵기도 하지만, 복잡한만큼 유용하게 사용될 때가 분명 찾아올 것이라고 생각한다. 그런 의미에서 Javascript 는 은근 만능 언어라는 생각이 든다. "이걸 이렇게 해주는 건 왜 없지?" 해서 찾아보면 대부분 존재하는 기능이다... 나의 공부가 부족할 뿐!

 

✨ 참고자료

• 화살표 함수 다시 살펴보기
• Node에서의 this
• https://youtu.be/jWllMubtfPQ
• What is a Runtime Environment?