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. 이병학
    다양한 배열 함수를 가지고 있네요.
    감사합니다.
  3. 수복
    이번에도 유익한 강의 잘 들었습니다.
  4. GoldPenguin
    완료했습니다.
  5. 이성준
    잘봣씁니다/.
  6. 개발공부
    new Array('a','b','c')는 생성자함수 Array를 통해 매개변수로 a, b, c,라는 인자를 전달한 것입니다
    앞에 list = 하고 있죠? 이 생성자 함수 Array를 통해 배열이 하나 만들어지게 되고,
    이 배열은 list라는 변수에 담겨지게 됩니다.
    즉, 생성자함수를 통해, ['a', 'b', 'c'] 라는 배열을 만들고, 이를 list라는 변수에 할당한 것입니다.
    --> list = ['a', 'b', 'c']
    생성자함수를 통한 배열생성과 동시에 변수 할당을 동시에 선언해준 것이죠.

    *new 라는 연산자뒤에 대문자로 시작하는 단어를 받는 것은 보통 '생성자함수; 라고 생각하시면 되요.
    생성자함수는 ( ) 사이에 오는 매개변수를 인자로 가져 객체를 생성하는 함수로서
    Array이면 배열을, Object면 객체를 생성해주는 함수입니다.
    사용자가 직접 만들어서 사용도 가능하지만
    위와 같은 예는 자바스크립트가 이미 가지고 있는 빌트인 생성자 함수예요.
    대화보기
    • 은하수
      강의 잘들었습니다. 감사합니다
    • 전선길
      친절한 설명 감사드립니다!
      이제야 이해가 되네요!
      대화보기
      • 아기너굴
        배열 = array 맞습니다. 같은 말입니다.

        [ 'a', 'b', 'c', 'd', 'e' ]의 엘리먼트 하나하나를 변수로 표현하기가 힘들기 때문에 [ ](대괄호)라는 그릇 한 군데에 담아서 사용하고 이것을 배열(array)이라고 하는 것입니다.==>라고 이고잉님이 말씀하신 것은 이해하셨죠?

        해서 [ 'a', 'b', 'c', 'd', 'e' ]이것 자체를 배열이라고 하는 것이 아니고 [ ] 에 담아서 나타내는 것을 배열이라고 하구요. [ 'a', 'b', 'c', 'd', 'e' ] 이 것 자체는 배열의 한 예시일 뿐입니다. 뭐 안에 '사과', '고구마', '감자' 이런 것이 들어가도 되는 것이지요. (알고계신걸 짚었다면 죄송합니다..)

        말씀하신 list = new Array( ); 이 것은 배열을 만드는 또 다른 방식?이라고 해야하나...
        뭔가 확실하게 알려드릴 단어가 떠오르지를 않는데 아무튼 일단 배열을 만드는 또 다른 방식 정도로 이해하시면 될 것 같아요.
        완전히 똑같지는 않습니다. 밑에 링크 들어가셔서 예제 보시면 이해가 쉬우실 거에요.
        https://stackoverflow.com......-ar

        객체에서도 { }(중괄호)로 객체를 만드는데 var 변수 = new Object(); 이렇게 만드는 방식도 있거든요.
        일단 저는 이것과 비슷한 것일거라고 이해했습니다.

        혹시 다른 분께서 더 보충해서 자세히 알려주시면 좋겠네요
        대화보기
        • 전선길
          [ 'a', 'b', 'c', 'd', 'e' ];가 배열이라고 방금전에 배웠습니다.
          그렇다면 "웹 어플리케이션 만들기"에서 배웠던 array는 어떤건가요?
          웹어플리케이션 만들기에서는 array를 배열이라고 배웠다고 전 기억합니다.
          또한 그때는 list = new Array( 'a', 'b', 'c' );라고 배웠고 이때, 대괄호가 아닌 소괄호를 사용하였습니다.
          제가 잘못 이해를 하거나 잘못 들은것인가요? array와 [ 'a', 'b', 'c' ]; 의 차이를 알려주세요.
        • Jeong Min Lee
          강의 잘 봤습니다. 감사합니다. ^^
        • 감사합니다.
          日日新又日新~!!
        • 아이노바
          가슴으로 말합니다. 너무 감사합니다.
        • 20170906 수강완료
        • 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 가 나오는건 왜그런지 궁금합니당..
                        • hoho
                          감사합니다~~!!
                        • 완료!
                          완료! 감사합니다~
                        • pudungsam@gmail.com
                          자바스크립트에서 배열변수명으로 name을 못쓰나요? name으로 쓰는경우 배열변수명[인덱스번호] 했을경우 따옴표 쉼표와 관계없이 한문자 한문자를 인덱스가 가르켜서요.. 변수명을 바꾸니 정상적으로 인덱스값을 가져오네요
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기