02. 콜백 함수

01. 콜백 함수 이해

• 콜백 함수 : 다른 함수에 매개변수( 인자 )로 전달되는 그 함수 자체
• 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념
• 함수의 매개변수는 null, undefined를 제외한 모든 자료형 전달 가능

Function dessert (count, eat, good){
	count < 3 ? eatDessert() : goodDessert(); }

Function eatDessert(){
	console.log("간식 먹으세요"); }

Function goodDessert(){
	console.log("간식 그만 먹으세요"); }

dessert(4, eatDessert, goodDessert);

위의 코드 마지막 줄을 보면 dessert 함수는 ( 4, eatDessert, goodDessert )를 전달 받는다. 이때 eatDessert, goodDessert는 함수이며, 함수를 매개변수로 전달 받는 것이므로 이 함수들을 콜백함수라 한다.

---

02. 동기 , 비동기 처리

🎈 동기 ( 순차적으로 for문을 처리하고싶다면 동기 이용! )

function time(){

        const 처음= Date.now();
        for(let i=0; i<100000; i++){    
        }
        const 끝= Date.now();
        console.log(끝 - 처음 +'ms');
}

time();
console.log('다음 작업');

코드설명

위의 코드는 time 함수가 100,000번 루프를 돌고 console.log를 통해 for문이 실행되는데 얼마나 걸렸는지 시간을 구할 수 있는 코드이다. 이때, time( )을 호출했으니까 3ms 가 먼저 결과로 나온다. 그 다음으로 '다음 작업' 문자가 결과로 나온다.

이를통해 알 수 있는 것은, for문이 처리될 동안 다른 작업을 처리 하지 않고 온전히 for문만 실행된 후에 console.log가 실행되는 것을 보아 순차적으로 처리되는 동기식 코드이다.

🎈 비동기 ( for문을 처리할 동안 다른 작업을 하고싶다면 비동기 이용! )

function time(){
    setTimeout(()=> {
        const 처음= Date.now();
        for(let i=0; i<100000; i++){    
        }
        const 끝= Date.now();
        console.log(끝 - 처음 +'ms');
    },5000)
}

time();
console.log('다음 작업');

• setTimeout : 특정 코드 또는 함수를 일정시간 지연 후 실행하고 싶을 때 사용하는 함수

• 첫 번째 파라미터에 호출될 콜백함수, 두 번째 파라미터에 지연시간을 받아서 지연시간 뒤에 콜백함수가 실행된다. ( 지연시간의 단위는 ms로 , 1000ms가 1초 )
  
  

코드설명

위의 코드는 setTimeout 비동기 함수가 있으니, time ( ) 호출해도 지연 시간 뒤에 결과값이 나온다. 따라서 '다음 작업'이라는 문자는 time( ) 함수가 지연되는 동안 실행되어 먼저 결과로 나온다.

---

03. 비동기에 callback을 더한다면 🎃

function time(callback){
    setTimeout(()=> {
        const 처음= Date.now();
        for(let i=0; i<100000; i++){    
        }
        const 끝= Date.now();
        console.log(끝 - 처음 +'ms');
        callback();
    },5000)
}

time(() => {
	console.log('작업이 끝났습니다');
});

console.log('다음 작업');

매개변수로 넘겨받은 함수(callback)는 일단 넘겨받고, time이 호출될 때 console.log를 호출해준다.

---

04. 콜백함수를 활용하는 메서드

( 1 ) filter( )

• 조건에 해당하는 요소를 새로운 Array로 반환한다.

( 2 ) map( )

• 리턴값(반환값)이 있다.
• 새로운 Array를 반환한다.

( 3 ) forEach( )

• 리턴값(반환값)이 없다.
• 기존의 Array를 변경한다.

---

filter ( )

function test() {
	const arr1 = [1,2,3,4,5];
    const arr2 = arr1.filter(function(item) {
		return item <= 3;
    });
    console.log(arr2);		//3,4,5
}

---

1. map( ) vs forEach( ) : 새로운 배열을 생성하는가?

• 원래 배열에 있던 요소에 2를 곱하여 반환하는 코드

map( )

const arr = [1,2,3,4,5];
const newArr = arr.map((item)=> item*2);
console.log(newArr);

forEach( )

const arr = [1,2,3,4,5];
const newArr = arr.forEach((item)=> item*2);
console.log(newArr);

---

map과 동일한 코드로 작성했는데 forEach는 왜 undefined일까?

🚨 map은 새로운 배열을 생성하는 반면, forEach는 기존의 배열을 변경시키는 메서드이기 때문에 map과 동일하게 코드를 작성하는 것이 아니다.

const arr = [1,2,3,4,5];
const newArr = [];
arr.forEach((item)=> newArr.push(item*2));
console.log(newArr);

위의 코드처럼 forEach는 빈배열에 바로 채우는 것이 아닌 빈배열을 선언해주고 push로 추가해줘야 한다.

---

2. map( ) vs forEach( ) : 반환하는가?

map( )

const arr = [1,2,3,4,5];
const a = arr.map(function (item){
	return item;	
});

console.log(a);

forEach( )

const arr = [1,2,3,4,5];
const a = arr.forEach(function (item){
	return item;	
});

console.log(a);

🚨다시 정리하면, forEach는 기존의 Array를 변경하고 map은 새로운 Array를 반환한다.

---

05. 콜백지옥

• 콜백함수를 익명함수로 전달하는 과정에서 또 다시 콜백 안에 함수 호출이 되어 코드의 들여쓰기 수준이감당하기 힘들 정도로 깊어지는 현상

• 에러 해결과 유지보수가 어려우며, 가독성이 없다.
  
  

익명함수

함수명 대신 변수명에 함수 코드를 저장하는 구현 방식

let hello = function(){
	document.write("Hello World!");
};

hello(); // Hellow World!

콜백지옥 예시

콜백지옥 탈출 방법

1. 기명함수 사용
2. Promise, Generator, async/await 사용