[Java Script]데이터 타입과 연산자 3 (배열)

1. 배열 선언 방법

(1) 요소의 값을 포함해서 선언하기

var arr = ['one', 'two', 'three'];

(2) 빈 배열 선언하기

var arr = [];

 

2. 배열의 요소 생성

- 자바 스크립트의 경우, 값을 순차적으로 넣을 필요 없이 아무 인덱스 위치에나 값을 동적으로 추가할 수 있음

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

3. 배열의 length 프로퍼티

- length는 실제 배열 내의 원소 개수와 일치하는 것이 아니라, 최대 인덱스 + 1이랑 일치한다

var emptyArr = [];
emptyArr[100] = 100;
console.log(emptyArr.length); //101

- 또한 length는 명시적으로 값을 변경할 수도 있다.

=> length 프로퍼티를 벗어나는 값은 삭제되고, 이 후 length를 늘려도 복구되지 않는다.

var arr = [0,1,2];
console.log(arr.length); //3

arr.length = 5;
console.log(arr); //[0,1,2,undefined*2]

arr.length = 2;
console.log(arr); //[0,1]

arr.length = 3;
console.log(arr); //[0,1,undefined]

- 자바스크립트의 표준 배열 메소드는 length 프로퍼티를 기반으로 동작한다

=> push() 메소드의 경우 배열의 현재 length 값의 위치에 새로운 원소값을 추가하는 것과 동일하다

=> length 프로퍼티는 배열 메소드의 동작에 영향을 줄 수 있으므로 굉장히 중요하다!!

 

4. 배열과 객체의 차이점

- 배열 또한 객체이다. 하지만 일반 객체와 약간의 차이점이 있다.

//배열
var arr = ['orange', 'yellow', 'red'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

//객체
var obj = {
    '0' : 'orange',
    '1' : 'yellow',
    '2' : 'red'
}
console.log(obj[0]);
console.log(obj[1]);
console.log(obj[2]);
/*
왜 '0'이 아니라 0인데 되는거지?
=> 숫자가 오면 자동으로 문자열로 변환해줌
*/

//type of 비교
console.log(typeof arr); //object
console.log(typeof obj); //object

//length 프로퍼티
console.log(arr.length); //3
console.log(obj.length); //undefined
//일반 객체는 length 프로퍼티를 가지고 있지 않다 => 따라서 undefined

//배열 표준 메소드
arr.push('blue');
obj.push('blue'); //error 발생
/*
일반 객체의 경우 Object.prototype 객체가 프로토타입이다 
=> 따라서 배열 표준 메소드 사용 불가

하지만, 배열의 경우 Object.prototype를 프로토타입으로 갖는 Array.prototype 객체가 프로토타입이다 
=> 따라서 배열 표준 메소드와 Object.prototype의 표준 메소드 모두 사용 가능
*/

 

5. 배열의 프로퍼티 동적 생성

- 배열도 객체이므로 인덱스가 숫자인 배열 원소 외에도 동적으로 프로퍼티를 추가할 수 있다

- 다만 숫자인 배열 원소가 증가할 때만 length 값도 증가하게 된다

var arr = ['zero', 'one', 'two'];
console.log(arr.length); //3

arr.color = "red";
arr.name = "number array"
console.log(arr.length); //3

arr[3] = "blue";
console.log(arr.length) //4

console.log(arr); //[ 'zero', 'one', 'two', 'blue', color: 'red', name: 'number array' ]

 

6. 배열과 for문의 활용

- 배열 또한 객체이므로 for in 문을 사용할 수 있다.

- 파이썬과 비슷하게 사용할 수 있다.

for (var prop in arr){
    console.log(prop,":", arr[prop]);
}
/*
0 : zero
1 : one
2 : two
3 : blue
color : red
name : number array
*/

 

7. 배열 요소 삭제

- delete 문으로 삭제를 할 수 있는데, 이 때 인덱스가 앞으로 당겨지는 것이 아니라, 그 부분이 undefined가 된다.

var arr = ['zero', 'one', 'two'];

delete arr[1];
console.log(arr); //['zero',undefined,'two'];

- undefined가 아니라 아예 삭제하기 위해서는 splice() 배열 메소드를 사용하자.

var arr = ['zero', 'one', 'two', 'three'];
arr.splice(2,1); //2번째 요소를 시작점으로 한 개의 원소를 삭제한다.
console.log(arr); //[ 'zero', 'one', 'three' ]

 

8. Array() 생성자 함수를 이용한 배열 생성

- 위에서 사용한 배열 리터럴 방법으로 배열을 생성하는 것도 결국 Array() 생성자 함수로 배열을 생성하는 과정을 단순화 한 것이다.

- Array() 생성자 함수는 인수의 개수에 따라서 동작이 다르다.

=> 1개이고 숫자인 경우 : 호출된 인자를 length로 갖는 빈 배열 생성

=> 그 외의 경우 : 호출된 인자를 요소로 갖는 배열 생성

var arr1 = new Array(3);
console.log(arr1); //[undefined*3]
console.log(arr1.length);//3

var arr2 = new Array(1,2,3);
console.log(arr2); //[1,2,3]
console.log(arr2.length); //3

 

9. 유사 배열 객체(array-like objects)

- 유사 배열 객체 : length라는 프로퍼티가 있는 일반 객체

- 유사 배열 객체의 경우 배열이 아니므로 push() 메소드를 호출하면 에러가 발생한다.

=> apply() 메소드를 사용하면 표준배열 메소드를 활용하는 것이 가능하다

var obj = {name : 'foo', length : 1};

//obj.push('baz'); //error 발생

Array.prototype.push.apply(obj,['baz']);
console.log(obj); //{ '1': 'baz', name: 'foo', length: 2 }