배열

배열은 객체의 한 종류로서, C나 자바와는 다르게 길이를 지정하지 않아도 되며 데이터 타입에 자유롭다.

 

 

* 배열 리터럴을 통한 배열 생성

 

var Arr = ['a', 'b', 'c', 1, true];
console.log(Arr[0]); // a
console.log(Arr[7]); // undefined
console.log(Arr.length); //5
console.log(Arr); 

 

문자열, 넘버, boolean 값이 전부 있는 배열을 대괄호([])를 통해 새로 생성하였다. 배열은 인덱스로 접근할 수 있으며, 정의되지 않은 인덱스의 값을 출력하고자 하면 undefined이 출력된다. 객체에서 포함하지 않은 객체 프로퍼티에 접근했을 때 undefined가 출력되는 것과 동일한 상황인데, 배열 역시 객체이기 때문이다.

 

 

console.log(Arr);

 

Arr.length는 배열의 length 프로퍼티를 의미하며, 배열의 원소 개수를 알 수 있는 프로퍼티이다. 모든 배열은 length 프로퍼티를 가진다.

 

 

 

* 배열 요소 동적 생성하기

 

var Arr = [];

Arr[0] = 1;
Arr[3] = 10;
Arr[7] = 3;
console.log(Arr);
console.log(Arr.length);

 

console.log(Arr);

 

Arr라는 빈 배열을 생성한 후에 세 개의 값을 할당하였다. 존재하는 인덱스 중 가장 큰 값을 기준으로 배열의 크기를 정한다. 위 코드 예시에서는 가장 큰 인덱스로 Arr[7]을 선언하였기 때문에 길이가 8인 배열이 되는 것이다. 값이 할당되지 않은 요소라면 empty가 출력된다. 즉, length 프로퍼티 값과 배열 요소의 개수가 항상 같은 것은 아니다.

 

이 상태에서 Arr[10]의 값을 동적 생성한다면 Arr.length의 값은 11이 될 것이다. length 값은 늘어나지만 실제 메모리가 그만큼 할당되는 것은 아니다.

 

 

 

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

 

 

위의 예제를 계속해서 활용해 보도록 하겠다.

 

var Arr = [];

Arr[0] = 1;
Arr[3] = 10;
Arr[7] = 3;

Arr.length = 10; // length를 10으로 변경
console.log(Arr); // [1, empty × 2, 10, empty × 3, 3, empty × 2]

Arr.length = 2; // length를 2로 변경
console.log(Arr); // [1, empty]
console.log(Arr[3]); // undefined

 

Arr.length에 값을 대입하는 것만으로 간단하게 배열의 길이를 변경할 수 있다. 그리고 Arr를 출력해 보면, 늘어난 인덱스에 맞추어 없는 값들은 empty로 출력된다.

 

10이었던 length를 2로 변경하면 앞에서부터 [length-1] 인덱스까지만 남고 나머지는 삭제된다.

 

 

 

* 배열 표준 메소드 - push()

 

push() 메소드는 인수의 값을 배열의 끝에 추가하는 자바스크립트 표준 배열 메소드이다.

 

var arr = [0, 1, 2];

arr.push(3);
console.log(arr); // [0, 1, 2, 3]

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

arr.push(4);
console.log(arr); // [0, 1, 2, 3, empty, 4]

 

 

* 배열과 객체

 

배열은 객체의 한 종류이지만 일반 객체와는 차이가 있다.

 

// 배열
var arr = ['a', 'b', 'c'];

// 객체
var obj = {
    '0': 'a',
    '1': 'b',
    '2': 'c'
};


// typeof
console.log(typeof arr); // object
console.log(typeof obj); // object

// length
console.log(arr.length); // 3
console.log(obj.length); // undefined

// push 메소드 (배열 표준 메소드)
arr.push('d');
obj.push('d'); // 에러 발생

 

일반 객체인 obj는 length 프로퍼티가 존재하지 않으므로 undefined가 출력된다. 또한 배열 표준 메소드인 push() 역시 일반 객체에서는 사용이 불가능하다. 객체의 부모 객체, 즉 프로토타입은 Object.prototype 객체이고, 배열의 프로토타입은 Array.prototype 객체이다. 이 두 프로토타입 객체는 서로 다른 메소드를 가지고 있다.

 

 

https://exploringjs.com/impatient-js/ch_proto-chains-classes.html

 

위와 같은 상속 관계를 가지고 있으므로 배열에서는 Array.prototype의 메소드, Object.prototype의 메소드를 전부 사용할 수 있다.

 

 

배열의 프로토타입=>console.log(arr.__proto__);

 

 

객체의 프로토타입=>console.log(obj.__proto__);

 

배열의 프로토타입의 그림에서 가장 하단의 있는 __proto__는 Array.prototype이 상속하고 있는 Object.prototype을 의미한다.

 

 

 

* 배열의 프로퍼티 동적 생성

 

배열에서도 일반 객체와 마찬가지로 동적으로 프로퍼티를 추가할 수 있다.

 

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

arr.color = 'blue';
arr.name = 'array test';

console.log(arr);

arr[3] = 'd';

console.log(arr.length); // 4

 

console.log(arr);

 

배열도 객체와 마찬가지로 'key':'value' 형태로 배열 원소와 프로퍼티 등을 가지고 있다. 만약 arr[0] = 'aaa'; 라는 코드를 추가한다면 객체 프로퍼티를 수정할 때와 마찬가지로 배열 요소의 값이 갱신된다.

 

프로퍼티를 추가하는 것으로 객체의 length에는 변화가 없고, 배열 원소를 추가했을 때 length 값이 갱신된다.

 

 

 

※ 참고. console.log의 동기적 실행

"this value was evaluated upon first expanding. it may have changed since then." 관련

 

var arr = ['a', 'b', 'c'];
console.log(arr); // ["a", "b", "c"]

arr[0] = 'aaa';
console.log(arr); // ["aaa", "b", "c"]

 

 

첫번째 console.log에는 인덱스 0의 값이 a로 나타나지만, 화살표를 확장했을 때의 값은 aaa가 된다. i에 마우스를 가져다 대면 "this value was evaluated upon first expanding. it may have changed since then." 라는 알림이 뜬다.

화살표를 눌러 확장했을 때의 값은 객체의 현재 상태, 즉 바뀌고 난 상태가 되기 때문에 aaa 값이 출력되는 것이다.

 

console.log는 비동기 방식으로 작동한다. 객체에 대한 참조를 동기적으로 수신하지만 확장될 때까지는 객체의 속성을 표시하지 않는다. 그러다가 확장했을 때는 객체의 현재 상태를 나타낸다.

 

이러한 경우에 해당 시점에 로그를 확인하기 위해서는 디버거를 이용하거나 요소 별로 콘솔을 찍는 방법이 있다.

console.log(arr[0], arr[1], arr[2])와 같이 하면 된다.

 

 

* 배열 프로퍼티 열거

 

// 프로퍼티까지 출력
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 = ['a', 'b', 'c'];
delete arr[0];
console.log(arr); // [empty, "b", "c"]
console.log(arr.length); // 3

 

delete 연산자를 사용하면 배열의 요소가 undefined가 되는 것일 뿐, 완전히 삭제되는 것은 아니다.

 

 

- splice(start, deleteCount, items) 

 

start : 삭제를 시작할 위치

deleteCount : 삭제할 요소의 수

items : 삭제할 위치에 추가할 요소 (여러 개 가능, 생략 가능)

 

 

var arr = ['a', 'b', 'c'];
arr.splice(0, 1);
console.log(arr); // ["b", "c"]
console.log(arr.length); // 2

 

var arr = ['a', 'b', 'c'];
arr.splice(0, 1, 'zzz', 'xxx', 'yyy');
console.log(arr); // ["zzz", "xxx", "yyy", "b", "c"]
console.log(arr.length); // 5

 

웹스톰에서는 이 변수가 어떤 의미인지도 표시해 준다. 매우 편리함.

 

 

 

* Array 생성자 함수

 

앞서 살펴본 것과 같이 배열은 배열 리터럴로 생성할 수도 있지만 Array() 생성자 함수를 통해 생성할 수도 있다.

 

// 길이가 3인 배열 생성. 요소는 전부 undefined
var foo = new Array(3);
console.log(foo);

// 1, 2, 3 이라는 요소를 가지는 배열 생성
var foo2 = new Array(1, 2, 3);
console.log(foo2);

 

 

 

* 유사 배열 객체

 

배열의 프로토타입인 Array.prototype는 length 프로퍼티를 가지고 있고, 배열은 이를 상속하여 length 프로퍼티를 사용할 수 있다. 원칙적으로 일반 객체는 length를 사용하지 못하지만, length 프로퍼티를 가진 일반 객체라면 사용할 수 있다. 이러한 일반 객체를 유사 배열 객체(array-like objects)라고 부른다. 유사 배열 객체는 일반 객체임에도 자바 스크립트의 표준 배열 메소드를 사용할 수 있다.

 

 

// 배열
var arr = ['bar'];

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

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

Array.prototype.push.apply(obj, ['baz']); // 일반 객체에 push() 메소드 호출해서 'baz' 원소 추가
console.log(obj); // {1: "baz", name: "foo", length: 2}

 

일반 객체는 obj.push('baz')와 같이 push 메소드를 사용할 수는 없다. 하지만 obj는 length 프로퍼티를 가진 유사 배열 객체이므로 apply() 메소드를 사용하면 표준 배열 메소드를 활용할 수 있다. '1' 프로퍼티에 'baz' 값이 추가된 것을 출력값으로 확인할 수 있다.