JavaScript/함수형 프로그래밍

[JavaScript]함수형 프로그래밍 - 데이터 변환

DevStory 2021. 8. 14.

함수형 프로그래밍에서 순수 함수의 요건을 다시 한번 정리해봅시다.

1. 파라미터를 최소 하나 이상 받으며 파라미터에 의해서만 반환 값이 결정됩니다.

2. 값이나 다른 함수를 반환합니다.

3. 부수 효과가 없어야 합니다.

4. 입출력을 수행해서는 안 됩니다.

즉, 순수 함수는 함수 외부의 값을 변경하지 않아야 하고 값을 반환해야 합니다.

대부분 자바스크립트 개발자들은 기존의 값을 변경하지 않고 새로운 값을 반환하는 순수 함수를 많이 사용해왔습니다.

다만, 그 함수들을 함수형 프로그래밍의 개념과 순수 함수와 관련지어서 생각을 못 했을 뿐이죠.

대표적으로 Array.map 함수와 Array.reduce 함수가 존재합니다.

이번 포스팅에서는 배열에서 지원하는 함수들을 사용하여 어떻게 새로운 값을 반환하는지 정리합니다.

Array.join 함수

join 함수는 배열의 요소들을 연결하여 새로운 문자열을 반환합니다.

아래 코드는 language 배열의 요소들을 구분자(', ')로 구분하여 하나의 새로운 문자열을 반환합니다.

var language = [
  'Korean',
  'English',
  'German'
];

console.log(language.join(', '));
// Korean, English, German

console.log(language);
// ["Korean", "English", "German"]

join 함수는 파라미터에 의해서만 반환되는 값이 달라집니다.

☞ 파라미터에 의해서만 반환 값이 결정됩니다.

join 함수는 원래 배열인 language의 데이터를 변환하여 새로운 값을 반환합니다.

☞ 값이나 다른 함수를 반환합니다.

join 함수를 사용하고 나서 원래 배열인 language의 값은 그대로 유지됩니다.

☞ 부수 효과가 없어야 합니다.

join 함수는 입출력이 없습니다.

☞ 입출력을 수행해서는 안 됩니다.

눈치채셨나요?

join 함수는 순수 함수의 요건들을 만족하기 때문에 join 함수는 순수 함수입니다.

Array.filter 함수

filter 함수는 배열의 요소들을 순차적으로 순회하여 true라면, 해당 배열의 요소를 새로운 배열에 넣습니다.

☞ filter 함수 사용 방법 보러 가기

filter 함수도 join 함수와 마찬가지로 원래 배열의 값은 유지하고 새로운 값을 반환하는 순수 함수입니다.

아래 코드는 language 배열에서 'Korean'인 요소를 삭제하는 코드입니다.

var language = [
  'Korean',
  'English',
  'German'
];

var filterArr = language.filter(function(item) {
  return item !== 'Korean'
});

console.log(filterArr);
// ["English", "German"]

만약, 배열의 요소를 삭제하는 Array.pop, Array.splice, Array.shift 함수를 사용했다면?

원래 배열의 요소의 값이 삭제되므로 순수 함수에 위반됩니다.

splice 함수를 사용

'Korean'이라는 값이 어디에 존재하는지 또는 여러 개 있을 수도 있으므로 for문으로 순회하여 제거합니다.

var language = [
  'Korean',
  'English',
  'German'
];

for(var i = 0; i < language.length; i++){ 
  if (language[i] === 'Korean') { 
    language.splice(i, 1); 
    i--; 
  }
}
console.log(language);
// ["English", "German"]

Array.map 함수

map 함수는 배열의 요소들을 순차적으로 순회하여 반환받은 값으로 이루어진 새 배열을 반환합니다.

☞ map 함수 사용 방법 보러 가기

아래 코드는 배열의 요소 뒤에 ' language'를 추가합니다.

var language = [
  'Korean',
  'English',
  'German'
];

var mapArr = language.map(function(item) {
  return item + ' languange'
});

console.log(mapArr);
// ["Korean languange", "English languange", "German languange"]

console.log(language);
// ["Korean", "English", "German"]

map 함수를 사용하여 원래 배열은 변경되지 않고 원래 배열의 데이터를 변환하여 새로운 배열을 반환하였습니다.

map 함수를 잘 사용한다면, 문자열뿐만 아니라 객체, 값, 배열을 요소로 하는 새로운 배열을 반환할 수 있습니다.

아래 코드는 객체를 요소로 하는 새로운 배열을 반환합니다.

var language = [
  'Korean',
  'English',
  'German'
];

var mapArr = language.map(function(item) {
  return {name : item}
});

console.log(mapArr);
// [{name : "Korean languange"}, {name : "English languange"}, {name : "German languange"}]

console.log(language);
// ["Korean", "English", "German"]

실행 결과

Array.reduce 함수

앞에서 join 함수를 사용하여 새로운 문자열을 반환하는 방법과 map 함수와 filter 함수를 사용하여 새로운 배열을 반환하는 방법을 알아보았습니다.

map 함수와 filter 함수는 배열만 반환하므로 어느 정도 제한적인데, reduce 함수는 배열을 숫자, 문자열, 불리언 값, 객체, 함수로 변환할 수 있습니다.

☞ reduce 함수 사용 방법 보러 가기

아래 코드는 reduce 함수를 사용하여 최댓값을 구합니다.

reduce 함수를 사용하여 숫자가 반환되었으며, 원래 배열의 값은 변경되지 않았습니다.

var arr = [5, 10, 1, 20, 15]

var maxValue = arr.reduce((max, data) => {
  return data > max ? data : max;
}, 0)

console.log(maxValue);
// 20

console.log(arr)
// [5, 10, 1, 20, 15]

아래 코드는 reduce 함수를 사용하여 객체를 반환합니다.

var companyArr = [
  { id: 100, company: 'Google', Chairman : 'Eric Emerson Schmidt' },
  { id: 200, company: 'Facebook', Chairman : 'Mark Elliot Zuckerberg' },
  { id: 300, company: 'Apple', Chairman : 'Timothy Donald Cook' }
]

var reduceObj = companyArr.reduce(function(obj, {id, company, Chairman}) {
  obj[id] = { company, Chairman };
  return obj;
}, {});
  
console.log(reduceObj);

console.log(companyArr);