[JavaScript] 자바스크립트 배열

1. 배열이란?

배열(array)이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입니다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있습니다. 아래의 예제를 보겠습니다. 변수 name에는 문자 egoing이 할당되었습니다. 이제부터 name을 호출하면 문자 egoing을 사용할 수 있습니다.

var name = 'egoing'
alert(name);

 

2. 배열의 생성

그렇다면 여러 개의 데이터를 하나의 변수에 담아서 관리할 수 있는 방법은 없을까요? 배열을 쓰면 됩니다. 변수 member에 회원정보를 담아봅시다. 대괄호([])는 배열을 만드는 기호입니다. 대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 됩니다.

var member = ['egoing', 'k8805', 'sorialgi']

var member = ['egoing', 'k8805', 'sorialgi']
alert(member[0]);
alert(member[1]);
alert(member[2]);

배열에 담겨있는 값을 가져올 때는 대괄호 안에 숫자를 넣습니다. 이 숫자를 색인(index)라고 부르고 0부터 시작합니다. 즉 첫번째 원소(egoing)를 가져오려면 대괄호 안에 0을 넣어주어야 한다는 것입니다. 두번째는 1, 세번째는 2를 입력합니다. 이 값을 이용해서 배열에 저정된 값을 가져올 수 있습니다.

 

3. 배열과 반복문

배열의 진가는 반복문과 결합했을 때 나타납니다. 반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리 할 수 있기 때문입니다. 

function get_members(){
    return ['egoing', 'k8805', 'sorialgi'];
}
members = get_members();
// members.length는 배열에 담긴 값의 숫자를 알려준다. 
for(i = 0; i < members.length; i++){
    // members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.
    document.write(members[i].toUpperCase());   
    document.write('<br />');
}

egoing
k8805
sorialgi

결과는 위와 같습니다. 위의 예제에서 주목해야 할 것은 반복문과 배열을 결합한 부분입니다. 반복문을 이용해서 배열 members의 내용을 하나씩 꺼낸 후에 이름의 첫글자를 대문자로 변경한 후에 출력하고 있습니다. 정리하면, 배열이란 연관된 정보를 하나의 그룹으로 관리하기 위해서 사용합니다. 그리고 그 정보를 처리 할 때는 반복문을 이용합니다.

 

4. 배열의 크기

배열의 크기는 다음과 같이 배열의 변수 이름뒤에 .length를 붙여서 구할 수 있습니다. 다음의 예제에서 배열의 길이는 5입니다.

var arr = [1, 2, 3, 4, 5];
alert(arr.length);

 

5. 배열의 원소 추가, 제거, 정렬

다음은 배열의 끝에 원소를 추가하는 방법입니다. push는 인자로 전달된 값을 배열(li)에 추가하는 명령입니다. 배열 li의 값은 a, b, c, d, e, f가 됐습니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f');
alert(li);

다음은 복수의 원소를 배열에 추가하는 방법입니다. concat은 인자로 전달된 값을 추가하는 명령입니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);
alert(li);

다음은 배열의 시작점에 원소를 추가하는 방법입니다. 배열 li는 z, a, b, c, d, e가 됐습니다. unshift는 인자로 전달한 값을 배열의 첫번째 원소로 추가하고 배열의 기존 값들의 색인을 1씩 증가시킵니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
alert(li);

만약 두번째 인덱스 뒤에 대문자 B를 넣고 싶다면 아래와 같이합니다. splice는 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴합니다. 그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가합니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0, 'B');
alert(li);

다음은 배열의 첫번째 원소를 제거하는 방법입니다. shift를 사용하면 된다. 아래 결과는 b, c, d, e 입니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.shift();
alert(li);

다음은 배열 끝점의 원소를 배열 li에서 제거합니다. 이때는 pop를 사용합니다. 결과는 a, b, c, d 입니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.pop();
alert(li);

다음은 정렬하는 방법입니다. 결과는 a, b, c, d, e 입니다.

var li = ['c', 'e', 'a', 'b', 'd'];
li.sort();
alert(li);

역순으로 정렬하고 싶을 때는 아래와 같이 합니다.

var li = ['c', 'e', 'a', 'b', 'd'];
li.reverse();
alert(li);