(javascript) 배열

배열

굳이 크기를 지정하지 않아도 되며, 어떤 위치에 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않는다.

배열 리터럴

새로운 배열을 만드는 데 사용하는 표기법. 대괄호 []를 사용

//배열 리터럴을 통한 5개 원소를 가진 배열 생성
var colorArr = ['orange', 'yello', 'blue', 'green', 'red];

console.log(colorArr[0]); // orange
console.log(colorArr[1]); // yellow
console.log(colorArr[4]); // red

배열의 요소 생성

동적으로 배열 원소를 추가할 수 있음

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

// 빈 배열
var emptyArr = [];
console.log(emptyArr[0]); //undefined

// 배열 요소 동적 생성
emptyArr[0] = 100;
emptyArr[3] = 'eight';
emptyArr[7] = true;

console.log(emptyArr);
// [100, undefined x 2, "eight", undefined x 3, true]

console.log(emptyArr.length); // 8
// 배열의 크기를 현재 배열의 인덱스 중 가장 큰 값을 기준으로 정하기 때문

배열의 length 프로퍼티

배열의 원소 개수를 나타내지만, 실제로 배열에 존재하는 원소 개수와 일치하는 것은 아님.


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

var arr = [];
console.log(arr.length); // 0

arr[0] = 0; // arr.length = 1
arr[1] = 1; // arr.length = 2
arr[2] = 2; // arr.length = 3
arr[100] = 100;
console.log(arr.length); // 101
// 실제 메모리는 length 크기처럼 할당되지는 않는다.

배열 length 프로퍼티의 명시적 변경

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

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

arr.length = 2;
console.log(arr);	// [0, 1]
console.log(arr[2]);	// undefined
// length 프로퍼티를 벗어나는 2번째 인덱스값인 '2'가 실제로 삭제된다.

배열 표준 메서드와 length 프로퍼티

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', undefined, 'four']

length 프로퍼티는 배열 메서드에 동작에 영향을 줄 수 있다.

배열과 객체

배열 역시 객체. 하지만 일반 객체와는 약간 차이

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

// colorsObj 객체
var colorObj = {
	'0': 'orange',
	'1': 'yellow',
	'2': 'green'
};
console.log(colorsObj[0]); // orange
// 자바스크립트 엔진이 []연산자 내에 숫자가 사용될 경우, 해당 숫자를 자동으로 문자열 형태로 바꿔주기 때문이다.
console.log(colorsObj[1]); // yellow
console.log(colorsObj[2]); // green

typeof 연산자 비교
console.log(typeof colorsArray); // object (not array)
console.log(typeof colorsObj); // object
// 배열과 객체가 모두 object

// length 프로퍼티
console.log(colorsArray.length); // 3
console.log(colorsObj.length); // undefined

// 배열 표준 메서드
colorsArray.push('red'); // ['orange', 'yellow', 'green', 'red']
colorsObj.push('red'); // Uncaught TypeError: Object #<Object> has no method 'push'

객체 - 객체 표준 메서드를 저장하고 있는 Object.prototype 객체 가 프로토 타입
배열 - Array.prototype 객체가 부모 객체인 프로토타입이 된다.


그리고 Array.prototype 객체의 프로토타입은 Object.prototype 객체가 된다.

배열의 프로퍼티 동적 생성

배열도 자바스크립트 객체이므로, 인덱스가 숫자인 배열 원소 이외에도 객체처럼 동적으로 프로퍼티를 추가할 수 있다.

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

// 프로퍼티 동적 추가
arr.color = 'blue';
arr.name = 'number_array';
console.log(arr.length); // 3

// 배열 원소 추가
arr[3] = 'red';
console.log(arr.length); // 4

// 배열 객체 출력
console.dir(arr);

배열에 동적 프로퍼티가 추가될 경우는 배열의 length값이 바뀌지 않는다. -> 배열의 length 프로퍼티는 배열 원소의 가장 큰 인덱스가 변했을 경우만 변경된다.

결국 배열도 객체처럼 'key: value' 형태로 배열 원소 및 프로퍼티 등이 있음을 알 수 있다.

배열의 프로퍼티 열거

for in 문이 되지만 불필요한 프로퍼티가 출력될 수 있으므로 for 문을 사용하는 것이 좋다.


for 문은 배열의 요소만을 정확히 출력

for (var prop in arr) {
	console.log(prop, arr[prop]);
}

for (var i = 0; i < arr.length; i++) {
	console.log(i, arr[i]);
}

배열 요소 삭제

배열도 객체이므로, 배열 요소나 프로퍼티를 삭제하는 데 delete 연산자를 사용할 수 있다.

var arr = ['zero', 'one', 'two', 'three'];
delete arr[2];
console.log(arr); // ["zero", "one", undefined x 1, "three]
console.log(arr.length); // 4

배열에서 요소들을 완전히 삭제할 경우 splice() 배열 메서드를 사용한다.

<splice() 배열 메소드>

splice(start, deleteCount, item...)

start - 배열에서 시작 위치
deleteCount - start에서 지정한 시작 위치부터 삭제할 요소의 수
item - 삭제할 위치에 추가할 요소

ex)

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

arr.splice(2, 1);	// 2번째 요소를 시작점으로 1개의 원소를 삭제한다. - 배열 요소를 완전히 없애게 된다.
console.log(arr);	// ["zero", "one", "three"]
console.log(arr.length);	// 3

Array() 생성자 함수

배열은 일반적으로 배열 리터럴도 생성하지만, 결국 Array() 생성자 함수로 배열을 생성하는 과정을 단순화

생성자 함수로 배열과 같은 객체를 생성할 때는 반드시 new 연산자를 같이 써야 한다.

Array()

• 호출할 때 인자가 1개이고, 숫자일 경우 : 호출된 인자를 length로 갖는 빈 배열 생성
• 그 외의 경우 : 호출된 인자를 요소로 갖는 배열 생성

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

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

유사 배열 객체

length 프로퍼티를 가진 객체


객체임에도 불구하고, 자바스크립트의 표준 배열 메서드를 사용하는 게 가능하다.

var arr = ['bar'];
var obj = {
	name: 'foo',
	length: 1
};

arr.push('baz');
console.log(arr); // ['bar', 'baz']

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

apply() 메소드를 사용하면 객체지만 표준 배열 메서드를 활용하는 것이 가능하다.
유사 배열객체도 배열 메서드를 사용하는 것이 가능하다.

var = arr = ['bar'];
var obj = { name : 'foo', length : 1 };

arr.push('baz');
console.log(arr); // ['bar', 'baz']

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