[JavaScript] 배열 추가하기, 삭제하기

 

 

 

JavaScript 배열 추가하기, 삭제하기

 

​

 

  배열 만들기

let arr = new Array();

배열 만들기

 JavaScript 생성하기 위해서는 다음과 같다.

new Array(); 할 경우 간단하게 배열이 생성된다.

 

 

배열 추가 된 모습.

 

 

 

let test_arr = [1, 2, 3];

 위의 같은 경우에는 배열을 선언 뒤 생성했다면, 이 같은 경우는 배열 생성과 동시에 값을 추가한다.

보통 이 방법은 Test 할 때 사용하거나, 변하지 않는 값을 정의할 때 이용하는 방법이다.

 

 

 

 

 

  배열 추가하기

 

1. 배열 추가하기 - 기본

let arr = new Array();
arr[0] = 'a';
arr[arr.length-1] = 'b';
arr[2] = 'b';

배열[인덱스 번호] = 값;

 

추가할 곳의 인덱스번호를 지정 후 값을 지정할 경우, 해당 인덱스에 배열이 추가 혹은 수정이 된다. 무식하게 추가하는 방법이며,  값의 추가를 육안으로 확인하기가 쉽다.

 

그러나 마지막 인덱스 값을 알아야 하고, 이전 값이 수정될 수 있다는 단점이 있기 때문에 주로 수정할 때 이용하는 방법이다.

 

 

2. push() - 배열의 맨 뒤에 추가하기

let arr = new Array();

arr.push('a');
arr.push('b');
arr.push('c');

console.log(arr);	// [a, b, c]

배열.push(값);

 

배열의 마지막 인덱스에 자동으로 추가가 된다.  언제든지 값을 추가할 수 있다는 장점이 있기 때문에 자주 애용하는 방법이다.

 

 

2.  unshift() - 배열의 맨 앞에 추가하기

let arr = ['a', 'b', 'c'];

arr.unshift('d');

console.log(arr);	// ['d', 'a', 'b', 'c']

배열. unshift(값)

 

배열의 맨 앞에 추가하는 방법이다.

 

 

3.  splice('인덱스 값', 0, '추가 요소') - 배열 중간에 추가하기

let arr = [1, 2, 3, 4, 5];

arr.splice(1, 0, 9);

console.log(arr);	// [1, 9, 2, 3, 4, 5];


*********************************
let arr = [1, 2, 3, 4, 5];

arr.splice(1, 0, 9, 8, 7);

console.log(arr);	//[1, 9, 8, 7, 2, 3, 4, 5];

배열.splice(인덱스 번호, 0, 값)

배열의 중간에 넣는 방법이다. 여기서 중요한 부분은 가운데 인덱스 번호를 0으로 지정해야 한다.

 

추가되는 값은, 여러 개를 동시에 추가할 수 있다.

 

splice에서 0을 안 할 경우

let arr = [1, 2, 3, 4, 5];

arr.splice(1, 3, 9);

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

splice는 1 이상의 값을 했을 경우, 삭제하는 기능이 추가된다.

이 방법은 배열의 중간값을 삭제할 때도 사용하는 방법이기 때문에 추가할 때는 0으로 지정한다.

 

 

 

  배열 제거하기

 

1.  pop() - 배열 마지막 값 삭제하기

let test_arr = [1, 2, 3, 4, 5];
console.log(test_arr);		// [1, 2, 3, 4, 5]


console.log('********************************');
test_arr.pop();
console.log(test_arr);  //마지막 값 삭제, [1, 2, 3, 4]

 배열의 마지막 인덱스 값을 삭제할 때 이용하는 방법이다.

 

 

2.  length-1 - 배열 마지막값 삭제하기

let arr = [1, 2, 3, 4, 5];

arr.length = arr.length-1;

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

length-1을 할 경우, pop()처럼 마지막 인덱스 값을 삭제한다.

 

 

3.  shift() - 배열의 처음 값 삭제하기

let arr = [1, 2, 3, 4, 5];

arr.shift();

console.log(arr);	// [2, 3, 4, 5]

배열의 첫 번째 인덱스 값을 삭제하는 방법이다.

 

 

4.  splice() - 배열의 중간 값 삭제하기

let arr = [1, 2, 3, 4, 5];

arr.splice(1, 1);

console.log(arr);	//[1, 3, 4, 5]

배열.splice(첫 번째 인덱스 값, 두 번째 인덱스 값)

 

배열의 중간 값을 삭제하는 방법이다.

첫 번째 인덱스 값은 삭제할 부분의 인덱스 위치이며, 두 번째 인덱스 값은 첫 번째 인덱스로부터 배열을 지우는 개수이다.

따라서 2를 했을 경우 2개를, 3을 했을 경우 3개를 삭제한다.

 

 

splice 삭제 응용하기

let arr = [1, 2, 3, 4, 5];

arr.splice(arr.indexOf(3), 1);


console.log(arr);	// [1, 2, 4, 5]

splice와 indexOf 메서드를 활용한다면, 값으로 배열의 중간 값을 삭제할 수 있다.

 

단, indexOf의 경우, 검색 값이 없을 경우 -1을 return을 하기 때문에 반드시 배열에 해당 값이 존재하는 유, 무를 판단 후 이용하는 것이 좋은 방법이다.

 

 

 

 

JavaScript의 배열을 다시 정리하면서, 잊었던 기억을 다시 되살피는 결과가 되었다.

JavaScript의 배열은 가변형이다. Java 하고 헷갈리지 말기!