LHJ

I'm a FE developer.

3.14 배열

19 Apr 2020 » js_lj

자바스크립트 배열은 특수한 객체입니다.
일반적인 객체와 달리 배열 콘텐츠에는 항상 순서가 있고, 키는 순차적인 숫자입니다.
배열은 유용한 메서드를 많이 가진 대단히 강력한 데이터 타입입니다.
배열 메서드는 8장에서 설명합니다.

다른 언어를 공부했다면 자바스크립트 배열이 C언어의 효율적인 배열(indexed array) 과 더 강력한 동적 배열, 링크드 리스트(linked list) 를 혼합한 것임을 알 수 있을 겁니다.
자바스크립트 배열에는 다음과 같은 특징이 있습니다.

  • 배열 크기는 고정되지 않습니다. 언제든 요소를 추가하거나 제거할 수 있습니다.
  • 요소의 데이터 타입을 가리지 않습니다.
    즉, 문자열만 쓸 수 있는 배열이라던가 숫자만 쓸 수 있는 배열 같은 개념이 아예 없습니다.
  • 배열 요소는 0으로 시작합니다.

CAUTION_ 배열은 기능이 추가된 특수한 객체이므로 배열에 숫자가 아닌 키나 분수, 음수 등을 키로 쓸 수는 있습니다.
가능하기는 하지만, 이런 행동은 배열의 설계 목적에 어긋날 뿐 아니라 혼란스러운 동작과 찾기 어려운 버그를 초래할 수 있으므로 피해야 합니다.

자바스크립트의 배열 리터럴은 다음과 같이 대괄호 안에 배열 요소를 쉼표로 구분해서 씁니다.

const a1 = [1, 2, 3, 4];        // 숫자로 구성된 배열
const a2 = [1, 'two', 3, null]; // 여러 가지 타입으로 구성된 배열
const a3 = [
	"What the hammer? What the chain?",
	"In what furnace was thy brain?",
	"What the anvil? What dread grasp",
	"Dare its deadly terrors clasp?",
];
const a4 = [ // 객체가 들어가있는 배열
	{ name: "Ruby", hardness:9 },
	{ name: "Diamond", hardness: 10 },
	{ name: "Topaz", hardness:8 },
];
const a5 = [  // 배열이 들어있는 배열
	[1, 3, 5],
	[2, 4, 6],
];

배열에는 요소 숫자를 반환하는 length 프로퍼티가 있습니다.

const arr = ['a', 'b', 'c'];
arr.length; // 3

배열 요소에 접근할 때는 대괄호 안에 요소의 인덱스 숫자를 씁니다.

const arr = ['a', 'b', 'c'];

// 첫 번째 요소를 가져옵니다.
arr[0]; // 'a'
// arr의 마지막 요소의 인덱스는 arr.length-1 입니다.
arr[arr.length - 1]; // 'c'

배열 요소의 값을 덮어쓸 때는 새 값을 할당하면 됩니다.
(할당할 때 배열 길이나 그보다 큰 인덱스를 사용하면 배열 크기가 그에 맞게 늘어납니다.)

const arr = [1, 2, 'c', 4, 5];
arr[2] = 3; // arr은 이제 [1, 2, 3, 4, 5] 입니다.

8장에서 배열과 그 요소를 수정하는 방법에 대해 자세히 설명합니다.