← 목록

ES6 Arrow Functions 간단히 이해하기 🎯

작성: 2025년 06월 17일읽기: 약 2분
GPTLLM

ES6 Arrow Functions, 즉 화살표 함수는 JavaScript에서 함수를 더 간단하고 직관적으로 작성할 수 있게 해줍니다. 이 기능은 특히 웹 개발에 관심이 있는 주니어 개발자들에게 유용한 도구입니다.

화살표 함수란 무엇인가요?

화살표 함수는 기존의 함수 표현 방식을 더 짧고 간결하게 만들어 줍니다. 이 함수는 function 키워드 없이도 함수를 선언할 수 있게 해주며, => 기호를 사용합니다.

기본 구조

const functionName = (parameters) => {
  // 함수 로직
};

예시: 전통적인 함수 vs 화살표 함수

전통적인 함수:

const add = function(a, b) {
  return a + b;
};

화살표 함수:

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

화살표 함수를 사용하면 function 키워드를 쓰지 않아도 되고, 함수의 본문이 한 줄이라면 중괄호와 return 키워드도 생략할 수 있습니다.

화살표 함수의 장점

  1. 간결성: 코드가 더 짧고 읽기 쉬워집니다.
  2. this 바인딩: 화살표 함수는 자신만의 this를 생성하지 않습니다. 따라서 외부 함수에서 this 값을 그대로 사용할 수 있어, 특히 이벤트 핸들러나 콜백 함수에서 유용합니다.

this 바인딩 예시

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // 여기서 `this`는 Person 객체를 가리킵니다.
  }, 1000);
}

const p = new Person();

이 예시에서 화살표 함수 덕분에 setInterval 내부의 this가 Person 객체를 정확히 가리키게 됩니다.

결론

ES6 화살표 함수는 JavaScript에서 함수를 작성하는 더 간결하고 효율적인 방법을 제공합니다. 코드를 더 짧고 읽기 쉽게 만들며, this 바인딩에 관한 혼란을 줄여줍니다. 주니어 개발자 여러분, 화살표 함수를 사용하여 코드를 더 깔끔하고 효율적으로 만들어 보세요! 🚀