반응형

this 3

자바스크립트 실행컨텍스트 이해하기

자바스크립트에서의 실행 컨텍스트는 굉장히 중요한 개념입니다. 실행컨텍스트를 이해하게 되면 Javascript의 동작 원리를 이해할 수 있게 됩니다. 자바스크립트의 동작원리를 이해하게 되면 코드가 에러를 발생하게 되더라도 좀 더 쉽게 예측이 가능해지게 됩니다. 이는 코드를 작성하거나 수정할 때 굉장한 차이점을 가지게 됩니다. 해당 내용이 조금은 어렵게 느껴질 수 있고 광범위하게 느껴질 수도 있지만 천천히 글을 따라서 읽다 보면 충분히 이해할 수 있도록 정리해보겠습니다. 📖 실행 컨텍스트란? 실행 컨텍스트란 코드가 실행되기 위해 필요한 환경 정보들을 모아 놓은 객체입니다. 실행 컨택스트의 동작은, 동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아놓은 뒤..

IT/JavsScript 2022.07.12

자바스크립트 this 이해하기 (feat. call, apply, bind의 차이)

자바스크립트에서 사용하는 call, apply, bind에 대해 알아보려고 합니다. 하지만 그전에 JavaScript에서 this에 대해 우선 먼저 알아보겠습니다. 아니 나는 call, apply, bind가 궁금해서 왔는데 왜 this를 이야기 하는거죠? 라는 의문이 드실 텐데.. 우선 this를 이해하게 되면 부수적으로 call, apply, bind가 연관되어서 이해되기 시작합니다. 그리고 This를 이해하게 되면서 우리를 그렇게 괴롭히던 다양하게 변경되는This(트렌스포머)를 이해할 수 있게 됩니다. 📖 This 너는 누구니? 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠. call, apply, bind는 자바스크립트에서 ..

IT/JavsScript 2022.07.11

화살표 함수(arrow function) 이해하기

기존 함수 정의 방식 var a = function() { // ... }; 화살표 함수 정의 방식 var a = () => { // ... }; 화살표 함수는 ES6문법에서 함수를 표현하는 새로운 방식입니다. ES5의 function 함수와 비슷한 방식으로 동작하지만 몇 가지 차이점이 있습니다. // ES5 var add = function(x, y) {return x+y;} // ES6 let add = (x, y) => {return x+y}; ES5와 비교해보면 function이 사라졌고 그 자리를 => 함수가 대체했네요. 지금은 그것 말곤 크게 다른 게 없는 것 같죠? 우선 기본적인 화살표 함수 사용방법을 알아볼께요. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 ..

IT/JavsScript 2021.03.30
반응형
//