🖥️개발/🐥JavaScript

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

주_Y 2025. 6. 8. 18:59

자바스크립트를 학습하거나 사용하다 보면 화살표 함수 (Arrow Function)를 자주 접하게 됩니다!

 

코드가 간결하고 직관적이어서 많은 개발자들이 사용하지만, 기존의 function 키워드로 선언한 함수와는 작동 방식에서 분명한 차이가 존재합니다. 특히 this 키워드의 처리 방식이나 arguments 객체의 유무 등이 개발 할 때 마다 헷갈릴 수 있기 때문에 정확한 이해가 필요합니다!

 

이번 글에서는 자바스크립트의 화살표 함수에 대해 기본 개념부터 활용 예시, 주의사항까지 하나씩 정리해보겠습니다~

 

 

1️⃣ 화살표 함수란?

화살표 함수는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 표현식입니다. 기존의 함수 선언 방식과 달리 function 키워드 없이 간결하게 함수를 작성할 수 있습니다.

 
// 기존 함수 선언 방식
function add(a, b) {
  return a + b;
}

// 화살표 함수 방식
const add = (a, b) => a + b;
  • function 키워드가 생략됩니다.
  • 매개변수가 하나일 경우 괄호 생략 가능
  • 반환문이 한 줄 이라면 return 생략 가능
  • 코드가 간결해지고 가독성이 좋아집니다

하지만 문법이 간단해진 만큼, 몇 가지 중요한 제약 사항도 함께 따라옵니다.

 

 

2️⃣ 화살표 함수에서의 this

화살표 함수의 가장 큰 특징 중 하나는 this가 lexical하게 결정된다는 점입니다.

즉, 화살표 함수는 자신만의 this를 가지지 않고, 자신을 감싸고 있는 외부 스코프의 this를 그대로 사용합니다.

 

예를 들어 일반 함수와 비교하면 아래와 같은 차이가 있습니다.

const obj = {
  name: 'ju',
  sayHi: function () {
    console.log(this.name); // 'ju'
  }
};

obj.sayHi(); // 'ju'
const obj = {
  name: 'ju',
  sayHi: () => {
    console.log(this.name); // undefined
  }
};

obj.sayHi(); // undefined

 

첫 번째 예제를 보았을 때 this는 메서드를 정의한 객체. 즉 obj를 참조하기 때문에 this가 의도한 대로 'ju'로 잘 나오게 됩니다.

 

하지만 화살표 함수로 메서드를 정의한 두 번째 예제에서 this는 obj를 참조하지 않고, 상위 스코프(전역)의 this를 참조하기 때문에 undefined가 출력됩니다.

 

이러한 차이 때문에 화살표 함수는 메서드 정의 시에는 적절하지 않을 수 있습니다.

 

 

3️⃣ 그럼 화살표 함수는 언제 주로 사용 할까?

화살표 함수는 아래와 같은 상황에서 유용하게 사용됩니다.

  • 간단한 콜백 함수를 작성할 때 (ex. map, filter, forEach 등)
  • this 바인딩이 필요 없는 함수를 작성할 때
  • 함수 표현식을 간결하게 작성하고자 할 때

각 상황을 자세하게 설명해보겠습니다 :> 

 

1. 간단한 콜백 함수를 작성할 때

왜 좋을까요?

  • map, filter, forEach 같은 메서드는 콜백 함수를 인자로 받아요.
  • 이때 불필요하게 function 키워드를 쓰는 대신, 화살표 함수로 간결하게 표현할 수 있기 때문이죠!

예시: map을 사용하는 경우

const numbers = [1, 2, 3];

// 일반 함수 사용
const doubled1 = numbers.map(function (num) {
  return num * 2;
});

// 화살표 함수 사용
const doubled2 = numbers.map(num => num * 2);

console.log(doubled2); // [2, 4, 6]

 

✅ 한 줄 처리에 괄호/중괄호 없이 더 깔끔하게 작성할 수 있어요.

 

 

2. this 바인딩이 필요 없는 함수 작성 시

왜 좋을까요?

  • 화살표 함수는 자신만의 this를 가지지 않아요.
  • 그래서 this가 외부 스코프(바깥의 this)를 자동으로 참조하게 돼요.
  • 주로 콜백 내부에서 this를 유지하고 싶을 때 유용해요.

예시: setTimeout에서의 this

function Counter() {
  this.count = 0;

  // 일반 함수: this는 전역 객체(window)나 undefined
  setTimeout(function () {
    this.count++;
    console.log(this.count); // NaN or undefined
  }, 1000);
}

// 화살표 함수: this는 Counter 인스턴스를 그대로 사용
function FixedCounter() {
  this.count = 0;

  setTimeout(() => {
    this.count++;
    console.log(this.count); // 1
  }, 1000);
}

new FixedCounter();

 

✅ 화살표 함수는 this가 바뀌지 않기 때문에 콜백 내부에서 편리하게 사용할 수 있어요!

 

 

3. 함수 표현식을 간결하게 작성할 때

왜 좋을까요?

  • 긴 function 선언 대신 짧은 문법으로 한눈에 보기 쉬운 함수를 만들 수 있어요.
  • 특히 한 줄짜리 로직은 가독성이 매우 좋아져요.

예시: 짧은 로직 함수

// 일반 함수
const add = function (a, b) {
  return a + b;
};

// 화살표 함수
const addArrow = (a, b) => a + b;

console.log(addArrow(3, 4)); // 7
 
 

✅ return문 하나만 있는 함수는 중괄호도 return도 생략할 수 있어요!

 

 

4️⃣ 사용 시 주의할 점

화살표 함수는 편리하지만, 아래와 같은 상황에서는 주의가 필요합니다!!

❌ 메서드 정의에 사용

const user = {
  name: 'Ju',
  greet: () => {
    console.log(`Hello, ${this.name}`);
  }
};

user.greet(); // Hello, undefined

이처럼 객체의 메서드를 정의할 때는 화살표 함수 대신 일반 함수를 사용하는 것이 올바릅니다.

 

❌ 생성자 함수로 사용 불가

const Person = (name) => {
  this.name = name;
};

const p = new Person('Ju'); // TypeError: Person is not a constructor

화살표 함수는 생성자 함수로 사용할 수 없습니다. new 키워드와 함께 사용할 경우 오류가 발생합니다.

 

 

❌ arguments 객체 미지원

화살표 함수 내부에서는 arguments 객체가 존재하지 않습니다.

const logArgs = () => {
  console.log(arguments); // ReferenceError
};

 

이 경우에는 ...rest 문법을 사용하여 매개변수를 대체할 수 있습니다.

const logArgs = (...args) => {
  console.log(args);
};

logArgs(1, 2, 3); // [1, 2, 3]

 

그런데 사실 ...rest 문법은 다음과 같은 장점들이 많기 때문에 오늘날의 코드에서는 ...rest 문법을 더 많이 사용하긴 합니다ㅎㅎ

 

✅ ...rest 문법의 장점

  1. 진짜 배열(Array)이다!
    arguments 객체는 유사 배열로, map, filter 같은 고차 함수들을 직접 사용할 수 없습니다.
    그런데! ...rest로 받은 인자는 실제 배열이기 때문에 배열 메서드를 자유롭게 사용할 수 있습니다.
  2. 가독성과 명확성
    함수 선언부에서 어떤 인자들을 배열로 받을지가 arguments 보다 좀 더 직관적 입니다.

  3. 유연한 매개변수 처리
    고정된 매개변수 외에도 유동적인 수의 인자를 받아야 할 때 매우 유용합니다.
const logUser = (name, ...tags) => {
  console.log(`${name}님이 다음 태그를 등록했습니다:`, tags);
};

logUser("Ju", "개발자", "블로그", "자바스크립트");
// Ju님이 다음 태그를 등록했습니다: ["개발자", "블로그", "자바스크립트"]

 

✨ 요약 정리

 

항목 일반 함수 화살표 함수
this 호출한 주체에 따라 동적으로 결정 상위 스코프의 this를 사용
생성자 함수 사용 가능 불가능
arguments 객체 사용 가능 없음 (대신 ...rest 있음)
 

 

 

 

 

 

 

 

썸네일

 

 

저작자표시 비영리 (새창열림)