Language/JavaScript

Promise & Async Await

1. Promise - 비동기를 값으로 다루는 법 Promise 란? 자바스크립트가 미리 만들어둔 하나의 객체 이 객체는 then, catch 라는 메서드를 가지고 있다. pending, fulfilled, rejected 세가지 상태를 가지고 있다. Promise는 최초에 pending 상태로 만들어진다. 그리고 이후 fulfilled 또는 rejected 상태로 변경시킬 수 있다. Promise를 만들기 위해서는 new Promise 키워드를 통해서 만들 수 있는데 이때 콜백함수를 인자로 넣을 수 있다. new Promise((resolve, reject) => {}) 이때 콜백 안에서 resolve 함수를 호출하면 Promise는 value와 함께 fulfilled 상태가 된다. 반대로 reject..

[JavaScript] 비동기를 구현하는 방법 (Event loop & Callback)

1. 자바스크립트가 비동기를 구현한 방법 자바스크립트는 비동기적인 동작을 관리하기 위해서 "이벤트루프"라는 개념을 사용 자바스크립트의 실행과정은 크게 2가지 요소들이 관여 자바스크립트 엔진 (V8) 자바스크립트의 해석과 실행을 담당 이벤트루프 (Event loop) 비동기적인 동작들을 처리하고, 완료여부를 파악해서 필요한 동작을 수행 "큐"라는 시스템을 이용한다. 큐는 FIFO(First In, First Out) 방식을 따르는 자료구조로, 먼저 줄을 선 사람이(First In), 가장 먼저 입장 개념이다 (First Out). 이벤트 루프는 내부에 큐를 가지고 있으며 비동기적인 동작을 수행한 후, 완료되면 내부의 큐에 콜백함수를 담아둔다. 그리고, 자바스크립트 엔진에서 처리할 준비가 되었다면 큐안에 있..

비동기에 대해서

1. 비동기 프로그래밍이란? 프로그램이 어떠한 동작을 하고 있을 때 그것을 기다리는 것이 아니라 그동안 발생하는 다른 이벤트에도 모두 반응할 수 있게만드는 기법을 의미 2. 자바스크립트의 비동기 흔히들 "자바스크립트는 비동기로 동작한다"라고 하는 말은 엄밀히 말하자면 올바른 말은 아니다. 자바스크립트는 단지 언어일 뿐 이를 어떻게 동작시키는지는 자바스크립트를 해석하고 실행하는 환경에 달려있다. 다만 현재 대표적인 자바스크립트의 실행환경인 브라우저 및 노드가 비동기적으로 자바스크립트를 실행하고 처리하기에 "자바스크립트는 비동기로 동작한다"라는 말도 결과적으로 성립하게 된 것이다. 3. 비동기의 필요성 노드는 브라우저에서 쓰이던 자바스크립트를 그 외의 환경에서 실행하기 위해서 만들어진 실행환경이기에 기본적으..

Iterator & Generator

1. Iterable protocol 1) Iteration “반복”이라는 의미를 가지고 있다. 모든 애플리케이션은 “순차, 분기, 반복" 3가지로 이루어져있다. 반복은 애플리케이션을 구성하는 3가지 요소 중 하나인만큼 개발을 하는 과정에서 빈번하게 수행되는 행위다. 2) Protocol “규약"을 의미한다. 그리고 Iterable은 “반복 가능한”이란 의미를 갖는다. 따라서 자바스크립트에서 말하는 Iterable protocol이란 “반복 가능한 자바스크립트 객체들을 정의하는 규약"이라고 할 수 있다. 이러한 Iterable protocol은 우리가 알게 모르게 사용해오고 있었다. 자바스크립트에서 사용하는 for of 문법, Spread Operator([...arr] ), 배열 구조분해할당 등의 문법..

Javascript ES6 전체적으로 살펴보기

1. let & const 변수를 선언할 때 사용 let (is like new var) ⇒ 값을 수정할 수 있는 변수를 선언할때 (variable values) const ⇒ 한번 지정하면 절대 변하지 않는 값(상수)를 선언할 때 사용(constant values) let myName = 'Max'; myName = 'Mike'; console.log(myName) // "Mike" const myName = 'Max'; myName = 'Mike'; console.log(myName) // TypeError : Assignment to constant variable. 2. Arrow Functions 키워드 function을 생략했기 때문에 일반적인 함수보다 짧다. JS에서 갖고 있었던 this 키..

[JavaScript] 유사 배열 객체(Array-like objects)

유사 배열 (Array-like objects) 객체 1. 유사 배열 (Array-like objects) 객체란? 유사 배열은 [ ] 로 감싸져있어 배열처럼 보이지만 들여다보면 key 값으로는 숫자를 가지고 length값을 가지고 있는 말 그대로 객체 유사 배열은 당연히 배열이 아니기 때문에 배열에 사용하는 메서드(forEach, map, filter, reduce 등)들을 사용할 수 없다. // 유사배열의 형태 const ex = { key: value, // 여기서 key 값은 숫자여야한다! length: 1, }; // tak 이라는 key 값을 숫자로 가지고 length 값을 가지는 유사배열 const tak = { 0: 'Hi', 1: 'Nice', 2: 'to', 3: 'meet', 4: '..