7-1. JavaScript 배열의 특징과 생성

I. 자바스크립트의 배열은 다르다.

1. 다른 언어들의 배열

 - 한 배열에는 같은 자료형의 데이터만 포함 가능

 - 데이터의 메모리 주소가 연속적으로 나열됨

 - 접근은 빠름, 중간요소의 추가나 제거는 느림

 

2. 자바스크립트의 배열

 - 배열의 형태와 동작을 흉내내는 특수 객체

 - 한 배열에 다양한 자료형의 데이터가 들어갈 수 있음

 - 연속나열이 아님

 - 접근은 상대적으로 느림, 중간요소의 추가나 제거는 빠름

 

 

II. 배열 생성 방법들

 

1. 배열 리터럴

const emptyArr = []; // 빈 배열
const array = [1, 2, 3];
const undefArray = [1, , 2, , 3] // 빈 요소(undefined) 표함 배열 생성

console.log(emptyArr.length, emptyArr);	// []
console.log(array.length, array);	// [1, 2, 3]
console.log(undefArray.length, undefArray);	// [1, 비어있음, 2, 비어있음, 3]

 - undefArray의 프로퍼티들 확인

위와 같이 undefArray의 프로퍼티들을 살펴보면,

중간에 빈 요소(undefined)를 넣으면 '비어있음'이 들어가있고,

해당 인덱스가 빠져있는 것을 볼 수 있다. (인덱스 수 < length)

 

 

2. 생성자 함수

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

const array = new Array();

console.log(array);	// [] (콘솔에서 펼쳐서 보면 길이값(length)만 있음
console.log(array.length);	// 0

 - 인자가 숫자 하나면 길이값이 그 숫자가 되고 요소가 없는 배열 생성

const arr = new Array(3);

console.log(arr);	// [빈 x3]
console.log(arr.length);	// 3

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

 - 인자가 숫자가 아니거나, 둘 이상이라면 해당 값들로 배열 생성

const lotArray = new Array(1, 2, 3);
const stringArray = new Array('ABC');
const boolArray = new Array(true);

console.log(lotArray);	// [1, 2, 3]
console.log(stringArray);	// ['ABC']
console.log(boolArray);	// [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 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);	// ['홀', '짝', '홀', '짝', '홀']

 - 매핑 (mapping) : 각 요소가 특정 알고리즘을 거쳐 새 값으로 반환됨