인프런 커뮤니티 질문&답변
작성한 질문수
화살표 함수 this return시 값 에 관하여 질문 드립니다.
작성
·
456
·
수정됨
0
안녕하세요 코드팩토리님.
함수내에 this return 시 global return 에 관하여 질문이 있습니다.
const testFunction1 = function() {
return this;
}
const testFunction2 = () => this;
console.log(testFunction1());
console.log(testFunction1() === global);
// 결과값: true
console.log(testFunction2());
console.log(testFunction2() === global);
// 결과값: false
testFunction1 을 화살표 함수 testFunction2 로 변경하였는데 결과값이 다릅니다.
testFunction1 은 global 이 리턴 되지만
testFunction2 는 global 이 리턴 되지 않는 이유가 궁금합니다
답변 2
1
코드팩토리
지식공유자
안녕하세요!
arrow 함수의 특징중 하나입니다.
일반 함수는 생성될때 this가 globa/window에 바인딩 되지만 arrow 함수의 경우 상위 this를 그대로 사용하게 됩니다. 다시 말해 this에 lexical scope가 적용됩니다. 그렇기때문에 arrow 함수를 최상위에 선언하면 최상위의 this와 같고 일반 함수 내부에 선언하면 바로 상위 함수의 this를 그대로 사용하게됩니다. 아래 예제를 참고해주세요!
const _this = this;
const runner = () => {
return this;
};
console.log(_this === this);
const runner2 = function () {
const __this = this;
return () => {
console.log(__this === this);
console.log(__this === global);
};
};
runner2()();
// true / true / true 출력감사합니다!
브라우저 환경의경우 this가 window로 매치 됩니다.
그 이유는 브라우저는 전통적으로 JS 파일을 하나로 뭉개서 사용하기 때문입니다.
저희는 code runner를 이용해서 코드를 실행하고 있고 그렇기때문에 nodeJS 환경을 사용하게됩니다.
nodeJS의 경우 최상위 this는 모듈의 최상위 객체, 쉽게 말하면 현재 파일의 최상위 객체입니다. 그리고 이 객체는 해당 모듈에서 export 하는 값들을 들고 있습니다. (ECMA 모듈에 대해서는 TS 강의에서 진행합니다).
이는 global과 확실히 다릅니다. 왜냐하면 global의 경우 어떤 파일에서 액세스해도 같은 객체를 가져올 수 있습니다. 하지만 모듈의 최상위 객체는 해당 파일 스코프에 바인딩 돼있습니다.
감사합니다!