본문 바로가기
📚 Stack/JavaScript

[JavaScript] 화살표 함수란?

by 개발한 너굴씨 2024. 6. 14.
728x90

 

 

 

 

 

화살표 함수(Arrow Function)란 무엇인가

 


 

 

 

 

 

화살표 함수란 ES6에서 도입된 함수 선언 방식으로 화살표(=>) 문법을 사용해 함수의 표현을 간결하게 할 수 있습니다. 

 

기본 사용법 

const 함수이름 = (매개변수) => {
  
};

 

 

 


매개변수가 하나일 경우에는 괄호를 생략할 수 있고, 함수 본문이 단일 표현식일 경우 중괄호와 `return` 키워드를 생략할 수 있습니다.

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

const square = x => x * x;



기존 함수 표현식과의 차이점

 

1. this 바인딩

화살표 함수는 자신만의 `this`를 가지지 않고, 선언된 위치에서 `this`를 상속받습니다. 이는 콜백 함수나 이벤트 핸들러에서 유용하게 사용됩니다.

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // this는 Person 객체를 가리킴
  }, 1000);
}

const person = new Person();



2. arguments 객체

화살표 함수는 `arguments` 객체를 가지지 않습니다. 대신, 필요한 경우 나머지 매개변수(rest parameter)를 사용할 수 있습니다.

const sum = (...args) => {
  return args.reduce((acc, curr) => acc + curr, 0);
};



3. 생성자 함수로 사용할 수 없음

화살표 함수는 생성자 함수로 사용할 수 없습니다. `new` 키워드를 사용하여 화살표 함수를 호출하려고 하면 오류가 발생합니다.

const Foo = () => {};
const bar = new Foo(); // 타입 에러



 

 

 

 

728x90

댓글