배열의 메소드 3 (map, filter, reduce, sort, reverse)

배열 변형하기

 

1. map

배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환한다.

let results = arr.map(function(item, index, array) {
  // 조건을 충족하는 요소는 results에 순차적으로 더해집니다.
  // 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환됩니다.
});

let arr = [1,2,3,4,5];
let mapped = arr.map(function(item) { return item * 2; });

console.log(mapped); // [2,4,6,8,10]

2.  filter

지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환.

let results = arr.filter(function(item, index, array) {
  // 조건을 충족하는 요소는 results에 순차적으로 더해집니다.
  // 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환됩니다.
});

let arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
let even = function( value ) {
  return value % 2 === 0;
};
let newArr = arr.filter( even );
console.log( newArr ); // [ 2, 4, 6, 8, 10 ]

filter() 메소드와의 차이점

• filter: 조건을 만족하는 모든 요소를 배열 형태로 반환
• find: 조건을 만족하는 하나의 요소만을 반환

3. reduce

콜백함수를 적용해 배열을 단일값으로 줄임

let results = arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

reduce 메소드는 두개의 매개변수를 받는다.

 

1. 콜백함수 : previousValue(이전값), currentValue(현재 값), currentIndex(현재 인덱스), array(배열 자체)

2. 초기값 : 초기값을 지정하지 않으면 배열의 첫번째 요소를 이전값으로 사용하게 되므로, 배열이 비어있을때는 초기값을 지정해줘야 한다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((previousValue, currentValue) => {
  return previousValue + currentValue;
}, 0);
console.log(sum); // 출력: 15


const words = ['Apple', 'Banana', 'Cat', 'Dog'];
const result = words.reduce((previousValue, currentValue) => {
  return previousValue + ', ' + currentValue;
}, '');
console.log(result); // 출력: "Apple, Banana, Cat, Dog"

4. sort

배열의 요소 정렬

sort는 매개변수를 받지 않거나, 비교함수를 매개변수로 받을 수 있다.

let results = arr.sort();

// 숫자 배열 정렬하기
const numbers = [3, 2, 5, 1, 4];
numbers.sort();
console.log(numbers); // 출력: [1, 2, 3, 4, 5]

// 문자열 배열 정렬하기
const fruits = ['banana', 'orange', 'apple', 'kiwi'];
fruits.sort();
console.log(fruits); // 출력: ["apple", "banana", "kiwi", "orange"]

// 객체 배열 정렬하기
const persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 },
];
persons.sort((a, b) => a.age - b.age); // 나이순으로 정렬
console.log(persons);
// 출력: [
//         { name: "Bob", age: 20 },
//         { name: "Alice", age: 25 },
//         { name: "Charlie", age: 30 }
//      ]

많이 사용하는 오름차순, 내림차순 식 정리

// 오름차순 정렬
const arr1 = [5, 2, 7, 1, 8];
arr1.sort((a, b) => a - b); // 배열을 오름차순으로 정렬
console.log(arr1); // [1, 2, 5, 7, 8]

const arr2 = ['z', 'a', 'b', 'c', 'A', 'Z'];
arr2.sort((a, b) => a.localeCompare(b)); // 배열을 오름차순으로 정렬
console.log(arr2); // ["A", "Z", "a", "b", "c", "z"]


// 내림차순 정렬
const arr3 = [5, 2, 7, 1, 8];
arr3.sort((a, b) => b - a); // 배열을 내림차순으로 정렬
console.log(arr3); // [8, 7, 5, 2, 1]

const arr4 = ['z', 'a', 'b', 'c', 'A', 'Z'];
arr4.sort((a, b) => b.localeCompare(a)); // 배열을 내림차순으로 정렬
console.log(arr4); // ["z", "c", "b", "a", "Z", "A"]

5. reverse

배열 뒤집기

let results = arr.reverse();