자바스크립트 배열 특징

• 배열의 형태와 동작을 흉내내는 특수 객체
• 한 배열에 다양한 자료형의 데이터가 들어갈 수 있음 (↔ 다른 언어는같은 자료형의 데이터만 포함 가능)
• 연속 나열이 아님 (↔ 다른 언어는 데이터의 메모리 주소가 연속적으로 나열됨)
• 접근은 상대적으로 느림(일반 객체보다는 빠름)
• 중간요소의 추가나 제거는 빠름
• 특정 자료형 전용 배열도 있음

배열 생성 방법

1. 배열 리터럴

const arr1 = []; // 빈 배열
const arr2 = [1, 2, 3];
const arr3 = [1, , 2, , 3] // 빈 요소(undefined) 표함 배열 생성

console.log(arr1.length, arr1);	// 0 []
console.log(arr2.length, arr2);	// 3 [1, 2, 3]
console.log(arr3.length, arr3);	// 5 [1, empty, 2, empty, 3]

2. 생성자 함수

• 표준 빌트인 객체들 중 하나

const arr = new Array();

console.log(arr);	// []
console.log(arr.length);	// 0
console.log(
  arr[0], arr[1], arr[2]
);	// undefined undefined undefined

const arr1 = new Array(1, 2, 3);
const arr2 = new Array('ABC');
const arr3 = new Array(true);

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

3. 정적 메서드 of

// 인자가 하나의 숫자라도 이를 요소로 갖는 배열 생성
const arr1 = Array.of(3);

const arr2 = Array.of(1, 2, 3);
const arr3 = Array.of('ABC', true, null);

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

4. 정적 메서드 from

• 배열, 유사배열객체, 이터러블을 인자로 받아 배열 반환

const arr1 = Array.from([1, 2, 3]);
const arr2 = Array.from('ABCDE');
const arr3 = Array.from({
  '0': true,
  '1': false,
  '2': null,
  length: 3
});

console.log(arr1);	// [1, 2, 3] 또 다른 배열로 얕은 복사됨
console.log(arr2);	// ['A', 'B', 'C', 'D', 'E']	한 글자씩 띄어짐
console.log(arr3);	// [true, false, null]

const arrLike = {
  0: '🍎',
  1: '🍌',
  2: '🥝',
  3: '🍒',
  4: '🫐',
  length: 5
};

// 일반 for문으로 순회 가능
for (let i = 0; i < arrLike.length; i++) {
  console.log(arrLike[i]);
}

• 유사 객체 배열일 뿐 이터러블이 아니기 때문에 for ... of문 사용할 수 없다

// for ... of 문은 이터러블에서만 사용 가능
for (const item of arrLike) {
  console.log(item);
}
// VM118:2 Uncaught TypeError: arrLike is not iterable at <anonymous>:2:20

// 배열은 이터러블, 인덱스를 사용해서 순회하였을 때보다 성능도 향상
for (const item of Array.from(arrLike)) {
  console.log(item);
}

• Array.from은 얕은 복사!

const arr1 = [1, 2, 3];
const arr2 = Array.from(arr1);
arr2.push(4);

console.log(arr1, arr2);	// [1, 2, 3] [1, 2, 3, 4] 서로 다른 배열이군

• 참조타입 요소의 내부값이 바뀔 경우

const arr1 = [{x: 1}, {x: 2}];
const arr2 = Array.from(arr1);
arr2.push({x: 3});
arr1[0].x = 0;
console.log(arr1, arr2);	
// 0 : {x: 0} 1 : {x: 2}
// 0 : {x: 0} 1 : {x: 2} 2 : {x: 3}

• 두 번째 인자: 매핑 함수

const arr1 = [1, 2, 3, 4, 5];
const arr2 = Array.from(arr1, x => x + 1);
const arr3 = Array.from(arr1, x => x * x);
const arr4 = Array.from(arr1, x => x % 2 ? '홀' : '짝');
console.log(arr2);	// [2, 3, 4, 5, 6]
console.log(arr3);	// [1, 4, 9, 16, 25]
console.log(arr4);	// ['홀', '짝', '홀', '짝', '홀']
// Map 메소드로 더 간단하게 할 수 있음

---

자바스크립트 배열의 특징과 생성