[자바스크립트] 펼침 연산자 + slice 로 새로운 배열 만들기 (removeItem)

removeItem 함수 만들기

테이블에서 특정 행을 삭제하는 함수를 만들고자 한다.
만약 첫번째, 마지막 행이 아닌 중간에 있는 행을 삭제하려면 어떻게 해야할까?

splice() 의 문제점

splice는 배열의 기존 요소를 삭제, 교체, 추가하여 배열의 내용을 변경하는 메소드로,
원본 배열을 조작한다는 문제점이 있다.

 

splice 문법

array.splice(startIndex, deleteCount, itemsToAdd);

 

splice 예시

const removeItem = (items, removable) => {
    const index = items.indexOf(removable);
    items.splice(index, 1);
    return items;
};

펼침 연산자 + slice()로 새로운 배열 만들기

concat()으로 배열 두 개를 병합할 수 있으나,
펼침 연산자를 사용하면 가독성이 더 좋아진다.

 

concat

const removeItem = (items, removable) => {
    const index = items.indexOf(removable);
    return items.slice(0, index).concat(items.slice(index + 1));
};

 

펼침 연산자

const removeItem = (items, removable) => {
    const index = items.indexOf(removable);
    return [...items.slice(0, index), ...items.slice(index + 1)];
};

 

느낀 점

테이블 행을 삭제하는 함수를 구현할 때 spread 연산자 + splice 조합을 사용했는데
splice 대신 slice를 사용하면 굳이 원본 배열 복사를 안해도 되기 때문에
slice를 사용해도 좋을 것 같다.

 

before

const removeRow = (rows, rowIdx) => {
    const copy = [...rows];
    copy.splice(rowIdx, 1);
    return copy;
};

 

after

const removeRow = (rows, rowIdx) => {
    return [...rows.slice(0, rowIdx), ...rows.slice(rowIdx + 1)];
};

 

자바스크립트 코딩의 기술 (길벗, 2019)을 학습하고 개인 학습용으로 정리한 내용입니다.