JavaScript

배열

배열

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

var name = 'egoing'
alert(name);

배열의 생성

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

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

하나의 변수에 3개의 데이터를 담았다. 각각의 데이터를 원소(Element)이라고 부른다. 자 그럼 이 데이터를 꺼내오려면 어떻게 해야 할까? 아래의 예제를 보자.

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

결과는 아래의 문자열을 차례로 경고창으로 출력 할 것이다.

egoing
k8805
sorialgi

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

배열이 없다면

그렇다면 배열이 없다면 어떻게 될까? 예를 들어 맴버의 이름을 제공하는 함수를 제공해야 한다고 해보자. 그런데 함수는 하나의 값만을 반환(return) 할 수 있다. 아래의 예를 보자.

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());

하나의 함수는 하나의 값만을 반환할 수 있기 때문에 위와 같이 각각의 회원정보를 반환하는 함수를 만들었다.

이번엔 배열를 이용한 아래의 코드를 보자. 맴버를 담고 있는 배열를 반환하고 있다. 간단하지 않은가?

function get_members(){
    return ['egoing', 'k8805', 'sorialgi'];
}
var members = get_members();
document.write(members[0]);
document.write(members[1]);
document.write(members[2]);

배열의 사용

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

 

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의 내용을 하나씩 꺼낸 후에 이름의 첫글자를 대문자로 변경한 후에 출력하고 있다. 정리하면, 배열이란 연관된 정보를 하나의 그룹으로 관리하기 위해서 사용한다. 그리고 그 정보를 처리 할 때는 반복문을 이용한다.

배열의 제어

배열은 복수의 데이터를 효율적으로 관리, 전달하기 위한 목적으로 고안된 데이터 타입이다. 따라서 데이터의 추가/수정/삭제와 같은 일을 편리하게 할 수 있도록 돕는 다양한 기능을 가지고 있다. 몇가지 중요한 기능들만 살펴보자.

배열의 크기

아래와 같은 방법으로 배열의 크기를 알아낼 수 있다. 결과는 5이다.

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

배열의 조작

추가

다음은 배열의 끝에 원소를 추가하는 방법이다. 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);

댓글

댓글 본문
작성자
비밀번호
  1. ㅁㅁㅁ
    document.write에서
    get_members[0]이 아니라
    get_members()[0]이 맞는거 같습니다~
    예제에서는 get_members()를 변수로 지정해두었으니
    members[0]으로 표현이 가능한거구요
    대화보기
    • document.write(get_members()[2]);
      이렇게 한번 해보세요~
      대화보기
      • function get_members() {
        return ['aaa','bbb','ccc']; }
        document.write(get_members[0]);
        document.write(get_members[1]);
        document.write(get_members[2]);

        이런 코드를 작성했을때 결과값이 undefined 가 나오는건 왜그런지 궁금합니당..
      • 감사합니다~~!!
      • 완료!
        완료! 감사합니다~
      • pudungsam@gmail.com
        자바스크립트에서 배열변수명으로 name을 못쓰나요? name으로 쓰는경우 배열변수명[인덱스번호] 했을경우 따옴표 쉼표와 관계없이 한문자 한문자를 인덱스가 가르켜서요.. 변수명을 바꾸니 정상적으로 인덱스값을 가져오네요
      • 솔군
        2016.10.07 강의 시청
      • yusin162534@gmail.com
        봤어요
      • 고맙습니다.
      • 취준생1
        감사합니다!
      • yihsang
        감사합니다.
      • Rhys Jung
        오 이렇게 심오한 뜻이 있는거였군요...
        중복되어있는 var 지정을 보고 궁금했었는데
        이해가 쏘옥 되었네요 감사합니다.
        대화보기
        • 카스테라는없다
          세상에...자바스크립트는 배열이 곧 스택이고 기본 함수도 이미 정의되어 있다니... C입문자는 웁니다... ㅠㅜ
        • JustStudy
          고맙습니다
        • Byeong Koo Kang
          오 좋은 정보 감사합니다!!
        • 호세마리아구토
          와.. 자료구조인 배열리스트의 삽입, 삭제와 정렬을 이렇게나 쉽게 구현할 수 있다니
        • 박도현
          같다는 이 아니고 대입이라는 의미겠지요
          대화보기
          • 삼십대학생
            znxnsken@daum.net님의 댓글에 대한 답글입니다~

            2. function numbers(){
            return['asd','asss','aaaaa'];
            }
            var num=numbers;
            alert(num[0]);
            alert(num[1]);
            alert(num[2]);
            이 코드에서 왜 굳이 numbers[0]이렇게 출력하지 않고 다시 num이라는 변수에 배열을 만들어서 출력하는지 알고 싶습니다. 감사합니다.

            ---------------------- (답변) 하하, 저도 똑같은 질문을 웹계발자에게 했답니다. 이유는, numbers[0] 이렇게 출력을 하게되면, 컴퓨터가 다시 function에 들어가서 numbers[0]이 뭔지 계산&과정을 거친후에 출력을 해줘야되기 때문에 (변수를 사용하는것보다 상대적으로) 시간도 많이 걸리고 메모리도 많이 잡아먹습니다. 하지만 님의 예제에서처럼 "var num=numbers;"을 쓰게되면 컴퓨터는 계산할 필요없이 "num = ['asd','asss','aaaaa']"이라는 데이터만 딱 가지고 있는 상태에서 index가 0인 데이터만 뽑아내는 것이므로 컴퓨터 입장에서는 시간, 에너지 소모가 적은것이죠. :) 도움이 되셨길 바랍니다.
            대화보기
            • adslbna2@naver.com
              1. document.write는 창에 결과를 찍는거라 생각하시면 될거같구요
              alert는 경고창처럼 메시지박스를 띄워서 결과를 그창에 보여주는겁니다.

              2. numbers는 함수명입니다. 함수명에 배열처럼[] 를붙이시면 안되세요
              var = numbers 로 하시면 안되고 numbers(); 로하셔야 됩니다.
              이예제는 함수의 반환값을 받는거라서 numbers()의할당을 받아 사용하셔야 될거에요

              즐거운 코딩되세요 ~~
              대화보기
              • znxnsken@daum.net
                1. document.write와 alert이 차이점이 무엇인가요?? 혼동되서 여쭈어 봅니다.
                2.function numbers(){
                return['asd','asss','aaaaa'];
                }
                var num=numbers;
                alert(num[0]);
                alert(num[1]);
                alert(num[2]);
                이 코드에서 왜 굳이 numbers[0]이렇게 출력하지 않고 다시 num이라는 변수에 배열을 만들어서 출력하는지 알고 싶습니다. 감사합니다.
              • 이웃집토토로
                // var 붙이고 안붙이고 차이 : 변수를 로컬로 인지하냐 글로벌로 인지하냐 차이
                http://stackoverflow.com......-it

                // name을 변수명으로 하고 legnth를 구했는데 안나오는 이유
                name이라는 변수가 기본적으로 정의되어 있어서 그렇습니다.
                참고로 프로그래머들이 가장 어려워하는 것이 변수이름짓기라고 합니다.
              • 이웃집토토로
                li가 배열을 나타내는 것이 아니라 [ ]형식으로 변수를 정의하는게 array 라서 그렇습니다...
                대화보기
                • What you are seeing is a global variable that is part of the window object. This is actually a value the browser uses that reflects the name of the window. (see documentation)

                  Since window.name is a string getter/setter, your array is being cast to a string. (and the console operates in the "global scope", so var name and window.name are the same value. (if you were nested inside a function, this same behavior would not apply because it wouldn't be the global scope anymore)
                  ////// link bleow //////
                  http://stackoverflow.com......ngs
                  대화보기
                  • kong'st
                    이젠 조금식 어려워 지네요....ㅎㅎ
                  • Doubke D"
                    저엄저엄 어려워진다아아아~
                  • 쿠마모토
                    에라이 시프트
                  • jade
                    name
                    "aa,bb,cc,dd,ee"
                    na
                    ["aa", "bb", "cc", "dd", "ee"]

                    구글 개발자 도구로 확인해보면 이렇게 나오네요
                    확실치 않지만 name이란 변수는 자바스크립트에서 이미 사용하는 element(요소)라 임의로 선언하는 사용자 변수와는 다르게 입력받는 것 같습니다. 따라서 name 같이 id나 claas, tag 같은 단어는 사용자 변수로 사용하지 않는게 좋겠네요, 버그를 불러올 수도 있으니..
                    좀더 아시는 분은 보충해주셨으면 좋겠네요..
                    대화보기
                    • 즐라탄
                      var a =['z','y','x'];
                      li = li.concat(a);
                      document.write(li+"<br/>")

                      꼭 배열에 추가할때는 배열로만 아니라 변수로도 추가할수 있네요 ㅋ
                    • 빗살무늬고백
                      변수안에 길이를 구할때
                      var name = ['aa','bb','cc','dd','ee'] 이런식으로 변수명을 name으로 해버리면 name.length 를 출력했을때 15가 나오고요
                      var na = ['aa','bb','cc','dd','ee'] 이런식으로 선언하면 다섯개가 제대로 나오는데 이건 왜그러는건가요??
                    • 이원배
                      문득 드는 생각으로 var를 명시 하지 않고 사용하면 global 로 스코프가 잡힌다고 들은것 같네요..
                    • 이용주
                      변수 맞습니다. 어전 강의를 쭉보면서 느낀건데 스크립트의 정석은 var을 붙이는게 맞습니다. 하지만 이런 부분을 쓰지 않을시 오류가 나는 부분은 아니기에 생략도 가능합니다.

                      예를들어 v=b 라면 v와 b가 같다는 뜻이지요.

                      var v=b 역시 같은 뜻입니다. 변수를 선언 할땐 무조건 적으로 var 을 적는게 정석이지만 적지 않아도 크게 문제가 없습니다 ㅋ
                      대화보기
                      • 조금 앞 강의 듣다 보면 var는 생략 가능하지만 쓰는 습관을 기르시는게 좋다는 내용이 있었습니다
                        대화보기
                        • 슈퍼코더
                          다음 강의 보시면 "객체" 나옵니다. 보시면 생각해보시면 답 나올듯요.
                          대화보기
                          • kush
                            늘 잘듣고있습니다.

                            질문이 하나 있는데요,
                            3/5강에서, 갑자기
                            members = get_members();
                            가 어떤 의미인지 궁금하네요...

                            get_members()는 함수일테고,
                            members 앞에 var이 숨어있는 것인지...
                          • YellowBall
                            잘 들었습니다.
                          • 머머
                            3/5
                            toUpperCase()함수로 인해 대문자로 결과가 출력되어야 하는데 소문자로 나와 있어요.

                            //반복문을 이용해서 배열 members의 내용을 하나씩 꺼낸 후에 이름의 첫글자를 대문자로 변경한 후에 출력하고 있다
                            라고 적혀있는데 전체문자가 대문자로 변경이 되어요.
                          • 석진
                            반복문 for 예제 에다가, members.concat(['12', '34']); 를 하면 , 적용이 안되는데요..어떻게 해야되죠?
                            구글 계발자 도구에다 members.concat(['12', '34']); 쓰면 적용이 되는데.
                            에디트 안에서 사용하면 적용이 안되여.
                          • 민팀장
                            아하..응용을 해야 하네요...li.sort().reverse();
                            그런데.. 궁금한것이..배열의 생성에서..
                            var member = ['egoing', 'k8805', 'sorialgi']
                            alert(member[0]);
                            alert(member[1]);
                            alert(member[2]); 일때...member 대신에 ker.dikdid,kdiod 등등 아무거나 막써도 되는데.. name만 쓰면
                            안되는건... name이란것이 어떤 의미로 정의 되어서 쓰면 안되는건가요?
                            대화보기
                            • hook
                              산만하게 흩어져 있던 단편적 script 지식의 조각들이 하나 둘 정리가 되는 느낌으로 열공중입니다.
                              좋은 기회를 만들어 주신 egoing 님께 감사드립니다.
                            • 강증산
                              물론 콘솔에서해보면 되는데 이클립스에서는 오류가 나는 이유가 궁금하네요 ㅠ
                            • 강증산
                              결과를 크롬 콘솔창에서 출력하시던데
                              저는 이클립스 다이나믹 웹프로젝트 html 파일 body태그
                              내에서 script 태그 주고똑같이 하는데 왜 404 에러가 나는걸까요..
                              그전 강의에서 메소드 주고 while 문으로 숫자 출력하는건 잘나오는데
                              배열들어가고부터 404 에러가 나네요 ㅠㅠ
                            • 엠제이
                              unshift...

                              shift가 왼쪽으로 이동하는거라 생각하면 이미지화하는데 도움이 될듯 합니다.
                              unshift는 오른쪽으로 기존 배열을 이동시키고, 제일 앞에 원소를 넣는거니깐요.
                            • 스님
                              감사합니다
                            • 우옹우옹
                              ㅜㅜ감사합니다
                            • 신지민
                              배열의 사용 파트 결과는
                              EGOING
                              K8805
                              SORIALGI
                              이렇게 나옵니다. 수정 바래요.
                            • 샤핀
                              감사합니다. 지금쯤 java 오프라인 강좌 열심히 가르치고 계시겠네요.
                              ^^ 화이팅!
                            • 나무마루
                              감사합니다
                            • Welfare23
                              wow! impressed and amazing tutorial. Thanks Egoing.
                            • 하이호웅
                              reverse()는 배열의 순서를 거꾸로 뒤집는 함수입니다.
                              역순정렬하시려면 위에 나온 두 함수를 활용해서
                              li.sort().reverse() 로 하시면 되겠네요
                              대화보기
                              • dawndream
                                자바스크립트의 객체는 결국 해쉬맵입니다.

                                http://blog.bsidesoft.com/?p=760

                                이쪽 글도 한번 참고해보세요~
                                대화보기
                                버전 관리
                                egoing
                                현재 버전
                                선택 버전
                                graphittie 자세히 보기