🍌 JavaScript

Array

Array Literal

Array Literal(배열 리터럴)은 쉼표(,)로 구분한 값을 대괄호([])로 묶어 표현한다.

let evens = [2, 4, 6, 8, 10];

• [...] : 배열 리터럴
• Elements of array(배열의 요소) : 배열 값 하나, (예: 2, 4, 6, 8, 10)
• Index(인덱스, 요소 번호) : 배열 요소에 매긴 번호, 배열의 첫 번째 요소는 인덱스 0, 두 번째 요소는 인덱스 1, 마지막 요소는 배열의 length 속성 값에서 1을 뺀 값에 위치

📌 배열 리터럴의 대괄호는 코드 블록을 의미하는 것이 아니라 값으로 평가되기 때문에 닫는 괄호 뒤에는 세미콜론(;)을 붙임

let empty = [];
console.log(empty); // (0) []

let arr = [1, , 5];
console.log(arr); // (3) [1, …, 5]

let various = [3.14, "pi", true, { x: 1, y: 3 }, [1, 3, 5, 7]];

• 배열 리터럴 안에 어떠한 요소도 작성하지 않으면 빈 배열이 생성 됨
• 배열의 요소에는 변수와 마찬가지로 모든 타입이 올 수 있음

length property

• 배열 요소의 최대 인덱스 값 + 1
• 배열의 길이라고 부름

let evens = [2, 4, 6, 8, 10];
console.log(evens.length); // 5

evens.length = 2;
console.log(evens); // (2) [2, 4]

📌 현재 배열의 요소 개수보다 작고 0보다 큰 정숫값을 대입하면 배열의 길이 줄어듦과 동시에 배열 길이를 넘는 인덱스 번호에 할당된 배열 요소는 삭제됨

Reference

let years = [2023, 2024, 2025];
console.log(years[1]); // 2024
console.log(years[2] == years["2"]); // true
console.log(years["2"] == years["02"]); // false
console.log(years[4]); // undefined

• 인덱스를 활용하여 배열 요소 참조
• 배열 요소 번호로 숫자 값 대신 문자열 사용 가능
• years['2']만이 실제 배열 인덱스이고, years['02']는 배열 순회에서 방문되지 않는 임의의 문자열 속성임

📌 years[2]의 2는 JavaScript 엔진에 의해 암시적 toString 변환을 통해 문자열로 강제 변환됨

Push() , Delete

let arr = ["A", "B", "C"];
arr[3] = "D";
console.log(arr); // (4) ['A', 'B', 'C', 'D']

arr.push("E");
console.log(arr); // (5) ['A', 'B', 'C', 'D', 'E']

delete arr[1];
console.log(arr); // (5) ['A', …, 'C', 'D', 'E']

console.log(arr[5]); // undefined

• push() : 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환
• delete() : 특정 배열의 요소 삭제, 배열의 length property 값은 바뀌지 않음
• 없는 배열 요소를 읽으려고 시도하면 undefined 반환

📌 배열은 Array 객체이며 객체로 배열의 기능을 가상으로 흉내 낸 것이며, Array 객체는 배열의 인덱스를 문자열로 변환해서 그것을 프로퍼티로 이용함
객체에 없는 프로퍼티를 읽으려고 시도하면 undefined 반환 됨

Sparse Table(희소 배열)

Sparse Table(희소 배열)은 배열의 요소를 추거하거나 제거하면서 배열 원소의 위치가 연속적이지 않은 배열이다.

let arr = ["A", "B", "C"];
arr[4] = "E";
console.log(arr); // (5) ['A', 'B', 'C', …, 'E']

• 희소 배열의 길이는 배열 요소의 개수보다 큼

배열 요소가 있는지 확인하는 방법 :

• for/in 문
• hasOwnProperty()

for (let i in arr) console.log(i); // 0 1 2 4
console.log(arr.hasOwnProperty("3")); // false
console.log(arr.hasOwnProperty("1")); // true

Array - Constructor

생성자를 활용하여 배열 생성

let evens = new Array(2, 4, 6, 8, 10); // [2, 4, 6, 8, 10]을 생성
let empty = new Array(); // 빈 배열 []을 생성
let various = new Array(3.14, "pi", true, { x: 1, y: 3 }, [1, 3, 5, 7]);

let arr = new Array(3);
console.log(arr.length); // 3

📌 배열 생성자의 인수가 한 개고 그 값이 양의 정수이면 인수는 배열의 길이를 뜻하게 됨

참고문헌,
이소 히로시, 『모던 자바스크립트 입문』, 서재원 역, 길벗, 2019
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array