[JS]키값 쌍이 여럿 있는 배열에서 특정 키의 값이 동일한 경우만 골라 추출_filter()

해법

자바스크립트에서 배열(Array)의 메서드 중 하나인 filter() 메서드를 사용하여, 배열에서 특정 조건을 만족하는 요소들을 추출할 수 있다

const arr = [
  { "id": 1, "name": "Shauna", "age": 25 },
  { "id": 2, "name": "Taissa", "age": 30 },
  { "id": 3, "name": "Misty", "age": 25 },
  { "id": 4, "name": "Natalie", "age": 35 },
  { "id": 5, "name": "Jackie", "age": 25 }
];

위와 같은 배열이 있다고 가정,
age 키의 값이 25인 요소들만 추출하려면

const filteredArr = arr.filter(item => item.age === 25);

item.age === 25 조건을 만족하는 요소들만 추출하여 filteredArr 배열에 저장하였다. 따라서 filteredArr 배열은 다음과 같은 값을 가지게 된다.

[
  { "id": 1, "name": "Shauna", "age": 25 },
  { "id": 3, "name": "Misty", "age": 25 },
  { "id": 5, "name": "Jackie", "age": 25 }
]

해설

• filter() 메서드는 매개변수로 전달된 콜백 함수를 사용하여, 배열의 모든 요소를 순회하면서, 콜백 함수가 true를 반환하는 요소들로만 새로운 배열을 생성한다. 이 때, 새로운 배열은 원래 배열의 일부분일 수도 있고, 전체일 수도 있다.

• arr이라는 배열에서, item이라는 변수가 각 요소를 대표하도록 설정하고, 해당 요소의 age 프로퍼티 값이 25와 같은지 여부를 검사한다. 만약 같다면, true를 반환하고, 같지 않다면 false를 반환한다. 이렇게 반환된 값으로 새로운 배열을 생성한다.

• item => item.age === 25라는 화살표 함수(람다식)를 사용하여, filter() 메서드의 인자로 콜백 함수를 전달하였다. 이 화살표 함수는 item이라는 매개변수를 가지고 있고, 해당 요소의 age 프로퍼티 값이 25와 같은지 여부를 검사하여, true나 false를 반환한다.

• 함수형 프로그래밍 패턴의 대표적인 예시로, filter() 메서드는 원본 배열을 변경하지 않고, 새로운 배열을 생성하기 때문에, 함수형 프로그래밍에서 중요한 불변성(Immutability)의 원칙을 따른다. 또한, filter() 메서드는 순수 함수(Pure Function)로 작성되어 있어, 입력값이 같으면 항상 같은 결과를 반환하고, 부작용(Side Effect)이 없다는 특징을 가진다.