2023 - 05 - 27 콜백함수 ; promise, 리팩토링

오늘 할일

1. 4강 마무리, 5강 끝내기. 주차별 문제 다 풀기
2. 개인과제 다시 오늘꼭 하기.
3. 프로그래머스 문제 풀기.
4. 알고리즘 1,2,3강 다시 듣고 블로그 정리하기

 

오늘 배운것

비동기적 작업의 동기적 표현 - promise함수, 리팩토링, 제너레이

 

1. Promise 함수

 

- Promise는 말 그대로 약속 이라는 뜻. 어떤 값이 준비되면 실행할게 라는 약속. resolve 또는reject와 함께 쓰인다.

- new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행된다.
- 그 내부의 resolve(실행) (또는 reject(거절)) 함수를 호출하는 구문이 있을 경우 
resolve(또는 reject) 둘 중 하나가 실행되기 전까지는 다음(then), 오류(catch)로 넘어가지 않는다.
- 따라서, 비동기작업이 완료될 때 비로소 resolve, reject 를 호출한다.

resolve가 실행되기 전까지는 다음으로 넘어가지 않는다. 즉 resolve가 실행되면 then으로 넘어간다.
.then은 promise 괄호가 끝나고 붙인다.

 

setTimeout함수를 활용하여 에스프레소를 1초뒤 생성하도록 만듦.

여기서 resolve(name)은 위 함수에서 이름값을 받음.

new Promise(function(resolve){
    setTimeout(function(){
        var name = "에스프레소"
        console.log(name)
        resolve(name)
    }, 1000);
})

 

그러면 이 promise 함수를 이어 붙이는 법.

 

new Promise(function(resolve){
    setTimeout(function(){
        var name = "에스프레소"
        console.log(name)
        resolve(name)
    }, 1000);
}).then(function(previousName){
    return new Promise(function(resolve){ 
        setTimeout(function(){               
            var name = previousName + ", 아메리카노"
            console.log(name)
            resolve(name)
        }, 1000);
    })
})

// return문은 앞에 new Promise함수를 그대로 다 갖다 붙이고, var name만 변경한다.
// 이렇게 이어붙이는 로직은 그 뒤론 완전 똑같다.

return문은 앞에 new Promise함수를 그대로 다 갖다 붙이고, var name만 변경한다.
이렇게 이어붙이는 로직은 그 뒤론 완전 똑같다.

 

new Promise(function(resolve){
    setTimeout(function(){
        var name = "에스프레소"
        console.log(name)
        resolve(name)
    }, 1000);
}).then(function(previousName){
    return new Promise(function(resolve){ 
        setTimeout(function(){
            var name = previousName + ", 아메리카노"
            console.log(name)
            resolve(name)
        }, 1000);
    })
}).then(function(previousName){
    return new Promise(function(resolve){ 
        setTimeout(function(){
            var name = previousName + ", 카페모카"
            console.log(name)
            resolve(name)
        }, 1000);
    })
}).then(function(previousName){
    return new Promise(function(resolve){ 
        setTimeout(function(){
            var name = previousName + ", 녹차라떼"
            console.log(name)
            resolve(name)
        }, 1000);
    })
})

// 에스프레소
// 에스프레소, 아메리카노
// 에스프레소, 아메리카노, 카페모카
// 에스프레소, 아메리카노, 카페모카, 녹차라떼

 

2. 리팩토링

비효율적인 코드를, 효율적인 코드로 변경하는 작업

계속 반복되는 작업들을 함수화시키기.

 

var addCoffee = function (name) {
    return function(previousName){
        return new Promise(function(resolve){ 
            setTimeout(function(){
              
                var newName = previousName + ", " + name;
                console.log(newName)
                resolve(newName)
            }, 1000);
        })
    }
}
addCoffee("에스프레소")

매개변수 name은 계속 추가해줘서 변경되는 요소 입력 (아메리카노, 카페모카, 카페라뗴..)

반복시켜야 하는 문구에 백틱을 이용해 문자열안에 ${ } 넣을수도 있음.

 

var addCoffee = function (name) {
    return function(previousName){ //
        return new Promise(function(resolve){ 
            setTimeout(function(){
              
                var newName = `${PreviousName}, ${name}` 
                // 백틱을 이용해서 문자열 지정 가능. 그 문자열안에 변수 ${ } 지정 가능.
                console.log(newName)
                resolve(newName)
            }, 1000);
        })
    }
}
addCoffee("에스프레소")

 

삼항연산자를 이용하여, 중복값 제거 가능

(이전에 이름이 있을경우, 추가. 없을경우, 이름을 처음 입력)

 

var addCoffee = function (name) {
    return function(previousName){ //
        return new Promise(function(resolve){ 
            setTimeout(function(){
              
                var newName = PreviousName ? `${PreviousName}, ${name}` : name;
                console.log(newName)
                resolve(newName)
            }, 1000);
        })
    }
}
addCoffee("에스프레소")()
    .then(addCoffee("아메리카노"))
    .then(addCoffee("카페라떼"))
    .then(addCoffee("녹차라떼"));