function add5(num) { return new Promise((resolve, reject) => { setTimeout(() => { console.log(num + 5); resolve(num + 5); }, 2000) }) } Promise.all( [add5(1), add5(2), add5(3)] ).then(result => { console.log(result) }) // [6,7,8]여러가지 비동기 작업을 병렬로 처리하고 싶을 때 사용하는 것이 Promise.all이다. 배열로 인자를 주게되면, 배열에 있는 모든 Promise들이 거의 동시에 트리거된다. 즉, 위 코드는 add5를 3개 실행하여 총 6초가 걸리는 것이 아니라 2초만에 3개의 비동기 작업이 완료된다.그리고 결과값은 ..

정의 Promise는 자바스크립트 비동기 처리에 사용되는 객체입니다. (실제 연산을 직접 처리해주는 것은 아니고, 해당 연산을 대리하여 결과나 실패를 처리하기 위한 처리기와 연결할 수 있도록 하는 객체) 그리고 비동기란, "특정 코드의 실행이 완료될 때까지 기다리지 않고, 다음 코드를 먼저 수행하는 특성"을 말합니다. 탄생 배경 예전 작은 규모의 웹에서는 비동기 요청이 많지 않아서, 각 비동기 요청간 의존성이 크지 않았지만, 웹이 발전하고 다양한 플랫폼으로 진출하면서, 단순히 callback만으로는 모든 상태를 통제하기 어렵게 되었다. 그래서 기존 비동기 처리 코드들을 동일한 (표준) api형태로 사용할 수 있게 해주는 ES6에서 추가된 기능이다. Promise 없이 Callback으로만 비동기 처리할 ..

let i = 0; setTimeout(function () { // (A) console.log(i++, 'A'); }, 0); Promise.resolve() .then(function () { // (B) console.log(i++, 'B'); }) .then(function () { // (C) console.log(i++, 'C'); }); // 0 'B' // 1 'C' // 2 'A' 순으로 출력 위 코드는 B → C → A 순서로 실행된다. 분명 셋다 비동기 동작이라서, 태스크 큐에 순차적으로 들어가서 콜 스택으로 차례 대로 빠져나와서 실행되었을 것이다. 근데 왜 A → B → C 순서로 동작하지 않았을..

즉시 실행 함수 (Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 함수이다. IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다. 사실 IIFE는 클로저를 활용한 패턴이다. IIFE가 모두 클로저인 것은 아니고, 비공개 변수를 가질 수 있는 환경에 있는 함수가 클로저이다. 비공개 변수는 클로저 함수 내부에 생성한 변수도 아니고, 매개변수도 아닌 변수를 의미한다. 비공개변수는 클로저 함수의 매개변수도 아니고, 클로저 함수 내부에서도 생성한 변수가 아닌 변수를 뜻하고 "자유 변수"라고도 불린다. 비공개변수는 비공개이기 떄문에, 남들이 조작할 걱정이 없다. 프로그램 사용자가 예상을 뒤엎는 행동을 하는 것을 막을 수 있다..

- 함수형 프로그래밍 : 부수 효과를 없애고 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임 : 명령형이 아닌 선언형 프로그래밍 방식 - 부수 효과 : 외부의 상태를 변경하는 것 또는 함수로 들어온 인자의 상태를 직접 변경하는 것. - 순수 함수 : 부수 효과가 없는 함수. 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수 (= 외부의 상태를 변경하지 않는 함수) (=외부의 상태를 변경하지 않으면서, 동일한 인자에 대해 항상 똑같은 값을 리턴하는 함수) - 함수형 프로그래밍은 왜 필요한가? : 간단한 프로그램을 작성하더라도, 코드 100줄은 쉽게 넘어간다. 하지만 그 100줄 안에 담긴 변수, 함수들이 서로 연관되어 있다면, 에러가 1개여도, 100줄의 코드를 모두 다..

주의) 여러 글들을 짜집기하여 정리한 글임. - 명령형 : 어떻게 풀어내는지에 집중 (how) - 선언형 : 무엇을 풀어내는지에 집중 (what) 예를들어서 최종적인 목표가 "물을 마시기"라고 해보자. 명령형: 어떻게 (how) 할 것인지를 설명 1. 자리에서 일어난다. 2. 부엌으로 이동한다. 3. 컵과 물을 찾는다. 4. 컵에 물을 부어 마신다. 선언형: 무엇 (what)을 할 것인지를 설명 1. 물을 마셔보자 - 명령형 프로그래밍: 프로그래밍의 상태, 상태를 변경시키는 구문의 관점에서 연산을 설명하는 방식 - 절차지향 프로그래밍 : 수행되어야할 연속적인 계산 과정을 포함하는 방식 - 객체지향 프로그래밍 : 객체들의 집합으로 프로그램의 상호작용을 표현 - 선언형 프로그래밍: 어떤 방법으로 해야하는지를..

.a { margin: 0px; } 위 코드가 이상한가? 아니다. 정상동작한다. 근데 왜 값이 0인경우에 px같은 단위를 붙이지 않는 것을 선호할까? 이번 리뷰어 발리스타님 말씀으로는 webpack에서 번들링 될때, 0에대한 px값이 떼어지는 작업을 거치고, px가 100만개 있다면, 0의 단위를 적어주지 않을 시에, 'p', 'x' 문자열 즉, 200만개의 문자를 최적화한 효과를 볼 수 있다고 한다!

- 호이스팅 : 함수 안에 있는 선언들을 모두 끌어올려서, 해당 함수 유효범위의 최상단에 선언하는 것을 말한다. 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. (실제로 코드가 끌어올려지는 것이 아니라, 자바스크립트 Parser가 내부적으로 끌어올려서 처리) 깊게 알아보기 gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html - 호이스팅을 지양해야하는 이유 코드의 가독성과 유지보수를 위해서 호이스팅이 일어나지 않도록 한다! (let, const를 사용하고, var을 쓰지말자.) (변수, 함수명이 같은 상태로 호이스팅이 발생하면 변수가 함수값을 덮어쓰는 단점도 있다.)