Skip to content

[정리] 5주차, 30~37

live-small edited this page Sep 4, 2021 · 1 revision

5주차

chater 30 ~ 37

table of keyword

1. Date
2. RegExp
3. String
4. 7번째 데이터 타입 Symbol
5. 이터러블
6. 스프레드 문법
7. 디스트럭처링 할당
8. Set과 Map

30장 Date

  • 표준 빌트인 객체
  • 객체 생성 방법 4가지
new Date();
new Date(milisecons);   // 초 단위 숫자
new Date(DateString);   // 날짜 포맷의 스트링
new Date(year,month);   // 연도, 달

31장 RegExp

  • 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어
  • 자바스크립트의 고유 문법은 아니다.
  • 정규표현식 객체 생성
    1. 리터럴 ( /regexp/i )
    2. 생성자 함수
  • 정규표현식 구성: 패턴 + 플래그
    • 플래그의 기본값: 대소문자 구별, 만족하는 값 1가지만 찾고 종료.
    • 자주쓰는 플래그: i(대소문자 구별x), g(만족하는 모든 값 찾음)
    • \w : [A-Za-z0-9_]
정의한 패턴에 전방, 후방에도 조건을 붙여 세밀하게 정규표현식을 이용하고 싶다면? lookaround 문법

32장 String

  • String 래퍼 객체는 읽기 전용이라 직접적으로 수정하지 못한다.

33장 7번째 데이터 타입 Symbol

  • ES6에서 도입. 변경 불가능한 원시타입
  • new 키워드로 생성되지 않음
  • symbol 타입으로 프로퍼티를 은닉할 수 있음. -> 표준 빌트인 객체를 확장할 때 사용 가능.( 유일해서 프로퍼티 키가 중복되지 않음 )

34장 이터러블

  • 이터레이션 프로토콜 : 순회 가능한 자료구조를 만들기 위한 규칙
    • symbol.iterator 메서드 구현, 메서드가 next 메서드를 갖는 이터레이터 반환, 이터레이터는 value, done 프로퍼티 값을 갖음.
  • 이터러블 : symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체
    • for..of 문으로 순회 가능
    • 스프레드 문법 / 배열 디스트럭처링 할당 가능.
  • 빌트인 이터러블 : Array, String, Map, Set, TypedArray, Arguments, DOM 컬렉션NodeList, HTMLCollection
유사배열객체가 for..of문, 스프레드 문법 / 배열 디스트럭처링 할당을 이용하고 싶다면 ?

Array.from(유사배열객체)이용해 배열로 변환하면 가능.

35장 스프레드 문법

  • ... 키워드 사용
  • 이터러블에 한정해서 사용가능 => 값을 생성하는게 아니기 때문에 변수 할당은 안됨, 단 다음 3가지에서 사용.
    1. 함수 호출문의 인수 목록
    2. 배열 리터럴의 요소 목록
    3. 객체 리터럴의 프로퍼티 목록

36장 디스트럭처링 할당

  • 구조화된 배열과 같은 이터러블 또는 객체를 구조파괴하여 1개 이상의 변수에 개별적으로 할당하는 것.
  • 2가지 방법이 있다.
    1. 배열 디스트럭처링 할당
      • 할당기준 : 인덱스 순서
    2. 객체 디스트럭처링 할당
      • 할당기준 : 프로퍼티 키 일치여부
      • 프로퍼티 키가 다르면 할당되지 않는다.
      • 프로퍼티 키로 값을 받아와, 다른 변수이름으로 할당할 수 있다.
       const {lastName: name } = {lastName: 'kim' 
       console.log(name); // kim 
객체 디스트럭처링은 프로퍼티 키 일치여부로 할당하기때문에, 필요한 값만 추출할 수 있다.

*배열 디스트럭처링은 인덱스 순서를 꼭 지켜서 할당하기에, 순서를 고려해야만 한다.

37장 Set과 Map

  • Set : 중복되지 않은 유일한 값들의 집합.
    1. 중복 x
      • NaN, 0을 동일하게 봐, 중복추가 방지
        • NaN === NaN // true
        • +0 === -0 // true
    2. 순서 x
    3. 인덱스 접근 x
      • 요소 삭제시, 삭제할 요소를 인자로 넣어야함.
      • forEach((value, value, set)) : index 대신 value
  • Map : 키와 값을 가지는 집합.
    • 일반 객체에서 키값을 문자열 or 심벌값을 쓰는 것에 비해, 객체를 포함한 모든값을 키 값으로 사용가능
    • 이터러블
    • forEach((value, key, map)) : 요소 값 , 요소 키, map객체 자신

Map vs Object

  • Map: 순서보장, key-value 개수 구하기 쉬움, 요소접근성 낮음
  • Object: 개수 구하기 어렵, 요소접근성 높음(메서드 없이 . or [key]로 접근) *ES6 이전엔 object의 삽입 순서를 보장해주지 않았다고 합니다.
    참고

*개수 구하기
Map: map.size();
object: Object.keys(obj).length


Contributor

@Markers
@live-small