[Javascript] ECMAScript 2015(ES6)+ (2)

구조분해할당(Destructuring) 자바스크립트 개발을 하다 보면 객체를 함수끼리 주고 받는 상황이 아주 많다. 그로 인해 전달 받은 객체의 프로퍼티를 변수로 선언하려면 각 프로퍼티를 별도의 변수로 할당하기 위해 각 프로퍼티마다 독립된 할당문을 작성해야 했다. 하지만 구조분해할당이라고 불리는 문법이 추가되어 변수 선언이 훨씬 더 편리해졌고 코드가 간결해졌다. 변수 선언 먼저 변수의 프로퍼티를 쉽게 선언하는 예제이다. 객체의 구조분해할당은 변수로 선언하고자 하는 객체의 프로퍼티명을 { } 안에 나열하면 각 프로퍼티의 이름으로 변수가 생성되고 프로퍼티의 값이 자동으로 할당된다. 배열의 구조분해할당 또한 비슷한데 [ ] 안에 나열하는 변수의 이름에 맞는 인덱스의 요소가 변수의 값으로 할당된다. ES5fu..

promise.all과 문법이 유사 다른 점은 promise.all은 모든 promise가 완료될 때까지 기다리는 반면 promise.race는 가장 먼저 완료된(resolve)가 리턴 됨 예시 소스 'use strict' const promise1 = new Promise((resolve, reject) => { setTimeout(() => resolve(2000),2000) }) const promise2 = new Promise((resolve, reject) => { setTimeout(() => resolve('즉시'),0) }) Promise.race([promise1, promise2]).then(value => console.log(value));

promise.all 이란? promise를 통해 비동기 처리할 때 다수의 promise가 완료될 때까지 모든 promise를 대기시키고 완료가 될 때 해당하는 값을 리턴 받을 수 있도록 하는 함수 배열 안에 있는 모든 promise가 완료될 때까지 기다렸다가 모두가 실행됐을 경우 값을 리턴 한가지 이상 혹은 다수의 비동기 promise에 대해서 모든 작업의 완료를 보장받을 수 있음 다양한 API를 호출하고 여러가지 데이터를 조합할 경우에 자주 쓰임 예시 const promise1 = new Promise((resolve, reject) => resolve('즉시 호출')); const promise2 = new Promise((resolve, reject) => { setTimeout(() => res..

Promise Chaining은 여러 개의 프로미스를 then으로 연결해주는 것이다. 테스트할 js 파일을 만들고 아래 소스를 추가한다. 아래 소스는 setTimeout을 사용하여 1초 후에 p1의 text를 찍고 3초 후에 p2의 텍스트를 찍는 소스다. 병렬적으로 실행 된다. (p1 실행 후 3초 뒤가 아닌 처음 실행 기준에서 3초) const p1 = new Promise((resolve, reject) => { setTimeout( () => { resolve({ p1_text : "p1의 텍스트"}); }, 1000); }); const p2 = new Promise((resolve, reject) => { setTimeout( () => { resolve({ p2_text : "p2의 텍스트"}..

4callback, promise등을 사용하는 이유? 자세하게 설명하면 너무 복잡하고 어렵다. 본 포스트에서는 Promise를 사용하는 방법을 알려주는 예제입니다. Promise를 사용해야 하는 이유와 좀 더 심도 깊게 알고 싶은 분들은 구글링을 통하여 한 번 검색해 보시는 걸 추천드립니다. 본 포스트를 보시기에 앞서 동기화와, 비동기화에 대해서는 반드시 사전에 숙지가 되어 있어야합니다. 동기화 비동기화에 대해서 숙지하시지 못하신 분은 아래의 포스트를 먼저 보고 와주시기 바랍니다. developing-move.tistory.com/20 [Javascript] 동기/비동기 처리와 callback 동기와 비동기를 나누는 가장 큰 차이점을 어떻게 실행 순서를 가지는 지에 있다. 아래 이미지와 같이 Syncro..