[자바스크립트] arrow function과 this

ecmascript6가 나온지는 한참됐지만 아직 브라우저(특히 ie)들이 이를 완벽히 지원하지 않고 있다. 따라서 현재도 여전히 es5에서 es6+로 넘어가는 과도기인데, 다행히 babel의 도움으로 지금 당장 es6로 개발을 해도 크게 문제될 것은 없다. es6의 가장 큰 문법적 변화사항을 꼽자면 역시나 arrow function이다. 그동안 주로 es5를 활용해서 자바스크립트 개발을 해왔다면 이 arrow function이 익숙지 않을것인데, 특히나 this와 관련해서 짚어볼 점이 있어 정리를 한번 해봤다. 1. Arrow function 문법 Arrow function의 기본적인 문법은 다음과 같다. 함수 작성시에 많은 부분을 생략할 수 있고, 화살표(=>)를 사용하여 조금 더 간결하게 코드를 작성..

[자바스크립트] 객체 제대로 이해하기

자바와 같은 객체지향 언어를 먼저 접한 이후 자바스크립트를 배웠다면, 객체를 다룰 때 꽤나 혼동이 있을 것이다. 하지만 객체에 대한 개념을 제대로 잡아두지 않으면 후에 프로토타입이나 클로저로 이어지는 자바스크립트의 언어적 특징과 심오한 철학에 대해서도 이해하기 어렵다. 천리길도 한걸음부터라고 했으니, 차근차근 시작해보도록 하자. ❙ 자바스크립트에서의 객체 자바스크립트에서는 모든 것이 다 객체다. 숫자, 문자열, boolean 등 기본 타입을 제외한 모든 값은 객체다. 배열, 정규표현식은 물론이고 모든 함수마저도 자바스크립트에서는 객체로 취급된다. 자바스크립트에서 말하는 객체는 단순하게 key:value 형태의 값들을 저장하는 컨테이너로 볼 수 있다. var foo = { name : 'foo', age ..

[자바스크립트] 비동기 처리를 위한 Promise 활용법

자바스크립트 개발을 하다보면 만나는 가장 골치아픈 것이 바로 시점 문제다. 자바스크립트는 대부분의 작업이 비동기로 처리되기 때문에 일단 스크립트가 실행되면 물흐르듯 쭉~ 흘러가버린다. 결과적으로 내가 의도했던 순서대로 코드가 실행되지 않게 되는 것이다. 그래서 콜백이 활용된다. 예를들어, 'A작업이 끝나는 시점에 콜백 함수를 호출해서 B작업을 수행'하는 식이다. 근데 이렇게 콜백을 활용하다보면 또 다른 문제를 마주하게 된다. 이는 콜백지옥이라는 표현으로 익히 알려져있다. var async1 = function(param, callback) {callback(param*2);} var async2 = function(param, callback) {callback(param*3);} var async3 =..

[자바스크립트] 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..