[ES6 기초] Arrow function

Arrow Function

 

이건 우리가 react 하면서 자주 봤던건데 =>를 사용하는것이다.

간단하게 소스를 통해서 확인해보자.

 

let arr = [1,2,3,4,5]
let arr2 = arr.map(v=>v*2);
console.log(arr2); 

 

결과

(5) [2, 4, 6, 8, 10]
이렇게 된다.

 

일단 위소스에서 map이란 함수는 javascript에서 배열안에 내재되어 있는 함수인대 

해당 함수는 배열 내의 모든 요소에 접근해서 해당 요소에 대한 함수를 호출하고

호출한 배열 요소 결과를 모아 배열로 리턴하는것이다.

위와 같은 경우로 봤을땐 각각의 배열 요소 안에 접근에 
*2를 시키는 함수를 호출해 그 결과들을 모아 배열로 반환한것이다.

 

위소스를 함수 모양으로 바꾸게 되면 아래와 같다.

ex)

let arr = [1,2,3,4,5]
let arr2 = arr.map(function(val){
    return val*2;
});
console.log(arr2);

즉 => 사용할때 좌측에 들어가는것은 함수 인자(매개변수)가 되는것이고 우측에 있는것은 그 함수인자에 대한 표현식을
쓰는것이고 그에대한 결과를 반환하게 되는거다.

다른 예로 설명을 좀 더 보강하자면 

ex)

let arr = [1,2,3,4,5]
let arr2 = arr.map(v => {
    if(v%2 ==0){
        console.log('짝수입니다.');
    }else{
        console.log('홀수 입니다.')
    }
    return v
});
console.log(arr2);

이렇게 매개변수인 v를 가지고 {}안에 표현식을 만들고
v를 return해서 arr2배열안에 v의 값을 넣은것이다.

 

다른 소스도 한번 보자 

ex)

let arr = [1,2,3,4,5]
let arr2 = arr.map((v,i)=>{
    console.log('i: '+i+' v: '+v)
});
console.log(arr2);

결과
i: 0 v: 1
i: 1 v: 2
i: 2 v: 3
i: 3 v: 4
i: 4 v: 5

 

여기서 보면 map 함수에서 

첫번째 인자는 배열안의 값을 주는것이고 

두번째 값은 배열의 index 값을 준다.