[Java Script] 09. 자바스크립트 배열(Array)

---

배열(array)

배열(array)이란?

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

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

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

 

배열의 생성

자바스크립트에서 배열을 만드는 방법은 다음과 같다.

예제

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

위의 세 가지 방법은 모두 같은 결과의 배열을 만들어 준다.
배열 리터럴은 대괄호([]) 안에 배열 요소를 쉼표로 구분하여 나열하는 방법으로 생성한다.

예제

let arrLit = [1, true, "JavaScript"];             // 배열 리터럴을 이용하는 방법
let arrObj = Array(1, true, "JavaScript");        // Array 객체의 생성자를 이용하는 방법
let arrNewObj = new Array(1, true, "JavaScript"); // new 연산자를 이용한 Array 객체 생성 방법

 

배열의 참조

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

예제

배열이름[인덱스]

자바스크립트에서는 배열 요소의 개수를 배열의 길이라고 한다.
이러한 배열의 길이는 length 프로퍼티에 자동으로 갱신된다.

자바스크립트에서 인덱스는 언제나 0부터 시작한다.
또한, 인덱스에는 음이 아닌 정수를 반환하는 임의의 표현식도 사용할 수 있다.
이러한 인덱스에는 232보다 작은 양수만을 사용할 수 있다.

다음 예제는 배열을 생성하고, 생성된 배열에 요소를 추가하고 삭제하는 예제이다.

 

배열의 항목 조작하기

배열 끝에 항목 추가하기

예제

let arr = [1,2,3]

arr.push(4)

console.log(arr) //[1,2,3,4]

배열 끝에서부터 항목 제거하기

예제

let arr = [1,2,3]

arr.pop

console.log(arr) //[1,2]

배열 앞에서부터 항목 제거하기

예제

let arr = [1,2,3]

arr.shift()

console.log(arr) // [2,3]

배열 앞에 항목 추가하기

예제

let arr = [1,2,3]

arr.unshift(0)

console.log(arr) // [0,1,2,3]

 

배열 복사하기(Shallow Copy)

예제

let arr = [1,2,3,4]
let shallowCopy = arr.slice()

console.log(shallowCopy)

 

배열의 순회(iteration)

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

예제

let arr = [1,2,3,4,5]

for(let i = 1; i < arr.length; i++){
    console.log(i); //1,2,3,4,5
}

배열 반복문 for of 사용하여 접근할 수 있다.

예제

let arr = [1,2,3,4,5]

for(let i of arr){
	console.log(i)
}

 

다차원 배열

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

• 지금까지 우리가 살펴본 배열은 1차원 배열이다.
• 2차원 배열이란 배열 요소가 1차원 배열인 배열을 의미한다.
• 3차원 배열이란 배열 요소가 2차원 배열인 배열을 의미한다.

2차원 배열을 이해하면 그 이상의 배열 또한 같은 방식으로 이해할 수 있다.

예제

var arr = [['a','b'], ['c', 'd'], ['e', 'f'], ['g', 'h'], ['i', 'j']]; 
//arr [5][2]

 

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

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

예제

let arr = [1, true, "JavaScript"]; // 배열 생성
console.log(typeof arr);        // object

따라서 자바스크립트에서는 해당 변수가 배열인지 여부를 확인할 수 있도록 다음과 같은 방법들을 제공하고 있다.

• Array.isArray() 메서드
• instanceof 연산자

ECMAScript 5부터는 Array 클래스에 isArray()라는 배열 여부를 확인할 수 있는 메서드를 추가하였다.

예제

let arr = [1,2,3,4,5]
console.log(Array.isArray(arr));      // true
console.log(Array.isArray("문자열")); // false

하지만 구형 버전의 브라우저는 ECMAScript 5를 지원하지 않으므로, Array.isArray() 메서드가 정상적으로 동작하지 않을 수도 있다.
따라서 이때는 instanceof 연산자를 사용하여 해당 변수가 Array 객체인지를 판단하여 배열 여부를 확인할 수 있다.

예제

let arr = [1,2,3,4,5]
console.log(arr instanceof Array); // true
console.log(123 instanceof Array); // false