#10 함수 표현식과 화살표 함수

앞서 배운 함수에 대해 다시 한번 짚고 가보자

function sayHello() {
  console.log("Hello");
}

sayHello();

• function 키워드를 사용해 함수를 정의
• 함수 이름 sayHello 가지고 있으며
• 위치에 상관없이 호출이 가능

이 처럼 함수를 정의하는 것이 함수 선언문 이다.

---

함수 표현식

함수는 값(value) 이기 때문에 변수에 담을 수 있다.

const sayHello = function() {
  console.log("Hello");
};

sayHello();

• 함수를 변수에 저장
• 함수 이름이 없다
• 변수에 할당된 이후에만 호출 가능

이러한 방식이 함수 표현식이다.

---

함수 선언문 vs 함수 표현식

함수 선언문

sayHello();

function sayHello() {
  console.log("Hello");
}

• 함수 선언문 방식은 선언 전에 호출이 가능하다.

함수 표현식

sayHello();

let sayHello = function() {
  console.log("Hello");
};

• 에러 발생
• 변수에 함수가 할당되기 전에 호출되었기 때문

이를 호이스팅 차이 라고 한다

• 함수 선언문: 함수 전체가 미리 등록됨
• 함수 표현식: 변수만 미리 생성되고 함수는 할당되지 않음

---

화살표 함수

함수 표현식을 더 짧게 쓰기 위한 문법이다.

 

다음과 같은 코드가 있다고 하자.

let add = function(num1, num2) {
  return num1 + num2;
};

화살표 함수로 바꾸면

let add = (num1, num2) => {
  return num1 + num2;
};

이렇게 작성 가능하다.

 

위 코드는 return 문만 있기 때문에 더 축약이 가능하다

let add = (num1, num2) => num1 + num2;

• {} 제거
• return 제거

그 외에 매개변수가 하나일 경우 

let sayHello = name => {
  console.log(name);
};

• 소괄호 () 생략이 가능

매개변수가 없을 경우

let showError = () => {
  alert("error!");
};

• 소괄호 () 반드시 필요

---