함수

3.1 함수 선언

함수는 JavaScript에서 가장 기본적인 구조 중 하나야. 코드를 조직하고, 로직을 재사용하고, 복잡한 구조를 만들 수 있게 해줘. 함수 선언, 함수 표현식, 그리고 화살표 함수를 선언하고 사용하는 세 가지 주요 방법을 살펴보자.

함수 선언은 나중에 호출할 수 있는 이름 있는 함수를 만드는 방법이야. 이런 함수들은 그들의 스코프의 상단으로 "호이스팅"되어 코드에서 선언하기 전에 호출할 수 있어.

문법:

    
      function name (arguments) {
        // 함수 내용
      }
    
  

사용 예:

    
      // 함수 선언
      function greet(name) {
        return `Hello, ${name}!`;
      }

      // 함수 호출
      console.log(greet('Alice')); // 출력: Hello, Alice!
    
  

3.2 함수 표현식

함수 표현식은 익명 함수(이름이 없는 함수)를 생성하고 변수를 할당할 수 있어. 이런 함수들은 '떠오르지'(hoisting) 않아서 선언한 후에만 호출할 수 있어.

문법:

    
      const name = function (arguments) {
        // 함수 내용
      }
    
  

사용 예:

    
      // 함수 표현식

      const greet = function(name) {
        return `Hello, ${name}!`;
      };

      // 함수 호출
      console.log(greet('Bob')); // 출력: Hello, Bob!
    
  

3.3 화살표 함수

화살표 함수는 함수를 선언하는 간단한 방법이야, 그리고 부모 스코프의 this 컨텍스트를 유지해 줘. 화살표 함수는 자체 this가 없어서 이벤트 핸들러나 배열 메소드에서 특히 유용해.

문법:

    
      const name = (arguments) => {
        // 함수 내용
      }
    
  

함수가 하나의 매개변수를 받는 경우 괄호를 생략할 수 있어. 함수가 하나의 표현식을 반환한다면 중괄호와 return 키워드를 생략할 수 있어.

예제 1: 전체 표현

    
      // 화살표 함수

      const greet = (name) => {
        return `Hello, ${name}!`;
      };

      // 함수 호출
      console.log(greet('Charlie')); // 출력: Hello, Charlie!
    
  

예제 2: 간단한 표현

    
      // 한 매개변수와 한 표현식이 있는 화살표 함수
      const greet = name => `Hello, ${name}!`;

      // 함수 호출
      console.log(greet('Dana')); // 출력: Hello, Dana!
    
  

3.4 함수 선언 방식 비교

호이스팅 (hoisting):

• 함수 선언: 함수가 호이스팅되어 선언 전에 호출 가능
• 함수 표현식과 화살표 함수: 호이스팅되지 않아서 선언 후 호출 가능

this 컨텍스트:

• 함수 선언과 함수 표현식: 자체 this 컨텍스트를 가짐
• 화살표 함수: 자체 this를 가지지 않고 부모 스코프에서 상속

작성의 편리함:

• 화살표 함수: 더 간결하며 종종 짧은 함수와 콜백에 사용됨