JavaScript Array - 배열 객체 생성

JavaScript에서 배열은 Array 객체를 사용합니다.

​

​

Array 객체

​

Array 객체로 생성(new) 하면 빈 배열(Array) 객체(Object)가 생성됩니다.

var ar = new Array();

console.log(ar);
--> [] --> 빈 배열 객체
console.log(ar.length);
--> 0
console.log(typeof ar);
--> object
console.log(ar instanceof Array);
--> true
console.log(ar instanceof Object);
--> true

 

생성된 배열 객체의 프로토타입 체인(Prototype Chain)은 다음과 같습니다.

ar > Array > Object

 

 

Array 구문

​

스크립트에서는 Array 객체를 생성(new) 할 때 초기 데이터(숫자, 문자열, 객체 등등)를 넣거나 배열의 크기를 설정할 수 있습니다.

new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)

// 초기 데이터로 배열 생성
var ar = new Array("포도", "딸기", "파인애플");

console.log(ar);
--> (3) ['포도', '딸기', '파인애플']
console.log(ar.length);
--> 3

// 초기 배열 크기 설정으로 배열 생성
var ar = new Array(3);

console.log(ar);
--> (3) [empty × 3]
console.log(ar.length);
--> 3

 

배열을 배열의 크기를 설정하여 생성(new) 할 경우 각 배열은 빈 상태로 배열을 읽으면 undefined이 리턴됩니다.

// 초기 배열 크기 설정으로 배열 생성
var ar = new Array(3);

console.log(ar[0]);
--> undefined
console.log(typeof ar[0]);
--> undefined

 

스크립트에서는 [](대괄호)로 배열 객체를 생성할 수 있습니다.

var ar = [];

console.log(ar);
--> [] --> 빈 배열 객체
console.log(ar.length);
--> 0

// 초기 데이터로 배열 생성
var ar = [1, 10, 15, 20, 25];

console.log(ar);
--> (5) [1, 10, 15, 20, 25]
console.log(ar.length);
--> 5

 

 

 

배열 객체 항목 읽기

​

생성된 배열 객체에서 [](대괄호)로 배열의 항목을 읽습니다. [](대괄호)에는 배열의 인덱스입니다. 배열의 인덱스는 0부터 시작합니다. (zero-base)

var ar = ["포도", "딸기", "파인애플"];

console.log(ar[0]);
--> 포도
console.log(ar[ar.length - 1]);
--> 파인애플
console.log(ar[3]);
--> undefined

배열의 크기를 넘는 인덱스로 배열의 항목을 읽으면 undefined이 리턴됩니다.

​

​

배열 객체 끝 항목 추가

​

생성된 배열 객체에 Array 객체의 push() 메서드로 배열 끝에 항목을 추가합니다.

var ar = ["포도", "딸기", "파인애플"];

ar.push("자두");

console.log(ar);
--> (4) ['포도', '딸기', '파인애플', '자두']
console.log(ar.length);
--> 4

 

 

배열 객체 끝 항목 제거

​

생성된 배열 객체에서 Array 객체의 pop() 메서드로 배열 끝의 항목을 제거합니다.

var ar = ["포도", "딸기", "파인애플"];

var popData = ar.pop();

console.log(popData);
--> 파인애플
console.log(ar);
--> (2) ['포도', '딸기']
console.log(ar.length);
--> 2

 

 

배열 객체 앞 항목 추가

​

생성된 배열 객체에 Array 객체의 unshift() 메서드로 배열 앞에 항목을 추가합니다.

var ar = [1, 10, 15, 20, 25];

ar.unshift(30);

console.log(ar);
--> (6) [30, 1, 10, 15, 20, 25]
console.log(ar.length);
--> 6

 

 

배열 객체 앞 항목 제거

​

생성된 배열 객체에 Array 객체의 shift() 메서드로 배열 앞에 항목을 제거합니다.

리턴 값으로 제거된 항목이 리턴됩니다.

var ar = [1, 10, 15, 20, 25];

var shiftData = ar.shift();

console.log(shiftData);
--> 1
console.log(ar);
--> (4) [10, 15, 20, 25]
console.log(ar.length);
--> 4

 

 

 

배열 객체 항목 찾기

​

생성된 배열 객체에 Array 객체의 indexOf() 메서드로 배열에서 항목을 찾아 인덱스를 리턴합니다.

var ar = ["포도", "딸기", "파인애플"];

console.log(ar.indexOf("딸기"));
--> 1
console.log(ar.indexOf("자두"));
--> -1

배열 객체에서 검색된 항목이 없으면 -1이 리턴됩니다.

​

​

인덱스 다음부터 항목 제거

​

생성된 배열 객체에 Array 객체의 splice() 메서드로 지정된 인덱스부터 지정된 수까지 항목을 제거합니다.

Array 객체의 splice() 메서드는 리턴 값으로 제거된 항목을 배열로 리턴합니다.

var ar = ["포도", "딸기", "파인애플"];

// 인덱스 1부터 1개 항목 제거
ar.splice(1, 1);

console.log(ar);
--> (2) ['포도', '파인애플']

// 인덱스 0부터 2개 항목 제거
var arRemovedItem = ar.splice(0, 2);

console.log(ar);
--> ['파인애플']
console.log(arRemovedItem);
--> (2) ['포도', '딸기']