자바스크립트 셀프 QnA(8): HOOOAAAArray!

9rganizedChaos·2021년 10월 30일
0
post-thumbnail

(<자바스크립트 셀프 QnA> 시리즈에 작성된 포스팅들은 각 주제에 해당하는 <모던 자바스크립트 딥다이브> 챕터를 읽으며 요약한 내용입니다. 더 자세한 내용은 <모던 자바스크립트 딥다이브>를 참고해주세요.)

모던 자바스크립트 딥다이브

Q1 배열이란 무엇인가요?

  • 자바스크립트에 배열이라는 타입은 존재하지 않는다. 배열은 객체 타입이다.
  • 배열은 배열리터럴, Array 생성자함수, Array.of, Array.from 메서드로 생성할 수 있다.

  • 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조이다. 하지만 자바스크립트의 배열은 일반적인 의미의 배열과 다르다. 즉, 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다.
  • 자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체이다.
  • 자바스크립트의 배열의 요소는 사실 프로퍼티 값이다. 그러니 자바스크립트 배열은 해시 테이블로 구현된 객체나 마찬가지인 것이다.
  • 자바스크립트 배열은 인덱스로 배열 요소에 접근하는 경우에는 일반적인 배열보다 느리지만 특정 요소를 검색하거나 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠르다.

  • length 프로퍼티에 임의의 값을 할당해줄 수도 있다!
  • 현재 length보다 작은 값을 할당하면 배열의 길이가 줄어들고, 더 큰 값을 할당할 경우 length 값은 변경되지만 실제로 배열의 길이가 늘어나지 않는다. empty로 출력됨. 즉 값이 없어 비어있는 경우에는 메모리 공간으 ㄹ확보하지 않으며 빈 요소를 따로 생성하지도 않는다.

Q2 배열을 만드는 방법에는 무엇이 있나요?

  • 위에서 언급했다시피 Array 생성자 함수를 사용하거나 배열 리터럴을 사용할 수 있습니다.
  • Array.of: 전달 받은 인수를 요소로 갖는 배열을 생성한다.
  • Array.from: 유사 배열 객체 또는 이터러블 객체를 인수로 전달 받아 배열로 변환한다.

Q3 배열 메서드에 대해 알고 있는대로 설명해주세요.

Array.prototype.indexOf

  • indexOf의 두번쨰 인수는 검색을 시작할 인덱스이다. 두 번째 인수를 생략하면 처음부터 검색한다.

Array.prototype.push

  • push 메서드는 성능 면에서 좋지 않다. 마지막 요소로 추가할 요소가 하나 뿐이라면, length 프로퍼티를 사용하여 배열의 마지막에 요소를 직접 추가하는 편이 좋다. 이 방법이 push 메서드 보다 더 빠르다.
  • 또한 push 메서드는 원본 배열을 직접 변경하기 때문에 push 메서드보다는 ES6의 전개문법을 사용하는 편이 더 좋다.
const arr = [1, 2];
const newArr = [...arr, 3];

Array.prototype.unshift

  • 이 역시 ES6의 전개문법을 사용하는 편이 더 좋다.

Array.prototype.concat

  • 인수로 숫자를 전달할 경우, 배열의 마지막 요소르 해당 인수를 추가해 새로운 배열을 만들어 반환한다.
  • 그러나 사실 concat도 ES6의 스프레드 문법으로 대체가 가능하며, 이 편이 더 효율적인 방법이다.

Array.prototype.splice

  • 제거한 요소가 배열로 반환된다.
  • 요소의 개수를 0으로 지정하면 아무런 요소도 제거되지 않고 새로운 요소들을 삽입한다.
  • splice 메서드의 두 번째 인수, 즉 제거할 요소의 개수를 생략하면 첫 번쨰 인수로 전달된 시작 인덱스부터 모든 요소를 제거한다. (슬라이스와 동일)

Array.prototype.slice

  • 전달한 인수가 음수인 경우 배열의 띁에서의 인덕스를 나타낸다. slice(-2)는 마지막 두 개의 요소를 복사하여 배열로 반환한다.
  • slice를 통해 배열을 복사할 때 이는 얕은 복사이다.

Array.prototype.join

  • 디폴트 구분자는 콤마이다.

Array.prototype.fill

  • 두 번째 인수로 요소 채우기를 시작할 인덱스를 전달할 수 있다.
  • 세 번째 인수로 요소 채우기를 멈출 인덱스를 전달할 수 있다.

Array.prototype.includes

  • 두번째 인수로 검색을 시작할 인덱스를 전달할 수 있다.
  • 두 번째 인수에 음수를 전달하면 length프로퍼티 값과 음수 인덱스를 합산하여 검색 시작 인덱스를 결정한다.
  • 배열에 NaN의 포함되어 있는지 여부를 확인할 수 없다.

Array.prototype.flat

  • 인수로 전달한 깊이만큼 재귀적으로 패열을 평탄화한다.
const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
profile
부정확한 정보나 잘못된 정보는 댓글로 알려주시면 빠르게 수정토록 하겠습니다, 감사합니다!

0개의 댓글