[] 연산자 외에도 배열을 다루기 위한 다양한 종류의 메서드들이 Array 클래스 안에 정의되어 있다.
이 절에서는 이러한 배열 메서드에 대하여 소개한다.
여기서 소개하는 메서드들은 상당 부분 펄 프로그래밍 언어에서 영향을 받았기 때문에
펄 프로그래머들에게는 친숙하게 느껴질 것이다.
여기서는 배열 메서드의 개요만 알아보며 자세한 설명은 제 3부에서 찾을 수 있다.
1. join() 메서드
Array.join() 메서드는 배열의 모든 원소를 문자열로 변환하고 이어 붙여서 반환한다.
결과로 반환되는 문자열에서 배열의 원소들을 구분하기 위해 구분자(separator) 문자열이 사용되는데, Array.join()에 전달인자를 넘겨 구분자 문자열을 지정할 수 있다. 별도로 구분자 문자열을 지정하지 않으면 콤마(,)가 기본값으로 사용된다. 예를 들어, 다음의 코드는 "1,2,3" 문자열을생성해낸다.
var s = a.join(); // s == "1, 2, 3"
다음 코드는 구분자 문자열을 직접 정의하여 조금 다른 결과를 생성해낸다.
이 예에서는 콤마 뒤의 공백 문자를 유의하여 보라.
Array.join() 메서드는 String.split() 메서드와 반대되는 기능을 한다.
String.split() 메서드는 문자열을 조각들로 분리하고 이 조각들을 원소로 하는 배열을 생성하여 반환한다.
2. reverse() 메서드
Array.reverse() 메서드는 배열 안의 원소 순서를 반대로 정렬하여 반환한다.
이 작업은 배열 안에서 직접 수행된다. 즉 순서가 뒤바뀐 새로운 배열을 생성하는 것이 아니라,
이미 존재하는배열 안에서 원소들의 순서를 뒤바꾼다.
다음 예에서는 문자열 "3,2,1"을 만들기 위하여 reverse() 메서드와 join() 메서드를 사용한다.
a.reverse(); // now a[0] = 3, a[1] = 2, a[2] = 1
var s = a.join(); // s == "3,2,1"
3. sort() 메서드
Array.sort() 메서드는 배열안의 원소들을 정렬하여 반환한다.
이 작업은 reverse()와 마찬가지로 배열 안에서 직접 수행된다.
sort() 메서드를 별도의 전달인자 없이 호출하면, 배열 안의 원소들을 알파벳 순으로 정렬한다.
만약 배열 안의 원소들이 문자열이 아니라면 비교를 위해서 임시로 문자열 변환 작업이 수반된다.
a.sort();
var s = a.join(", "); // s == "apple, banana, cherry"
배열에 정의되지 않은 원소들이 존재하면 이 원소들은 배열의 끝 부분으로 정렬된다.
알파벳순이 아니라 다른 순서로 배열을 정렬하려면 sort() 메서드의 전달인자를 통해 비교 함수를 직접
명시해주어야 한다. 비교 함수는 전달인자를 두 개 받아서, 정렬된 배열 상에서 어떤 것이 먼저 나타나야 하는지 판단하는 데 사용된다. 만약 첫 번째 전달인자가 두 번째보다 먼저 나타나야 한다면 비교 함수는 0보다
작은 숫자를 반환해야 한다. 만약 첫 번째 전달인자가 두 번째보다 뒤에 나타나야 한다면 0보다 큰 숫자를
반환해야 하며, 만약 두 값이 동등하다면 (따라서 그들 간에 순서를 정의하는 것이 의미가 없다면) 0을
반환해야 한다.
예를 들어, 배열 원소들을 알파벳순이 아닌 번호순으로 정렬하려면 다음과 같이 코드를 작성할 수 있다.
a.sort(); // 알파벳순: 1111, 222, 33, 4
a.sort(function(a,b) { // 번호순: 4, 33, 222, 1111
이 예에서 비교 함수는 한 번만 사용되기 때문에 굳이 함수에 이름을 부여하지 않아도 된다.
이때는 함수 리터럴을 사용하는 것이 편리하다.
또 다른 예로서, 대소문자를 구분하지 않는 알파벳순으로 배열을 정렬할 수도 있다.
이때 비교 함수는 우선 두 전달인자를 소문자로 바꾼 후에(toLowerCase() 메서드를 사용한다) 비교 작업을 행하면 된다. 또한 번호의 역순으로 정렬을 하거나 홀수를 짝수 앞으로 정렬하는 등의 다른 복잡한 숫자 비교 함수들을 생각해볼 수 있다. 비교하려는 배열의 원소가 숫자나 문자열 같이 간단한 타입이 아닌 객체라면,
더욱 흥미로운 비교 함수를 작성할 수 있다.
4. concat() 메서드
Array.concat() 메서드는 본래 배열의 모든 원소에 concat() 메서드의 전달인자들을 전부 이어붙인 배열을
새롭게 생성하여 반환한다. 만약 concat() 메서드의 전달인자로 배열을 전달하면, 이 배열 안의 원소들을
꺼내어 반환하는 배열에 이어 붙인다. 그러나 중복하여 중첩된 배열은 그 배열에 속한 배열의 원소를
분리해내지 않음을 주의하라.
예를 들면, 다음과 같다.
a.concat(4, 5); // [1,2,3,4,5]를 반환한다.
a.concat([4,5]); // [1,2,3,4,5]을 반환한다.
a.concat([4,5],[6,7]); // [1,2,3,4,5,6,7]을 반환한다.
a.concat([4, [5,[6,7]]); // [1,2,3,4,5,[6,7]]을 반환한다.
5. slice() 메서드
Array.slice() 메서드는 배열의 일부분(slice) 혹은 부분 배열(subarray)을 반환한다.
slice() 메서드는 전달인자를 두 개 받는데, 각 인자는 반환될 부분의 처음과 끝을 각각 명시한다.
반환되는 배열은 첫 번째 전달인자가 지정하는 위치부터 두 번째 전달인자가 지정하는 위치를 제외한 그 사이 모든 원소를 포함한다. 만약 전달인자를 하나만 명시하면, 그 위치에서 배열끝까지의 모든 원소를 포함하는 부분배열을 반환한다. 만약 전달인자가 음수라면 배열의 마지막 원소에서 상대적인 위치로 배열 원소들을
지정한다. 예를 들어, 전달인자 -1은 배열의 마지막 원소를 가리키며, 전달인자 -3은 배열의 마지막 원소부터 앞쪽으로 세 번째 원소를 가리킨다. 예를 들면, 다음과 같다.
a.slice(0, 3); // [1,2,3]을 반환한다.
a.slice(3); // [4,5]를 반환한다.
a.slice(1, -1); // [2,3,4]를 반환한다.
a.slice(-3, -2); // [3]을 반환한다.
6. splice() 메서드
Array.splice() 메서드는 배열에 원소를 삽입하거나 원소를 제거하려 할 때에 범용적으로 사용할 수 있는
메서드다. 이러한 변경 작업은 배열 안에서 직접 수행된다. 즉 splice() 메서드는 slice(), concat()과 달리
새로운 배열을 만들어 반환하지 않는다. splice() 메서드는 slice()와 이름이 매우 유사하지만, 수행하는 작업은 완전히 다름을 주의하라.
splice()는 배열에서 원소를 삭제하거나 배열에 새로운 원소를 삽입하는 데 사용할 수 있으며 이러한 작업을 동시에 수행할 수도 있다. 삭제와 삽입 작업으로 변형된 배열 안에서도 배열 원소들이 연속선상에 분포하게 하기 위해서, 필요에 따라 원소들의 이동작업이 일어날 수 있다. splice()의 첫 번째 전달인자는 배열 상에서 삽입 혹은 삭제 작업이 시작하게 될 위치를 지정하며, 두 번째 전달인자는 배열에서 삭제할(잘라낼) 원소들의 개수를 지정한다. 두 번째 전달인자를 지정하지 않으면 첫 번째 전달인자로 지정한 작업의 시작 위치에서
배열의 마지막 원소까지를 전부 잘라낸다. splice()는 이렇게 잘라낸 배열을 반환하며, 만약 잘라낸 원소가
하나도 없다면 빈 배열을 반환한다.
예를 들면 다음과 같다.
a.splice(4); // [5,6,7,8]을 반환한다. a는 이제 [1,2,3,4]
a.splice(1,2); // [2,3]을 반환한다. a는 이제 [1,4]
a.splice(1,1); // [[4]를 반환한다. a는 이제 [1]
splice()의 처음 두 전달인자는 배열에서 잘라낼 원소들을 지정하는데 사용되었다.
세 번째 전달인자부터는 배열에 새롭게 이어 붙일 원소들을 지정하는데 사용되며,
이러한 삽입 작업은 첫 번째 전달인자가 지정하는 시작 위치부터 수행된다.
예를 들면 다음과 같다.
a.splice(2,0, 'a', 'b'); // []를 반환한다. a는 이제 [1,2,'a','b',3,4,5]
a.splice(2,2,[1,2],3); // ['a', 'b']를 반환한다. a는 이제 [1,2,[1,2],3,3,4,5]
concat()와는 달리 splice()는 전달인자의 배열에서 원소들을 분리해내는 작업을 수행하지 않는다.
즉, 전달인자로 배열을 삽입하려 하면 배열 그 자체를 통째로 삽입하며,
그 배열의 원소들을 꺼내어 삽입하지는 않는다.
7. push() 와 pop() 메서드
push()와 pop() 메서드를 사용하면 배열을 마치 스택인 것처럼 조작할 수 있다.
push() 메서드는 하나 혹은 그 이상의 원소들을 배열의 끝 부분에 이어 붙이고 배열의 새로운 길이를
반환한다. pop() 메서드는 push()와 반대로 작동한다. 즉 pop() 메서드는 배열의 마지막 원소를 제거하고
배열의 길이를 감소시킨 후 배열에서제거한 원소를 반환한다.
이 두 메서드는 새로운 배열을 만들어 반환하는 것이 아니라 배열 그 자체를 변화시킴을 유의하라.
push()와 pop()을 함께 사용하면 자바스크립트의 배열로 FILO(선입후출, First-in, Last-out) 스택을
구현할 수 있다.
예를 들면 다음과 같다.
stack.push(1,2); // stack: [1,2] 2를 반환한다.
stack.pop(); // stack: [1] 2를 반환한다.
stack.push(3); // stack: [1,3] 2를 반환한다.
stack.pop(); // stack: [1] 3을 반환한다.
stack.push([4,5]); // stack: [1, [4,5]] 2를 반환한다.
stack.pop(); // stack: [1] [4,5]를 반환한다.
stack.pop(); // stack: [] 1을 반환한다.
8. unshift() 와 shift() 메서드
unshift()와 shift() 메서드는 push(), pop()과 매우 유사하게 작동하는데, 이 메서드들은 배열의 끝이 아니라 배열의 맨 앞에서 원소를 삽입하고 제거한다는 점이 다르다. unshift() 메서드는 하나 혹은 그 이상의 원소들을 배열의 맨 앞에 삽입한다. unshift()는 이미 배열에 들어있는 원소들을 인덱스가 높은 방향으로 옮겨 새로운 원소들을 삽입할 공간을 만들고, 삽입 작업을 수행한 후, 배열의 새로운 길이를 반환한다.
shift() 메서드는 배열의 첫 번째 원소를 제거한 후, 나머지 배열 원소들을 전부 앞으로 옮기어 첫 번째 원소가 제거되면서 생긴 빈 공간을 메우고, 배열에서 제거한 원소를 반환한다.
예를 들면 다음과 같다.
a.unshift(1); // a:[1] 1을 반환한다.
a.unshift(22); // a:[22, 1] 2를 반환한다.
a.shift(); // a:[1] 22를 반환한다.
a.unshift(3,[4,5]); // a:[3,[4,5],1] 3을 반환한다.
a.shift(); // a:[[4,5],1] 3을 반환한다.
a.shift(); // a:[1] [4,5]를 반환한다.
a.shift(); // a:[] 1을 반환한다.
unshift()의 전달인자로 여러 개의 원소들을 한꺼번에 배열에 추가하면 예상치 못한 결과를 얻을 수 있음을
주의하라. unshift()는 전달인자의 원소들을 하나씩 배열에 삽입하는 대신, 모든 전달인자를 한꺼번에
(splice() 메서드가 동작하는 것과 마찬가지로) 배열에 삽입한다. 이 말은 unshift()에 의해 변형된 배열에
나타나는 새로운 원소들의 순서가 unshift() 메서드의 전달인자에 나타난 순서와 동일하다는 것을 의미한다.
만약 unshift()가 원소들은 한 번에 하나씩 배열에 추가했다면, 그 순서가 반대로 나타난다.
9. toString() 와 toLocalString() 메서드
배열에는 다른 자바스크립트 객체와 마찬가지로 toString() 메서드가 있다.
배열의 toString() 메서드는 우선 배열의 모든 원소를 문자열로 변형하고
(필요에 따라 원소의 toString() 메서드가 호출된다) 이 문자열들을 콤마(,)로 분리한 목록을 반환한다.
결과 문자열은 대괄호 [] 문자나 배열 값들을 둘러싼 다른 종류의 구분자(delimiter)들을 포함하지 않는다.
예를 들면 다음과 같다.
["a", "b" "c"].toString(); // 결과는 'a,b,c'
[1, [2, 'c']].toString(); // 결과는 '1,2,c'
별도의전달인자를 지정하지 않고 join() 메서드를 호출하면 toString()과 동일한 결과를 얻을 수 있다.
toLocalString()은 toString()의 지역화된 버전이다. 이 메서드는 우선 배열의 각 원소들을 그 원소의 toLoaclString() 메서드를 사용하여 변환하고, 지역에 특화되었거나(local-specific) 구현에 정의된
구분자 문자열을 사용하여 각 결과 문자열을 연결한다.
10. 추가적인 배열 함수
파이어폭스 1.5 브라우저는 자바스크립트 버전을 1.6으로 올리고 추가적인 배열 함수(array extras)로
알려진 배열 메서드를 추가로 지원한다. 특히 여기에는 배열상에서 주어진 값을 빠르게 찾을 수 있는
indexOf()와 lastIndexOf() 메서드들이 추가되었다(유사한 메서드인 String.indexOf()에 대한 설명을
3부에서 찾을 수 있다). 또 다른 메서드인 forEach()는 배열의 모든 원소에 대하여 지정된 함수를 호출하며, map()은 배열의 각 원소에 지정된 함수를 호출하여 얻은 결과를 원소로 하는 배열을 반환한다.
filter() 메서드는 지정된 술어 함수(predicate function)[각주:1]가 true를 반환하는 원소들로 구성된 배열을
반환한다. 이 책을 쓰고 있는 지금, 위에서 설명한 추가적인 배열 함 수들은 오직 파이어폭스에서만 사용 가능하며 아직까지는 공식적인 표준이나 사실상의 표준으로는 취급되지 않는 상태다. 이 함수들을 여기서 자세히 기술하지는 않는다. 만약 파이어폭스 브라우저만을 위한 프로그램을 작성하거나, 혹은 이러한 배열 메서드에 대한 에뮬레이션을 제공해주는 호환 계층을 사용하고 있다면 관련 문서를 http://developer.mozilla.org에서 찾을 수 있다.
8장에서는 몇몇 유용한 배열 메서드에 대한 예 구현을 설명한다.
- (역자 주)술어 함수(predicate function)란 불리언 값(참 또는 거짓)을 반환하는 함수다. filter() 메서드는 배열의 각 원소를 이 술어 함수의 인자로 넣어 호출하고, 결과가 참인 원소들만 모아서 따로 배열로 만들어 반환한다. [본문으로]
'IT_Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트 완벽가이드 - 8.1 함수 정의와 호출 (0) | 2010.07.04 |
|---|---|
| 자바스크립트 완벽가이드 - 7.8 배열과 유사한 객체 (0) | 2010.07.04 |
| 자바스크립트 완벽가이드 - 7.6 배열 원소 읽고 쓰기 (0) | 2010.07.04 |
| 자바스크립트 완벽가이드 - 7.5 배열 (0) | 2010.07.04 |
| 자바스크립트 완벽가이드- 7.4 공통적으로 나타나는 객체 프로퍼티와 메서드 (0) | 2010.07.04 |