22. 배열 (Array)

배열의 특징

• 자바스크립트에서 배열의 타입은 객체 타입이다. 배열 타입이란 것은 따로 존재하지 않는다.
• 배열의 생성자 함수는 Array, 프로토타입 객체는 Array.prototype이다. Array.prototype은 배열을 위한 빌트인 메서드를 제공한다.

배열은 객체지만 일반 객체와 구별되는 특징을 갖는다.

구분	객체	배열
구조	프로퍼티 키와 값	인덱스와 요소
값의 참조	프로퍼티 키	인덱스
값의 순서	X	O
length 프로퍼티	X	O

따라서, 배열은 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조이다.

 

자바스크립트의 배열은 희소 배열이다

희소 배열이란 배열의 요소가 연속적으로 이어져 있지 않고 일부가 비어 있는 배열을 말한다.

• 자바스크립트의 배열은 일반적인 배열의 동작을 흉내내는 객체이다.
• 자바스크립트 배열의 요소는 사실 프로퍼티 값이다. 모든 값은 객체의 프로퍼티 값이 될 수 있다. 따라서 어떤 타입의 값이라도 배열의 요소가 될 수 있다.

 

일반적인 배열과 자바스크립트 배열의 장단점

🤚 일반적인 배열
  ✅ 요소를 빠르게 접근할 수 있다.
  ✅ 특정 요소의 검색, 삽입, 삭제는 비효율적이다.

🤚 자바스크립트 배열
  ✅ 해시 테이블로 구현된 객체이므로 요소를 인덱스로 접근할 때 일반 배열보다는 느리다.
  ✅ 특정 요소의 검색, 삽입, 삭제는 일반 배열보다 빠른 편이다.

 

희소 배열은 사용하지 않는 것이 좋다

자바스크립트는 문법적으로 희소 배열을 허용하지만 사용하지 않는 것이 좋다. 희소 배열은 배열의 기본 개념과도 맞지 않으며, 성능에도 악영향을 준다.

➡️ 배열에는 같은 타입의 요소를 연속적으로 위치시키자!

 

배열 빌트인 메서드

• 원본 배열을 직접 변경하는 메서드와 원본 배열을 변경하지 않고 새로운 배열을 생성해 반환하는 메서드가 있다.
• 가급적 원본 배열을 직접 변경하지 않는 메서드를 사용하자(외부 상태를 직접 변경하는 것은 좋지 않다!!)

 

Array.prototype.push

인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고, 변경된 length 프로퍼티 값을 반환한다.

• 원본 배열을 직접 변경한다.
• push 메서드는 성능이 좋지않다. 마지막 요소로 추가할 요소가 한개라면 length 프로퍼티를 통해 요소를 추가하는 것이 좋다. 그러나 여전히 배열이 직접 변경된다.
• ES6의 스프레드 문법을 사용해 함수 호출 없이 표현식으로 마지막에 요소를 추가해 배열이 직접 변경되지 않도록 하는 것이 좋다.

const arr = [1, 2];

let result = arr.push(3, 4);
console.log(result); // 4
console.log(arr); // [1, 2, 3, 4]

----------------------------------------------------------------------------------
const arr = [1, 2];

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

----------------------------------------------------------------------------------
const arr = [1, 2];

const newArr = [...arr, 3];
console.log(newArr); // [1, 2, 3];
console.log(arr); // [1, 2];

 

Array.prototype.unshift

인수로 전달받은 모든 값을 원본 배열의 선두에 추가하고, 변경된 length 프로퍼티 값을 반환한다.

• 원본 배열을 직접 변경한다.
• ES6의 스프레드 문법을 사용해 함수 호출 없이 표현식으로 선두에 요소를 추가해 배열이 직접 변경되지 않도록 하는 것이 좋다.

const arr = [1, 2];

let result = arr.unshift(3, 4);
console.log(result); // 4
console.log(arr); // [3, 4, 1, 2]

------------------------------------------------------------------------------------
const arr = [1, 2];
const newArr = [3, ...arr];
console.log(newArr); // [3, 1, 2]
console.log(arr); // [1, 2]

 

Array.prototype.concat

인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.
인수로 전달한 값이 배열이면 배열을 해체해 새로운 배열의 요소로 추가한다.

• 원본 배열은 변경되지 않는다.
• ES6 스프레드 문법으로 대체할 수 있다.

let result = [1, 2].concat([3, 4]);
console.log(result); // [1, 2, 3, 4]

------------------------------------------------------------------------------------

result = [...[1, 2], ...[3, 4]];
console.log(result);

결론적으로 ES6의 스프레드 문법을 일관성 있게 사용하는 것이 좋다.

 

Array.prototype.indexOf

Array.prototype.splice

배열에서 특정 요소를 제거할 때 indexOf 메서드를 통해 특정 요소의 인덱스를 얻고, splice 메서드를 사용해 요소를 삭제한다.

const arr = [1, 2, 3, 1, 2];

function remove(array, item) {
  const index = array.indexOf(item);
  
  // 제거할 item이 있다면 제거한다.
  // splice는 원본 배열을 변경한다.
  if (index !== -1) array.splice(index, 1);
  
  return array;
}

console.log(remove(arr, 2)); // [1, 3, 1, 2]
console.log(remove(arr, 10)); // [1, 3, 1, 2]

 

Array.prototype.fill

Array.from

• fill 메서드는 인수로 전달받은 값으로 배열을 채운다. 원본 배열을 직접 변경한다.
• fill 메서드는 같은 값으로만 요소를 채울 수 없다.
• Array.from 메서드를 사용하면 두 번째 인수로 전달한 콜백 함수를 통해 요소 값을 만들면서 배열을 채울 수 있다.

const arr = [1, 2, 3];
arr.fill(0);
console.log(arr); // [0, 0, 0]

--------------------------------------------------------------------------------------
const sequences = (length = 0) => Array.from(new Array(length), (_, i) => i);
console.log(sequences(3)); // [0, 1, 2]