27 배열

배열이란

• 여러 개의 값을 순차적으로 나열한 자료구조
• 배열이라는 타입은 존재하지 않음 -> 객체 타입
  • 요소(element): 배열이 가지고 있는 값
  • 인덱스(index): 배열에서 자신의 위치를 나타내는 0 이상의 정수
  • length 프로퍼티 : 배열의 길이

자바스크립트 배열은 배열이 아니다

• 일반적인 배열의 동작을 흉내 낸 특수한 객체

  • 특정 요소를 검색하거나 요소를 삽입, 삭제하는 경우 일빤적인 배열보다 빠름
  • 배열이 일반 객체보다 약 2배 정도 빠름
    
    

• 밀집 배열(dense array): 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접

  검색 대상 요소의 메모리 주소 = 배열의 시작 메모리 주소 + 인덱스 * 요소의 바이트 수
  ex) 메모리 주소 1000에서 시작하고 각 요소가 8바이트인 배열

  • 인덱스가 0 인 요소의 메모리 주소 : 1000 + 0 * 8 = 1000
  • 인덱스가 0 인 요소의 메모리 주소 : 1000 + 1 * 8 = 1008
  • 인덱스가 0 인 요소의 메모리 주소 : 1000 + 2 * 8 = 1016

• 배열은 인덱스를 통해 효율적으로 요소에 접근할 수 있는 장점

  • 선형 검색(linear search, 시간 복잡도 O(n) : 정렬되지 않은 배열에서 특정한 요소를 검색하는 경우 배열의 모든 요소를 처음부터 특정 요소를 차례대로 검색하는 것

// 선형 검색을 통해 특정요소 검색
function linearSearch(array, target) {
  const length = array.length;
  
  for(let i = 0; i < length; i++){
    if (array[i] === target) return i;
  }
  return -1;
}

console.log(llinearSearch([1, 2, 3, 4, 5, 6], 3)); // 2
console.log(llinearSearch([1, 2, 3, 4, 5, 6], 0)); // -1

length 프로퍼티와 희소 배열

• length 프로퍼티의 값은 배열에 요소를 추가하거나 삭제하면 자동 갱신

const arr = [1, 2, 3];
consol.log(arr.length); //3 

arr.push(4);
console.log(arr.length); //4

arr.pop();
console.log(arr.length); // 3

// length 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어듬
arr.length = 2;
console.log(arr); // [1, 2]

const arr2 = [1];
// 현재 length 프로퍼티 값인 1보다 큰 숫자 값 3을 length 프로퍼티에 할당
arr2.length = 3;
console.log(arr2.length); // 3
console.log(arr2); // [1, empty * 2]

• 희소 배열(sparse array) : 연속적으로 이어져 있지 않는 배열
  • length와 배열 요소의 개수가 일치하지 않음 -> 언제나 length > 실제 요소 개수

const sparse = [, 2, , 4];

console.log(sparse.length); // 4
console.log(sparse); // [empty, 2, empty, 4]

// 배열sparse에는 인덱스가 0, 2 인요소가 존재 하지 않음

배열 생성

배열 리터럴

• 배열 리터럴에 요소를 생략하면 희소 배열 생성

const arr = [1, , 3]; // 희소 배열
console.log(arr.length); //3
console.log(arr); // 1, empty, 3]
console.log(arr[1]); // undefiend

Array 생성자 함수

• Array 생성자 함수를 통해 배열을 생성가능
• Array 생성자 함수는 전달된 인수의 개수에 따라 다르게 동작함

const arr = new Array(10);
console.log(arr); // [empty * 10]
consile.log(arr.length); // 10

// 전달된 인수가 없는 경우 빈 배열 생성
new Array(); // []

// 전달된 인수가 2개 이상이면 인수를 요소로 갖는 배열 생성
new Array(1, 2, 3); // [1, 2, 3]

// 전달된 인수가 1개지만 숫자가 아니면 인수를 요소로 갖는 배열 생성
new Array({}); // [{}]

Array.of

• ES6 도입된 Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성

Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of('string'); // ['string']

Array.from

• ES6에서 도입된 Array.from 메서드는 유사 배열 객체(array-like object) 또는 이터러블 객체(iterable object)를 인수로 전달받아 배열로 변환하여 반환

//유사 배열 객체를 반환하여 배열을 생성
Array.from({ length: 2, 0: 'a', 1: 'b' }); // ['a', 'b']
// 이터러블을 변환하여 배열을 생성. 문자는 이터러블
Array.from('Hello'); // [ 'H', 'e', 'l', 'l', 'o']
// length만 존재하는 유사 배열 객체를 전달하면 undefined 요소로 채움
Array.from({ length: 3}); // [undefined, undefined, undefined]
// 두 번째 인수로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환
Array.from({ length: 3 }, (_, i) => i); // [ 0, 1, 2]

💡 유사 배열 객체와 이터러블 객체

• 유사 배열 객체: 마치 배열처럼 인덱스로 프로퍼티 값 접근 가능, length 프로퍼티를 갖는 객체
  • 배열처럼 for 문으로 순회가능

// 유사 배열 객체
const arrayLike = {
  '0': 'apple',
  '1': 'banana',
  '2': 'orange',
  length: 3
};

// 유사 배열 객체는 마치 배열처럼 for문으로 순회 가능
for (let i = 0; i <arrayLike.length; i++) {
  console.log(arrayLike[i]); // apple banana orange
}

배열 요소의 참조

• 배열의 요소를 참조할 대 대괄호([]) 표기법을 사용

const arr = [1, 2];

console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // undefined

배열 요소의 추가와 갱신

• 배열에도 요소를 동적으로 추가 가능

const arr = [0];

arr[1] = 1;
console.log(arr); // [0, 1]
console.log(arr.length); // 2

arr[100] = 100;
console.log(arr); // [0, 1, empty * 98, 100]
console.log(arr.length); // 101

// 요소 값 갱신
arr[1] = 10;
console.log(arr); // [0, 10, empty * 98, 100]

배열 요소 삭제

• delete 연산자 사용
  • 희소 배열이 발생하기 때문에 delete 연산자는 사용하지 않는 것이 좋음
  • Array.prototype.splice 메서드 사용

const arr = [1, 2, 3];

delete arr[1] = 1;
console.log(arr); // [1, empty, 3]
// length 프로퍼티에 영향을 주지 않음 -> 희소 배열 
console.log(arr.length); // 3


const arr1 = [1, 2, 3];
// splice(삭제 시작 인덱스, 삭제할 요소 수)
arr1.splice(1, 1);
console.log(arr1); // [1, 3]
// length 프로퍼티가 자동 갱신
console.log(arr1.length); // 2

📖 참고도서 : 모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리 / 이웅모 저 | 위키북스