1. 자바스크립트에서의 배열
고급프로그래밍 언어라면 동일한 타입의 연속된 데이터의 집합인 배열 개념은 당연히 가지고 있을 겁니다. 자바나 C++ 에서도 말이죠. 하지만 자바스크립트에서의 배열은 동일하지 않은 타입의 연속된 데이터의 집합 개념으로서 단순히 문자열(String), 숫자(Number), 불리언(Boolean) 뿐만 아니라 객체, 배열 등 거의 모든 타입의 데이터(변수)를 포함하는 것이 가능합니다. 이는 자바스크립트의 동적인 특징을 잘 설명해주는 특징들 중 하나이기도 하지요.
단 선언되어 있지 변수의 저장은 불가능하다는 것만 기억해두시면 되겠습니다. (애초에 선언되지 않은 변수는 배열 뿐만 아니라 그 어느 곳에서든 사용이 불가능 합니다.)
이러한 배열의 타입을 확인하는 방법은 크게 세 가지인데요. typeOf, isArray, instanceOf 메서드를 사용하는 방법입니다. 그러나 이 세 가지 메서드의 구동 방식에는 차이점이 존재하며, 결과적으로 해당 변수가 배열인지를 확인할 때에는 typeOf보다는 isArray나 instanceOf 메서드를 사용하는 것을 권장합니다.
그 이유는 typeOf의 경우 일반적인 측면에서 배열의 타입을 판단하는데, 배열은 차후에 설명 드릴 객체의 특수한 형태이기 때문에 해당 메서드를 이용하여 배열의 여부를 확인하면 Object(객체 타입)으로 출력됩니다.
let myArray = [1, 2, 3]; // 배열 생성 console.log(typeof myArray); // object로 출력됩니다.그래서 만약 해당 변수가 배열인지를 직접적으로 확인하기 위해서라면 typeOf 메서드 보다는 isArray나 instanceOf 메서드로 확인을 하는 것이 보다 정확합니다.
let myArray = [1, 2, 3]; console.log(Array.isArray(myArray)); // 불리언 값 true 반환 let myArray = [1, 2, 3]; console.log(myArray instanceof Array); // myArray가 Array 빌트인 생성자 함수에 의해 생성된 인스턴스인지를 판별하여 불리언 값 true를 반환.
2. 희소 배열로서의 배열
이러한 자바스크립트의 배열은 일반적인 언어에서의 배열과는 특별한 차이점을 보이는 희소 배열인데요. 각 차이점은 다음과 같습니다.
- 값이 할당된 인덱스
- 희소 배열: 일부 인덱스에만 값이 할당되어 있습니다. 값이 할당되지 않은 인덱스의 경우 값이 없는 것으로 간주됩니다.
- 일반적인 배열: 모든 인덱스에 값이 할당되어 있습니다.
// 희소 배열 let arr1 = []; arr1[1] = '첫번째 데이터 '; arr1[3] = '두번째 데이터'; console.log(arr1) // [ <1 empty item>, '첫번째 데이터 ', <1 empty item>, '두번째 데이터' ] 를 출력합니다. // 일반 배열 let arr2 = [1, 2, 3, 4, 5]; console.log(arr2); // [1, 2, 3, 4, 5] 빈틈 없이 모든 값을 출력.
- 배열의 길이와 요소의 개수
- 희소 배열: 배열의 length 속성은 할당된 값이 있는 인덱스 중 가장 큰 인덱스에 1을 더한 값입니다. 실제로 할당된 값의 개수와 length가 다를 수 있습니다.
- 일반적인 배열: length 속성은 배열에 실제로 할당된 요소의 개수를 정확하게 나타냅니다.
console.log(arr1.length) // 희소 배열은 위에서 선언된 배열의 가장 큰 인덱스 +1의 값을 출력합니다. console.log(arr2.length) // 일반적인 배열은 위에서 선언된 배열의 개수를 정확히 세어 그 개수를 출력합니다
- 메서드 및 연산의 동작
- 희소 배열: 배열 메서드 및 연산에서는 값이 할당되지 않은 요소는 무시될 수 있습니다. 특히 배열 메서드에서는 반복이나 필터링 과정에서 값이 할당된 요소만을 대상으로 합니다.
- 일반적인 배열: 배열 메서드 및 연산은 배열에 실제로 할당된 모든 요소를 대상으로 합니다.
console.log(arr1.filter(Boolean)); // 희소 배열에 filter 배열 메서드를 사용할 경우 '첫번째 데이터' 와 '두번째 데이터' 가 걸러진 후 반환되고, 배열을 생성할 때 값을 할당하지 않음으로 자동적으로 할당 된 undefined는 걸러지게 됩니다. console.log(arr2.filter(Boolean)); // 일반 배열에 filter를 사용할 경우 Falsy로 간주되는 값을 가지고 있는 변수들을 제외하고 전부 Truthy 취급으로 걸러집니다.이러한 이유로 자바스크립트에서 배열을 사용할 때에는 배열의 길이를 보고 그 배열의 요소 또한 길이 만큼 채워져 있다고 생각하는 부분에 주의해야 합니다.
3. 배열의 접근법
기본적으로 배열에 접근할 때에는 인덱스의 값을 접근하는 방법으로 사용됩니다. 이때 배열에 존재하지 않는 요소에 접근할 경우 undefined를 반환하게 됩니다.
let arr1 = [1,2,3,4,5]; console.log(arr1[4]); // 5 출력 console.log(arr1[5]); // undefined를 출력또한 이 인덱스에 접근해 값을 갱신하거나 삭제하는 법 또한 가능합니다.
let arr1 = [1,2,3,4,5]; arr1[0] = 6; // 0번째 인덱스에 값을 6으로 갱신 console.log(arr) // [6,2,3,4,5] 출력 delete arr1[0]; // delete 연산자로 arr1 배열의 0번째 인덱스의 값을 삭제 console.log(arr) // [<1 empty item> 2,3,4,5] 출력⭐ 값의 삭제의 경우 delete 연산자를 사용하여 배열의 요소를 삭제시 해당 인덱스 자체가 삭제되는 것이 아니라, 해당 배열의 인덱스의 값만 삭제된 상태이므로 프로퍼티 자체는 남아있는 상태가 됩니다. (객체를 예로 들면 값은 없고 키만 있는 상태)
그래서 완전 삭제를 노리는 것이라면 나중에 살펴볼 shift, pop, splice, slice 등의 메서드로 삭제하는 방법을 추천합니다.
4. 배열의 생성법
배열을 생성할 때에는 크게 세 가지 방법을 사용하는데요. 배열 리터럴([])을 사용하거나, Array 생성자 함수를 사용하거나, from 메서드를 사용하는 방법이 존재합니다.
- 배열 리터럴 생성법
배열 리터럴로 생성할 경우 값을 직접 입력을 해주는 경우를 의미합니다. 이때 생성과 동시에 배열의 길이를 지정하는 것은 불가능하며, 생성 후에 length 프로퍼티로 배열의 길이를 조정하는 것은 가능합니다.
참고로 length 프로퍼티로 배열의 길이를 지정할 경우 기존 배열의 길이보다 짧으면 짧은 만큼 배열의 뒷부분이 삭제되고, 다시 늘릴 경우 긴 만큼 undefined로 초기화되어 생성됩니다.
let arr1 = [1,2,3,4,5]; arr1.length = 3; console.log(arr) // [1,2,3] arr1.length = 5; console.log(arr) // [1,2,3, <2 empty items>]
- Array 생성자 함수 생성법
- 이 방법의 경우 Array 생성자 함수에 new 키워드를 이용하여 배열을 생성하는 방법으로, 단일 넘버 리터럴을 삽입할 경우 배열의 길이가 그만큼인 빈 배열이 생성되고, 그 외 다른 단일 타입의 리터럴이나 다중 요소의 경우 넣은 갯수 만큼 배열을 생성하게 됩니다.
- 물론 다른 배열 또한 복사할 수 있으나, 하나의 배열을 삽입할 경우 단일 타입으로 보기 때문에 해당 배열 자체가 하나의 묶음 배열로 할당되게 됩니다. 그래서 만약 배열을 복사하고 싶다면 전개 연산자인 스프레드 연산자를 사용하여 생성하면 됩니다.
let arr1 = new Array(3); // [undefined, undefined, undefined] 생성 let arr2 = new Array(1, 2, 3); // [1, 2, 3] 생성 let arr3 = new Array(arr2); // [[1, 2, 3]] 생성 let arr4 = new Array(...arr2) // 스프레드 연산자를 이용하여 [1, 2, 3] 생성
- Array.from 메서드 생성법
- 이 방법의 경우 직접적인 배열을 담고 있는 변수나 이터러블한 객체, 유사 배열 객체 등을 전달하여 카피하는 방식으로 사용되는 함수입니다. 주로 존재하는 배열을 복사할 때 사용되며, 복사할 배열의 데이터를 콜백 함수로 정제하여 재반환 하는 것도 가능하여 코딩테스트 문제에서 단골로 사용되는 배열 메서드 중 하나입니다.
let arr1 = [1, 2, 3]; let arr2 = Array.from(arr1, x => x * 2); > console.log(arr2); // [2, 4, 6]⭐ Array.of 메서드로 배열을 생성하는 법 또한 존재하나, 배열 리터럴로 생성하는 일반적인 방식과 차이점이 거의 없는 메서드 입니다.
