[JavaScript] 자바스크립트 배열의 기초

배열은 값의 목록이고 그 값마다 인덱스(번호)가 매겨져 있다. 인덱스는 왼쪽부터 0으로 시작한다. 특히 배열은 알고리즘을 표현하는데 많이 쓰인다.

 

[배열 리터럴로 생성]

배열 리터럴은 대괄호를 사용한다.

let array1 = [1, 2, 3, 4, 5];

// 인덱스
각 값에 해당하는 인덱스는 왼쪽부터 0, 1, 2...

// 빈 배열 생성
let array2 = [];
console.log(array2); // []

// 배열 요소 생략
let array3 = [1,  , 3];
console.log(array3); // (3) [1, empty, 3]

// 다양한 타입의 배열 요소
let array4 = [1, 2.5, "apple", true, false, {a: 1, b: 2}, [10, 20, 30, 40]];

array4 배열 요소

 

[배열 size, 길이]

자바스크립트에서는 배열의 length 프로퍼티(배열 길이)를 통해 배열 크기를 알 수 있다.

• length property = 배열 요소 최대 인덱스 값 + 1

또한 length 프로퍼티에 현재 배열 길이보다 작고 0보다 큰 정수 값을 대입할 시 배열 길이가 줄어든다. 즉 그 배열 길이를 넘는 인덱스 번호에 할당된 배열 요소가 삭제된다. 반대로 그 배열 길이보다 큰 정수 값을 대입하면 새로운 요소는 추가되지 않지만 배열의 길이가 늘어난다. 즉 length 프로퍼티 값이 바뀐다.

 

// length 프로퍼티
let array4 = [1, 2, 3, 4];
console.log(array4); // (4) [1, 2, 3, 4]
console.log(array4.length); // 4

// 배열 길이 삭제
array4.length = 2;
console.log(array4); // (2) [1, 2]

// 배열 길이 증가
let array5 = [1, 2, 3, 4];
array5.length = 6;
console.log(array5); //(6) [1, 2, 3, 4, empty × 2]
console.log(array5.length); // 6

[Array 생성자로 생성]

// Array 생성자를 통한 생성
let array6 = new Array(1, 2, 3); // [1, 2, 3]
let array7 = new Array(); // 빈 배열 생성
let array8 = new Array(1, 2.5, "apple", true, false, {a: 1, b: 2}, [10, 20, 30, 40]);

// 생성자의 인수가 1개이고 양의 정수 일때는 해당 정수 값 길이를 가진 빈 배열 생성
let array9 = new Array(3);

// 생성자의 인수가 1개이고 음수일 때는 오류
let array10 = new Array(-1); // Uncaught RangeError: Invalid array length

[배열 요소의 참조]

특정 인덱스의 요소는 대괄호 연산자를 사용해서 읽거나 쓸 수 있다. 또한 배열 요소 하나는 변수 하나로 사용할 수 있다. 즉 배열 요소에는 모든 타입의 데이터를 할당할 수 있고 프로그램에서 참조 가능하다.

// 배열 요소의 참조
console.log(array8[2]); // apple

let variable1 = array8[0];
let variable2 = array8[1];
let variable3 = array8[3];
let variable4 = array8[5];
let variable5 = array8[6];

console.log(variable1); // 1
console.log(variable2); // 2.5
console.log(variable3); // true
console.log(variable4); // {a:1, b: 2}
console.log(variable5); // [10,20,30,40]

[자바스크립트의 배열은 객체]

C, Java 같은 언어에서 배열 요소는 메모리의 연속된 공간에 차례대로 배치되어 있다. 따라서 인덱스를 지정하게 되면 해당 요소를 빠르게 읽거나 쓸 수 있다. 그러나 자바스크립트에서 배열은 Array 객체이며 객체로 배열의 기능을 본뜬 것이라 할 수 있다. Array 객체는 배열의 인덱스를 문자열로 변환해서 그것을 프로퍼티로 사용한다.

 

배열의 인덱스를 프로퍼티로 사용

 

배열의 대괄호 연산자를 시용하는 것과 객체에 대괄호 연산자를 사용하는 것은 동일하다. 또한 배열의 인덱스를 숫자 대신 문자열을 사용할 수 있다.

let array11 = ["A", "B"];
console.log(array11[0]); // A
console.log(array11["0"]); // A

// 배열도 객체이기 때문에 객체에 없는 프로퍼티를 읽을 때 undefined
console.log(array11[2]); // undefined

[배열 요소의 추가와 삭제]

• 없는 배열 요소에 값 대입, 대입한 요소 리턴
• push 메서드 : 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환
• pop 메서드 : 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환
• unshift 메서드 : 배열의 첫 번째 자리에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환
• shift 메서드 : 배열의 첫 번째 요소를 제거한 후, 제거한 요소를 반환
• splice 메서드 : 배열의 특정 위치에 배열 요소를 추가하거나 특정 위치에 있는 요소를 지정한 수만큼 삭제

//배열 요소 추가 및 삭제
let array12 = ["A", "B"];
array12[2] = "C";
console.log(array12); // (3) ["A", "B", "C"]

// push 메서드를 사용해 배열 끝에 요소를 추가
array12.push("D");
console.log(array12); // (4) ["A", "B", "C", "D"]

// 배열 요소 삭제 -> length는 바뀌지 않음
delete array12[0];
console.log(array12); // (4) [empth, "B", "C", "D"]
console.log(array12.length); // 4

// splice 메서드를 사용해 배열의 특정 위치에 배열 요소를 추가하거나
// 특정 위치에 있는 요소를 지정한 수만큼 삭제
// 사용법 : array.splice(start, deleteCnt, items);

let array13 = ["A", "B", "C"];
array13.splice(1, 0, "D", "E"); // []
console.log(array13); // (5) ["A", "D", "E", "B", "C"]

array13.splice(0, 1); // ["A"]
console.log(array13); // (4) ["D", "E", "B", "C"]

array13.splice(1, 1, "F", "G", "H"); // ["E"]
console.log(array13); // (6) ["D", "F", "G", "H", "B", "C"]

[배열 요소 정렬 및 순서 반전]

• sort 메서드 : 배열 내부의 요소를 정렬하는 데 사용. 기본적으로 요소를 문자열로 변환 후 오름차순 정렬
• reverse 메서드 : 배열 요소의 순서를 반전시킨다.

[sort 메서드]

// 배열 요소의 정렬
// sort 메서드 => 배열 요소를 문자열로 변경 후 정렬시키기 때문에 원하는 결과가 안나온다.

let array15 = [10, 3, 7, 40, 111, 32, 60, 300, 237];
array15.sort(); //(9) [10, 111, 237, 3, 300, 32, 40, 60, 7]

따라서 비교함수 function(a, b)의 반환 값에 따른 정렬 규칙을 적용한다.

• 결괏값이 0보다 작으면 a가 낮은 index로 정렬
• 결괏값이 0이면 a와 b의 순서 변경하지 않음
• 결괏값이 0보다 크면 b가 낮은 index로 정렬

array15.sort(function (a, b) {
    return a - b;
}); // (9) [3, 7, 10, 32, 40, 60, 111, 237, 300]

 

[reverse 메서드]

// reverse 메서드
let array16 = [1, 2, 3, 4];
array16.reverse(); //(4) [4, 3, 2, 1]

 

[TypedArray]

앞서 C, Java의 배열과는 달리 자바스크립트 배열은 객체이고 메모리 상에 연속적으로 저장되는 것이 아닌 배열 요소가 객체로서 메모리 상에 저장되고 참조 형태로 불러온다고 언급했다. 때문에 속도에서 불리한 점이 있었는데 ECMAScript 6부터 TypedArray 객체가 추가되었다. 이 배열 요소는 C나 Java처럼 메모리의 연속된 공간에 차례대로 배치되므로 배열 요소를 빠르게 읽고 쓸 수 있다. WebRTC나 WebSocket에서 대용량 파일을 빠르고 안정적으로 송수신하거나 웹 브라우저에서 WebGL을 사용해 3차원 그래픽을 구현할 용도로 사용한다. 지금은 너무 어려운 개념 같아서 패스하겠다 ㅠㅠ

 

[희소 배열]

배열에 요소를 추가하거나 제거하면 인덱스가 0부터 시작되지 않는 배열이 만들어진다. 이러한 배열을 희소 배열이라고 부른다.

// 희소배열
let array14 = ["A", "B"];
array14[3] = "C";
console.log(array14); // (4) ["A", "B", empty, "C"]
console.log(array14.length); // 4

let array15 = ["A", "B", "C"];
console.log(array15.length); // 3

array14 배열을 객체 리터럴로 표현하면 다음과 같다. 이처럼 실제로 index 2의 요소는 비어있지만 length는 4이다.

array14의 객체 리터럴

 

반면에 array15의 length는 3이다. 이처럼 두 변수는 같은 배열 요소를 갖고 있는 것처럼 보이지만 실제로 배열 크기는 다르다. 희소 배열의 길이 > 배열 요소의 개수

 

[배열 요소 확인법]

// 배열 요소 확인법
for (let i in array14) {
    console.log(i); // 0, 1, 3
}

array14.hasOwnProperty("0"); // true
array14.hasOwnProperty("2"); // false