Array 객체
Array객체는 여러가지 자료를 쉽게 관리할 수 있게 도와주는 객체입니다.
생성
Array객체는 생성자 함수로 생성합니다.
| 생성자 함수 | 설명 |
| Array() | 빈 배열을 만듭니다. |
| Array(number) | 매개변수만큼의 크기를 가지는 배열을 만듭니다. |
| Array(any, ..., any) | 매개변수를 배열로 만듭니다. |
Array객체는 아래처럼 총 네 가지 방법으로 생성할 수 있습니다.
Array 객체 생성 예
var array1 = [1, 2, 3, 4, 5];
var array2 = new Array();
var array3 = new Array(10);
var array4 = new Array(1, 2, 3, 4, 5);
속성과 메서드
배열은 몇 개의 요소가 있는지 나타내는 length속성이 있습니다.
Array 객체의 속성
| 속성 | 설명 |
| length | 요소의 개수를 알아냅니다. |
Array 객체의 length 속성 예
var array = ['A', 'B', 'C', 'D'];
var output = '';
for(var i = 0; i < array.length; i++) {
output += i + ' : ' + array[i] + '\n';
}
console.log(output);
/*
0 : A
1 : B
2 : C
3 : D
*/
Array 객체의 메서드
| 메서드 | 설명 |
| concat() | 매개변수로 입력한 배열의 요소를 모두 합쳐 배열을 만들어 리턴합니다. |
| join() | 배열 안의 모든 요소를 문자열로 만들어 리턴합니다. |
| *pop() | 배열의 마지막 요소를 제거하고 리턴합니다. |
| *push() | 배열의 마지막 부분에 새로운 요소를 추가합니다. |
| *reverse() | 배열의 요소 순서를 뒤집습니다. |
| slice() | 요소의 지정한 부분을 리턴합니다. |
| *sort() | 배열의 요소를 정렬합니다. |
| *splice() | 요소의 지정한 부분을 삭제하고 삭제한 요소를 리턴합니다. |
* 표시된 메서드는 자기 자신을 변화시킵니다.
sort() 메서드( Array 객체의 메서드를 사용할 때 주의할 점 ) 예
var array = [5, 543, 1, 32432, 111];
array.sort();
console.log(array); // 1, 111, 32432, 5, 543sort()메서드를 사용하면 모든 요소를 문자열 오름차순으로 정렬합니다. 따라서 위 코드처럼 Array 객체가 '문자열 오름차순'으로 정렬됩니다.
:: 숫자 오름차순이 아닌 문자열 오름차순으로 정렬됩니다.
정렬
Array 객체의 sort()메서드의 정렬 방법에 변화를 주고 싶을 때는 sort()메서드의 매개변수로 함수를 넣어줍니다. sort()메서드의 매개변수로 넣는 함수는 기본적으로 다음과 같이 매개변수 두 개를 받을 수 있어야 합니다.
sort() 메서드 형태
array.sort(function(left, right) {
});웹 브라우저는 이 함수를 이용해 퀵 소트 또는 머지 소트 같은 정렬을 진행합니다. 간단하게 하면 정렬 기준을 매개변수로 입력한 함수가 리턴하는 숫자의 부호에 따라 정렬 방식이 결정됩니다.
배열의 자료를 정렬하는 경우는 대부분 숫자를 정렬하는 경우가 많으므로 아래 형태를 많이 사용합니다.
| 오름차순 | 내림차순 |
| function(left, right) { return left - right; } |
function(left, right) { return right - left; } |
위 표처럼 코드를 사용하면 아래코드처럼 숫자 오름차순으로 정렬할 수 있습니다.
sort() 메서드의 정렬 방식 지정 예
var array = [5, 543, 1, 32432, 111];
array.sort(function(left, right) {
return left - right;
});
console.log(array); // 1, 5, 111, 543, 32432
학생 성적 정렬 예
function Student(name, korean, math, english, science) {
this.name = name;
this.korean = korean;
this.math = math;
this.english = english;
this.science = science;
// 메서드
this.getSum = function() {
return this.korean + this.math + this.english + this.science;
};
this.getAverage = function() {
return this.getSum() / 4;
};
this.toString = function() {
return this.name + '\t' + this.getSum() + '\t' + this.getAverage();
};
}
var students = [];
students.push(new Student('shiro', 99, 67, 78, 55));
students.push(new Student('AAA', 65, 99, 43, 12));
students.push(new Student('BBB', 74, 78, 65, 43));
students.push(new Student('CCC', 12, 33, 86, 55));
students.push(new Student('DDD', 44, 64, 48, 65));
students.push(new Student('EEE', 54, 65, 68, 100));
// 3등까지만 배열에 남기기
students.sort(function(left, right) {
return right.getSum() - left.getSum();
});
students = students.slice(0, 3);
var output = '이름 \t 총점 \t 평균 \n';
for(var i = 0; i < students.length; i++) {
output += students[i].toString() + '\n';
}
console.log(output);
/*
이름 총점 평균
shiro 299 74.75
EEE 287 71.75
BBB 260 65
*/sort()메서드와 slice()메서드를 사용해서 총점을 내림차순으로 정렬하고 0번째 인덱스부터 세 개만 변수 students에 다시 할당했습니다.
sort()메서드는 정렬한 배열을 리턴하기 때문에, 아래 코드처럼 메서드 체이닝을 사용할 수도 있습니다.
객체 메서드 체이닝 예
// 3등까지만 배열에 남기기 (메서드 체이닝 ver.)
students = students.sort(function(left, right) {
return right.getSum() - left.getSum();
}).slice(0, 3);
요소 제거
Array객체의 메서드에는 특정 요소를 제거하는 메서드가 따로 없습니다. 대신 splice()메서드를 사용하면 특정 요소를 제거하는 기능을 만들 수 있으며 아래코드처럼 프로토타입에 remove()메서드를 추가하면 배열의 요소를 쉽게 제거할 수 있습니다.
Array 객체의 remove() 메서드 예
// Array 생성자 함수의 프로토타입에 remove()메서드를 추가합니다.
Array.prototype.remove = function(index) {
this.splice(index, 1);
}위 코드에서 만든 remove()메서드는 매개변수로 삭제하고자 하는 인덱스를 적으면 되므로 쉽게 사용할 수 있습니다. 반복문으로 특정 조건에 맞는 Array객체의 요소를 제거할 때는 주의사항이 있습니다.
잘못된 Array 객체의 요소 제거 예
// Array 생성자 함수의 프로토타입에 remove()메서드를 추가합니다.
Array.prototype.remove = function(index) {
this.splice(index, 1);
}
var array = [52, 273, 103, 32, 274, 129];
for(var i = 0; i < array.length; i++) {
if(array[i] > 100) {
array.remove(i);
}
}
console.log(array); // 52, 103, 32, 129배열의 요소가 제거되면서 인덱스가 앞으로 당겨지기 때문에 이러한 문제가 발생합니다.
1번 요소인 273이 지워지면 2번 요소였던 103이 1번 요소로 바뀌면서 문제가 발생하는 것입니다.
올바른 Array 객체의 요소 제거( 역 for 반복문 ) 예
// Array 생성자 함수의 프로토타입에 remove()메서드를 추가합니다.
Array.prototype.remove = function(index) {
this.splice(index, 1);
}
var array = [52, 273, 103, 32, 274, 129];
for(var i = array.length - 1; i >= 0 ; i--) {
if(array[i] > 100) {
array.remove(i);
}
}
console.log(array); // 52, 32
'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글
| [ Javascript ] Math 객체 (0) | 2022.06.21 |
|---|---|
| [ Javascript ] Date 객체 (1) | 2022.06.21 |
| [ Javascript ] String 객체, 메서드 체이닝 (1) | 2022.06.17 |
| [ Javascript ] Number 객체 (0) | 2022.06.17 |
| [ Javascript ] 자료형 구분, 모든 객체에 메서드 추가 (2) | 2022.06.16 |