[InsideJavascript] 3. Array

인사이드 자바스크립트를 공부하며 정리하는 포스팅입니다.

배열(Array)

: 배열은 자바스크립트 객체의 특별한 형태다. C의 배열과 유사하지만 크기를 지정하지 않아도 되며, 어떠한 타입의 데이터를 저장하더라도 상관없다.

1. 배열 생성

배열의 생성은 두 가지 방법으로 할 수 있습니다.

일반적으로 배열 리터럴 방식으로 생성합니다.

1) 배열 리터럴

[] 대괄호 문법을 이용한 리터럴 방식으로 배열 생성

var str = 'test';
var colorArr = ['orange', 'yellow', blue];

2) 생성자 함수를 이용한 생성

호출할 때 인자가 1개이고, 숫자인 경우: 호출된 인자를 length로 갖는 빈 배열을 생성한다.

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

var colorArr = new Array(3);
colorArr.push('orange');
colorArr.push('yellow');
colorArr.push('blue');
//var colorArr = new Array('orange', 'yellow', 'blue');

2. length 프로퍼티

배열의 원소 개수를 나타낸다. 그러나 배열에 존재하는 실제 원소 개수와 일치하는 것은 아니다. 

배열 내에 가장 큰 인덱스에 1을 더한 값이다.

배열의 가장 큰 인덱스값이 변하면, length 값 또한 자동으로 그에 맞춰 변경된다.

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

배열의 length 프로퍼티는 명시적으로 값을 지정할 수도 있습니다.

만약 현재 배열의 length보다 큰 값을 지정한다면 현재 length Index 이후 값들은 undefined로 채워지게 됩니다.

length는 배열 표준 메서드에 영향을 미친다.

배열 표준 메서드인 push 메서드는 length값을 기준으로 수행됩니다. 

만약 length가 5라면 length는 마지막 Index + 1이므로 push 메서드의 수행결과로 새롭게 추가될 원소의 자리는 배열[length]가 되게됩니다.

length 프로퍼티는 이렇게 배열 표준 메서드에 영향을 미칠 수 있는 프로퍼티이므로 중요합니다.

이렇게 중요한 length 프로퍼티가 객체에 프로퍼티로 존재하면 어떻게될까요?

자바스크립트에서는 이렇게 length 프로퍼티를 가진 객체를 유사 배열 객체라고 부릅니다. 

* 배열에 동적으로 프로퍼티가 추가되어도 length는 증가하지 않는다. 배열의 length 프로퍼티는 오직 배열 원소의 가장 큰 인덱스가 변했을 경우만 변경된다.

3. 배열과 객체

자바스크립트에서는 배열 역시 객체입니다. 

객체와 배열의 typeof 값은 둘 다 Object로 동일합니다. 

그치만 분명히 배열과 객체는 다릅니다.

- length 프로퍼티의 존재 여부

- 배열 표준 메서드 존재 여부

이러한 차이점이 생기는 이유는 

객체의 경우 프로토타입으로 Object.prototype 객체를 갖고,

배열의 경우 프로토타입으로 Array.prototype 객체를 갖게되기 때문입니다.

length, 배열 표준 메서드는 Array.prototype 객체가 가지고 있는 프로퍼티입니다.

3. 배열의 프로퍼티 열거

배열을 객체와 같이 for in 문으로 프로퍼티를 열거하면 의도치 않은 동작이 수행될 수 있습니다.

var arr = ['a', 'b' , 'c'];
arr['name'] = 'song';

for(var prop in arr) {
console.log(prop, arr[prop]); 
}
//0 a
//1 b
//2 c
//name song
//....여러가지 배열 프로퍼티

for(var i = 0; i< arr.length; i++){
console.log(i, arr[i])
}
//0 "a"
//1 "b"
//2 "c"

위와 같이 for in문을 사용하면 배열의 원소 뿐아니라 여러가지 프로퍼티들도 같이 출력되게 됩니다. 의도치 않은 동작이 수행될 수 있겠죠?

때문에 배열의 원소를 탐색할 때에는 for문을 사용하는 것이 좋습니다.

4. 배열의 요소 삭제

1) delete

delete 연산자는 length 값은 그대로 유지한채 삭제합니다. 즉, 배열의 원소값을 undefined로 바꿔줍니다.

2) splice

만약 배열의 요소를 완전히 삭제하고 싶다면 splice()메서드를 이용해서 배열의 요소를 삭제할 수 있습니다.

splice(start, deleteCount, item...)

- start: 배열에서 시작 인덱스

- deleteCount: 삭제할 요소의 수

- item: 삭제할 위치에 추가할 요소