[JavaScript] 자바스크립트 배열

---

 

목차

 

배열 기초

배열 활용

 

 

---

 

---

[배열 기초]

• 배열(array) : 이름과 인덱스로 참조되는 정렬된 값의 집합
• 배열 요소 (array element) : 배열을 구성하는 각각의 값
• 인덱스(index) : 배열에서의 위치를 가리키는 숫자

<자바스크립트 배열 특징>

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");        // Array 객체의 생성자를 이용하는 방법
var arrNewObj = new Array(1, true, "JavaScript"); // new 연산자를 이용한 Array 객체 생성 방법

document.write(arrLit + "<br>");                  // 1,true,JavaScript
document.write(arrObj + "<br>");                  // 1,true,JavaScript 
document.write(arrNewObj);                        // 1,true,JavaScript

 

<배열의 참조>

배열이름[인덱스]

배열의 길이 : 배열 요소의 개수

length 프로퍼티에 자동으로 갱신된다.

인덱스는 항상 0부터 시작한다.

var arr = ["JavaScript"]; // 요소가 하나뿐인 배열을 생성함.
var element = arr[0];     // 배열의 첫 번째 요소를 읽어서 대입함.

arr[1] = 10;      // 배열의 두 번째 요소에 숫자 10을 대입함. 배열의 길이는 1에서 2로 늘어남.
arr[2] = element; // 배열의 세 번째 요소에 변수 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 + "입니다.");       // 배열의 길이를 출력함.

 

<배열 요소 추가>

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

push() 메소드와 length 프로퍼티를 이용한 방법은 모두 배열의 제일 끝에 새로운 요소를 추가한다.

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]);       // undefined

배열 arr의 길이는 최종적으로 11이다.

배열arr에서  요소가 존재하는 인덱스는 0,1,2,3,4,10뿐이다. 나머지 인덱스에는 배열 요소가 존재하지 않는다.

배열의 홀(hole) : 인덱스에 대응하는 배열 요소가 없는 부분으로 undefined 값을 가지는 요소처럼 취급한다.

배열의 홀을 참조하면 undefined 값을 반환한다.

 

<배열의 순회(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);

 

<Array객체>

자바스크립트에서 배열(array)은 정렬된 값들의 집합으로 정의되며, Array 객체로 다뤄진다.

사용자가 배열과 관련된 작업을 손쉽게 할 수 있도록 다양한 메소드도 제공하고있다.

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

 

---

[배열 활용]

<희소 배열>

희소 배열 : 배열에 속한 요소의 위치가 연속적이지 않은 배열

배열의 length 프로퍼티 값보다 배열 요소의 개수가 항상 적다.

var arr = new Array(); // 빈 배열 객체를 생성함.
arr[99] = "JavaScript" // 배열 arr의 100번째 위치에 문자열을 삽입함.
// 100번째 요소를 삽입했기 때문에 배열의 길이는 100으로 늘어남.
document.write("배열의 길이는 " + arr.length + "입니다.");

 

<다차원 배열>

다차원 배열 : 배열 요소가 또 다른 배열인 배열

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)>

자바스크립트에서 배열의 인덱스에는 0을 포함한 양의 정수만 사용할 수 있다.

연관 배열(associative array) : 숫자로 된 인덱스 대신에 문자열로 된 키(key)를 사용하는 배열

대부분의 프로그래밍 언어가 지원하는 연관 배열을 자바스크립트는 별도로 제공하지는 않는다.

대신에 인덱스 문자열을 사용하여 연관 배열처럼 사용할 수 있는 객체(object)를 만들 수 있다.

이렇게 생성된 배열은 자바스크립트 내부적으로 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

배열 arr는 length 프로퍼티의 값으로 0을 반환한다.

자바스크립트에서 연관배열은 Array 객체가 아닌 기본객체이므로 정학히 말하면 배열이 아니다.

이러한 불편함을 해겨랗기 위해 ECMAScript 6 부터는 새로운 데이터 구조인 Map 객체를 별도로 제공하고있다.

 

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

자바스크립트에서 문자열은 변하지 않는 값이다.

그러므로 읽기 전용 배열로 다뤄야 한다.

배열처럼 [] 연산자를 사용하여 문자열을 구성한느 각 문자에 바로 접근 할 수 있다.

또한 Array 객체가 제공하는 모든 범용 메소드도 사용할 수 있다.

문자열의 각 문자는 String 객체에서 제공하는 charAt() 메소드를 사용해도 접근할 수 있다.

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

문자열을 배열처럼 착각하게 하여 실수를 할 수 있다.

var str = "안녕하세요!"; // 문자열 생성
str[0] = "";             // 자바스크립트의 문자열은 읽기 전용이므로, 이 문장은 오류를 발생시킵니다.

문자열을 바로 배열처럼 사용하지 말고, split() 메소드 등을이용해 먼저 배열로 변환한 후 사용하는 것이 좋다.

 

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

자바스크립트에서는 배열이라는 타입(type)을 별도로 제공하지 않는다.

자바스크립트 배열은 객체(object) 타입이 되며, typeof 연산자를 사용하면 'object'를 반환한다.

var arr = [1, true, "JavaScript"]; // 배열 생성
document.write(typeof arr);        // object

자바스크립트에서는 해당 변수가 배열인지 여부를 확인할 수 있는 방법들을 있다.

1. Array.isArray() 메소드
2. instanceof 연산자
3. constructor 프로퍼티

document.write(Array.isArray(arr));      // true
document.write(Array.isArray("문자열")); // false
document.write(arr instanceof Array); // true
document.write(123 instanceof Array); // false

// 자바스크립트 배열에 대해 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 프로퍼티의 값 출력, 
//toString() 메소드를 사용하여 constructor 프로퍼티의 값을 문자열로 변환

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

document.write(arr.constructor.toString().indexOf("Array")); // 10
//indexOf() 메소드를 사용하여 해당 문자열에서 
//"Array"라는 부분 문자열이 시작하는 인덱스를 구하고 있다.
//indexOf() 메소드는 인수로 전달받은 문자열을 해당 문자열에서 찾지 못하면
//-1을 반환

document.write(isArray(arr))                // true
//변수 arr가 배열이라면 "Array"라는 부분 문자열을 언제나 포함하고 있을 것이므로 항상 true반환

 

 

https://devyihyun.tistory.com/162

[JavaScript] 자바스크립트 함수

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

https://tcpschool.com/javascript/js_array_application

코딩교육 티씨피스쿨