20. 배열의 기초
배열 : 이름과 인덱스로 참조되는 정렬된 값(element)의 집합.
특징
1. 타입이 고정되어 있지 않으므로 같은 배열에 있는 요소끼리 타입이 다를 수 있음.
2. 인덱스가 연속적이지 않아도 되며, 특정 배열 요소는 비어 있을 수도 있음.
3. 자바스크립트에서 배열은 Array 객체.
배열의 생성
1. var arr = [배열요소1, 배열요소2,...]; // 배열 리터럴을 이용하는 방법
2. var arr = Array(배열요소1, 배열요소2,...); // Array 객체의 생성자를 이용하는 방법
3. var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법
배열의 참조
인덱스 : 음이 아닌 정수를 반환하는 임의의 표현식도 사용 가능. 2의 32승보다 작은 양수만 사용 가능.
: 배열의 길이보다 더 큰 인덱스에 요소를 추가하면 자동으로 늘어남.
: 배열의 요소를 삭제해도 길이는 변하지 않음.
배열 요소의 추가
1. arr.push(추가할 요소); // push() 메소드를 이용하는 방법(맨 뒤에 추가)
2. arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법(맨 뒤에 추가)
3. arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법
: 인덱스에 대응하는 배열 요소가 없는 부분을 홀이라고 함. 자바스크립트에서는 홀을 undefined 값을 가지는 요소로 취급.
배열의 순회(iteration)
Array 객체
21. 배열의 활용
희소 배열
희소 배열 : 배열에 속한 요소의 위치가 연속적이지 않은 배열.
다차원 배열
2차원 배열 : 배열 요소가 1차원 배열인 배열.
3차원 배열 : 배열 요소가 2차원 배열인 배열.
var arr = new Array(3); // 3개의 요소를 가지는 배열을 생성함.
for (var row = 0; row < 3; row++) {
arr[row] = new Array(4); // 각각의 요소마다 또다시 4개의 요소를 가지는 배열을 생성함.
for (var column = 0; column < 4; column++) {
arr[row][column] = "[" + row + "," + column + "]"; // 각각의 배열 요소를 생성함.
document.write(arr[row][column] + " "); // 각 배열 요소에 접근함.
}
}
연관 배열(associative array)
연관 배열 : 숫자로 된 인덱스 대신에 문자열로 된 key를 사용하는 배열.
: 자바스크립트는 다른 프로그래밍 언어들처럼 연관 배열을 제공하지는 않지만 연관 배열처럼 사용할 수 있는 객체 생성 가능.
: 연관 배열처럼 생성된 배열은 자바스크립트 내부적으로 Array 객체에서 기본 객체로 재선언됨. 따라서 기존에 사용할 수 있었던 모든 Array 메소드의 프로퍼티가 정확하지 않은 값을 반환하게 됨.
var arr = []; // 비어있는 배열을 생성함.
arr["하나"] = 1; // 숫자 인덱스 대신에 문자열을 인덱스로 배열 요소를 추가함.
arr["참"] = true;
arr["자바스크립트"] = "JavaScript";
document.write(arr["참"]); // 문자열을 인덱스로 배열 요소에 접근할 수 있음.
document.write(arr.length); // 연관 배열은 Array 객체가 아니므로 length 프로퍼티의 값이 0임.
document.write(arr[0]); // undefined
: 연관 배열은 정확히 말하면 배열이 아님. 이것을 해결하기 위해 ECMAScript 6부터는 새로운 데이터 구조인 Map 객체를 별도로 제공.
문자열을 배열처럼 접근하기
: 자바스크립트에서 문자열은 변하지 않는 값이므로 읽기 전용 배열로 다룰 수 있음.
: []연산자 사용하여 문자에 접근 가능, Array 객체가 제공하는 메소드 사용 가능, String 객체에서 제공하는 charAt() 메소드로도 문자에 접근 가능.
: 문자열을 배열처럼 접근하는 방법은 인터넷 익스플로러 7과 그 이전 버전에서는 동작하지 않음.
var str = "안녕하세요!"; // 문자열 생성
document.write(str.charAt(2)); // 하
document.write(str[2]); // 하
var str = "안녕하세요!"; // 문자열 생성
str[0] = ""; // 자바스크립트의 문자열은 읽기 전용이므로, 이 문장은 오류를 발생시킵니다.
: split() 메소드 등을 이용해 먼저 배열로 변환한 후 사용하는 것을 권장.
자바스크립트에서 배열 여부 확인
: 배열아라는 타입은 없음. 배열은 객체 타입임.
해당 변수가 배열인지 확인하는 방법
1. Array.isArray() 메소드 : 구형 버전 브라우저는 ECMAScript 5를 지원하지 않아서 안 될 수도.
document.write(Array.isArray(arr)); // true
document.write(Array.isArray("문자열")); // false
2. instanceof 연산자
document.write(arr instanceof Array); // true
document.write(123 instanceof Array); // false
3. constructor 프로퍼티
: 반환 값.
function Array() {[native code]}
: toString() 메소드와 indexOf() 메소드를 함께 사용하면 배열 여부 알 수 있음.
function isArray(a) {
return a.constructor.toString().indexOf("Array") > -1;
}
var arr = [1, true, "JavaScript"]; // 배열 생성
document.write(arr.constructor); // constructor 프로퍼티의 값 출력
document.write(arr.constructor.toString()); // function Array() {[native code]}
document.write(arr.constructor.toString().indexOf("Array")); // 10
document.write(isArray(arr)) // true
: indexOf() 메소드는 인수로 전달받은 문자열을 해당 문자열에서 찾지 못하면 언제나 -1을 반환함.