배열의 값을 추가, 수정, 삭제하는 방법

---

배열의 값을 추가하기

1)'.push()'

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

arr.push(el1, el2) // 배열 이름.push(요소1, 요소2)

let fruits=[“apple”, “banana”];
let newFruits = fruits.push(“pineapple”, “mango”, “melon”);

console.log(newFruits); // 5가 출력. 배열의 새로운 length가 반환
console.log(fruits); // [“apple”, “banana”, “pineapple”, “mango”, “melon”]

2)'.unshift()'

unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.

arr.unshift(el1, el2) / 배열 이름.unshift(요소1, 요소2)

let fruits=[“apple”, “banana”];
let newFruits = fruits.unshift(“pineapple”, “mango”, “melon”);

console.log(newFruits); // 5가 출력. 배열의 새로운 length가 반환
console.log(fruits); // [“pineapple”, “mango”, “melon”, “apple”, “banana”]

3)'.concat()'

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.

(1) 배열 두 개 이어 붙이기

let fruits = [“apple”, “banana”];
let num = [1, 2, 3];

let result = fruits.concat(num);
console.log(result); // [“apple”, “banana”, 1, 2, 3]

(2) 배열 세 개 이어 붙이기

let fruits = [“apple”, “banana”];
let num = [1, 2, 3];
let ani = [“tiger”, “lion”];


let result = fruits.concat(num, ani);
console.log(result); // [“apple”, “banana”, 1, 2, 3, “tiger”, “lion”]

(3) 배열에 값 이어 붙이기

let fruits = [“apple”, “banana”];
let result = fruits.concat(1, [2, 3]);

console.log(result); // [“apple”, “banana”, 1, 2, 3]

---

배열의 값을 수정하기

1)배열의 인덱스를 이용하여 변경하기

let fruits = [“apple”, “banna”, “watermelon”];
fruits[1] = “banana”;  // 변수이름[index] = element

console.log(fruits) = [“apple”, “banana”, “watermelon”]; // const, let, var 모두 가능!

2)’.splice()’ 사용 *활용①

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

array.splice(start index, deleteCount, items?) //
배열 이름.splice(시작 index, 삭제할 숫자, 추가할 element)

(1) 수정하기①

let frutis = [“apple”, “banana”, “melon”];
fruits.splice(1, 0, “watermelon”);

console.log(fruits); // [“apple”, “watermelon”, “banana”, “melon”, ] 수정

(2) 수정하기 ②(제거+추가)

let frutis = [“apple”, “banana”, “melon”];
fruits.splice(2, 1, “watermelon”);

console.log(fruits); // [“apple”, “banana”, “watermelon”];

---

배열의 값을 삭제하기

1)'.pop()'

pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.

arr.pop() // 배열 이름.pop()

let fruits =[“apple”, “banana”, “melon”, “watermelon”];
let newFruits = fruits.pop();

console.log(newFruits); // “watermelon” 반환하여 출력
console.log(fruits); // [“apple”, “banana”, “melon”] 

2)'.shift()'

shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.

arr.shift() // 배열 이름.shift()

let fruits =[“apple”, “banana”, “melon”, “watermelon”];
let newFruits = fruits.shift();

console.log(newFruits); // “apple” 반환하여 출력
console.log(fruits); // [“banana”, “melon”, “watermelon”]

*주의!　.shift()/.unshift()는 .pop()/.push()에 비해서 느리다.

배열에 item들이 들어있을 때, 맨 뒤에서 데이터를 넣고 빼는 것은 기존 데이터에 영향을 미치지 않기 때문에 빠른 기능을 수행할 수 있음.
반대로, 앞에서부터 데이터를 넣으려고 한다면 기존 item들을 각자 뒤에 있는 배열로 이동시켜서 공간을 마련해 준 뒤에 처리해야 하므로 느린 기능을 수행한다고 할 수 있음.
배열이 길어지고 복잡할수록 이러한 현상들을 더 크게 느끼기 때문에 가능하면 .pop()/.push()를 사용하는 것이 더 좋다.

3)'.splice()' *활용 ②

let fruits =[“apple”, “banana”, “melon”, “watermelon”];
fruits.splice(1, 1) = [“apple”, “melon”, “watermelon”];