LHJ

I'm a FE developer.

8.1 배열의 기초

05 May 2020 » js_lj

본격적으로 시작하기 전에 먼저 배열의 기본적인 사항을 다시 떠올려 봅시다.

  • 배열은 객체와 달리 본질에서 순서가 있는 데이터 집합이며 0으로 시작하는 숫자형 인덱스를 사용합니다.
  • 자바스크립트의 배열은 비균질적(nonhomogeneous) 입니다. 즉, 한 배열의 요소가 모두 같은 타입일 필요는 없습니다. 배열은 다른 배열이나 객체도 포함할 수 있습니다.
  • 배열 리터럴은 대괄호로 만들고, 배열 요소에 인덱스로 접근할 때도 대괄호를 사용합니다.
  • 모든 배열에는 요소가 몇 개 있는지 나타내는 length 프로퍼티가 있습니다.
  • 배열에 배열 길이보다 큰 인덱스를 사용해서 요소를 할당하면 배열은 자동으로 그 인덱스에 맞게 늘어나며, 빈자리는 undefined로 채워집니다.
  • Array 생성자를 써서 배열을 만들 수도 있지만 그렇게 해야 하는 경우는 별로 없습니다.

이 장을 시작하기 전에, 지금까지 짚어 본 내용이 모두 익숙한지 확인하십시오.

// 배열 리터럴
const arr1 = [1, 2, 3];                         // 숫자로 구성된 배열
const arr2 = ["one", 2, "three"];               // 비균질적 배열
const arr3 = [[1, 2, 3], ["one", 2, "three"]];  // 배열을 포함한 배열
const arr4 = [
	{ name: "Fred", type: "object", luckyNumbers: [5, 7, 13] },
	[
		{ name: "Susan", type: "object" },
		{ name: "Anthony", type: "object" },
	],
	1,
	function () { return "arrays can contain functions too"; },
	"three",
];

// 배열 요소에 접근하기
arr1[0];        // 1
arr1[2];        // 3
arr3[1];        // ["one", 2, "three"]
arr4[1][0];     // { name:"Susan", type: "object" }

// 배열 길이
arr1.length;    // 3
arr4.length;    // 5
arr4[1].length; // 2
arr4[0].length; // undefined

// 배열 길이 늘리기
arr1[4] = 5;
arr1;           // [1, 2, 3, undefined, 5]
arr1.length;    // 5

// 배열의 현재 길이보다 큰 인덱스에 접근하는 것만으로 배열의 길이가 늘어나지는 않습니다.
arr2[10];       // undefined
arr2.length;    // 3

// Array 생성자(거의 사용하지 않습니다)
const arr5 = new Array();           // 빈 배열
const arr6 = new Array(1, 2, 3);    // [1, 2, 3]
const arr7 = new Array(2);          // 길이가 2인 배열. 요소는 모두 undefined 입니다.
const arr8 = new Array("2");        // ["2"]