예제로 배우는 자바스크립트 요약 및 코드 분석 9장 9.1 ~ 9.2

9장 배열

  배열은 다수의 값을 하나의 변수에 저장하는 특별한 변수이다. 자바스크립트에서 배열은 Array 객체에 기반한다. 9장에서는 배열을 생성한 다음 요소 값에 접근하는 방법에 대해 배운다. 또한 배열의 요소를 변환하고 요소를 추가 삭제하는 방법, 배열 요소를 추출하고 검색하는 방법, 배열을 병합하고 정렬하는 방법 등에 대해 알아보자. 마지막으로 2차원 배열을 생성하고 다루는 방법에 대해서 학습하자.

 

9.1 배열이란?

  배열(array)은 다음과 같이 여러 값을 하나의 변수에 저장할 수 있게 해주는 특별한 변수이다. 자바스크립트에서 배열은 Array 객체를 기반으로 한다.

const scores = [85, 97, 78, 88, 92];

위에서와 같이 배열은 대괄호([])로 요소들을 감싸고 콤마(,)로 요소들을 구분해서 사용한다. 배열 scores는 85, 97, 78, 88, 92 다섯 개의 요소로 구성된다.

 

9.1.1 배열의 생성

  다음 예제에서는 배열을 생성하고 배열의 요소를 읽어온다.

예제 9-1.배열의 생성 예 1

array1.html

코드 원문

<p id="show"></p>
<script>
    const fruits = ["사과", "딸기", "참외"];
    let text = "";
    text += fruits + "<br>";
    text += "";
    text += fruits + "<br>";
    text += fruits[0] + "<br>";
    text += fruits[1] + "<br>";
    text += fruits[2];
    document.getElementById("show").innerHTML = text;
</script>

예제 9-1.배열의 생성 예 1

array1.html

코드 분석

<p id="show"></p>
<script>
    const fruits = ["사과", "딸기", "참외"];
    // 문자열 배열 fruits를 생성하고 문자열 ["사과", "딸기", "참외"] 저장
    let text = "";
    text += fruits + "<br>";
    text += "";
    text += fruits + "<br>";
    text += fruits[0] + "<br>";
    text += fruits[1] + "<br>";
    text += fruits[2];
    document.getElementById("show").innerHTML = text;
</script>

배열의 인덱스는 배열 요소를 나타낸다. 위 코드에서는 fruits[0]은 "사과", fruits[1]은 "딸기", fruits[2]은 "참외"이다.

 

배열을 생성하는 또 다른 방법은 다음 코드에서와 같이 Array() 메서드와 new 연산자를 이용하는 것이다.

예제 9-2. 배열의 생성 예 2

array2.html

코드 원문

<p id="show"></p>
<script>
    const fruits = new Array("오렌지", "사과", "딸기", "참외");
    document.getElementById("show").innerHTML = fruits;
</script>

예제 9-2. 배열의 생성 예 2

array2.html

코드 분석

<p id="show"></p>
<script>
    const fruits = new Array("오렌지", "사과", "딸기", "참외");
    // Array 메서드를 사용해서 배열 fruits 생성
    document.getElementById("show").innerHTML = fruits;
</script>

 

9.1.2 배열 요소 값의 변경

  다음 예에서와 같이 배열의 인덱스로 접근해서 요소에 값을 저장하면 요소 값이 변경된다.

예제 9-3. 배열 요소 값의 변경

array3.html

코드 원문

<p id="show"></p>
<script>
    const fruits = ["사과", "딸기", "참외"];
    fruits[0] = "수박";

    document.getElementById("show").innerHTML =fruits;
</script>

예제 9-3. 배열 요소 값의 변경

array3.html

코드 원문

<p id="show"></p>
<script>
    const fruits = ["사과", "딸기", "참외"];
    // 배열 fruits 선언 값으로 ["사과", "딸기", "참외"]를 넣는다.
    fruits[0] = "수박";

    document.getElementById("show").innerHTML =fruits;
</script>

 

9.1.3 배열과 객체의 차이

  자바스크립트에서 배열은 객체를 기반으로 하고 있다. 따라서 배열과 객체는 유사한 점이 많지만 차이점도 존재한다. 다음 예제를 통해서 디 둘 간의 공통점과 차이점에 대해서 알아보자.

예제 9-4. 배열과 객체의 차이

array_objetc.html

코드 원문

<p id="show"></p>
<script>
    const member1 = ["홍길동", "010-1234-5678", 30];    // 배열
    const member2 = {name : "홍길동", phone: "010-1234-5678", age : 30};    객체

    let text = "";
    text += typeof member1 + "<br>";
    text += typeof member2 + "<br>";
    text += member1[0] + "<br>";
    text += member2.name;               // member2["name"]도 사용 가능
    document.getElementById("show").innerHTML = text;
</script>

예제 9-4. 배열과 객체의 차이

array_objetc.html

코드 원문

<p id="show"></p>
<script>
    const member1 = ["홍길동", "010-1234-5678", 30];    // 배열
    const member2 = {name : "홍길동", phone: "010-1234-5678", age : 30};    객체

    let text = "";
    text += typeof member1 + "<br>";
    // typeof 연산자로 member1의 타입을 표시한다.
    text += typeof member2 + "<br>";
    // typeof 연산자로 member2의 타입을 표시한다.
    text += member1[0] + "<br>";
    text += member2.name;               // member2["name"]도 사용 가능
    document.getElementById("show").innerHTML = text;
</script>

 

9.1.4 배열 요소 반복 읽기

  다음 예제에서는 배열의 요소를 반복해서 읽기 위해 For 문을 사용한다. 배열이 For 문과 같은 반복문과 같이 사용되면 다수의 데이터를 쉽게 처리할 수 있다.

예제 9-5. 배열 요소를 반복해서 읽기

array_for.html

코드 원문

<p id="show"></p>
<script>
    const fruits = ["사과", "딸기", "참외"];
    let text = "<ul>";
    for (let i=0; i<fruits.length; i++) {
        text += "<li>" + fruits[i] + "</li>";
    }
    test += "</ul>";
    document.getElementById("show").innerHTML = text;
</script>

예제 9-5. 배열 요소를 반복해서 읽기

array_for.html

코드 원문

<p id="show"></p>
<script>
    const fruits = ["사과", "딸기", "참외"];
    // 배열 const fruits 선언 값으로 ["사과", "딸기", "참외"를 넣는다.
    let text = "<ul>";
    // 리스트를 정의하는 <ul> 태그를 변수 text에 저장한다.
    for (let i=0; i<fruits.length; i++) {
        text += "<li>" + fruits[i] + "</li>";
        /* 리스트의 목록를 의미하는 <li> 태그를 사용한다. fruits[i]
        변수로 배열 fruits의 요소를 출력한다. */
    }
    test += "</ul>";
    document.getElementById("show").innerHTML = text;
</script>

 

9.2 배열 요소 변환/추가/삭제

  앞에서 설명한 것과 같이 자바스크립트에서 배열은 Array 객체에 기반하고 있다. 따라서 Array 객체의 매서드를 이용하면 배열을 쉽게 다룰 수 있다.

  Array 객체에서 배열의 요소를 문자열로 변환하고 배열에 새로운 요소를 추가하고 삭제하는 데는 join(), push(), pop(), shift(), splice() 메서드 등이 사용된다.

 

9.2.1 join() 메서드

join() 메서드는 배열을 문자열로 변환하는 데 사용된다. 다음 예제를 통해서 join() 메서드의 사용법에 대해 알아보자.

예제 9-6. join() 메서드 사용 예

array_join.html

코드 원문

<p id="show"></p>
<script>
    const animals = ["사자", "호랑이", "사슴", "펭귄"];
    let str1 = animals.join();
    let str2 = animals.join("/");

    let text = "";
    text += str1 + "<br>";
    text += str2;
    document.getElementById("show").innerHTML = text;

</script>

예제 9-6. join() 메서드 사용 예

array_join.html

코드 분석

<p id="show"></p>
<script>
    const animals = ["사자", "호랑이", "사슴", "펭귄"];
    let str1 = animals.join();
    /* join() 메서드를 사용해서 배열을 문자열로 변환한다.
    배열 animals의 요소들이 콤마(,)로 구분한 문자열로 변환한다. */
    let str2 = animals.join("/");
    /* join() 메서드를 사용해서 배열을 문자열로 변환한다.
    배열 animals의 요소들이 /로 구분한 문자열로 변환한다. */

    let text = "";
    text += str1 + "<br>";
    text += str2;
    document.getElementById("show").innerHTML = text;

</script>

 

9.2.2 push() 메서드

push() 메서드는 배열의 끝에 새로운 요소를 추가하는데 사용된다.

예제 9-7. push() 메서드 사용 예

array_push.html

코드 원문

<p id="show"></p>
<script>
    const animals = ["사자", "호랑이", "사슴", "펭귄"];
    let x = animals.push("이구아나");

    let text = "";
    text += animals + "<br>";
    text += "- 반환값: " + x;
    document.getElementById("show").innerHTML = text;
</script>

예제 9-7. push() 메서드 사용 예

array_push.html

코드 분석

<p id="show"></p>
<script>
    const animals = ["사자", "호랑이", "사슴", "펭귄"];
    /* 배열 animals 선언 값으로 ["사자", "호랑이", "사슴", "펭귄"]를 넣는다. */
    let x = animals.push("이구아나");
    // 배열 animals에 값 "이구아나"를 추가한다.

    let text = "";
    text += animals + "<br>";
    text += "- 반환값: " + x;
    document.getElementById("show").innerHTML = text;
</script>

animals.push("이구아나")는 배열 animals의 끝에 '이구아나'를 새로운 요소로 추가한다. push 메서드의 반환 값은 배열의 길이이다. 변수 x는 배열 animals의 길이인 5 값이다.

 

9.2.3 pop() 메서드

pop() 메서드는 배열에 새로운 요소를 추가하는 push() 메서드와는 반대로 요소를 삭제하는데 사용된다.

예제 9-8. pop() 메서드 사용 예

array_pop.html

코드 원문

<p id="show"></p>
<script>
    const animals = ["사자", "호랑이", "사슴", "펭귄"];
    let arr = animals.pop();

    let text = "";
    text += animals + "<br>";
    text += "- 반환값: " + arr;
    document.getElementById("show").innerHTML = text; 
</script>

예제 9-8. pop() 메서드 사용 예

array_pop.html

코드 원문

<p id="show"></p>
<script>
    const animals = ["사자", "호랑이", "사슴", "펭귄"];
    let arr = animals.pop();
    /* pop() 메서드를 사용해서 배열 animals 마지막 요소인 '펭귄'을 삭제한다.
    삭제한 요소 '펭귄'은 배열 arr에 저장된다.*/

    let text = "";
    text += animals + "<br>";
    text += "- 반환값: " + arr;
    document.getElementById("show").innerHTML = text; 
</script>

 

9.2.4 shift() 메서드

  shift() 메서드는 배열의 끝 요소를 삭제하는 pop()와는 달리 배열의 첫 요소를 삭제하는 데 사용된다. shift() 메서드의 사용법은 pop() 메서드와 거의 동일한다.

예제 9-9. shift() 메서드 사용 예

array_shift.html

코드 원문

<p id="show"></p>
<script>
    const animals = ["사자", "호랑이", "사슴", "펭귄"];
    let arr = animals.shift();

    let text = "";
    text += animals + "<br>";
    text += "- 반환값: " + arr;
    document.getElementById("show").innerHTML = text;

</script>

예제 9-9. shift() 메서드 사용 예

array_shift.html

코드 원문

<p id="show"></p>
<script>
    const animals = ["사자", "호랑이", "사슴", "펭귄"];
    let arr = animals.shift();
    /* shift() 메서드를 사용해서 배열의 첫 요소를 삭제한다.
    반환값을 변수 arr에 저장한다. */

    let text = "";
    text += animals + "<br>";
    text += "- 반환값: " + arr;
    document.getElementById("show").innerHTML = text;

</script>

 

9.2.5 splice() 메서드

  splice() 메서드는 배열에 요소를 추가하거나 삭제할 때 사용된다.

예제 9-10. splice() 메서드 사용 예

array_splice.html

코드 원문

<p id="show"></p>
<script>
    const name = ["사자", "호랑이", "사슴", "펭귄", "여우", "앵무새"];

    let text = "";
    let arr;
    arr = animals.splice(2, 3, "개구리");
    text += animals + "<br>";
    text += "-반환값: " + arr + "<br>";

    arr = animals.splice(1, 0, "토끼");
    text += animals + "<br>";
    text += "- 반환값: " + arr + "<br>";

    arr = animals.splice(3, 1);
    text += animals + "<br>";
    text += "- 반환값: " + arr + "<br>";
    document.getElementById("show").innerHTML = text;
</script>

예제 9-10. splice() 메서드 사용 예

array_splice.html

코드 분석

<p id="show"></p>
<script>
    const name = ["사자", "호랑이", "사슴", "펭귄", "여우", "앵무새"];

    let text = "";
    let arr;
    arr = animals.splice(2, 3, "개구리");
    /* 메서드 splice()를 사용해서 배열의 인덱스 2부터 3개의 요소를 삭제하고
    "개구리"를 삽입한다. */
    text += animals + "<br>";
    text += "-반환값: " + arr + "<br>";

    arr = animals.splice(1, 0, "토끼");
    /* 메서드 splice()를 사용해서 배열의 인덱스 1부터 0개의 요소를 삭제하고
    "토끼"를 삽입한다. */
    text += animals + "<br>";
    text += "- 반환값: " + arr + "<br>";

    arr = animals.splice(3, 1);
    // 메서드 splice()를 사용해서 배열의 인덱스 3부터 1개의 요소를 삭제한다.
    text += animals + "<br>";
    text += "- 반환값: " + arr + "<br>";
    document.getElementById("show").innerHTML = text;
</script>