Array

JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.

배열 만들기

var fruits = ['사과', '바나나'];

console.log(fruits.length);
// 2

인덱스로 배열의 항목에 접근하기

var first = fruits[0];
// 사과

var last = fruits[fruits.length - 1];
// 바나나

배열의 항목들을 순환하며 처리하기

fruits.forEach(function (item, index, array) {
  console.log(item, index);
});
// 사과 0
// 바나나 1

배열 끝에 항목 추가하기

var newLength = fruits.push('오렌지');
// ["사과", "바나나", "오렌지"]

배열 끝에서부터 항목 제거하기

var last = fruits.pop(); // 끝에있던 '오렌지'를 제거
// ["사과", "바나나"];

배열 앞에서부터 항목 제거하기

var first = fruits.shift(); // 제일 앞의 '사과'를 제거
// ["바나나"];

배열 앞에 항목 추가하기

var newLength = fruits.unshift('딸기') // 앞에 추가
// ["딸기", "바나나"];

배열 안 항목의 인덱스 찾기

fruits.push('망고');
// ["딸기", "바나나", "망고"]

var pos = fruits.indexOf("바나나");
// 1

인덱스 위치에 있는 항목 제거하기

var removedItem = fruits.splice(pos, 1); // 항목을 제거하는 방법

// ["딸기", "망고"]

인덱스 위치에서부터 여러개의 항목 제거하기

var vegetables = ['양배추', '순무', '무', '당근'];
console.log(vegetables); 
// ["양배추", "순무", "무", "당근"]

var pos = 1, n = 2;

var removedItems = vegetables.splice(pos, n); 
// 배열에서 항목을 제거하는 방법
// pos 인덱스부터 n개의 항목을 제거함

console.log(vegetables); 
// ["양배추", "당근"] (원 배열 vegetables의 값이 변함)

console.log(removedItems); 
// ["순무", "무"]

배열 복사하기

var shallowCopy = fruits.slice(); // 사본을 만드는 방법
// ["딸기", "망고"]

구문

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

매개변수

elementN

JavaScript 배열을 초기화하고 넣을 요소. 예외적으로 하나의 숫자 인수만 Array 생성자에 전달하는 경우는 다르게 처리합니다. 아래 arrayLength를 참고하세요. 이는 Array 생성자에만 적용되고, 대괄호 구문으로 만드는 배열 리터럴은 해당하지 않습니다.

arrayLength

만약 Array 생성자에 전달한 인수가 0과 2³²-1 사이의 정수(끝값 포함) 하나뿐이라면 새로운 JavaScript 배열을 생성하고 length 속성을 그 숫자로 설정해서 반환합니다. 이 외의 수를 받으면 RangeError 예외가 발생합니다.

설명

배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않습니다. 보통 이 성질은 편리하지만, 목적에 맞지 않는다면 형식화 배열^{typed array}을 사용하는 것을 고려해보세요.

배열은 요소 인덱스로 문자열(연관 배열)을 사용할 수 없으며 무조건 정수만 허용합니다. 속성 접근자를 사용해 정수 외 키에 접근할 경우 배열 리스트의 요소가 아니라 배열 객체의 속성 변수를 설정하거나 회수합니다. 배열 객체의 속성과 배열 요소의 리스트의 요소는 서로 다른 별개의 항목으로, 순회 및 변형 작업은 객체 속성에 적용되지 않습니다.

배열 요소에 접근하기

JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열의 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 length 속성에서 1을 뺀 것과 같습니다. 잘못된 인덱스를 사용하면 undefined를 반환합니다.

var arr = ['첫 번재 요소입니다', '두 번째 요소입니다', '마지막 요소입니다'];
console.log(arr[0]);              // '첫 번재 요소입니다'를 기록
console.log(arr[1]);              // '두 번재 요소입니다'를 기록
console.log(arr[arr.length - 1]); // '마지막 요소입니다'를 기록

toString이 속성인 것과 마찬가지로 배열의 요소도 속성입니다. 하지만 아래의 예시같이 배열 요소에 접근하려 하면, 속성 이름이 잘못되었기 때문에 구문 오류가 발생합니다.

console.log(arr.0); // 구문 오류

JavaScript 배열과 속성에 대해서도 특별한 점이 없습니다. 숫자로 시작하는 JavaScript 속성은 점 표현으로 참조할 수 없고 대괄호 표현을 사용해서만 참조할 수 있습니다. 만약 '3d'라는 속성을 가진 객체가 있다면, 그 속성은 대괄호 표현으로만 참조할 수 있습니다. 예를 들면,

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0);   // 구문 오류
console.log(years[0]);  // 정상 작동

renderer.3d.setTexture(model, 'character.png');     // 구문 오류
renderer['3d'].setTexture(model, 'character.png');  // 정상 작동

3d 예시에서 '3d'가 따옴표로 둘러싸여야 함에 유의하십시오. JavaScript 배열 인덱스도 따옴표로 둘러쌀 수 있지만(years[2] 대신에 years['2']처럼) 꼭 필요하지는 않습니다. years[2]의 2는 JavaScript 엔진이 toString 변환을 사용해 강제로 문자열로 변환합니다. '2'와 '02'가 years 객체의 서로 다른 두 개의 칸을 가리켜서 다음 예시가 true일 수 있기 때문입니다.

console.log(years['2'] != years['02']);

마찬가지로, 객체가 예약어를 속성으로 갖게 되었을 때(!) 그 속성은 대괄호 표현의 문자열 값으로만 접근할 수 있습니다(하지만 Firefox 40.0a2까지는 점 표현으로 접근할 수 있습니다).

var promise = {
  'var'  : 'text',
  'array': [1, 2, 3, 4]
};

console.log(promise['array']);

length 와 숫자형 속성의 관계

JavaScript 배열의 length 속성과 숫자형 속성은 연결되어 있습니다. 몇몇 배열 내장 메서드들(예: join, slice, indexOf, 등등.)은 호출되었을 때 배열의 length 속성의 값을 참조합니다. 다른 메서드들(예: push, splice, 등등.) 또한 배열의 length 속성을 업데이트을 유발합니다.

var fruits = [];
fruits.push('banana', 'apple', 'peach');

console.log(fruits.length); // 3

JavaScript 배열의 속성을 설정할 때 그 속성이 유효한 배열 인덱스이고 그 인덱스가 현재 배열의 경계(bounds)를 넘어간다면, 엔진은 배열의 length 속성을 그에 맞춰 업데이트 합니다:

fruits[5] = 'mango';
console.log(fruits[5]); // 'mango'
console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
console.log(fruits.length); // 6

length 증가.

fruits.length = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10

하지만, length 속성을 감소시키면 요소(element)를 지웁니다.

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

이것은 Array.length 페이지에 더 설명되어있습니다.

매치 결과를 이용한 배열 생성

정규표현식과 문자열 사이의 매치 결과로 JavaScript 배열을 만들 수 있습니다. 이 배열은 매치에 대한 정보를 제공하는 속성들과 요소들을 가집니다. 이러한 배열은 RegExp.exec, String.match, String.replace로부터 반환됩니다. 이 속성들과 요소들에 대한 설명을 돕기위해, 다음 예제를 보고 아래 테이블을 참조해주세요.

// 하나의 d와 하나 이상의 b에 하나의 d가 뒤따라 일치해야 합니다.
// 일치한 b와 다음 d를 기억하십시오.
// 대소문자 구분은 무시됩니다.

var myRe = /d(b+)(d)/i;
var myArray = myRe.exec('cdbBdbsbz');

매치로부터 반환되는 속성들과 요소들은 다음과 같습니다:

속성

Array.length

값이 1인 Array 생성자의 길이 속성입니다.

get Array[@@species]

파생 객체를 생성하는데 사용하는 생성자 함수입니다.

Array.prototype

모든 배열 객체에 속성 추가를 할 수 있습니다.

메서드

 

유사 배열 또는 반복 가능한 객체로부터 새로운 Array 인스턴스를 생성합니다.

Array.isArray()

만약 변수가 배열이면 참을, 아니면 거짓을 반환합니다.

Array.of()

전달인자의 개수나 데이터 타입에 관계없이 새 Array 인스턴스를 생성합니다.

Array 인스턴스

모든 Array 인스턴스는 Array.prototype로부터 상속을 받습니다. Array 생성자의 프로토타입 객체는 모든 Array 인스턴스에 영향을 주도록 수정될 수 있습니다.

속성

메서드

변경자 메서드

접근자 메서드

순회 메서드

예제

배열 생성

아래 예제는 길이 0의 배열 msgArray 을 생성하고, msgArray[0] 와 msgArray[99] 에 값을 할당하여, 배열의 길이를 100으로 변경합니다.

var msgArray = [];
msgArray[0] = 'Hello';
msgArray[99] = 'world';

if (msgArray.length === 100) {
  console.log('The length is 100.');
}

2차원 배열 생성

아래의 예제는 2차원 문자열 배열로 체스보드를 생성합니다. 첫번째 이동은 (6,4)의 'p'를 (4,4)로 복사하여 이루어집니다. 이전 위치 (6,4)는 빈공간으로 만듭니다.

var board = [ 
  ['R','N','B','Q','K','B','N','R'],
  ['P','P','P','P','P','P','P','P'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['p','p','p','p','p','p','p','p'],
  ['r','n','b','q','k','b','n','r'] ];

console.log(board.join('\n') + '\n\n');

// Move King's Pawn forward 2
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));

결과는 다음과 같습니다.

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , ,p, , , 
 , , , , , , , 
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

배열을 사용하여 일련의 값을 테이블처럼 표시하기

values = [];
for (var x = 0; x < 10; x++){
 values.push([
  2 ** x,
  2 * x ** 2
 ])
};
console.table(values)

결과는 다음과 같습니다.

0	1	0
1	2	2
2	4	8
3	8	18
4	16	32
5	32	50
6	64	72
7	128	98
8	256	128
9	512	162

(첫번째 열은 (인덱스))

명세

브라우저 호환성

참조

• JavaScript Guide: “Indexing object properties”
• JavaScript Guide: “Predefined Core Objects: Array Object”
• Array comprehensions
• Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras
• Typed Arrays