[ES6] 화살표 함수 (arrow function)

 

Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다.

 

---

 

화살표 함수에 대해서

 

- ES6에 추가된 표현식을 사용하는 함수로 화살표 기호 ( => ) 로 함수를 선언함

- 화살표 기둥 = 을 사용하므로 fat arrow function 이라고도 함

- 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 장점을 가지고 있음

 

---

 

화살표 함수의 제한점

 

- this 나 super 에 대한 바인딩이 없음

- methods 로 사용될 수 없음

- new.target 키워드가 없음

- 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind 메소드를 사용할 수 없음

- 생성자로 사용할 수 없음 (constructor)

- yield를 화살표 함수 내부에서 사용할 수 없음

yield 키워드
- 제너레이터 함수 (function, 레거시 generator 함수) 를 중지하거나 재개하는데 사용

 

---

 

기본 자바스크립트의 함수 선언 방법

 

함수 선언식

개념
- 지정된 매개변수 (parameter) 를 갖는 함수
- 기본적으로 함수는 undefinded 를 반환해서, return 문을 사용해 반환값을 지정해 반환해주어야함
- 호이스팅에 영향을 받음

구문

function name([param[, param,[..., param]]]) { [statements] }​

name : 함수 이름
param : 인수 (argument) ( 인수의 최대 개수는 엔진마다 다름 )
statements : 함수를 구성하는 문

 

예제

function add (first, second) {
    return first + second;
}

console.log(add(30, 50))
=> 80​

 

함수 표현식

개념
- 어떤 표현식 내에서 함수을 정의함
- function 생성자와 함수 선언을 이용해 함수를 정의할 수 있음
- 익명 함수를 만들 수 있어, 함수 이름을 생략할 수 있음

구문

var myFunction = function [name]([param1[, param2[, ..., paramN]]]) { statements };​

name : 함수 이름 ( 익명함수라면 이름 생략가능 )
param : 인수 (argument)
statements : 함수를 구성하는 문

예제

const add = function(first, second) {
    return first + second
}


console.log(add(30, 70))
=> 100​

 

---

화살표 함수 사용방법

 

1. 결과값을 바로 반환하는 경우에는 중괄호를 생략가능

const add = function(first, second) {
    return first + second
}

const add = (first, second) => first + second

2. 반환값이 객체라면 괄호로 결과값을 감싸 간결하게 표현 가능

const addAndMultiple = (first, second) => (
    {add : first + second, multiple : first * second}
    )

 
3. 계단형 함수 선언 구조를 만들지 않는다

function addNum (num) {
    return function (value){
        return num + value
    }
}

const addNumber = num => value => num + value;

4. bind 함수를 사용해 this 객체를 전달하는 과정을 포함하고 있음

class MyClass {
    value = 10;
    constructor () {
        // 함수 표현식
        const addThis2 = function(first, second) {
            return this.value + first + second
        }.bind(this)

        // 화살표 함수
        const addThis3 = (first, second) => this.value + first + second;
    }
}