arrow function

Posted on Edited on In

arrow function

  • javascript arrow function

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언하는 기능입니다.

하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 화살표 함수의 기본 문법은 아래와 같습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 매개변수에 따라 지정 방법이 달라진다 
    () => { ... } // 매개변수가 없을 경우 사용방법 
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 }) 
// 위 표현과 동일하다. 객체 반환을 할 경우에는 소괄호를 사용해야한다

() => {           // multi line block.
  const x = 10;
  return x * x;
};

화살표 함수의 호출

  • 화살표 함수는 익명 함수로만 사용할 수 있습니다.

  • 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용합니다.

    1
    2
    3
    4
    5
    6
    // ES5
    var pow = function (x) { return x * x; };
    console.log(pow(10)); // 100
    // ES6
    const pow = x => x * x;
    console.log(pow(10)); // 100

  • 콜백 함수로 사용하는 경우도 많습니다. 이 경우 일반적인 함수 표현식보다 표현이 간결하여 보다 간결하게 코딩을 할수 있게합니다. 버전마다 조금씩 다르지만 내용은 일맥상통합니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// ES5
var arr = [1, 2, 3];
var pow = arr.map(function (x) { // x는 요소값
  return x * x;

});

console.log(pow);   // 1X1 ,2X2, 3X3 

// ES6
const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

console.log(pow); // [ 1, 4, 9 ]