웹 프로그램

코스 전체목록

닫기

배열

배열

배열(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. labis98
    20210819 good!!!
  4. 2021.7.26 완
  5. 낭만고양이
    수강완료
  6. 06/19 복습 완료
    다음은 처음에 뭔지 1도 몰랐던 객체네요...
  7. 드림보이
    수강완료했습니다...
  8. pop()으로 삭제를 했을 때 arr배열내에 'h','i'요소 두개가 삭제가 되는데 왜 그런걸까요?
    소스는 아래와 같습니다.

    <!DOCTYPE html>
    <html lang="ko">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <script>
    var arr =['a','b','c','d'];
    arr.push('f','g');
    document.write(arr + '<br />');
    document.write('<br />');

    document.write('concat h와 i 추가 결과' + '<br />');
    arr= arr.concat(["h","i"] + '<br />');
    document.write(arr);
    document.write('<br />');

    document.write('unshift로 z 추가 결과' + '<br />');
    arr.unshift('z');
    document.write(arr + '<br />');

    document.write('splice로 e를 d뒤에 추가 결과' + '<br />');
    arr.splice(5,0,'e');
    document.write(arr + '<br />');

    document.write('shift로 arr배열의 첫번째요소인 z를 삭제한 결과' + '<br />');
    arr.shift();
    document.write(arr + '<br />');

    document.write('pop으로 arr배열의 마지막요소인 i를 삭제한 결과' + '<br />');
    var popped = arr.pop();
    document.write(arr + '<br />');
    document.write('<br />');
    document.write('pop으로 arr배열에서 삭제된 요소 반환값 왜 두개가 삭제되나요?' + '<br />');
    document.write(popped);

    </script>
    </body>
    </html>
  9. GelandeWagen
    210604 ok
  10. 김재민
    잘보고 감니다
  11. Amousk
    좋은 강의 감사합니다.
  12. coding_prince
    감사합니다.
  13. 감사합니다!!!
  14. 이해는 되는데 어렵네요. 고맙습니다.
  15. 앙냥냥
    2021.03.25 봤숩니당 배열을 왜 쓰는지 알 수 있어서 좋았어용
  16. Asanagi
    2021. 03. 15 완료!
  17. 진돌
    2021. 03. 05 완료!
  18. 정재진
    완료
  19. gf0308
    감사합니다
  20. 주니어개발자
    중요 부분~
  21. 홍주호
    21.1.2
  22. 열심히
    2020.12.18 완료
  23. 정상에 오르자가자고고
    완료
  24. 20202.12.21
  25. LEGEND
    마다마다 다이죠부!!
  26. 201209
  27. psyless
    20201130
  28. 홍안선생
    11/17 완료
  29. 박병진
    감사합니다. 10.19 완료
  30. 당근조아
    201016 완료.
  31. 코딩지니어스
    201010 완료
  32. 20201007 완료
  33. Yongbeom Kwon
    200911 완료
  34. Yongbeom Kwon
    배열의 사용 할 차례
  35. anne
    완료
  36. switpotato
    20200814 완료
  37. 김준석
    20.07.26. 학습완료
  38. 지니
    200714완료
  39. 준식
    20200606 진행중
  40. bomnie
    push 맨 뒤에 추가
    unshift 맨 앞에 추가
    concat 배열 데이터를 맨 뒤에서부터 추가 (단, 새로운 변수에 넣어주어야 함)
    splice n번째 인덱스 부터 n개의 인덱스까지 삭제 후 새로운 데이터 추가
    shift 맨 앞 삭제
    pop 맨 뒤 삭제
    sort 오름차순(응용해서 쓰는 방법은 JS사전 참고!)
    reverse 내림차순
  41. ironia
    잘들었습니다.
  42. Useok
  43. 김효일
    어떠한 연산에 의해서 배열의 값이 정해진다면(동적) 함수로 정의해야만 하지 않을까요?
    대화보기
    • 매일하나씩
      시작
    • Noah_kim
      완료.
    • 뿡뿡팡야
      완료
    • dlrjdld님에 대한 대답
      상황에 따라서 둘 다 쓰일 수 있다고 생각해요.

      1. 함수 안에 배열이 들어 갈 수 있는 경우
      -> 함수 안에서 배열을 만들고, 배열에 대한 여러가지 처리 들( 계산, 삽입, 삭제, 수정)을 완전히 다 거친 후에 어떤 하나의 완성된 배열을 리턴 받고자 할 때, 즉 단순히 배열을 만드는 것 뿐 아니라 다양한 로직들이 곁들여진 배열을 리턴받고 싶을 때

      2. 본문에 배열이 들어 갈 수 있는 경우
      -> 복잡한 로직이 필요없이 단순한 용도로 배열을 사용할 경우

      제가 든 2가지 경우는 모든 상황을 대표하지는 않습니다. 다만 이런 2가지 경우를 생각해볼 수 있겠다 정도만 생각하면 될 것 같습니다.

      아는 만큼 더 많은 경우의 수가 보이고 앞서 2가지 경우가 아니라 4가지 5가지로 늘어날 수 있는게 공부라고 생각해요~!~!
      대화보기
      • dlrjdld
        질문, 도와주세요 ㅠㅠ<script>
        function loop(){
        return ["one","two","three","four"];
        }
        var loop2 = loop();
        document.write('<li><a href="">'+loop2[0]+'</a></li>');
        document.write('<li><a href="">'+loop2[1]+'</a></li>');
        document.write('<li><a href="">'+loop2[2]+'</a></li>');
        document.write('<li><a href="">'+loop2[0]+'</a></li>');

        ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ vsㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

        var loop3 = ["1","2","3"]
        document.write('<li><a href="">'+loop3[0]+'</a></li>');
        document.write('<li><a href="">'+loop3[1]+'</a></li>');
        document.write('<li><a href="">'+loop3[2]+'</a></li>');
        </script>


        // 함수안에 배열을 집어넣는 거랑 그냥 배열로 쓰는 거랑 차이는 무엇인가요?
        굳이 값이 같은데 함수안에 배열 넣어서 따로 변수를 또 설정해야 해야만 하는 상황이 오나요?
      • 타나
        정렬함수를 직접 만들어 적용할 수 있다는 점이 신박하네요 ㅎㅎ
      • Jess
        20.02.08 완료
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기