27장: 배열

배열

• 여러 개의 값을 순차적으로 나열한 자료구조

배열 메서드

Array.isArray
Array.prototype.indexOf 
Array.prototype.push
Array.prototype.pop
Array.prototype.unshift
Array.prototype.shift
Array.prototype.concat
Array.prototype.splice
Array.prototype.slice
Array.prototype.join
Array.prototype.reverse
Array.prototype.fill
Array.prototype.includes
Array.prototype.flat

• 자바스크립트에 배열이라는 타입은 존재하지 않는다. 배열은 객체타입이다. 그러나...

  • 일반 객체보다 인덱스로 값 삽입시 성능 테스트 약 2배 정도 빠르다 (27-11)

  • 배열 인덱스에 정수 아닌 값을 사용할 경우, 요소가 생성되는것이 아니라 프로퍼티가 생성된다.

• 자바스크립트는 밀집 배열 (dense)이 아닌, 희소 배열 (sparse) 사용한다.

  • 자바스크립트 배열은 해시 테이블로 구현된 객체

  • 희소 배열

    • 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 요소가 연속적이지 않은 배열

    • 장점

      • 삽입 또는 삭제 빠르다

    • 단점

      • 일반 배열보다 원소까지 접근이 느리다

    • Length 와 배열요소의 개수가 일치하지 않는다

  • 참고

    일반적인 배열보다 요소 접근이 느린 단점을 보완하기 위해, 모던 JS 엔진은 배열을 일반 객체와 구별하여 좀 더 배열처럼 동작하도록 만든 것이다.

    희소배열은 연속적인 값의 집합이라는 배열의 기본적인 개념과 맞지 않으며, 성능에도 좋지 않은 영향을 준다. 최적화가 잘 되어있는 모던 자바스크립트 엔진은 요소의 타입이 일치하는 배열을 생성할때 일반적인 의미의 배열처럼 연속된 메모리 공간을 확보하는것으로 알려져있다.

    @@ 희소배열일때도 있고 일반 배열 일때도 있다는 건가!?

• Accessor vs Mutator Method (27-41)

  • Accessor 예

    • concat

      • 원본배열 직접변경하지않고 새로운 배열을 생성하여 반환

  • Mutator (직접 변경) 예

    • push

  • 원본 배열 직접 변경은 사용시 주의해야 될때가 있어, 가급적 Accessor 사용하자

  • push 메서드 보단 ES6의 스프레드 문법 사용하기

• delete vs splice

  • 요소를 빈공간으로 놔둘건지 아니면, 완전 지울건지에 따라

• 배열 순회는 for in 보다는 forEach 메소드, for 문, for…of 문을 사용하자.

  • in은 객체의 반복에서 사용

  • 배열에 in 사용시, 성능에도 안좋음)

• indexOf 보다 ES7에서 새롭게 도입된 includes 메소드를 사용하면 보다 가독성이 좋다.

  • 또한, indexOf와 다르게, NaN이 포함되어 있는지 알 수 있음

• push 대신 concat 사용 시 배열을 해체하여 처리 (27-59)

• push 보다는 length 프로퍼티를 사용하여 직접 요소를 추가가 더 빠르다

• push 메소드보다는 ES6의 spread 문법을 사용하는 편이 좋다

• ES6의 스프레드 문법

• push 메서드 보단 ES6의 스프레드 문법 사용하기

• unshift 메서드보다는 ES6의 스프레드 문법 사용하기

• 깊은 복사를 위해서는 Lodash 라이브러리의 cloneDeep 메서드를 사용하는것을 추천한다.

  • 깊은 복사는 객체에 중첩되어있는 객체까지 모두 복사하는것

// 배열 생성법
// 배열 리터럴, Array 생성자 함수, Array.of, Array.from
const arr = ['apple', 'banana', 'orange'];
new Array(1,2,3);
Array.of(1, 2, 3); // -> [1, 2, 3]
// from: 유사배열객체 또는 이터러블객체를 인수로 전달받아 배열로 변환
// https://soraji.github.io/js/2021/01/12/es6_1/
Array.from({ length: 2, 0: 'a', 1: 'b' }); // -> ['a', 'b']
Array.from('Hello'); // -> ['H', 'e', 'l', 'l', 'o']

const arr = ['apple', 'banana', 'orange'];
arr[0] // -> 'apple'
arr[1] // -> 'banana'
arr[2] // -> 'orange'

arr.indexOf('banana') // 1

// 배열 길이 변경 (최대값 2^32-1)
const arr = [1, 2, 3, 4, 5];
arr.length = 3;
console.log(arr); // [1, 2, 3]

const arr = [1];
// 현재 length 프로퍼티 값인 1보다 큰 숫자 값 3을 length 프로퍼티에 할당
arr.length = 3;
// length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다.
console.log(arr.length); // 3
console.log(arr); // [1, empty × 2]

// 배열의 순회
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 'apple' 'banana' 'orange'
}

typeof arr // -> object

arr.constructor === Array // -> true

// 여러 타입 한꺼번에 넣을 수 있음
const arr = [
  'string',
  10,
  true,
  null,
  undefined,
  NaN,
  Infinity,
  [ ],
  { },
  function () {}
];

const arr1 = [1, 2, 3];
console.log(arr.length); // 3
arr1.push(4);
arr1.pop();
arr1.pop();
arr1.unshift(10);
arr1.shift();

// 중간 요소를 추가, 제거하는 경우
const arr2 = [1, 4, 5];
arr2.splice(1, 0, 2, 3) 

const arr2 = [1, 2, 3, 4, 5];
const arr3= arr2.slice(1, 4)
arr3

const arr1 = [1, 2, 3];
const arr2 = [4,5,6]
const arr3 = arr1.concat(arr2)
arr3

const arr1 = [1, 2, 3];
const arr2 = arr1.join(":")
arr2

const arr1 = [1, 2, 3].reverse();
arr1

const arr1 = new Array(10);
arr1.fill(0);
arr1

const arr1 = [1,2,3,4,5,6,7];
console.log(arr1.includes(1))

// ES10에서 도입
const arr1 = [1,2,3,4,[5,6,7,8,9]];
const arr2 = arr1.flat();
arr2

배열 고차 함수

• 고차함수 = 함수를 인수로 전달받거나 함수를 반환하는 함수

Array.prototype.sort
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.some
Array.prototype.every
Array.prototype.find
Array.prototype.findIndex
Array.prototype.flatMap

Sort

const points = [40, 100, 1, 5, 2, 25, 10];

points.sort();

// 숫자 요소들로 이루어진 배열은 의도한 대로 정렬되지 않는다.
console.log(points); // [1, 10, 100, 2, 25, 40, 5]

points.sort((a, b) => a - b);
console.log(points); // [ 1,  2, 5, 10,  25, 40, 100]

커스텀 sort 기능

const todos = [
  { id: 4, content: 'JavaScript' },
  { id: 1, content: 'HTML' },
  { id: 2, content: 'CSS' }
];

// 비교 함수. 매개변수 key는 프로퍼티 키다.
function compare(key) {
  // 프로퍼티 값이 문자열인 경우 - 산술 연산으로 비교하면 NaN이 나오므로 비교 연산을 사용한다.
  // 비교 함수는 양수/음수/0을 반환하면 되므로 - 산술 연산 대신 비교 연산을 사용할 수 있다.
  return (a, b) => (a[key] > b[key] ? 1 : (a[key] < b[key] ? -1 : 0));
}

// id를 기준으로 오름차순 정렬
todos.sort(compare('id'));
console.log(todos);

Filter

// 27-112
class Users {
  constructor() {
    this.users = [
      { id: 1, name: 'Lee' },
      { id: 2, name: 'Kim' }
    ];
  }

  // 요소 추출
  findById(id) {
    // id가 일치하는 사용자만 반환한다.
    return this.users.filter(user => user.id === id);
  }

  // 요소 제거
  remove(id) {
    // id가 일치하지 않는 사용자를 제거한다.
    this.users = this.users.filter(user => user.id !== id);
  }
}

Reduce

reduce 로 진짜 구현 할수 있는게 많다

const values = [1, 2, 3, 4, 5, 6];

const average = values.reduce((acc, cur, i, { length }) => {
  // 마지막 순회가 아니면 누적값을 반환하고 마지막 순회면 누적값으로 평균을 구해 반환한다.
  return i === length - 1 ? (acc + cur) / length : acc + cur;
}, 0);

console.log(average); // 3.5

과일 별 개수를 세어보자

// 27-117
const fruits = ['banana', 'apple', 'orange', 'orange', 'apple'];

const count = fruits.reduce((acc, cur) => {
    acc[cur] = (acc[cur] || 0) + 1;
    return acc;
}, {});

console.log(count) // { banana: 1, apple: 2, orange: 2 }

Flat 해보자

const values = [1, [2, 3], 4, [5, 6]];

const flatten = values.reduce((acc, cur) => acc.concat(cur), []);
// [1] => [1, 2, 3] => [1, 2, 3, 4] => [1, 2, 3, 4, 5, 6]

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

Some

// 배열의 요소 중에 10보다 큰 요소가 1개 이상 존재하는지 확인
[5, 10, 15].some(item => item > 10); // -> true

Every

// 배열의 모든 요소가 3보다 큰지 확인
[5, 10, 15].every(item => item > 3); // -> true

find

// Array#find는 요소를 반환한다.
[1, 2, 2, 3].find(item => item === 2); // -> 2

// Array#filter는 배열을 반환한다.
[1, 2, 2, 3].filter(item => item === 2); // -> [2, 2]

findIndex

const users = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Park' }
];

// id가 2인 요소의 인덱스를 구한다.
users.findIndex(user => user.id === 2); // -> 1

// name이 'Park'인 요소의 인덱스를 구한다.
users.findIndex(user => user.name === 'Park'); 

Map

const arr = ['hello', 'world'];

// map과 flat을 순차적으로 실행
arr.map(x => x.split('')).flat();
// -> ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

// flatMap은 map을 통해 생성된 새로운 배열을 평탄화한다.
arr.flatMap(x => x.split(''));
// -> ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

flatMap