[JAVASCRIPT] 데이터타입-배열

배열

자바스크립트의 배열은 객체의 특별한 형태다.

자바와 C언어와 달리 크기를 따로 지정하지 않아도 되며, 어떤 위치에 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않는다.

 

배열 리터럴

자바스크립트에서 새로운 배열을 만드는 사용하는 표기법

객체 리터럴은 { } 중괄호를 사용했다면 배열 리터럴은 [ ] 대괄호를 사용한다.

객체 리터럴에서는 프로퍼티 이름과 값을 모두 표기했지만, 배열 리터럴에서는 각 요소의 값만 포함한다.

//배열 리터럴을 통한 5개 원소를 가진 배열 생성
var colorArr = ['orange','yellow','blue','green','red'];
console.log(colorArr[0]);//orange
console.log(colorArr[1]);//yellow
console.log(colorArr[2]);//blue

 

배열의 요소 생성

자바스크립트의 배열은 동적으로 배열 원소를 추가할 수 있다.

값을 순차적으로 넣을 필요없이 아무 인덱스 위치에나 값을 추가할 수 있다.

배열의 크기는 현재 배열의 인덱스 중 가장 큰 값을 기준으로 정해진다.

빈 배열의 길이는 undefined 이다.

할당되지 않은 인덱스의 값은 undefined 값이 출력된다.

var emptyArr=[];
console.log(emptyArr[0]); // undefined
 
//배열 요소 동적 생성
emptyArr[0] = 100;
emptyArr[3] = 'eight';
emptyArr[7] = true;
console.log(emptyArr);// [100, undefined*2, "eight", undefined*3, true]
console.log(emptyArr.length);//8

배열의 length 프로퍼티

자바스크립트의 모든 배열은 length 프로퍼티가 있다. 

배열의 length 프로퍼티는 배열내 가장 큰 인덱스에 1을 더한 값이다.

또한 length 프로퍼티는 코드를 통해 명시적으로 값을 변경 할수 있다.

명시적 변경으로 줄어든 실제 값들은 삭제된다.

//배열 length 프로퍼티의 명시적 변경
var arr =[1,2,3];
console.log(arr.length);//3
 
arr.length=5;
console.log(arr)//[1,2,3, undefined*2 ]
 
arr.length=2;
console.log(arr)//[1,2]
console.log(arr[2])//undefined
 

자바 스크립트는 배열에서 사용가능한 표준 메소드를 지원한다.

이 메소드들은 length 프로퍼티를 기반으로 작동된다.

그 예시로 push() 메서드가 있다.

push() 메소드는 배열 현재 length 값의 위치에 새로운 원소값을 추가한다.

//arr 배열 생성
var arr = ['zero','one','two'];
 
//push() 메소드 호출
arr.push('three');
console.log(arr);//['zero','one','two','three']
 
//length 값 변경 후, push()호출
arr.length = 5 ;
arr.push('four');
console.log(arr);//['zero','one','two','three', undefined, 'four']

배열과 객체의 유사점과 차이점

자바스크립트에서는 배열의 형태와 유사하게 객체 리터럴 방식으로 객체를 생성할 수 있다.

여기에는 배열과 객체의 유사점과 차이점이 있다.

먼저 유사점은

배열과 객체 둘다 출력시 배열[0] 객체[0] 형태로 생성되고 출력할 수 있다는 점이다.

그리고 배열과 객체 모두 typeof 연산 결과가 object로 나온다는 것이다.

 

하지만 차이점으로는

배열은 length 프로퍼티가 존재하지만 배열은 length 프로퍼티가 존재하지 않는다.

length 프로퍼티가 존재하지 않기때문에 배열 표준 메소드은 push()를 사용할 수 없다.

//colorArray 배열
var colorsArray = ['orange', 'yellow', 'green'];
 
//colorObj 객체
var colorObj = {
        '0' = 'orange';
        '1' = 'yellow';
        '2' = 'green';
}
console.log(colorObj[0]); //orange
console.log(colorObj[1]); //yellow
 
//typeof 연산 결과
console.log(typeof colorsArray); //object
console.log(typeof colorsObj);  //object
 
//length 프로퍼티
console.log(colorsArray.length); // 3
console.log(colorsObj.length); // undefined
 
//배열 표준 메소드
colorsArray.push('red'); //['orange', 'yellow', 'green','red']
colorsObj.push('red');// error : object has no method 'push;

배열의 프로토타입과 객체의 프로토타입

배열의 프로토 타입은 Array.prototype

객체의 프로토 타입은 Object.prototype

따라서 객체의 프로토타입에는 push() pop() 와 같은 배열 표준 메소드가 존재하지 않는다.