배열

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

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

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

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

var array1 = new Array();
array1[0] = "Hello";
array1[1] = 123;
array1[2] = true;
console.log(array1.length); // 3

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

var array1 = new Array("Hello", 123, true);

console.log(array1.length); // 3

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

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

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
// typeof(languages);
// "object"

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

var languages = "Java, JavaScript, PHP";

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

// typeof(languages); // "string"

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

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() 메서드는 배열의 원소를 삭제하고 그것들을 대체하는 데 사용된다.

arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])

arrayObj =>           필수 사항 Array 개체입니다.
start =>                필수 사항 배열에서 요소를 제거할 위치이며 0부터 시작하는 위치입니다.
deleteCount =>      필수 사항 제거할 요소의 수입니다.
item1, item2,. . ., itemN =>     선택 사항입니다.삭제된 요소 대신 배열에 삽입할 요소입니다.

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() 메서드

arrayObj.slice(start, [end])

arrayObj =>     필수 사항 Array 개체입니다.
start=>           필수 사항 arrayObj에 대한 지정된 부분의 시작입니다.
end=>            선택 사항입니다. arrayObj에 대한 지정된 부분의 끝입니다.

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

728x90

저작자표시 비영리

'Web > javascript' 카테고리의 다른 글

[자바스크립트] 연산자 (0)	2018.05.15
[자바스크립트] 함수 (0)	2018.05.15
[자바스크립트] for 반복문 (0)	2018.05.15
[자바스크립트] parent.document / top.window (0)	2018.05.15
[자바스크립트] Array (1)	2018.05.15

[자바스크립트] 배열

배열