ES6 화살표 함수에 대한 간단한 설명

1. 화살표 함수

화살표 함수는 ES6에 추가된 함수를 정의하는 방식으로 function 방식으로 함수를 정의하는 작법을 간소화했다. 작법이 간편하기 때문에 일부 장면에서 function를 대체할 수 있다.

2. 화살표 함수 사용 방법

const str2number = str => Number(str);
// 
const str2number = function (str) {
    return Number(str)
}

화살표 함수는 표현을 더욱 간결하게 한다

3. 화살표 함수 사용에 대한 참고 사항:

화살표 함수에 매개 변수가 필요하지 않거나 여러 개의 매개 변수가 있으면 괄호를 사용하여 매개 변수 부분을 대표한다

const sum = (num1,num2) => num1 + num2

const getName = () => 'Kobe'

화살표 함수의 코드 블록 부분이 한 문장보다 많으면 괄호를 사용하여 묶고, 우물은return 문장으로 되돌려줍니다.

const findMaxNumber = (...rest) => {
    const maxNumber = Math.max(...rest)
    return maxNumber;
}

 

대괄호가 코드 블록으로 해석되기 때문에 화살표 함수가 개체로 직접 되돌아오면 개체 밖에 괄호를 붙여야 합니다..

const getTempitem = id => ({id:id,name:'temp'})

화살표 함수는 변수의 해체와 결합하여 사용할 수 있다

const getFullName = ({firstName,lastName}) => firstName + ' ' + lastName

4. 화살표 함수의 특징

화살표 함수는 자신의this가 없고, 그것의this는 정의할 때 외층의 첫 번째 화살표 함수가 아닌 코드 블록의this를 가리킨다

함수체내의this는 정의된 대상을 영원히 가리키며, 실행할 때의this가 아니라,call과apply를 사용해도this지향을 바꿀 수 없습니다

화살표 함수에 자신의this가 없기 때문에 화살표 함수는 구조 함수로 사용할 수 없고 원형 대상에 방법을 추가할 수 없으며 대상이 될 수 없는 방법 속성입니다

argumens 대상을 사용할 수 없으며 이 대상은 함수체 내에 존재하지 않습니다.사용하려면rest 매개 변수로 대체할 수 있습니다

yield 명령을 사용할 수 없기 때문에 화살표 함수는Generator 함수로 사용할 수 없습니다

화살표 함수를 사용하면 흔히 볼 수 있는 구덩이는this의 지침 문제로 화살표 함수를 구조 함수로 사용하고 원형 대상에 추가하는 방법 등을 포함한다.

// id 
Array.prototype.findIndex = (id) =>{
    let index = 0;
    // this ， this this， 
    // window， this.forEach undefined
    this.forEach((item,i)=>{
        if(item.id === id){
            index =i;
        }
    })
    return index
}

5. 화살표 함수의 작용

리셋 함수를 간소화하다

// 
[1,2,3].map(function(x){
    return x*x
})
// 
[1,2,3].map(x=>x*x)

화살표 함수는this를 고정화시킬 수 있는데 이런 특성은 봉인 리셋 함수에 매우 유리하다

​​​​​​​