<요약>
1. Arrow Function 예시.
2. Arrow Function을 활용(map,filter)
리엑트를 배우기 전에 javascript의 핵심적인 내용 4가지를 알아야한다.
1.Arrow Function
2.Class & Super
3.Asynchronous
4.Promise &Async Func
이번 글은 Arrow function에 대해 설명하고자 한다.
1. Arrow Function
화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다. (출처arrowfunction 설명)
Arrow Function을 제대로 이해하기 위해서는 위의 설명을 완벽하게 이해해야 한다. 위 설명의 핵심은 두가지이다.
1. this를 바인딩하지 않는다.
2. 메소드함수가 아닌곳에 가장 적합하다.
표현 방법은 다음과 같다.
예시를 통해 알아보자 .
javascript의 함수 표현식을 기본적으로 이런식으로 나타낼 수있다.
function plusTwo(s) {
return s+2
}
console.log(plusTwo(10))
위와 같은 예시를 ArrowFuction으로 바꾼다면 이런식으로 1줄 코드로 나타낼 수 있다.
plusTwo = (s) => s+2
console.log(plusTwo(2))
Arrow Function의 활용
Arrow Function은 함수식을 단순화 시키는것 뿐만 아니라 다음 두가지 기능 가지고 있기 때문에 유용하게 사용된다.
1. Map
2. Filter
1.Map
두기능은 배열을 잘 조작하고 싶을때 주로 사용된다.
예시를 통해 알아보자.
arr라는 배열이 있다고 했을때 기존 map 방법은 다음과 같다.
arr = [1,3,4,5,10,111,222,333]
arr_map = arr.map(function(value) {return value*2 })
console.log(arr_map)
이것을 ArrowFunction을 사용하변 다음과 같이 코드를 단순화 시킬 수 있다.
arr = [1,3,4,5,10,111,222,333]
arr_map = arr.map(v => v*2)
console.log(arr_map)
2. Filter
Filter는 말 그대로 조건을 줘서 조건에 만족하는 값을 뽑아내는 것이다.
Arrow Function에서 다음과 같이 사용할 수 있다.
arr = [1,3,4,5,10,111,222,333]
arr_filter = arr.filter(v => v > 10)
console.log(arr_filter)