Jacob's Development Blog

사실 이 주제는 자바스크립트에만 종속된 이야기는 아니지만, 대부분의 개념을 자바스크립트를 통해 설명할 것이기 때문에 자바스크립트라는 카테고리에 위치시켰다. 동기(Synchronous) vs 비동기(asynchronous) 동기와 비동기로 작성한 코드의 가장 큰 차이 중 하나는 런타임(runtime)시에 발생하는 지연시간(latency)이다. 모든 코드가 동기적으로(순서대로만) 실행된다면 어떤일이 벌어질까? 내가 만약 메시지를 보낸다고 하면 메시지를 보내고 응답이 오기까지 아무것도 할 수가 없다. 왜냐하면 앞에 작업이 아직 안 끝났기 때문이다. 물론 이런 방식이 전혀 사용이 안되는 것은 아니다. ATM 기계, 키오스크, 단순 단말기 같은 방식은 이런 동기적인 방식을 따르고 있다. 동기적 방식의 장점은 코드..

동기적 프로그래밍 동기적 프로그래밍 모델에서는 일(task)은 한 번에 하나씩 일어난다. 그러다 보니 오랫동안 실행되는 동작을 수행하는 함수를 호출했다면, 그 함수가 종료될 때까지 그 프로그램은 중지되게 된다. 이제 1부에 이어, 2부에서는 비동기적 프로그래밍에 대해 알아보자. 1부 - 자바스크립트 함수 표현식, IIFE 그리고 비동기 함수 표현식 함수 표현식(function expression)은 값이 될 수 있고, 함수 역시 값이 될 수 있다. 이는 함수를 선언하는 한 가지 방법일 뿐이며, 그 함수가 익명이 될 수도 있을 뿐이다. 함수 표현식은 식별자에 할.. code-masterjung.tistory.com 비동기적 테크닉을 사용해야 하는 경우 사용자의 행동과 관련된 것(입력, 클릭 등) Ajax ..

함수 표현식 함수 표현식(function expression)은 값이 될 수 있고, 함수 역시 값이 될 수 있다. 이는 함수를 선언하는 한 가지 방법일 뿐이며, 그 함수가 익명이 될 수도 있을 뿐이다. 함수 표현식은 식별자에 할당할 수도 있고 즉시 호출(IIFE)할 수도 있다. 함수 표현식은 함수 이름을 생략할 수 있다는 점을 제외하면 함수 선언과 문법적으로 완전히 같다. const f = function() { // ... }; 위 예제는 결과적으로 함수 선언과 동등하다. 식별자 f가 이 함수를 가리키며, 일반적인 함수 선언과 마찬가지로 f()로 이 함수를 호출할 수 있다. 차이점은 먼저 함수 표현식으로 익명 함수를 만들고 그 함수를 변수에 할당했다는 거다. 익명 함수는 어디든지 쓸 수 있다. 다른 함..

자바스크립트에서는 일반적으로 this를 사용하는 방법 이외에 함수를 어디서, 어떻게 호출했는지 관계없이 this가 무엇인지 지정할 수 있다. 여러가지 방법이 있겠지만, 일단 call 메서드부터 살펴보자. call(thisArg[, arg1[, arg2[, ...]]]) 함수를 호출하면서 call을 사용하고 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것처럼 사용할 수 있다. 여기서 첫 번째 매개변수인 thisArg는 this로 사용할 값이고, 매개 변수가 더 있으면 그 매개변수는 호출하는 함수로 전달된다. 바로 예제를 확인해 보자. - 매개변수 없이 greet()를 호출한 경우, 전역 변술로 name이 존재하지 않기 때문에 undefined를 반환한다. - 매개변수로 call() ..

자바스크립트를 다루고 코딩을 하다 보면, 객체를 다루는 게 얼마나 중요한가에 대해 알게 된다. 나 또한 처음엔 몰랐다. 요즘 들어 갈증이 생기고 예전에 겉핥기 식으로 했던 공부가 근본적인 실력 향상으로 이어지지 않다는 게 느낀다. 그래서 조금 더 자세히 공부해 보자. 우리가 다루는 자바스크립트의 대부분은 객체 타입이다. 당연히 객체를 잘 다뤄야지 자바스크립트를 잘 다룰 수 있을 것이다. What is Object? 나도 그랬지만, 가끔 Object에 대해 오해를 하고 있는 사람이 많은거 같다. object(객체)란, {key: value} 이런 식의 타입만을 의미하지 않는다. 원시 타입(primitive type)을 제외한 타입은 모두 Object 타입이며, Object를 상속 받고 있는 자식들이다. 따..

자바스크립트의 함수에 대한 주제가 많이 있으나, 오늘은 간단하게만 정리해보려고 한다. ECMAScript 5 까지의 함수 함수는 new 연산자와 함께 호출하거나 new 없이 호출하는 방법이 있다. 위 코드에서 보다시피, new 연산자와 함께 호출하면 함수 내부의 this 값은 새로운 하나의 객체이고 그 객체를 반환한다. 반면 new 없이 호출하면 undefined를 반환한다. 그럼 사용자가 new 연산자를 이용하도록 어떻게 강제했을까? 가장 흔한 방법은 instanceof를 사용하는 거다. // instanceof Syntax object instanceof constructor // object: 판별할 객체 // constructor: 판별한 함수 function Person(name) { if (t..

(입사 초기에 사내 위키에 올렸던 내용이나, 지식 공유 차원에서 쉽게 정리하여 다시 공유한다.) 바인딩(binding) 일반적으로 A를 B에 명시적 또는 암시적인 선언에 의해 매핑하는 것. 프로그래밍에서는 개체(데이터와 코드)들을 연결(할당)하는 것이라고 생각하면 된다. 대부분의 C 기반 언어에서 변수는 선언한 위치에서 바로 생성되지만, 자바스크립트의 경우 변수 선언 방식에 따라 변수 생성 위치가 다르다. 동적 바인딩 런타임(runtime) 시에 발생하며, 실행 중인 경우 변경될 수도 있다. 정적 바인딩 컴파일시에 발생한다. 다시 말해 프로그램이 메모리에 로드될 때, 메모리 셀에 바인딩된다. Scope 자바스크립트 프로그래밍에서 가장 까다로운 부분이 아닐까 싶다. 나 역시 자바스크립트를 맨 처음 배울 때..

7 Data Types call by value와 call by reference에 대해 다루기 전에 7가지 데이터 유형을 먼저 설명하려고 한다. primitive data type - number, string, boolean, undefined, null Objects - Array, Object 여기서 중요한 점은 primitive data type은 값으로 전달되고, Objects는 참조로 전달된다. 여기서 값으로 전달된다(Call by value)는 의미는 사본을 만드는 것과 동일하다고 생각하며 되며, 좀 더 정확하게는 다른 메모리 위치에 저장된다. 아래 예제를 보자. let name = 'jacob'; let newName = name; name = 'master jung'; console.l..

자바스크립트 개요(ES6+) 자바스크립트(Javascript)는 일급 함수를 지원하는 언어입니다. 또한 동적 언어이며 HTML과 CSS와 함께 웹에서 가장 굴직한 줄기를 차지하고 있습니다. 참고로 Java와는 전혀 다른 언어입니다. 그런데 자바스크립트를 공부하다보면 ECMAScript, ES6, ES6+, ES7 ... 등의 말을 보게 됩니다. ES는 ECMAScript의 줄임말이며 뒤에는 버전이라고 생각하시면 됩니다(물론 ES1부터 다 있습니다). ECMAScript는 자바스크립트의 표준이며 현재도 계속 ECMA International 표준화 기구에 의해 버전이 업데이트 되고 있습니다. 그리고 ECMAScript2015를 ES6라고 하며, ES6 이후 버전을 통칭하여 "ES6+" 라고 합니다. 아래에..