Colin's Blog
[typescript] 배열 요소 필터링 및 매핑하기

TypeScript를 사용하면 JavaScript의 강력함과 정적 타입 검사의 혜택을 동시에 누릴 수 있습니다. 이 글에서는 TypeScript로 배열을 필터링하고 매핑하는 방법을 알아보겠습니다.

배열 요소 필터링하기

배열에서 특정 조건을 만족하는 요소만 추출하려면 filter 메서드를 사용할 수 있습니다. 이 메서드는 조건을 판별하는 함수를 매개변수로 받아 해당 함수가 true를 반환하는 요소들로 이루어진 새로운 배열을 반환합니다.

다음은 TypeScript에서 배열을 필터링하는 예제입니다:

const numbers: number[] = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

위 예제에서는 numbers 배열에서 짝수만 필터링하여 evenNumbers 배열에 담았습니다.

배열 요소 매핑하기

배열의 각 요소를 특정 규칙에 따라 변환하려면 map 메서드를 사용할 수 있습니다. map 메서드는 각 요소에 대해 콜백 함수를 호출하고 해당 함수의 반환 값으로 새로운 배열을 생성합니다.

다음은 TypeScript에서 배열을 매핑하는 예제입니다:

const names: string[] = ["Alice", "Bob", "Charlie"];

const nameLengths = names.map(name => name.length);

console.log(nameLengths); // [5, 3, 7]

위 예제에서는 names 배열의 각 요소에 대해 길이를 구하여 nameLengths 배열에 담았습니다.

배열 요소 필터링 및 매핑 연결하기

때로는 배열을 먼저 필터링한 후, 그 결과에 대해 매핑을 적용해야 할 때가 있습니다. 이를 위해서는 filter와 map 메서드를 연결하여 사용할 수 있습니다.

다음은 TypeScript에서 배열을 필터링하고 매핑하는 예제입니다:

const mixedNumbers: (number | null)[] = [1, null, 3, null, 5];

const filteredAndMapped = mixedNumbers.filter(num => num !== null).map(num => num * 2);

console.log(filteredAndMapped); // [2, 6, 10]

위 예제에서는 mixedNumbers 배열에서 null 값을 제외한 후, 나머지 요소에 대해 2를 곱하여 filteredAndMapped 배열에 담았습니다.

배열을 필터링하고 매핑하는 것은 TypeScript로 데이터의 가공 및 변환 작업을 수행할 때 자주 사용되는 패턴입니다. 이러한 배열 처리 메서드를 유연하게 활용함으로써 코드의 가독성과 유지보수성을 높일 수 있습니다.

참고 자료

이상으로 TypeScript에서 배열 요소를 필터링하고 매핑하는 방법에 대해 살펴보았습니다. 도움이 되었기를 바랍니다.

© 2018 Colin. All rights reserved.