생활코딩

Coding Everybody

코스 전체목록

닫기

배열

배열

배열(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. splice 메쏘드에서 두번째 인자값 howmany가 필수로 되어있는데 생략하면 앞에 기입한 인덱스 이후로 전체 인덱스 선택인 것 같은데 그러면 필수가아니라 옵셔널 아닌가요??

    예) var numbers = [0,1,2,3,4,5,6,7,8,9]
    numbers.splice(2);
    결과 : numbers = [0,1]
  4. a[2], 즉 a배열의 3번째 원소부터 2개 원소를 삭제하고 그 자리에 'x'가 들어갑니다.

    예) a = [1,2,3,4];
    a.splice(2,2,'x');
    console.log(a) // [1,2'x'];

    [배열].splice() 는 원하는 위치에서 삭제를 할 수도 있고, 추가를 할 수도 있습니다.
    삭제 -> a.splice(0,1) // a[0]부터 1개 원소 삭제
    추가 -> a.splice(0,0,'z') // a[0]에 'z'원소 추가하고 원래 있던 원소의 인덱스는 1씩 증가.(원소 삭제 없음)

    [배열].unshift(), [배열].shift()는 배열의 첫번째에서만 추가, 삭제 가능
    [배열].push(), [배열].pop()는 배열의 끝부분에서만 추가, 삭제 가능

    헷갈릴 수 있는데 몇 번 사용해보시면 이해가 되실 거에요~!
    대화보기
    • a.splice(인덱스번호, 얼마나, 원소)
      이라면

      a.splice(2, 1, 'x');
      -> a[2]에 있는 원소 1개를 지우고 x를 넣는다
      라고 설명하셧느데

      a.splice(2, 2, 'x');
      는 어떻게 되나요?
      howmany 얼마나 아규먼트부분에는 0,1 만 들어가는건가요?
    • cse7600
      180829_다녀가다.
    • 감사합니다.
    • gkb5786
      배열의 사용에서 '.toUpperCase()'를 사용해서 모두 대문자로 나왔는데 설명글에는 소문자로 되어있네요. 가능하다면 수정이 필요할 듯합니다.
    • warluck
      li.push('c') 은 추가된 array가 아닌 array.length를 return 하기 때문에 그렇습니다.
      대화보기
      • li.push는 li에 원소를 추가해주는 함수이지만 그 반환값이 li의 길이를 반환하는가봐요
        대화보기
        • 자바 스크립트 기본 함수를 사용할때마다 나오는 출력값은 구글 개발자도구 고유 기능이 아니라 함수의 출력값이 있을 경우 자동으로 출력해주는 그런건가 보네요~ 이래서 함수는 많이 써봐야 아는구나... 난 여태까지 배열 관련 함수들에 출력값이 있는줄도 모르고 써왔다니...
        • 감사합니다 .splice 가 좀헷갈리네요 ㅠㅠ 이야기 하신것처럼 복습이 필요할듯 싶네요 ㅠㅠ 저는
        • 제플린
          제가 push에다 그냥 복수의 원소를 넣어봤는데 concat 처럼 복수로 추가되서 혹시나 해서 unshift로도

          해봤는데 들어가버리네요 강의 예제를 토대로 했습니다. 이게 크롬에서만 그러는건지 아니면

          이 강의 동영상 시점으로 부터 시간이 흘러 현재 문법이 바뀐건지 궁금하네요

          그냥 문법 무시하고 그냥 써도 되는걸까요?

          그리고 이고잉님 이런 고급 강의들을 무료로 기부 해주셔서 너무나 감사합니다!!!!
        • 공부하자
          var li = ['a','b'];
          li.push('c');
          alert(li); /*결과값 a,b,c*/



          var li = ['a','b'];
          li = li.push('c');
          alert(li); /*결과값 3*/

          li.push('c');;이거랑
          li=li.push('c'); 이거 차이를 알고싶어요~

          제 지식으로는 같은말 같은데 ㅠㅠ 결과값이 다르네요.
        • 대왕왕눈이
          대한민국의 모든이가 프로그로밍을 할 수 있는 이런 강의 너무 감사합니다.
        • 행인
          get_members는 배열이 아니고, 함수 입니다.


          get_members[0] 는.. 굳이 문법 적으로 표현하자면..
          get_members의 배열의 0번지의 값인데..

          get_members자체는 배열이 아니라 함수이기때문에 [0], [1] 이런식의 접근을 막습니다.

          그리고.. 변수 members로 변환 한게아니고.

          get_members의 함수 리턴 값을
          members에 담은 것입니다.

          함수 부분을 조금더 공부 하시면 이해 되실거에용
          대화보기
          • 시작이 반이다!
          • 2번째 강의가 잘 이해되지 않습니다

            변수 members를 사용하지않고

            document.write(get_members[0]); 이걸사용하면 왜 실행이 안되나요

            그리고 굳이 왜 변수 members로 변환해줘야 되는지 논리적인 이유를 알고 싶습니다
          • 올리브
            20180413
          • 배열의 사용 결과값이 대문자여야되는데 소문자로 나와있네요
          • mook_frontdv
            수업 잘듣고갑니다 ^^
          • 안장호
            감사합니다~! ^^
          • 없습니다 오히려 안됩니다.
            대화보기
            • 듀티프리
              좋아요. 감사합니다.
            • 학생
              변수.shift(); 와 변수.pop();등등 에서 ()사이 공간에 값을 추가하면 변하는게 있나요?
              호기심에 물어봅니다
            • ㅇㅈㅅ
              get_members() 우리가 정의한 함수입니다. 함수는 '선언'한다기보다는 '정의'한다라는 표현이 더 적합할 듯합니다. 통용되긴하지만요
              var members = get_members(); 는 변수를 선언함과 동시에 이항연산을 이용하여 변수에 바로 값을 저장시켜주는 문장입니다. 이항연산은 우변에서 좌변 순서로 실행 되기 때문에, 이 때 members라는 변수에는 함수 get_members()의 반환값(=return)이 저장되게 됩니다. 해당 함수의 반환값은 배열입니다.
              그렇기 때문에 members라는 변수는 배열로서 선언된 것입니다.

              js를 아직 실습해보진않았지만, get_members.length라는 표현은 부적합한것같습니다. 원하시던 게 배열의 길이를 알고자하셨던것이라면 배열로서 선언했던 membes에 대해 써줘야할듯한데요. 그러니까, get_members()라는 함수에 대해서가 아닌 members.length를 해주셔야해요
              통상적으로 프로그래밍에서 함수는 '함수명()'로서 불러주는것이 약속입니다.
              document_write()함수에 대해 인자로서 함수를 전달하는것이기때문에 document.write(get_members()); 가 올바른 표기법입니다.
              저 문장을 실행할경우 get_members()함수의 반환값을 인풋값으로 가지고가서 document.write() 함수가 실행되게되는건데요,

              아마 님께서 원하셨던건 document.write(members[i]); 문장을 통해서 선언해 두었던 배열, members의 모든 인덱스를 출력하고싶었던게 아닌가 싶습니다..
              맞으시다면 루프를 생성하여 제어변수 i에 대한 증감식으로 해당 배열의 길이만큼 반복하여 인덱스 출력하시면 됩니다.

              1. 네 fuction name()은 함수정의할 때 쓰이는 키워드입니다. var name은 변수 선언 시 사용되는 키워드입니다. 엄연히 다릅니다.
              2. 네 리턴값으로 배열을 넘기기 때문에 가능합니다
              3. 함수에 대해 한번 더 공부해보시는것이 좋을것같습니다.
              대화보기
              • 선언을 했다고 생각했는데 다시 선언을 했다고요?
                근데 객체가 3개라는 말이 전혀 나오지 않고..
                함수 내용을 포함해서 전체 코드를 보여주세요

                님이 작성 하신 코드를 보여주시고 어떤 결과를 원했는지 말해주세요
                대화보기
                • 정승필
                  확인이 될지는 모르겠지만 궁금한점이 있어 댓글 답니다.

                  '배열의 사용'에서 get_members()를 선언을 했다고 생각했는데
                  (var) members = get_members(); 로 다시 선언을 했습니다.

                  물론 저는 그냥 되겠지라는 생각에 get_mebers.length 를 사용하여 console.log 도 사용해보고 alert 를 사용하여 확인을 해봤지만 객체가 3개다라는 말이 전혀 나오지 않더군요.
                  물론 그 밑의 document.write(get_members[]); 역시 나오지 않구요.

                  1. function name() 와 var name() 는 다르게 작용이 되기떄문에 그런건가요
                  2. function name() 안에 return 이 들어가 있기때문에 그런건가요 ?
                  3. 그것도 아니라 function name() 자체만으로는 그렇게 사용이 불가능한건가요 ?

                  답변 꼭 좀 부탁드립니다.
                • 단이
                  -
                • 호홋
                  toUpperCase() 에 대한 결과값 대문자로 수정해주세용
                • 김진홍
                  감사합니다~~
                • 박인호
                  12-07
                  수강완료.
                • 이민규
                  감사합니다 :)
                • 고스트프리
                  감사합니다.
                • 이병학
                  다양한 배열 함수를 가지고 있네요.
                  감사합니다.
                • 수복
                  이번에도 유익한 강의 잘 들었습니다.
                • GoldPenguin
                  완료했습니다.
                • 이성준
                  잘봣씁니다/.
                • 개발공부
                  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
                        강의 잘 봤습니다. 감사합니다. ^^
                      • 감사합니다.
                        日日新又日新~!!
                      • 아이노바
                        가슴으로 말합니다. 너무 감사합니다.
                      • galia
                        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/

                            여기 글을 보시면 궁금증이 해결 되실듯하네요.
                            대화보기
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기