자바스크립트 - 배열(Array)

배열(Array)

자바스크립트에서 배열은 다음과 같이 단일 변수에 여러개의 값을 저장할 때 사용합니다.

var fruit = ["Apple", "Melon", "Banana"];

 

배열은 한 번에 둘 이상의 값을 가질 수 있는 특수한 변수로서 많은 양의  값을 하나의 변수에 저장할 수 있고 인덱스를

바탕으로 배열에 저장된 값들에 접근할 수 있습니다. 

 

 

배열을 만들기

배열을 만들때는 다음과 같은 구조로 코드를 작성합니다.

var array_name = [item1, item2, ...];

객체를 정의할 때와 마찬가지로 공백과 줄바꿈은 크게 중요하지 않으며 코드의 가독성을 높이기 위해 다음과 같이

작성해도 무방합니다.

var array_name = [
    item1,
    item2,
    item3
];

또한 다음과 같이 new 키워드를 사용해서 배열을 생성하는 것도 가능합니다.

var fruit = new Array("Apple", "Banana", "Melon");

하지만 코드의 단순함과 실행속도를 위해서 new 키워드를 사용한 배열생성은 권장되지 않습니다.

그래서 아직 값을 갖지 않는 빈 배열을 선언하는 경우 new 키워드를 사용하지 말고 다음과 같이 선언할 것을 권장합니다.

var myArray = new Array();     // 권장하지 않음
var myArray = [];              // 권장

 

 

전체 배열에 접근하기

자바스크립트에서는 다음과 같이 배열 이름을 참조하여 전체 배열에 접근할 수 있습니다.

var fruit = ["Apple", "Banana", "Melon"];
document.getElementById("demo").innerHTML = fruit;

 

 

배열과 객체

배열의 특별한 유형의 객체에 해당합니다. 실제로 typeof 연산자는 배열에 대해서 "object"를 반환합니다.

일반적인 객체는 멤버요소에 접근하기 위해서 속성의 이름을 사용합니다. 하지만 배열의 경우 인덱스를 사용하여

멤버에 접근합니다. 그렇기 때문에 객체이지만 배열을 조금 특별한 유형의 객체로 분류하는 것입니다.

 

그래서 배열과 객체의 차이점을 정리해보면 다음과 같습니다.

항목	특징(구분되는 차이점)
배열(Array)	멤버에 접근할 때 숫자로된 인덱스를 사용
객체(Object)	멤버에 접근할 때 속성명(명명된 인덱스)을 사용

배열과 객체의 사용시기 부분

배열과 객체의 사용시기는 위에서의 배열과 객체의 차이점을 바탕으로 생각해보면 쉽게 생각해낼 수 있습니다.

저장해야하는 멤버에 별도의 속성명(이름)을 부여해야하는 경우 객체를 사용하면 되고

저장해야하는 멤버에 굳이 이름을 부여할 필요없이 숫자로 된 인덱스만 부여해도 충분하다면 배열을 사용하면 됩니다.

 

배열과 객체를 프로그램에서 구분하는 방법

배열과 객체의 차이점을 우리는 이해할 수 있지만 프로그램상에서는 배열에도 typeof 연산자를 사용하면 object를

반환하기 때문에 typeof 연산자로 배열과 객체를 구분할 수 없습니다.

그래서 이러한 문제를 해결하기 위해서 다음 3가지 방법을 사용할 수 있습니다.

Array.isArray(fruits);   // fruit가 배열인 경우 true를 반환

하지만 이 방법은 ECMAScript5를 지원하지 않는 브라우져에서는 사용할 수 없습니다. 

 

function isArray(x) {
  return x.constructor.toString().indexOf("Array") > -1;
}

직접 isArray 함수를 만들어서 사용합니다. 인자가 배열인 경우 위의 함수는 항상 true를 반환하게 됩니다.

(함수를 구성하는 내부 코드는 아직 이해하기 보다는 이러한 방법이 있다는 느낌으로 보고 넘어가도록 하겠습니다. )

 

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array;   // returns true

instanceof 속성을 사용하는 방법입니다. instanceof 는 왼쪽에 주어진 객체가 오른쪽에 주어진 생성자로 생성된 것이라면 true를

반환합니다. (코드와 이 내용을 함께 읽어보면 이해가 될 것입니다.)

 

 

배열의 요소와 객체

배열은 서로 다른 유형의 변수를 하나의 배열에 가질 수 있습니다. 

실제로 배열은 아래와 같이 멤버로 객체, 함수, 배열과 같은 객체들을 가질 수 있습니다.

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

 

 

배열의 속성(Properties)과 메소드(method)

자바스크립트에서 배열은 함께 사용할 수 있는 유용한 속성과 메소드가 많다는 장점이 있습니다.

메소드 or 속성	내용
toString()	배열을 쉼표로 구분된 배열 값의 문자열로 반환
join(separator)	모든 배열요소를 문자열로 결합하여 문자열로 반환 인자를 통해서 구분자(Separator)를 지정하는 것 또한 가능함 (인자로 값을 주지 않으면 toString과 동일하게 처리함)
push(member)	인자로 전달한 값을 배열의 끝에 새로운 요소로 추가함 (추가함과 동시에 새로운 배열의 길이을 반환함)
pop()	배열의 마지막 요소를 제거함 (제거함과 동시에 제거한 마지막 요소값을 반환함)
shift()	배열의 첫번째 요소를 제거하고 나머지 요소의 인덱스를 앞으로 당김 (제거함과 동시에 제거한 첫번째 요소의 값을 반환함)
unshift(member)	인자로 전달받은 값을 배열의 처음에 새로운 요소로 추가함 (추가하면서 나머지 요소들의 인덱스를 하나씩 뒤로 밀어줌)
length	배열에 저장된 요소의 수를 반환
delete	피연산자로 전달하는 배열의 특정요소를 삭제함 (삭제한 부분은 undefined가 됨) (대신 pop() 또는 shift() 사용할 것을 권장)
splice(index, count, member1, member2)	index - 새 요소를 추가(접합)할 위치 count - 제거해야하는 요소의 수 member1, member2 - 새롭게 추가할 요소(2개 이상도 가능) (index로 지정한 위치의 앞에 새로운 요소가 추가됨) (index로 지정한 위치부터 count만큼의 요소를 제거함)
concat(array_name...)	기존 배열을 연결하여 새로운 배열을 생성 (인자로 전달한 배열을 기존 배열의 뒤에 연결한 새로운 배열생성) (기존의 배열은 변경하지 않음) (인자를 여러개 전달함으로서 많은 수의 배열은 한번에 연결가능) (문자열을 인수로 사용하는 것도 가능 - push()와 같은 효과)
slice(index) slice(index1, index2)	배열의 일부를 새로운 배열로 잘라냄 (원래 배열은 변경하지 않고 새로운 배열을 생성함) (인자가 하나만 주어진 경우 해당 인덱스부터 끝까지 잘라냄) (인자가 두 개 주어진 경우 시작 인덱스부터 마지막 이전 인덱스까지 배열의 내용을 잘라냄)

다음과 같이 splice()를 사용하여 요소를 제거할 수 있습니다.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);   // 배열의 첫번째 요소를 삭제함

 

자바스크립트에서는 기본값이 예상되는 경우 배열을 쉼표로 구분된 문자열로 자동변환 합니다.

(또한 모든 자바스크립트의 객체에 대해서는 toString() 메소드가 존재합니다.)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

다음 위의 두 코드는 서로 같은 결과를 나타냅니다.