Array 객체란?

Array 객체란?

Array 객체는 여러 가지 자료를 쉽게 관리할 수 있게 도와주는 객체이다. 

생성자 함수를 사용해서 생성할 수 있다.

생성자 함수	설명
Array	빈 배열을 만듭니다.
Array(number)	매개 변수만큼의 크기를 가지는 배열을 만듭니다.
Array(mixed, … , mixed)	매개 변수를 배열로 만듭니다.

Array 객체는 지금까지 사용해왔던 간단한 방식으로도 생성할 수 있으므로 Array 객체는 

다음 코드처럼 총 4가지 방법으로 생성할 수 있다.

<script>    // 변수 선언     var array1 = [52, 273, 103, 57, 32];     var array2 = new Array();     var array3 = new Array(10);     var array4 = new Array(52, 273, 103, 57, 32); </script>

배열은 몇 개의 요소를 가지고 있는지 나타내는 length 속성을 갖는다.

속성 이름	설명
length	배열 요소의 개수를 알아냅니다.

단순 for 반복문을 사용해 Array 객체의 요소를 확인할 때 length 속성을 사용한다.

<script>    // 변수 선언     var array = ['A', 'B', 'C', 'D'];     // 출력     var output = '';     for (var i = 0; i < array.length; i++) {         output += i + ' : ' + array[i] + '\n';     }     alert(output); </script>

Array 객체가 갖는 메서드를 아래에 정리했다. 

메서드 이름	설명
concat()	매개 변수로 입력한 배열의 요소를 모두 합쳐 배열을 만들어 리턴합니다.
join()	배열 안의 모든 요소를 문자열로 만들어 리턴합니다.
pop()＊	배열의 마지막 요소를 제거하고 리턴합니다.
push()＊	배열의 마지막 부분에 새로운 요소를 추가합니다.
reverse()＊	배열의 요소 순서를 뒤집습니다.
slice()	배열 요소의 지정한 부분을 리턴합니다.
sort()＊	배열의 요소를 정렬하고 리턴합니다.
splice()＊	배열 요소의 지정한 부분을 삭제하고 삭제한 요소를 리턴합니다.

String 객체와 달리 Array 객체의 메서드는 자기 자신을 직접적으로 바꾸는 경우도 있으니 주의해야한다.

* 표시한 메서드가 자기 자신을 변화시키니 알아두자.

Array 객체의 메서드를 사용할 때 주의할 점이 있는데 아래에서 살펴보자.

<script>     // 변수 선언하고 정렬     var array = [52, 273, 103, 32];     array.sort();     // 출력     alert(array); </script>

sort() 메서드를 사용하면 모든 요소를 문자열 오름차순으로 정렬한다. 

숫자 오름차순이 아니라 문자 오름차순 정렬된다는 점에 주의 해야한다.

Array 객체의 sort() 메서드의 정렬 방법에 변화를 주고 싶을 때는 sort() 메서드의 매개 변수로 함수로 넣어준다. 

sort() 메서드의 매개 변수로 들어가는 함수는 기본적으로 다음과 같이 매개 변수 두 개를 받을 수 있어야 한다.

array.sort(function (left, right){ });

브라우저는 이 함수를 이용해 퀵소트 또는 머지스트 같은 정렬을 진행한다. 

간단하게 말하면 정렬 기준은 매개 변수로 입력한 함수가 리턴하는 숫자의 부호에 정렬 방식이 결정된다.

대부분 배열의 자료를 정렬하는 경우는 숫자를 정렬하는 경우가 많으므로 다음과 같은 형태의 함수를 많이 사용한다.

오름차순 정렬 function (left, right) { return left - right } 내림차순 정렬 function (left, right) { return right - left }

이를 바탕으로 sort() 메서드의 정렬 방식을 지정하는 코드를 보면,

<script>    // 변수 선언하고 정렬     var array = [52, 273, 103, 32];     array.sort(function (left, right) {         return left - right;     });     // 출력     alert(array); </script>

return left - right                         return right- left 

위와 같이 출력되는 것을 확인할 수 있다.

이를 응용해서 학생 객체를 성적순으로 내림 차순 정렬해 1등부터 3등까지 출력해보는 코드를 짜보자.

<script>    // 생성자 함수 선언     function Student(name, korean, math, english, science) {         // 속성         this.이름 = name;         this.국어 = korean;         this.수학 = math;         this.영어 = english;         this.과학 = science;         // 메서드         this.getSum = function () {             return this.국어 + this.수학 + this.영어 + this.과학;         };         this.getAverage = function () {             return this.getSum() / 4;         };         this.toString = function () {             return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();         };     }     // 학생 정보 배열 생성     var students = [];     students.push(new Student('윤인성', 87, 98, 88, 95));     students.push(new Student('연하진', 92, 98, 96, 98));     students.push(new Student('구지연', 76, 96, 94, 90));     students.push(new Student('나선주', 98, 92, 96, 92));     students.push(new Student('윤아린', 95, 98, 98, 98));     students.push(new Student('윤명월', 64, 88, 92, 92));     students.push(new Student('김미화', 82, 86, 98, 88));     students.push(new Student('김연화', 88, 74, 78, 92));     students.push(new Student('박아현', 97, 92, 88, 95));     students.push(new Student('서준서', 45, 52, 72, 78));     // 배열을 정렬하고 1등부터 3등까지만 배열에 남겨둔다.     students.sort(function (left, right) {         return right.getSum() - left.getSum();     });     students = students.slice(0, 3);     // 출력     var output = '이름\t총점\t평균\n';     for (var i in students) {         output += students[i].toString() + '\n';     }     alert(output); </script>

sort() 메서드의 매개 변수로 총점을 내림차순 정렬하고 slice() 메서드로 0번째 인덱스부터 3개만 students에 다시 할당했다.

이부분만 자세히 보면,

<script> students.sort(function (left, right) {   return right.getSum() - left.getSum();  }); students = students.slice(0, 3); </script>

sort() 메서드는 정렬한 배열을 리턴하므로 체이닝을 사용할 수 있다.

<script> students = students.sort(function (left, right) {   return right.getSum() - left.getSum(); }).slice(0, 3); </script>

Array 객체의 메서드에는 특정 요소를 제거하는 메서드가 따로 없다. 

splice() 메서드를 사용하면 특정 요소를 제거하는 기능을 쉽게 만들 수 있으며 프로토타입에 remove() 메서드를 추가하여 쉽게 배열의 요소를 쉽게 제거할 수 있다.

<script> //Array생성자 함수의 프로토타입에 remove() 메서드를 추가  Array.prototype.remove = function (index) {      this.splice(index, 1);  } </script>

잘못된 Array 객체의 요소 제거 예제

<script> // Array생성자 함수의 프로토타입에 remove() 메서드를 추가  Array.prototype.remove = function (index) { this.splice(index, 1); }  // 변수 선언  var array = [52, 273, 103, 32, 274, 129];  // 반복문과 조건문을 사용해 100보다 큰 요소를 제거  for (var i = 0; i < array.length; i++) {  if (array[i] > 100) {          alert(array);          array.remove(i);      }  }  // 출력  alert(array); </script>

언뜻 코드를 보면 숫자 100이 넘는 배열의 요소가 모두 제거될 것처럼 보인다. 

하지만, 코드를 실행하면 다음과 같이 출력된다.

배열의 요소가 제거되면서 인덱스가 앞으로 당겨지기 때문이다.

52    273    103     32     274    129                        ↓    52    273    103     32     274    129                             ↓    52    103     32     274    129                          ↓    52    103     32     274    129

이러한 문제를 해결하려면 역 for 반복문을 사용해야 한다.

<script> // Array 생성자 함수의 프로토타입에 remove() 메서드를 추가  Array.prototype.remove = function (index) { this.splice(index, 1); }  // 변수 선언  var array = [52, 273, 103, 32, 274, 129];  // 반복문과 조건문을 사용해 100보다 큰 요소를 제거  for (var i = array.length; i >= 0; i--) {      if (array[i] > 100) {          array.remove(i);      }  }   // 출력  alert(array); </script>

Array 객체는 자바스크립트에서 정말 중요한 객체이므로 적어도 push(), pop(), splice() 메서드 정도는 기억하자.