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. Jeon Young Ho
    잘 보고 있습니다
  3. 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
              봤어요
            • 고맙습니다.
            • 취준생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 라서 그렇습니다...
                      대화보기
                      • Bono
                        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"
                          저엄저엄 어려워진다아아아~
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기