💪 JavaScript. Synchronous, asynchronous w/ 생활코딩

Preface

📌 개발 공부 6개월 차인 to-be 개발자의 자습 blog🙂ﾠFeb 13 ~ 19, 2021

현재 상태
복습하라는 말 많이 들었던 동기, 비동기 강의 학습
(+) 마침 관련 강의를 올려주신 이고잉님!

1. callback function

callback 함수는 다른 함수의 입력 값으로 전달되어서 나중에 호출되는 함수

// 🎵 6글자보다 많은 단어 추출하기
words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

// (1)
newWords = words.filter(element => element.length > 6); // 익명함수
console.log(newWords);
// ⬇️ Output
// ['exuberant', 'destruction', 'present']

// (2)
function newfilter(origin, callback) {
  var result = [];
  for (var i = 0 ; i < origin.length ; i++) {
    var current = origin[i];
    if (callback(current)) {
      result.push(current);
    }
  }
  return result;
}
newWords = newfilter(words, element => element.length > 6);
console.log(newWords);
// ⬇️ Output
// ['exuberant', 'destruction', 'present']

✔️ first class citizen (1급 시민 / 객체)
변수가 될 수 있으면, 변수가 다른 함수의 return 값이 될 수 있으면, 변수가 다른 함수의 입력 값이 될 수 있으면 1급 시민
아니면, 없으면 2급 시민

2. Promise

• "동기적으로 실행된다."
  • 순차적으로 실행되므로 이전 code의 실행이 완료되기 전까지 다음 code가 실행되지 않음
  • 실행 순서를 파악하기 쉬우나 속도가 느릴 수 있음
• "비동기적으로 실행된다."
  • 독립적으로, 자신의 시간표에 맞게, 병렬적으로 실행됨 (이전 code의 실행이 완료될 때까지 기다리지 않음)
  • 순서는 혼란스러울 수 있으나 속도가 빠름
  • 예를 들어, server와 web browser가 통신하는 상황에서 언제 끝날지 모르는 통신이 끝날 때까지 기다리는 게 아니라 통신하는 동안 다른 일을 하고 있다가 통신이 끝나면 callback 함수가 호출되면서 필요한 작업을 그때 (하고 싶을 때) 사용

✔️ ajax
browser와 web server가 page를 reload하지 않고 JavaScript를 통해 소통하는 것
e.g. 검색창에 검색어로 초성, 중성, 종성을 하나하나 누를 때마다 통신함

promise

• 비동기 작업을 처리할 때 그 작업의 성공 여부에 따라 표준화된 방식으로 처리할 때 사용
• .then(), .catch() 두 가지 method를 사용할 수 있음 (둘 다 callback 함수를 받음)
  • promise 함수가 성공적으로 실행되면 .then() method가 response 객체를 전달함
  • promise 함수가 실패하면 .catch() method가 reason 객체로 실패 사유를 전달함
• web browser와 web server가 통신할 때 사용하는 patch API가 promise라는 data type을 사용함 (return함)
  • 비동기 실행일 확률이 높음

nested promise

• .then() 안에 또 .then()...

promise chaining

• promise를 통해 .then()을 바깥으로 연결한 것

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(function(response) {
  return response.json();
  })
  .catch(function(reason) {
    console.log('reason', reason);
  })
  .then(function(data) {
    console.log('data', data);
  });

3. Async, Await

timer(1000, function() {
  console.log('작업');
  timer(1000, function() {
    console.log('작업');
    timer(1000, function() {
      console.log('작업');
    });
  });
});

// ↓

timer(1000)
  .then(function() {
    console.log('작업')
    return timer(1000);
  })
  .then(function() {
    console.log('작업')
    return timer(1000);
  })
  .then(function() {
    console.log('작업')
  })

// ↓

async function run() {
  await timer(1000)
    console.log('작업')
  await timer(1000)
    console.log('작업')
  await timer(1000)
    console.log('작업')
}
run();

async는 함수를 promise로 return해 비동기적으로 실행한다.

new Promise

내가 promise 만들기 (이전까지는 다른 사람이 만든 promise 쓰기)

function job1() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            reject("job1 fail!");
        }, 2000);
    });
}
function job2() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve("job2 ok!");
        }, 2000);
    });
}

job1()
    .then(function(data) {
        console.log("data1", data);
        return job2();
    })
    .catch(function(reason) {
        console.log("reason", reason);
        // return Promise.reject(reason); 다음에 오는 then (job2) 을 실행시키고 싶지 않을 때
    })
    .then(function(data) {
        console.log("data2", data);
    })

all, race

• Promise.all([])
  • 가장 나중에 끝나는 code 다음에 callback 함수가 실행되게 함

function timer(time) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(time);
        }, time);
    });
}
console.time("Promise.all");
Promise.all([timer(1000), timer(2000), timer(3000)]).then(function(result) {
    console.log("result", result); // result (3) [1000, 2000, 3000]
    console.timeEnd("Promise.all"); // Promise.all: 3001.748046875 ms
});

• Promise.race([])
  • 가장 먼저 끝나는 code 다음에 callback 함수가 실행되게 함

function timer(time) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(time);
        }, time);
    });
}
console.time("Promise.race");
Promise.race([timer(1000), timer(2000),timer(3000)]).then(function(result) {
    console.log("result", result); // result 1000
    console.timeEnd("Promise.race"); // Promise.race: 1002.871826171875 ms
});

Endnote

🔗 related documents

MDN - Callback Function
{json} placeholder

🙇 the source of this content

생활코딩
지식지도 서말