해당 Post는 배열의 함수형 메소드에 대해서 정리한 파일입니다.

이제는 웹 프론트엔드에서도 데이터 처리가 점점 증가하고 있습니다.

자바스크립트에서도 배열에서 다양한 메서드를 지원함으로써 데이터를 파싱하는 등의 처리를 좀 더 손쉽게 할 수가 있습니다.

배열이란?

배열은 자바스크립트의 리스트 형태를 담을 수 있는 어떤 자료구조입니다.

배열은 순서가 있는 어떤 데이터들이 쭉 나열돼있는 것이기 때문에 for 문이나 while 문을 통해가지고 이렇게 또는 직접적으로 index 번호를 알면 그 index 번호에 있는 값을 뽑을 수 있습니다.

우리가 이제 배열을 어떻게 조정하냐면 특정 부분에 있는 값만 뽑고 싶기도 하고 또는 전체 데이터들의 어떤 값을 숫자 타입을 문자열로 치환을 한다거나 이런 등의 작업들을 할 수가 있습니다.

그래서 배열에 있는 다양한 메서드들을 통해가지고 이런 작업을 도울 수가 있는데 전체적으로는 배열을 다룰 때는 iterator,

즉, 배열을 쭉 돌면서 뭔갈 걸러내거나 아니면 어떤 값들을 계속 바꾸거나 아니면 그 배열을 기초로 새로운 배열을 만들거나 이런 작업들을 많이 하게 됩니다.

이런 것들은 프론트엔드에서의 예전과 달리 예전보다 좀 더 데이터 조작을 많이 하기 때문이라고 합니다.

프론트엔드에서 데이터 조작이 많아지는 거는 싱글페이지 때문에, 등장을 했기도 했고, 싱글페이지 등장으로 이런 일이 많이 일어나긴 했습니다.

그래서 데이터 조작을 위한 메서드들을 잘 기억을 해놔서 데이터를 좀 더 효과적으로, 효율적으로 작업하는 법을 배우는 게 굉장히 중요합니다.

for vs forEach

아래와 같은 데이터가 있다고 하겠습니다.

var data = [{title : "hello",content : "간지철철", price : 12000},
            {title : "crong",content : "괜춘한 상품", price : 5500},
            {title : "codesquad",content : "쩌는상품", price : 1200}];

for문과 forEach를 사용해보겠습니다.

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

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

forEach에서는 더 이상 i++이나 length를 판단하는 코드가 필요 없습니다.

그만큼 실수를 줄일 수 있고, 코드는 더 보기 좋습니다.

ES6의 arrow함수를 사용한다면 참고로 더 간단해집니다.

애로우 함수 예시

map, filter

map메서드는 함수에서 정의한 방법대로 모든 원소를 가공해서 새로운 배열을 반환합니다.

var filteredData = data.map(function(v) {
    return v * 1.1 ; //10% 가격을 인상!
});

filter메서드는 함수에서 정의한 조건에 맞는 원소만 추려서, 새로운 배열을 반환합니다.

var filteredData = data.filter(function(v) {
    return v.price > 5000;  //5000원이상만 추출
});

filter, map을 같이 써보기

앞선 예제를 두 개의 메서드를 연속적으로 사용하면서 풀어보겠습니다.

요구사항은 ‘숫자가 3개 이상인 데이터만, ‘원’이라는 단위를 붙여서 배열 데이터로 모은다’라고 하겠습니다.

{title: "hello", content: "간지철철", price: "12,000원"}  // 이런식으로 출력.

var filteredData = data.filter(function(v) {
  return v.price > 5000;
}).map(function(v) {
  v.price = (''+v.price).replace(/^(\d+)(\d{3})$/, "$1,$2원");
  return v;
});

이 코드에서는 5,000 이상의 값을 먼저 추출하고, 그리고 정규표현식을 사용해서 ‘원’표현식으로 변경한 배열을 반환했습니다.

원본 데이터를 유지하자(immutable)

어떤 이유로 원본데이터가 변경되면, 추적도 어렵고, 어디서 어떤 이유로 변경된 것인지 좀 알기 어렵습니다.

또한, 때론 다시 이전 상태의 값을 되돌리고 싶을 경우도 있습니다.

원본 데이터를 유지하려면?

var filteredData = data.filter(function(v) {
    return v.price > 5000;
}).map(function(v) {
  var obj = {};
  obj.title = v.title;
  obj.content = v.content;
  obj.price = (''+v.price).replace(/^(\d+)(\d{3})$/, "$1,$2원");
  return obj;
});

원래의 data값은 그대로 유지되면서 새로운 배열만 확인할 수가 있습니다.

참고로 이를 immutable하다고 표현합니다.

reduce

reduce는 배열의 모든 요소에 대해 지정된 콜백 함수를 호출하며, 콜백 함수의 반환 값을 누적하여 반환하는 함수입니다.

reduce 함수의 매개변수로 콜백 함수와 누적을 시작하기 위한 초기 값이며 초기 값은 선택사항입니다.

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

console.log(totalPrice);

위 코드는 redeuce를 사용하여 상품의 가격을 모두 합한 값을 반환하는 것을 확인하실 수 있습니다.