Web-Frontend/JavaScript (13) 썸네일형 리스트형 [JS] async & await async & await 콜백 지옥 현상을 해결하기 위해서 프로미스로 비동기 처리를 하더라도 여러 개의 프로미스가 then을 통해 체이닝되며 코드의 가독성이 저하되는 것을 알 수 있다. 이때, async와 await를 사용하여 더욱 편리하고 가독성있는 코드를 작성할 수 있다. async와 await 사용법 함수 앞에 async를 붙이면 해당 함수는 자동적으로 프로미스를 반환하는 함수가 됨 비동기로 처리되는 부분에 await를 붙이면 해당 프로미스가 끝날 때까지 대기 (동기적으로 처리) await은 async가 붙은 함수 안에서만 사용 가능 async 사용 예제 function helloAsync() { return new Promise((resolve) => { resolve("helloAsync"); .. [JS] 프로미스(Promise) 콜백 지옥 function fn() { setTimeout(() => { console.log('하나'); setTimeout(() => { console.log('둘'); setTimeout(() => { console.log('셋'); }, 0); }, 0); }, 0); } fn(); // 결과 순서 => '하나', '둘', '셋' 자바스크립트는 비동기 처리를 위해 콜백함수를 사용하는데 콜백함수를 반복적으로 사용하는 경우에 콜백 지옥에 빠지게 된다. 콜백 지옥 현상은 코드의 가독성을 떨어뜨리기 때문에 이러한 콜백 지옥을 탈출하기 위해서 프로미스를 사용한다. 프로미스(Promise) 비동기 처리에 사용되는 객체 콜백 지옥 현상이 일어나지 않아 코드의 유지 보수성이 증가 비동기 처리 시점을 명확하게 표.. [JS] 동기와 비동기 동기(Synchronous) 순차적으로 태스크를 수행 어떤 작업이 수행중이라면 뒤의 작업은 대기 상태 즉, 블로킹이 발생 비동기(Asynchronous) 병렬적으로 태스크를 수행 동기 방식과 달리 완료 순서가 보장되지 않음 자바스크립트는 기본적으로 한 번에 하나의 작업을 수행하는 동기식 언어이다. 그것은 자바스크립트 엔진의 구조를 이해하면 알 수 있다. 자바스크립트 엔진은 메모리 힙과 콜 스택으로 구성된다. 메모리 힙은 변수와 객체의 메모리 할당을 담당하는 곳이며 콜 스택은 함수가 호출이 될 때마다 순서대로 쌓이는 곳이다. 가장 최근에 쌓인 것부터 실행되어 종료되기 때문에 LIFO 구조이며 동기적으로 동작한다. 자바스크립트의 비동기적 실행 기본적으로 동기적으로 동작하는 자바스크립트지만 웹 브라우저의 성능.. [JS] 자바스크립트 문법 확장 Truthy & Falsy - 자바스크립트는 boolean 타입이 아닌 값을 Truthy(참 같은 값), Falsy(거짓 같은 값)으로 구분한다. - 따라서 조건문이나 반복문의 제어문에서 Truthy는 true로, Falsy는 false로 암묵적 형 변환이 일어난다. - Falsy로 분류 되는 값은 다음과 같고 그 외 값들은 코두 Truthy로 분류된다. - null, undefined, 0, NaN, " " (빈 칸) const getName = (person) => { if (!person) { return "객체가 아닙니다."; } return person.name; }; let person; // undefined const name = getName(person); console.log(name.. [JS] JavaScript 문법 정리 자바스크립트 연산자 ==(!=) 와 ===(!==)의 차이 - == 은 타입에 상관없이 값만 같은지 비교, ===은 타입까지 같은지 비교 ?? (NULL 병합 연산자) - ??의 왼쪽 피연산자가 null이거나 undefine인 경우 오른쪽 연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환 // height가 null이나 undefined인 경우, 100을 할당 height = height ?? 100; 함수표현식 - 변수에 값을 할당하는 것처럼 함수 선언문이 변수에 할당하여 함수를 값처럼 사용하는 것 let sayHi = function() { alert( "Hello" ); }; sayHi(); 호이스팅 - 호이스팅이란 코드를 실행하기 전 변수선언 / 함수선언이 해당 스코프의 최상단으로 끌어 올려진.. 이전 1 2 다음
