[JS] 자바스크립트 함수형 접근(functional approach)

예를 들어 DB에서 조건에 맞는 값들을 얻어야 하는 상황이라고 가정해 보자.

1. 고전적인 방법이지만 익숙한 방법은 for문을 통해 DB를 전체 탐색하며 하나하나 조건을 살펴보는 방법이 있을 것이다.
2. 또 다른 방법으로는 모던 자바스크립트를 이용하여 함수를 통해 접근하는 것이다.

const DB = [
  {
    name: 'tom',
    age: '20',
    city: 'seoul',
  },
  {
    name: 'go',
    age: '30',
    city: 'busan',
  },
  {
    name: 'you',
    age: '24',
    city: 'seoul',
  },
  {
    name: 'cam',
    age: '40',
    city: 'seoul',
  },
]

다음 과 같은 유저 정보가 있을때 30세 이하가 사는 도시의 리스트 를 구해보자.

• for문을 통한 접근

const cities = []

for (const person of DB) {
  if (person.age <= 30) {
    if (!cities.find((city) => city === person.city)) {
      cities.push(person.city)
    }
  }
}

console.log(cities)

DB에 있는 요소를 하나씩 접근하여 조건을 만족하는지 확인하고 조건에 만족하고, 중복 값이 아닌 경우에 대해서만 push하도록 하여 결과를 얻어냈다.

• 함수형 접근

const allCities = DB.filter((person) => person.age <= 30).map(
  (person) => person.city
)
const cities = Array.from(new Set(allCities))
console.log(cities)

먼저 filter함수를 통해 30세 이하의 조건에 만족하는 객체 리스트를 만들었고 이어서 map을 통해 city의 값만 저장하였다. 그리고 중복 값을 해결하기 위하여 Set을 사용했다.

위 두개의 코드의 차이점은 무엇일까?

함수형 접근 의 경우에는 mutation이 일어나지 않는다. 즉 값의 변형이 일어나지 않는다.

즉 불변성 을 만족하는 코드라고 볼 수 있다. 반면 for문은 mutation이 일어날 수 있기에 그로 인해 값의 변화를 계속하여 tracking해야 하고 문제가 복잡해질수록 mutation에 의한 문제가 발생할 수 있다.