이터레이터 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 갖는다. next 메서드 이터레이터의 next 메서드는 이터러블의 각 요소를 순회하기 위한 포인터의 역할을 한다. 즉, next 메서드를 호출하면 이터러블을 순차적으로 한 단계씩 순회하며, 순회 결과를 나타내는 이터레이터 리절트 객체(iterator result object)를 반환한다. // 배열은 이터러블 프로토콜을 준수한 이터러블이다. const array = ["사과", "복숭아", "참외"]; // Symbol.iterator 메서드는 이터레이터를 반환한다. const iterator = ar..
이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. 이터러블은 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나, 프로토타입 체인을 통해 상속받은 개체를 말한다. (아직은 직관적인 이해가 가지 않는다.) 이터러블 프로토콜 (직관적으로 이해가 가지 않음) Well-known Symbol인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이러한 규약을 이터러블 프로토콜이라고 한다. 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 이터러블은 for of 문으로 순회할 수 있으며, 스프레드 문법 및 디스트럭쳐링..
등장배경 비동기 처리를 위한 콜백 패턴은 콜백 헬이나 에러 처리가 곤란하다는 문제점이 있다고 한다. 이를 극복하기 위해 ES6에서 프로미스(Promise)가 도입되었다. 일단 글로써 익히기 Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스(Promise 객체)를 생성한다. Promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 빌트인 객체이다. Promise 생성자 함수(new Promise)는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데, 이 콜백 함수(executor 함수라고도 한다.)는 resolve와 reject를 인수로 전달받는다. executor의 인수 resolve와 reject는 자바스크립트에서 자체 제공하는 콜백이다. 따라서 개발자는 resol..
Ajax (Asynchronous JavaScript and XML) 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 등장배경 이전 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 처음부터 끝까지 렌더링하는 방식으로 동작했음. 이는 상당히 비효율적이었음. (불필요한 데이터 통신 발생) 이후 서버로부터 웹페이지의 변경에 필요한 데이터만 전달받는 Ajax가 등장함. 장점 갱신하는데 필요한 데이터만 서버로부터 전송받음. (데이터 낭비 감소) 변경할 필요가 없는 부분은 다시 렌더링하지 않음. (시간 낭비 감소) 클라이언트와 서버와의 통신이 비동기 방식으로 동..
자바스크립트의 특징 중 하나는 싱글 스레드로 동작한다는 것이다. 하지만 브라우저를 보면 HTML 요소가 애니메이션 효과를 통해 움직이면서 이벤트를 처리하기도 하고, HTTP 요청을 통해 서버로부터 데이터를 가지고 오며 렌더링하기도 하는 등 태스크들을 동시에 하는 것처럼 느껴진다. 이처럼 자바스크립트의 동시성(concurency)를 지원하는 것이 이벤트 루프(event loop)이다. 이벤트 루프는 태스크 큐(task queue)를 통해 자바스크립트의 동시성을 보장한다. 태스크 큐 : 비동기 함수(setTimeout, setInterval 등)같은 비동기 함수의 콜백 함수 등이 일시적으로 보관되는 영역이다. 이벤트 루프 : 콜 스택에 실행중인 실행 컨텍스트가 있는지, 태스크 큐에 대기중인 함수가 있는지 반..
자바스크립트는 단 하나의 실행 컨텍스트를 갖는다. 실행 컨텍스트는 스택 자료구조를 띄고있다. 이러한 이유로 구조적으로는 동시에 2가지 이상의 함수를 실행할 수 없다. (실행중인 컨텍스트를 제외하면 나머지 실행 컨텍스트는 모두 실행 대기중인 태스크(업무, task)이다. 태생적으로 자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread) 방식으로 동작한다. 그래서 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(blocking, 작업 중단)이 발생한다. 아래 코드는 동기 처리를 보여주는 예시이다. // Date.now()는 현재 시간을 숫자(ms)로 반환한다. function sleep(func, delay) { const delayUntil = Date.now..
실행 컨텍스트 (execution context) 단어를 풀자면 실행의 문맥이라는 뜻이다. 자바스크립트의 동작 원리를 담고 있는 핵심개념으로, 자바스크립트 코드를 평가하고 실행하는 규칙이라고 할 수 있다. 실행 컨텍스트를 쉽게 이해하기 위해서는 4가지 소스코드 타입을 알아둘 필요가 있다. 설명의 자세한 이해가 어렵다면 소스코드만 일단 눈에 익혀보자. 전역 코드(global code) : 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드(function code) : 함수 내부에 존재하는 소스코드를 말한다. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다. eval 코드(eval code) : 빌트인 전역 함수인 eval 함수..
모든 식별자는 자신이 선언된 위치에 식별자를 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라고 한다. 스코프는 크게 전역 스코프(globla scope)와 지역 스코프(local scope)로 나눌 수 있으며 모든 지역 스코프의 최상위 스코프는 전역 스코프이다. 지역 스코프에도 선언된 위치에 따라 상위와 하위가 나뉜다. 하위 스코프는 상위 스코프를 참조하며, 그 반대의 경우는 있을 수 없다. (상속의 개념과 비슷하다.) let x = "global x"; let y = "global y"; function outer() { let z = "outer's local z"; console.log(x); console.log(y); console.log(z); function inner() { let x..
메서드란? 객체(Object)의 프로퍼티(Property)에 할당된 함수를 메서드(Method)라고 한다. 메서드는 객체에 동적인 능력을 부여한다. const person = { name : '2DC', age : 30, sayHi : () => console.log('Hi!'), } person.sayHi(); 위 코드를 통해 2DC라는 객체가 생성되었으며, 이 친구는 sayHi라는 메서드가 있고, 이 메서드를 통해 Hi 라는 인사를 할 수 있다. 메서드와 This 대부분의 메서드는 객체 프로퍼티의 값을 활용해서 역할을 한다. 이 때 this를 사용하면 메서드가 본인이 속한 객체의 내부 프로퍼티에 접근할 수 있게 된다. const person = { name : '2DC', age : 30, sayHi..
화살표 함수를 사용하면 함수 표현식을 보다 간결하게 표현할 수 있다. // 함수 표현식 const exp = function add(a, b) { return a + b; } // 화살표 함수 const arrow = (a, b) => a + b; 이 때 구문이 하나인 화살표 함수의 경우에는 return을 생략해주어도 된다. 하지만 구문이 여러개인 화살표 함수는 아래처럼 중괄호 안에 return을 명시해주어야 한다. // 화살표 함수 const arrow = (a, b) => { let value = a + b; return value; } console.log(arrow(5, 5)); 인수가 하나라면 괄호를 생략해도 된다. 인수가 없다면 괄호 속은 비우되 괄호 생략은 불가능하다. // 인수(매개변수)가..
