JavaScript 매개변수(parameter)와 콜백함수(Callback function) 개념 알기

이 글을 쓴 이유?

리액트와 노드 공부중 파라미터라는 개념과 콜백함수라는게 잘 와닿지 않고 막히는거 같아서 이 참에 매개변수와 콜백함수를 제대로 공부하고 넘어가야겠다는 생각으로 이 글을 쓴다.

매개변수(parameter)란?

함수에 변수값이 전달되어 처리해야 하는 경우가 있는데, 이렇게 함수에 전달되는 변수 '매개변수'라 한다. 함수의 매개변수 값으로는 모든 자바스크립트의 모든 자료형 형태를을 함수쪽으로 전달할 수 있다.

파라미터 사용 X

function print1() {
  console.log("프린트1")
}

function print2() {
  console.log("프린트2")
}

function print3() {
  console.log("프린트3")
}

...

코드를 보면 알수 있듯이 같은 형식에 함수를 찍어내듯이 하는건 유지보수나, 성능보수 쪽에서도 좋은 쪽이 아니다. 하지만 파리미터를 쓴다면?

파라미터 사용 O

function print(a, b, c, ...) {
  console.log(a, b, c, ...)
}

print("프린트1", "프린트2", "프린트3", ...)

아까전보다 훨씬 보기좋고 유지보수나 성능보수 쪽에서도 아까보다 괜찮은거 같다.

그리고 아까 말했다시피 파라미터를 쓸때는 자바스크립트의 모든 문자열은 다 가능한데 이를 응용하면

function printArr(arr) {
    console.log(arr[0] + '은' + arr[1])
}

printArr(['윤유빈', ` 코딩공부를 하고있다`])


function printObj(obj) {
    console.log(obj.name + '은' + obj.print)
}

printObj({ name: "윤유빈", print: ` 코딩공부를 하고있다.` })

이런식으로 활용할 수 있다. 그러면 이제 콜백함수로 넘어가보자

콜백함수란?

함수의 파라미터로 들어가는 함수, 즉 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.

용도는 자바스크립트에서 순차적으로 코드를 실행하고 싶을 때 쓴다.

간단하게 설명하자면

document.querySelector('.button').addEventListener('click', function () {
    console.log('클릭함')
})

버튼을 클릭(1) 하면 콘솔로그를 출력하는 함수를 실행(2) 해주세요. 라는 뜻이다. 말 그대로 그냥 순차적으로 실행하고 싶을때 쓰는거다.

또다른 예시를 들자면 setTimeout 이 있다.

setTimeout(function () {
    console.log('1초 지남')
}, 1000)

자바스크립트 기본 문법중에 setTimeout라는게 있는데 그걸 쓸때도 뒤에 콜백함수를 붙여서 사용한다.

참고로 다른 곳에서 만든 함수도 콜백함수로 넣을 수 있다. 또 콜백함수를 아무데나 쓸 수 있는게 아니고 넣을수 있는 함수가 따로 있다.

원리가 뭘까?

function print1(a) {
    console.log('먼저 실행')
    a()
}

function print2() {
    console.log('나중에 실행')
}

print1(print2)

코드를 해석하면 print1를 실행해주세요. 근데 print2라는 파라미터를 넣은채로 라는 뜻이다. 이게 원리다.

그러면 이런 생각이 들 것이다.
"그냥 print1() print2() 라고 쓰면 안되나요?"
됩니다. 하지만 협업을 할때나 DB에서 A데이터를 뽑은 다음에 B뽑고 C뽑고 D뽑고 ... 라는 걸 구현 하고싶을 때는 콜백함수를 쓸 수 밖에 없을 것이다. 하지만 너무 많이 쓰면...

db.collection('post').findOne(A, function() {
    db.collection('post').findOne(B, function() {
        db.collection('post').findOne(C, function() {
            db.collection('post').findOne(D, function() {
                db.collection('post').findOne(E, function() {
                    db.collection('post').findOne(F, function() {
                        ...
                    })              
                })
            })          
        })   
    })
})

흔히 말하는 콜백지옥에 빠질 수도 있다... 이렇게 쓰는게 싫다면
Promise라는 걸 쓰거나 async await 라는 걸 쓰면 된다.