[인사이드 자바스크립트] 자바스크립트 데이터 타입과 연산자 4 - 배열

배열은 자바스크립트 객체의 특별한 형태다. 즉, C나 자바의 배열과 같은 기능을 하는 객체지만, 이들과는 다르게 굳이 크기를 지정하지 않아도 되며, 어떤 위치에 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않는다. 

 

배열 리터럴

배열 리터럴은 자바스크립트에서 새로운 배열을 만드는 데 사용하는 표기법이다. 배열 리터럴은 대괄호([ ])를 사용한다.

 

 

배열 리터럴에서는 각 요소의 값만을 포함한다. 

 

배열의 요소 생성

객체가 동적으로 프로퍼티를 추가할 수 있듯이, 배열도 동적으로 배열 원소를 추가할 수 있다. 특히, 자바스크립트 배열의 경우는 값을 순차적으로 넣을 필요 없이 아무 인덱스 위치에나 값을 동적으로 추가할 수 있다.

 

 

1. 빈 배열의 첫 번째 요소에 접근해도 undefined 값이 출력된다.
2. 3개의 요소 값만을 할당했지만 emptyArr를 출력하면 8개의 배열 요소 값이 출력된다. 이것은 자바스크립트가 배열의 크기를 현재 배열의 인덱스 중 가장 큰 값을 기준으로 정하기 때문이다.

 

배열의 length 프로퍼티

자바스크립트의 모든 배열은 length 프로퍼티가 있다. length 프로퍼티는 배열의 원소 개수를 나타내지만, 실제로 배열에 존재하는 원소 개수와 일치하는 것은 아니다.

→ length 프로퍼티는 배열 내에 가장 큰 인덱스에 1을 더한 값이다. 

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

 

 

배열의 인덱스 100 위치에 값을 저장한 순간, 가장 큰 인덱스값인 100을 기준으로 해서 배열의 length 값이 101로 늘어난다. 하지만 실제 메모리는 length 크기처럼 할당되지는 않는다.

 

 

1. 배열 리터럴로 원소를 3개 가지고 있는 배열 arr을 생성했다. 초기에 arr.length 값은 3이다.
2. 이후 arr.length의 값을 임의로 5로 수정했따. 이렇게 되면 length가 가리키는 위치가 변경된다. console.log() 문을 실행하면 배열의 0번쨰 인덱스부터 length-1 인덱스까지의 원소를 출력하므로 원소가 할당되지 않은 3, 4번 인덱스는 undefined로 출력되는 것이다.

   

3. 이번에는 length 프로퍼티 값을 2로 설정했다. 이 경우에는 length 프로퍼티를 벗어나는 2번째 인덱스 값인 '2'가 실제로 삭제된다. 때문에 console.log(arr[2]) 값이 undefined로 출력되는 것이다.

 

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

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

 

 

배열의 length 프로퍼티는 배열 메서드의 동작에 영향을 줄 수 있을만큼 배열에서는 중요한 프로퍼티이다.

 

배열과 객체

자바스크립트에서는 배열 역시 객체다. 하지만 배열은 일반 객체와는 약간 차이가 있다.

 

 

 

• colorsObj['0']이 아닌 colorsObj[0]으로 입력해도 정상적으로 결과가 출력되는 이유 - 자바스크립트 엔진이 [ ] 연산자 내에 숫자가 사용될 경우, 해당 숫자를 자동으로 문자열 형태로 바꿔줌

 

 

• 배열과 객체의 차이점 1 - length 프로퍼티 존재 여부
• 배열이 아닌 객체는 length 프로퍼티가 없다.

 

• 배열과 객체의 차이점 2 - 표준 배열 메서드 사용 가능 여부
• 객체 리터럴 방식으로 생성한 객체의 경우, 객체 표준 메서드를 저장하고 있는 Object.prototype 객체가 프로토타입이 된다. 반면에 배열의 경우 Array.prototype 객체가 프로토타입이 되며, Array.prototype의 프로토타입은 Object.prototype 이 된다.