[자바스크립트] 배열

자바스크립트 :: 배열

배열 :

자바스크립트 배열은 값의 순차 컬렉션을 나타내는데, 각 값은 0부터 시작하는 인덱스 숫자를 가지고 있다. 자바스크립트에서는 배열명 다음에 대괄호로 인덱스를 감싸는 식으로 배열에서 값을 가져올 수 있다.

배열에는 어떤 타입의 자바스크립트 데이터도 담을 수 있으며, 자바스크립트는 명시적인 타입이 없는(untyped) 언어이므로 배열의 원소가 반드시 같은 타입일 필요는 없다.

Array() 생성자 함수를 이용한 자바스크립트 배열 생성

배열은 Array() 생성자 함수를 이용해 생성할 수 있다. 다음 예제를 보자.

var array1 = new Array(); array1[0] = "Hello"; array1[1] = 123; array1[2] = true; array1[3] = { x:1, y:1 }; console.log(array1.length); // 4

Array() 생성자에 원소를 전달해서 배열을 초기화할 수 있다. 다음 예제를 보자.

var array1 = new Array("Hello", 123, true, { x:1, y:1 }); console.log(array1.length); // 4

Array() 생성자에 숫자를 하나만 전달하면 해당 배열의 길이가 정해진다.

var array1 = new Array(12); console.log(array1.length); // 12

배열 리터럴을 이용한 자바스크립트 배열 생성

배열 리터럴을 이용해 배열을 생성할 수 있는데, 배열 리터럴이란 대괄호 안에 담긴, 콤마로 구분된 값의 리스트다. 예를 들어 다음과 같은 식으로 배열 생성하고 초기화할 수 있다.

var array1 = ["Hello", 123, true, ["element1", "element2"]]; console.log(array1.length); // 4

콤마 사이에 값을 지정하지 않는 식으로 미정의된 원소도 배열 리터럴에 포함할 수 있다. 예를 들어, 다음 배열은 3개의 미정의 값이 포함해서 5개의 원소를 담고 있다.

var array1 = ['a',,,,'e']; console.log(array1.length); // 5 console.log(array1[1]);     // undefined

배열의 pop()과 push() 메서드

pop() 메서드는 배열에서 마지막 항목을 제거하고 그것을 반환한다.

var languages = ["Java", "JavaScript", "PHP"]; console.log(languages.pop());   // PHP console.log(languages.length);  // 2

push() 메서드는 배열의 끝에 원소를 추하고 해당 배열의 길이를 반환한다.

var languages = ["Java", "JavaScript"]; console.log(languages.push("PHP")); // 3 console.log(languages.length);      // 3

배열의 shift()와 unshift() 메서드

shift() 메서드는 배열의 첫 번째 항목을 제거하고 그것을 반환한다. unshift() 메서드는 배열의 맨 앞에 원소를 추가하고 해당 배열의 길이를 반환한다.

var languages = ["Java", "JavaScript"]; console.log(languages.shift());         // Java console.log(languages.unshift("PHP"));  // 2

push()와 unshift() 메서드 모두 한번에 여러 원소를 추가할 수 있으며, 둘 다 배열의 길이를 반환한다.

var languages = ["Java"]; console.log(languages.push("JavaScript", "PHP"));   // 3 console.log(languages.unshift("c++","c"));          // 5

배열 순회

배열의 모든 원소를 순회할 경우 보통 for 문을 사용한다.

var languages = ["Java", "JavaScript", "PHP"]; for (var i=0; languages.length > i; i++){     console.log(languages[i]); }

위 예제를 실행한 결과는 다음과 같다.

Java JavaScript PHP

join() and split() methods

join() 메서드는 지정한 구분자를 이용해 배열을 문자열로 변환하는 데 사용된다.

var languages = ["Java", "JavaScript", "PHP"]; console.log(languages.join(", "));      // Java, JavaScript, PHP

split() 메서드는 지정한 구분자를 이용해 문자열을 배열로 나누는 데 사용된다.

var languages = "Java, JavaScript, PHP"; console.log(languages.split(", "));     //  ["Java", "JavaScript", "PHP"]

길이를 이용한 배열 잘라내기

length 프로퍼티를 설정해 배열을 잘라낼 수 있다.

var languages = ["Java", "JavaScript", "PHP"]; console.log(languages[2]);      // PHP languages.length = 2;           // 2개의 원소만 담도록 잘라냄 console.log(languages[2]);      // undefined

배열의 길이

자바스크립트에서 length 프로퍼티는 길이라기보다는 마지막 인덱스에 1을 더한 것이 해당한다.

var languages = []; languages[1] = "Java"; languages[3] = "PHP"; console.log(languages.length);  // 4 console.log(languages);         // [undefined, "Java", undefined, "PHP"]

배열에서 원소 삭제

delete를 이용해 배열에서 값을 제거할 수 있으며, 제거한 곳은 undefined가 된다.

var languages = ["Java", "JavaScript", "PHP"]; delete languages[1]; console.log(languages[1]);      // undefined console.log(languages);         // ["Java", undefined, "PHP"]

배열의 splice() 메서드

splice() 메서드는 배열의 원소를 삭제하고 그것들으 대체하는 데 사용된다. 문법은 다음과 같다.

array.splice(index, deleteCount[, element1, ..., elementN])

index에서 시작해 deleteCount만큼의 원소를 제거한 후 그곳에 element1, ..., elementN을 붙여넣는다.

원소 하나를 제거하는 예제는 다음과 같다.

var languages = ["Java", "JavaScript", "PHP"]; languages.splice(1,1) console.log(languages[1]);      // PHP console.log(languages);         // ["Java", "PHP"]

splice() 메서드는 제거된 원소의 배열을 반환하며, 원소를 대체하는 예제는 다음과 같다.

var languages = ["Java", "JavaScript", "PHP"]; console.log(languages.splice(0,2,"c++")); // ["Java", "JavaScript"] console.log(languages[0]);      // c++ console.log(languages);         // ["c++", "PHP"]

원소를 집어넣으려면 deleteCount를 0으로 설정하기만 하면 된다.

var languages = ["Java", "JavaScript", "PHP"]; languages.splice(0,0,"c++","c"); // insert console.log(languages);     // ["c++", "c", "Java", "JavaScript", "PHP"]

인덱스는 음수일 수 있으며, 이 경우 배열의 끝에서부터 센다.

var languages = ["Java", "JavaScript", "PHP"]; languages.splice(-1,0,"c++");   // insert at index -1 console.log(languages);         // ["Java", "JavaScript", "c++", "PHP"]

배열의 slice() 메서드

slice() 메서드는 배열에서 일부분을 추출하는 데 사용된다. 문법은 다음과 같다.

array.slice(index[, end])

slice() 메서드는 배열을 변경하지 않으며, 배열의 일부를 반환하기만 한다.

var languages = ["Java", "JavaScript", "PHP"]; console.log(languages.slice(1,2));  // ["JavaScript"] console.log(languages);             // ["Java", "JavaScript", "PHP"]

배열의 reverse() 메서드

reverse() 메서드를 사용하는 예제는 다음과 같다.

var languages = ["Java", "JavaScript", "PHP"]; languages.reverse(); console.log(languages);             // ["PHP", "JavaScript", "Java"]

배열의 sort() 메서드

sort() 메서드를 이용해 배열을 정렬할 수 있으며, sort() 메서드는 모든 것들을 문자열로 변환한 다음 기본적으로 사전순으로 정렬한다. 다음 예제를 보자.

var arr = [2, 1, 15]; arr.sort(); console.log(arr);               // [1, 15, 2]

숫자를 기준으로 정렬하려면 직접 정의한 비교 함수를 전달할 필요가 있다. 다음 예제를 보자.

function compare(a,b){     if (a>b) return 1     else if (b>a) return -1     else return 0 } var arr = [2, 1, 15]; arr.sort(compare); console.log(arr);               // [1, 2, 15]

다차원 배열

배열 안에 또 다른 배열을 저장할 수도 있는데, 다차원 배열을 사용하는 예제는 다음과 같다.

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