🚀 94sssh
Published on

2024.03.10

JavaScript 배열 메서드인데요 5

.reverse()

reverse() 메서드는 배열 내 요소의 순서를 반대로 바꾼다. 단순히 순서를 거꾸로 바꿀 필요가 있을 때 유용하다. 주의할 점은 원본 배열이 변경된다.

const numbers = [1, 2, 3, 4, 5]

console.log(numbers.reverse()) // [5, 4, 3, 2, 1]

.shift()

shift() 메서드는 배열의 첫번째 요소를 제거하고 해당 요소를 리턴한다. 원본 배열은 변경되어 요소들의 위치가 하나씩 당겨진다. 배열이 비어있었다면 undefined를 리턴한다. 특히 큐 자료구조에서 많이 쓰인다.

const fruits = ['apple', 'banana', 'orange']

console.log(fruits.shift()) // 'apple'
console.log(fruits) // ['banana', 'orange']

fruits.shift()

console.log(fruits) // ['orange']

.slice()

slice() 메서드는 배열의 일부분을 얕은 복사하여 새로운 배열을 리턴한다. 원본 배열은 변경되지 않는다. slice()는 두 개의 매개변수를 받는데 시작 인덱스와 끝 인덱스로 매개변수는 생략할 수 있다. 시작 인덱스는 해당 인덱스의 요소를 포함하며, 끝 인덱스는 해당 인덱스의 요소를 포함하지 않은 배열을 리턴한다. 끝 인덱스를 생략할 경우 배열의 끝까지 추출된다. 각 매개변수는 음수를 받을 경우 배열의 끝에서 역순으로 인덱스를 계산한다.

const numbers = [1, 2, 3, 4, 5]

console.log(numbers.slice(1)) // [ 2, 3, 4, 5 ]
console.log(numbers.slice(1, 4)) // [ 2, 3, 4 ]
console.log(numbers.slice(2, 5)) // [ 3, 4, 5 ]

.some()

some() 메서드는 배열의 요소를 순회하면서 전달한 콜백 함수에 대하여 true를 리턴하는 요소가 하나라도 있으면 true를 리턴한다. 모든 요소가 false를 리턴하면 false를 리턴한다. every()와 비슷하지만 반대로 동작하는 메서드이다.

const numbers = [1, 2, 3, 4, 5]
const hasEven = numbers.some((num) => num % 2 === 0)

console.log(hasEven) // true

.sort()

sort() 메서드는 배열의 요소들을 정렬한다. sort()는 원본 배열을 변경하며, 매개변수로 함수를 전달하여 정렬 순서를 지정할 수 있다. 정렬한 결과는 stable하지 않은 불안정 정렬일 수 있다. 숫자로 이루어진 배열을 정렬할 때 주의할 점은 매개변수로 비교 함수를 전달하지 않을 경우, 요소를 문자열로 변환하고 비교를 하여 9와 80을 정렬할 경우, 숫자일 때와 다르게 80이 앞에 오게 된다.

const numbers = [3, 15, 8, -1, 2, 0]

console.log(numbers.sort()) // [ -1, 0, 15, 2, 3, 8 ]
console.log(numbers.sort((a, b) => a - b)) // [ -1, 0, 2, 3, 8, 15 ]
console.log(numbers.sort((a, b) => b - a)) // [ 15, 8, 3, 2, 0, -1 ]

.splice()

splice() 메서드는 배열의 요소를 삭제, 교체하거나 새 요소를 추가하여 원본 배열을 수정하는 메서드이다. splice()는 세 개의 매개변수를 받는다. 첫 번째는 변경을 시작할 인덱스, 두 번째는 제거할 요소의 개수, 세 번째는 삭제한 요소의 자리에 추가할 요소를 지정한다. 두 번째 매개변수를 생략하면 배열의 모든 요소를 제거하고, 0이라면 어떤 요소도 제거하지 않는다. 이 때는 최소 하나의 새로운 요소를 지정해야 한다. 세 번째 매개변수를 지정하지 않는 경우는 요소를 추가하지 않고 제거만 한다.

const numbers = [1, 2, 3, 4, 5]

numbers.splice(2, 0, 10) // 인덱스 2에 10 추가
console.log(numbers) // [ 1, 2, 10, 3, 4, 5 ]

numbers.splice(2, 2) // 인덱스 2부터 2개의 요소 제거
console.log(numbers) // [ 1, 2, 4, 5 ]

numbers.splice(1, 2, 8, 9) // 인덱스 1부터 2개의 요소를 제거하고 8, 9 추가
console.log(numbers) // [ 1, 8, 9, 5 ]

.toLocaleString()

toLocaleString() 메서드는 배열의 모든 요소에 대해 toLocaleString()작업을 통해 요소들을 지역에 맞는 형식으로 변환한 문자열들을 합쳐 하나의 문자열로 리턴하는 메서드이다. toLocaleString()은 지역화 데이터를 다룰 때 유용해 날짜나 숫자 같은 데이터를 다룰 때 활용할 수 있다.

const numbers = [1000, 2000, 3000]

console.log(numbers.toLocaleString()) // "1,000, 2,000, 3,000"

참고 문서 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array