[Javascript] Array 요소 추가, 삭제, 수정하는 방법 갓벽 가이드

1. 배열 요소 추가 (Add)
   • push() : 배열 끝에 추가
   • unshift() : 배열 앞에 추가
   • splice() : 특정 위치에 추가
   • 전개 연산자(...)  : 새로운 배열 추가
2. 배열 요소 삭제 (Remove)
   • pop() : 배열 끝 요소 삭제
   • shift() : 배열 앞 요소 삭제
   • splice() : 특정 위치 요소 삭제
   • filter() : 조건을 만족하는 요소만 남기기
3. 배열 요소 교체 (Replace)
   • 인덱스로 직접 변경
   • splice() 사용
   • map() : 특정 요소만 교체 (새 배열 반환)

반응형

---

 

배열 요소 추가 (Add)

배열에 요소를 추가하는 방법에는 push(), unshift(), splice(), 전개 연산자(...) 등이 있습니다.

push() : 배열 끝에 추가

✅ 예제 코드:

let arr = [1, 2, 3];
arr.push(4);  // [1, 2, 3, 4]

배열의 끝에 새로운 요소를 추가합니다.

 

unshift() : 배열 앞에 추가

✅ 예제 코드:

let arr = [2, 3, 4];
arr.unshift(1);  // [1, 2, 3, 4]

배열의 앞에 새로운 요소를 추가합니다.

 

splice() : 특정 위치에 추가

✅ 예제 코드:

let arr = [1, 3, 4];
arr.splice(1, 0, 2);  // [1, 2, 3, 4]

splice(삽입할 인덱스, 삭제할 개수, 추가할 요소들)

위 코드에서 splice(1, 0, 2)는 인덱스 1에 "2"를 추가하고 기존 요소를 밀어냅니다.

 

전개 연산자(...)  : 새로운 배열 추가

✅ 예제 코드:

let arr = [1, 2, 3];
let newArr = [...arr, 4];  // [1, 2, 3, 4]

원본 배열을 수정하지 않고 새로운 배열을 생성하여 요소를 추가할 때 유용합니다.

 

---

 

배열 요소 삭제 (Remove)

배열 요소를 삭제하는 방법에는 pop(), shift(), splice(), filter() 등이 있습니다.

pop() : 배열 끝 요소 삭제

✅ 예제 코드:

let arr = [1, 2, 3];
arr.pop();  // [1, 2]

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

 

shift() : 배열 앞 요소 삭제

✅ 예제 코드:

let arr = [1, 2, 3];
arr.shift();  // [2, 3]

배열의 첫 번째 요소를 제거합니다.

 

splice() : 특정 위치 요소 삭제

✅ 예제 코드:

let arr = [1, 2, 3, 4];
arr.splice(1, 1);  // [1, 3, 4]

splice(삭제할 인덱스, 삭제할 개수)

위 코드에서 splice(1, 1)은 인덱스 1의 요소("2")를 삭제합니다.

 

filter() : 조건을 만족하는 요소만 남기기

✅ 예제 코드:

let arr = [1, 2, 3, 4];
let newArr = arr.filter(num => num !== 2);  // [1, 3, 4]

특정 요소를 삭제하고 싶을 때 유용하며, 원본 배열을 수정하지 않고 새로운 배열을 반환합니다.

 

---

 

배열 요소 교체 (Replace)

배열 요소를 교체하는 방법에는 인덱스를 이용한 대체와 splice()를 사용하는 방법이 있습니다.

인덱스로 직접 변경

✅ 예제 코드:

let arr = [1, 2, 3];
arr[1] = 99;  // [1, 99, 3]

배열의 특정 인덱스 값을 직접 변경할 수 있습니다.

splice() 사용

✅ 예제 코드:

let arr = [1, 2, 3];
arr.splice(1, 1, 99);  // [1, 99, 3]

splice(교체할 인덱스, 삭제할 개수, 추가할 값)

위 코드에서 splice(1, 1, 99)는 인덱스 1의 요소를 "99"로 교체합니다.

map() : 특정 요소만 교체 (새 배열 반환)

✅ 예제 코드:

let arr = [1, 2, 3];
let newArr = arr.map(num => (num === 2 ? 99 : num));  // [1, 99, 3]

특정 조건을 만족하는 요소만 변경한 새 배열을 생성합니다.