[JavaScript] 자바스크립트 - 화살표 함수(Arrow Function)

자바스크립트의 화살표 함수(arrow function)는 ES6에서 도입된 문법으로, 함수를 보다 간결하게 작성할 수 있는 방법이다. 화살표 함수는 기존의 function 키워드를 사용하는 함수 표현식을 대체할 수 있으며, 몇 가지 중요한 차이점이 있다.

 

화살표 함수의 기본 구조

여기에서 functionName은 함수의 이름,
parameters는 매개변수,
=>는 화살표 기호로,
오른쪽에는 함수의 본문이 위치한다.

const functionName = (parameters) => {
  // 함수 본문
}

 

화살표 함수의 특징

• 간결성: 화살표 함수는 function 키워드를 생략하고, 함수 본문이 단일 표현식인 경우 중괄호와 return 문을 생략할 수 있습니다. 예를 들어:이 함수는 a와 b를 더한 값을 자동으로 반환합니다.

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

• this 바인딩의 차이: 화살표 함수는 자체 this 바인딩을 가지지 않습니다. 대신, 화살표 함수는 자신을 포함하는 외부 함수의 this 값을 사용합니다. 이는 메소드 함수나 생성자 함수로는 적합하지 않지만, 일반 함수에서 this의 문맥이 변경되는 것을 방지할 수 있습니다.
• 생성자로 사용할 수 없음: new 키워드를 사용하여 화살표 함수를 생성자로 사용할 수 없습니다. 화살표 함수는 prototype 속성이 없습니다.
• 인수 객체(arguments) 미지원: 화살표 함수 내부에서는 arguments 객체를 사용할 수 없습니다. 대신, 나머지 매개변수(rest parameters)를 사용하여 함수에 전달된 인수를 처리할 수 있습니다.

 

예시

[간단한 화살표 함수]

const greet = name => `Hello, ${name}!`;
console.log(greet("World")); // "Hello, World!"

 

[중괄호와 return 사용]

const getFullName = (firstName, lastName) => {
  return `${firstName} ${lastName}`;
};
console.log(getFullName("Jane", "Doe")); // "Jane Doe"

 

[함수에 객체 리터럴 반환]

const getObject = () => ({ key: 'value' });
console.log(getObject()); // { key: 'value' }

 

 

화살표 함수는 특히 콜백 함수나 함수가 다른 함수에 전달되어야 할 때 유용하게 사용된다. 그러나 this나 생성자, arguments와 관련된 기능이 필요한 경우에는 기존의 function 키워드를 사용하는 함수를 고려해야 한다.