JavaScript 함수 선언과 호이스팅

---

JavaScript에서는 함수를 여러 가지 방법으로 정의할 수 있습니다. 함수는 특정 작업을 수행하거나 데이터를 처리하고 값을 반환하는 재사용 가능한 코드 조각입니다. 이번 글에서는 함수 선언 방식과 함께, JavaScript의 중요한 개념인 호이스팅(Hoisting, 끌어 올리기, 들어올려 나르기) 에 대해 알아보겠습니다.

함수 선언 (Function Declaration)

함수 선언은 함수를 정의하는 기본적인 방법입니다. 마치 변수 선언이 변수 이름과 값을 바인딩하는 것처럼, 함수 선언은 함수를 식별자(identifier, 데이터의 항목을 식별하고 데이터의 성질을 표시하기 위해 사용하는 문자의 집합) 에 바인딩합니다.

함수 선언의 구조

출처: code academy-Function Declarations

function 함수이름() {
  // 실행할 코드
}

예제

function greet() {
  console.log('안녕하세요!');
}

greet(); // '안녕하세요!' 출력

함수 선언의 구성 요소

1. function 키워드
2. 함수의 이름(식별자, identifier)
3. 괄호 () (매개변수를 받을 수도 있음)
4. 중괄호 {} 안의 함수 본문(실행될 코드 블록)

함수 선언과 호이스팅 (Hoisting)

자바스크립트에서는 호이스팅(Hoisting, 끌어 올리기, 들어올려 나르기) 이라는 기능 덕분에 함수 선언을 정의하기 전에 호출할 수 있습니다.

예제: 함수 호이스팅

greetWorld(); // 출력: Hello, World!

function greetWorld() {
  console.log('Hello, World!');
}

위 코드에서 greetWorld() 함수를 호출하는 부분이 함수 선언보다 위에 있음에도 불구하고 정상적으로 실행됩니다. 이것이 바로 호이스팅(Hoisting, 끌어 올리기, 들어올려 나르기) 의 효과입니다.

호이스팅의 원리

• 자바스크립트는 실행 전에 함수 선언을 메모리의 최상단으로 끌어 올립니다.
• 따라서 코드에서 함수가 정의되기 전에 호출이 가능해집니다.

하지만 호이스팅을 사용할 때 주의할 점

호이스팅을 이용하면 코드가 예상과 다르게 동작할 수 있습니다. 따라서, 함수 표현식(예: const 함수 = function() {})을 사용하여 호이스팅을 방지하는 것이 좋은 습관입니다.

console.log(myFunc); // 출력: undefined

var myFunc = function() {
  console.log('Hello!');
};

myFunc(); // 실행 가능

이처럼 함수 표현식은 호이스팅되지 않기 때문에, 정의 전에 호출할 경우 오류가 발생합니다.

결론

• 함수 선언은 function 키워드를 사용하여 정의합니다.
• 함수는 식별자(identifier, 데이터의 항목을 식별하고 데이터의 성질을 표시하기 위해 사용하는 문자의 집합) 에 바인딩되며, 여러 번 재사용할 수 있습니다.
• 호이스팅(Hoisting, 끌어 올리기, 들어올려 나르기) 은 함수 선언을 코드 최상단으로 이동시켜, 정의 전에 호출할 수 있도록 만듭니다.
• 하지만 호이스팅은 코드 가독성을 떨어뜨릴 수 있어, 함수 표현식을 사용하는 것이 더 좋은 선택이 될 수 있습니다.

Parameters와 Arguments의 핵심 정리

JavaScript에서 Parameters(매개변수)와 Arguments(인수)는 함수의 입력값과 관련된 중요한 개념입니다. 이를 간단히 정리하면:

1. Parameters (매개변수)

• 함수 선언 시, 함수가 받을 입력값의 자리표입니다.
• 함수 내부에서 변수처럼 사용되며, 함수 호출 시 전달받는 값을 저장합니다.
• 예제:

  function greet(name) {
      console.log(`Hello, ${name}!`);
  }

  여기서 name이 Parameter(매개변수)입니다.

---

2. Arguments (인수)

• 함수 호출 시, Parameters에 전달되는 실제 값입니다.
• 전달된 값은 선언된 Parameters에 순서대로 매핑됩니다.
• 예제:

  greet('Alice'); // Output: Hello, Alice!

  여기서 'Alice'가 Argument(인수)입니다.

---

Default Parameters (기본 매개변수)

ES6에서는 Default Parameters가 추가되어, 매개변수에 기본값을 설정할 수 있습니다. 이를 통해 함수 호출 시 인수가 전달되지 않거나 undefined인 경우에도 기본값을 사용할 수 있습니다.

Default Parameters 사용법

• = 연산자를 사용하여 매개변수에 기본값을 설정합니다.

• 예제:

  function greeting(name = 'stranger') {
      console.log(`Hello, ${name}!`);
  }
  
  greeting('Nick');  // Output: Hello, Nick!
  greeting();        // Output: Hello, stranger!

Default Parameters의 동작

1. 인수가 전달된 경우: 전달된 인수가 매개변수에 할당되어 기본값을 덮어씁니다.

   greeting('Nick');  // 'Nick'이 매개변수 name에 전달

2. 인수가 전달되지 않은 경우: 기본값이 사용됩니다.

   greeting();  // 'stranger'가 기본값으로 사용

Default Parameters의 장점

• 함수 호출 시 인수가 누락되더라도 에러 없이 동작합니다.
• 기본값을 통해 코드의 의도를 명확히 전달할 수 있습니다.

---

전체 요약

• Parameters는 함수 선언 시 설정되는 입력값의 자리표입니다.
• Arguments는 함수 호출 시 Parameters에 전달되는 실제 값입니다.
• Default Parameters를 사용하면, 함수 호출 시 인수가 전달되지 않았을 때 사용할 기본값을 설정할 수 있습니다.

---