[JavaScript] 화살표 함수 (Arrow Function)

1. 화살표 함수(Arrow Function) 란?

자바스크립트의 화살표 함수(arrow function)는 ES6에서 도입된 함수 표현식의 간단한 형태입니다. 화살표 함수는 function 키워드 대신 화살표(=>)를 사용하여 함수를 선언합니다. 이를 통해 함수를 더 간결하게 작성할 수 있습니다.

 

화살표 함수의 구문 예시

1. 기본구문

const 함수명 = (매개변수) => {
  // 함수의 내용
};

 

2. 매개변수가 하나인 경우

const square = x => x * x;
console.log(square(5)); // 출력: 25

 

3. 매개변수가 여러개인 경우

const sum = (a, b) => a + b;
console.log(sum(3, 4)); // 출력: 7

 

4. 함수내용이 한줄인 경우

const greet = name => console.log(`안녕하세요, ${name}님!`);
greet('Kyle'); // 출력: 안녕하세요, Kyle님!

 

* 화살표 함수는 주로 익명 함수로 사용되며, 다른 함수의 매개변수로 전달되거나 콜백 함수로 사용될 때 유용합니다.

또한, 함수 내부에서 this의 바인딩이 자동으로 처리되어 전역 객체에 바인딩 되지않는 특징도 있습니다.

 

2. 화살표 함수와 일반함수의 차이점

화살표 함수(arrow function)와 일반 함수의 주요한 차이점은 다음과 같습니다:

1. 문법적인 간결성: 화살표 함수는 함수 표현식을 더 간결하게 작성할 수 있습니다. function 키워드 대신에 화살표(=>)를 사용하여 함수를 선언합니다.
2. this 바인딩: 화살표 함수는 자신만의 this 바인딩을 생성하지 않고, 주변 범위의 this 값을 그대로 사용합니다. 일반 함수는 자신이 호출된 객체를 가리키는 this 값을 생성합니다. 이로 인해 화살표 함수는 this를 사용하는 함수 내에서 발생하는 오류를 방지할 수 있습니다.
3. arguments 객체: 화살표 함수는 arguments 객체를 가지지 않습니다. arguments 객체는 함수 내부에서 함수에 전달된 인수들을 담고 있는 유사 배열 객체입니다. 화살표 함수에서는 대신 나머지 매개변수(rest parameters)를 사용하여 가변 인자를 처리할 수 있습니다.
4. 생성자 함수로 사용할 수 없음: 화살표 함수는 생성자 함수로 사용할 수 없습니다. 생성자 함수는 객체를 생성하기 위해 new 연산자와 함께 호출되며, this를 사용하여 새로운 객체를 초기화합니다. 화살표 함수는 this를 가지지 않기 때문에 생성자 함수로 사용할 수 없습니다.

이러한 차이점들을 고려하여, 화살표 함수와 일반 함수를 적절히 선택하여 사용해야 합니다.

화살표 함수는 주로 익명 함수로 사용되거나, 간결한 함수 표현식을 작성할 때 유용하며, this 바인딩과 arguments 객체를 사용하지 않는 상황에서 더 편리하게 사용할 수 있습니다.

 

3. 화살표 함수를 사용하는 경우와 안하는 경우

1. 화살표 함수를 사용하는 경우:

• 코드의 간결성을 추구할 때: 화살표 함수는 함수 표현식을 더 간결하게 작성할 수 있어, 코드를 더 읽기 쉽고 간결하게 만들어 줍니다.
• this 바인딩 처리: 화살표 함수는 자신만의 this 바인딩을 가지지 않고, 주변 범위의 this 값을 그대로 사용합니다. 이로 인해 this를 사용하는 함수 내에서 발생하는 오류를 방지할 수 있습니다.

2. 화살표 함수를 사용하지 않는 경우:

• 메소드 정의: 객체의 메소드를 정의할 때에는 일반 함수를 사용하는 것이 일반적입니다. 이는 메소드 내부에서 this를 사용해 객체의 속성에 접근하거나 수정하기 위해서입니다.
• 생성자 함수: 화살표 함수는 생성자 함수로 사용할 수 없습니다. 생성자 함수는 객체를 생성하기 위해 new 연산자와 함께 호출되며, this를 사용하여 새로운 객체를 초기화합니다. 화살표 함수는 this를 가지지 않기 때문에 생성자 함수로 사용할 수 없습니다.

따라서 화살표 함수와 일반함수를 적절히 선택하여 사용해야한다.

 

마지막으로 한가지 더 예시를 추가해보면,

// 숫자들의 배열을 받아 각 숫자를 제곱한 새로운 배열을 반환하는 함수
const squareNumbers = numbers => numbers.map(num => num ** 2);

// 사용 예시
const numbers = [1, 2, 3, 4, 5];
const squared = squareNumbers(numbers);
console.log(squared); // [1, 4, 9, 16, 25]

 

화살표함수를 사용하면 이와같이 간결하고 가독성이 좋은 코드를 작성할 수 있다.