화살표 함수의 특징

Web/JS

화살표 함수의 특징

가나닩 2024. 9. 30. 21:34

화살표함수는 ES6에서 추가된 함수 표현식이다.

기존의 일반 함수 표현식과 함께 사용하여 코드를 좀더 간결하게 하고 일관된 this 바인딩을 제공하기 위해 추가되었다.

화살표함수의 특징은 다음과 같다.

this 바인딩 방식
- lexical scope에서 this를 바인딩한다. 즉, 화살표 함수가 선언된 위치의 this를 그대로 사용한다.
- 일반 함수는 호출되는 시점에 따라 this가 결정된다.
간결한 문법
- 상황에 따라 function 키워드와 중괄호, return 등을 생략할 수 있어 더 짧은 구문 작성이 가능하다.
arguments 객체가 없음
- arguments 객체를 가지고 있지 않아 상위 스코프의 arguments 객체를 참조한다. (일반함수는 arguments 객체를 가지고 있다)
생성자로 사용 불가
- new 연산자를 이용해 생성이 불가능하다. (일반함수는 가능하다)

this 바인딩 방식의 차이로 인해 함수의 사용성이 많이 달라진다.

1. this 바인딩 - 명확한 바인딩과 스코프 일관성 유지

const obj = {
  name: 'John',
  sayName: function() {
    setTimeout(() => {
      console.log(this.name); // 'John'
    }, 1000);
  }
};

obj.sayName();

위 코드에서 화살표 함수는 sayName의 function 일반 함수 내부에 선언되었다. obj.sayName()으로 함수가 호출될때 sayName의 일반 함수는 자신이 어디서 호출됐는지 확인하게되는데 이때 호출된 위치는 obj이므로 sayName의 function은 obj를 this로 갖게된다.

그리고 sayName 함수 내의 화살표 함수는 this를 가지지 않고 상위 스코프의 this를 참조하게 되므로 sayName 함수의 this를 사용하게 된다.

특정 함수 혹은 블록 내에서 일관된 스코프 환경을 유지하고 싶을때 화살표 함수를 사용할 수 있다.

이외에도 이벤트 핸들러나 비동기 함수에서 this를 정확히 처리해야 할때 화살표 함수를 사용하여 this의 바인딩값을 명확하게 할 수 있다.

2. 간결한 문법

function이 생략되는것도 포함하여 화살표 함수의 간결한 표현을 만드는데에는 단일 표현식이 가장 큰 역할을 한다.

조건문의 실행할 내용이 한줄일때 괄호를 생략하는 것처럼 화살표함수도 코드를 줄여 작성할 수 있다. 이를 단일표현식 화살표함수라고 한다.

const add = (a, b) => {
    const sum = a + b;
    return sum;
}
// 위 식은 일반 블록 본문 화살표 함수이다.
// 함수 내에 코드를 작성하고 반환값(return)을 명시해주어야 한다.

const add = (a, b) => {
    return a + b;
}
// 덧셈 과정을 단순화 하여 한줄로 반환값이 정리가능하다.
// 이때 단일 표현식 화살표 함수를 사용할 수 있다.

const add = (a, b) => a + b;
//단일 표현식 화살표 함수는 중괄호와 return이 생략되며 결과값을 자동으로 반환한다.

3. arguments 객체가 없음

일반 함수에는 arguments 객체가 있다. arguments 객체는 함수 호출 시 전달된 인자들을 배열형태로 다루는 유사 배열 객체이다.

function regularFunc() {
  console.log(arguments);  // 유사 배열 객체 출력
}

regularFunc(1, 2, 3);  // 출력: { '0': 1, '1': 2, '2': 3 }

arguments 객체는 전달받은 인자를 배열형태로 사용할 수 있도록 도와주는 기능과 더불어 함수에 전달할 인자의 길이가 정해져있지 않을때 동적으로 인자를 받아 사용할 수 있도록 도와준다.

하지만 화살표함수는 arguments 객체를 가지고 있지 않아 상위 스코프의 arguments 객체를 참조하게 된다.

function regularFunc() {
  const arrowFunc = () => {
    console.log(arguments);
    // arrowFunc에 arguments가 없어서 상위 regularFunc의 arguments를 참조함
  };
  
  arrowFunc(4, 5, 6);
}

regularFunc(1, 2, 3);  // 출력: { '0': 1, '1': 2, '2': 3 }

※ arguments가 없는 화살표 함수에서는 나머지 매개변수를 사용하면 된다.

const arrowFunc = (...args) => {
  console.log(args);  // 배열로 전달된 인자들을 출력
};

arrowFunc(1, 2, 3);  // 출력: [1, 2, 3]

4. new 연산자를 이용한 생성 불가능

생성자 함수를 이용하면 객체를 원하는 형태로 만들어 사용할 수 있다.

function Person(name) {
  this.name = name;  // 새로운 객체의 속성으로 설정
}

const john = new Person('John');
console.log(john.name);  // 'John'

일반 함수에서 생성자를 이용하면 각 기능에 맞는 명칭이 지정되는 객체를 만들어 사용할 수 있다.

생성자를 사용하기 위해서는 함수에 this값이 필요하다. 그러나 위에서 말했듯이 화살표함수는 this 값을 가지지 않고 상위 스코프의 this값을 참조하게 된다.

새로운 객체를 생성하면 그 객체의 내용을 this로 바인딩 해야하는데 화살표 함수는 이러한 기능이 없기 때문에 생성자 동작이 불가능한것이다.

이외에도 prototype 속성을 가지지 않아 생성자 사용이 불가능하다.