JavaScript - 배열

 

개발을 진행하다보면, 순서가 있는 컬렉션이 필요한 경우가 생깁니다.
이럴 때 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조인 배열을 사용할 수 있습니다.

배열 생성

 

1. 배열 리터럴
 가장 일반적인 배열 생성 방식이며,
 0 개 이상의 요소를 쉼표로 구분하여 대괄호로 묶어 생성합니다.

const  arr = ["apple", "orange", "banana"];

alert (arr) ;             // [apple,orange,banana]
alert (arr[1]) ;         // [orange]
alert (arr.length);   // 3

 

 

● 배열 리터럴에 요소를 하나도 추가하지 않으면 빈 배열 생성

const arr = [];
alert (arr.length);    // 0

 

● 배열 리터럴에 요소를 생략하면 희소 배열 생성

const arr = ["apple", ,"banana"];    // 희소 배열

alert (arr);               // [apple,,banana]
alert (arr[1]);           // undefined
alert (arr.length);    // 3

 

※ 희소 배열 

배열의 요소가 연속적으로 위치하지 않고 일부가 비어 있는 배열을 말하며
자바스크립트는 희소 배열을 문법적으로 허용하고 있습니다.
다만, 성능에 좋지 않아 권장하지 않습니다.

 

2. Array 생성자 함수

 Array 생성자 함수를 통해 배열 생성하며, 
 전달된 인수의 개수에 따라 다르게 동작하기 떄문에 주의가 필요합니다.

 

● 전달된 인수가 1개이고 숫자인 경우

const arr = new Array(10);

alert (arr);               // [,,,,,,,,,]
alert (arr.length);    // 10

 

● 전달된 인수가 없는 경우

const arr = new Array() ;

alert (arr);              // []
alert (arr.length);    // 0

 

● 전달된 인수가 2개 이상이거나 숫자가 아닌 경우

const arr = new Array("apple", "orange", "banana");

alert (arr) ;            // [apple,orange,banana]
alert (arr[1]) ;        // [orange]
alert (arr.length);  // 3

 

 

배열에 사용할 수 있는 메서드

 

1. pop / push

● pop - 배열 끝 요소를 제거하고, 제거한 요소를 반환합니다.
● push - 배열 끝에 요소를 추가합니다.

const arr = ["apple", "orange", "banana"];

alert(arr.pop() );   // [banana]
alert(arr);            // [apple,orange]

 

const arr = ["apple", "orange"];

arr.push("peach");
alert(arr) ;       // [apple,orange,peach]

 

2. shift / unshift
● shift - 배열 앞 요소를 제거하고, 제거한 요소를 반환합니다.
● unshift - 배열 앞에 요소를 추가합니다.

const  arr = ["apple", "orange", "banana"];

alert (arr.shift() ) ;    // [apple]
alert (arr) ;              // [orange,banana]

 

const  arr = [ "orange", "banana"];

arr.unshift("peach") ;    
alert (arr) ;          // [peach,orange,banana]

 

성능
push 와 pop 은 빠르지만, shift 와 unshift 는 느립니다.
배열 끝에 무언가를 하는 것보다 배열 앞에 무언가를 하는 것이 느린 이유는 
아래 실행 흐름을 보면 쉽게 이해할 수 있습니다.

 

shift 는 3가지 동작을 수행합니다.
1. 인덱스가 0 인 요소를 제거하고
2. 모든 요소를 앞쪽으로 이동합니다. 인덱스 1은 0 으로, 인덱스 2는 1로 이동합니다.
3. length 프로퍼티 값을 갱신합니다.

배열에 요소가 많을 수록 이동하는 데 걸리는 시간이 길어지고 메모리 관련 연산도 많아집니다.

그러나, push 나 pop 메서드는 요소를 옮기는 동작이 없어서 기존 인덱스를 그대로 유지합니다.

배열 끝에 무언가를 하는 메서드의 실행 속도가 빠른 이유입니다.