[JavaScript] 배열 변형 메서드 (filter, map, sort, toSorted, join)

filter

기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환

💡반환값을 정할 수 없음💡

arr1 = [{ name: "포도" }, { name: "감자" }];

const filterdItem = arr1.filter((item) => {
  if (item.name === "포도") {
    return true;
  }
});

const filterdItem = arr1.filter((item) => item.name === "포도");

console.log(filterdItem);

// { name: "포도" }

map

모든 요소를 순회, 각각 요소들에 콜백함수 수행, 그 결과를 새로운 배열로 반환

💡forEach와 다른점 : 반환값 설정가능
💡filter와 다른점 : 모든 요소에 대해 값을 반환

arr2 = [1, 2, 3, 4, 5];
const mapArr = arr2.map((item, idx, arr) => {
    return item * 2;
});

console.log(mapArr);

// [2, 4, 6, 8, 10]

let names = arr1.map((item) => item.name);

console.log(names);

// ["포도", "감자"]

map은 모든 요소에 대해 값을 반환하므로

arr2 = [1, 2, 3, 4, 5];
const mapArr = arr2.map((item, idx, arr) => {
  if (item % 2 === 0) {
    return item;
  }
});

console.log(mapArr);

이런 조건식에서는

[undefined, 2, undefined, 4, undefined]

이렇게 나오게됨! 그래서 조건에 만족하는 것만 찾을 때는 filter

sort

배열을 사전순으로 정렬하는 메서드

let arr3 = ["나", "가", "다"];

arr3.sort();
console.log(arr3);

// ["가", "나", "다"]

💡근데 숫자는 안됌. 따로 콜백함수를 써야함

• 오름차순 정렬

// 오름차순
arr3 = [10, 3, 5];
arr3.sort((a, b) => {
  if (a > b) {
    return 1;
  } // b가 a앞에 와야함 (작은 수가 앞으로 갈때는 1)
  else if (a < b) {
    return -1;
  } else {
    return 0;
  }
});

console.log(arr3);

// [3, 5, 10]

• 내림차순 정렬

arr3.sort((a, b) => {
  if (a > b) {
    return -1; // 두 개 위치를 안바꿀때는 -1(큰 값이 앞에 와라)
  } else if (a < b) {
    return 1;
  } else {
    return 0;
  }
});

console.log(arr3);

// [10, 5, 3]

toSorted

정렬된 새로운 배열을 반환하는 메서드
원본을 바꾸지는 않음

arr4 = ["c", "b", "a"];

console.log(arr4.toSorted());
// ["a", "b", "c"]
console.log(arr4);
// ["c", "b", "a"]

join

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

arr5 = ["안녕", "간식", "먹고싶다"];
const joinedArr = arr5.join("-");
console.log(joinedArr);

// 안녕-간식-먹고싶다