배열의 함수 (map(), filter(), every(), sort())

1. map()

map() 함수는 배열을 순회해서 각 요소를 콜백 함수로 적용해서 처리해 모은 새로운 배열을 반환하기 위한 함수이다.

 

let array = [10, 2, 17, 33, 5];

// map, 배열의 데이터는 모두 2를 곱한 값, 결과는 배열
let mapResult = array.map((value) => {
  // 조건을 판단하는 것이 아닌, 조작된 데이터를 획득하고자 하므로 리턴은 조작된 값
  return value * 2;
})
console.log(mapResult); //  [20, 4, 34, 66, 10]

 

위 코드는 다음 배열을 2배를 곱한 값을 출력하여 배열을 생성하는 map 함수의 사용 예이다.

• array 배열에 있는 각 숫자를 map() 함수로 변환하여, 각 숫자를 돌면서 배열의 데이터를 2를 곱한 값을 가지는 mapResult 배열을 생성한다.
• map() 함수를 호출 할 때 사용하는 함수는 각 숫자를 받아 2를 곱하고 그 결과 값을 반환한다.
• 중요 포인트는 map() 함수는 기존의 배열을 변경하지 않으며, 새로운 배열을 생성한다. 따라서 원본 배열이 유지 된다.
• 그래서 map () 함수의 경우는 주로 변환 작업을 간단하게 처리할 때 도움을 주며, 많이 쓰이는 함수이다.

2. filter()

배열의 요소를 순회하면서 콜백 함수를 사용하여 원하는 조건에 따라 필터링하는 함수이다.

 

let array = [10, 2, 17, 33, 5];

let filteResult = array.filter((value) => {
  // filter 함수는 조건을 명시하기 위해서 사용, 이 함수의 리턴값은 true/false
  // true가 리턴되는 value만 모아서 전달한다.
  return value > 10
});
console.log(filteResult); // [17, 33]

 

위 코드는 다음 배열을 10과 비교하여 10보다 큰 숫자 출력하는 filter 함수의 예이다.

• filter 함수는 주어진 배열의 요소를 개발자가 직접 작성한 콜백 함수를 사용하여, 원하는 조건에 따라 필터링하며, 조건을 충복하는 요소만으로 이루어진 필터링된 배열로 반환하는 함수이다.
• filter 함수의 콜백 함수는 배열을 필터링하는데 사용된다.
• 이 콜백 함수는 주어진 배열의 각 요소에 대해 호출되며, 그 결과에 따라 요소가 필터링 되거나, 되지 않거나 한다.

3. every()

배열의 모든 요소가 특정 조건을 만족하는 지 확인한다.

let array = [10, 2, 17, 33, 5];

// 배열의 데이터가 모두 조건에 만족하는지, 최종 결과는 true / false
let everyResult = array.every((value) => {
  // every 에 지정한 함수의 반환 값은 조건 판단하므로 true / false
  return value > 1;
})
console.log(everyResult); // true

 

위 코드는 다음 배열을 1보다 큰 숫자를 비교하여 모두 일치하면 true, 모두 일치하지 않으면 false를 반환하는 every 함수의 예이다.

• 모든 요소가 조건을 만족하면 true를 반환하며, 하나라도 조건이 맞지 않으면 false를 반환한다.

4. sort()

배열을 순서를 오름차순 및 내림차순으로 변경하는 함수이다.

let array = [10, 2, 17, 33, 5];

// sort. 정렬하는 함수 / 오름차순 정렬 - 작은 숫자부터 / 내림 차순 - 큰 숫자부터
// 정렬 알고리즘은 개발자 알고리즘으로 함수로 매개변수 지정
// 정렬을 하려면 두 게이터 중 어떤 것이 큰 지에 대한 판단이 있어야 한다.
// 매개 변수는 두개;

// 오름차순 - 작은 숫자부터
let ascendingResult = array.sort((data1, data2) => {
  //  반환 값은 1, 0 , -1
  // 1: data1 이 data2보다 크다.
  // 0: 두 데이터가 동일
  // -1: data2기 data1보다 크다.
  if (data1 > data2) return 1
  else if (data1 == data2) return 0
  else return -1
})

console.log(ascendingResult); // [2, 5, 10, 17, 33]

// 내림차순 - 큰 숫자부터
let descendingOrderResult = array.sort((data1, data2) => {
  if (data1 > data2) return -1
  else if (data1 == data2) return 0
  else return 1
})
console.log(descendingOrderResult); // [33, 17, 10, 5, 2]

 

위 코드는 다음 배열을 오름차순(작은 숫자부터), 내림차순(큰 숫자부터)로 배열 순서를 변경하는 sort 함수의 예이다.

• 기본적으로 문자읠 유니코드 코드 포인트를 기준으로 오름차순으로 정렬(알파벳 순서)로 되어 있다.
• 하지만, 다른 데이터 타입을 정렬하려면 콜백 함수를 사용하여 정렬 순서를 변경 할 수 있다.