코딩 변화를 가져올 새로운 JavaScript 메소드 4가지 완벽 가이드

2024-11-03 22:23:52

javascriptbeginnerswebdevreact

JavaScript의 새로운 메소드 소개

1. Array.toSorted()

JavaScript의 새로운 메소드 중 하나인 Array.toSorted()는 배열의 원본을 수정하지 않고 정렬된 새로운 배열을 반환합니다. 이는 기존의 Array.sort()와는 달리 불변성을 보장합니다. 특히, 불변성은 코드를 보다 안정적이고 유지 보수하기 쉽게 만들어줍니다.

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

2. Array.toReversed()

기존의 Array.reverse()는 배열을 제자리에서 뒤집지만, Array.toReversed()는 원본 배열을 변경하지 않고 뒤집힌 새로운 배열을 반환합니다. 이는 기존 데이터의 무결성을 유지하면서 필요할 때마다 새로운 배열을 생성할 수 있어 유용합니다.

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

3. Array.toSpliced()

배열 내의 요소를 제거하거나 교체하면서 원본 배열을 유지하는 또 다른 메소드입니다. Array.toSpliced()는 기존의 Array.splice()와 다르게, 배열을 직접 수정하지 않고 새로운 배열을 반환합니다.

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

4. Object.groupBy()

2024년 ES2024에서 정식으로 도입된 Object.groupBy()는 배열 내 객체를 특정 속성에 따라 그룹화합니다. 이는 데이터를 구조적으로 관리할 때 특히 유용합니다.

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);

/* 예상 출력:
{
  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' }]
    }
  }
}
*/

결론

JavaScript의 새로운 메소드는 개발자에게 더 많은 가능성과 효율성을 제공합니다. 불변성을 보장하는 이러한 메소드를 통해 코드의 안정성과 유지 보수성을 더욱 높이세요. JavaScript를 배우고 있는 초보자나 이미 JavaScript를 사용하고 있는 개발자 모두, 이 새로운 메소드들을 프로젝트에 적용함으로써 복잡한 문제를 보다 논리적으로 해결할 수 있을 것입니다.

추가 참고 자료

블로그를 읽어주셔서 감사합니다! 😊

R_11