Array 배열

설명

let colors;
colors = ['white', 'black', 'blue']
  1. 배열은 특별한 종류의 변수이다.이 변수는 하나의 값이 아니라 값의 목록을 저장한다.다시 말하면 배열은 하나 혹은 그 이상의 연관된 정보를 저장할 수 있는 특별한 형태의 변수이다.
  2. 배열에 값을 대입할 때는 [ ]대괄호square bracket 안에 ,로 구분하여 값을 나열하면 된다.
  3. 배열은 목록의 값의 수가 미지수일때 유용하다. 왜냐하면 배열을 생성할 때 몇개의 데이터를 처리할 지 미리 지정할 필요가 없기 때문이다. 좀더 설명하자면 몇 개의 데이터를 다룰지 정확히 모를때, 많은 변수를 미리 생성해두는 것 보다 배열을 사용하는 것이 효율적이다. 마치 쇼핑리스트 처럼 말이다.
  4. 배열은 순서가 있는 값이다. 순서는 index라고 부르며, 0부터 번호를 매긴다. 값은 인덱스를 이용해 접근한다.

배열 만들기 2가지 방법

let colors = new Array('white',
                       'black',
                       'custom');

배열만들기는 배열 생성자array constructor를 이용하여 배열을 만들 수도 있다.
이 경우에는 new 키워드와 Array(); 생성자를 사용한다. 그리고 배열의 값들은 괄호 안에 쉼표로 구분하여 나열하면 된다(이 경우는 대괄호를 사용하지 않는다).
하지만 배열을 만들 때 배열 생성자를 이용하는 것보다는 배열식(첫 번째 코드)을 사용하는 방법이 보편적이다. 배열 리터럴도 결국 Array() 생성자 함수로 배열을 생성하는 과정을 단순화 시킨 것이다.

Array() 생성자 함수

호출할 때 인자 개수에 따라 동작이 다르므로 주의해야 한다.

  • 호출할 때 인자가 1개이고, 숫자일 경우: 호출된 인자를 length로 갖는 빈 배열 생성
  • 그외의 경우: 호출된 인자를 요소로 갖는 배열 생성
let foo = new Array(3);    
console.log(foo); //[undefined, undefined, undefined]
console.log(foo.length); // 3

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

foo의 경우 Array()생성자 함수를 호출할 때 3이라는 숫자 인자 1개만 넘겼기 때문에 3개 요소를 가진 빈 배열을 생성한다.
bar의 경우 Array(1,2,3)을 같이 호출했으므로 세 개의 숫자가 요소인 배열이 된다.

배열 요소의 동적 생성

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

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

emptyArr에서 요소 값을 3개만 할당했지만 length는 8이 된다. 자바스크립트는 배열의 크기를 현재 배열의 인덱스 중 가장 큰 값을 기준으로 정한다. 다른 측면에서 설명하자면, 배열의 length프로퍼티는 배열 원소의 가장 큰 인덱스가 변했을 경우에만 변경된다. 자바스크립트의 모든 배열은 이런 length프로퍼티가 있으며, 이것은 배열의 동작을 이해하는 데 중요하다.

배열의 순회

객체의 프로퍼티를 순회할 때 for…in 문을 사용한다. 배열 역시 객체이므로 for…in 문을 사용할 수 있다. 그러나 배열은 객체이기 때문에 프로퍼티를 가질 수 있다. for…in 문을 사용하면 배열 요소뿐만 아니라 불필요한 프로퍼티까지 출력될 수 있고 요소들의 순서를 보장하지 않으므로 배열을 순회하는데 적합하지 않다.

따라서 배열의 순회에는 forEach 메소드, for 문, for…of 문을 사용하는 것이 적절하다.


배열 요소의 추가와 삭제

추가 .push(넣을값)

객체가 동적으로 프로퍼티를 추가할 수 있는 것처럼 배열도 동적으로 요소를 추가할 수 있다. 이때 순서에 맞게 값을 할당할 필요는 없고 인덱스를 사용하여 필요한 위치에 값을 할당한다. length는 마지막 인덱스를 기준으로 산정된다.

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

arr[1] = 1;
arr[3] = 3;

cosole.log(arr); // [empty, 1, empty, 3]
console.log(arr.length); // 4

값이 할당되지 않은 인덱스 위치의 요소는 생성되지 않는다. 단 존재하지 않는 요소를 참조하면 undefined가 반환된다.

// 값이 할당되지 않은 인덱스 위치의 요소는 생성되지 않는다.
console.log(Object.keys(arr)); // ['1', '3' ]
// arr[0]이 undefine를 반환한 이유는 존재하지 않는 프로퍼티 접근했을 때 undefined를 반환하는 것과 같은 이치다.
console.log(arr[0]); // undefined
삭제 .pop(삭제할값)

배열은 객체이기 때문에 배열으 요소를 삭제하기 위해 delete 연산자 사용할 수 있다. 이때 length에는 변함이 없다. 해당 요소를 완전히 삭제해 length에도 반영되게 하려면 Array.prototype.splice 메서드를 사용한다.

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

// 요소의 값만 삭제된다
delete numbersArr[2]; // (4) ["zero", "one", empty, "three"]
console.log(numbersArr);

// 요소 값만이 아니라 요소를 완전히 삭제한다
// splice(시작 인덱스, 삭제할 요소 수)
numbersArr.splice(2, 1); // (3) ["zero", "one", "three"]
console.log(numbersArr);

정리

  • 배열도 객체다고 계속 말하는데, 객체에 사용하는 연산자를 사용할 수 있어지기 때문에 계속해서 강조하는 것이다.
    (ex. 배열 요소나 프로퍼티를 삭제할 때 delete연산자를 사용할 수 있다.)
  • typeof 연산자 결과는 배열과 객체 모두 object이다.
  • 객체 -> Object.prototype이라면,
    배열 -> Array.prototype -> Object.prototype
  • 배열에서 .length는 의미있다.
  • 배열에서 동적생성이라는 것은 인덱스만 준다면 아무 인덱스에서나 생성된다는 것을 의미하는 것 같다. 이 점은 몰랐던 부분이고 신기했다.

참고
인사이드 자바스크립트 - 한빛미디어