javascript 화살표 함수

javascript에서 화살표 함수는 함수를 쓰는 하나의 문법이다.

대략 다음과 같이 작성한다.

const f = (p1, p2, p3) => {
  const res = p1 + p2 + p3;
  return res;
}

"인자로 p1, p2, p3을 받아, res라는 변수에 p1+p2+p3을 저장한 후 그걸 return하는 익명함수" 를 f라는 변수에 할당한다는 뜻이다. 다른 언어를 기준으로 설명하자면 다음과 같은 역할을 한다.

// c, java
int f(int p1, int p2, int p3) {
  int res = p1 + p2 + p3;
  return res;
}

// python
def f(p1, p2, p3)
  res = p1 + p2 + p3
  return res

---

화살표 함수를 쓰는 방법에는 더 간단한 방법이 있는데,

const f = (p1, p2, p3) => p1 + p2 + p3;

이 함수는 앞의 함수와 동일한 역할을 한다. 즉 p1 + p2 + p3이라는 값을 return한다고 더 짧게 쓸 수 있는 것이다. 차이는 중괄호인데, 다음 두 코드를 보면 차이를 설명할 수 있다.

const printHello = () => {
  console.log('Hello World!');
  return 0;
}

const f1 = () => printHello();
const f2 = () => { printHello(); }

const r1 = f1(); // undefined
const r2 = f2(); // 0

두 코드 중 무엇을 실행하든 Hello World!가 출력된다는 점은 같으나,

f2의 경우에는 중괄호가 있기 때문에
parameter를 받지 않고 printHello()를 실행하는 함수
가 된 것이고,
f1은 중괄호가 없기 때문에
parameter를 받지 않고 printHello()의 실행 결과를 return하는 함수
가 된 것이다.

---

화살표 함수는 간결한 문법을 지원한다는 장점이 있다. this 나 super에 대한 바인딩이 없고 생성자로 사용할 수 없는 등 몇 가지 제한점이 있으나, 많은 경우 화살표 함수만으로도 모든 작업을 할 수 있다.

const args = ['apple', 'banana', 'create', 'demon'];

// with function keyword
const lengths1 = args.map(function(item) {
  return item.length;
});

// with arrow function
const lengths2 = args.map(item => item.length);

---

출처