함수형 프로그래밍 개념

불변성

객체

let color_lawn = {
  title: "잔디",
  color: "green",
  rating: 0,
};

• 원본 손상

function rateColor(color, rating) {
  color.rating = rating;
  return color;
}

• 원본 유지 ( 첫 번째 방법 )

function rateColor(color, rating) {
  return Object.assign({}, color, { rating });
}

• 원본 유지 ( 두 번째 방법 )

const rateColor = (color, rating) => ({...color, rating});

배열

let colorList = [
  {title: "빨강"},
  {title: "주황"},
  {title: "노랑"}
];

• 원본 손상

const addColor = function(title, colors){
  colors.push({title});
  return colors;
}

• 원본 유지 ( 첫 번째 방법 )

const addColor = (title, colors) => colors.concat({title});

• 원본 유지 ( 두 번째 방법 )

const addColor = (title, colors) => [...colors, {title}];

순수 함수

특징

• 파라미터에 의해서만 반환값이 결정되는 함수
• 인자가 같으면 항상 같은 값 ( 또는 함수 ) 을 반환한다.
• 부수효과 ( side effect ) 가 없다.
• 인수를 immutable 데이터로 취급한다.
• 인수만 제어하면 되기 때문에 테스트하기가 쉽다. ( testable )
  
  

만드는 규칙

1. 순수함수는 파라미터를 최소 1개 이상 받아야 한다. 파라미터가 없다면 결과가 항상 같기때문에 상수와 같다.
2. 순수함수는 값이나 다른 함수를 반환해야 한다.
3. 순수함수는 인자나 함수밖에 있는 다른 변수를 변경하거나 입출력을 수행해서는 안된다.

   디버깅을 위해 console.log()로 터미널에 출력하는 행위와 같이 위반하는 경우도 있지만 병렬/동시성 프로그래밍에서는 그런 행위에 의해 함수와 외부환경과의 상호작용이 바뀔수도 있음을 명확히 인지하고는 있어야 한다. 실제 디버깅을 위해 추가한 코드로 인해서 프로그램의 동작이 바뀌는 경우를 하이젠 버그 ( Heisenbug ) 라고 부른다.

데이터 변환

Array.join()

const schools = ["서울초", "부산초"];
const newString = schools.join(",");
console.log(newString); // 서울초,부산초

Array.filter()

const schools = ["서울초", "부산초"];
const filteredSchools = schools.filter(school=> school[0]==="부");
console.log(filteredSchools); // ["부산초"]

이 메소드는 술어 ( predicate ) 를 유일한 인자로 받는다.

불린 값을 반환하는 함수를 술어라 부른다.

[ Tip ] 배열에서 원소를 제거할 일이 있다면 Array.pop() 이나 Array.splice() 보다는 Array.filter() 를 사용하자. Arrary.filter() 가 순수함수이기 때문이다.

const schools = ["서울초", "부산초"];
const cutSchool = (cut, list) => list.filter(school => school !== cut);
const newSchools = cutSchool("서울초", schools);
console.log(newSchools); // ["부산초"]

Array.map()

const schools = ["서울초", "부산초"];
const fullnameSchools = schools.map(school => `${school}등학교`);
console.log(fullnameSchools); // ["서울초등학교", "부산초등학교"]

이 메소드는 값, 함수, 객체, 배열 등 모든 자바스크립트 타입의 값으로 이뤄진 배열을 만들 수 있다.

• 첫 번째 예시 ( 문자열 아이템 ➡️ 객체 아이템 )

const schools = ["서울초", "부산초"];
const schoolObjs = schools.map(school => ({name: school}));
console.log(schoolObjs); // [{"name":"서울초"},{"name":"부산초"}]

• 두 번째 예시 ( 객체 아이템 ➡️ 객체 아이템 ) Object.key() 와 Array.map() 의 조합

const kbo = {
  "롯데" : 0,
  "삼성" : 2,
  "NC" : 1,
};

const kboArray = Object.keys(kbo).map(key=>({name: key, wins: kbo[key]}));
console.log(kboArray); // [{"name":"롯데","wins":0},{"name":"삼성","wins":2},{"name":"NC","wins":1}]

[ Tip ] 배열의 원소중 하나만을 변경하는 순수함수가 필요할 때 Array.map() 을 사용한다.

const nameList = [{name: "홍길동"}, {name: "김철수"}];
const editName = (oldName, name, arr) => arr.map(item => {
  if(item.name === oldName) return {...item, name};
  else return item;
});
const newNames = editName("홍길동", "김길동", nameList);
console.log(newNames); // [{"name":"김길동"},{"name":"김철수"}]

Array.reduce()

배열을 기본타입의 값이나 다른 객체로 변환한다.

• 첫 번째 예시 ( 배열 ➡️ 숫자 )

const ages = [3, 4, 2, 0, 5];
const max = ages.reduce((max, value) => value > max ? value : max, 0);
console.log(max); // 5

• 두 번째 예시 ( 배열 ➡️ 객체 )

const colors = [
  { id: uuid.v4(), title: "빨강", rating: 3},
  { id: uuid.v4(), title: "초록", rating: 1},
];

const hashColors = colors.reduce((hash, {id, title, rating})=>{
  hash[id] = {title, rating};
  return hash;
}, {});

console.log(JSON.stringify(hashColors, null, 2));
// {
//   "9a744323-5e69-44d5-bbae-ed917a7cfa4e": {
//     "title": "빨강",
//     "rating": 3
//   },
//   "5ccda945-dfcc-4992-906d-dc2ac089ced6": {
//     "title": "초록",
//     "rating": 1
//   }
// }

[ 참고 ] : 러닝 리액트 ( 2판 )