[JavaScript] 배열

배열(array)이란?

: 이름과 인덱스로 참조되는 정렬된 값의 집합

- 배열을 구성하는 값 = 배열 요소(element)

- 배열에서의 위치를 가리키는 숫자 = 인덱스(index)

 

특징

1. 배열 요소의 타입 고정 X => 같은 배열 내 요소끼리 타입이 서로 다를 수 있음

2. 인덱스가 연속적이지 않아도 됨 => 특정 요소는 비어있을 수도 O

3. Array 객체

 

 

배열의 생성

1. var arr = [배열요소1, 배열요소2,...];          // 배열 리터럴을 이용하는 방법
2. var arr = Array(배열요소1, 배열요소2,...);     // Array 객체의 생성자를 이용하는 방법
3. var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법

- 배열 리터럴은 대괄호 [ ] 안에 쉼표로 구분하여 나열

 

 

배열의 참조

- [ ] 연산자 사용 => 배열이름[인덱스]

- 배열 요소의 개수 == 배열의 길이 -> length 프로퍼티

- 인덱스는 0 부터 시작, 2^32 보다 작은 양수만 사용

- 배열의 길이를 넘는 인덱스에 요소 저장 허용 => 자동으로 늘어남

 

 

배열 요소의 추가

1. arr.push(추가할 요소);         // push() 메소드를 이용하는 방법
2. arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법
3. arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법

- 인덱스에 대응하는 배열 요소가 없는 부분 = 홀(hole)

- undefined 처럼 취급

 

 

배열의 순회(iteration)

- 모든 요소에 차례대로 접근

const arr = [1, true, "JavaScript"];

for (let idx in arr) {
	console.log(arr[idx]);
}

// 1
// true
// "JavaScript"

 

 

Array 객체

- 배열은 정렬된 값들의 집합, Array 객체로 다뤄짐

- 다양한 메소드 제공 ex) typeof

 

---

 

희소 배열

- 요소의 위치가 연속적이지 않은 배열

- length 프로퍼티 값 > 배열 요소의 개수

 

 

다차원 배열

- 배열 요소가 또 다른 배열인 배열

- 2차원 배열 => 배열 요소가 1차원 배열

- 3차원 배열 => 배열 요소가 2차원 배열

let arr = new Array(3);
for (let row = 0; row < 3; row++) {
	arr[row] = new Array(4);	// 2 차원 배열
    for (let col = 0; col < 4; col++) {
    	arr[row][col] = 1;		// 요소 생성
    }
}

 

 

연관 배열(associative array)

- 인덱스 대신 문자열로 된 키(key)를 사용하는 배열

- 연관 배열을 별도로 제공하지는 않지만 연관 배열처럼 사용할 수 있는 객체 생성 가능

=> 기본 객체로 재선언 되기 때문에, Array 메소드와 프로퍼티가 정확하지 않은 결괏값 반환

let arr = [];     // 비어있는 배열을 생성함.

arr["하나"] = 1;  // 숫자 인덱스 대신에 문자열을 인덱스로 배열 요소를 추가함.
arr["참"] = true;
arr["자바스크립트"] = "JavaScript";

console.log(arr["참"]);  // 문자열을 인덱스로 배열 요소에 접근할 수 있음.
console.log(arr.length); // 연관 배열은 Array 객체가 아니므로 length 프로퍼티의 값이 0임.
console.log(arr[0]);     // undefined

- ES6 부터 Map 객체 별도 제공

 

 

문자열을 배열처럼 접근하기

- 문자열은 변하지 않는 값 => 읽기 전용 배열

- [ ] 연산자로 접근 가능

- Array 객체의 메소드 사용 가능

- String 객체의 charAt() 메소드 사용 가능

const str = "안녕하세요";
console.log(str.charAt(2));	// 하
console.log(str[2]);		// 하

- IE 7 이하 버전은 동작 X

- 이렇게 사용하기 보단 split() 메소드 등을 이용해 배열로 변환한 후 사용하는 것이 좋음

 

 

자바스크립트에서 배열 여부 확인

- 배열 => 객체(object) 타입

- typeof 사용 시, object 반환

 

배열인지 확실히 알기 위한 방법

1. Array.isArray() 메소드

- ES5 부터 가능

console.log(Array.isArray(arr));	// true

 

2. instanceof 연산자

console.log(arr instanceof Array);	// true

 

3. constructor 프로퍼티

console.log(arr.constructor);			// function Array() {[native code]}

 

function Array() {[native code]} 라는 프로퍼티 값을 문자열로 변환 => toString()

console.log(arr.constructor.toString());	// function Array() {[native code]}

"Array" 가 해당 문자열에 포함되어 있는지 확인 => indexOf("Array")

console.log(arr.constructor.toString().indexOf("Array"));	// 10

indexOf() 의 값이 -1 보다 크면 존재한다는 것 => Array 이다.

라는 점을 이용해 판단

function isArray(a) {
	return a.constructor.toString().indexOf("Array") > -1;
}

const arr = [1, true];
console.log(isArray(arr));	// true

- isArray(a) 함수를 만들어 사용

 

 

 

 

 

http://tcpschool.com/javascript/js_array_basic

코딩교육 티씨피스쿨