배열이란

• 자바스크립트에 배열이라는 타입은 존재 x

• 자바스크립트의 배열은 객체이지만, 일반 객체와 구별된 특징 존재

차이점은 무엇일까?

• 값의 순서와 length 프로퍼티를 갖는다는 점이 가장 큰 차이점이다.

자바스크립트 배열은 배열이 아니다?

• 배열은 2가지로 구분 가능

  • 밀집 배열

  • 희소 배열

배열 생성

• 자바스크립트에서 배열을 생성하는 방식도 여러 가지 존재함

1. 배열 리터럴

• 배열을 생성하는 가장 간단한 방식

• 배열 리터럴에 요소를 생략하면 희소 배열이 생성

const arr = [1,,3];
//배열의 요소를 생략하면 희소 배열 생성

console.log(arr.length); // 3
console.log(arr); // [ 1, <1 empty item>, 3 ]
console.log(arr[1]); // undefined

2. Array 생성자 함수

• 인수의 개수에 따라 다르게 동작한다.

  • 전달된 인수가 1개이며 숫자일 경우 - length 프로퍼티 값이 배열을 생성

  • 전달된 인수가 없는 경우 - 빈 배열 생성

  • 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 - 인수가 요소로 갖는 배열 생성

// 인수가 1개이며 정수인 경우 -> 희소 배열 생성
const arr = new Array(10);

console.log(arr); // [ <10 empty items> ]
console.log(arr.length); // 10
console.log(Object.getOwnPropertyDescriptors(arr)); // { length: { value: 10, writable: true, enumerable: false, configurable: false } }

new Array(4294967295);
new Array(4294967296); // RangeError: Invalid array length
new Array(-1); // RangeError: Invalid array length

// 인수가 없는 경우 -> 빈 배열 생성
new Array(); // []

// 인수가 2개 이상이거나 숫자가 아닌 경우 -> 인수를 요소로 갖는 배열을 생성
new Array(1, 2, 3); // [1,2,3]
new Array({}); // [{}]

3. Array.of 메서드

• 전달된 인수를 갖는 배열을 생성

• 인수가 1개이고 숫자여도 인수를 요소로 갖는 배열을 생성

const arr1 = Array.of(1);
const arr2 = Array.of(1, 2, 3);
const arr3 = Array.of("string");

console.log(arr1); // [ 1 ]
console.log(arr2); // [ 1, 2, 3 ]
console.log(arr3); // [ 'string' ]

4. Array.from 메서드

• ES6에 도입

• 유사배열 객체 OR 이터러블 객체를 인수로 전달받아 배열로 변환 후 반환한다.

  • 두 번째 인수로 함께 전달할 콜백 함수를 통해 값을 만들면서 요소를 채울 수 있다.

// 유사 배열 객체를 배열로 변환
const arr1 = Array.from({ length: 2, 0: "a", 1: "b" });

// 이터러블 객체를 배열로 변환
// 문자열은 "이터러블 객체"이기도 하다.
const arr2 = Array.from("Hi");

console.log(arr1); // [ 'a', 'b' ]
console.log(arr2); // [ 'H', 'i' ]

배열 삭제

• 배열도 객체이므로 배열의 특정 요소를 삭제하기 위해 delete 연산자 사용

• 희소 배열을 만들지 않으면서 배열을 삭제하는 경우 Array.prototype.splice 메서드를 사용할 것