김수정 블로그 김수정 블로그

50% 확률로 ‘홀’ 또는 ‘짝’을 반환하는 비동기 작업이 있습니다. 이를 세 번 연속으로 사용하여 그 결과를 쉼표로 구분한 문자열로 받아오려 합니다. 예를 들면 ‘홀, 짝, 홀’, ‘짝, 짝, 홀’과 같은 결과가 3초 후 출력되는 것입니다. 이와 같은 작업을 콜백이 중첩된 코드로 작성해보세요. function getOddEven(callback){ setTimeout(() => { const res = Math.random() { getOddEven((res2) => { getOddEven((res3) => { const fina..

async 함수에 async 키위드를 붙입니다. new Promise... 부분을 없애고 executor 본문 내용만 남깁니다. resolve(value); 부분을 return value; 로 변경합니다. reject(new Error(…)); 부분을 throw new Error(…); 로 수정합니다. async 함수의 리턴 값은 무조건 Promise 프로미스를 기반으로 동작 마치 동기 코드처럼 직관적으로 코딩을 할 수 있음 await await는 async 함수 안에만 사용할 수 있는 특별한 문법 Promise를 반환하는 함수 앞에 await를 붙이면, 해당 Promise의 상태가 바뀔 때까지 코드가 기다림 Promise가 성공 상태 또는 실패 상태로 바뀌기 전까지는 다음 연산을 시작하지 않음 func..

- 콜백 지옥 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); 연속적으로 비동기 코드를 써야 하는 경우 위와 같이 콜백 함수 안에 또 다른 콜백 함수를 넣어야 하는 상황 발생 - 콜백 지옥 횟수가 많을수록 가독성도 낮아지고 직관성이 떨어짐 실전에서는 더더욱 복잡하고 난해해짐 프로미스 promise : (보통 시간이 걸리는) 어떤 과정 이후 주어진 동작을 실행할 것이..

자바스크립트 엔진은 단 하나의 실행 컨텍스트를 갖는 "싱글 스레드"로 동작한다. 하지만, 브라우저엔진의 이벤트루프 동작을 통해 비동기처리가 가능해진다. => 멀티태스킹 기다려야 하는 일( 타이머를 사용하는 작업이나 파일에서 데이터를 읽어오거나 ajax통신과 같은 작업 등 시간을 소요하는 작업)을 브라우저 WepApi에 위임 이 때 끝나면 실행시킬 콜백을 등록해놓고, 위임된 일이 끝나면 그 결과와 콜백을 "태스크 큐" 에 추가 브라우저는 "콜스택" 이 비워질때마다, 태스크 큐에서 오래된 작업을 꺼내와서 해당 작업에 대한 콜백을 실행 이를 "이벤트 루프" 라고 하고, 멀티스레드로 동작하며 비동기 작업이 가능해진다. 동기 vs 비동기 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식..

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 = Object.create(Bird.prototype); // Eagle.prototype = Bird.prototype; // 💡 비교해 볼 것 // 상속 이후 자신의 프로토타입 작성 Eagle..

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원하는 언어 오늘날에는 클래스가 더 널리 사용되지만, 사용하기에 따라 보다 강력하고 효율적 모든 객체는 Prototype을 가짐 - Object : 모든 것의 조상 각 객체의 [[Prototype]]의 [[Prototype]]이 Object 프로토타입 체인 특정 객체에 호출된 프로퍼티가 없다면 프로토타입을 거슬러 올라감 예: Array에는 valueOf가 없지만 그 프로토타입인 Object에는 있으므로 호출 가능 코드로 프로토타입에 접근 1. __proto__ 접근자 사용 : Object.prototype의 프로퍼티 //같은 종류는 프로토 타입 공유 console.log( {}.__proto__ === { x: 1, y: 2 }.__proto__ )..

렉시컬(정적) 스코프 변수나 상수가 코드상 어디에서 지정되었는가에 따라 그 사용 범위를 결정 함수가 코드상 어디에서 정의되었는가에 따라 그 상위 스코프를 결정 호출한 곳을 기준으로 하는 동적 스코프 dynamic scope 와 상반되는 개념 const x = 1; const y = 1; const z = 1; function func1 () { const y = 2; const z = 2; console.log('2', x, y, z); //2 1 2 2 func2(); } function func2 () { const z = 3; console.log('3', x, y, z); //3 1 1 3 } console.log('1', x, y, z) //1 1 1 func1(); 정의된 블록을 기준으로 상위..

이터러블 프로토콜 (Iterable Protocol) 반복, 순회 기능을 사용하는 주체간의 통일된 규격 공통 기능들: for ... of, 스프레드 문법, 배열 디스트럭쳐링 - 이터러블 : 이터러블이란 이터레이터를 반환하는 Symbol.iterator를 프로퍼티 키로 갖는 메서드를 가진 객체 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나, 프로토타입 체인을 통해 상속 받을 수 있음 위 규약을 이터러블 프로토콜, 이터러블 프로토콜을 준수한 객체를 이터러블이라고 함 이터러블은 for...of문으로 순회할 수 있고 스프레드 문법, 구조 분해 할당의 대상으로 사용 가능 키 Symbol.iterator ( well-known 심볼 ) 의 값으로 이터레이터를 반환하는 메서드를 가짐 이..