ES6 3

[Javascript] 화살표함수(arrow function)의 this

ES6에 도입된 화살표함수(arrow function)는 실행 컨텍스트를 생성할때 this바인딩 과정 자체가 빠지게된다고 한다. 따라서 상위 스코프의 this를 그대로 활용할수있다. var obj = { outer: function(){ console.log(this); var innerFunc = () =>{ console.log(this); } innerFunc(); } }; obj.outer(); 결과 {outer: ƒ} {outer: ƒ} 이렇게 InnerFunc()를 함수로서 호출하였을때도 화살표함수로 innerFunc가 실행컨텍스트가 실행되므로 this바인딩 과정이 없다. 따라서 상위 스코프 this인 outer를 활용하는 것이다. 한가지 따로 테스트 한건 만약 outer프로퍼티도 화살표함수로..

[Javascript] this 함수, 메서드 차이 (2)

실행컨텍스트를 활성화할 당시에 this가 지정되지 않을경우 this는 전역객체를 가리킨다고 이전에도 설명한바 있다. 이를 더글라스 크락포드(자바스크립트 언어 개발 참여자, json포멧 보급 등)는 명백한 설계상 오류 라고 지적했다. 이에 대해서 알아보고자한다. 내부함수에서의 this var obj1 = { outer: function(){ console.log(this) // (1) var innerFunc = function(){ console.log(this); // (2),(3) } innerFunc(); var obj2 = { innerMethod: innerFunc }; obj2.innerMethod(); } }; obj1.outer(); 다음과 같이 this를 함수내에서 console.log ..

[TIL] Optional chaining ES11문법

자바스크립트 최신 문법들을 다시한번 훑어보면서 optional chaining 기능을 배웠는데 들으면서 번뜩 떠오른 부분이 있었고 이 최신 문법을 사용하여 예전 프로젝트를 수정하면 코드가 더 줄어들지 않을까 생각했던 부분이 있었다. Optional Chaining? The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid. 위는 MDN 에서 정의된 설명이다. 번역하자면 optional chaining(?.) 을 사용하..

TIL 2022.02.13