Array

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.

* Some parts of this feature may have varying levels of support.

다른 프로그래밍 언어의 배열과 마찬가지로, Array 객체는 여러 항목의 컬렉션을 단일 변수 이름 아래 저장할 수 있고, 일반적인 배열 연산을 수행하기 위한 멤버가 있습니다.

설명

JavaScript에서 배열은 원시 값이 아니라 다음과 같은 핵심적인 특성을 가진 Array 객체입니다.

JavaScript 배열은 크기를 조정이 가능하고, 다양한 데이터 형식을 혼합하여 저장할 수 있습니다. (이러한 특성이 바람직하지 않은 경우라면, 형식화 배열을 대신 사용하세요.)
JavaScript 배열은 연관 배열이 아니므로 임의의 문자열을 인덱스로 사용하여 배열 요소에 접근할 수 없습니다. 하지만, 음수가 아닌 정수(또는 해당 수의 문자열 형식)를 인덱스로 사용하여 접근해야 합니다.
JavaScript 배열은 0 인덱스입니다. 배열의 첫 번째 요소는 인덱스 0, 두 번째 요소는 인덱스 1, 마지막 요소는 배열의 length 속성 값에서 1을 뺀 값에 위치합니다.
JavaScript 배열 복사 연산은 얕은 복사본을 생성합니다. (모든 JavaScript 객체의 모든 표준 내장 복사 연산은 깊은 복사본이 아닌 얕은 복사본을 생성합니다).

Array 객체는 (연관 배열에서처럼) 임의의 문자열을 요소 인덱스로 사용할 수 없으며 음수가 아닌 정수(또는 해당 수의 문자열 형식)를 사용해야 합니다. 정수가 아닌 것을 통해 배열의 요소를 설정하거나 접근하려고 하면, 배열 목록 자체에서 요소를 설정하거나 검색하는 것이 아니라 해당 배열의 객체 속성 컬렉션과 연결된 변수를 설정하거나 접근하게 됩니다. 배열의 객체 속성과 배열의 요소 목록은 별개이며, 배열의 순회 및 수정 연산은 이렇게 이름 붙여진 속성에 적용할 수 없습니다.

배열 요소는 toString이 속성인 것과 같은 방식으로 객체 속성입니다(하지만, 정확히 말하자면 toString()은 메서드입니다). 그럼에도 불구하고 다음과 같이 배열의 요소에 접근하려고 하면 속성 이름이 유효하지 않기 때문에 구문 오류가 발생합니다.

arr.0; // 구문 오류

JavaScript 구문에서 숫자로 시작하는 속성은 점 표기법 대신 대괄호 표기법을 사용하여 접근해야 합니다. 배열 인덱스를 따옴표로 묶을 수도 있지만 (예: years[2] 대신 years['2']), 일반적으로는 필요하지 않습니다.

years[2]의 2는 JavaScript 엔진에 의해 암시적 toString 변환을 통해 문자열로 강제 변환됩니다. 결과적으로 '2'와 '02'는 years 객체에서 서로 다른 두 개의 슬롯을 참조하게 되며, 다음 예제는 true 일 수 있습니다.

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

years['2']만이 실제 배열 인덱스입니다. years['02']는 배열 순회에서 방문되지 않는 임의의 문자열 속성입니다.

length와 숫자 속성의 관계

JavaScript 배열의 length 속성과 숫자 속성은 연결되어 있습니다.

내장 배열 메서드 중 일부(예: join(), slice(), indexOf() 등)는 호출 시 배열의 length 속성 값을 고려합니다.

다른 메서드(예: push(), splice() 등)도 배열의 length 속성을 갱신합니다.

const fruits = [];
fruits.push("banana", "apple", "peach");
console.log(fruits.length); // 3

속성이 유효한 배열 인덱스이고 해당 인덱스가 배열의 현재 범위를 벗어날 때 JavaScript 배열에 속성을 설정하면, 엔진은 배열의 length 속성을 적절히 갱신합니다.

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

length를 늘리면 새 요소를 만들지 않고 빈 슬롯을 추가하여 배열을 확장할 수 있습니다. undefined가 아닙니다.

fruits.length = 10;
console.log(fruits); // ['banana', 'apple', 'peach', empty x 2, 'mango', empty x 4]
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10
console.log(fruits[8]); // undefined

그러나 length 속성을 줄이면 요소가 삭제됩니다.

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

length 페이지에서 더 자세히 설명하겠습니다.

배열 메서드와 빈 슬롯

희소 배열의 빈 슬롯은 배열 메서드 간에 일관성 없이 동작합니다. 일반적으로 오래된 메서드는 빈 슬롯을 건너뛰는 반면, 최신 메서드는 빈 슬롯을 undefined로 처리합니다.

여러 요소를 순회하는 메서드 중, 다음은 인덱스에 접근하기 전에 in 확인을 수행하여 빈 슬롯을 undefined로 취급하지 않습니다.

빈 슬롯을 정확히 어떻게 처리하는지는 각 메서드의 페이지를 참조하세요.

아래 메서드는 빈 슬롯을 undefined로 취급합니다.

복사 메서드와 변경 메서드(mutating method)

일부 메서드는 메서드가 호출된 기존 배열을 변경하지 않는 대신, 새 배열을 반환합니다. 이러한 메서드는 먼저 새 배열을 구성한 다음 요소를 채우는 방식으로 수행됩니다. 복사는 항상 얕게 이루어지며, 메서드는 처음에 생성된 배열 이외에는 아무것도 복사하지 않습니다. 원래 배열의 요소는 다음과 같이 새 배열에 복사됩니다

객체: 객체 참조가 새 배열로 복사됩니다. 원래 배열과 새 배열 모두 동일한 객체를 참조합니다. 즉, 참조된 객체가 수정되면 변경 사항이 새 배열과 원래 배열 모두에 표시됩니다.
문자열, 숫자, 불리언과 같은 원시 유형(String, Number, Boolean 객체 아님): 해당 값이 새 배열에 복사됩니다.

어떤 메서드는 메서드가 호출된 배열을 변경하며, 이 경우 반환값은 메서드에 따라 다릅니다. 때로는 같은 배열에 대한 참조를 반환하고, 때로는 새 배열의 길이를 반환합니다.

다음 메서드는 this.constructor[Symbol.species]에 접근하여 사용할 생성자를 결정하고 새 배열을 생성합니다.