Javascript : 배열 메서드 (배열 변형)

출처: 한 입 크기로 잘라먹는 리액트

// 배열 메서드 3. 변형

// 5가지의 배열 변형 메서드
// 1. filter
// 기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환

let arr1 = [
  {name: "카리나", hobby: "지민이는 뭐 좋아하니"},
  {name: "윈터", hobby: "민정이는 뭐 좋아하니"},
];

const aespa = arr1.filter((item) => {
  if (item.hobby === "지민이는 뭐 좋아하니") return true
})

console.log(aespa) // {name: "카리나", hobby: "지민이는 뭐 좋아하니"}

// 2. map
// 배열의 모든 요소를 순회하면서 각각 콜백함수를 실행하고 그 결과값들을 모아서 새로운 배열로 반환

let arr2 = [1, 2, 3];
const mapResult = arr2.map((item, idx, arr) => {
  console.log(idx, item); // 0 1, 1 2, 2 3 forEach와 똑같이 동작함
  return item * 2; // 이게 다른 차이점
});

console.log(mapResult) // [ 2, 4, 6] 원본 배열을 변경한 새로운 메서드

let names = arr1.map((item) => item.name);
console.log(names); // [카리나, 윈터]

// 3. sort
//배열ㅇㄹ 사전순으로 정렬하는 메서드

let arr3 = ["b", "a", "c"];
arr3.sort()

console.log(arr3); // ['a', 'b', 'c']

// 만약 숫자값으로 저장된 배열이었다면 정상적으로 정렬이 이루어지지 않는다.
// sort 메서드는 배열을 사전순으로 정렬하는 메서드이기 때문. 숫자의 대소 비교는 고려하지 않는다.
// 숫자를 비교 기준으로 하고 싶다면.

arr3.sort((a,b) => {
  if(a > b) {
    return 1; // 둘중에 더 작은 값이 앞으로 오게 하려면 양수로 설정. (오름차순)
  } else if (a < b) {
    return -1;
  } else {
    return 0; // 자리 값 바꾸지 마라
  }
})

// 4. toSorted
// sort와 다른 점은 원본 배열은 그대로 두고, 새로운 배열을 반환하는 메서드다.
let arr5 = ["c", "a", "b"]
const sorted = arr5.toSorted();

console.log(arr5); // ["c", "a", "b"]
console.log(sorted); // ["a", "b", "c"]


// 5. join
// 배열의 모든 요소를 하나의 문자열로 합쳐서 반환하는 메서드

let arr6 = ["유지민","너무 예쁘다"];
const joined =arr6.join('');
console.log(joined) // 유지민 너무 예쁘다.