[js ES6] 화살표함수 기초와 forEach, map, filter, reduce, every, some

백엔드 개발자로 성장한다고 생각해서 열심히 했어서 그런지 자바 스프링은 회사에서 프로젝트 처음 투입되었을때 mybatis를 처음했을때도 수월하게 익혀나갔었는데

 

자바스크립트 ES5만 학원에서 배웠기 때문에도 그렇고 최신 버전들과 이리 차이 날줄 몰라서 소홀히 했었는데

이번 프로젝트에서 dhtmlx버전을 업그레이드 한다는 말을 듣고 첫 주간에는 

'실시간 모니터링 시스템을 만들며 정복하는 MEVN' 이라는 책에서 ES6 part 중 화살표함수, promise와 async, await를 집중 공부했다. 왜냐하면 dhtmlx7에서 몇몇 함수들이 promise로 반환된다고 나와있어 관련 개념이 없으면 어려울 것 같았다.(참고로 일주일이 안되서 공부 + 적응 완료하여 개발 착수 했었고 프로젝트의 개발은 이미 거의 끝났고 테스트를 진행중이다.) 

 

//1. before ES5
function a() {
	return 1
}

//2. after ES6
const a6 = () => 1

a()와 a6()의 결과값은 서로 같다.

 

2와 같이 '=>'를 사용한 함수표기를 '화살표함수'라고 한다.

//3. after ES6
const a6 = () => {
	return 1;
}

3도 역시 마찬가지 기능을 하는 문법으로

함수 내 여러 문장을 사용할 경우 블록을 사용하고 return을 명시하면 된다.

 

const f1 = (e, index) => {
 	console.log(`${index}번째 요소는 ${e}입니다.`)
}

const f2 =(e, index) => e*2
const f3 =(prev, curr, index) => prev + curr
const f4 = e => e%2

const a = [1,2,3,4,5].forEach(f1)
/*
0번째 요소는 1입니다.
1번째 요소는 2입니다.
2번째 요소는 3입니다.
3번째 요소는 4입니다.
4번째 요소는 5입니다.
*/

const b = [1,2,3,4,5].map(f2)
// [2,4,6,8,10]

const c = [1,2,3,4,5].reduce(f3)
// 15
const d = [1,2,3,4,5].filter(e=>e%2 == 0)
// [2,4]

const isAllOdd = [1,2,3,4,5].every(e=>e%2)
// false

const isSomeOdd = [1,2,3,4,5].some(e=>e%2)
// true

forEach는 모든 원소에 대하여 ~를 적용한다. 는 개념

map은 함수를 원소에 적용한 새로운 배열을 만들어내는 기능

reduce는 배열을 통해 하나의 계산된 값을 추출할때 사용

filter는 특정 조건을 만족하는 원소들만 추출하여 배열 생성

every는 모든 원소에 대해 ~조건을 만족하는 지 여부를,

some은 어느 한 원소라도 조건을 만족하는 지 여부를 반환