- Published on
2024.03.19
JavaScript 배열 메서드인데요 6
ES2023
이번 글에는 ES2023에서 추가된 메서드가 등장하는데, 해당 메서드들은 발표된 지 얼마 되지 않아 브라우저의 버전에 따라 지원하지 않는 환경이 있을 수 있다. 사용하기 전에 해당 메서드의 MDN 페이지에서 브라우저 호환성을 살펴보는 것을 추천한다.
.toReversed()
toReversed() 메서드는 비교적 최근인 ES2023에서 나온 메서드로 이전 버전의 환경에서는 작동하지 않을 수 있다. reverse() 메서드와 같이 배열의 요소들의 순서를 반대로 뒤집는다. 차이점은 toReversed()는 reverse()와 달리 원본 배열을 변경하지 않는다.
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.toReversed()) // [ 5, 4, 3, 2, 1 ]
console.log(numbers) // [ 1, 2, 3, 4, 5 ]
console.log(numbers.reverse()) // [ 5, 4, 3, 2, 1 ]
console.log(numbers) // [ 5, 4, 3, 2, 1 ]
.toSorted()
toSorted() 메서드도 toReverse()와 같이 ES2023에서 발표되었으며, 기존의 sort()와 비교해서 작동하는 방식의 차이점도 닮았는데, 배열의 요소들을 정렬하지만 sort()와는 달리 원본 배열을 변경하지 않는다.
const numbers = [3, 15, 8, -1, 2, 0]
console.log(numbers.toSorted((a, b) => a - b)) // [ -1, 0, 2, 3, 8, 15 ]
console.log(numbers) // [ 3, 15, 8, -1, 2, 0 ]
console.log(numbers.sort((a, b) => a - b)) // [ -1, 0, 2, 3, 8, 15 ]
console.log(numbers) // [ -1, 0, 2, 3, 8, 15 ]
.toSpliced()
toSpliced() 메서드도 ES2023에서 발표되었으며, 기존의 splice()와 같이 배열의 특정 요소를 삭제, 교체하거나 새 요소를 추가하지만 원본을 변경하지 않는다.
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.toSpliced(3, 0, 11)) // [ 1, 2, 3, 11, 4, 5 ]
console.log(numbers) // [ 1, 2, 3, 4, 5 ]
numbers.splice(2, 0, 10) // 인덱스 2에 10 추가
console.log(numbers) // [ 1, 2, 10, 3, 4, 5 ]
console.log(numbers.toSpliced(2, 2)) // [ 1, 2, 4, 5 ]
console.log(numbers) // [ 1, 2, 10, 3, 4, 5 ]
numbers.splice(2, 2) // 인덱스 2부터 2개의 요소 제거
console.log(numbers) // [ 1, 2, 4, 5 ]
.toString()
toString() 메서드는 배열의 요소들을 쉼표로 구분한 하나의 문자열을 리턴한다. 특징으로는 배열 내의 요소가 배열이나 객체일 경우, toString() 메서드를 상속받아 다시 요소를 문자열로 리턴한다. 단 객체는 문자열 [object Object]로 리턴된다.
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.toString()) // 1,2,3,4,5
const array = [1, [2, 3], { key: 'value' }]
console.log(array.toString()) // 1,2,3,[object Object]
.unshift()
unshift() 메서드는 매개변수로 받은 요소를 배열의 첫 번째 요소로 추가하고 새로운 배열의 길이를 리턴한다. 원본 배열은 변경되어 요소들의 위치가 추가된 요소만큼 밀린다. 한 번에 여러 개의 요소를 추가할 수 있다.
const fruits = ['apple', 'banana', 'orange']
console.log(fruits.unshift('grape')) // 변경된 배열의 길이 리턴 4
console.log(fruits) // [ 'grape', 'apple', 'banana', 'orange' ]
fruits.unshift('cherry', 'lemon')
console.log(fruits) // [ 'cherry', 'lemon', 'grape', 'apple', 'banana', 'orange' ]
.values()
values() 메서드는 배열의 각 요소를 순회하는 이터레이터 객체를 리턴한다. 이터레이터를 통해 각 요소의 값을 순회할 수 있다.
const fruits = ['apple', 'banana', 'orange']
const iterator = fruits.values()
console.log(iterator.next()) // { value: 'apple', done: false }
console.log(iterator.next()) // { value: 'banana', done: false }
console.log(iterator.next()) // { value: 'orange', done: false }
console.log(iterator.next()) // { value: undefined, done: true }
주로 for..of 반복문을 통해 배열의 요소를 순회할 때 사용된다.
for (const value of iterator) {
console.log(value)
}
// apple
// banana
// orange
.with()
with() 메서드도 ES2023에서 발표되었으며, 기존의 대괄호 표기법과 작동 방식이 유사하다. 매개변수로 변경할 인덱스와 할당할 값 2가지를 받아 해당 인덱스의 값을 수정한다. 차이점은 원본 배열에 영향을 주지 않는다.
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.with(2, 6)) // [1, 2, 6, 4, 5]
console.log(numbers) // [1, 2, 3, 4, 5]
numbers[2] = 6
console.log(numbers) // [ 1, 2, 6, 4, 5 ]
참고 문서 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array