바텐더에서 개발자로 바텐더에서 개발자로

I. async 함수 - 프로미스를 기반으로 동작 - 마치 동기 코드처럼 직관적으로 코딩을 할 수 있음 function getMult10Promise (number) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(number * 10); }, 1000); }); } async function doAsyncWorks () { const result1 = await getMult10Promise(1); console.log(result1); const result2 = await getMult10Promise(2); console.log(result2); const result3 = await getMult10Promise(3)..

I. 여러 프로미스를 병렬 처리하기 위한 Promise의 정적 메서드들 ✨예시 코드 // 다섯 주자들이 동시에 질주 // 데드라인(밀리초) 안에 들어오지 못하면 탈락 let DEADLINE = 1450; function getRunPromise (name) { return new Promise((resolve, reject) => { const time = 1000 + Math.random() * 500; setTimeout(() => { if (time < DEADLINE) { console.log(`🚩 ${name} 도착 - ${(time)/1000}초`); resolve({name, time}); } else { reject((`${name} 시간초과`)); } }, time); }); } cons..

I. 콜백 지옥 (callback hell) setTimeout(() => { console.log(1); setTimeout(() => { console.log(2); setTimeout(() => { console.log(3); setTimeout(() => { console.log(4); setTimeout(() => { console.log(5); }, 500); }, 500); }, 500); }, 500); }, 500); ✨연속적으로 비동기 코드를 써야 하는 경우 - 위와 같이 콜백 함수 안에 또 다른 콜백 함수를 넣어야 하는 상황 발생 : 콜백 지옥 - 횟수가 많을수록 가독성도 낮아지고 직관성이 떨어짐 - 실전에서는 더더욱 복잡하고 난해해짐 🏃‍♀️🏃‍♂️🏃 릴레이 예제 - 철수, 영희, ..

I. 동기 (Synchronous) vs 비동기 (Asynchronous) // 동기 짜장면_배달(); 짜장면_먹기_동기식(); 다음_장소로(); // 비동기 짜장면_배달(); 짜장면_먹기_비동기식(); 다음_장소로(); 예를 들어, 위와 같은 코드가 있다고 가정해보자. 동기 방식은, 1. 짜장면 배달 2. 주문자가 짜장면 먹기 (배달부는 다 먹을때까지 기다림) 3. 다 먹으면 배달부가 빈 그릇을 들고 다음 장소로 이동 이런식으로 순서대로 실행하는 것을 볼 수 있다. 이 때, 배달부는 주문자가 짜장면을 다 먹을때까지 아무것도 할 수 없다. 하지만 비동기 방식은, 1. 짜장면 배달 2. 다음 장소로 이동 3. 주문자가 짜장면 다 먹는 시간에 맞춰서 빈 그릇 이렇게 꼭 순서대로 실행되는 것은 아니다. 비동기..

console.log( eagle instanceof Bird,// true bird instanceof Eagle// true );​ function Bird (name, sound) { this.name = name; this.sound = sound; } Bird.prototype.fly = function () { console.log(`${this.name} ${this.sound} 비행중`); } function Eagle (name, sound, prey) { this.name = name; this.sound = sound; this.prey = prey; } Eagle.prototype.hunt = function () { console.log(`${this.name} ${this.pre..

I. 프로토타입 (prototype) 이란? - 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원하는 언어 - 오늘날에는 클래스가 더 널리 사용되지만, 사용하기에 따라 보다 강력하고 효율적 - 다시 함수형 프로그래밍으로 바뀌는 추세기도 하다. 1. 자바스크립트의 모든 객체는 Prototype을 가짐 const obj = {}; console.log(obj); - [[Prototype]] 펼쳐서 살펴볼 것 console.log( obj.toString() ); - 빈 객체임에도 위의 메서드들이 사용 가능한 것은 프로토타입 때문!! II. object - 모든것의 조상 - 아래 각 객체의 [[Prototype]] 의 [[Prototype]] 이 Object 임을 확인 - 각 [[Protoype]] ..

I. 객체의 메서드 종류별 비교 const obj = { // function 선언 함수 func1: function () { return true; }, // 메서드 func2 () { return true; }, // 화살표 함수 func3: () => true } console.log( obj.func1(),// true obj.func2(),// true obj.func3()// true ); - 로그로 출력된 형태 비교 console.log(obj.func1);// ƒ () { return true; } console.log(obj.func2);// ƒ func2 () { return true; } console.log(obj.func3);// () => true - 생성자 역할 수행 여부 fu..

I. this 란? this : "이곳의~" - 기본적으로 자신이 속한 곳을 가리킴 : 문맥 - 함수의 호출 방식에 따라 가리키는 바가 달라짐 : 자바스크립트 특성 1. 전역에서의 this console.log(this); ✨아래의 환경들에서 각각 실행해 볼 것 - 브라우저의 콘솔창 : Window 객체 (globalThis 와 같음) - Node.js 의 REPL : global 객체 (globalThis 와 같음) - .js 문서로 작성 후 실행 : 빈 객체 (Node.js 에서 각 .js 문서들은 이후 배울 모듈로서 실행되기 때문) 2. 함수 안에서의 this 느슨한 모드와 엄격 모드에서 다르게 동작 function func () { console.log(this); // globalThis } f..