- Published on
2023.12.16
Edited 2024.03.09
JavaScript 배열 메서드인데요
기본기 훈련
MDN에서 자바스크립트 배열 항목을 보면, 현재 날짜 기준으로 43개의 메서드가 소개되어 있다. 아무래도 자주 쓰여 익숙한 메서드부터, 처음 공부할 때는 배웠지만 이후에 잘 쓰지 않는 메서드, 새롭게 나와 아직 잘 모르는 메서드 등, 내 생각보다 많은 메서드가 있고 자주 쓰지 않더라도 그러한 기능이 있는 줄 모르는 것과 아는 것은 차이가 있다고 생각해 기본기를 다듬을 겸, 이번에는 배열 메서드를 정리해 봤다. 순서는 MDN의 소개 순서와 마찬가지로 알파벳 순으로 정렬했다.
.at()
at()메서드는 정수를 받아 배열의 해당 인덱스에 접근하는 메서드다. 비교적 최근에 나온 메서드로, 직관적이라 바로 이해하고 사용할 수 있다. at()메서드를 쓰면서 좋았던 점은 배열의 마지막 인덱스에 접근할 때, 기존에는
const arr = ['blue', 'green', 'yellow', 'orange', 'purple']
console.log(arr[arr.length - 1]) // 'purple'
이렇게 처리했던 것을,
const arr = ['blue', 'green', 'yellow', 'orange', 'purple']
console.log(arr.at(-1)) // 'purple'
이렇게 처리할 수 있다. 음수를 전달하면 뒤에서부터 인덱스를 거슬러 접근하므로, 상당히 편하게 사용할 수 있다.
.concat()
concat()메서드는 배열을 합치는 메서드이다. 기존 배열에 concat()메서드를 통해 배열을 전달하면, 두 배열이 병합된 새 배열을 리턴한다. concat()메서드를 사용하면 배열을 쉽게 합칠 수 있고, 기존 배열을 수정하지 않고 새로운 배열을 변수에 할당해 사용할 수 있다. 한 번에 두 개 이상의 배열을 전달할 수도 있는데, 이렇게 되면 전달한 배열들이 순차적으로 기존 배열의 다음 순서로 병합된 새 배열을 리턴한다.
const arr1 = ['MON', 'TUE', 'WED']
const arr2 = ['THU', 'FRI', 'SAT']
const arr3 = arr1.concat(arr2)
console.log(arr3) // ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
.copyWithin()
이번에 정리하면서 처음 알게된 메서드이다. copyWithin()메서드는 매개변수로 copyWithin(target, start, end) 3가지 값을 받는데, start에 해당하는 인덱스부터 end에 해당하는 인덱스의 값까지를 복사하여, target에 해당하는 인덱스 target은 해당하는 인덱스의 값을 변환한다. end는 자기 자신 인덱스는 포함하지 않는다.
const array = [1, 2, 3, 4, 5, 6]
const result = array.copyWithin(1, 3, 5) // 3부터 4에 해당하는 인덱스의 값을 복사하여 1부터 변환
console.log(result) // [1, 4, 5, 4, 5, 6]
.entries()
entries() 메서드는 배열에 사용하면 각 요소에 대한 키(인덱스)-값 쌍을 갖는 새 이터러블 객체를 리턴한다. 이터러블 객체는 처음 알았는데 for..of 반복문을 통해 요소를 순회할 수 있고, 이터레이터의 next()라는 메서드를 통해 다음 값을 확인할 수 있다. next()는 { value: any, done: false }형태의 값을 리턴하는데 done이 true이면 반복이 끝난 것을 의미한다. 마지막 요소까지는 done이 false로 나오고, 이후 한 번 더 next()를 하면 true를 리턴한다.
const fruits = ['apple', 'banana', 'orange']
const iterator = fruits.entries()
// 이터레이터의 next() 메서드를 호출하여 순차적으로 키-값 쌍에 접근
let result = iterator.next()
console.log(result) // { value: [ 0, 'apple' ], done: false }
.every()
every()는 배열의 요소를 순회하면서 전달한 콜백 함수에 대하여 모든 요소가 true를 리턴하는지 확인한다. 모든 요소가 true를 리턴하면 every()도 true를 리턴하고, 하나의 요소라도 false를 리턴하면 false를 리턴한다. 개인적으로는 정규표현식을 사용해서 유효성 검사를 할 때, 각 항목 별로 다른 필요한 정규표현식을 전달하고, 모든 요소가 정규표현식을 통과했는지를 확인하는 데 사용했다.
const positiveNumbers = [2, 5, 8, 10, 3]
positiveNumbers.every((number) => number > 0) // true
.fill()
fill()메서드는 배열의 요소들을 정적인 값으로 변경한다.fill()은 매개변수로 fill(value, start, end) 3가지 값을 받는데, start는 시작 인덱스를, end는 끝나는 인덱스를 지정하며 해당하는 구간이 value 값으로 채워지게 된다. end는 자기 자신 인덱스는 포함하지 않는다.
const initialArr = new Array(5).fill(0)
console.log(initialArr) // [0, 0, 0, 0, 0]
const modifiedArr = initialArr.fill(1, 2, 4)
console.log(modifiedArr) // [0, 0, 1, 1, 0]
.filter()
filter()메서드는 배열을 순회하면서 각 요소들이 콜백 함수를 만족시키는지 확인하고, true를 리턴한 요소들만을 모은 새 배열을 반환한다. 기존 배열은 변화시키지 않는다. 알고리즘을 풀 때, 특정 조건을 만족시키는 요소만을 필터링할 때 매우 유용하며, map()과 함께 정말 많이 사용한 메서드이다.
const numbers = [1, 5, 8, 10, 15]
const filteredNumbers = numbers.filter((number) => number > 5)
console.log(filteredNumbers) // [8, 10, 15]
filter()메서드에 인자로 Boolean을 넘기면 조건식의 평가 결과가 Falsy한 값들을 제외한 값들을 리턴한다. 알고리즘을 풀 때 매우 유용하다.
const array = [0, 1, false, true, '', 'el', null, undefined, NaN]
const filteredArray = array.filter(Boolean)
console.log(filteredArray) // [1, true, 'el']
참고 문서 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array