[자바스크립트] this의 개념과 활용법

여타 프로그래밍 언어와 마찬가지로 자바스크립트는 this라는 키워드를 제공한다. 사실 자바에서는 this 키워드를 익숙하게 써왔는데, 자바의 this는 단지 현재 객체(에 대한 레퍼런스)를 가리킬뿐이다. 하지만 이와 동일한 이해를 가지고 자바스크립트 코드를 작성했다간 여러가지 문제에 부딪히게 될 수 있다. 자바스크립트에서의 this는 자바처럼 단순하지 않다. 실행 문맥에 따라 다르게 동작한다고 이해하는게 맞겠다. 다음과 같이 4가지 종류의 문맥으로 구분할 수 있다. 함수 실행 : alert('Hello world!') 메소드(함수 내부의) 실행 : console.log('Hello world!') 생성자 실행 : new RegExp('\\d') 간접(indirection) 실행 : alert.call(u..

[자바스크립트] 스코프와 클로저

자바스크립트 개발을 좀 해봤다는 사람이 만약 개발자 채용 면접을 보게된다면 클로저에 대한 질문을 반드시 받을 것이다(감히 확신한다!). 그만큼 클로저는 자바스크립트를 처음 접했을 때 적지 않은 혼란을 주는 개념이고 또 중요하다. 혹시 다음과 같은 코드를 보며 혼란스러웠던 경험이 있지 않은가? function foo(param){ var a = param; return function(){ console.log(a); } } var test = foo('closure!'); test(); 실행결과는 다음과 같다. 위의 예제를 처음 접했다면 의문이들기 마련이다. foo 는 익명 함수를 리턴한뒤 종료된다. 이 시점에 foo 내부의 변수인 a 도 가비지콜렉터(GC)에 의해 정리되는 것이 정상적인 흐름처럼 보인다..

[자바스크립트] 비동기 처리의 원리

자바스크립트 코드를 짜다보면 의아할 때가 있다. 내가 짜놓은 코드가 순서대로 돌아가지 않는 순간 말이다. 다음 코드를 보고 콘솔로그의 순서를 예측해보자. var exam = function(callback){ console.log("exam called"); setTimeout(function(){ console.log("setTimeout called"); if(typeof callback === "function"){ callback(); } else { console.log("callback is not function"); } },3000); console.log("end of exam"); } exam(function(){ console.log("callback called"); }) 통상적인 ..

[자바스크립트] 이벤트의 동작 원리

자바스크립트로 개발을 좀 해본사람이라면 누구나 이벤트를 다뤄봤을 것이다. 소위 말하는 프론트엔드, 즉 화면을 만든다고 치자. 그러면 단지 눈에 보이는 화면만을 만들어내는게 아니라 그 위에서 일어날 '동작'을 구현해야한다. 어떤 버튼을 눌렀을때 화면에 alert 메세지가 뜨게끔 한다던지 말이다. 화면에서 버튼을 누를 때 발생하는 click 이벤트를 비롯하여 자바스크립트 개발 과정은 이벤트 핸들링의 연속이다. 따라서 확실히 정리하고 넘어가야할 내용인 것이다. 이벤트란 이벤트란 사건이다. 사용자가 특정 버튼을 클릭을 할때, 키보드로 키를 입력할때, 마우스를 화면의 특정 요소에 끌어다 놓을 때를 생각해보자. 이는 특정한 동작이 벌어지는 '사건'이 일어난 것이다. 이 사건을 일으키는 주체는 반드시 사용자일 필요는..