인사이드 자바스크립트 #04 (배열)

배열

자바스크립트 객체의 특별한 형태.

---

배열 리터럴

자바스크립트에서 새로운 배열을 만드는 데 사용하는 표기법이다. 대괄호 ([ ]) 를 사용한다. 객체 리터럴과 달리 각 요소의 값만을 포함한다. 대괄호 내에 접근하고자 하는 원소의 배열 내 위치 인덱스값을 넣어서 접근한다. 

※ 배열 내의 첫번째 원소는 인덱스 0 부터 시작한다.

---

배열의 요소 생성

객체와 같이 배열의 원소도 동적으로 추가할 수 있다. 특히, 자바스크립트 배열의 경우는 값을 순차적으로 넣을 필요 없이 아무 인덱스 위치에나 값을 동적으로 추가할 수 있다. 배열의 요소는 숫자나 문자열 같은 기본 타입의 값들을 포함해서 객체나 함수, 배열 등과 같이 자바스크립트의 모든 데이터 타입을 포함할 수 있다. 

• 자바스크립트는 배열의 크기를 현재 배열의 인덱스 중 가장 큰 값을 기준으로 정한다.
• 값이 할당되지 않은 인덱스의 요소는 undefined 값을 기본으로 가진다.
• 배열의 원소 개수는 length 프로퍼티를 출력하면 알 수있다.

---

배열의 length 프로퍼티

length 프로퍼티는 배열의 원소 개수를 나타내지만 실제로 배열에 존재하는 원소 개수와 일치하는 것은 아니다. (인덱스가 0부터 시작하므로) 배열 내에 가장 큰 인덱스에 1을 더한 값이다. 배열의 가장 큰 인덱스 값이 변하면 length 값 또한 자동으로 그에 맞춰 변경된다.

 

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

var arr = [0,1,2];

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

---

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

자바스크립트는 배열에서 사용 가능한 다양한 표준 메서드를 제공한다. 이러한 배열 메서드는 length 프로퍼티를 기반을 동작하고 있다. 예를 들어 

▷ push( ) : 인수로 넘어온 항목을 배열의 끝에 추가하는 자바스크립트 표준 배열 메서드이다. 현재 length 값의 위치에 새로운 원소값을 추가한다. 

---

배열과 객체

• 배열과 객체의 typeof 연산 결과는 모두 object 이다. 
• 배열과 객체의 근본적인 차이는 객체는 length 프로퍼티가 존재하지 않는다. 때문에 배열은 length () 를 하면 결과가 출력되지만 객체는 결과에 undefined 가 나온다. 
• 객체는 배열이 아니므로 push( ) 와 같은 표준 배열 메서드를 사용할 수 없다. 이것은 배열과 객체의 부모인 프로토타입 객체가 서로 다르기 때문이다. 리터럴 방식으로 생성한 객체의 경우, 객체 표준 메서드를 저장하고 있는 Object.prototype 객체가 프로토타입이다. 반면에 배열의 경우 Array.prototype 객체가 부모 객체인 프로토타입이 된다. 그리고 Array.prototype 객체의 프로토타입은 Object.prototype 객체가 된다. 객체는 자신의 프로토타입이 가지는 모든 프로퍼티 및 메서드들을 상속받아 사용할 수 있다고 했으므로, 배열은 Array.prototype에 포함된 배열 표준 메서드와 Object.prototype 의 표준 메서드들을 모두 사용할 수 있다.
  • Object.prototype ← 객체
    Object.prototype ← Array.prototype ← 배열

---

배열의 프로퍼티 동적 생성

배열도 자바스크립트 객체이므로 인덱스가 숫자인 배열 원소 이외에도 객체처럼 동적으로 프로퍼티를 추가할 수 있다. 여기서 주목할 점은 배열에 동적 프로퍼티가 추가될 경우는 배열의 length 값이 바뀌지 않는다는 것이다. 즉, 배열의 length 프로퍼티는 배열 원소의 가장 큰 인덱스가 변했을 경우에만 변경된다. 

---

배열의 프로퍼티 열거

배열도 객체이므로 for in 문을 사용해서 배열 내의 모든 프로퍼티를 열거할 수 있지만, 이렇게 되면 불필요한 프로퍼티가 출력될 수 있으므로 되도록 for문을 사용하는 것이 좋다. 

---

배열 요소 삭제

배열도 객체이므로 배열 요소나 프로퍼티를 삭제하는 데 delete 연산자를 사용할 수 있다. 하지만 delete 연산자는 해당 요소의 값을 undefined로 설정할 뿐 원소 자체를 삭제하지는 않는다. 때문에 보통 배열에서 요소들을 완전히 삭제할 경우에는 splice () 배열 메서드를 사용한다. 

---

Array() 생성자 함수

배열은 일반적으로 배열 리터럴로 생성하지만, 배열 리터럴도 결국 자바스크립트 기본 제공 Array() 생성자 함수로 배열을 생성하는 과정을 단순화시킨 것이다. 생성자 함수로 배열과 같은 객체를 생성할 때는 반드시 new 연산자를 같이 써야 한다. 

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

---

유사 배열 객체

자바스크립트에서는 length 프로퍼티를 가진 객체를 유사배열객체array-like objects 라고 부른다. 유사 배열 객체의 가장 큰 특징은 객체임에도 불구하고, 자바스크립트의 표준 배열 메서드를 사용하는게 가능하다는 것이다. 

---

기본 타입과 표준 메서드

Q. 자바스크립트는 숫자, 문자열, 불린값에 대해 각 타입별로 호출 가능한 표준 메서드를 정의하고 있다. 하지만 기본 타입의 경우는 객체가 아닌데 어떻게 메서드를 호출할 수 있을까? 

A. 기본 타입의 값들에 대해서 객체 형태로 메서드를 호출할 경우, 이들 기본값은 메서드 처리 순간에 객체로 변환된 다음 각 타입별 표준 메서드를 호출하게 된다. 그리고 메서드 호출이 끝나면 다시 기본값으로 복귀하게 된다.