3.17 나를 개빡치게 하는 Promise 🤬
오배이안 🪙
🤯 for in , of , forEach
- for in 문 : 주로 객체의 프로퍼티 키 열거 할 때 사용
for(let key in 객체) {... 수행할 코드...}
- for of 문 : 주로 이터러블 순회에 사용
for(let el of 배열) {... 수행할 코드...}
- 이터러블 : 문자열, 배열, .map , DOM컬렉션 등..
- forEach() : 배열 순회 메서드
Array.forEach(function(value,index,arr))
배열의 각 요소를 돌며 해당 함수 적용
[10, 20, 30].forEach((value, index, array)=>{
console.log(`${index} : ${value}`); // 0 : 10, 1 : 20, 2: 30 출력
})🤯 동기 & 비동기
-
동기적 처리 : 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것 (블로킹)
앞의 동작 때문에 뒤의 동작이 수행 못하고 기다리는 것
-
비동기적 처리 : 특정 코드의 실행이 완료 될 때까지 기다리지 않고 바로 다음 코드가 실행되는 것
-
JavaScript 의 동작 원리
싱글 스레드 기반으로 동작하는 언어라서 동기적으로 작동하게 된다. 그런데 자바스크립트의 런타임 에서 비동기적 처리를 도와주기 때문에 비동기적 처리를 구현할 수 있는 것이다.
-
비동기적 처리의 예 (타이머 관련 API)
- setTimeout(callback , millisecond) : millisecond 시간 만큼 기다린 후에 callback 함수 실행
-
clearTimeout(setTimeout-ID) : setTimeout 함수를 종료시킴
-
setInterval(callback , millisecond) : millisecond 시간 간격으로 callback 함수 반복
-
clearInterval(setInterval-ID) : setInterval 를 종료
🤯 Callback 함수
- Callback 함수 : 다른 함수의 인자로 들어가는 함수를 말한다.
즉 어떤 함수가 실행될 때 같이 안에서 실행되는 함수를 콜백 함수라고 말한다.
콜백함수를 사용함으로 비동기적 처리를 예측가능하게 만들 수 있는 장점이 있다. 하지만 콜백함수를 많이 중첩사용하게 되면 🔥콜백지옥🔥이라고 가독성도 떨어지고 오류가 발생하게되면 어디서 오류가 발생했는지 찾기도 힘들다.
위에서 봤던 setTimeout(callback, millisecond) 함수가 대표적으로 콜백함수와 비동기적 처리를 보여주는 메서드이다.
- Callback Hell (콜백지옥)
보는 것 만으로도 어지럽네 이거 그지 같네 이거 💩
콜백 지옥을 방지하기 위해서( 비동기적으로 작동하는 코드를 제어하기 위해서) Promise👀 객체 가 나왔당
🤬 Promise
promise : 자바스크립트 비동기 처리를 제어하기 위해 사용되는 객체
Promise 는 class 이기 때문에 new 키워드를 통해서 promise 라는 객체를 생성한다.
promise - States (처리 과정)
프로미스는 new Promise() 로 생성하고 종료될 때 까지 3가지 상태(처리 과정) 을 가진다.
Pending(대기)
new Promise()로 메서드를 호출하게 되면 대기(Pending) 상태가 된다.
new Promise()를 호출 할때 콜백함수를 선언할 수 있고, 콜백함수의 인자는resolve,reject이다.
Fulfilled (이행)
콜백함수의 인자 중
resolve()가 호출되면 이행(Fulfilled) 상태가 된다.
오호 빨간 밑줄 보이는가..? 상태(state)를 나타내준다..
자세하게 보면 밑줄 아래에는Result는 해당 promise 객체가 실행되고 나온 값에 대한 정보가 담기는 곳이다! 😎그리고 이행 상태가 되면
then()을 이용해서 처리 결과 값을 받을 수 있다!
then( )의 전달인자에 어떤 값이 들어가는 지 잘 확인해 봐라!!👆
Rejected(실패)
콜백함수의 인자 resolve , reject 중 reject 를 호출하는 상태를 Rejected(실패)라고 한다.
실패 상태가 되면
catch( )를 사용해서 에러난 이유를 받을 수 있다.
정리
resolve( )호출 시 대기상태 ==> 이행상태(Fulfilled), this() 의 로직으로 이동 (this는 resolve 값 사용)
두번째 인자로 에러를 처리할 수 있는 방법이 있지만 catch() 사용 하길!
reject( )호출 시 대기상태 ==> 실패상태(Rejected), catch( )의 로직으로 이동
finally( ): 코드의 resolve (성공) 나 reject(실패) 에 상관 없이 접근가능한 메서드
Promise Chaining
프로미스의 다른 특징으로는 여러개의 프로미스를 연결해서 사용할 수 있다는 것이다.
앞에서
resolve()를 호출해서 this( ) 메서드를 사용하게 되면 this( ) 메서드 호출로 인해 새로운 프로미스 객체가 반환 된다.
진짜 새로운 객체가 생성되는지 알아보자!
맞네잉!🥳
따라서 아래의 사진과 같이 프로미스 체인형식의 코드가 가능한 것이다!
사진을 통해 then( ) 으로 체이닝되는 과정을 이해하면 좋을 거 같다. 💪
Promise.all( )
여러 개의 비동기 작업을 동시에 처리하고 싶을때 사용
인자로는 배열을 받는다.
위 코드를 실행하는 경우 6초 후에 console.log(result) 값을 반환한다.
promise 를 통해 비동기 코드를 동기적으로 제어 했다.! 🤯
1초뒤 promiseOne 실행 -> 2초뒤 promiseTwo 실행 -> 3초 뒤 promiseThree 실행 = 총 6초 걸림이럴 때
promise.all()을 사용하게 되면 동시에 작업을 처리할 수 있기 때문에 3초안에 console.log(result) 값을 반환 할 것이다.
Promise Hell 🔥
promise는 callback 함수 즉, 비동기 코드를 제어할 수는 있지만 promise 또한 여러번 중첩해서 사용하게 되면 promise Hell 이 발생한다.
promise Hell 을 해결하기 위한 방법으로 ES8 에서 👾async/await 👾키워드를 제공하고 있다. 해당 쳅터는 따로 알아보도록 하자!
