Modern JS Deep Dive 27-37

MM·2022년 11월 7일

JSDeepDive

목록 보기
4/6
post-thumbnail

📃 27장. 배열

🔹 JS의 배열은 배열이 아니다

🔸 밀집 배열

자료구조에서 말하는 정석적인 배열로

  • 동일한 크기의 메모리공간이 빈틈없이 연속적으로 나열된 배열 형태.
  • 하나의 데이터 타입으로 통일되어 있다.

🔸 희소 배열

JS의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체이다!

  • 배열의 요소를 위한 각가의 메모리 공간은 동일하지 않을 수 있다.
  • 연속적으로 이어져 있지 않을수도 있다.
    👉 따라서, 인덱스로 요소에 접근시 일반적인 배열보다 느리지만 요소의 삽입/삭제가 빠르다.

🔹 코딩테스트에 써먹을 만한 부분!

🔸 생성자

const arr1 = new Array(10); //길이가 10인 빈 배열 생성
const arr2 = Array.of(1);   // [1]
const arr3 = Array.from({length: 3}, (_, i)=>i); // [0,1,2]

🔸 메서드

splice로 요소 삽입하기

const result = arr.splice(시작 인덱스, 삭제 요소수, 삽입할 요소 목록..);

fill로 요소 부분 채우기

arr.fill(채울 값, 시작인덱스, 끝인덱스);

flat으로 재귀적인 평탄화 하기

[1, [2, [3, [4]]]].flat(2); //[1,2,3,[4]]
[1, [2, [3, [4]]]].flat(Infinity); //[1,2,3,4]

🥋 accessor method

원본 배열을 직접 변경하지 않는 메서드.

🔸 고차 함수

foreach와 콜백함수 이용해서 원본 배열 변경하기

const numbers=[1,2,3];

numbers.forEach((item, index, arr)=>{arr[index]=item**2;});
console.log(numbers) //1,4,9

👉 참고로, foreach의 return값은 언제나 undefined!

some으로 배열값에 만족하는 요소 존재 유무 판별하기

[5, 10, 15].some(item => item>10); //true

every로 배열값에 만족하지 않는 요소 존재 유무 판별하기

[5, 10, 15].every(item => item>3); //true

🧻 폴리필

최신 사양의 기능을 지원하지 않는 브라우저를 위해 누락된 최신기능을 구현하여 추가하는 것!




📃 30장. Date

🔹 생성자 함수

new Date();  //Date 객체
Date();		 //String



📃 32장. String

🔹 생성자 함수

const str=new String("abc");
str[0]="b"; // 문자열은 원시값이므로 변경할 수 없다. 그대로 abc



📃 33장. Symbol

🔹 예제

const Direction={
	UP: 1,
  DOWN: 2,
  LEFT: 3,
  RIGHT: 4
};

const myDirection = Direction.UP;
if(myDirection === Driection.UP) console.log("위로!");



📃 34장. 이터러블

🔹 이터레이션 프로토콜

🔸 이터러블 프로토콜

  • for..of 순회가 가능하다
  • 스프레드 문법과 배열 디스트럭처링 할당이 가능하다

🔸 이터레이터 프로토콜

  • 이터러블 요소를 탐색하기 위한 포인터 역할
  • next 메서드를 가진다

🛵 지연 평가

데이터가 필요한 시점에 그제서야 데이터를 생성하는 기법.
for..of와 같은 이터러블 프로토콜은 이러한 방법을 통해 데이터를 생성한다.
불필요한 데이터를 미리 생성하지 않아 메모리 낭비가 적고, 필요한 순간에 생성하므로 빠른 실행속도를 가지는 것이 특징!




📃 35장. 스프레드 문법

🔹 사용가능장소

  • 이터러블 객체
    • arguments와 같은 유사 배열 객체
      👉 이터러블이 아닌 유사배열객체는 스프레드 문법 사용 불가!

🔹 스프레드 프로퍼티

그냥 객체도 스프레드 연산자 사용 가능!

const merged= { ...{x:1, y:2}, ...{y:10, z:3} }; 



📃 36장. 디스트럭처링 할당

🔹 배열 디스트럭처링

const arr=[1,2,3];
const [one, two, three] = arr;
const [a, b, c, d=4] = [1,2,3];

🔹 객체 디스트럭처링에 Rest 쓰기

const { x, ...rest } = {x:1, y:2, z:3};
console.log(rest); //{y:2, z:3}



📃 37장. Set과 Map

🔹 Set

profile
중요한 건 꺾여도 그냥 하는 마음

0개의 댓글