[JavaScript] Array 배열 | 삽입, 수정, 삭제하는 법

목차

1. 배열 선언

2. 인덱스로 배열 원소에 접근

3. 배열의 길이 알아내기

4. 배열 순회하기

5. 배열에 원소 추가하기

6. 인덱스로 배열의 특정 원소 삭제하기

 

 

자바스크립트의 배열은 Array(정확히는 Object의 특수한 한 형태)로, 

이번 시간엔 배열 선언과 아이템의 삽입 / 수정 / 삭제하는 방법을 알아본다.

 

1. 배열 선언

// 1. 정수형 배열
const arr1 = [1, 2, 3, 4, 5];

// 2. 실수형 배열
let arr2 = [3.14, 1.3, 10.1, 144.0];

// 3. 문자열 배열
const arr3 = ['JavaScript', 'Python', 'C++'];

// 4. boolean형 배열
const arr4 = [true, false, false, true];

// 5. 여러 자료형을 담는 배열
const arr5 = [1, true, "hello"];

 

Array.from()으로도 배열 생성이 가능하다.

// 1. 크기가 5이고 원소가 0인 배열
const arr1 = Array.from({ length: 5 }, () => 0);  
// [0, 0, 0, 0, 0]

// 2. 크기가 5이고 0부터 시작해서 1씩 증가하는 배열
const arr2 = Array.from({ length: 5 }, (_, i) => i);
// [0, 1, 2, 3, 4, 5]

 

 

2. 인덱스로 배열의 원소 접근

let my_arr = [1, 2, 3, 4, 5]

// 형식: 배열[인덱스]
console.log(my_arr[0]); // 1

console.log(my_arr[1]); // 2

console.log(my_arr[2]); // 3

console.log(my_arr[3]); // 4

console.log(my_arr[4]); // 5

 

 

3. 배열의 길이 알아내기

const my_arr = [1, 2, 3, 4, 5]

// 배열의 길이 알아내기
// 형식 1: 배열명.length
console.log(my_arr.length); // 5

// 형식 2: 배열명['length'] 
console.log(my_arr['length']); // 5

 

 

4. 배열 순회하기

const arr = ["Hello", "JS"];

// 1. 기본적인 방법
for (let i = 0; i < arr.length; i++) {
  console.log(`인덱스: ${i}, 원소: ${arr[i]}`);
}
// 인덱스: 0, 원소: Hello
// 인덱스: 1, 원소: JS

// 2. for ... of 문
// 원소만 접근할 수 있다.
for(const elem of arr) {
  console.log(`원소: ${elem}`);
};
// Hello
// JS

// 3. Array.forEach 문
arr.forEach((elem, i) => {
  console.log(`인덱스: ${i}, 원소: ${elem}`);
});
// 인덱스: 0, 원소: Hello
// 인덱스: 1, 원소: JS

 

 

5. 배열에 원소 추가하기

(1) 배열 맨 앞에 추가하기

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

// 배열의 앞쪽에 요소를 추가
// 형식: 배열.unshift
arr.unshift(100); 
// [100, 1, 2, 3, 4, 5]

// 앞 쪽에 여러 개를 추가할 수 있다.
arr.unshift("Hello", "JS"); 
// ["Hello", "JS", 100, 1, 2, 3, 4, 5]

 

 

(2) 배열 중간에 추가하기

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

// 형식: 배열.splice(추가할 곳의 인덱스, 0, 추가할 원소)
// 2번 인덱스에 원소 '100'을 추가
arr.splice(2, 0, 100);
console.log(arr);
// [1, 2, 100, 3, 4, 5]

// 4번 인덱스에 원소 "Hello", "JS" 추가
arr.splice(4, 0, "Hello", "JS"); 
console.log(arr);
// [1, 2, 100, 3, 'Hello', 'JS', 4, 5]

 

이외에도 splice 메소드로 값을 삭제하거나 교체하기도 가능하다. (뒤에 이어서 설명)

 

 

(3) 배열 마지막에 추가하기

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

// 요소를 끝에 추가하기 
arr.push(6);
console.log(arr);
// [1, 2, 3, 4, 5, 6]

// 연달아 추가가 가능하다.
arr.push("Hello, JS!");
console.log(arr);
// [1, 2, 3, 4, 5, 6, "Hello, JS!"]

 

 

6. 인덱스로 배열의 특정 원소 삭제하기 

(1) delete 키워드

✅ 이 방법은 그 요소의 값만 삭제될 뿐, 그 요소의 자리는 empty로서 여전히 유지된다.

const arr = [1, 2, 3, 4, 5]

// 요소 삭제하기
// 형식: delete 배열명[인덱스]
delete arr[2];

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

 

참고로, 배열 크기보다 더 큰 인덱스로 값을 할당하면 아래와 같은 결과를 얻는다.

const arr = [1, 2, 3];

arr[6] = 7;
arr[9] = 10;

console.log(arr); 
// [1, 2, 3, empty, empty, empty, 7, empty, empty, 10]

 

 

(2) splice 메소드 사용하기 (+ 원소 교체)

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [1, 2, 3, 4, 5];
const arr3 = [1, 2, 3, 4, 5];

// 요소 삭제하기
// 형식: 배열명.splice(인덱스, 연속으로 삭제할 요소의 개수, 인덱스에 추가할 요소)

// 1. 파라미터로 (인덱스)만 넘기는 경우: 인덱스의 원소를 포함한 뒤의 모든 요소들을 삭제한다.
arr1.splice(2);
console.log(arr1); 
// [1, 2]

// 2. 파라미터로 (인덱스, 삭제할 요소의 개수)를 넘기는 경우
// 2번 인덱스의 요소를 시작으로 연속으로 2개의 요소를 삭제한다.
arr2.splice(2, 2); 
console.log(arr2); 
// [1, 2, 5]

// 3. 파라미터로 (인덱스, 연속으로 삭제할 요소의 개수, 인덱스에 추가할 요소)를 넘기는 경우
// 2번 인덱스의 요소를 시작으로 연속된 2개의 요소를 삭제한 뒤, 삭제한 곳에 '10'을 추가한다.
arr3.splice(2, 2, 10); 
console.log(arr3); 
// [1, 2, 10, 5]