배열 객체 메서드 sort(), filter(), map() 기초 정리

배열 객체 메서드 sort(), filter(), map() 기초 정리

 

 

지난 포스팅에서 배열객체 내장 함수인 sort() 메서드를 다루고 정리를 했습니다. sort() 메서드를 이용해서 문자열을 정렬하거나 숫자를 정렬하는 방법을 살펴보았습니다.

 

sort() 메서드로 상품 정렬 기능 만들기

sort() 메서드로 상품 정렬 기능 만들기

 

자바스크립트에서는 배열(Array)을 다루는데 있어서 sort() 이외에도 여러 유용한 메서드들이 존재합니다. 그 중에서도 가장 자주 사용되는 메서드로는 sort(), filter(), map(), reduce() 등이 있습니다. 이번 포스팅에서는 이들 메서드에 대해서 간단한 예제와 함께 설명해보도록 하겠습니다.

 

 

 

 

sort() 메서드

sort() 메서드는 배열의 요소를 정렬하는 메서드입니다. 이 메서드는 기본적으로 배열의 요소를 문자열 형태로 변환한 후, 이를 유니코드 코드 포인트 순서로 정렬합니다.

 

따라서, 숫자의 경우 문자열로 변환되어 정렬되므로, 정렬 결과가 예상과 다를 수 있습니다. 즉, 문자를 정렬할 것인가,  숫자를 정렬할 것인가에 따라 코드에 약간 변화를 주어야 합니다.(지난 번 포스팅 내용을 참고해주세요)

const nums = [3, 5, 20, 6, 2, 1];
console.log("1. 변경전 : ", nums);

nums.sort();                   // 문자열 정렬 시
console.log("2. 변경후 : ", nums);

const numbers = [3, 5, 20, 6, 2, 1];
console.log("3. 변경전 : ", numbers);

numbers.sort((a, b) => a - b); // 숫자 정렬시
console.log("4. 변경후 : ", numbers);
</script>

sort()를 이용하여 문자 정렬, 숫자 정렬을 해본 결과

 

위 코드에서는 sort() 메서드를 호출할 때, 비교 함수를 인자로 전달하였습니다. 이 함수는 두 개의 인자를 받아서, 첫 번째 인자가 두 번째 인자보다 작다면 음수, 같다면 0, 크다면 양수를 반환하는 함수입니다.

 

이 함수의 반환값을 기반으로, sort() 메서드는 배열의 요소들을 정렬하게 되는데, 결과 값이 양수인 경우 a 자리에 오는 요소를 배열에서 우측으로, 결과값이 음수인 경우 b 자리에 오는 요소를 배열의 우측으로 이동시키도록 되어 있습니다.

 

한편, 위 예제에서 console.log를 변경 전후로 출력해보고 살펴본 것 처럼 sort() 메서드는 원본 배열을 변화시키지 않습니다.

 

 

 

filter() 메서드

filter() 메서드는 말 그대로, 필터링을 해주는 메서드입니다. 조건을 주게 되고, 해당 조건에 참인 결과를 돌려주는 모든 요소를 모아서, 새로운 배열을 만듭니다.

 

예를 들어, 다음과 같이 코드를 작성하면, 짝수만 모아서 새로운 배열을 만들 수 있습니다.

const nums = [1, 2, 3, 4, 5];
console.log(nums);

const evenNums = nums.filter((nums) => nums % 2 === 0);
console.log(nums);
console.log(evenNums);

filter() 메서드를 이용하여 필터링을 한 결과

 

위 예제 코드에서는 filter() 메서드를 호출할 때, 조건을 담고 있는 테스트용 함수를 인자로 전달합니다. 이 함수는 배열의 각 요소를 대상이 하나씩 불려 들어가 실행되며, 나머지 연산자(%)를 이용한 결과값이 0인 경우 즉, 연산 결과가 짝수인 경우에만 true를 반환합니다. filter() 메서드는 이러한 true 값을 반환한 요소들을 모아서, 새로운 배열을 만듭니다.

 

console.log를 변경 전후로 출력해보고 살펴보면, nums 배열에는 변화가 없고, evenNums에는 필터링을 통과한 원소들만 담겨 있는 것을 확인할 수 있습니다.

 

'쇼핑몰 같은 곳에서, '3만원 짜리 이하의 물건만 보여줘' 하는 등의 가격 필터링 기능에 사용할 수 있겠죠?

 

 

 

 

map() 메서드

 

map() 메서드는 주어진 함수를 사용하여, 배열 내의 모든 요소를 변환하는 메서드입니다. 이 때, 변환된 요소들은 새로운 배열로 반환됩니다. 예를 들어, 다음과 같이 코드를 작성하면, 배열 내의 모든 요소에 2배를한 결과를 새로운 배열로 만들 수 있습니다.

const nums = [1, 2, 3, 4, 5];
console.log(nums);

const numsx2 = nums.map((nums) => nums * 2);
console.log(nums);
console.log(numsx2);

map() 메서드를 사용하여 매핑을 한 결과

 

map() 메서드 또한 호출할 때, 함수를 인자로 전달합니다. filter() 메서드와 동작방식이 유사하다 볼 수 있겠습니다.  역시 배열의 각 요소를 대상으로 함수가 실행되고, 요소에 x2를 한 값을 반환합니다. map() 메서드는 이러한 반환값을 모아서, 새로운 배열을 만듭니다.

 

console.log를 변경 전후로 출력해보고 살펴보면, nums 배열에는 변화가 없고, numsx2 배열에는 map() 메서드를 수행한 결과가 적용된 원소들이 담겨 있는 것을 확인할 수 있습니다.

 

쇼핑몰과 같은 상황을 예로 든다면, map() 메서드는 장바구니에 담긴 상품들의 가격에, 할인율을 적용하거나 혹은 상품 가격에 환율을 적용하여 다른 통화로 표시하는 기능에 활용될 수 있겠습니다.

 

여담이지만, map() 메서드를 처음 대면하게 되면, 대부분의 한국인은 지도(map)을 떠올리는 경우가 많을 것입니다. 지도는 아니구요, 매핑(mapping)이라는 단어가 길어서 축약해서 쓴 거라고 기억하면 이해가 쉬울 겁니다. 배열의 원소들을 하나 하나 다 꺼내서 새로운 결과로 매핑(mapping)을 해주니까요.

 

그리고 sort(), filter(), map() 모두 이름 없는 익명 함수를 인자로 받고 있죠?

바로 앞 포스팅에서 정리했던 콜백함수라는 이름을 떠 올려보고 다시 한번 당신도 쓰윽 훑고 가셔요~♪

 

 

 

 

마치며

 

이번 포스팅에서는 자바스크립트 배열에서 가장 자주 사용되는 sort(), filter(), map() 메서드에 대해 간략하게 살펴보았습니다. 이 녀석들은 배열을 다루는데 있어서 중요한 역할을 담당하며, 특히 map() 메서드는 개발자들이 배열을 다룰 때 아주 빈번하게 사용하는 메서드입니다.

 

배열의 요소를 꺼내서 활용하거나 변환하는 작업은 일반적으로 다른 메서드들과 함께 많이 사용되는데, 조금 과장한다면 프로그래머로 불릴 수 있는 시작점 이라고도 할 수 있습니다. 배열을 다루는 데 있어서는 정말 유용한 함수들이므로 이러한 잘 숙지하고 활용하면, 배열의 활용을 보다 쉽게 할 수 있을 것입니다.

물론 여기서 다루지 않은 다른 메서드들도 많이 존재합니다. 설마 자바스크립트가 이 정도에서 멈출리가...