배열
시작하기에 앞서
해당 블로그의 모든 문서는 학습한 내용을 제 방식으로 정리하여 작성하고 있습니다.
순수 창작물도 아니고, 틀린 내용이 있을 수 있으므로 참고하고 읽어주시면 감사하겠습니다.
배열
배열은 자바스크립트 객체의 특별한 형태입니다.
순서가 있는 선형 자료구조이고, index 번호를 통해서 배열에 접근할 수 있습니다.
배열 생성
// 배열 리터럴로 빈 배열 생성
const array = [];
// 배열 리터럴로 문자열 배열 생성
const array2 = ["orange", "yellow", "blue"];
자바스크립트에서는 배열 리터럴로 배열을 만들 수 있습니다.
배열 리터럴은 대괄호[]를 사용하고, C언어나 Java 언어처럼 최대 크기를 지정하지 않아도 됩니다.
배열의 원소 접근
// 배열 리터럴로 문자열 배열 생성
const array = ["orange", "yellow", "blue"];
// 배열의 값 꺼내기
console.log(array[0]); // orange
console.log(array[1]); // yellow
console.log(array[2]); // blue
배열의 값에 접근하기 위해서는 index 값을 사용합니다.
배열의_변수명[index]형태로 접근할 수 있고, index 값은 0번부터 시작합니다.
배열의 원소 추가
const array = [];
// 0번 index에 원소 추가
array[0] = 10;
console.log(array[0]); // 10
console.log(array[1]); // undefined
// 배열의 맨 뒤에 원소 추가
array.push(20);
console.log(array[1]); // 20
보면 자바스크립트 배열은 원하는 index에 원소를 추가할 수 있습니다.
그리고 배열의 없는 index에 접근하면 다른 언어처럼 에러가 발생하지 않고 undefined가 출력됩니다.
배열의 내장 함수인 push()함수를 사용하면 배열의 맨 뒤에 원소를 추가할 수도 있습니다.
배열의 원소 삭제
const array = [1, 2, 3];
delete array[1];
console.log(arr); // [1, undefined, 3]
console.log(arr.length); // 3
배열의 원소를 삭제하려면 delete 키워드를 사용하면 됩니다.
하지만 delete 키워드로 원소를 삭제하면 원소 자체를 삭제하진 않고, 해당하는 부분을 undefined로 설정할 뿐입니다.
const array = [1, 2, 3];
// 순서대로 시작 위치, 시작 위치로부터 몇 개의 원소를 삭제할 것인지
array.splice(1, 1);
console.log(arr); // [1, 3]
console.log(arr.length); // 2
배열의 원소를 완전히 삭제하기 위해서는 배열의 내장 메서드인 splice()를 사용하면 됩니다.
배열의 length 프로퍼티
const array = [];
console.log(array.length); // 0
array[0] = 0;
console.log(array.length); // 1
array[100] = 100;
console.log(array.length); // 101
자바스크립트에서 배열의 원소의 개수를 확인하기 위해서 length 프로퍼티를 사용할 수 있습니다.
하지만, 실제 배열에 존재하는 원소의 개수와 일치하지 않을 수도 있습니다.
위 예시 코드를 보면 배열에는 최종적으로 0번 index에 0이라는 값과 100번 index에 100이라는 값, 총 두 가지가 저장됩니다.
하지만 8번 라인의 출력 결과를 보면 원소의 개수인 2가 아니라 101이 출력됩니다.
length 프로퍼티로 배열의 원소의 개수를 확인하는 용도로 사용하긴 하지만, 이렇듯 실제 배열에 저장된 원소의 개수와 일치하지 않을 수 있습니다.
즉, length 프로퍼티는 배열 내에 가장 큰 인덱스에 1을 더한 값이 됩니다. 물론 비어있는 경우는 0이 반환됩니다.
배열의 모든 원소 순회하기
const numbers = [10, 20, 30, 40, 50];
for (let number of numbers) {
console.log(number);
}
for of문법을 사용하면 배열의 원소를 차례대로 하나씩 꺼낼 수 있습니다.
배열 numbers에서 원소를 순서대로 하나씩 꺼내서 변수 number에 할당합니다.
출력 결과는 다음과 같습니다.
10
20
30
40
50
배열 타입
const array = [];
console.log(typeof array); // object
자바스크립트 배열의 타입은 array일 것 같지만, 실제로 확인해 보면 object로 출력됩니다.
타입에 관해서는 이 부분만 유의하고 있으면 될 것 같습니다.
배열의 프로토타입
프로토타입에 대해서는 이전에 정리한 문서를 참고해주세요.
이전에 프로토타입에 대해서 정리했을 때, 객체 리터럴로 생성한 객체의 프로토타입은 Object.prototype 객체였습니다.
반면에 배열의 프로토타입은 Array.prototype 객체가 됩니다.
그리고, Array.prototype 객체의 프로토타입은 Object.prototype 객체입니다.
즉, 배열은 Array.prototype 객체가 가지고 있는 push(), length와 같은 메서드나 프로퍼티들도 모두 사용할 수 있고,
Object.prototype 객체가 가지고 있는 valueOf(), toString()등도 모두 사용할 수 있습니다.