자바스크립트 - 배열

 

 

오늘은 배열에 대해서 정리해보자!

 

 

배열(array)이란?

연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다.

변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다. 

 

 

그렇다면 배열은 어떻게 생성할까??

 

변수 member에 회원정보를 담아보자.

대괄호([])는 배열을 만드는 기호다.

대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 된다.

var member = ['Kim', 'Lee', 'Lim']

하나의 변수에 3개의 데이터를 담았다. 각각의 데이터를 원소(Element)이라고 부른다.

 

 

자 그럼 이 데이터를 꺼내오려면 어떻게 해야 할까?

var member = ['Kim', 'Lee', 'Lim']
alert(member[0]); // 결과 : Kim
alert(member[1]); // 결과 : Lee
alert(member[2]); // 결과 : Lim

 

배열에 담겨있는 값을 가져올 때는 대괄호 안에 숫자를 넣는다.

이 숫자를 색인(index)라고 부르고 0부터 시작한다.

즉 첫 번째 원소(egoing)를 가져오려면 대괄호 안에 0을 넣어주어야 한다는 것이다.

두 번째는 1, 세 번째는 2를 입력한다.

이 값을 이용해서 배열에 저 정 된 값을 가져올 수 있는 것이다.

 

이 배열을 함수에 활용하면 유용하다.

하나의 함수는 하나의 값만을 반환할 수 있기 때문에 배열을 이용해서 return을 해보자.

function get_members(){
    return ['Kim', 'Lee', 'Lim'];
}
var members = get_members();
document.write(members[0]); // 결과 : Kim
document.write(members[1]); // 결과 : Lee
document.write(members[2]); // 결과 : Lim

이런 식으로 활용할 수 있다.

 

배열을 반복문에도 활용할 수 있다.

배열의 진가는 반복문과 결합했을 때 나타난다.

반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리할 수 있기 때문이다.

 

var members = ['Kim', 'Lee', 'Lim']
for(i = 0; i < members.length; i++){
    document.write(members[i]);   
    document.write('<br />');
}
/* 결과 :
Kim
Lee
Lim */

반복문을 이용해서 배열 members의 내용을 하나씩 꺼낸 후에 출력하고 있다.

 

여기서 length는 배열의 크기를 나타낼 수 있다.

→ 배열의 개수를 의미한다.

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

 

배열은 추가, 제거, 정렬할 수 있는 내장 함수들이 존재한다.

 

추가할 수 있는 내장 함수부터 알아보도록 하자.

 

먼저 push()를 이용하여 배열의 끝에 원소를 추가하는 방법이다.

var arr = ['a', 'b', 'c', 'd', 'e'];
arr.push('f');
// 결과 : ['a', 'b', 'c', 'd', 'e', 'f']

다음은 concat()을 이용하여 복수의 원소를 배열에 추가하는 방법이다.

var arr = ['a', 'b', 'c', 'd', 'e'];
arr = arr.concat(['f', 'g']);
// 결과 : ['a', 'b', 'c', 'd', 'e', 'f', 'g']

다음은 unshift()를 이용하여 배열의 시작점에 원소를 추가하는 방법이다.

var arr = ['a', 'b', 'c', 'd', 'e'];
arr.unshift('z');
// 결과 : ['z', 'a', 'b', 'c', 'd', 'e']

만약 두 번째 인덱스 뒤에 대문자 B를 넣고 싶다면 splice()를 이용한다.

첫 번째 인자에 해당하는 원소부터 두 번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴한다. 그리고 세 번째 인자부터 전달된 인자들을 첫 번째 인자의 원소 뒤에 추가한다.

var arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(2, 0, 'B');
// 결과 : ['a', 'b', 'B', 'c', 'd', 'e']

→ 2번째 해당하는 index에서 개수 0개만큼 배열로부터 제거 후, 그 뒤에 'B'를 추가한다.

 

 

다음으로 제거하는 내장 함수들을 알아보자.

 

먼저 shift()를 이용해 배열의 첫 번째 원소를 제거하는 방법이다.

var arr = ['a', 'b', 'c', 'd', 'e'];
arr.shift();
//결과 : ['b', 'c', 'd', 'e']

다음으로 pop()을 이용하여 배열 끝점의 원소를 제거하는 방법이다.

var arr = ['a', 'b', 'c', 'd', 'e'];
arr.pop();
// 결과 : ['a', 'b', 'c', 'd']

 

 

마지막으로 정렬에 대한 내장 함수들을 알아보자.

 

오름차순 정렬은 sort()를 이용한다.

var arr = ['c', 'e', 'a', 'b', 'd'];
arr.sort();
// 결과 : ['a', 'b', 'c', 'd', 'e']

역순으로 정렬은 reverse()를 이용한다.

var arr = ['c', 'e', 'a', 'b', 'd'];
arr.reverse();
// 결과 : ['e', 'd', 'c', 'b', 'a']