배열에서 특정 Index의 요소를 삭제하는 방법을 소개합니다.
1. splice()로 배열에서 특정 Index의 요소 삭제
splice(start, deleteCount)는 배열에서 start Index에서 deleteCount 개수만큼 요소를 삭제합니다.
예를 들어 splice(2, 1)은 배열의 Index 2에서 1개 요소를 삭제합니다. 그리고, splice() 함수로 요소를 삭제하면 삭제된 요소 개수만큼 배열의 길이 또한 줄어듭니다.
let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1);
console.log(arr);
arr.splice(1, 1);
console.log(arr);Output:
[ 1, 2, 4, 5 ]
[ 1, 4, 5 ]2. delete로 배열에서 특정 Index의 요소 삭제
delete arr[index]는 arr[index]를 제거합니다. 하지만 splice()와 다른 점은, 요소는 제거되지만 배열의 길이는 줄어들지 않습니다. 배열을 확인해보면 요소가 삭제되고 empty(undefined)로 채워져 있습니다.
let arr = [1, 2, 3, 4, 5];
delete arr[2];
console.log(arr);
console.log("len: " + arr.length);
delete arr[1];
console.log(arr);
console.log("len: " + arr.length);Output:
[ 1, 2, <1 empty item>, 4, 5 ]
len: 5
[ 1, <2 empty items>, 4, 5 ]
len: 5만약 빈 값(undefined)을 제거하여 배열의 길이를 줄이고 싶다면, 아래와 같이 filter() 등으로 빈 값(undefined)을 정리하고 새로운 배열을 만들어야 합니다. 새로운 배열은 undefined를 포함하지 않으며, 제거된 요소 개수만큼 길이가 줄었습니다.
let arr = [1, 2, 3, 4, 5];
delete arr[2];
delete arr[1];
console.log(arr);
console.log("arr.length: " + arr.length);
let newArr = arr.filter((element) => element !== undefined);
console.log(newArr);
console.log("newArr.length: " + newArr.length);Output:
[ 1, <2 empty items>, 4, 5 ]
arr.length: 5
[ 1, 4, 5 ]
newArr.length: 3배열의 빈 값을 제거하는 자세한 내용은 JavaScript - 배열에서 빈 값, undefined, null 제거하기를 참고하세요.
3. pop()으로 마지막 요소 제거
pop()은 배열의 마지막 요소를 제거합니다. 요소가 제거될 때 배열의 길이도 줄어듭니다.
let arr = [1, 2, 3, 4, 5];
arr.pop();
console.log(arr);
arr.pop();
console.log(arr);Output:
[ 1, 2, 3, 4 ]
[ 1, 2, 3 ]Loading script...
Related Posts
- ESLint warning, Expected '===' and instead saw '==' eqeqeq
 - Javascript - 현재 날짜/시간을 항상 한국 기준으로 가져오기
 - Javascript - 문자열 사이에 문자 넣기
 - Javascript - 버튼 활성화/비활성화 시키는 방법
 - Javascript - 버튼 이름 변경하기
 - Javascript - div 안의 내용 가져오기, 변경, 추가, 삭제
 - Javascript - <ol>, <ul>에 <li> 동적 추가, 삭제
 - Javascript - div 생성, 추가, 삭제 방법
 - Javascript - 테이블 행(tr) 숨기기, 보이기
 - Javascript - div에 링크 거는 방법
 - Javascript - 자식 요소(element) 개수 확인
 - Javascript - 요소(element) 복사, 붙여넣기
 - Javascript - div에 클릭 이벤트(onclick) 설정 방법
 - Javascript - 체크박스 선택/해제 시, 텍스트박스 활성화/비활성화
 - Javascript - input 숫자만 입력받도록 설정
 - Javascript - 자식 노드 모두 제거
 - Javascript - 체크박스 선택, 해제 방법
 - Javascript - input text 값 가져오기
 - JavaScript - 문자열을 배열(Array)로 변환
 - JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
 - JavaScript - 문자열 비교 방법, 5가지
 - JavaScript - 문자열 바꾸기(replace, 정규식 치환)
 - JavaScript - 배열 전체 출력 (for, forEach, for in, for of)
 - JavaScript - 한번만 실행되는 함수 (once: true)
 - JavaScript - 선택된 checkbox 값 가져오기
 - JavaScript - div, 태그 안의 내용 가져오기
 - JavaScript - element(버튼, div) 보이기 숨기기
 - JavaScript - 숫자를 배열로 변경하는 방법
 - JavaScript - 부모, 형제, 자식 element 찾기
 - JavaScript - 클래스 이름으로 element 찾는 방법
 - JavaScript Array find() 함수
 - JavaScript Array splice() 함수
 - JavaScript의 contains() 함수
 - JavaScript sort() 함수, 예제 소개
 - JavaScript - Set 생성 및 초기화