JavaScript 화살표 함수 익숙해지기

By꼴레뇨

JavaScript 화살표 함수는 이제 프론트엔드와 백엔드 모두에서 기본 문법처럼 사용됩니다.
그런데 SI 프로젝트를 오래 해왔다면, 아직도 function 키워드가 더 익숙하게 느껴질 수 있습니다.

실제로 많은 레거시 JavaScript 프로젝트는 ES5 시절에 작성되었고, 그래서 화살표 함수보다는 일반 함수 선언이 훨씬 많이 남아 있습니다.

저 역시 화살표 함수로 작성된 코드는 읽을 수는 있지만,
막상 직접 코드를 짤 때는 손이 자연스럽게 function으로 가는 경우가 많았습니다.

하지만 이제는 JavaScript 화살표 함수에도 익숙해져야 할 것 같습니다.
화살표 함수는 짧고, 실수도 줄이고, this 버그도 줄여주는 ES6 이후의 핵심 문법이기 때문입니다.

JavaScript 화살표 함수 문법이 코딩 에디터 화면에서 식물처럼 자라나는 일러스트와 함께 'JavaScript 화살표 함수 익숙해지기'라는 제목이 적힌 블로그 썸네일 이미지

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

JavaScript 화살표 함수(Arrow Function)는 함수를 더 짧은 문법으로 표현하는 방식입니다.

가장 기본적인 비교부터 보겠습니다.

기본 문법 비교

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

// 화살표 함수
const add = (a, b) => {
  return a + b;
};

더 줄일 수도 있습니다.

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

return과 {}가 생략되었습니다. 한 줄짜리 함수에서는 이 방식이 매우 많이 쓰입니다.

JavaScript 함수 표현식과 화살표 함수의 관계

화살표 함수는 함수 선언문이 아니라 함수 표현식입니다.

function hello() {
  console.log("hello");
}

위 코드는 선언문이고,

const hello = function () {
  console.log("hello");
};

이것은 함수 표현식입니다.
화살표 함수는 바로 이 형태를 더 줄인 것입니다.

const hello = () => {
  console.log("hello");
};

즉, 화살표 함수 = 짧게 쓴 함수 표현식이라고 이해하면 가장 쉽습니다.

this가 JavaScript 화살표 함수에서 특별한 이유

JavaScript 화살표 함수가 중요한 가장 큰 이유는 this 동작이 다르기 때문입니다

일반 함수의 this

const user = {
  name: "admin",
  sayHello: function () {
    console.log(this.name);
  }
};

user.sayHello(); // "admin"

이것은 정상적으로 동작합니다.
하지만 콜백이 되면 문제가 생깁니다.

const user = {
  name: "Tom",
  sayHello: function () {
    setTimeout(function () {
      console.log(this.name);
    }, 1000);
  }
};

user.sayHello(); // undefined

this가 window를 가리키기 때문입니다.

화살표 함수로 해결

const user = {
  name: "admin",
  sayHello: function () {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

user.sayHello(); // "admin"

화살표 함수는 자기만의 this를 만들지 않습니다. 바깥 스코프의 this를 그대로 사용합니다.
이 특성 때문에 React, Vue, 이벤트 핸들러, Promise에서 화살표 함수가 거의 기본 문법처럼 쓰입니다

실무에서 가장 많이 쓰는 화살표 함수 패턴

배열 처리

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8]
const even = numbers.filter(n => n % 2 === 0); // [2, 4]
const sum = numbers.reduce((a, b) => a + b, 0); // 10

이 문법이 익숙해지면 JavaScript 코드가 훨씬 읽기 쉬워집니다.

Promise와 비동기 처리

fetch("/api/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

여기서 function(response)를 쓰거나 별도로 함수를 만들어서 함수명만 넣는 방식으로 쓰는 사람이 바로 저입니다. 이제는 위와 같이 화살표 함수로 깔끔하게 하려고 합니다.

물론 화살표 함수가 무조건 정답은 아닙니다. 처리해야 할 작업이 많으면 당연히 별도로 함수를 만들어서 함수명만 넣는 방식이 나을 겁니다.

비교를 위해 제가 흔하게 접하는 옛날 방식 코드들도 아래에 넣어 봤습니다.

옛날 방식(function 키워드를 직접 사용한 버전)

fetch("/api/data")
  .then(function(response) {
    return response.json(); // function 키워드는 return을 명시해야 합니다.
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

옛날 방식(함수를 별도로 정의하여 이름만 넣은 버전)

// 1. 함수들을 별도로 정의
function handleResponse(response) {
  return response.json();
}

function logData(data) {
  console.log(data);
}

function handleError(error) {
  console.error(error);
}

// 2. fetch 실행 시 함수 이름만 전달
fetch("/api/data")
  .then(handleResponse)
  .then(logData)
  .catch(handleError);

화살표 함수가 안 어울리는 경우도 있다.

모든 경우에 화살표 함수가 좋은 것은 아닙니다.

const user = {
  name: "admin",
  sayHello: () => {
    console.log(this.name);
  }
};

user.sayHello(); // undefined

이유는 this가 객체가 아니라 바깥 스코프를 보기 때문입니다.
객체 메서드에는 여전히 function이 더 안전합니다.

const user = {
  name: "admin",
  sayHello: function() {
    // 여기서 this는 user 객체를 가리킵니다.
    console.log(this.name);
  }
};

user.sayHello(); // 출력: "admin"

JavaScript 화살표 함수, 이제는 선택이 아니라 기본이다.

JavaScript 화살표 함수는 단순히 문법을 줄여주는 기능이 아닙니다.
this 문제를 줄이고, 콜백과 비동기 코드를 훨씬 안정적으로 만들어 줍니다.

레거시 SI 프로젝트에서는 아직 function이 많을 수 있지만,
새로 작성하는 코드에서는 화살표 함수가 표준이라고 생각하는 것이 좋습니다.

조금만 익숙해지면,
오히려 function을 쓰는 코드가 더 답답하게 느껴질 것입니다.

참고 자료

👉 MDN Web Docs – Arrow Functions
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Similar Posts

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다