자바스크립트에서 함수를 선언하는 다양한 방법

자바스크립트에서 함수를 선언하는 방법에는 여러 가지가 있어요. 또한 함수에서 파라미터를 처리하는 다양한 방법과 관련된 개념도 있습니다. 아마 개발을 시작하게 되면 가장 많이 선언하는 것이 변수 다음으로 함수일텐데 이 부분도 굉장히 중요한 부분이니 꼭 숙지하시길 바랍니다!

1. 함수 선언식 (Function Declaration)

• 형식: function 함수이름(매개변수) { 실행할 코드 }
• 가장 전통적인 방법으로, 함수 이름을 사용하여 정의합니다.

function greet(name) {
  console.log("Hello, " + name);
}
greet("Alice"); // "Hello, Alice"

2. 함수 표현식 (Function Expression)

• 형식: const 변수명 = function(매개변수) { 실행할 코드 };
• 함수를 변수에 할당하는 방법입니다. 함수 이름이 없는 익명 함수가 될 수 있습니다.

const greet = function(name) {
  console.log("Hello, " + name);
};
greet("Bob"); // "Hello, Bob"

3. 화살표 함수 (Arrow Function)

• 형식: const 변수명 = (매개변수) => { 실행할 코드 };
• 간결하게 함수를 정의하는 방법입니다.

⭐ 중요: 화살표 함수는 this 키워드의 동작 방식이 다릅니다. 자세한 내용은 이후 설명에서 다룹니다.

4. 생성자 함수 (Constructor Function)

• 객체를 생성할 때 사용하는 함수입니다. new 키워드와 함께 호출합니다.

function Person(name) {
  this.name = name;
}

const person = new Person("Dave");
console.log(person.name); // "Dave"

함수에서 파라미터 처리

1. 기본 파라미터 (Default Parameters)

• 파라미터에 기본값을 설정할 수 있습니다.

function greet(name = "Guest") {
  console.log("Hello, " + name);
}
greet(); // "Hello, Guest"
greet("Eva"); // "Hello, Eva"

2. arguments 객체

• 정의: 함수 내부에서 사용할 수 있는 특수 객체로, 함수에 전달된 모든 인수를 배열 형태로 제공합니다. 함수 내에서만 사용할 수 있습니다.
• 제한사항: arguments는 화살표 함수에서 사용할 수 없습니다.

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(10, 20, 30, 40)); // 100

3. 나머지 매개변수 (Rest Parameters, ...args)

• 형식: function 함수이름(...매개변수) { 실행할 코드 }
• 정의: 함수의 마지막 파라미터에 ...을 붙여 사용하며, 나머지 인수를 배열로 받을 수 있습니다. arguments보다 더 유용하고 직관적입니다.
• 특징: 나머지 매개변수는 함수 선언에서만 사용되며, 배열 형태로 모든 추가 인수를 받습니다.

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(10, 20, 30, 40)); // 100

⭐ 중요: 나머지 매개변수 ...args는 무한대로 받을 수 있습니다.

4. 파라미터 생략

• 파라미터가 하나일 때: 파라미터가 하나인 경우, 괄호 ()와 중괄호 {}를 생략할 수 있습니다.

// 일반적 형태
function square(x) {
  return x * x;
}

// 하나의 파라미터를 사용할 때 간결하게 작성
const square = x => x * x;

⭐ 중요: 파라미터가 하나일 때는 괄호와 중괄호를 생략할 수 있지만, 두 개 이상의 파라미터가 있을 경우 괄호를 반드시 사용해야 합니다.