동기와 비동기

양성진·2022년 6월 30일

JS

목록 보기

4/5

Synchronous 동기

쉽게 말하면 위에서 아래 순차적인 것을 말한다.
프로그램의 실행 단위를 스레드라고 한다. 이것은 신체로 예를 들면
우리가 강의를 보는 눈 우리가 듣을 수있는 귀라고 생각하면 편하다.
자바스크립트는 싱글 스레드 언어이기 때문에 한번에 한 작업만 실행한다.
그래서 앞선 작업이 끝나야 실행이 된다.

자바스크립트의 동작은 예측하기도 어렵고
생각하는거랑 다르게 움직인다.

Asynchronous 비동기

동기식 방식과는 다르게 먼저 시작된 작업의 완료 여부와는 상관없이 새로운 작업을 시작하는 방식이다.
위 그림 Asynchronous와 같이 작업이 병렬로 배치되어 실행되며 작업의 순서가 확실하지 않아 나중에 시작된 작업이 먼저 끝나는 경우도 발생한다.
이와 같은 방식을 비동기식 처리라 부른다.

비동기 처리에는 무엇이 있을까?

첫번째, callback 함수를 사용한다.

filter라는 Method를 이용해보자.

arr.filter(callback(element[, index[, array]])[, thisArg])

필터는 콜백함수를 받고 콜백은 엘레먼트의 인덱스와 어레이값은 갖고 그값을
넘겨준다.
IsFilter는 값을 [1,2,3].Filter(isFilter)에 넘겨주고
마지막 함수에 넘겨주고 함수를 발동해 For문을 돌리고 값이 나오게끔
작동합니다.

const isFilter = function(ele, index,array){
    console.log(ele)
}
[1,2,3].filter(isFilter)

//callback (array,index)를 넘겨준다.
Array.prototype.filter = function(callback){
    const array = this; //write code

    for (let index = 0; index < array.length; index++) {
        callback(array[index],index,array)
        
    }
}

console.log('1'); // 1번
function setTimeoutWithCallback(callbackFunc){ // 콜백을 받고 이하 함수를 실행
    setTimeout(() =>{
    console.log('2');
    callbackFunc()
},1000)
    
}

setTimeoutWithCallback(()=> console.log('3')) // 2번 -> 콜백으로 보내진다.

// Output: 1,2,3

예를 들어서 만들어 보면
1을 출력하는 함수가 먼저 실해하고
맨 아랫줄 3을 출력하는 콜백을 Function setTimeoutWithCallback에서 callbakcFunc을 인자로 받아서 2를 출력후 마지막에 3을 출력하는 순서로 간다.

두번째는 addEventListener입니다.

Element.addEventListener('click',(e) => console.log(e))

요소를 클릭을 할경우 e를 콜백으로 받아 출력을 합니다.

세번째 promise를 사용한다.

Promise 개체는 비동기 작업의 최종 완료 (또는 실패)와 그 결과 값을 나타낸다.
promise는 다음중 하나의 상태를 가집니다.
대기(pending),이행(fulfilled),거부(rejected)
이행은 연산이 성공적으로 완료했다는 것이고
거부는 실패했다는 뜻이다.
출처 MDN Web Docs

결국 프로미스의 결과는 성공과 실패의 상태 둘중 하나를 갖는다는 것이다.
성공과 실패 전에 대기상태가 있는것이다. 요약하자면
미래의 성공할만한 실패한만한 값을 가지는 비동기 연산을 도우는 객체이다.

성공은 then()이라는 메서드 실패시에는 catch()라는 메서드가 발동 된다.

promise의 처리 흐름도