[JS] 알아두면 쓸모있는 배열 처리 메소드.zip

혅·2024년 5월 27일

Study Note ✍🏻

목록 보기

25/60

코딩 문제를 풀이하다보면 10문제 중 9문제는 배열을 사용한다해도 과언이 아닌데, 배열 관련해서 정말 많은 함수들이 있는데 이들의 사용방법들을 제대로 공부한 적 없이 거의 감으로 사용했던 적이 많다. 그렇기 때문에 간혹 의도했던 방법과 다르게 구현될 때가 많았고, 오류가 많이 나기도 했다. 특히 배열 관련 함수 중에는 배열 자체가 변경되는 함수가 있고, 새로운 배열을 리턴하는 함수가 있다. 이들을 제대로 알고 사용하기 위해 배열 관련해서 놓쳤던 부분들을 정리하고자 한다.

개인적인 공부 기록인지라 모든 배열 처리 함수를 다루지는 않고, 그동안 애매하게만 알고있던 것들 위주로 정리한다.

splice

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
원본 배열 자체가 수정된다. 제거한 요소를 담은 배열을 반환한다. 아무 값도 제거하지 않았으면 빈 배열을 반환한다.

splice(start[, deleteCount[, item1[, item2[, ...]]]])

start: 배열의 변경을 시작할 인덱스. (음수 가능)
배열의 길이보다 큰 수를 지정한 경우: 실제 시작 인덱스는 배열의 길이로 설정
절대값이 배열의 길이보다 큰 경우: 0으로 세팅
deleteCount: 배열에서 제거할 요소의 수.
생략 / 값이 array.length - start보다 큰 경우: start부터의 모든 요소를 제거.
0 이하의 수를 지정: 어떤 요소도 제거되지 않는다.
item1, item2, ... : 배열에 추가할 요소.
지정하지 않는 경우: splice()는 요소 제거만 수행한다.

slice

begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다.

slice(start[, end])

start: 추출 시작점에 대한 인덱스.
undefined인 경우: 0부터 slice
음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출한다.
배열의 길이와 같거나 큰 수를 지정한 경우: 빈 배열을 반환한다.
end: 추출을 종료할 기준 인덱스. (end 전까지의 요소만 추출한다.)
지정하지 않을 경우: 배열의 끝까지 slice
음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(2, -1)를 하면 세번째부터 끝에서 두번째 요소까지 추출
배열의 길이와 같거나 큰 수를 지정한 경우: 배열의 끝까지 추출.

copyWithin

배열의 일부를 복사하여, 지정된 위치에 덮어쓰고 해당 배열을 반환한다. 배열의 길이는 변경되지 않는다. 원본 배열 자체가 수정된다.

copyWithin(target[, start[, end]])

target : 복사한 엘리먼트 붙여 넣을 위치의 인덱스
start : 복사를 시작할 위치의 인덱스 (default: 0)
end : 복사를 끝낼 위치의 인덱스 (default: arr.length) (end 전까지의 요소만 복사한다.)

const arr = [1, 2, 3, 4];
arr.copyWithin(1);
console.log(arr); // [1, 1, 2, 3]

copyWithin의 동작과정은 처음 접하면 조금 어려울 수 있다. 해당 코드에서 copyWithin의 target을 1로 두었고, start와 end가 없으므로 처음부터 끝까지 배열을 복사한다. 즉 [1, 2, 3, 4]가 복사된다. 이때, target이 1이므로 arr[1]에 해당 배열이 덮어쓰여지는 것이다. 그렇게 되면 [1, 1, 2, 3, 4]가 될 것 같지만 copyWithin은 배열의 길이가 변경되지 않는다는 특징이 있다 그러므로, 배열의 길이에서 벗어난 4는 제외하고 덮어쓰여지게 되어 [1, 1, 2, 3]이 되게 된 것이다.

find

배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소를 반환한다. 배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾는다. 조건을 일치하는 배열 요소가 없는 경우, undefined를 반환한다.

find(callbackFn[, thisArg])

callbackFn : 배열의 각 요소를 처리하는 콜백 함수
콜백 함수는 주어진 요소에 대해 실행되고, 콜백 함수 내에서 정의한 조건을 확인합니다. 조건이 true로 평가되면 해당 요소를 찾은 것으로 간주된다. findIndex() 함수는 조건을 만족하는 첫 번째 요소를 찾으면 배열 순회를 중단하고 해당 요소의 인덱스를 반환한다.
콜백 함수의 매개변수: callbackFn(element[, index[, array]])
element: 현재 처리 중인 배열 요소
index: 현재 처리 중인 배열 요소의 인덱스
array: findIndex()를 호출한 배열 자체
thisArg : callbackFn 함수 내부에서 사용할 this 값으로 사용할 값

findIndex

배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소의 인덱스를 반환한다. 배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾는다.

findIndex(callbackFn[, thisArg])

callbackFn : 배열의 각 요소를 처리하는 콜백 함수
콜백 함수는 주어진 요소에 대해 실행되고, 콜백 함수 내에서 정의한 조건을 확인합니다. 조건이 true로 평가되면 해당 요소를 찾은 것으로 간주된다. findIndex() 함수는 조건을 만족하는 첫 번째 요소를 찾으면 배열 순회를 중단하고 해당 요소의 인덱스를 반환한다.
콜백 함수의 매개변수: callbackFn(element[, index[, array]])
element: 현재 처리 중인 배열 요소
index: 현재 처리 중인 배열 요소의 인덱스
array: findIndex()를 호출한 배열 자체
thisArg : callbackFn 함수 내부에서 사용할 this 값으로 사용할 값

some

배열의 각 요소에 대해 제공된 함수의 조건을 최소한 하나의 요소가 만족하면 true를 반환하고, 모든 요소가 조건을 만족하지 않으면 false를 반환한다.

some(function(currentValue, index, array), thisValue))

function : 배열의 각 값에 대해 실행할 함수
currentValue : 배열내에서 순차적으로 입력되는 요소
index : 현재 요소의 배열 내 index
array : 현재 요소가 속한 배열
thisValue : 함수 내부에서 사용될 this에 대한 값

some은 해당 조건을 만족하는 경우가 하나라도 있을 경우, 중단하고 반환하게 된다. forEach의 순회가 중단되지 않는 특성에 이용하면 원하는 결과값을 도출해낼 수 있게 된다.
forEach만을 사용하여, 구현하였을 때는 다음과 같다.

var testArr = [1, 2, 3, 4, 5]

testArr.forEach(el => {
    if(el === 2) { return }
    console.log(el) // 1 2 3 4 5
})

이때, some을 사용해준다면, 원하는 결과값을 도출해낼 수 있다.

var testArr = [1, 2, 3, 4, 5]

testArr.some(el => {
    if(el === 2) { return true }
    console.log(el) // 1 
})

return 값이 true일 때는 break, false일 때는 continue로 동작한다.

var testArr = [1, 2, 3, 4, 5]

testArr.some(el => {
    if(el === 2) { return false }
    console.log(el)
})

every

배열의 모든 요소가 주어진 조건을 만족하는지 확인한다. 배열의 모든 요소가 조건을 만족한 경우에만 true를 반환하고, 하나라도 요소가 조건을 만족하지 못하면 false를 반환한다.

every(function(currentValue, index, array), thisValue))

function : 배열의 각 값에 대해 실행할 함수
currentValue : 배열내에서 순차적으로 입력되는 요소
index : 현재 요소의 배열 내 index
array : 현재 요소가 속한 배열
thisValue : 함수 내부에서 사용될 this에 대한 값

every는 해당 조건을 만족하지 않는 경우가 하나라도 있을 경우 중단하고 반환하게 된다.

includes

배열에 특정 요소가 포함하는지 확인한다. 배열에서 주어진 요소가 포함되어 있으면 true를 그렇지 않으면 false를 반환합니다. 찾는 요소가 문자열일 경우 대소문자를 구분한다. 찾는 요소의 데이터 타입을 명확하게 구분한다.
자바스크립트에서 NaN === NaN은 항상 false이지만, includes() 함수를 사용하여 배열에 NaN이 포함되어 있는지 확인할 수 있다. 희소 배열에서 undefined를 검색하면 true를 반환한다.

includes(searchElement[, fromIndex])

searchElement : 배열에서 찾을 요소
fromIndex : 검색을 시작할 0 기반의 인덱스 (default: 0)
만약 음수 값을 가진다면, 배열의 끝에서부터 역순으로 검색을 시작합니다.

map

배열을 순회해서 각 요소를 콜백 함수로 적용해서 처리해 모은 새로운 배열을 반환한다. 원본 배열은 수정되지 않는다. 배열의 각 요소들에게 일괄적으로 함수를 적용하고 싶을 때 사용한다. 콜백 함수가 아무것도 리턴하지 않을 경우에는, 호출한 배열의 길이만큼의 undefined가 채워진 배열이 리턴된다. 원본 배열은 수정되지 않는다.

map(callbackFunction(currenValue, index, array), thisArg)

callbackFunction : arr 배열의 각 요소에 적용할 때 호출되는 콜백 함수 이 함수는 세 개의 매개변수를 가질 수 있다.
currentValue : 처리할 현재 요소. 이 매개변수를 통해 현재 요소에 접근
index : 처리할 현재 요소의 인덱스. 이 매개변수를 사용하여 현재 요소의 인덱스에 접근
array : map() 함수를 호출한 배열. 이 매개변수를 사용하여 원본 배열에 접근
thisArg : function을 실행할 때 this로 사용할 객체.

filter

주어진 함수의 조건을 만족하는 모든 요소를 모아 새로운 배열로 반환한다. 원본 배열은 수정되지 않는다.

filter(callback(element[, index[, array]])[, thisArg])

callback : 배열의 각 요소를 처리하는 콜백 함수
콜백 함수는 배열의 요소를 전달 인자로 받고, 결과로 true 또는 false를 반환한다. true를 반환하면 해당 요소가 필터링된 배열에 포함되고, false를 반환하면 해당 요소가 필터링된 배열에 포함되지 않는다.
콜백 함수의 매개변수: callbackFn(element[, index[, array]])
element: 현재 처리 중인 배열 요소
index: 현재 처리 중인 배열 요소의 인덱스
array: filter()를 호출한 배열 자체
thisArg : callbackFn 함수 내부에서 사용할 this 값으로 사용할 값

reduce

배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환한다. initialValue를 설정했느냐 안했느냐에 따라 콜백의 최초 호출 시의 accumulator와 currentValue가 달라진다. 맨 뒤 index로부터 순회하는 reduceRight를 사용할 수 있다.

reduce(callback[, initialValue])

callback : 배열의 각 요소에 대해 실행할 콜백 함수. 콜백 함수는 다음 매개변수를 가진다.
accumulator : 콜백 함수의 반환 값 또는 이전 순회에서의 최종 결과값.
initialValue이 제공된 경우 첫 번째 순회에서는 initialValue로 설정된다.
currentValue : 현재 순회 중인 배열의 요소
currentIndex : 현재 순회 중인 배열의 요소 인덱스
array : reduce 함수가 호출된 배열
initialValue : 콜백 함수의 첫 번째 순회에서 accumulator로 사용될 초기 값. 초기 값이 제공되지 않으면 배열의 첫 번째 요소가 초기 값이 된다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sum = numbers.reduce((accumulator, currentNumber) => accumulator + currentNumber);

console.log('sum =', sum); // sum = 55

const strlist = ["Hello", "World", "JavaScript"];
const arr = strlist.reduce((a, b) => [...a, b.length], []);

console.log(arr); // [5, 5, 10]

entries

배열의 각 인덱스에 대한 key-value 쌍을 가지는 새로운 Array Iterator 객체를 반환한다. next()를 사용하여 순차적으로 값을 도출할 수 있다.

entries()

var arr = ['a', 'b', 'c'];
var iterator = arr.entries();

for (x of iterator) {
  console.log(x);
}
// [0, "a"]
// [1, "b"]
// [2, "c"]

keys

배열의 각 인덱스를 키 값으로 가지는 새로운 Array Iterator 객체를 반환한다.

keys()

var arr = ['a', 'b', 'c'];
var iterator = arr.keys();
console.log(iterator.next()); // {value: 0, done: false}
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

values

배열의 각 인덱스에 대한 값을 가지는 새로운 Array Iterator 객체를 반환한다.

values()

var arr = ['a', 'b', 'c'];
var iterator = arr.values();
console.log(iterator.next()); // {value: "a", done: false}
console.log(iterator.next()); // {value: "b", done: false}
console.log(iterator.next()); // {value: "c", done: false}
console.log(iterator.next()); // {value: undefined, done: true}