From 2a18a140122fc87b4f13577b9910e1627f2bbb88 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Tue, 23 Nov 2021 20:51:34 +0900 Subject: Rename html to md --- .../reference/global_objects/array/index.html | 483 --------------------- 1 file changed, 483 deletions(-) delete mode 100644 files/ko/web/javascript/reference/global_objects/array/index.html (limited to 'files/ko/web/javascript/reference/global_objects/array/index.html') diff --git a/files/ko/web/javascript/reference/global_objects/array/index.html b/files/ko/web/javascript/reference/global_objects/array/index.html deleted file mode 100644 index 11b705304c..0000000000 --- a/files/ko/web/javascript/reference/global_objects/array/index.html +++ /dev/null @@ -1,483 +0,0 @@ ---- -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.at()")}}
-
주어진 인덱스의 요소를 반환합니다. 음수 값을 지정할 경우 인덱스를 배열의 끝부터 셉니다.
-
{{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}}

- -

같이 보기

- - -- cgit v1.2.3-54-g00ecf