이번시간에는 자바스크립트의 배열에 대해 알아볼까 합니다.
자바스크립트의 배열은 C나 java의 배열과 같은 기능을 하지만,
다른점은 크기를 지정하지 않아도 되고, 어떤 위치에 어느 타입의 데이터든 저장이 가능합니다.
그럼 이 배열에 대해 좀더 자세히 알아보겠습니다.
배열의 리터럴
리터럴은 쉽게말해 표기법입니다.
객체를 생성할 때 리터럴이 중괄호({})였다면,
배열은 대괄호([])를 사용합니다.
그럼 배열의 예제를 보며 설명을 해보겠습니다.
var arr = ['apple', 'orange', 'banana', 'strawberry', 'melon'];
console.log(arr[0]); // apple
console.log(arr[2]); // banana
console.log(arr[4]); // melon배열 리터럴로 5개 문자열로 이루어진 배열을 생성했습니다
객체 리터럴에서는 key, value 형식으로 key,value 모두 표기하고 key로 value에 접근했지만,
배열 리터럴에서는 value 만 포함하고 인덱스(숫자)로 value에 접근합니다.
그리고 이 인덱스는 0부터 시작합니다.
배열의 요소 생성
이전에 객체의 프로퍼티를 동적으로 생성했던것 처럼, 배열도 동적으로 원소를 추가할 수 있습니다.
그리고 자바스크립트의 배열은 순서대로 값을 넣을 필요없이, 아무 위치에나 값을 넣을 수 있습니다.
var arr = [];
arr[0] = 'apple';
arr[2] = 3;
arr[6] = false;
console.log(arr); // ['apple', undefined, 3, undefined, undefined, undefined, false]
console.log(arr.length); // 위의 예시에서 볼 수 있는 것은 배열에도 length 프로퍼티가 있다는것을 볼 수 있습니다.
하지만, 이 length가 실제로 값이 존재하는 것만 골라서 길이를 보여주는것이 아니라,
값이 정의되어있지 않은(undefined)까지 하나의 요소로 보고 전체의 길이를 반환합니다.
그리고 자바스크립트 배열의 또 특이한 점은 length 프로퍼티에 값을 대입하여 직접 길이를 조절할 수도 있습니다.
var arr = ['apple', 'banana'];
console.log(arr.length); // 2
arr.length = 5;
console.log(arr.length); // 5
console.log(arr); // ['apple', 'banana', undefined, undefined, undefined];
배열과 객체의 차이
지금까지 배열의 특징에 대해 살펴보았습니다.
살펴본 내용을 보면 객체처럼 프로퍼티도 존재하고, 직접 프로퍼티에 값을 대입해 조절도 가능했습니다.
그렇다면 배열과 객체는 어떤 차이가 있을까요?
우선 다음예제를 보며 알아보겠습니다.
var arr = ['apple', 'banana', 'melon'];
var obj = {
name : 'senbro',
age : 30,
addr : 'Seoul'
};
console.log(typeof arr); // object
console.log(typeof abj); // object
console.dir(arr); // 0: 'apple' 1: 'ba ........ [[Prototype]] : Array(0)
console.dir(obj); // addr: 'Seoul' age : ............ [[Prototype]] : Object
console.dir(arr.__proto__); // ........[Prototype]] : Object위 예제에서 보는것처럼 객체와 배열을 두고 비교해보았을때,
typeof 로 나온 결과는 객체와 배열 둘다 Object인것을 확인할 수 있습니다.
이말은 즉, 자바스크립트에서는 배열도 객체라는 것을 알 수 있습니다.
그렇다면 prototype은 어떨까요?
prototype은 배열은 Array, 객체는 Object가 나왔습니다.
여기서 의아할 수 있는데, 다시한번 Array를 console.dir로 살펴보면 prototype이 Object로 나온것을 볼 수 있습니다.
즉, 이것을 통해 알 수 있는것은
객체의 프로토타입(prototype)은 Object이고,
배열의 프로토타입은 Array, 그리고 Array의 프로토타입은 Object이런 구조라는것을 알 수 있습니다.
객체 -> Object
배열 -> Array -> Object
이 구조에 따라 객체는 Object가 가지고있는 프로퍼티, 메소드만을 사용할 수 있지만,
배열은 Object의 것들 뿐만아니라, Array객체의 프로퍼타, 메소드도 사용할 수 있습니다.
Array의 프로퍼티 및 메소드들
Object의 프로퍼티 및 메소드들
배열의 프로퍼티 및 메소드
이제까지 배열에 대해 알아보았습니다.
그럼 배열의 prototype인 Array의 프로퍼티 및 메소드들에 대해 몇가지만 살펴보겠습니다.
var arr = ['banana', 'melon', 'watermelon', 'strawberry', 'pear'];
console.log(arr.length); // 5
arr.push('apple');
console.log(arr); // ['banana', 'melon', 'watermelon', 'strawberry', 'pear', 'apple'];
console.log(arr.length); // 6
delete arr[1];
console.log(arr); // ['banana', 'watermelon', 'strawberry', 'pear', 'apple'];
console.log(arr.length); // 5
arr.push(1, 5); //[ 'apple', 'banana', 'pear', 'strawberry', 'watermelon' , 1 , 5]
arr.sort();
console.log(arr); // [1, 5, 'apple', 'banana', 'pear', 'strawberry', 'watermelon']
var arr1 = ['dog', 'cat', 'bear'];
arr.concat(arr1); // [1, 5, 'apple', 'banana', 'pear', 'strawberry', 'watermelon', 'dog', 'cat', 'bear']push
push 메소드는 배열의 객체를 동적으로 추가할 수 있습니다.
delete
delete를 이용해 index로 지정하여 삭제할 수 있습니다.
sort
sort를 이용해 숫자는 작은수에서 큰수로, 문자는 ㄱ에서 ㅎ 혹은 a 에서 z순서대로 자동 정렬됩니다.
여러가지가 섞여있는경우 '숫자', '영대문자', '영소문자', '한글' 순으로 정렬됩니다.
concat
concat은 2개의 배열을 하나로 합쳐주는 메소드입니다.
concat을 새로운 배열 객체에 대입하면 합쳐진 배열을 새로운 배열객체를 사용해 다룰 수 있게 됩니다.
이 외에도 다양한 메소드 및 프로퍼티가 있지만
여기서는 제가 자주 사용했던 위 메소드 정도만 정리해보았습니다.
항상 지적과 충고는 언제든환영입니다.
