HwangSee

221214 TIL

  • 2022년 12월 14일

오늘 한 일

  • 자바스크립트 완벽가이드 7장 배열 정리

분해 연산자

…를 써서 배열 리터럴 안에 다른 배열 요소를 넣을 수 있다.

let a = [1, 2, 3];
let b = [0, ...a, 4]; // b = [0, 1, 2, 3, 4]
  • 배열 a를 분해해서 그 요소를 새로 생성하는 배열 리터럴 요소로 만든다.

  • 분해 연산자는 배열을 얕게(shallow) 복사할 때도 유용하다

      let original = [1,2,3];
  let copy = [...original];
  copy[0] = 0; // 사본을 수정해도 원본에는 영향 없음
  original[0]; // => 1
  • 분해 연산자는 모든 이터러블 객체에 동작한다.
  • 추후 설명할 세트 역시 이터러블이다.
  • 배열에서 중복된 요소를 제거하고 싶을 때 배열을 세트로 변환하고 즉시 분해 연산자를 사용하여 배열로 되돌릴 수 있다.
let letters = [..."hello world"];
[...new Set(letters)] // => ["h", "e", "l", "o", " ", "w", "r", "d"];

Array() 생성자

  • 인자 없이 호출
let a = new Array();
  • 배열 길이를 나타내는 숫자 인자 하나로 호출
let a = new Array(10);
  • 배열 요소를 두 개 이상 쓰거나 숫자가 아닌 요소를 하나만 넘겨 호출
let a = new Array(5, 4, 3, "test", "good");

Array.of()

  • Array() 생성자를 숫자 하나만 넘겨 호출하면 길이가 입력한 숫자인 새 배열이 리턴된다.
  • ES6의 Array.of()는 이를 해결하기 위해 나온 함수이다.
  • 인자의 개수를 따지지 않고 각 인자를 새 배열의 요소로 사용한다.
Array.of() // => []
Array.of(10) // => [10]

Array.from()

  • ES6에서 도입한 팩토리 메서드이다.
  • 첫번째로 이터러블 객체나 배열 비슷한 객체를 받으며 해당 객체의 요소로 새 배열을 반환한다.
  • Array.from(iterable) = […iterable] 분해 연산자와 메서드의 기능은 동일하다.
  • 배열 비슷한 객체를 진정한 배열로 바꿀 수 있다.

❓  배열 비슷한 객체랑 length 프로퍼티가 있고 이름이 정수인 프로퍼티에 값이 저장된 객체를 뜻한다.

  • Array.from()은 선택 사항으로 두번째 인자를 받는다.
    • 두번째 인자에 함수를 전달하면, 새 배열 생성 시 소스 객체의 각 요소를 이 함수에 전달하고 반환 값을 배열에 저장한다.
											 // 배열 비슷한 객체         // 콜백 함수
let copy = Array.from({length:3, 0:0,1:1,2:2}, (a) => {return a+1});
copy // => [1, 2, 3]
  • map() 메서드와 비슷한 동작을 할 수 있는 콜백 함수이다.
    • Array.from()으로 배열로 만든 다음 map()을 써서 변환하는 것보다 콜백 함수를 사용하는 방법이 더 효율적이다.

배열 요소 읽기와 쓰기

  • 배열 요소에 접근할 때는 [] 연산자를 사용하고 대괄호 왼쪽에는 배열 참조가 있어야 한다.
  • 대괄호 안에는 양의 정수로 평가되는 표현식이 있어야 한다.
  • 자바스크립트의 배열은 특별하지만 결국 객체이다.
    • 배열 요소에 접근할 때 사용하는 대괄호는 객체 프로퍼티에 접근할 때 사용하는 대괄호와 마찬가지로 동작한다.
  • 모든 인덱스는 프로퍼티 이름이 될 수 있다.
  • 프로퍼티 이름은 0 이상 2²³ - 2 이하 범위에 속해야 인덱스로 사용할 수 있다.
  • 배열 인덱스인 프로퍼티를 사용하면 배열에서 length 프로퍼티를 업데이트하는 “특별한 동작”을 한다.
  • 배열 인덱스에는 음수도 정수도 아닌 숫자도 쓸 수 있다.
    • 숫자는 문자열로 변환하고 그 문자열을 프로퍼티 이름으로 사용한다.
  • 이런 프로퍼티는 이름이 양의 정수가 아니므로 배열 인덱스가 아닌 일반적인 객체 프로퍼티로 취급하게 된다.
  • 마찬가지로 양의 정수로 평가되는 문자열을 인덱스로 사용하면 객체 프로퍼티가 아닌 배열 인덱스로 취급한다.
let a = [];
a[-1.23] = true;
a["1000"] = 0;
a[1.000] = 1;

image

  • 자바스크립트 배열은 특별한 타입의 객체 프로퍼티 이름이기 때문에 out of bounds 에러가 일어나지 않는다

    → undefined가 반환된다.

성긴 배열

  • 긴 성긴 배열은 빽빽한 배열에 비해 느리지만 메모리를 효율적으로 사용하는 방법으로 구현된다.
  • 이런 배열에서 요소를 검색하는 시간은 일반적인 객체 프로퍼티 검색에 필요한 시간과 비슷하다 ?
  • 성긴 배열을 만드는 방법
    • 리터럴에 콤마를 반복 : [1,,3]
    • delete 연산자 사용
let a1 = [,]; // 길이는 1이고 요소가 없다.
let a2 = [undefined]; // undefined 요소가 하나 있다.
0 in a1 // => false: a1은 인덱스에 요소가 없다.
0 in a2 // => true: a2는 인덱스 0에 undefined 값이 있다.
검색