화살표 함수 this return시 값 에 관하여 질문 드립니다.
540
작성한 질문수 1
안녕하세요 코드팩토리님.
함수내에 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 출력감사합니다!
0
이해하기 쉬운 설명과 예시 덕분에 이해했습니다! 감사합니다.
죄송하지만, 한가지 더 궁금한 점이 있습니다.
const _this = this;
console.log(_this);
제일 첫 번째 줄의 this 를 콘솔로 출력하면 결과가 {} 이 나옵니다.
여기서의 this 는 무엇을 의미 하나요?
1
브라우저 환경의경우 this가 window로 매치 됩니다.
그 이유는 브라우저는 전통적으로 JS 파일을 하나로 뭉개서 사용하기 때문입니다.
저희는 code runner를 이용해서 코드를 실행하고 있고 그렇기때문에 nodeJS 환경을 사용하게됩니다.
nodeJS의 경우 최상위 this는 모듈의 최상위 객체, 쉽게 말하면 현재 파일의 최상위 객체입니다. 그리고 이 객체는 해당 모듈에서 export 하는 값들을 들고 있습니다. (ECMA 모듈에 대해서는 TS 강의에서 진행합니다).
이는 global과 확실히 다릅니다. 왜냐하면 global의 경우 어떤 파일에서 액세스해도 같은 객체를 가져올 수 있습니다. 하지만 모듈의 최상위 객체는 해당 파일 스코프에 바인딩 돼있습니다.
감사합니다!
EXPLOPER에서 파일을 삭제하는 방법을 알려주세요 ㅜㅜ
0
100
2
&& ||가 너무 햇갈려요
0
97
2
js에선 string값이 아스키코드값으로 저장되지 않나요?
0
73
2
여러줄에 주석 쓰는 방법 질문
0
119
1
출력이안되요 ㅜㅜ
0
821
3
선생님, 감사해요
0
250
2
Factory Constructor를 언제 사용하나요?
0
231
2
n개의 await를 사용하면, 이들은 promise chaining 처럼 동작하나요?
0
168
1
안유진을 얼마만큼 좋아하시는 건가요?
7
471
2
단축 평가 (short circuit evaluation) 패턴 관련 질문있습니다.
0
217
1
클래스를 써야할때와 함수를 써야할때
0
315
2
혹시 공부한 내용을 개인 블로그(티스토리 등)에 요약해서 올려도 될까요 ?
0
335
1
Copy by Value에 대해 질문있습니다!
0
257
2
메모리 강의 중 메모리 활용 부분 질문드립니다.
0
274
1
Super Keyword 질문 있어요!
0
333
1
Static Keyword 질문 있어요!
0
272
1
Object.setPrototype(ray, IdolModel.prototype); 호출 후, ray.dance()가 실행되는 이유를 모르겠어요
1
494
2
선생님 저 멍청한거 맞죠?
0
746
2
sort 함수에 대해 궁금한 점이 있습니다.
0
435
1
대소관계 비교할 때 문자열과 비교할 경우
0
350
1
const 에서
0
409
1
함수 안 변수 키워드를 var를 사용하시는 이유가 궁금합니다.
0
553
1
Arrow 함수 질문있습니다.
2
364
1
scope에 대해 질문 있습니다.
0
320
1