[Modern javascript] 배열(1)

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

// 인수로 전달받은 값 0을 배열의 인덱스 1부터 3 이전(인덱스 3 미포함)까지 요소로 채운다.
arr.fill(0, 1, 3);

// fill 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [1, 0, 0, 4, 5]​

const arr = [1, 2];

// 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.
let result = arr.shift();
console.log(result); // 1

// shift 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [2]

자바스크립트의 배열은 자료구조의 배열과 다른, 

-배열의 동작을 흉내낸 해시 테이블로 구현된 객체다.

- 자바스크립트 배열은 인덱스로 배열 요소에 접근하는 경우는 일반적인 배열보다 느리지만 특정 요소를 검색하거나 삽입/삭제 하는 경우에는 빠르다.

 

- 배열은 메모리 공간에 연속적으로 할당이 되어있어야 한다. 즉 같은 자료형의 데이터만 가지고 있어야 일정한 메모리 주소를 연속적으로 가지는데 자바스크립트의 배열은 어떤 자료형도 들어갈 수 있으므로 배열은 아니다.

const arr = [
  'string',
  10,
  true,
  null,
  undefined,
  NaN,
  Infinity,
  [ ],
  { },
  function () {}
];

 

- 자바스크립트는 희소 배열을 문법적으로 허용한다. (값의 개수와 배열의 길이가 다를 수 있음)

// 희소 배열
const sparse = [, 2, , 4];

// 희소 배열의 length 프로퍼티 값은 요소의 개수와 일치하지 않는다.
console.log(sparse.length); // 4
console.log(sparse); // [empty, 2, empty, 4]

// 배열 sparse에는 인덱스가 0, 2인 요소가 존재하지 않는다.
console.log(Object.getOwnPropertyDescriptors(sparse));
/*
{
  '1': { value: 2, writable: true, enumerable: true, configurable: true },
  '3': { value: 4, writable: true, enumerable: true, configurable: true },
  length: { value: 4, writable: true, enumerable: false, configurable: false }
}
*/

 

■ 배열 메소드

◎ Array.prototype.push

- push 메서드는 성능 면에서 좋지 않음.

- push 메서드는 원본 배열을 바꾸는 부수 효과 발생

 => 스프레드 문법을 활용하는 것이 좋음

const arr = [1, 2];

// ES6 스프레드 문법
const newArr = [...arr, 3];
console.log(newArr); // [1, 2, 3]

 

◎ Array.prototype.unshift

- 인수로 전달받은 모든 값을 배열의 선두에 추가

const arr = [1, 2];

// 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 값을 반환한다.
let result = arr.unshift(3, 4);
console.log(result); // 4

// unshift 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [3, 4, 1, 2]

- 원본 배열을 바꾸므로 스프레드 문법 활용 권장

const arr = [1, 2];

// ES6 스프레드 문법
const newArr = [3, ...arr];
console.log(newArr); // [3, 1, 2]

 

◎ Array.prototype.shift

- 원본 배열에서 첫번째 요소를 제거하고 요소를 반환

const arr = [1, 2];

// 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.
let result = arr.shift();
console.log(result); // 1

// shift 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [2]

 

◎ Array.prototype.concat

- 인수로 전달된 값들을 원본 배열에 추가하여 새로운 배열 생성

- concat으로 shift와 push도 구현할 수 있음.

- 마찬가지로 concat대신 스프레드 문법 사용을 권장

const arr1 = [1, 2];
const arr2 = [3, 4];

// 배열 arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다.
// 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다.
let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4]

// 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다.
result = arr1.concat(3);
console.log(result); // [1, 2, 3]

// 배열 arr2와 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다.
result = arr1.concat(arr2, 5);
console.log(result); // [1, 2, 3, 4, 5]

// 원본 배열은 변경되지 않는다.
console.log(arr1); // [1, 2]

 

◎ Array.prototype.splice

3개의 매개 변수가 있다.

start - 요소 제거를 시작할 인덱스 -를 붙이면 뒤에서부터

deleteCount - 몇 개를 지울 것인지. 생략 시 start 뒤 모든 요소 제거

items - 제거한 위치에 삽입할 요소들. 생략시 요소만 제거

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

// 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다.
const result = arr.splice(1, 2, 20, 30);

// 제거한 요소가 배열로 반환된다.
console.log(result); // [2, 3]
// splice 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [1, 20, 30, 4]

- filter 메서드를 사용하여 중복된 모든 특정 요소를 제거할 수 있음

 

◎ Array.prototype.join

- 배열의 요소를 문자열로 변환한 후 구분자로 연결한 문자열 반환

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

// 기본 구분자는 ','이다.
// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 기본 구분자 ','로 연결한 문자열을 반환한다.
arr.join(); // -> '1,2,3,4';

// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 빈문자열로 연결한 문자열을 반환한다.
arr.join(''); // -> '1234'

// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 구분자 ':'로 연결한 문자열을 반환한다.ㄴ
arr.join(':'); // -> '1:2:3:4'

 

◎ Array.prototype.reverse

- 원본 배열의 순서를 뒤집는다.

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

// reverse 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [3, 2, 1]
// 반환값은 변경된 배열이다.
console.log(result); // [3, 2, 1]

 

◎ Array.prototype.fill

- 인수로 전달받은 값을 배열에 채운다

• 첫번째 인수: 채울 값
• 두번째 인수: 시작 인덱스
• 세번째 인수: 끝 인덱스

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

// 인수로 전달받은 값 0을 배열의 인덱스 1부터 3 이전(인덱스 3 미포함)까지 요소로 채운다.
arr.fill(0, 1, 3);

// fill 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [1, 0, 0, 4, 5]

 

◎ Array.prototype.includes

- 배열에 특정 요소가 포함되어있는지 Boolean 체크

- 두번째 인덱스로 검색 시작 인덱스 설정

const arr = [1, 2, 3];

// 배열에 요소 1이 포함되어 있는지 인덱스 1부터 확인한다.
arr.includes(1, 1); // -> false

// 배열에 요소 3이 포함되어 있는지 인덱스 2(arr.length - 1)부터 확인한다.
arr.includes(3, -1); // -> true

 

◎ Array.prototype.flat

- 재귀적으로 배열을 평탄화 한다.

// 중첩 배열을 평탄화하기 위한 깊이 값의 기본값은 1이다.
[1, [2, [3, [4]]]].flat();  // -> [1, 2, [3, [4]]]
[1, [2, [3, [4]]]].flat(1); // -> [1, 2, [3, [4]]]

// 중첩 배열을 평탄화하기 위한 깊이 값을 2로 지정하여 2단계 깊이까지 평탄화한다.
[1, [2, [3, [4]]]].flat(2); // -> [1, 2, 3, [4]]
// 2번 평탄화한 것과 동일하다.
[1, [2, [3, [4]]]].flat().flat(); // -> [1, 2, 3, [4]]

// 중첩 배열을 평탄화하기 위한 깊이 값을 Infinity로 지정하여 중첩 배열 모두를 평탄화한다.
[1, [2, [3, [4]]]].flat(Infinity); // -> [1, 2, 3, 4]