[JavaScript] 배열(Array) 요소 추가/삭제

Lpla

·

2021. 4. 2. 20:10

반응형

1. 인덱스 지정

추가하고 싶은 배열의 위치에 인덱스를 지정하는 방법

 

var food = ['rice', 'hamberger']
food[4] = 'noodle'

console.log(food);
// ['rice', 'hamberger', undefined, undefined, 'noodle']

 

 

2. delete 연산자

delete 연산자와 인덱스로 배열 요소를 삭제할 수 있다.

하지만 요소가 완전히 삭제되는 것은 아니고 undefined로 설정되어 길이는 변하지 않는다.

 

var food = ['rice', 'hamberger']
delete food[1];

console.log(food);
// ['rice', 'hamberger']

console.log(food.length);
// 2

 

 

3. unshift

배열의 처음 위치에 요소를 삽입한다.

 

var food = ['rice', 'hamberger']
food.unshift('noodle', 'pizza');

console.log(food);
// ["noodle", "pizza", "rice", "hamberger"]

 

 

4. push

배열의 마지막 위치에 요소를 삽입한다.

 

var food = ['rice', 'hamberger']
food.push('noodle', 'pizza');

console.log(food);
// ["rice", "hamberger", "noodle", "pizza"]

 

 

5. shift

배열의 처음 요소를 제거한다.

 

var food = ["noodle", "pizza", "rice", "hamberger"]
food.shift();

console.log(food);
// ["pizza", "rice", "hamberger"]

 

 

6. pop

배열의 마지막 요소를 제거한다.

var food = ["noodle", "pizza", "rice", "hamberger"]
food.pop();

console.log(food);
// ["noodle", "pizza", "rice"]

 

 

7. splice

splice는 3개의 파라미터로 구분할 수 있다.

첫번째 파라미터는 시작할 인덱스를 가리키고 두번째 인덱스는 삭제할 요소의 개수, 마지막 세번째 파라미터는 그 자리를 대신할 요소값이다.

 

var food = ["noodle", "pizza", "rice", "hamberger"];
food.splice(0, 3, "cake", "cookie", "soup");

console.log(food);
// ["cake", "cookie", "soup", "hamberger"]

예시를 보면 0번째(시작요소)부터 3번째 요소까지 지우고 그 자리를 다른 요소 3개로 교체한다.

세번째 파라미터는 값을 작성하지 않아도 되고 이 경우에는 요소를 제거만 한다.

반응형