JavaScript 화살표 함수 예시와 일반 함수 차이

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

JavaScript에서 함수는 중요한 역할을 하는 요소 중 하나입니다. 그 가운데 화살표 함수(arrow function)는 ES6에서 도입되어, 기존 함수에 비해 더 간결하고 읽기 쉬운 문법을 제공합니다. 이 문법은 함수 선언이나 표현식을 더욱 효율적으로 작성할 수 있도록 도와주며, 화살표 기호(=>)를 사용하여 시각적인 구분을 줍니다.

기존 함수와 화살표 함수의 문법 차이

기존의 함수를 정의할 때는 function 키워드와 중괄호를 사용하여 작성했습니다. 예를 들어 두 수를 더하는 일반 함수는 다음과 같습니다:

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

반면, 화살표 함수로 작성할 경우 다음과 같이 문법이 간결해집니다:

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

위의 예시를 보면, 화살표 함수는 함수 본문의 내용이 하나의 표현식으로 되어 있을 경우 중괄호와 return 키워드를 생략할 수 있는 장점이 있습니다.

화살표 함수의 사용법

화살표 함수는 다양한 형식으로 작성될 수 있습니다. 매개변수의 개수가 하나일 경우, 괄호를 생략할 수 있고, 매개변수가 없을 경우 빈 괄호를 사용해야 하며, 여러 개일 땐 반드시 괄호로 감싸줘야 합니다.

• 매개변수가 없는 경우: () => { ... }
• 매개변수가 하나인 경우: param => { ... }
• 여러 개의 매개변수를 사용할 경우: (param1, param2) => { ... }

간단한 예시로 알아보며

예를 들어, 이름을 받아 인사하는 함수를 화살표 함수로 작성하면 다음과 같습니다:

const greet = name => console.log(안녕하세요, ${name}!);
greet("지민"); // 결과: "안녕하세요, 지민!"

이처럼 화살표 함수는 코드의 가독성을 높이고, 짧고 간결하게 작성할 수 있게 해주는 장점이 있습니다.

this의 동작 방식

화살표 함수의 주요 특징 중 하나는 this 키워드의 동작 방식입니다. 일반 함수 내에서 this는 해당 함수가 호출된 컨텍스트에 따라 결정되지만, 화살표 함수에서는 주변 환경의 this를 캡쳐하여 사용합니다. 그래서, 일반 함수에서의 this가 예상치 못한 방식으로 동작할 때 화살표 함수를 사용하면 훨씬 더 직관적인 코드가 작성됩니다.

function Person() {
  this.age = 0;
  setInterval(function() {
    this.age++; // 일반 함수에서 this가 주체를 가리키지 않음
  }, 1000);
}

위의 예시에서 일반 함수는 this를 window 객체를 가리키게 하여 의도한 대로 동작하지 않지만, 화살표 함수는 아래와 같이 수정할 수 있습니다:

function Person() {
  this.age = 0;
  setInterval(() => {
    this.age++; // 화살표 함수에서 this는 객체를 올바르게 참조
  }, 1000);
}

자주 사용되는 경우

화살표 함수는 주로 다음과 같은 상황에서 많이 활용됩니다:

• 짧고 간결한 표현이 필요한 코드 작성 시
• 클래스의 메서드에서 this를 정확히 참조해야 할 때
• 콜백 함수로 사용될 때

결론

JavaScript의 화살표 함수는 기존의 함수 문법과 비교하여 간결함과 가독성을 높여주는 유용한 도구입니다. this 키워드의 특별한 동작 방식 덕분에 함수의 컨텍스트를 관리하는데도 큰 도움이 됩니다. 따라서 일반 함수와 화살표 함수의 차이점과 각각의 활용 방법을 잘 이해하고, 적절한 상황에서 활용하는 것이 중요합니다. 앞으로 다양한 사례를 통해 화살표 함수를 더욱 깊이 있게 익혀보시기 바랍니다.

자주 찾는 질문 Q&A