[Javascript] 자바스크립트 배열 - 생성, 추가, 인덱싱

배열(array)이란?

• 자바스크립트에서 배열은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의되며, 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다.
• 자바스크립트의 배열은 Array 객체로 다뤄지며 유용한 내장 메소드를 포함하고 있다.
• 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다.

var arr = new Array(10, "문자열", false);
 
document.write((typeof arr) + "<br>");    // object
document.write((typeof arr[0]) + "<br>"); // number
document.write((typeof arr[1]) + "<br>"); // string
document.write(typeof arr[2]);            // boolean

배열의 특징

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 객체 생성

var arrLit = [1, true, "JavaScript"];             
var arrObj = Array(1, true, "JavaScript");        
var arrNewObj = new Array(1, true, "JavaScript"); 
 
document.write(arrLit + "<br>");                  // 1,true,JavaScript
document.write(arrObj + "<br>");                  // 1,true,JavaScript 
document.write(arrNewObj);                        // 1,true,JavaScript

 

배열의 참조

• 자바스크립트에서 배열의 각 요소를 참조하고 싶을 때는 [] 연산자를 사용한다.
• 자바스크립트에서는 배열 요소의 개수를 배열의 길이라고 하며, length 속성을 사용한다.
• 자바스크립트에서 인덱스는 언제나 0부터 시작하며, 2의 32승보다 작은 양수만을 사용할 수 있다.
• 자바스크립트에서는 배열의 길이를 넘는 인덱스에 요소를 저장하는 것을 허용하며, 이때 배열의 길이는 자동으로 해당 인덱스까지 늘어난다.

배열이름[인덱스]

/* 배열을 생성하고, 생성된 배열에 요소를 추가하고 삭제 */
var arr = ["JavaScript"];   // 요소가 하나뿐인 배열을 생성
var element = arr[0];       // 배열 첫번째 요소를 읽어서 대입 

arr[1] = 10;                // 배열 두번째 요소에 숫자 10대입. 배열길이가 1에서 2로
arr[2] = element;           // 배열 세번째 요소에 변수값 대입. 배열길이는 2에서 3으로
document.write("배열 arr요소는 [" + arr + "] 있다<br>");     // 배열 요소 출력
document.write("배열 arr길이는 " + arr.length + "이다<br>"); // 배열 길이 출력 

delete arr[2];              // 배열 세번째 요소 삭제 하지만 배열 길이 변하지 않음

document.write("배열 arr요소는 [" + arr + "] 있다<br>");     // 배열 요소 출력
document.write("배열 arr길이는 " + arr.length + "이다");     // 배열 길이 출력

 

배열 요소의 추가

• push() 메소드와 length 프로퍼티를 이용한 방법은 모두 배열의 제일 끝에 새로운 요소를 추가한다.
• 인덱스에 대응하는 배열 요소의 값이 없는 부분을 배열의 홀(hole)이라고 하며, 자바스크립트에서는 이러한 배열의 홀을 undefined 값을 가지는 요소처럼 취급한다.

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

var arr = [1, true, "Java"];

arr.push("Script");           // push() 메소드를 이용
document.write(arr + "<br>"); // 1,true,Java,Script

arr[arr.length] = 100;        // length 프로퍼티를 이용
document.write(arr + "<br>"); // 1,true,Java,Script,100

arr[10] = "자바스크립트";         // 특정 인덱스를 지정하여 추가
document.write(arr + "<br>");  // 1,true,Java,Script,100,,,,,,자바스크립트

document.write(arr[7] + "<br>"); // undefined
document.write(arr.length);      // 총 길이는 11

 

배열의 순회(iteration)

• 배열의 모든 요소에 차례대로 접근하고 싶을 때는 for 문과 같은 반복문을 사용한다.

var arr = [1, true, "JavaScript"];
 
var result = "<table><tr>";
for (var idx in arr) {
    result += "<td>" + arr[idx] + "</td>";
}

result += "</tr></table>";
 
document.write(result);

 

배열의 활용

희소 배열

• 희소 배열이란 배열에 속한 요소의 위치가 연속적이지 않은 배열을 의미하며, 배열의 length 프로퍼티 값보다 배열 요소의 개수가 언제나 적다.

var arr = new Array();                      // 빈 배열 객체를 생성
arr[99] = "JavaScript";                     // 100번째 위치에 문자열 삽입
document.write("배열의 길이는 " + arr.length); // 배열의 길이는 100으로 증가

다차원 배열

• 다차원 배열이란 배열 요소가 또 다른 배열을 의미하며, 차원에 따라 [] 연산자를 반복해 사용한다.
• 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] + " ");            
    }
}

/* 출력 결과 */
[0,0] [0,1] [0,2] [0,3]
[1,0] [1,1] [1,2] [1,3]
[2,0] [2,1] [2,2] [2,3]

연관 배열(associative array)

• 배열 인덱스로 0을 포함한 양의 정수만 사용할 수 있는데, 이렇게 숫자로 된 인덱스 대신 문자열로 된 키(key)를 사용하는 배열을 연관 배열이라 한다.
• 자바스크립트에서는 연관 배열 대신 인덱스로 문자열을 사용해 연관 배열처럼 사용할 수 있는 객체를 사용한다. 그런데 이렇게 생성된 배열은 자바스크립트 내부적으로 Array 객체에서 기본 객체로 재선언되므로, 기존에 사용할 수 있었던 모든 Array 메소드와 프로퍼티가 정확하지 않은 결괏값을 반환하는 단점이 있다. ECMAScript 6부터는 이러한 불편함을 해결하기 위해 새로운 데이터 구조인 Map 객체를 별도로 제공하고 있다.

var arr = [];         // 비어있는 배열 생성
arr["하나"] = 1;       // 숫자 인덱스 대신에 문자열을 인덱스로 배열 요소 추가
arr["참"] = true;
arr["자바스크립트"] = "JavaScript";

document.write(arr["참"]);  // 문자열을 인덱스로 배열 요소에 접근
document.write(arr.length); // 연관 배열은 Array 객체가 아니므로 length 값이 0
document.write(arr[0]);     // undefined

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

• 자바스크립트에서 문자열은 변하지 않는 값이므로 읽기 전용 배열로서 다룰 수 있다. 그러므로 배열처럼 [] 연산자를 사용하여 문자열을 구성하는 각 문자에 바로 접근할 수 있고 Array 객체가 제공하는 모든 범용 메소드도 사용할 수 있다.

var str = "안녕하세요!";          // 문자열 생성
document.write(str.charAt(2)); // 하 
document.write(str[2]);        // 하

str[0] = "";                   // 자바스크립트 문자열은 읽기전용으로 오류 발생
                               // 따라서 문자열을 바로 배열처럼 사용하지 말고 
                                  먼저 배열로 변환한 후 사용하는 것이 좋다

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

• 자바스크립트에서는 배열이라는 타입(type)을 별도로 제공하지 않으므로 배열은 객체(object) 타입이 되며, typeof 연산자를 사용하면 object를 반환한다.

var arr = [1, true, "JavaScript"]; // 배열 생성

document.write(typeof arr);        // object

/* ECMAScript 5부터는 Array 클래스 isArray() 메소드 */
document.write(Array.isArray(arr));      // true
document.write(Array.isArray("문자열"));   // false

/* instanceof 연산자 */
document.write(arr instanceof Array);     // true
document.write(123 instanceof Array);     // false

/* Array 객체의 constructor 프로퍼티 */
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()); // constructor 값 문자열로 변환
document.write(arr.constructor.toString().indexOf("Array")); // 9
// indexOf() 메소드는 인수로 전달받은 문자열을 해당 문자열에서 찾지 못하면 -1을 반환
document.write(isArray(arr))                // true
// 변수 arr가 배열이면 Array 부분 문자열을 언제나 포함하고 있으므로 결과는 언제나 true

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/