[Typescript] 배열 메소드 filter, map, reduce

이번에는 자바의 Array 객체의 메소드가 아닌 타입스크립트 배열 메소드인 filter, map, reduce 세가지를 소개하겠습니다. 이 세 메소드는 메소드 체인으로 연결되어 자주 등장하는 세쌍둥이급의 메소드입니다.

---

1. filter

가장 먼저 만날 메소드는 filter입니다. 자바스크립트 Array.filter처럼 배열을 특정 조건으로 걸러주는 메소드입니다.

.filter(콜백함수);
.filter((요소: 타입, 인덱스?: number) => {});

 

다음은 숫자 배열에서 filter 메소드로 짝수 요소만을 추출해내는 코드입니다.

let nums: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let result: number[] = nums.filter((value: number) => value % 2 === 0);

console.log(result);

 

 

 

2. map

map 메소드도 역시 용도는 같습니다. 배열을 가공해서 다른 배열을 만들어 내는 메소드입니다.

.map(콜백함수);
.map((요소: 타입, 인덱스?: number) => {});

 

다음 코드는 문자열을 글자 하나씩 떼어 새로운 문자열 배열을 만들어내는 코드입니다.

let str: string = 'Typescript';

let result: string[] = str.split('').map((value: string)=> value);

console.log(result);

 

 

 

3. reduce

reduce는 타입스크립트의 배열 메소드로 자바스크립트의 Array.fold() 메소드와 동일합니다. 하는 일은 배열 데이터들로 하나의 값을 생성해냅니다. 여기서 초기 요소(initialValue)는 value의 일종의 초깃값입니다.

.reduce(콜백함수, 초기 요소);
.reduce((결과: 타입, 요소: 타입)) => {}, 초기 요소);

 

다음은 reduce 메소드로 배열의 모든 값을 더하는 코드입니다.

let nums: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let result: number = nums.reduce((total: number, value: number) => total += value, 0);

console.log(result);