블록 스코프 호출 스택과 관련한 이론들은 대부분 익혔습니다. 이번엔 여러 코드들을 혼합해 코드를 좀 복잡하게 만들어 두고, 호출 스택 지도를 만들어보겠습니다. 일종의 테스트죠. 다음 코드를 보고 호출스택과 선언문 지도를 그려보겠습니다. const x = true; const y = false; function a() { let a = 4; y = true; if (x) { let a = 3; for (let i = 0; i {}; 매개변수 추가로 매개변수는 어떻게 선언문 지도에 표시되는지 다음 예제를 통해 보겠습니다. const z = (a, b) => { retur..
addEventListener addEventListener 는 document 의 특정요소(Id,class,tag 등등..) 에 event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용합니다. 태그.addEventListener('event', 콜백함수) 위와 같은 형태로 해당 태그에 해당 event 를 부여하면 콜백함수를 실행하게 합니다. 여기서 문제입니다. 콜백함수에 this 가 있으면 과연 어떤 값일까요? 다음 예제를 보겠습니다. 저번 this 게시글에서 'this 의 값은 함수가 호출이 될 때 결정이 된다' 라고 꾸준히 강조했습니다. 하지만, 여기서는 함수가 선언 부분만 보일 뿐, 어딜 봐도 함수가 호출이 되고 있는 코드를 볼 수 없습니다..
자바스크립트에서의 this자바스크립트 내에서 this 는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠.그럼 각 상황별로 this 가 어디에 바인딩되는지 알아보겠습니다. 우선 this 가 무엇인지 콘솔에 찍어보겠습니다. this 를 단독으로 써도, 함수 내에서 써도 Window 를 가리키고 있습니다. 일반적으로 Window 라고 생각하면 됩니다. 하지만, 제가 알아볼 건 this 가 바뀌는 경우가 있다는 겁니다. 바로 객체 내에서 this 의 값이 변경되는데요. 다음 예제를 보겠습니다. obj.sayName(); 의 값이 jh 가 나오는 것을 볼 수 있는데요. 만약 this 가 Window 였으면 Window.name 을 값으로 출력해 마지막 줄의 출력값처럼 빈..
호이스팅 정의 호이스팅(Hoisting)은 사전적 의미로 끌어 올리기 라는 의미를 가지고 있는 단어이며, 실제로 하는 일도 사전적 의미와 동일합니다. 모든 선언(var, function)들을 어느 위치에 호출하던지 간에 자바스크립트(Javascript)는 그 선언들을 맨 위로 끌어올립니다. 다음 예제를 통해 자세히 설명 이어가겠습니다. 위 내용을 보면 variable 이라는 변수를 선언하지 않았기 때문에 에러가 발생하는 모습을 볼 수 있습니다. 다음 코드는 undefined 가 출력됩니다. 자바스크립트 엔진은 내부적으로 위 코드를 아래 코드와 같이 해석합니다. 해석과정에서 variable에 대한 선언은 이루어졌는데 값에 대한 정의가 이루어져있지 않아 undefined 가 됩니다.(10 은 variable..
호출 스택에 대해 쉽게 이해하기 위해선 반복된 연습을 통해 충분히 가능합니다. 스코프 체인을 간단히 말하면, 함수에서 어떤 값에 접근이 가능한가? 접근이 불가능한가? 에 대한 개념입니다. 다음 예제를 통해 이해를 돕겠습니다. const x = 'x'; function c() { const y = 'y'; console.log('c'); } function a() { const x = 'x'; console.log('a'); function b () { const z = 'z'; console.log('b'); c(); } b(); } a(); c(); 위 예제는 앞에 '호출스택' 에서 나온 예제입니다. a 함수를 실행하면서 a 함수의 마지막 부분에서 b 함수를 호출하고, 우리는 a 함수 내에 있는 b 함..
함수를 호출하게 되면 함수를 선언한 코드로 돌아가 함수의 선언부를 실행하게 됩니다. 이를 하나의 스택이라는 개념을 만들어 호출할 때마다 하나씩 쌓고, 함수가 끝날 때마다 빼는 것이 함수 호출 스택의 기본 매커니즘이라고 생각하면 됩니다. 다음 예제를 보면서 호출 스택의 과정을 자세히 보겠습니다. const x = 'x'; function c() { const y = 'y'; console.log('c'); } function a() { const x = 'x'; console.log('a'); function b() { const z = 'z'; console.log('b'); c(); } b(); } a(); c(); 1. const x 와 function c, function a 는 함수 선언이므로 이..
