Javascript 문법 요약 정리 (4편. 배열_array)

안녕하세요, 왕초보 코린이를 위한 코딩유치원에 오신 것을 환영합니다.

 

 

오늘 부터는 항상 다뤄오던 파이썬을 잠시 미뤄두고, 자바스크립트를 빠르게 공부해보려합니다. 빠른 시간 안에 최대한 핵심만 짚고 넘어가는 식으로 정리하였으며, 왕초보를 위한 Javascript 관련 글은 다음에 여유가 될 때 꼭 쓰도록 하겠습니다.

 

공부는 TCP스쿨의 JavaScript 글을 참고하여 진행하였으니, 세부적인 내용을 알고 싶으시면 TCP 스쿨을 참고해주세요.

 

 

2021.03.21 - [코딩 공부 사이트] - [코딩유치원] 파이썬 독학으로 공부할 때 유용한 사이트 5가지

 

 

<자바스크립트 관련 글>

 

2021.04.21 - [웹 개발/프론트앤드] - Javascript 문법 요약정리 (1편. 자료형과 기초 문법)

2021.04.22 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (2편. 연산자)

2021.04.23 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (3편. 제어문_if/switch/while/for 문)

 

---

배열의 기초

 

모든 프로그래밍 언어에는 배열 형식의 자료형이 있으며, 자바스크립트에도 역시 배열의 개념이 존재합니다.

 

배열(array)이란 이름과 인덱스로 참조되는 정렬된 값의 집합입니다. 

배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다.

 

*참고 (그냥 넘어가도 되는 부분)

자바스크립트에서는 배열이라는 타입(type)을 별도로 제공하지 않습니다.

자바스크립트 배열은 객체(object) 타입이 되며, typeof 연산자를 사용하면 'object'를 반환합니다.

 

배열의 특징

 

자바스크립트 배열은 아래와 같은 특징을 가집니다.

 

1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있습니다.

2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있습니다.

3. 자바스크립트에서 배열은 Array 객체로 다뤄집니다.

 

 

배열의 생성

 

배열의 생성방법은 3가지가 있습니다. 저는 개인적으로 파이썬의 리스트와 똑닮은 첫번째 방법이 마음에 드네요.

하지만 용도에 따라 다른 방법도 쓰이는 경우가 있으니 알아두면 좋을 것 같습니다.

 

// 1.배열 리터럴을 이용하는 방법
var arr = [배열요소1, 배열요소2,...];          

// 2.Array 객체의 생성자를 이용하는 방법
var arr = Array(배열요소1, 배열요소2,...);     

// 3.new 연산자를 이용한 Array 객체 생성 방법
var arr = new Array(배열요소1, 배열요소2,...); 

 

배열의 참조

 

배열의 각 요소를 참조하고 싶을 때는 배열이름[인덱스]와 같이 사용합니다. 첫번째 요소부터 [0],[1],[2] 순으로 참조 가능합니다.

 

빠른 이해를 위해 코드로 보겠습니다.

 

var arr = [2, "JavaScript"];

document.write(arr[0] + "<br>");  // 2를 출력
document.write(arr[1] + "<br>");  // JavaScript를 출력

 

요소 추가와 삭제

 

배열을 생성한 후에 요소를 추가하거나 삭제할 수 있습니다. 아래 코드를 보면서 알아보겠습니다.

 

var arr = [2, "JavaScript"];
// arr.length로 배열의 길이는 2인 것을 확인 가능

//요소 추가
arr[3] = "Hi"    // arr은 [2, "JavaScript", "Hi"]로 3개의 요소를 가지게 됨

//요소 삭제
delete arr[0];  // arr은 [,"JavaScript", "Hi"]인 상태. 완전히 제거가 아닌 빈공간을 만드는 느낌
                // arr.length로 길이를 확인해보면 3이 나옴.

 

위의 delete 예제 코드에서 처럼, 인덱스에 대응하는 배열 요소가 없는 부분을 배열의 홀(hole)이라고 합니다.

자바스크립트에서는 이러한 배열의 홀(hole)을 undefined 값을 가지는 요소처럼 취급합니다.

 

따라서 위의 예제에서처럼 배열의 홀을 참조하게 되면 undefined 값을 반환하게 됩니다.

 

arr[10] = "바로10으로 배열 만들어버리기!";    //0~9 인덱스의 요소는 모두 홀(hole) 상태!

document.write(arr + "<br>"); // ,,,,,,,,,,바로10으로 배열 만들어버리기!

document.write(arr[0]);       // undefined

 

for문과 배열

 

for문으로 배열의 모든 요소에 차례대로 접근하고 싶을 때는 아래와 같이 하시면 됩니다.

 

arr = [1,2,3,4,5]

for (var i in arr) {

document.write(arr[i] + " ");

}


<결과>
>> 1 2 3 4 5

 

---

 

배열의 응용

 

다차원 배열

 

지금까지 배웠던 배열은 1차원 배열입니다. 2차원 배열과 3차원 배열은 for문을 이용해 1차원 배열들을 중첩함으로써 만들 수 있습니다.

 

var arr = new Array(3);      // 3개의 요소를 가지는 배열을 생성함.

for (var row = 0; row < 3; row++) {

    arr[row] = new Array(4); // 각각의 요소마다 또다시 4개의 요소를 가지는 배열을 생성함.

    for (var column = 0; column < 4; column++) {

        arr[row][column] = "[" + row + "," + column + "]"; // 각각의 배열 요소를 생성함.

        document.write(arr[row][column] + " ");            // 각 배열 요소에 접근함.

    }

}

 

 

연관 배열

 

지금껏 배운 숫자로 된 인덱스 대신에 문자열로 된 키(key)를 사용하는 배열을 연관 배열(associative array)이라고 합니다. 마치 파이썬의 딕셔너리와 같다고 생각하시면 됩니다. 다만 연관 배열은 엄밀히 말하면 배열(Array 클래스)이 아닌 기본 객체로 Array 관련 함수를 사용할 수 가 없다고 합니다. 쉽게 말해서 야매(?) 배열이라고 생각하시면 됩니다.

 

var arr = [];     // 비어있는 배열 생성

arr["Key"] = "Value";

arr["아무 문자열"] = 3;

 

최근에는 새로운 데이터 구조인 Map 객체를 별도로 제공하고 있다고 하는데 일단 넘어가도록 하겠습니다.

 

---

이번 시간에는 자바스크립트의 배열에 대해 간단히 알아보았습니다. 다음 시간에는 자바스크립트의 함수는 어떻게 사용하는지 공부해보겠습니다.