Promise 객체
Frontend/JavaScript
Promise 객체의 필요성자바스크립트에서 비동기 작업을 처리하는 가장 기본적인 방법은 콜백함수를 사용하는 것이다. 자바스크립트 비동기 처리자바스크립트에서 비동기 처리는 여러 작업을 효율적으로 처리하기 위한 핵심 개념이다.동기와 비동기의 차이를 이해하고, 자바스크립트가 싱글 스레드 환경에서 어떻게 비동기 작업을 처리하devmark.tistory.com setTimeout를 이용하면 작업을 비동기적으로 처리할 수 있다. setTimeout은 콜백함수와 ms 단위의 지연 시간을 매개변수로 받는다. 아래는 workA, workB, workC 함수를 비동기 함수로 작성하고, workD는 동기적으로 작성한 예시이다.const workA = (value, callback) => { setTimeout(() => ..
자바스크립트 비동기 처리
Frontend/JavaScript
자바스크립트에서 비동기 처리는 여러 작업을 효율적으로 처리하기 위한 핵심 개념이다.동기와 비동기의 차이를 이해하고, 자바스크립트가 싱글 스레드 환경에서 어떻게 비동기 작업을 처리하는지 알아보자.동기와 비동기동기란?동기(Synchronous) 처리는 작업을 순차적으로 하나씩 처리하는 방식이다. 이전 작업이 완료되어야만 다음 작업을 시작할 수 있다. 스레드와 멀티 스레드작업 처리 방식을 이해하기 위해 먼저 스레드 개념을 알아보자.아래와 같이 workA, workB, workC 3가지 함수가 실행 후 종료되기까지 걸리는 시간이 각각 5초, 3초, 10초라고 가정해보자.const workA = ()=>{ //5초 console.log("workA");}const workB = ()=>{ //3초 co..
spread와 rest
TIL
... 문법은 사용 위치에 따라 spread 또는 rest로 동작한다. spreadspread 연산자는 배열이나 객체를 펼쳐서 개별 요소로 분리한다.사용 시점객체나 배열을 복사하거나 합칠 때함수 호출 시 배열의 요소를 개별 인수로 전달할 때 객체 복사 및 확장const toy = { type: "bear", price: 15000,};const blueToy = { ...toy, color: "blue",};const yellowToy = { ...toy, color: "yellow",};console.log(blueToy); // { type: 'bear', price: 15000, color: 'blue' }console.log(yellowToy); // { type: 'bear', pri..
구조 분해 할당
TIL
구조 분해 할당은 배열이나 객체의 요소 및 프로퍼티들을 분해해 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식이다.배열배열의 구조분해는 인덱스를 이용해 인덱스의 순서대로 변수의 값을 할당한다.let colors = ["green", "blue", "purple"];let [c1, c2, c3] = colors;console.log(c1); // greenconsole.log(c2); // blueconsole.log(c3); // purple선언 분리 할당변수를 먼저 선언하고 나중에 구조 분해 할당으로 값을 할당할 수 있다.let c1, c2, c3;[c1, c2, c3] = ["green", "blue", "purple"];console.log(c1); // greenconsole.log(c2)..
Early Return Pattern
TIL
Early Return Pattern이란?특정 조건을 만족할 경우 바로 return하여 코드의 구조를 단순하게 만들어 주는 패턴이다.조건에 맞는 코드를 실행하면 이후에 작성된 조건들은 무시된다. function func(num) { if (num > 0) { if (num >= 5) { console.log('num의 값이 5보다 크거나 같음'); } else { console.log('num의 값이 0보다 크고 10보다 작음') } } else if (num === 0) { console.log('num의 값이 0임'); } else { console.log('num의 값이 0보다 작음'); }}func(10); // num의 값이 5보다 크거나 같음..