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개의 아이템이 제거된고, 
// 제거된 아이템들의 배열이 결과값으로 return된다

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 생성자에 전달되었고 그것이 수일 때는 예외입니다. (아래를 보십시오.) 이 특별한 경우는 괄호 구문으로 만들어진 배열 값이 아닌 Array 생성자에 의해 만들어진 JavaScript 배열에만 적용됨에 유의하십시오.

arrayLength

만약 Array 생성자에 전달된 인수가 0과 2³²-1 사이의 정수(끝값 포함) 하나뿐이라면, 생성자는 그 정수만큼의 길이를 가진 새 JavaScript 배열을 반환합니다. 만약 인수가 이 범위 밖의 정수라면, RangeError 예외가 발생합니다.

설명

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

몇몇 사람들은 배열을 연관 배열로 사용해서는 안 된다고 생각합니다. 그 대신에 객체를 사용할 수 있지만, 그것은 그 나름대로 주의가 필요합니다. Lightweight JavaScript dictionaries with arbitrary keys 포스트에 그 예시가 있습니다.

배열 요소에 접근하기

JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열의 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 length 속성에서 1을 뺀 것과 같습니다.

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 와 숫자형 속성의 관계

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

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

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

자바스크립트 배열의 속성을 설정할 때 그 속성이 유효한 배열 인덱스이고 그 인덱스가 현재 배열의 경계(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 페이지에 더 설명되어있습니다.

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

정규표현식과 문자열 사이의 매치 결과로 자바스크립트 배열을 만들 수 있습니다. 이 배열은 매치에 대한 정보를 제공하는 속성들과 요소들을 가집니다. 이러한 배열은 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 생성자의 length 속성입니다.

get Array[@@species]

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

Array.prototype

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

메소드

Array.from()

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

Array.isArray()

만약 변수가 배열이면 true를 아니면 false를 반환합니다.

Array.observe()

객체의 Object.observe()와 유사하게 배열에 대한 변경점을 비동기로 관찰합니다. 이것은 발생한 순서대로 변경 스트림을 제공합니다.

Array.of()

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

배열 인스턴스

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

속성

메서드

변경자 메서드

접근자 메서드

반복 메서드

Array generic 메서드

때로는 배열 메소드를 문자열이나 다른 배열스러운 객체 (함수 arguments같은)에 사용하려 할 수 있다. 이런 방식으로 문자열을 문자의 배열(또는 배열일 아닌 것을 배열처럼) 다룰 수 있다. 예를 들어, 변수 str에 있는 모든 문자들이 영문자인지 확인하기 위해, 아래와 같이 작성할 수 있다:

function isLetter(character) {
  return character >= 'a' && character <= 'z';
}

if (Array.prototype.every.call(str, isLetter)) {
  console.log("The string '" + str + "' contains only letters!");
}

이 표기법은 다소 경제적이지 못해서, JavaScript 1.6에서 generic 약칭을 도입했다:

if (Array.every(str, isLetter)) {
  console.log("The string '" + str + "' contains only letters!");
}

Generics는  String에 대해서도 사용가능하다.

이것들은 ECMAScript 표준의 일부가 아니어서 비-Gecko브라우저에서는 지원되지 않는다. 표준의 대안으로서, Array.from()을 이용하여 객체를 적절한 배열로 변경할 수 있다; 다만 그 방법들은 구형 브라우저에서는 지원되지 않는다:

if (Array.from(str).every(isLetter)) { 
  console.log("The string '" + str + "' contains only letters!"); 
}

예제

배열 생성

아래 예제는 길이 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