[React] 함수형 프로그래밍 핵심 개념 - 데이터 변환

🧐 데이터 변환이란?

   함수형 프로그래밍에서는 함수를 사용해 원본을 변경한 복사본을 만들어준다.

        -> 이런 식으로 변경하면 코드가 덜 명령형이 되고, 그에 따라 복잡도도 감소한다

 

    이때 자바스크립트 안에는 데이터를 변환해서 다른 데이터를 만들어 낼 수 있게 해주는 도구들이 있다.

 

1) Array.filter

• 원본 배열로부터 새로운 배열을 만들어내는 자바스크립트 배열 내장 함수이다.
• 술어(predicate)를 유일한 인자로 받는다. (술어 : true나 false를 반환하는 함수)
• 배열에 있는 모든 원소에 이 술어를 한 번씩 호출한다.
• 술어에 배열의 원소를 인자로 전달하며, 반환 값이 true이면 해당 원소를 새로운 배열에 넣는다.

const cities = cities.filter(city => city[0] === "W") //W로 시작하는 도시만 뽑아 새로운 배열을 만들어주자.

 

• 배열에서 원소를 제거해야 할때 Array.pop이나 Array.splice보다는 Array.filter를 사용하자. (Array.filter는 순수 함수)

const cutCity = (cut, list) => list.filter(city => city !== cut)

 

2) Array.map

• Array.map은 술어가 아니라 변환 함수를 인자로 받는다.
• 함수를 배열의 모든 원소에 적용해서 반환받은 값으로 이루어진 새 배열을 반환해준다.

const seoulCities = cities.map(city => '${city} in Seoul')
//map 함수는 각 도시 이름 뒤에 Seoul을 추가해준다. 이때 원본 cities 배열은 아무 변화가 없다.

const seoulCities = cities.map(city => ({name: city}))
//문자열을 포함하는 배열로부터 객체를 포함하는 배열을 만든다.

 

• 배열의 원소 중 하나만 변경하는 순수 함수가 필요할 때도 map을 사용 할 수 있다.

let cities = {
    { name: "중랑구"},
    { name: "동대문구"},
    { name: "노원구"},
    { name: "강남구"}
}

let updatedSchools = editName("동대문구", "서대문구", cities)

const editName = (oldName, name, arr) =>
	arr.map(item => {
        if(item.name === oldName){
            return {
                ...item,
                name
            }
        }
    })
//editName 함수는 원본 배열은 그대로 둔 채 학교 이름이 바뀐 새 배열을 반환해준다.

위에서는 Array.map에 전달한 변환 함수의 파라미터가 1개뿐이었지만, 각 원소의 인덱스를 변환 함수의 두 번째 인자로 넘겨줄 수 있다.

const editNth = (n, name, arr) =>
	arr.map((item, i) => (i === n) ?
            ({...item, name}) :
            item
            )
let updateCities2 = editNth(2, "서대문구", cities)
//2번째 인자를 서대문구로 바꿔준다.

 

3) Array.reduce

• 객체를 수, 문자열, 불린 값, 객체, 심지어 함수로 변화시켜준다.

const ages = [20,3,45,23,100,52]

const maxAge = ages.reduce((max,age) => {
    if(age>max){
        return age
    } else{
        return max
    }
}, 0)
//수로 이루어진 배열에서 최댓값을 찾는 함수이다. 배열을 하나의 수로 변환해야 하므로 reduce를 사용했다.

 

• 배열의 첫번째 원소가 아닌 맨 마지막 원소부터 축약을 시작하기 위해 Array.reduceRight를 사용할 수 있다.

👍 Filter, Map, Reduce를 잘 사용해 데이터 변환을 잘해주자!