배열과 Array객체 1

배열과 Array객체

 

배열

배열이란 여러 개의 변수를 한꺼번에 다룰 수 있는 자료형이다.

자바스크립트에는 문자열, 숫자, 불, 함수, 객체, 정의 되지 않은 undefined 자료형 까지 총 6가지 자료형이 있다.

배열은 object 객체 중 하나이다.

자바에서는 배열을 {중괄호}로 생성하지만 자바스크립트에서는 배열을 [대괄호]로 생성한다.

대괄호 안에 쉼표로 구분해 자료를 입력한다.

배열 안에 입력된 값을 배열요소 element라고 부른다.

 

var array = [273, 32, 103, 57, 52];

위와 같이 배열을 선언하며 다섯 개의 요소가 있는 배열이다.

 

배열에는 어떠한 종류의 자료형도 배열 요소가 될 수 있다.

var array = [273, 'String', true, function(){ }, {}, [273,103]];
alert(array);

 

배열을 출력하면 위와같이 배열 요소를 순서대로 출력한다.

 

 

배열은 변수 여러 개를 한꺼번에 선언한 것이다.

배열 요소를 각각 사용하려면 배열에 대한 식별자 즉, 변수명 바로 뒤에 대괄호를 사용하고 안에 숫자를 넣는다.

일상에서 사용하는 숫자와 다르게 자바스크립트는 가장 첫번째 요소를 0번째라고 표현한다.

(이것은 미국이나 유럽에서 사용하는 숫자의 순서인데, 우리나라의 경우는 정수를 샐 때 보통 1부터 시작하지만 외국의 경우는 정수를 샐 때 0부터 시작한다.)

 

다음은 배열의 0번째 2번째 4번째 요소를 출력하는 코드이다.

var array = [273, 32, 103, 57, 52];

alert(array[0]);
alert(array[2]);
alert(array[4]);

배열 변수의 식별자 array 뒤 [대괄호] 기호 안에 들어간 숫자를 자바스크립트에서는 인덱스 index라고 부른다.

---

Array객체

Array객체는 여러가지 자료를 쉽게 관리할 수 있게 도와주는 배열에 대한 자바스크립트의 기본 내장 객체이다.

Array객체는 다음과 같은 생성자 함수로 생성한다.

 

Array( ) : 빈 배열을 만든다.

Array(number) : 매개변수 number개수 만큼의 크기를 가지는 배열을 만든다.

Array(mixed, ..., mixed) : 매개변수를 배열로 만든다.

var array1 = [52,273,103,57,32];
var array2 = Array(52,273,103,57,32);
var array3 = new Array(52,273,103,57,32);
var array4 = new Array();
var array5 = new Array(5);

위와같이 Array( ) 함수는 함수앞에 new 키워드로 생성자 함수를 호출하거나 new키워드를 붙히지 않고 호출하여도 Array객체를 생성한다.

 

array4는 배열을 선언만 했으며 array5는 배열의 길이를 지정하여 선언만 하였다.

두 배열 모두 생성만 한 상태이고 값은 초기화되지 않았다.

 

array4의 경우는 다음과같이 배열에 값을 넣어 초기화한다.

var array4 = new Array(); //배열선언
//배열 값 초기화
array4[0] = 52;
array4[1] = 273;
array4[2] = 103;
array4[3] = 57;
array4[4] = 32;

 

array5의 경우는 다음과 같이 배열에 값을 넣어 초기화할 수 있다.

var array5 = new Array(10); //배열 선언
	
for(var i=0; array5.length; i++){ //배열 초기화
    array5[i]=i;
}

반복문에서 사용한 .length는 Array객체의 속성중 하나이다.

length속성을 통해 배열의 길이 즉, 개수를 알아낼 수 있다.

length속성만큼 반복하여 값을 넣어줄 수도 있다.

---

Array객체의 메서드

Array객체는 크게 8가지의 메서드가 있다.

concat( ) : 매개변수로 입력한 배열의 요소를 모두 합쳐 배열을 만들어 리턴한다.

join( ) : 배열 안의 모든 요소를 문자열로 만들어 리턴한다.

pop( ) : 배열의 요소를 제거하고 리턴한다.

push( ) : 배열의 마지막 부분에 새로운 요소를 추가한다. 

reverse( ) : 배열의 요소 순서를 뒤집는다.

slice( ) : 배열 요소의 지정한 부분을 리턴한다.

sort( ) : 배열의 요소를 정렬한다.

splice( ) : 배열 요소의 지정한 부분을 삭제하고 삭제한 요소를 리턴한다. 

 

 

sort( )

var array = [52,273,103,32];
array.sort();
console.log(array);

코드를 실행하면 모든  요소를 문자열 오름차순으로 정렬한다.

이것은 숫자 오름차순이 아니라 문자열 오름차순으로 정렬된것 이라는점을 기억하고 주의하여야 한다.

 

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

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

sort() 메서드의 매개변수로 들어가는 함수의 매개변수에는 위 코드와 같이 기본적으로 매개변수를 두 개(left, right) 받아야한다.

 

브라우저는 해당 하수를 이용해 Quick Sort 혹은 Merge Sort 같은 정렬을 진행한다.

매개변수로 입력한 함수가 리턴하는 숫자의 부호에 따라 정렬 방식이 결정된다.

 

오름차순 정렬

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

 

내림차순 정렬

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

var array = [52,273,103,32];

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

console.log(array);

var array = [52,273,103,32];

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

console.log(array);

 

 

 

요소 제거

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

splice( ) 메서드를 사용하면 특정 요소를 제거하는 기능을 쉽게 만들 수 있다.

splice메서드는 기본적으로 두개의 매개변수를 받는데 첫번째 매개변수에는 삭제할 배열요소의 위치 인덱스값을,

두번째 매개변수에는 첫번째 매개변수에 들어간 삭제할 배열요소의 위치 인덱스값 부터 몇개의 요소를 지울지에 대한 정수 값을 입력한다.

 

prototype에 splice( ) 메서드를 사용한 remove( ) 메서드를 추가하여 구현해본다.

var array = Array(52,273,103,57,32)

console.log("삭제 전 : ",array);

Array.prototype.remove = function (index) {
    this.splice(index, 1);
}
array.remove(3);

console.log("삭제 후 : ",array);

remove 메소드의 매개변수에 들어온 값은 splice에서 삭제할 index를 결정한다.

 

 

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