[자바스크립트] undefined와 null의 차이

자바스크립트는 데이터 타입이 무척이나 자유분방하다. 모든 변수를 var(es6에서는 const, let 추가)로 선언된다. 그리고 데이터 타입은 이 선언 시점이 아닌 할당 시점에 결정이 된다. 하지만 개발을 하다보면 이러한 자바스크립트의 특징으로 인해 여러가지 문제가 발생할 때가 있다. 콘솔창에 변수값이 undefined와 null으로 찍히는 경우가 대표적이다. 비슷한듯한 이 둘의 차이를 명확히 인지하고 있어야 빠른 문제해결이 가능하다. ❙ undefined 변수가 선언되었지만 어떤 값도 할당되지 않은 상태이다. 할당이 되지 않았으므로 자료형이 결정되지 않았다. 따라서 'undefined'인 것이다. var a; console.log(a); 위 코드를 직접 실행해보면 결과는 다음과 같다. ❙ null 변..

[자바스크립트] debugger 활용법

자바스크립트 개발에 있어 불편한 점중 하나는 디버깅이 쉽지 않다는 것이다. 어디에서 문제가 발생했는지를 찾기 위해 변수를 console 로그에 찍어보기도 하고, 심지어 alert을 활용한다. 이렇게 값을 찍어보는 것만으로 디버깅을 하기에는 한계가 있다. 하지만 debugger문을 활용한다면 자바스크립트 코드도 실행 흐름을 따라가며 효과적으로 검증할 수 있다. 사용법은 아주 간단하다. 그저 검증하고 싶은 코드의 중간에 debugger문을 끼워넣기만 하면 된다. 이는 코드 실행시에 breakpoint가 된다. debugger문을 끼워넣은 위치에서 실행이 중단되고, 디버깅을 할 수 있게 된다. 예시를 통해 살펴보자. function adder(paramA, paramB){ debugger; //여기에 brea..

[자바스크립트] 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"); }) 통상적인 ..