[JS] 자바스크립트 배열 생성, 특징, 함수: push, unshift, pop, shift, length, splice

 자바스크립트 배열의 특징과 관련 함수를 알아봅니다.

 

[ Contents ]

 

 

1. 배열 생성

let 배열명 = new Array(항목);
let 배열명 = new Array(항목 개수);

 new 키워드를 사용해서 배열을 생성하는 방법입니다. 

 

let array1 = new Array(1, 2, 3);
let array2 = new Array(3);

console.log(array1); // [1, 2, 3]
console.log(array2); // [undefined, undefined, undefined]

 여러 개의 인자를 넣으면 '해당 인자를 넣은 배열'이 만들어지고, 인자 1개만 넘으면 해당 인자 크기만큼의 빈 배열이 생성됩니다. 빈 배열의 각 항목은 NULL(undefined) 값입니다.

 

 

let 배열명 = [항목];

 조금 더 익숙한 코드입니다. 선언과 생성을 같이 하는 초기화 방식으로, 간단히 배열을 만들 수 있습니다.

 

let arr = [1, 'Hello', null];
console.log(arr);

for(let i=0; i<arr.length; i++){
    console.log(arr[i], typeof(arr[i]));	// 자료형을 알아볼 때에는 typeof 이용
}

 자바스크립트 배열은 동일한 자료형의 항목으로 구성하지 않아도 됩니다. 타 언어의 구조체와 비슷한 느낌이예요.

 

 

2. 배열 항목 추가

배열.push(항목)    // 뒤에 추가
배열.unshift(항목)     // 앞에 추가

 배열 항목을 추가하는 함수입니다.

 

let arr = [];
console.log(arr);

arr.push('star가', '되고나서');
console.log(arr);

arr.unshift('[Tistory]');
console.log(arr);

 push는 뒤에 항목을 덧붙이며, unshift는 앞에 항목을 추가합니다.

 

반응형

 

3. 배열 항목 삭제

배열.pop()    // 마지막 항목 삭제
배열.shift()     // 첫 항목  삭제

 배열 항목을 삭제하는 함수입니다.

 

let arr = [1, 2, 3];
console.log(arr);

arr.pop();
console.log(arr);

arr.shift();
console.log(arr);

 추가와 달리, 삭제하는 배열 함수는 인자를 필요로 하지 않습니다. 맨 처음과 마지막 항목을 고정해서 삭제하기 때문입니다.

 

 

4. 중간에 값 추가 및 삭제

배열.splice(시작 인덱스, 삭제 개수, 추가할 항목);

 여태까지 맨 처음과 끝에 항목을 추가하거나 삭제하는 함수를 알아봤습니다. splice는 배열 중간에 항목을 추가하거나 삭제하는 함수입니다.

 

let name = ['jangThang', 'Mr.jang', 'Sensen', 'Gaby'];
console.log(name);

idx = name.indexOf('Sensen')
console.log(idx);

name.splice(idx, 1, 'Arene')
console.log(name);

 실무에서는 특정 값을 찾아서 삭제하거나 변경할 일이 많이 생깁니다. indexOf로 특정 값의 인덱스를 찾고 삭제 후 추가하는 예제 코드입니다.

 이렇게 배열의 중간 항목도 삭제, 삽입이 가능합니다.