자바스크립트 배열(Array) 생성, 접근, 추가, 삭제

 

"배열은 여러 값을 순서대로 나열하는 데이터 구조 입니다.

자바스크립트의 배열은 동직이며, 유연한 특징을 가지고 있습니다."

 

배열 생성

자바스크립트에서 배열 생성은 대괄호 [ ] 나  new Array() 로 생성 할 수 있습니다.

// 배열 생성
const arr0 = [];

const arr1 = new Array();

값 대입과 생성을 동시에 할 수도 있습니다.

한 가지 데이타 타입이 아닌, 여러 데이타 타입의 자료를 담을 수 있습니다.

// 숫자로 이루어진 배열
const arr0 = [0,1,2,3,4];
// 혼합된 자료형을 가진 배열
const arr1 = new Array(0,'a',1,'b');

 

배열 요소 접근

배열의 인덱스는 0부터 시작합니다.

인덱스 값으로 배열의 요소에 접근할 수 있습니다.

const alphabet = ['A', 'B', 'C'];
console.log(alphabet[0]);  // 'A'
console.log(alphabet[1]);  // 'B'
console.log(alphabet[2]);  // 'C'

 

배열 길이 가져오기

배열의 길이는 length 속성으로 알 수 있습니다.

const alphabet = ['A', 'B', 'C'];
console.log(alphabet.length); // 3

여기서 배열의 길이는 유효한 요소의 수가 아닌 배열의 최대 인덱스 길이라는 점을 알아야 합니다.

9번째 인덱스에 값을 대입하고 Log를 찍어보면 배열의 길이는 4가 아닌 10이 나오게 됩니다.

const alphabet = ['A', 'B', 'C'];
alphabet[9] = 'J';
console.log(alphabet.length); // 10
console.log(alphabet); //  ['A', 'B', 'C', empty × 6, 'J']

 

배열 요소 추가

인덱스 값으로 직접 추가

배열에 원하는 인덱스 값으로 요소를 추가를 할 수 있습니다.

const arr = [];

arr[1] = 4;
arr[3] = 5;

console.log(arr); // [empty, 4, empty, 5]

unshift() 메서드를 사용하여 배열 첫 번째에 요소 추가

unshift() 메서드를 사용하면 첫 번째에 요소를 추가하게 됩니다. 기존의 요소들의 인덱스는 하나씩 밀리게 됩니다.

const arr = [1,2,3,4,5];
arr.unshift(0);

console.log(arr); // [0, 1, 2, 3, 4, 5]

 

push() 메서드를 사용하여 배열 마지막에 요소 추가

push() 메서드를 사용하여 마지막에 추가 합니다.

const arr = [0,1,2,3,4];
arr.push(5);

console.log(arr); // [0, 1, 2, 3, 4, 5]

splice()  메서드를 사용하여 배열 중간에 요소 추가

splice() 메서드는 unshift(), push() 처럼 단순하지는 않습니다. 그렇다고 사용법이 어려운것은 아닙니다.

splice()  메서드를 사용하는 방법은 다음과 같습니다.

splice(start, deleteCount, ...items)

• start : 변경을 시작할 배열의 인덱스
• deleteCount : 삭제해야 하는 요소의 수로 start 인덱스 부터  deleteCount 수만큼 요소를 삭제 합니다.
• ...items : start 인덱스 위치에 추가되는 요소 입니다.

 

아래 코드는 arr 배열의 값을 ['a', 'b', 'c', 'd'] 로 만들기 위해서 splice() 사용하는 예시 입니다.

예시1

const arr = ['a','b','d'];
// 2번 인덱스에 c 가 없음.
// start 값은 2
// deleteCount 값은 0
// items 값은 'c'를 추가
arr.splice(2,0,'c');
console.log(arr); // [a,b,c,d]

 

예시2

const arr = ['b'];
// unshift() 가 아닌 splice()로 추가
// start 값은 0
// deleteCount 값은 0
// items 값은 'a'를 추가
arr.splice(0,0,'a');

// 뒤에 'c', 'd'를 추가
// start 값은 2
// deleteCount 값은 0
// items 값은 'c', 'd'를 추가
arr.splice(2,0,'c', 'd');
console.log(arr); // [a,b,c,d]

예시3

const arr = ['a','b',1,2,'d'];
// start 값은 2
// deleteCount 값은 2 (요소 1,2 제거)
// items 값은 'c'를 추가
arr.splice(2,2,'c');
console.log(arr); // [a,b,c,d]

 

배열 요소 삭제

shift() 메서드를 사용하여 배열 첫 번째 요소 삭제

shift() 메서드를 사용하여 첫번째 배열 요소를 삭제할 수 있습니다. 배열의 인덱스는 하나씩 당겨 집니다.

const arr = [0,1,2,3,4,5];
arr.shift();
console.log(arr); // [1,2,3,4,5]

 

pop() 메서드를 사용하여 배열 마지막 요소 삭제

pop() 메서드를 사용하여 마지막 배열 요소를 삭제할 수 있습니다.

const arr = [0,1,2,3,4,5];
arr.pop();
console.log(arr); // [1,2,3,4]

 

splice() 메서드를 사용하여 배열 중간 요소 삭제

위에 splice() 메서드로 중간에 요소를 추가해봤다면 삭제는 어렵지 않습니다.

삭제가 되어야 하는 요소의 시작 인데스와 범위만 지정해 주면 됩니다.

const arr = ['a', 'b', 'z', 'c', 'd'];
arr.splice(2,1);

console.log(arr); // ['a', 'b', 'c', 'd']

 

마무리

자바스크립트 배열의 생성, 접근, 추가, 삭제에 대해서 설명했습니다.

splice() 메서드는 요소 추가, 삭제가 모두 가능하기 때문에 잘 익혀두면 좋습니다.