2. 좀 더 간단하게 작성하는 함수, arrow function

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 ES6의 새로운 기능인 arrow function에 대해서 알아보겠습니다.

arrow function은 익명함수를 기존 자바스크립트 문법보다 좀 더 간단하게 표현할 수 있는 방식입니다.

표현식은 다음과 같습니다.

const (혹은 let) 변수명 = (파라미터) => { ... 함수 내용 ... }

비교를 위해 기존 자바스크립트에서 익명함수를 변수에 할당하는 것과 비교해 보겠습니다.

var _addFunc = function(a, b){
    return a+b;
}

다음은 같은 예제를 arrow function을 이용해 만든 것입니다.

const _addFunc = (a, b) => {
    return a+b;
}

훨씬 간단하게 표현할 수 있는 것을 볼 수 있습니다. 

만약 위의 예제와 같이 함수의 내용이 한 줄이면 블럭('{}')을 생략할 수 있습니다.

(블럭을 생략하면 바로 return 한다는 의미입니다)

const _addFunc = (a, b) => a+b;

ES6의 arrow function을 이용하면 코드를 좀 더 직관적이고 간단하게 표시할 수 있습니다.

* 기존 자바스크립트 문법과의 비교2 (배열의 map 메소드를 이용)

(기존자바스크립트)

var arr = [1, 2, 3, 4, 5];
 
var newArr = arr.map(function(item, index){
    return item+1;
});
console.log(newArr);

(ES6)

let arr = [1, 2, 3, 4, 5];
 
let newArr = arr.map((item, index)=> item+1);
console.log(newArr);

*배열의 map 메서드에 익숙치 않으시다면 아래의 링크를 참조해 주세요

<배열의 map메서드를 이용한 매핑>

다음 포스팅에서는 ES6의 전개 연산자에 대해서 알아보도록 하겠습니다.

**참고 자료 (항상 감사드립니다)

짱구의 기술블로그 - Chap27. 알쓸 ES6 

https://appear.github.io/2018/03/14/JavaScript/javascript_28/

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)