DEV/JavaScript & JQuery

[JavaScript] 배열의 특정 값 삭제하기

무사뎀벨레 2023. 1. 19. 14:27

 

 

 

 

 

1. 배열 전체 값 삭제

방법 1

배열 = []; 의 형태로 배열의 전체 값을 삭제(초기화) 할 수 있습니다.

방법 2

배열.length = 0; 의 형태로 배열의 길이를 0으로 초기화하여 전체 값을 삭제(초기화) 할 수 있습니다.

//방법 1
//배열 선언
let arr1 = ['aaa', 'bbb', 'ccc'];
// 배열 값 전체 삭제
arr1 = [];
console.log(arr1.length);	//0 출력


//방법 2
//배열 선언
let arr2 = ['ddd', 'eee', 'fff'];
// 배열 값 0으로 변경
arr2.length = 0;
console.log(arr2.length);	//0 출력

 

 

 

 

 

 

 

2. 배열 첫 번째 값 삭제

자바스크립트의 shift 함수를 사용하여 배열의 첫 번째 값을 삭제할 수 있습니다.

 

shift 함수는 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.

이 함수는 배열의 길이를 변하게 합니다.

 

let arr = ['aaa', 'bbb', 'ccc'];
// 배열의 첫번째 값 삭제
arr.shift();

console.log(arr); // ['bbb', 'ccc'] 출력

 

 

 

 

 

 

3. 배열 뒤에서 삭제

방법 1. 배열 길이 설정하기

배열의 값 전체를 삭제할 때, 배열의 길이를 0으로 설정해 주었던 것과 마찬가지로,
배열의 뒤에서 값을 삭제하고 싶을 때는, 남겨두고 싶은 배열의 길이만큼 배열의 length 값을 설정해 줍니다.

let arr = ['aaa', 'bbb', 'ccc', 'ddd'];

// 배열의 뒤에서 삭제하기
// 원래 배열의 갯수인 4개에서 1을 뺀 3개를 지정
// 그렇게 되면 배열의 뒤에서부터 제거
arr.length = 3;

console.log(arr); // ['aaa', 'bbb', 'ccc']

 

방법 2. pop 함수 사용하기

배열의 pop 함수를 이용하여 배열 뒤에서 삭제 가능합니다.

pop 함수는 배열의 마지막 요소를 제거하고 그 요소를 반환합니다.

let arr = ['aaa', 'bbb', 'ccc', 'ddd'];

// 배열의 뒤에서 삭제하기
// 요소 한개씩 제거됨
arr.pop();

console.log(arr); // ['aaa', 'bbb', 'ccc']

 

 

 

 

 

 

4. 배열의 특정 index 값 삭제

splice 함수

배열의 특정 index의 값을 삭제하기 위해 splice 함수를 사용할 수 있습니다.
splice 함수는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

splice 함수는 아래의 특징을 가지고 있습니다.  
첫 번째 매개변수로 특정값을 추가하거나 삭제할 위치 index를 입력받습니다.
두 번째 매개변수로 삭제할 원소의 개수를 입력받습니다.
세 번째부터 입력받는 n개의 매개변수는 옵션인데, 추가할 원소를 입력받습니다.

 

let arr = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];

// 배열의 1번째 index부터 3개의 원소를 삭제
// 0번째는 'aaa', 1번째는 'bbb', 2번째는 'ccc', 3번째는 'ddd', 4번째는 'eee'
// 배열의 1번째인 'bbb' 요소부터 3개의 원소('bbb', 'ccc', 'ddd')를 삭제
arr.splice(1, 3);

console.log(arr); // ['aaa', 'eee']

 

 

 

 

 

 

5. 배열의 특정 값 삭제

방법 1. 반복문과 조건문, splice 함수 사용

반복문과 조건문, splice 함수를 이용하여 배열의 특정값을 삭제할 수 있습니다.

 

아래 코드에서 확인할 수 있듯이 splice 함수를 사용하면, 원래 배열의 원소가 삭제되고 배열의 길이가 변하기 때문에,

splice 함수를 사용해서 원소를 1개를 삭제한 뒤 배열의 index를 참조하는 i의 값을 하나 감소시켰습니다.

let arr = ['aaa', 'bbb', 'ccc', 'ddd'];

// 원소 'ccc' 삭제
for(let i = 0; i < arr.length; i++) {
  if(arr[i] === 'ccc')  {
    arr.splice(i, 1);
    i--;
  }
}

 

방법 2. filter 함수 사용

반복문을 사용하지 않고, filter 함수를 사용해 배열의 특정 값을 제거할 수 있습니다.


filter 함수는 특정 조건에 부합하는 값만 모아서 새로운 배열을 만들어서 리턴합니다.
아래 코드에서 확인할 수 있듯이, 배열에서 'ccc' 값을 삭제하고 싶기 때문에, 배열 원소의 값이 'ccc'가 아닌 경우에만 해당 원소들을 가지고 새로운 배열을 만들었습니다.

let arr = ['aaa', 'bbb', 'ccc', 'ddd'];

// 원소 'ccc' 삭제
let filtered 
  = arr.filter((element) => element !== 'ccc');

console.log(arr); // ['aaa', 'bbb', 'ccc', 'ddd']
console.log(filtered); // ['aaa', 'bbb', 'ddd']
반응형