[JavaScript] 익명함수와 화살표 함수 이해하기

2015년, 자바스크립트 ES6 버전이 디벨롭되면서 화살표 함수(arrow function)라는 문법이 생겨났고, 이 화살표 함수를 사용함으로 함수 코드의 작성 시의 간결함과 가독성을 높여주었다.

하지만 화살표 함수가 기존의 함수 작성 문법인 익명 함수(anonymous function)을 완전히 대체하지 못하는데, ES6 이상의 모던 자바스크립트로 학습을 시작한 학습자, 또는 심지어 많은 주니어 개발자들이 이를 모르고 있는 경우가 많아, 이 둘의 특징과 차이점을 정리해보았다. 

 

1. 구문

익명 함수는 'function' 키워드를 사용하여 함수를 작성한다. 함수 이름이 없으며, 변수에 할당하거나 다른 함수의 매개 변수로 전달할 수 있다.

const anonymous = function() {
  // 함수 내용
};

화살표 함수는 '=>'를 사용하여 함수를 작성한다. 화살표 함수는 항상 익명 함수이며, 변수에 할당하거나 다른 함수의 매개 변수로 전달할 수 있다.

const arrow = () => {
  // 함수 내용
};

 

2. 매개 변수

익명 함수와 화살표 함수는 매개 변수를 정의하는 방식이 약간 다르다.

 

익명 함수는 매개 변수를 괄호로 감싸고 쉼표로 구분하여 나열한다.

const anonymous = function(param1, param2) {
  // 함수 내용
};

화살표 함수도 익명 함수와 마찬가지이나 단일 매개 변수인 경우 괄호를 생략할 수 있다.

const arrow = param => {
  // 함수 내용
};

3. return 문

익명 함수는 'return' 문을 사용하여 값을 반환한다.

const anonymous = function() {
  return 'Hello World!';
};

화살표 함수는 값을 반환하기 위해 'return' 문을 사용하지 않을 수 있다. 단일 표현식이 있는 경우, 이를 자동으로 반환한다.

const arrow = () => 'Hello World!';

 

4. 객체 안 함수, this 활용

 

일반 함수는 함수가 호출될 때마다 자신만의 'this'를 생성하고, 이 'this'는 호출하는 방법에 따라 달라진다. 그러나 화살표 함수는 자신의 `this`를 생성하지 않으며, 대신 함수가 정의된 위치에서 상위 스코프의 `this`를 참조한다. 

따라서, 객체 내부에서 화살표 함수를 사용하면 해당 함수 내에서 'this'를 사용할 때 객체 자체를 참조하지 않고, 상위 스코프의 'this'를 참조하게 된다. 그래서 객체 내부에서 화살표 함수를 사용하면 'this'가 객체를 참조하지 않고 'undefined'를 참조하는 문제가 발생한다.

예시를 보자.

 

const myObject = {
  name: 'John',
  sayName: () => {
    console.log(`My name is ${this.name}`);
  }
}

이 경우, 'sayName' 함수에서 'this.name'을 사용하면 undefined가 출력된다. 이는 화살표 함수가 'myObject' 객체의 this를 참조하지 않고, 자신이 생성한 this를 사용하기 때문이다. (상위 스코프를 가르킴)

const myObject = {
  name: 'John',
  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

위의 예시에서 'sayName' 함수는 객체 내부에서 일반 함수로 정의되어 있다. 이 경우 'this'는 객체 자체를 참조하므로, myObject 객체의 name 속성을 정상적으로 참조할 수 있다.