함수 선언과 호출

함수란?

“보통 함수란 자신의 외부(재귀 함수의 경우 스스로) 코드가 호출할 수 있는 “하위 프로그램”입니다. 함수에 값을 ‘전달’하면, 함수는 값을 ‘반환’할 것입니다.”

• MDN

ex) a와 b를 더해주는 함수 add

function add(a, b) {
  return a + b;
}

add(1 + 3);

위 처럼 함수(add)에 값(a,b)를 전달하면 함수는 a+b의 값을 반환한다. 만약 return을 정해주지 않는 경우 자동으로 undifind가 반환된다.

---

함수 정의

함수를 정의하는 방법에는 함수 선언식과 표현식이 있다.

1. 함수 선언식

• function 키워드

function add(a, b) {
  return a + b;
}

add(1 + 3);

2. 함수 표현식

• function 키워드

var add = function (x, y) {
  return x + y;
};

add(1 + 3);

자바스크립트 ES6부터 arrow function이 등장하게 되었다.

• arrow function

var add = (x, y) => x + y;

화살표 함수는 보다 간결하고 짧은 문법을 제공하며, 함수를 변수에 할당하거나 다른 함수의 인수로 전달하는 등의 일반적인 함수 표현식을 대체할 수 있다.

하지만 function과 용도가 완전 같지 않기 때문에 일반 function을 항상 대체할 수 있는 문법은 아니다.

function과 arrow function은 this 바인딩에 차이가 있어 내가 예측하던 this값과 달라질 수도 있다.

자세한 내용은function과 arrow function의 차이 게시글을 통해 확인 할 수 있다.

---

함수 호출

함수는 선언만으로는 실행되지 않고 호출이 있을 때 비로소 실행된다.

예를 들어 header클래스를 가지는 element를 클릭했을 때 add함수를 실행시키려 한다.

var add = (x, y) => x + y;

document.querySelector(".header").addEventListener("click", 함수);

함수자리에 add를 써야하는지 add()를 써야하는지 헷갈리는 경우가 존재한다.

두 결과는 분명히 다르기에 함수와 함수 호출을 분명히 알고 써야한다.

---

함수와 함수 호출의 구분

함수와 함수 호출을 구분하기에 가장 좋은 방법은 함수 호출을 해당 함수의 return값으로 대체해보는 것이다.

var add = (x, y) => x + y;

document.querySelector(".header").addEventListener("click", add());

add의 매개변수 a,b가 없기 때문에 undifind, 따라서 return undifind로 add() => undifind

document.querySelector(‘.header’).addEventListener(“click”, undifind)를 넣은 것과 같다.

다른 예시로 고차함수일 경우를 알아보겠다.

• 고차함수
  함수를 매개변수로 사용하거나 함수를 반환하는 함수

const onClick = () => () => {
  console.log("click");
};

document.querySelector(".header").addEventListener("click", onClick());

onClick은 고차함수로 () => {console.log(“click”);}를 return하고 있으므로 콜백 함수 자리로 적합하다.

따라서 함수의 호출이라고 함수 자리에 넣으면 안되는 것이 아니라 호출한 함수의 return값을 확인해야한다.

• 추가적으로 고차 함수인 경우 event를 어느 위치에 매개변수로 전달해야하는지 헷갈릴 때도 호출된 함수의 return값으로 변환해서 생각해보면 된다.

// case 1. event가 전달 X
const onClick = (event) => () => {
  console.log("click");
};

document.querySelector(".header").addEventListener("click", onClick());
document.querySelector(".header").addEventListener("click", () => {
  console.log("click");
});

// case 2, event가 전달 O
const onClick = () => (event) => {
  console.log("click");
};

document.querySelector(".header").addEventListener("click", onClick());
document.querySelector(".header").addEventListener("click", (event) => {
  console.log("click");
});