[JavaScript] 함수 (일반 함수와 화살표 함수 / 함수 표현식과 선언식)

1. 함수 선언식과 표현식의 차이

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다. 그래서 선언식을 사용하게 되면 호출보다 선언이 아래에 있어도 호스팅에 의해 작동이 된다.

 

하지만 이러한 상황은 자바스크립트에서는 권장하는 상황이 아니므로 표현식을 권장하고 있다.

 

1) 함수 선언식

function 함수명() {
  구현 로직
}

// 예시
function example() {
  return 'Exapmle';
}
example(); // 'Exapmle'

2) 함수 표현식

var 함수명 = function () {
  구현 로직
};

// 예시
var example = function () {
    return 'Example';
}
example(); // 'Example'

 

2. 화살표 함수와 일반 함수의 차이

화살표 함수는 일반 함수와 아래와 같은 차이를 둔다. 차이가 있다는 말은 아래와 같은 상황에서 선택적으로 화살표와 일반 함수를 써야 한다는 말과 같다고 생각한다. 개인적으로는 화살표 함수를 기본으로 사용하면서 추가적으로 일반 함수가 필요한 순간인 new 생성이나 이벤트 메소드의 콜백, super가 쓰여지는 상황등에서 일반 함수를 쓰는 방향을 쓰고있다. 

•  this를 가지지 않는다.
• arguments를 지원하지 않는다.
• new와 함께 호출할 수 없다.
• 이벤트 메소드에 콜백함수로 쓸 수 없다.
• super가 없다.

1) 화살표 함수 모양

함수 표현식을 좀 더 간결하게 쓸 수 있는 방법이다. 모양은 아래와 같다.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.


// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x  // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.


() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.
                  // 왜냐하면 딸랑 { } 쓰면 얘가 함수 블록인지 객체 블록인지 판단할수 없기 때문이다.


() => {           // multi line block.
  const x = 10;
  return x * x;
};

 

 

 

참고 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-%EC%A0%95%EB%A6%AC