JavaScript 함수 선언 방식: function vs const

1. function 키워드

전통적인 함수 선언 방식입니다.

function myFunction() {
  console.log("This is a traditional function.");
}

주요 특징:

• 호이스팅(Hoisting): 함수 선언은 호이스팅되므로 함수가 선언되기 전에 호출할 수 있습니다.

  myFunction(); // This is a traditional function.
  
  function myFunction() {
    console.log("This is a traditional function.");
  }

• 함수 이름: 함수 선언은 이름을 가지며, 그 이름을 사용하여 호출할 수 있습니다.

• 스코프: 함수는 해당 함수가 선언된 스코프에서 전역적으로 사용할 수 있습니다.

2. const를 사용한 함수 표현식

변수에 익명 함수를 할당하는 방식입니다.

const myFunction = function() {
  console.log("This is a function expression.");
};

주요 특징:

• 호이스팅(Hoisting): 함수 표현식은 호이스팅되지 않습니다. 따라서 함수 선언 이후에만 호출할 수 있습니다.

  myFunction(); // ReferenceError: Cannot access 'myFunction' before initialization
  
  const myFunction = function() {
    console.log("This is a function expression.");
  };

• 익명 함수: 변수에 익명 함수를 할당하지만, 함수 이름을 줄 수도 있습니다.

  const myFunction = function namedFunction() {
    console.log("This is a function expression.");
  };

• 스코프: 함수 표현식은 블록 스코프를 가지며, 선언된 블록 내에서만 사용할 수 있습니다.

요약

• 호이스팅: 함수 선언은 호이스팅되지만, 함수 표현식은 그렇지 않습니다.
• 스코프: 함수 표현식은 블록 스코프를 가지며, 함수 선언은 전역 또는 함수 스코프를 가집니다.
• 가독성: 함수 표현식은 변수 할당처럼 보일 수 있어 코드의 가독성 측면에서 차이가 있을 수 있습니다.

예시 코드

호출 가능성의 차이를 보여주는 예시입니다.

// 함수 선언
function declaredFunction() {
  console.log("Declared function called.");
}

// 함수 표현식
const expressedFunction = function() {
  console.log("Expressed function called.");
};

// 함수 호출
declaredFunction(); // "Declared function called."
expressedFunction(); // "Expressed function called."

// 함수 선언 이전 호출 (가능)
hoistedFunction(); // "Hoisted function called."

function hoistedFunction() {
  console.log("Hoisted function called.");
}

// 함수 표현식 이전 호출 (불가능)
try {
  unhoistedFunction(); // ReferenceError: Cannot access 'unhoistedFunction' before initialization
} catch (e) {
  console.log(e);
}

const unhoistedFunction = function() {
  console.log("Unhoisted function called.");
};

위의 예시에서는 function 키워드로 선언된 함수가 호이스팅되지만, const를 사용한 함수 표현식은 호이스팅되지 않음을 보여줍니다.

3. '=>'에 대해서

JavaScript에서 function 키워드와 화살표 함수(=>)의 차이점은 다음과 같습니다:

1. 함수 선언 방식:

   • function 키워드: 일반적인 함수 선언 방식입니다. 이름을 가질 수 있습니다.

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

   • 화살표 함수(=>): ES6에서 추가된 축약된 함수 선언 방식입니다. 익명 함수로, 주로 콜백 함수나 간단한 함수를 작성할 때 사용됩니다.

     const add = (a, b) => {
       return a + b;
     };

     • 한 줄 짜리 함수에서는 중괄호 {}와 return 키워드를 생략할 수 있습니다.

     const add = (a, b) => a + b;

2. this의 차이:

   • function 키워드: 함수가 호출된 컨텍스트에 따라 this가 동적으로 바인딩됩니다. 메소드로 호출된 경우 해당 객체를 가리키고, 단순 함수로 호출된 경우 전역 객체를 가리키게 될 수 있습니다.
   • 화살표 함수(=>): 함수가 선언된 시점의 외부 컨텍스트에서 this가 정적으로 바인딩됩니다. 따라서 화살표 함수 내부에서의 this는 항상 화살표 함수가 선언된 시점의 this를 가리킵니다. 객체의 메소드로 사용할 때 주의가 필요합니다.

3. arguments 객체:

   • function 키워드: arguments 객체를 사용하여 함수에 전달된 모든 인자에 접근할 수 있습니다.
   • 화살표 함수(=>): arguments 객체를 사용할 수 없습니다. 대신, Rest 파라미터를 사용하여 가변 인자를 처리할 수 있습니다.

4. 생성자로서의 사용:

   • function 키워드: new 키워드를 사용하여 생성자 함수로 사용할 수 있습니다. prototype 프로퍼티가 자동으로 설정되어, 상속과 같은 객체 지향 프로그래밍에서 유용합니다.
   • 화살표 함수(=>): 생성자 함수로 사용할 수 없습니다. new 키워드와 함께 사용할 경우 TypeError가 발생할 수 있습니다.

따라서 함수를 선언할 때는 상황에 맞게 function 키워드나 화살표 함수(=>)를 선택하여 사용해야 합니다. 단순한 콜백 함수나 짧은 함수일 경우 화살표 함수를 사용하는 것이 간결하고 편리하며, 메소드로 사용할 경우에는 일반적인 function 선언을 고려해야 합니다.