JAVASCRIPT 배열

JAVASCRIPT 배열

배열의 기초

배열(array)이란?

자바스크립트에서 배열(array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의된다. 배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다.

자바스크립트에서 배열의 특징은 다음과 같다.

1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있다.
2. 배열 요소의 인덱스가 연속적이지도 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있다.
3. 자바스크립트에서 배열은 Array 객체로 다뤄진다.

1. 배열의 생성

자바스크립트에서 배열만드는 방법 및 문법👉

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

2. 배열의 참조

자바스크립에서 배열의 각 요소를 참조하고 싶을 때는 [ ] 연산자를 사용한다.

문법 👉

배열이름[index];

자바스크립트에서는 배열 요소의 개수를 배열의 길이라고 한다.

이러한 배열의 길이는 length프로퍼티에 자동으로 갱신이 된다.

자바스크립트에서 인덱스는 언제나 0부터 시작한다.

3. 배열 요소의 추가

자바스크립트에서 배열에 새로운 배열 요소를 추가하는방법 👉

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

push()메소드와 length 프로퍼티를 이용한 방법은 모두 배열의 제일 끝에 새로운 요소를 추가하고 특정인덱스 요소는 인덱스를 지정하여 추가할수 있다.

🙋‍♂️인덱스에 대응하는 배열요소가 없는 부분을 배열의 홀(hole)이라한다. 자바스크립트에서는 이러한 배열의 홀(hole)을 undefined값을 가지는 요소처럼 취급한다.

4. Array 객체

자바스크립트에서 배열(array)은 정렬된 값들의 집합으로 정의되며, Array객체로 다뤄진다. 또한, 자바스크립트는 사용자가 배열과 관련된 작업을 손쉽게 할 수 있도록 다양한 메소드도 제공하고 있다.

5. 희소 배열

희소 배열이란 배열에 속한 요소의 위치가 연속적이지 않은 배열을 의미한다. 따라서 희소 배열의 경우 배열의 length 프로퍼티 값보다 배열 요소의 개수가 언제나 적다.

6. 다차원 배열

다차원 배열이란 배열 요소가 또 다른 배열인 배열을 의미한다.

• 지금까지 우리가 살펴본 배열은 1차원 배열이다.
• 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] + " "); //각 배열 요소에 접근함.
	}
}

🙋‍♂️2차원 배열의 배열 요소는 [] 연산자를 두 번 사용하여 참조할 수 있다.

7. 연관 배열(associative array)

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

이렇게 숫자로 된 인덱스 대신에 문자열로 된 키(key)를 사용하는 배열을 연관 배열이라고 한다.

대부분의 프로그래밍 언어가 지원하는 연관 배열을 자바스크립트는 별도로 제공하지 않는다. 대신에 인덱스로 문자열을 사용하여 연관 배열처럼 사용할 수 있는 객체(object)를 만들 수 있다.

하지만 이렇게 생성된 배열은 자바스크립트 내부적으로 Array객체에서 기본 객체로 재선언된다.

따라서 기존에 사용할 수 있었던 모든 Array메소드와 프로퍼티가 정확하지 않은 결괏값을 반환하게 된다.

var arr = [];		// 비어있는 배열을 생성함.
		arr["하나"] = 1;	// 숫자 인덱스 대신에 문자열을 인덱스로 배열 요소를 추가함.
		arr["참"] = true;
		arr["자바스크립트"] = "JavaScript";
		
		document.write(arr["참"] + "<br>");		// 문자열을 인덱스로 배열 요소에 접근할 수 있음.
		document.write(arr.length + "<br>");	// 0
		document.write(arr[0]);					// undefined

위 처럼 연관 배열인 arr은 lenght프로퍼티의 값으로 0을 반환한다. 이처럼 자바스크립트에서 연관 배열은 Array객체가 아닌 기본 객체이므로, 배열이 아니다.

🙋‍♂️ECMAScript6부터는 이러한 불편함을 해결하기 위해 Map객체를 별도로 제공한다.

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

자바스크립트에서 문자열은 변하지 않는 값이므로, 읽기 전용 배열로서 다를 수 있다.

따라서 배열처럼 []연산자를 사용하여 문자열을 구성하는 각 문자에 바로 접근할 수 있다. 또한, Array객체가 제공하는 모든 범용 메소드도 사용할 수 있다.

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

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

하지만 이렇게 문자열을 배열처럼 접근하는 방법은 인터넷 익스플로러 7과 그 이전 버전에서는 동작하지 않는다.

또한, 문자열을 배열처럼 착각하게 하여, 다음과 같은 실수를 유발할 수도 있다.

예제 👉

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

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

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

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

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