2023년 7월 ECMAScript는 JavaScript에 대한 몇 가지 새로운 사양을 출시했습니다. 일부 기능에는 기존 배열을 수정하지 않는 새로운 Array 메서드가 포함되어 있습니다. 이 블로그에서는 웹과 JavaScript의 최신 트렌드를 알고 싶다면 반드시 알아야 할 세 ​​가지(2024년의 하나)에 대해 이야기하겠습니다. !

Array.toSorted()

원본 Array.sort()는 배열의 요소를 제자리 정렬합니다. 때로는 이 동작을 원하지 않을 수도 있습니다. 프로그래밍에서는 일반적으로 기존 값을 수정하지 않고 새 버전을 반환하는 것이 좋습니다.

Array.toSorted()는 콜백 함수에 설명된 대로 정렬된 요소가 포함된 새 배열을 반환하여 이 문제를 해결합니다!

저는 VSCode와 웹 브라우저가 이 기능을 적절하게 지원하기 오래 전에 이미 내 코드에서 이 기능을 사용하기 시작했기 때문에 이 기능을 특히 좋아합니다!

let numbers = [4, 2, 1, 3];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4]

Array.toReversed()

Array.toReversed()는 배열을 뒤집을 수 있는 불변의 방법을 제공하는 새로운 추가 기능입니다. 원본 배열을 수정하는 Array.reverse()와 달리 Array.toReversed()는 원본을 변경하지 않은 채 배열의 역방향 복사본을 반환합니다.

let letters = ['a', 'b', 'c', 'd'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']

Array.ToSpliced()

Array.toSpliced()는 배열 내의 요소를 제거, 교체 또는 추가하는 비파괴적인 방법을 제공합니다. 전통적인 Array.splice()는 배열을 직접 수정하지만 Array.toSpliced()는 변경 사항이 적용된 새 배열을 생성하고 원래 배열은 변경되지 않은 채로 둡니다. 이는 소스 데이터에 영향을 주지 않고 변경 사항을 적용해야 할 때 유용할 수 있습니다.

let numbers = [1, 2, 3, 4, 5];
let splicedNumbers = numbers.toSpliced(1, 2, 6, 7);
console.log(splicedNumbers); // Output: [1, 6, 7, 4, 5]
console.log(numbers); // Output: [1, 2, 3, 4, 5]

객체.그룹별()

이 방법은 ES2024에서 공식적으로 출시되었지만 이전에도 폴리필을 사용하여 사용할 수 있었고 이미 ECMAScript의 이후 단계로 발전했습니다.

Object.groupBy()는 특정 개체 속성을 기반으로 지정된 배열의 항목을 그룹화합니다. 이는 매우 유용하며 특정 개체 목록을 그룹화한 다음 키-값 구조에 따라 그에 따라 반복하려는 경우 매우 유용할 수 있습니다. 이 메서드에 대한 흥미로운 사실은 웹 호환성 문제로 인해 배열의 프로토타입 메서드로 구현되지 않았다는 것입니다. (많은 오래된 JavaScript 라이브러리가 이미 Array.prototype.group() 네임스페이스 내에 일부 코드를 구현하고 있었기 때문에 그렇습니다!)

보너스: 여러 요소별로 그룹화하기 위해 자체 Object.groupBy() 구현

결국에는 여러 속성별로 그룹화해야 할 수도 있습니다. 원래 Object.groupBy()는 한 수준에서만 그룹화됩니다.

프로젝트에서 아래 코드를 구현하여 여러 속성으로 요소를 그룹화하세요!

function multiLevelGroupBy(array, criteria) {
  // Base case: if no criteria are left, return the array itself
  if (criteria.length === 0) return array;

  // Get the first criterion
  const [firstCriterion, ...remainingCriteria] = criteria;

  // Group by the first criterion
  const grouped = array.reduce((acc, item) => {
    const key = firstCriterion(item);
    if (!acc[key]) acc[key] = [];
    acc[key].push(item);
    return acc;
  }, {});

  // For each group, recursively apply the remaining criteria
  for (let key in grouped) {
    grouped[key] = multiLevelGroupBy(grouped[key], remainingCriteria);
  }

  return grouped;
}

예:

const data = [
  { country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' },
  { country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' },
  { country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' },
  { country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' },
  { country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' },
]

let groupedData = multiLevelGroupBy(data, [
  item => item.country,
  item => item.state,
  item => item.city
]);

console.log(groupedData);

/* Expected Output: */
{
  USA: {
    California: {
      'Los Angeles': [{ country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' }],
      'San Francisco': [{ country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' }]
    },
    New York: {
      'New York City': [{ country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' }]
    }
  },
  Canada: {
    Ontario: {
      Toronto: [{ country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' }]
    },
    Quebec: {
      Montreal: [{ country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' }]
    }
  }
}

끝!

이 글을 끝까지 읽어주셨다면, 읽어주셔서 정말 감사드립니다! ?