[javascript] 배열 - 새로운 요소 추가 / 삭제

[javascript] 배열 - 새로운 요소 추가 / 삭제

✔️ 배열 새로운 추가

: ⭐자바스크립트에서 배열의 크기는 동적이다.⭐

: 요소 추가 방법

var a = [10, 20];
 
a[2] = 30; 
console.log( a.join() );

💡 존재하지 않는 인덱스에 데이터 추가가 가능하다. 존재하는 곳에 데이터 그냥 추가하면 된다.
💡 join() : 배열의 모든 요소를 연결. 하나의 문자열로 만든다.

- undefined 저장할 수 있음

a[4] = 50;
console.log( a.join() ); // 10,20,30,,50
console.log( a[3] ); //undefined
console.log( a );  //[10,20,30,empty,50] undefined는 콘솔에서 empty로  표시

💡 중간에 콤마 두개로 값을 비워두면, (, ,) undefined 이 저장된다.
undefined는 콘솔에서 empty로 표시

- 인덱스 값 변경 : 기존 인덱스에 값을 할당하면 변경된다.

a[1] = 200; //존재하는 인덱스에 값을 할당하면 변경된다.
console.log( a[1] ); //200
console.log( a.join() ); //10,200,30,,50

📓 push(); : 가장 뒤에 새로운 요소를 추가하고 길이를 반환한다.

var b = [100,200];
//b[b.length] = 300; // 가장 뒤에 하나의 요소를 추가 틀린건 아니지만 이렇게 말고
b.push(300); // 가장 뒤에 새로운 요소를 추가하고 길이를 반환한다.
console.log( b.join() ); //100,200,300

💡 가장 뒤에 새로운 요소를 추가하고 길이를 반환한다.

📓 unshift(); : 맨 앞에 새로운 요소를 추가하고 길이 반환

b.unshift(50); // 맨 앞에 새로운 요소를 추가하고 길이 반환
console.log( b.join() ); //50,100,200,300
 
var len = b.push(400);
console.log(b.join()); //50,100,200,300,400
console.log(len); // 5

✔️ 배열 새로운 추가 (중간 부분에)

: ⭐splice(start[, deleteCount [,item1, item2, ...]]);

: 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가 

: start : 변경할 시작 위치

- 가장 앞에 추가하기

// 가장 앞에 추가
var a = [10,20,30];
a.splice(0,0,'a','b'); //0번째 위치부터 0개를 지우고 a b 를 추가하라
console.log(a.join()); // a,b,10,20,30

- 가장 뒤에 추가하기

//가장 뒤에 추가
var b = [10,20,30];
b.splice(b.length,0,'a','b'); //
console.log(b.join()); // 10,20,30,a,b

- 중간에 추가

//중간에 추가
var c = [10,20,30];
c.splice(1,0,'a','b'); //
console.log(c.join()); // 10,a,b,20,30

- 삭제하고 중간에 추가

//삭제하고 중간에 추가
var d = [10,20,30,40,50];
d.splice(1,2,'a','b'); //
console.log(d.join()); // 10,a,b,40,50

- 삭제하기

//삭제
var e = [10,20,30,40,50];
e.splice(1,2); //
console.log(e.join()); // 10,40,50
console.log(e.length); // 3 값만 지워진게 아니다. 방까지지워짐

✔️ 배열 요소 삭제

1) 마지막 요소 제거 - length 쓰기

//마지막 요소 제거 - length 쓰기
a.length = a.length - 1;
console.log(a.join()); //10,20,30,40

2) 모든 요소 제거 - length

//모든 요소 제거 - length
a.length = 0;	//다 지워버리기
console.log(a.length); //0

📓 pop() : 마지막 요소 제거하기

// pop() : 마지막 요소 제거
var b = [10,20,30,40,50];
var n = b.pop(); // 마지막 요소를 제거하고 제거된 값을 반환한다.
console.log(n); // 50 
console.log(b.join()); // 10,20,30,40
console.log(b.length); // 4

📓 shift() : 처음 요소 제거하기

var c = [10,20,30,40,50];
c.shift(); // 처음 요소를 제거하고 제거된 값을 반환한다.
console.log(c.join()); //20,30,40,50
console.log(c.length); //4

📓 delete() : 배열의 값을 없애고 undefined 로 할당. 배열의 길이는 줄지 않음

var d = [10,20,30,40,50];
delete(d[1]);
console.log(d.join()); //10,,30,40,50 // 내용을 지움
console.log(d[1]); //undefined 가 출력
console.log(d.length); //5