[Web/Javascript] 화살표 함수 vs 일반 함수

안녕하세요.

오늘은 화살표 함수와 일반 함수에 대해 알아보도록 하겠습니다.

 

들어가며

자바스크립트는 다양한 방식으로 함수를 정의할 수 있습니다. 그중 두 가지 주요 방식으로는 일반적인 함수 선언 방식과 ES6(ECMAScript 2015)에서 도입된 화살표 함수 선언 방식입니다. 모두 재사용 가능한 코드 블록을 캡슐화하는 목적을 수행하지만 각자 고유한 특징을 보여줍니다. 두 가지 방식에 어떠한 차이가 있을까요? 천천히 알아보도록 하겠습니다. 

 

자바스크립트의 일반 함수

일반 함수는 두 가지 방식으로 정의할 수 있습니다.

함수 선언 방식

함수 선언방식은 function 키워드를 통해 작성하여 사용하는 방식입니다.

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Poki");

Result

Hello, Poki!

함수 표현 방식

함수 표현 방식은 function 키워드를 통해 작성하는 것은 함수 선언 방식과 동일하지만 함수를 변수에 할당합니다.

const sayHi = function(name) {
  return "Hi, " + name;
}

const message = sayHi("Poki");
console.log(message);

Result

Hi, Poki

자바스크립트 일반 함수의 주요 특징

고유한 this키워드의 바인딩
이 값은 함수가 호출되는 콘텍스트를 참조합니다. 
암시적인 arguments 객체 제공
이 객체는 함수에 전달된 인수를 포함하는 배열과 유사한 객체입니다.
생성자로 사용 가능
new 키워드를 사용하여 특정 프로토타입 체인을 가진 객체를 생성하는 생성자로 사용될 수 있습니다.

자바스크립트 화살표 함수

ES6에서 소개된 화살표 함수 표현식은 일반적인 함수 선언보다 더 간결한 구문을 제공하여 종종 더 깨끗하고 가독성이 높은 코드를 만듭니다. 화살표 (=>)를 사용하여 함수의 정의를 나타냅니다. 

한 줄 표현 방식

중괄호를 사용하지 않고 Return 값 또는 수식을 정의합니다.

const double = (x) => x * 2;
const result = double(5);
console.log(result);

Result

10

일반적인 표현 방식

const greet = (name) => {
    return "Hello, " + name + "!";
};
console.log(greet("Poki"))

Result

Hello, Poki!

자바스크립트 화살표 함수의 주요 특징

렉시컬 스코핑 this 키워드 바인딩
렉시컬 스코핑에 의해 this 키워드 바인딩을 상속받으므로 객체 메서드 내 콜백 함수에 적합합니다.
한 줄 함수의 암시적 반환
함수 본문이 한 줄로 표현되며 이는 반환값을 암시합니다.
arguments 객체 없음
일반 함수에 있는 기본 제공 arguments 객체가 없습니다. 
생성자에 적합하지 않음
new 키워드와 함께 직접 생성자로 사용될 수 없습니다.  

일반 함수를 사용해야 할 때

객체 내 메서드로 정의할 때
this 바인딩에 대한 더 많은 제어를 제공하여 필요한 경우 명시적으로 설정하여 사용할 수 있습니다.
동적으로 this 바인딩이 필요할 때
this 바인딩의 동적 조작이 필요한 경우 화살표 함수에 비해 더 많은 유연성을 제공합니다.
arguments 객체가 필요할 때
함수 내에서 arguments 객체에 액세스해야 하는 경우 일반 함수가 필수입니다. 
생성자 함수로 사용할 때
특정 프로토타입 체인을 가진 객체를 생성하려면 new 키워드와 함께 일반 함수를 사용하는 것이 여전히 권장되는 접근 방식입니다.

const person = {
  name: "Poki",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // 출력: Hello, my name is Poki

화살표 함수를 사용해야 할 때

콜백 함수로 사용될 때
이벤트 리스너, 비동기 작업(예: setTimeout 또는 fetch) 및 복잡한 고차 함수(함수를 조작하는 함수)의 콜백 함수로 사용하여 일반 함수보다 짧고 가독성 높은 코드 블록 구성이 가능합니다.
이벤트 리스너를 연결할 때
DOM 요소에 이벤트 리스너를 연결할 때 this가 이벤트 처리기 내에서 예상된 요소를 참조하도록 하여 쉽게 이벤트 처리가 가능합니다.
간결한 코드 블록 구성을 원할 때
짧고 간단한 함수의 경우 간결한 구문으로 구성하여 가독성을 향상시킬 수 있습니다.

// 화살표 함수를 사용한 이벤트 리스너
button.addEventListener("click", () => console.log("Button clicked!"));

// 고차 함수에서 화살표 함수 사용
const numbers = [1, 2, 3];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // 출력: [2, 4, 6]

결론

화살표 함수와 일반 함수는 모두 자바스크립트에서 중요한 역할을 합니다. 각각의 고유한 특징을 이해하고 상황에 적합한 함수 유형을 신중하게 선택함으로써 더 깨끗하고 가독성이 높은 자바스크립트 코드를 작성할 수 있습니다.

요약

기능	일반 함수	화살표 함수
this 바인딩	함수 호출 방식에 따라 결정	주변 범위 컨텍스트로부터 상속됨
arguments 객체	사용 가능	사용 불가
생성자	new 키워드를 사용하여 사용 가능	사용 불가

FAQ

화살표 함수와 일반 함수의 성능 차이가 있나요?

대부분의 자바스크립트 엔진에서 화살표 함수와 일반 함수의 성능 차이는 무시할 만큼 적습니다. 그러나 성능이 중요한 코드 부분에서 과도하게 화살표 함수를 사용하면 실행 속도에 영향을 줄 수 있습니다.

화살표 함수는 일반 함수처럼 호이스팅 되나요?

아니요, 화살표 함수는 일반 함수처럼 호이스팅 되지 않습니다.

레퍼런스

Mozilla - Arrow Functions

Javascript Info - Arrow Functions