--- title: Array slug: Web/JavaScript/Reference/Global_Objects/Array tags: - Array - Example - Global Objects - JavaScript - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Array browser-compat: javascript.builtins.Array ---
{{JSRef}}

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

설명

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

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

자주 사용하는 연산

배열 만들기

let fruits = ['사과', '바나나']

console.log(fruits.length)
// 2

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

let first = fruits[0]
// 사과

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

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

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

배열 끝에 항목 추가하기

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

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

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

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

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

배열 앞에 항목 추가하기

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

배열 안 항목의 인덱스 찾기

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

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

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

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

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

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

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

let pos = 1
let n = 2

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

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

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

배열 복사하기

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

배열 요소에 접근하기

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

잘못된 인덱스를 사용하면 undefined를 반환합니다.

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

toString이 속성인 것과 마찬가지로(정확히 하자면, toString()은 메서드입니다) 배열의 요소도 속성입니다. 하지만 아래의 예시처럼 배열 요소에 접근하려 하면, 속성 이름이 유효하지 않기 때문에 구문 오류가 발생합니다.

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

이 점에는 JavaScript 배열과 속성에 특별한 점이 없습니다. 숫자로 시작하는 JavaScript 속성은 마침표 구문으로 접근할 수 없으며, 반드시 괄호 표기법으로 접근해야 합니다.

예를 들어 '3d'라는 이름의 속성을 가진 객체에서 해당 속성에 접근할 땐 괄호 표기법을 사용해야만 합니다.

let 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']);

length 와 숫자형 속성의 관계

JavaScript 배열의 {{jsxref("Array.length", "length")}} 속성과 숫자형 속성은 연결되어 있습니다.

몇몇 배열 내장 메서드({{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}} 등)은 호출했을 때 배열의 {{jsxref("Array.length", "length")}} 속성의 값을 참조합니다.

다른 메서드({{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}} 등) 또한 배열의 {{jsxref("Array.length", "length")}} 속성의 업데이트를 유발합니다.

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

console.log(fruits.length) // 3

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

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

{{jsxref("Array.length", "length")}}를 직접 늘릴 수 있습니다.

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

하지만, {{jsxref("Array.length", "length")}} 속성을 감소시키면 요소를 지웁니다.

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

{{jsxref("Array.length")}} 문서에 더 자세한 설명이 있습니다.

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

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

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

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

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

속성/요소 설명 예시
input {{ReadOnlyInline}} 정규 표현식과 일치시키는 원본 문자열을 나타내는 읽기 전용 속성입니다. "cdbBdbsbz"
index {{ReadOnlyInline}} 원본 문자열에서 정규 표현식이 처음 일치하는 문자열의 위치(원본 문자열의 첫 문자 위치를 0으로 하는)를 나타내는 읽기 전용 속성입니다. 1
[0] {{ReadOnlyInline}} 원본 문자열에서 정규 표현식이 처음 일치하는 문자열을 지정하는 읽기 전용 요소입니다. "dbBd"
[1], ...[n] {{ReadOnlyInline}} 만약 정규 표현식에 괄호가 포함돼 있다면 괄호에 일치하는 부분 문자열을 나타내는 읽기 전용 요소들입니다. 가능한 괄호 안의 부분 문자열의 수는 무제한입니다. [1]: bB
[2]: d

생성자

{{jsxref("Array.Array", "Array()")}}
Array 객체를 생성합니다.

정적 속성

Array.length
값이 1인 Array 생성자의 길이 속성입니다.
{{jsxref("Array.@@species", "get Array[@@species]")}}
파생 객체를 생성하는데 사용하는 생성자 함수입니다.

정적 메서드

{{jsxref("Array.from()")}}
유사 배열 또는 반복 가능한 객체로부터 새로운 Array 인스턴스를 생성합니다.
{{jsxref("Array.isArray()")}}
만약 변수가 배열이면 참을, 아니면 거짓을 반환합니다.
{{jsxref("Array.of()")}}
전달인자의 개수나 데이터 타입에 관계없이 새 Array 인스턴스를 생성합니다.

Array 인스턴스

모든 Array 인스턴스는 Array.prototype을 상속합니다. 다른 생성자와 마찬가지로, Array() 생성자의 프로토타입을 수정하면 모든 Array 인스턴스도 수정의 영향을 받습니다. 예를 들면, 새로운 메서드와 속성을 추가해 모든 Array를 확장할 수 있으므로, {{glossary("polyfill", "폴리필")}}에 쓰입니다.

그러나 배열 객체에 비표준 메서드를 추가하면 나중에 스스로, 혹은 JavaScript에 기능이 추가될 경우 문제가 될 수 있습니다.

잘 모를 법한 사실: Array.prototype은 그 스스로 Array입니다.

Array.isArray(Array.prototype) // true

인스턴스 속성

Array.prototype.constructor
객체의 프로토타입을 생성하는 함수를 지정합니다.
{{jsxref("Array.prototype.length")}}
배열의 원소 수를 나타냅니다.
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
{{jsxref("Statements/with", "with")}} 결속 범위로부터 제외하려는 속성 이름이 들어있는 기호입니다.

인스턴스 메서드

변경자 메서드

변경자 메서드는 배열을 수정합니다.

{{jsxref("Array.prototype.copyWithin()")}}
배열 내의 지정된 요소들을 동일한 배열 내에서 복사합니다.
{{jsxref("Array.prototype.fill()")}}
배열 안의 시작 인덱스부터 끝 인덱스까지의 요소값을 지정된 정적 값으로 채웁니다.
{{jsxref("Array.prototype.pop()")}}
배열에서 마지막 요소를 뽑아내고, 그 요소를 반환합니다.
{{jsxref("Array.prototype.push()")}}
배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.
{{jsxref("Array.prototype.reverse()")}}
배열의 요소 순서를 반전시킵니다. 첫 번째가 마지막이 되고 마지막이 첫 번째가 됩니다.
{{jsxref("Array.prototype.shift()")}}
배열에서 첫 번째 요소를 삭제하고 그 요소를 반환합니다.
{{jsxref("Array.prototype.sort()")}}
배열의 요소를 정렬하고 그 배열을 반환합니다.
{{jsxref("Array.prototype.splice()")}}
배열에서 요소를 추가/삭제합니다.
{{jsxref("Array.prototype.unshift()")}}
배열의 앞에 하나 이상의 요소를 추가하고 새로운 길이를 반환합니다.

접근자 메서드

접근자 메서드는 배열을 수정하지 않고, 기존 배열의 일부에 기반한 새로운 배열 또는 값을 반환합니다.

{{jsxref("Array.prototype.concat()")}}
배열을 매개변수로 주어진 배열/값과 이어붙인 새로운 배열을 반환합니다.
{{jsxref("Array.prototype.filter()")}}
지정한 콜백의 반환 결과가 true인 요소만 모은 새로운 배열을 반환합니다.
{{jsxref("Array.prototype.includes()")}}
배열이 주어진 값을 포함하는지 판별해 true 또는 false를 반환합니다.
{{jsxref("Array.prototype.indexOf()")}}
배열에서 주어진 값과 일치하는 제일 앞의 인덱스를 반환합니다. 없으면 -1을 반환합니다.
{{jsxref("Array.prototype.join()")}}
배열의 모든 요소를 문자열로 합칩니다.
{{jsxref("Array.prototype.lastIndexOf()")}}
배열에서 주어진 값과 일치하는 제일 뒤의 인덱스를 반환합니다. 없으면 -1을 반환합니다.
{{jsxref("Array.prototype.slice()")}}
배열의 일부를 추출한 새 배열을 반환합니다.
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
지정한 배열을 나타내는 배열 리터럴을 반환합니다. 새로운 배열을 만들기 위해 이 값을 사용할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.
{{jsxref("Array.prototype.toString()")}}
배열과 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.
{{jsxref("Array.prototype.toLocaleString()")}}
배열과 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.

순회 메서드

배열을 처리하면서 호출할 콜백 함수를 받는 메서드 여럿이 존재합니다. 이런 메서드를 호출하면 배열의 length를 기억하므로, 아직 순회를 끝내지 않았을 때 요소를 더 추가하면 콜백이 방문하지 않습니다.

요소의 값을 바꾸거나, 요소를 제거하는 등 다른 변경점은 콜백 방문 시점에 따라 최종 값에 영향을 줄 수 있습니다. 비록 이런 동작 방식은 잘 정의되어 있으나, 여러분의 코드를 다른 사람이 읽을 때 헷갈리지 않도록 여기에 의존하면 안됩니다.

반드시 배열을 변형해야 한다면, 새로운 배열로 복사하세요.

{{jsxref("Array.prototype.entries()")}}
배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 배열 반복자 객체를 반환합니다.
{{jsxref("Array.prototype.every()")}}
배열의 모든 요소가 주어진 판별 콜백을 만족할 경우 true를 반환합니다.
{{jsxref("Array.prototype.find()")}}
주어진 판별 콜백을 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없으면 undefined를 반환합니다.
{{jsxref("Array.prototype.findIndex()")}}
주어진 판별 콜백을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1를 반환합니다.
{{jsxref("Array.prototype.forEach()")}}
배열의 각각의 요소에 대해 콜백을 호출합니다.
{{jsxref("Array.prototype.keys()")}}
배열의 각 인덱스에 대한 키를 가지는 새로운 배열 반복자 객체를 반환합니다.
{{jsxref("Array.prototype.map()")}}
배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환값을 모은 새로운 배열을 반환합니다.
{{jsxref("Array.prototype.reduce()")}}
주어진 콜백 함수를 가산기와 요소 각각에 대해 왼쪽에서 오른쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.
{{jsxref("Array.prototype.reduceRight()")}}
주어진 콜백 함수를 가산기와 요소 각각에 대해 오른쪽에서 왼쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.
{{jsxref("Array.prototype.some()")}}
배열의 어떤 요소가 주어진 판별 콜백을 만족할 경우 true를 반환합니다.
{{jsxref("Array.prototype.values()")}}
배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.

예제

배열 생성

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

let 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)는 빈공간으로 만듭니다.

let 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

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

const values = []
for (let 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

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

명세

{{Specifications}}

브라우저 호환성

{{Compat}}

같이 보기