배열이라고 하는 것은 영어로는 Array라고 한다. 배열을 정의한다면 연관되어 있는 데이터를 모아서 통으로 관리하기 위해 사용하는 데이터의 형식이다. 데이터들을 담는 그릇이라 보면 된다.
또한 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다.
배열의 생성
배열은 대괄호로 시작해서 대괄호로 끝난다([]). 대괄호 안의 데이터는 콤마(,)로 구분하여 나열하면 된다.
// 변수로 하나씩 데이터 담기
var member1 = 'egoing';
var member2 = 'k8805';
var member3 = 'sorialgi';
// 배열로 한번에 데이터 담기
var member = ['egoing', 'k8805', 'sorialgi']배열 안에 있는 각각의 데이터를 원소(Element)라고 부른다. 그렇다면 이 데이터를 어떻게 꺼내올까?
var member = ['egoing', 'k8805', 'sorialgi']
alert(member[0]); // egoing 노출
alert(member[1]); // k8805 노출
alert(member[2]); // sorialgi 노출배열이 담겨있는 변수의 대괄호 안에서 가져오고 싶은 데이터의 순번을 입력하면 된다. 이때 대괄호 안의 숫자를 색인(index)라고 부르며 이 숫자는 0부터 시작한다. 즉 첫 번째 원소(egoing)를 가져오려면 대괄호 안에 0을 넣어주면 되고 두 번째는 1, 세 번째는 2를 넣어주면 된다. 이렇게 해서 배열에 저장된 값을 가져올 수 있다.
배열의 효용(배열이 없다면)
배열이 없다면 어떻게 되는지에 대해 알아본다.
function get_member1(){
return 'egoing';
}
document.write(get_member1());
function get_member2(){
return 'k8805';
}
document.write(get_member2());
function get_member3(){
return 'sorialgi'
}
document.write(get_member3());멤버의 이름을 제공하는 함수를 제공해야 한다면 함수는 하나의 값만을 반환(return) 할 수 있기에 위와 같이 각각의 회원정보를 반환하는 함수를 만들었다.
그렇다면 이번에는 배열을 이용하여 코드를 만들어보자.
function get_members(){
return ['egoing', 'k8805', 'sorialgi'];
}
var members = get_members();
document.write(members[0]); // egoing 노출
document.write(members[1]); // k8805 노출
document.write(members[2]); // sorialgi 노출멤버를 담고 있는 배열을 반환하고 있으며 이전 코드보다 간단해진 것을 볼 수 있다.
배열은 실제로 아주 자주 사용하는 프로그래밍 방법이다. 배열이라 하는 것은 이런 식으로 연관되어있는 정보를 한꺼번에 다룰 수 있도록 해주기 때문에 프로그래밍을 하는데에 있어서 아주 중요한 수단이다.
배열의 사용
배열을 사용할 때 인덱스 값을 기억한다는 것은 불가능할 것이다. 그렇기 때문에 배열이라는 것은 배열에 담겨 있는 값들을 하나하나 꺼내서 그 꺼내진 값들을 가공하는 것이 이 배열을 사용하는 핵심적인 요소이다. 하나하나 꺼내온다는 것은 반복문과 연결된다는 것이다. 배열은 반복문과 함께 사용했을 때 비로소 그 가치가 발휘되는 문법적인 요소이다.
function get_members(){
return ['egoing', 'k8805', 'sorialgi'];
}
members = get_members(); // get_members()를 members 변수에 담기
// 변수 하나하나 호출
document.write(members[0].toUpperCase() + "<br />");
document.write(members[1].toUpperCase() + "<br />");
document.write(members[2].toUpperCase() + "<br />");
/*
결과
EGOING
K8805
SORIALGI
*/
// for문 활용
// members.length는 배열에 담긴 값의 숫자를 알려준다.
for(i = 0; i < members.length; i++){ // members.length => members의 개수
// members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.
document.write(members[i].toUpperCase() + "<br />"); // toUpperCase() => 대문자로 변환해주는 내장함수
document.write('<br />');
}
/*
결과
EGOING
K8805
SORIALGI
*/
배열의 제어
배열에 담겨있는 데이터를 추가, 삭제, 낑겨넣기 등의 작업을 할 때가 있다. 이때 어떻게 하면 될지 알아보자.
var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f');
alert(li);// e 데이터 뒤에 f 가 추가된다배열의 끝에 원소를 추가하는 방법은 .push()를 사용하는 것이다. push는 배열 안에 인자로 전달된 값을 배열에 추가하는 명렁이다.
var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);
alert(li);하나의 값을 추가하는 명령이 .push()라면 여러개의 값을 한번에 추가할 때에는 .concat()을 사용한다.
concat의 인자는 배열로 쓴다. 변수에 담겨있는 배열에 concat 안에 담겨있는 배열을 연결해서 하나의 배열로 만든 다음에 그것을 리턴하는 것이다. 그 리턴 값을 기존 변수에 담겨 합쳐진 결과 값을 보여준다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
alert(li);만약에 첫번째 값으로 어떠한 값을 추가하고 싶다면 .unshift()를 사용하면 된다. 인덱스 값도 0으로 들어간다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0, 'B');
alert(li);
// 문법
array.splice(index, howmany, element1, ...., elementN);
var a = ['a', 'b', 'c'];
a.splice(1, 1, 'x', 'y'); // a => ["a", "x", "y", "c"]중간 어딘가에 배열을 낑겨 넣고 싶을 때는 .splice()를 사용하면 된다.
-
index: 배열에 추가할 특정 배열의 위치를 가르킨다.
-
howmany: index에서부터 제거될 원소들의 수. index부터 index+howmany에 해당하는 원소들은 삭제된다. 이 값이 0이면 어떠한 원소도 삭제되지 않는다.
-
element1,...,elementN: index와 index+howmany 사이에 추가될 값
splice는 사용하기 복잡하기에 굳이 암기할 필요는 없다. 사용할 때 문서를 보고 사용하면 된다.
배열의 제거
var li = ['a', 'b', 'c', 'd', 'e'];
li.shift();
alert(li); // ['b', 'c', 'd', 'e']첫번째 원소를 제거하고 싶을 때는 .shift()를 사용한다. 위 코드를 보면 제일 앞 원소 'a'가 빠지게 된다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.pop();
alert(li); // ['a', 'b', 'c', 'd']
반대로 제일 뒤 원소를 제거할 때는 .pop()을 사용하면 된다.
변수의 정렬
배열과 같은 것들을 사용하는 중요한 이유 중에 하나는 정렬에 있다. 정렬은 프로그래밍에서 상당히 중요한 주제이며 어떻게 하면 더 빠른 정렬을 할 수 있을까 하는 연구를 알고리즘이라 부른다.
var li = ['c', 'e', 'a', 'b', 'd'];
li.sort();
alert(li); // ['a', 'b', 'c', 'd', 'e']이렇게 뒤죽박죽 정렬되어있는 배열을 알파벳 순으로 나열하고 싶다면 .sort()를 사용하면 된다.
var li = ['c', 'e', 'a', 'b', 'd'];
li.reverse();
alert(li); // ['e', 'd', 'c', 'b', 'a']반대로 역순으로 나열하고 싶을 때는 .reverse()를 사용한다.
프로그래밍을 하다보면 어떠한 기준에 따라 정렬을 해야할 때가 온다. 그때는 sort라는 매소드를 찾아 원하는 대로 정렬을 하면 된다.
(sort 참고: https://opentutorials.org/course/50/109)
출처: 생활코딩
