[JS] 함수 선언 방식 vs 함수 표현식

함수 선언 방식: function a() {}

호이스팅(코드의 어느 위치에서든지 함수 호출 가능)

a(); 						// 함수 호출 가능
function a() {}

this 가 동적으로 바인딩된다.

function a() {console.log(this);}
a();                // 일반 호출: 전역 객체 (브라우저에서는 window)
const obj = { a };
obj.a();            // 메서드 호출: obj

함수 내부에서 arguments 객체를 사용 가능

function a() {console.log(arguments);}
a(1, 2, 3);         // [1, 2, 3]

---

함수 표현식: const c = () => {};

호이스팅되지 않는다. (변수 선언 이후에만 함수 호출 가능)

a();          // 'a is not defiend' error occurs
const a = () => {};

선언될 때의 컨텍스트에 this가 정적으로 바인딩

const a = () => {console.log(this);}
a();            // 전역 객체 (화살표 함수는 자신의 this를 가지지 않으므로 상위 스코프의 this를 참조)
const obj = { a };
obj.a();        // 여전히 상위 스코프의 this를 참조

Rest 파라미터를 사용(arguments 객체를 사용 가능 불가)

const a = (...args) => {console.log(args);}
a(1, 2, 3);     // [1, 2, 3]

---

⭐​ 정리

• 호이스팅이 필요한 경우: 함수 선언문 (function a() {})을 사용
• this 바인딩이 중요한 경우: 화살표 함수 (const a = () => {})를 사용하여 상위 스코프의 this를 유지하거나 함수 선언문을 사용하여 this를 동적으로 바인딩
• 간결하고 간단한 함수를 정의할 때: 화살표 함수