[JavaScript Core] 배열에 대해 알아보자

이번에는 자바스크립트의 배열(Array) 에 대해 자세하게 알아보도록 하겠습니다.

배열은 자바스크립트 뿐만 아니라 다른 언어에서도 자주 사용되며, 빠질 수 없는 중요한 자료형 중 하나입니다.

따라서, 단순 배열이 무엇인지 알아보는 것 뿐만 아니라, 내부적으로 깊게 파고들어보도록 합시다.

1. 배열(Array)

let arr1 = new Array(); // 생성자
let arr2 = []; // 리터럴

먼저, 배열의 선언부터 알아봅시다.

배열은 객체와 마찬가지로, 각각 생성자 방식과 리터럴 방식으로  선언할 수 있습니다.

둘은 동일한 배열이므로, 어떤 방식이든 상관없지만, 보통은 리터럴 방식으로 선언하는게 일반적입니다.

let arr = ["a", "b", "c"];

console.log(arr[0]); // a
console.log(arr[1]); // b

arr[2] = "d";

console.log(arr[2]); // d
console.log(arr.length); // 3

객체를 선언할 때, ["a", "b", "c"] 와 같이 값을 넣어서 선언할 수 있으며, 대괄호 표기법을 이용해서 값에 접근할 수 있습니다.

이때, 대괄호 안에 접근하고 싶은 값의 인덱스(index) 를 넣어주면 됩니다.

단순 접근하는것 뿐만 아니라, a[2] = "d" 와 같이 값을 수정할 수도 있으며, .length 프로퍼티를 통해 배열의 길이도 구할 수 있습니다.

2. 배열의 메소드

let arr = ["a", "b", "c"];

arr.push("d"); // a, b, c, d
arr.pop(); // a, b, c
arr.unshift("A"); // A, a, b, c
arr.shift(); // a, b, c

먼저, 배열에 값을 추가/제거 할 수 있는 메소드들을 알아봅시다.

.push 메소드는 인자로 들어온 값을 배열의 맨 뒤에 추가합니다.

.pop 메소드는 배열 맨 뒤의 값을 제거합니다.

.unshift 메소드는 인자로 들어온 값을 배열 맨 앞에 추가합니다.

.shift 메소드는 배열 맨 앞의 값을 제거합니다.

여기서 알아두면 좋은 사실이 있는데, .push 와 .pop 메소드에 비해 .unshift 와 .shift 메소드는 속도가 더 느리다는 사실입니다.

이는, .push 와 .pop 메소드는 뒤의 값만 추가/제거 하면 되지만, .unshift 와 .shift 메소드는 앞의 값을 추가/제거 하고, 뒤의 값들을 각각 한칸씩 당기거나 밀어내는 작업이 추가적으로 들어가기 때문이죠.

크게 어려운 내용도 아니니 기억하고 있으시면 좋을 것 같네요!

let arr = [1, 2, 3];

console.log(arr.toString()); // 1,2,3
console.log(arr + 1); // 1,2,31

배열에는 .toString 메소드도 존재합니다.

.toString 메소드를 실행하면, 대괄호를 제외하고 쉼표로 구분되어 있는 문자열이 반환됩니다.

그리고, 이는 형변환시에도 마찬가지인데, 배열에는 Symbol.toPrimitive 와 valueOf 내장 메소드가 없기 때문에, arr + 1 과 같이 형변환이 일어나는 연산에서는 toString 메소드가 실행되어 문자열로 변하게 됩니다.

3. 배열의 반복

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

for(let i=0; i<arr.length; i++) {
    console.log(arr[i]);
}

for(let v of arr) {
    console.log(v);
}

위와 반복문을 통해 배열 속 값을 차례대로 접근 할 수 있습니다.

첫번째 방법은 고전적인 방법이자 반복문의 기본적인 사용법으로, 임의의 변수 i를 순차적으로 증가시키면서 인덱스로 사용해, 배열의 값을 차례대로 접근합니다.

두번째 방법은 for ... of 를 사용한 방법으로, 첫번째 방법을 축약시킨 간편한 방법이라 보시면 됩니다. 다만, 인덱스를 구할 수 없다는게 단점이죠.

사실, 배열도 객체이기 때문에 for ... in 을 이용해서 반복할 수도 있는데, for ... in 은 객체에 특화되어 있어서 배열에 사용하면 객체대비 10~100 배가량 느리다고 하니, 되도록이면 사용하지 않으셨으면 합니다.



이렇게 배열에 대해 알아보았는데, 아직 다루지 않은 부분이 많이 있습니다. 특히 메소드 부분에서 말이죠.

따라서, 다음 글을 통해 배열의 메소드에 대해 더욱 파고들어볼 예정이니, 다음 글도 많은 관심 부탁드립니다!!