인프런 커뮤니티 질문&답변

안녕하세요 인프러너님 이정환입니다.

우선 강의에서 설명드렸듯 자바스크립트에서는 함수도 값으로 취급됩니다. 따라서 다음 코드처럼 이미 선언된 함수를 다른 변수에 담는것 또한 역시 가능합니다.

function sub() {
  console.log("hello");
}

const func = sub;
// sub 함수를 func 변수에 저장
// 주의. sub 함수의 결과값을 저장한 것이 아님, 그럴려면 func = sub()로 작성해야 함

위와 같이 함수를 값으로 취급하여 다른 변수에 저장하는 것이 가능하기 때문에, 다음과 같이 매개변수에 함수를 저장하는 것 역시 가능합니다.

function main(value) {}
// 매개변수 value로 sub 함수 저장

function sub() {
  console.log("hello");
}

main(sub);
// main 함수를 호출하면서 인수로 sub 함수 전달

위 예제를 분석해보자면 다음과 같습니다.

• main 함수와 sub 함수가 각각 선언되어 있습니다.

• main 함수를 호출하면서 인수로 sub 함수를 전달합니다.

• 그 결과 main 함수의 매개변수 value에 sub 함수가 저장됩니다.

결과적으로 main 함수에 매개변수 value에는 sub 함수가 저장됩니다. 참고로 이때 이렇듯 다른 함수에 인수로 전달되는 함수를 콜백함수라고 표현합니다.

여기까지 이해가 잘 되셨다면 다음 코드는 쉽게 이해하실 수 있을겁니다.

function main(value) {
  value(); 
}

function sub() {
  console.log("hello");
}

main(sub);

위 코드를 분석하자면 다음과 같습니다.

• main 함수와 sub 함수가 각각 선언되어 있습니다.

• main 함수를 호출하면서 인수로 sub 함수를 전달합니다.

• 그 결과 main 함수의 매개변수 value에 sub 함수가 저장됩니다.

• 호출된 main 함수는 value 변수에 저장된 함수를 호출합니다.

• 그 결과 sub 함수가 호출되어 콘솔에 "hello"가 출력됩니다.

이렇듯 자바스크립트에서는 value() 처럼 매개변수의 이름으로 콜백함수를 호출할 수 있습니다.
그렇다면 만약 다음과 같이 매개변수의 이름을 바꾸면 어떨까요? 바꿔봅시다.

function main(func) {
  func();
}

function sub() {
  console.log("hello");
}

main(sub);

방금전 코드에서 main 함수의 매개변수 이름만 value -> func로 변경했습니다. 그러면 이제 main 함수 내부에서는 value()로 콜백함수를 호출하는게 아니라 func()로 콜백함수를 호출하면 됩니다. 그 외의 달라질 건 전혀 없습니다.

그렇다면 이런 콜백함수는 왜 사용해야 하는걸까요? 굉장히 여러가지 이유가 있지만 가장 핵심적인 이유로는 코드의 재사용성을 높이기 위함 입니다. 이는 제가 직접 작성한 아래 아티클을 보시면 더 쉽게 이해하실 수 있을겁니다.

https://reactjs.winterlood.com/d2ffdbe0-c061-4d52-9d83-d4f39e401680#55daa1fe640449299e2f12e8f49ec0c9

그리고 추가로

그리고 main 함수 안에서

value를 호출하는것과 value()를 호출하는것의 차이가 어떤게 있을까요??
value()를 호출할때는 매개변수로 받은 콜백함수를 호출해서 실행을 하는걸로 이해를 하고 있는데 value를 호출을 하면 아무런 변화가 없는데 value를 호출하는 경우도 자주 보이던데 이렇게 호출을 하는 이유가 무엇일까요?

"value를 호출하는 것과 value()를 호출하는것의 차이가 무엇인지 궁금하다" 라고 하셨는데 이게 무슨 말씀인지 잘 모르겠습니다. 조금만 더 질문을 구체화 해 주시면 감사하겠습니다.

기본적으로 호출(Call)이라는 것은 선언된 함수를 실행하기 위해 func() 와 같은 형태로 함수의 이름과 함께 소괄호를 사용하는 문법을 말하는데요 이 밖의 다른 호출 방법을 말씀하시는건지 궁금합니다.