#7. Array ( 배열 )
여러 개의 데이터를 담을 수 있는 창고, Array (배열)
먼저 "사과" 가 담겨있는 변수를 선언해 보겠습니다.
var apple = "사과";
만약 3개의 과일이 담겨있는 변수를 만들고자 한다면 아래처럼 3개의 변수를 생성해야 합니다.
var apple = "사과";
var banana = "바나나";
var orange = "orange";
그럼 50, 100, 1000개의 과일을 담고자 한다면 어떻게 해야 할까요? 위 방법대로 한다면 데이터에 비례해서 생성되는 변수의 개수 또한 증가하기 때문에 50, 100, 1000 개의 변수가 필요하게 됩니다. 이처럼 한 개의 변수에 하나의 데이터 값만 할당했을 때는 코드가 길어져 특정 데이터를 찾기도 힘들고, 너무 많은 변수로 인해서 가독성이 떨어진다는 단점이 있습니다.
하지만 Array 를 사용하면 비슷한 성격의 데이터를 하나의 변수에 묶어서 관리할 수 있기 때문에 특정 데이터를 쉽게 찾을 수 있으며, 가독성이 좋아진다는 장점이 있습니다. 위 3가지 데이터는 과일이라고 하는 집합에 포함되는 요소이기 때문에 fruit 이라고 하는 변수 안에 Array 데이터 타입으로 할당시켜 보겠습니다.
var fruit = ["사과", "바나나", "오렌지"];
이전에는 3줄이였던 코드가 Array 를 사용함으로써 한 줄로 깔끔하게 정리되었습니다. Array 는 [] ( 대괄호 ) 로 감싸준 다음 그 안에 들어갈 데이터를 순서대로 넣어주면 됩니다. 각각의 데이터는 , ( 쉼표 ) 로 구분시켜 줍니다.
Array 안에 있는 데이터는 item, element, value 등 블로그나 서적마다 지칭하는 용어가 조금씩 다릅니다. 저는 Object 에서 사용되는 용어와 구분지어 주기 위해서 item 이라고 사용하겠습니다. 위 코드에서 fruit 의 item 은 "사과", "바나나", "오렌지" 를 의미합니다.
그럼 Array 안에 있는 item 에 접근하기 위해서는 어떻게 해야할까요? Array 는 0, 1, 2..... 순으로 item 을 담게 됩니다. 여기서 Array 의 순서를 나타내는 0, 1, 2 를 index ( 색인 ) 이라고 얘기합니다. 즉, index 를 사용하면 Array 안에 있는 특정 item 에 접근할 수 있습니다.
var fruit = ["사과", "바나나", "오렌지"];
변수명[접근하고자 하는 index]
fruit[0] // "사과" 출력
fruit[1] // "바나나" 출력
fruit[2] // "오렌지" 출력
Array 안에 첫 번째 데이터가 담겨있는 index 는 1이 아니라 0이라는 점에 주목해 주세요. 위 내용을 이미지화시키면 다음과 같습니다.
Array 안에 데이터를 변경해 보자!
Array 안에 있는 item 에 접근하는 방식을 사용하면 기존 데이터를 다른 데이터로 교체할 수 있습니다.
var fruit = ["사과", "바나나", "오렌지"];
fruit[0] = "포도";
물론 기존 Array 에 새로운 데이터를 추가하는 것도 가능합니다.
var fruit = ["사과", "바나나", "오렌지"];
fruit[3] = "수박";
아래 코드처럼 fruit[3], fruit[4] 데이터 값은 생략한 채 fruit[5] 데이터 값을 입력할 수 있습니다.
var fruit = ["사과", "바나나", "오렌지"];
fruit[5] = "수박";
이때 fruit[3], fruit[4] 의 데이터는 undefined 를 갖게 됩니다. 열차로 비유하자면 fruit 열차의 전체 칸은 유지를 하면서 값이 설정되지 않은 3번, 4번칸은 undefined 값을 취하게 됩니다.
Array 는 모든 데이터 타입을 품을 수 있다.
Array 는 Number, String, Array, Object, Function 등 자바스크립트의 모든 데이터 타입을 값으로 품을 수 있습니다.
var everything = [
10,
"inkwon",
["사과", "바나나", "오렌지"],
{"age" : 10},
function() {
console.log("Hello")
}
];
위 코드에서 ["사과", "바나나", "오렌지"] Array 안에 있는 사과에 접근하기 위해서는 어떻게 해야 할까요? 마찬가지로 [] 를 사용하면 Array 속에 있는 내부 Array 의 item 에 접근할 수 있습니다. 아래 코드처럼 everything[2] 를 입력하면 내부 Array 전체가 반환됩니다.
everything[2] // ["사과", "바나나", "오렌지"] 출력
그리고 everything[2][0] 을 입력하면 내부 Array 의 첫 번째 item 인 "사과" 가 반환됩니다.
everything[2][0]; // "사과" 출력
위 코드를 그림으로 표현하면 다음과 같습니다.
배열의 길이 확인
Array 안에 있는 전체 데이터의 수를 알고 싶다면 String 에서 사용했던 length propery 를 사용하면 됩니다.
var fruit = ["사과", "바나나", "오렌지"];
fruit.length;
여기서 Array 의 length 는 Array 의 마지막 index 보다 +1 많다는 점에 주목해 주세요. 만약 fruit 의 마지막 데이터 "오렌지" 에 접근하고 싶다면 다음 2가지 방법을 사용할 수 있습니다.
fruit[2];
fruit[fruit.length- 1]; // fruit.length = 3
Array 안에 있는 Item 의 index 정보 가져오기
Array 안에 있는 있는 데이터가 몇 번째 index에 있는지 확인하고 싶다면 indexOf method 를 사용하면 됩니다.
var fruit = ["사과", "바나나", "오렌지"];
fruit.indexOf("바나나");
Array 의 "바나나"는 fruit[1] 에 위치해 있기 때문에 indexOf("바나나") 는 결과값으로 1을 반환합니다. 만약 Array 에 없는 item 을 물어보면 -1 을 반환합니다.
var fruit = ["사과", "바나나", "오렌지"];
fruit.indexOf("수박");
지난주 세미나 발표 자료 준비때문에 Array 편 연재가 조금 늦어졌습니다. Array, Function, Object 는 앞서 설명드린 Number, String 데이터 타입과 다른 성격을 갖고 있기 때문에 Array 편부터는 집중해서 살펴봐 주세요. 다음 장에서는 JavaScript 뿐만 아니라 모든 개발 언어에서 중요하게 다루는 Function ( 함수 ) 에 대해 살펴보겠습니다.
