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. 아이노바
    가슴으로 말합니다. 너무 감사합니다.
  2. galia
    20170906 수강완료
  3. Dong Il Kim
    별말씀을요.. ^^;;;
    대화보기
    • 신시내티
      Thank you Dong ll! It was a huge help.
      Method is belong to its object and needs the object to be active. Build-in Function doesn't need an object, because the function is the object itself.

      Thanks again. It's very nice of you! ^^
      대화보기
      • Dong Il Kim
        http://insanehong.kr......ct/

        여기 글을 보시면 궁금증이 해결 되실듯하네요.
        대화보기
        • 신시내티
          내장함수와 method는 무슨 차이인지 궁금합니다!
        • nevertoolate
          음식할 때 재료에 대해 잘 알아야 여러가지 음식에 제대로 된 맛을 내기 위해
          적절한 재료를 넣을 수 있는 것 처럼,
          여러가지 function 기능에 대해서도 알아야 적절히 쓸 수 있을 것 같네요.
          기억 다 못해도 어떤 것이 있다는 것 정도는 알아야 할 것 같습니다.
        • 클라아악
          감사합니다.
        • Jeon Young Ho
          잘 보고 있습니다
        • Eunsim Kang
          그러게요. 저도 의문이였는데요.
          대화보기
          • Seo Yun Seok Tudoistube
            이제 점점 오르막이 시작되는거 같습니다. 감사합니다^_____^!!!
          • sssjunn
            감사합니다.
          • Sk Shin
            감사합니다. ^^
          • 장석규
            2017/06/05 완료
          • Gangso Lee
            done_감사합니다.
          • 고베베
            실습을 배제하고 이론적으로만 우선 정리 완료!!
            실습까지 생각하면 복잡해져서 전체가 눈에 안들어와서 우선 이론 정리를 하는 것도 좋은 방법인 거 같아요!!
          • 이리ㄴr
            깜언 람
          • 서다연
            감사합니다~
          • 김소희
            잘봤습니다!
          • 최규선
            20170420 수강완료
          • kimkong
            감사합니다!!
          • 이승우
            20170330완료
          • SangHyeok Kim
            2017/03/24 수강완료
          • 김세창
            잘배워갑니다
          • var members = function get_members() {
            return ['aaa','bbb','ccc']; }
            document.write(members[0]);
            document.write(members[1]);

            -> 함수 get_members 를 members 라는 변수에 넣는다.
            즉 members 는 함수 get_members 와 같다는말이지, 그 함수를 실행한것은 아니라는 의미입니다

            따라서
            document.write(members[0]); = document.write(get_members[0]);
            라는 의미이므로 함수 실행이 안됐습니다.
            따라서 우리가 기대하는 aaa bbb도 출력되지 않을것이구요

            document.write(members()[0]); ( = document.write(get_members()[0]); )
            라고 함수실행을 해 주시면 정상 출력됩니다.



            두번째에는

            var members = get_members();
            라고 함수실행까지 members 라는 변수에 넣어주셨기때문에 정상 출력이 되는것이구요

            첫번째 코드는 var members = get_members;
            라고 한거랑 같다고 보시면될 것 같습니다.

            저도 배우는입장이라 틀린점이 있을수도 있으니 양해부탁드려요
            대화보기
            • Ho-nam Yu
              첫번째 코드는 문법적 오류라 실행이 안됩니다.
              문법에 맞게 쓴다면

              var members = function () {
              return ['aaa','bbb','ccc']; }

              이게 되겠죠. 이 문법은
              members 라는 변수안에 오른쪽에 있는 함수를 저장한다는 뜻입니다.
              그래서 변수를 호출하면 함수가 실행이 되는거죠.

              두 번째 문법도

              function get_members() {
              return ['aaa','bbb','ccc']; }
              var members = get_members();

              members 라는 변수안에 get_members라는 함수를 저장한거죠.

              위에 코드는 이름이 없는 함수를 저장한거고
              아래 코드는 get_members라는 함수를 저장했다고 보시면 될 거 같네요.
              대화보기
              • Dongster
                var members = function get_members() {
                return ['aaa','bbb','ccc']; }
                document.write(members[0]);
                document.write(members[1]);

                여기서는 get_members() 호출을 하질 않으며 members에 리턴되는 값도 없습니다.
                그래서 members[0], [1]이 undefined로 출력 됩니다.

                function get_members() {
                return ['aaa','bbb','ccc']; }
                var members = get_members();
                document.write(members[0]);
                document.write(members[1]);
                여기서는 get_members();로 함수를 호출하여 return된 값을 members 변수에다가 집어넣기 때문에 members가 값을 가진 상태이므로 값이 출력이 됩니다.
              • 이교혁
                var members = function get_members() {
                return ['aaa','bbb','ccc']; }
                document.write(members[0]);
                document.write(members[1]);



                function get_members() {
                return ['aaa','bbb','ccc']; }
                var members = get_members();
                document.write(members[0]);
                document.write(members[1]);

                는 무슨 차이인가요 첫번째 로직은 실행이 안되네요
              • 권영목
                li.splic(2,1) >> li[2]가 삭제됨 즉 splic는 중간에 추가도 되지만 중간부분 삭제도 됨
              • 임지호
                배열 : 여러개의 데이터를 담기 위한 그릇의 역할
                - 하나하나의 데이터를 원소라 하고 그것을 식별하는 식별자를 주로 인덱스라 칭한다.(0부터 순서대로 자동매김)
                - 배열.length : 배열의 크기 출력
                .push : 배열 끝에 원소 추가
                .concat : 여러개 원소 추가
                .unshift : 배열 처음에 원소 추가
                .splice : 중간에 추가
                .shift : 첫 번째 원소 제거
                .pop : 맨 뒤 원소 제거
                .sort : 정렬(사용자가 정의한 기준으로도 정렬 가능)
                .reverse : 역순정렬
              • 열려라참깨
                .toUpperCase() 인데 결과값은 소문자로 나와있네요.
              • 코드 자체는 의미가 없습니다만,
                var a = [(function(){return 1}),(function(){return 2})]
                var a = [function(){return 1},function(){return 2}]
                둘다 입력이 되는데요. 이런 익명함수를 list에 넣으면 원래 괄호에 넣는게 맞는 건가요?
              • ㅁㅁㅁ
                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
                    봤어요
                  • hyuna
                    고맙습니다.
                  • 취준생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인 데이터만 뽑아내는 것이므로 컴퓨터 입장에서는 시간, 에너지 소모가 적은것이죠. :) 도움이 되셨길 바랍니다.
                        대화보기
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기