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

• 다른 언어의 배열 ⇒ 전형적 배열
  • 데이터의 메모리 주소가 연속적으로 나열
  • 접근이 빠름, 중간 요소의 추가나 제거는 느림
• 자바스크립트의 배열
  • 배열의 형태와 동작을 흉내내는 특수 객체
  • 한 배열에 다양한 자료형의 데이터가 들어갈 수 있음
  • 연속나열이 아님 - 엔진에 따라 요소들의 타입이 동일하면 연속 배열하기도…
  • 접근은 상대적으로 느림 (일반 객체 보다는 빠름), 중간요소의 추가나 제거는 빠름
  • 특정 자료형 전용 배열이 있음 - 더 빠름 🔗 MDN 문서 보기

배열 생성 방법

• 배열의 리터럴

const arr1 = [];
const arr2 = [1, 2, 3];
const arr3 = [1, 2, ,3]; // 빈 요소 undefined 반환

console.log(arr1.length, arr1);
console.log(arr2.length, arr2);
console.log(arr3.length, arr3);

• 생성자 함수

  • 표준빌트인 객체중 하나
  • 👉 MDN 문서 보기
  • 인자가 숫자 하나면 길이값은 있지만 요소가 없는 배열 생성 접근시 undefined

  const arr = new Array(3);
  
  console.log(arr);
  console.log(arr.length);
  
  console.log(
    arr[0], arr[1], arr[2]
  );
  
  console.log(
    arr[0], arr[1], arr[2]
  );
  

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

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

• 정적 메서드 of : 인자를 통해 배열을 반환

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

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

console.log(arr1);
console.log(arr2);
console.log(arr3);

• 정적 메서드 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);
console.log(arr2);
console.log(arr3);

• Array.from 은 얕은 복사 - 1 depth copy

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

console.log(arr1, arr2);

arr1[0] = 0;

console.log(arr1, arr2);

• 두 번째 인자: 매핑 함수
  • 매핑 mapping : 각 요소가 특정 알고리즘을 거쳐 새 값으로 반환됨
  • 곧 배울 인스턴스 메서드 map이 보다 자주 사용됨

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);
console.log(arr3);
console.log(arr4);