색인이 생성된 컬렉션

색인이 생성된 컬렉션은 번호가 매겨진 색인을 사용하여 요소를 저장하고 액세스하는 데이터 구조입니다. 색인이 생성된 컬렉션에 저장된 값에는 '0 색인 생성'이라는 패턴으로 0부터 번호가 매겨진 색인이 할당됩니다. 그러면 색인을 참조하여 색인이 생성된 컬렉션에 저장된 값에 액세스할 수 있습니다.

배열

배열은 복합 객체나 다른 배열을 포함하여 모든 데이터 유형의 값을 0개 이상 보유할 수 있는 컨테이너입니다. 배열에 저장된 값을 배열의 '요소'라고도 합니다.

배열 만들기

원시 데이터 유형과 마찬가지로 배열을 만드는 방법에는 배열 리터럴로 또는 new Array()로 자바스크립트의 기본 제공 Array() 생성자를 호출하는 방법, 두 가지 방법이 있습니다. 배열을 변수에 할당하면 이식성이 뛰어나고 반복 가능한 방법으로 단일 식별자에 여러 값을 할당할 수 있습니다.

배열 리터럴 구문은 대괄호 ([])를 사용하여 0개 이상의 쉼표로 구분된 데이터 값을 둘러쌉니다.

const myArray = [];

배열 생성자 구문은 JavaScript의 기본 제공 Array 객체를 new 키워드가 있는 생성자로 사용합니다.

const myArray = new Array();

배열 리터럴과 배열 생성자 문법을 모두 사용하면 배열을 만들 때 배열에 정보를 채울 수 있지만 이러한 값이 정의되는 방식은 약간 다릅니다. 배열 리터럴 구문은 대괄호 사이에 쉼표로 구분된 값을 사용하며, 결과 배열과 모양이 같습니다.

const myArray = [ true, null, "String", false ];

myArray;
> [ true, null, "String", false ]

배열 생성자 구문은 쉼표로 구분된 값을 인수로 사용합니다. 단, 한 가지 특수한 동작 예외가 있습니다.

const myArray = new Array( true, null, "String", false );

myArray;
> Array(4) [ true, null, "String", false ]

단일 숫자 값이 Array 생성자에 전달되면 이 값은 결과 배열의 0번째 위치에 할당되지 않습니다. 대신 해당 개수의 빈 슬롯 값으로 배열이 생성됩니다. 이렇게 해도 배열에 제한사항이 적용되지 않습니다. 배열 리터럴과 동일한 방식으로 항목을 추가하고 삭제할 수 있습니다.

// Firefox:\
const myArray = new Array( 10 );

myArray;
> Array(10) [ <10 empty slots> ]

// Chrome:
const myArray = new Array( 10 );

myArray;
> (10) [empty × 10]

빈 슬롯을 포함하는 배열('희소 배열'이라고도 함)은 특수한 경우입니다. 빈 슬롯은 undefined 또는 명시적으로 null 값을 포함하는 대신 자주(항상 그런 것은 아님) 언어의 다른 곳에서 undefined 값으로 처리됩니다.

배열 리터럴을 만들 때 쉼표 사이에 값을 생략하여 실수로 배열 리터럴 구문을 사용하여 희소 배열을 만들 수 있습니다.

const myArray = [ true,, true, false ];

myArray;
> Array(4) [ true, <1 empty slot>, true, false ]

모든 컨텍스트에서 의미 있는 값으로 취급되지는 않지만 빈 슬롯은 배열의 전체 길이에 고려되므로 배열 값을 반복할 때 예상치 못한 결과가 발생할 수 있습니다.

const myArray = [ 1,, 3, 4 ];

myArray.length;
> 4

for( const myValue of myArray ) {
  console.log( myValue + 10 );
}
> 11
> NaN
> 13
> 14

이 동작은 JavaScript의 초기 디자인 결정 중 일부로부터 기인한 것입니다. Modern Development에서는 희소 배열을 사용하지 마세요.

프리미티브와 마찬가지로 배열 리터럴은 해당 생성자에서 속성과 메서드를 상속합니다. 배열은 특수한 형태의 객체이므로 배열 리터럴 구문과 new Array() 구문은 기능적으로 동일한 결과를 생성합니다. 즉, Array 생성자에서 프로토타입을 상속하는 객체입니다.

const arrayLiteral = [];
const arrayConstructor = new Array();

typeof arrayLiteral;
> "object"

arrayLiteral;
> Array []
    length: 0
    <prototype>: Array []

typeof arrayConstructor;
> "object"

arrayConstructor;
> Array []
    length: 0
    <prototype>: Array []

두 결과가 동일하고 배열 리터럴 구문이 더 간결하고 리터럴이므로 항상 new Array() 구문 대신 배열 리터럴 구문을 사용하는 것이 좋습니다.

배열 값 액세스

대괄호 표기법을 사용하여 배열 내의 개별 요소에 액세스할 수 있습니다. 대괄호는 배열이나 해당 요소의 색인을 참조하는 숫자가 포함된 식별자 다음에 오는 대괄호 ([])입니다.

[ "My string", "My other string" ][ 1 ];
> "My other string"

const myArray = [ "My string", 50, true ];

myArray[ 0 ];
> "My string"

myArray[ 1 ];
> 50

myArray[ 2 ];
> true

자바스크립트의 배열은 연결성이 없습니다. 즉, 임의의 문자열을 색인으로 사용할 수 없습니다. 그러나 배열의 요소에 액세스하는 데 사용되는 숫자 값은 내부적으로 문자열 값으로 강제 변환됩니다. 즉, 숫자 문자만 포함된 문자열 값을 사용할 수 있습니다.

const myArray = [ "My string", 50, true ];

myArray[ 2 ];
> true

myArray[ "2" ];
> true

배열에 정의된 것 이외의 요소에 액세스하려고 하면 오류가 아닌 undefined이 발생합니다.

const myArray = [ "My string", 50, true ];

myArray[ 9 ];
> undefined

디스트럭처링 할당

디스트럭처링은 배열이나 객체에서 값 범위를 추출하여 식별자 세트에 할당하는 간결한 방법입니다. 원래 배열이나 객체를 수정하지는 않지만 원래 데이터 구조의 '압축해제'라고도 합니다.

디스트럭처링 할당은 배열 또는 객체와 유사한 식별자 목록을 사용하여 값을 추적합니다. 바인딩 패턴 디스트럭처링이라고 하는 가장 간단한 형태의 각 값은 배열 또는 객체에서 압축 해제되고 상응하는 변수에 할당되며 let 또는 const (또는 var)를 사용하여 초기화됩니다.

const myArray = [ "A string", "A second string" ];
const [ myFirstElement, mySecondElement ] = myArray;

const myObject = { firstValue: false, secondValue: true };
const { myProp, mySecondProp } = myObject;

myFirstElement;
> "My string"

mySecondElement;
> "Second string"

myProp;
> false

mySecondProp;
> true

객체의 구조를 해체하려면 중괄호 ({})를 사용하고 배열을 디스트럭처링할 때는 대괄호 ([])를 사용합니다.

const myArray = [ false, true ];
const myObject = { firstValue: false, secondValue: true };

const [ myProp, mySecondProp ] = myObject;
> Uncaught TypeError: myObject is not iterable

const { myElement, mySecondElement } = myArray;

myElement
> undefined

mySecondElement;
> undefined

배열 해체는 왼쪽에서 오른쪽으로 순차적으로 발생합니다. 디스트럭처링 할당의 각 식별자는 동일한 색인을 가진 배열의 요소에 해당합니다.

const myArray = [ 1, 2, 3 ];
const [ myElement, mySecondElement, myThirdElement ] = myArray;

myElement;
> 1

mySecondElement;
> 2

myThirdElement;
> 3

이는 객체를 디스트럭처링할 때의 기본 동작이기도 합니다. 그러나 디스트럭처링 할당에 사용된 식별자가 객체 속성의 키와 일치하면 지정된 순서에 관계없이 식별자에 해당 속성 값으로 채워집니다.

const myObject = { firstValue: 1, secondValue: 2, thirdValue 3 };
const { secondValue, thirdValue, firstValue } = myObject;

firstValue;
> 1

secondValue;
> 2

thirdValue;
> 3

식별자를 생략하면 요소를 건너뛸 수 있습니다.

const myArray = [ 1, 2, 3 ];
const [ firstValue,, secondValue ] = myArray;

firstValue;
> 1

secondValue;
> 3

또한 디스트럭처링 구문을 사용하면 희소 배열과 같이 비구조화 값이 빈 슬롯이거나 undefined 값일 때 기본값을 할당할 수 있습니다.

const myArray = [ true, ];
const [ firstValue = "Default string.", secondValue = "Default string." ] = myArray;

firstValue;
> true

secondValue;
> "Default string."

해체는 값을 특정 유형으로 강제 변환하지 않습니다. 즉, 빈 문자열 ("") 또는 null와 같은 '잘못된' 값은 여전히 의미 있는 분석된 값으로 간주됩니다.

const myArray = [ false, null, 0, "",, undefined ];
const [ falseValue = true, nullValue = true, zeroValue = true, emptyStringValue = true, emptySlot = true, undefinedValue = true ] = myArray;

falseValue;
> false;

nullValue;
> null

zeroValue;
> 0

emptyStringValue;
> ""

emptySlot;
> true

undefinedValue;
> true

분산 연산자

ES6에 도입된 분산 연산자 (...)를 사용하여 배열, 문자열, 객체 리터럴과 같은 반복 가능한 데이터 구조를 개별 요소로 확장합니다. 확장 연산자 바로 뒤에 확장할 데이터 구조 또는 해당 데이터 구조를 포함하는 변수의 식별자가 옵니다.

const myArray = [ 1, 2, 3 ];

console.log( ...myArray );
> 1 2 3

분산 구문은 주로 배열을 복사하고 결합하는 데 사용됩니다.

const myArray = [ 4, 5, 6 ];
const mySecondArray = [1, 2, 3, ...myArray ];

mySecondArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

다음 컨텍스트에서만 분산 문법을 사용할 수 있습니다.

배열과 문자열의 경우 분산 구문은 함수 호출의 인수가 0개 이상이거나 배열의 요소가 예상되는 경우에만 적용됩니다. 이 섹션의 분산 연산자 문법의 첫 번째 예는 기본 제공 console.log 메서드에 ...myArray를 인수로 전달하기 때문에 작동합니다.

예를 들어 분산되는 데이터를 다른 배열 외부의 변수에 할당할 수 없습니다.

const myArray = [ 1, 2, 3 ];
const spreadVariable = ...myArray;
> Uncaught SyntaxError: Unexpected token '...'

그러나 원래 배열을 배열 리터럴에 분산하여 배열을 복사합니다.

const myArray = [ 1, 2, 3 ];
const spreadArray = [ ...myArray ];

spreadArray;
> Array(3) [ 1, 2, 3 ]

둘 이상의 배열을 구성하는 요소를 단일 배열로 병합하는 방법은 다음과 같습니다.

const myArray = [ 1, 2, 3 ];
const mySecondArray = [ 4, 5, 6 ];
const myNewArray = [ ...myArray, ...mySecondArray ];

myNewArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

또는 다음과 같이 함수 호출에서 배열의 요소를 개별 인수로 전달합니다.

const myArray = [ true, false ];
const myFunction = ( myArgument, mySecondArgument ) => {
    console.log( myArgument, mySecondArgument );
};

myFunction( ...myArray );
> true false

펼치기 연산자는 ES2018의 객체 리터럴과 함께 작동하도록 확장되었습니다. 배열과 마찬가지로 분산 연산자를 사용하여 객체를 복제하거나 병합할 수 있습니다.

const myObj = { myProperty : true };
const mySecondObj = { ...myObj };

mySecondObj;
> Object { myProperty: true }

const myFirstObj = { myProperty : true };
const mySecondObj = { additionalProperty : true };
const myMergedObj = { ...myFirstObj, ...mySecondObj };

myMergedObj;
> Object { myProperty: true, additionalProperty: true }

분산 연산자는 '얕은' 복사본을 만듭니다. 즉, 원본 객체의 프로토타입과 열거할 수 없는 속성은 복사하지 않습니다.

const myCustomPrototype = { protoProp: "My prototype." };
const myObj = Object.create( myCustomPrototype, {
    myEnumerableProp: {
        value: true,
        enumerable: true
    },
    myNonEnumerableProp: {
        value: false,
        enumerable: false
    }
});
const myNewObj = { ...myObj };

myObj;
> Object { myEnumerableProp: true, … }
    myEnumerableProp: true
    myNonEnumerableProp: false
    <prototype>: Object { protoProp: "My prototype." }

myNewObj;
> Object { myEnumerableProp: true }
    myEnumerableProp: true
    <prototype>: Object { … }

배열과 객체는 서로 바꿔서 사용할 수 없다는 점에 유의하세요. 객체를 배열로 확장하거나 배열을 객체로 확산할 수 없습니다.

나머지 연산자

연산자 자체의 구문은 동일하지만 나머지 연산자 (...)는 사용된 컨텍스트에 따라 반대 함수를 실행합니다. 반복 가능한 데이터 구조를 개별 요소로 확장하는 대신 할당 해제 또는 함수 매개변수에서와 같이 나머지 연산자는 요소를 반복 가능한 데이터 구조로 결합합니다. 이 이름은 데이터 값 세트의 '나머지'를 수집하는 데 사용된다는 사실에서 비롯됩니다.

디스트럭처링 할당과 함께 사용할 경우 이 문법을 'rest property' 문법이라고 합니다.

const myArray = [ "First", "Second", "Third", "Fourth", "Fifth" ];

[ myFirstElement, mySecondElement, ...remainingElements ] = myArray;

myFirstElement;
> "First"

mySecondElement;
> "Second"

remainingElements;
> Array(3) [ "Third", "Fourth", "Fifth"]

함수에 무기한 개수의 인수를 제공하는 데 사용되는 경우 이 구문을 'rest 매개변수' 구문이라고 합니다.

function myFunction( ...myParameters ) {
    let result = 0;
    myParameters.forEach( ( myParam ) => {
        result += myParam;
    });
    return result;
};

myFunction( 2, 2 );
> 4

myFunction( 1, 1, 1, 10, 5 );
> 18

myFunction( 10, 11, 25 );
> 46

%TypedArray%

유형이 지정된 배열은 구조화된 바이너리 데이터를 저장하도록 설계된 ES6 기능입니다. 예를 들어 업로드된 파일 또는 WebGL을 사용할 때 사용할 수 있습니다.

기호와 마찬가지로 %TypedArray% 내장 함수 (일반적으로 %TypedArray% 또는 @@TypedArray로 문서화되므로 전역 속성으로 오인될 수 없음)는 일반적인 의미의 생성자 함수가 아니므로 new로 호출하거나 직접 호출할 수 없습니다. 대신 %TypedArray%는 개별 생성자의 상위 슈퍼클래스를 나타내며 각 생성자는 특정 바이너리 데이터 형식을 사용합니다. 내장 %TypedArray% 슈퍼클래스는 모든 %TypedArray% 생성자 서브클래스와 인스턴스가 상속하는 속성과 유틸리티 메서드를 제공합니다.

이해도 테스트

`const myArray = [ 30, 50, 70 ];` 에서 `myArray[1]`은(는) 무엇을 반환하나요?

50명

30

70

`myArray` 에 3개의 값이 있는 경우 `myArray[9]` 는 무엇을 반환하나요?

Undefined

오류 메시지

9

Null