자바스크립트 배열의 함수형 메서드

배열은 여러 데이터를 순서대로 저장할 수 있는 자료구조이다.

프론트엔드에서 자바스크립트 배열을 사용하여 데이터 조작을 하는 경우가 많다.

이를 위해 제공되는 유용한 메서드들을 어떻게 사용하는지 알아보려 한다.

 

 

배열을 가공하거나 조회하기 위한 메서드를 예제와 함께 공부해보자.

 

 

예제에 쓰일 mock 데이터

 

var data = [{title : "hello",content : "안녕", price : 12000},
            {title : "good",content : "좋아", price : 5500},
            {title : "study",content : "공부", price : 1200}];

 

 

 

 

배열을 순회하는 기본적인 방법에는 for문과 forEach가 있다.

 

1. for vs forEach

 

for

 

for(var i=0; i<data.length; i++) {
	console.log(data[i].title , data[i].price)
}

 

 

forEach

 

//forEach문
data.forEach(function(v) {
	console.log(v.title, v.price);
});

 

 

for, forEach 예제 실행 결과

 

 

 

예제 코드를 보면 알 수 있듯이 forEach는 for문과 달리 증감 값(i++ or i-- 등)이나 배열 길이(data.length)를 명시하는 코드가 필요 없다.

그만큼 실수를 줄일 수 있고, 코드는 더 간단해져 더 보기 좋아진다.

 

 

 

 

+) ES6의 arrow 함수로 더 간단하게 사용할 수 있다.

 

data.forEach((v) => console.log(v.title, v.price));

 

 

 

 

2. map

 

map 메서드로 콜백 함수에서 정의한 방법대로 모든 원소를 가공하여 새로운 배열을 반환할 수 있다.

새로운 배열을 반환한다는 게 for와 forEach와의 가장 큰 차이점이다.

 

 

data의 가격(price)을 10% 인상하려고 한다.

 

var newData = data.map(function(v){
	return v.price * 1.1;
});

newData; //결과값: [13200.0002, 6050.0001, 1320]

 

예상한 결과값은 원래 data 배열과 포맷은 같고 price 값만 바뀐 결과였다.

그런데 실제로는 price 값만 배열로 반환되었다.

 

 

 

물론 data가 단순한 배열이었다면 아래처럼 해도 원하는 결과를 얻을 수 있을 것이다.

 

var priceData = [100, 200, 300];

var newData = priceData.map(function(v){
	return v * 1.1;
});

newData; //결과값: [110.0001, 220.0003, 330]

 

※ 참고 : 부동소수점 정밀도 문제로 1.1을 곱한 결과가 정확한 값이 아닐 수 있다.

 

 

하지만 data는 배열 안의 요소가 객체로 되어있다.

객체를 반복적으로 만들어서 return 하는 방법으로 문제를 해결한다.

 

var newData = data.map(function(v){
	var obj = {title : v.title, content : v.content, price : v.price*1.1};
	return obj;
});

console.table(newData); //object를 보기 좋게 출력해준다.

 

 

 

 

3. filter

 

filter 메서드는 조건에 맞는 원소만 추려서 새로운 배열을 반환한다.

 

 

가격이 5000원 이상인 데이터만 추출하려고 한다.

 

var filteredData = data.filter(function(v){
	return v.price > 5000;
});

filterData; //return 값에 해당하는 조건에 맞는 모든 데이터가 담겨있다.

 

filter도 map처럼 새로운 배열을 반환한다.

map과의 차이점은 원본 데이터의 포맷을 그대로 유지하면서 조건에 맞는 데이터만 반환해준다는 것이다.

 

 

 

 

 

+) 메소드 체이닝으로 filter와 map을 함께 쓸 수 있다.

 

var newData = data.filter(function(v){
	return v.price > 5000;
}).map(function(V){
	var obj = {title : v.title, content : v.content, price : v.price+""};
    return obj;
});

console.table(newData);

 

filter 메서드로 조건에 맞지 않는 데이터를 거르고, map 메서드에서 obj 변수 값 마지막에 ""를 붙이면서 문자열로 바꾸었다.

 

 

 

+) filter와 map 메서드는 원래 data 값은 유지하면서, 가공한 결과는 새로운 배열로 확인할 수 있다.

이를 immutable 하다고 표현한다.

 

 

 

 

4. reduce

 

reduce는 콜백 함수의 반환 값을 누적하여 반환하는 함수이다.

 

 

아래는 reduce 메서드로 data의 price 값을 더한 값을 구하는 예제이다.

 

var totalPrice = data.reduce(function(prevValue, data) { return prevValue + data.price; }, 0);

console.log(totalPrice); //결과값: 18700

 

reduce 메서드의 인자 값은 콜백 함수와 누적 값의 초기 값이다. 초기 값은 선택 사항이다.

 

 

 

 

 

 

 

출처)

edwith 부스트코스 웹 프로그래밍

- 배열의 함수형 메소드