Array - 배열의 생성, 일반적인 배열과의 차이점

배열의 정의

 

배열은 여러 개의 값을 순차적으로 나열한 자료구조이다.

 

 

배열의 생성

 

1. 배열의 리터럴을 통한 생성

 

배열이 가지고 있는 값을 요소라 부르며 자바스크립트의 모든 값은 배열의 요소가 될 수 있다.

const arr = ['바나나', '복숭아', '키위'];
console.log(arr);


//[ '바나나', '복숭아', '키위' ]

2. 배열 생성자 함수

const arr2 = new Array();
console.log(arr2);         //[]

전달된 인수가 1개이고 숫자인경우 length 프로퍼티 값이 인수인 배열을 생성한다.

const arr3 = new Array(10);
console.log(arr3);         //[ <10 empty items> ]

전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성한다.

const arr4 = new Array(1, 2, 3);
console.log(arr4);                //[ 1, 2, 3 ]

 

3. Array.of 메소드

전달된 인수를 요소로 갖는 배열을 생성한다.

console.log(Array.of(10));				//[ 10 ]
console.log(Array.of(1, 2, 3));			//[ 1, 2, 3 ]
console.log(Array.of("hello", "js"));	//[ 'hello', 'js' ]

배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다.

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

배열의 요소는 자신의 위치를 나타내는 인덱스를 가지며 배열의 요소에 접근할 때 사용한다.

console.log(arr[0]);  //바나나
console.log(arr[1]);  //복숭아
console.log(arr[2]);  //키위

for문을 통해 요소에 순차 접근할 수 있다.

for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

//출력
바나나
복숭아
키위

 

배열은 별도의 타입이 존재하지 않으며 객체 타입이다.

console.log(typeof arr);  //Object

 

일반적인 배열과의 차이점

• 일반적인 배열 

각 요소가 동일한 데이터 크기를 가지며, 빈틈 없이 연속적으로 이어져 있어 인덱스를 통해 임의의 요소에 한 번에 접근할 수 있는 고속 동작이 장점

• 자바스크립트의 배열 

일반적인 배열의 동작을 흉내낸 특수한 객체이다.

각각의 메모리 공간이 동일한 크기를 갖지 않아도 되고 연속적으로 이어져 있지 않을 수도 있다.

인덱스로 배열요소에 접근하는 경우 일반적인 배열보다 느리지만, 요소의 삽입 삭제의 경우 빠르다.

console.log(Object.getOwnPropertyDescriptors([1,2,3]));

//출력
{
  '0': { value: 1, writable: true, enumerable: true, configurable: true },
  '1': { value: 2, writable: true, enumerable: true, configurable: true },
  '2': { value: 3, writable: true, enumerable: true, configurable: true },
  length: { value: 3, writable: true, enumerable: false, configurable: false }
}

  자바스크립트의 모든 값이 객체의 프로퍼티 값이 될 수 있으므로 모든 값이 배열의 요소가 될 수 있다.

const arr = [
    '홍길동',
    20,
    true,
    null,
    undefined,
    NaN,
    Infinity,
    [],
    {},
    function() {}
]

 

length property

length property는 요소의 개수를 나타내는 0이상의 정수의 값을 갖는다.

console.log([].length);			//0
const arr = [1, 2, 3, 4, 5];
console.log(arr.length);		//5

 

length property 값은 배열에 요소를 추가하거나 삭제하면 자동으로 갱신된다.

arr.push(6);	//push(6) : 배열 마지막에 6 추가
console.log(arr.length); //6

arr.pop();  //pop() : 마지막 요소 제거
console.log(arr.length); //5

 

length property에 임의의 숫자 값을 명시적으로 할당할 수 있고, 현재 length보다 작은 숫자 값을 할당하면 배열의 길이가 줄어든다.

arr.length = 3;
console.log(arr);		  //[ 1, 2, 3 ]
console.log(arr.length);  //3

 

현재 length보다 큰 숫자를 할당하면 length 프로퍼티의 값은 변경되지만 배열의 길이가 늘어나지는 않는다.

-> length의 value 값이 10일뿐, 실제 공간이 늘어나지 않는다.

arr.length = 10;
console.log(arr);
console.log(arr.length);
console.log(Object.getOwnPropertyDescriptors(arr));

//출력
[ 1, 2, 3, <7 empty items> ]
10
{
  '0': { value: 1, writable: true, enumerable: true, configurable: true },
  '1': { value: 2, writable: true, enumerable: true, configurable: true },
  '2': { value: 3, writable: true, enumerable: true, configurable: true },
  length: { value: 10, writable: true, enumerable: false, configurable: false }
}

 

자바스크립트는 배열의 요소가 연속적으로 위치하지 않고 일부가 비어있는 희소 배열을 문법적으로 허용한다.

const sparse  = [, 2, , 4];
console.log(sparse.length);
console.log(Object.getOwnPropertyDescriptors(sparse));

//출력
4
{
  '1': { value: 2, writable: true, enumerable: true, configurable: true },
  '3': { value: 4, writable: true, enumerable: true, configurable: true },
  length: { value: 4, writable: true, enumerable: false, configurable: false }
}