[Javascript 코딩의 기술] Chapter 3 특수한 컬렉션을 이용해 코드 명료성을 극대화하라

GitHub - archepro84/Simplifying_Javascript: 자바스크립트 코드의 정석 책의 필기자료입니다.

 

= Tip 10 객체를 이용해 정적인 키-값을 탐색하라

객체 리터럴 (Object literal) : 중괄호에 Key-Value를 작성하는 것

객체 (Object)
 - 정적인 정보를 다루기에 우수하다.
 - 정보의 경로를 알고 있을 때 적절하다.
 - 지속해서 갱신, 반복, 대체, 정렬해야 할 정보에는 좋지 안다.


= Tip 11 Object.assign()으로 조작 없이 객체를 생성하라

깊은 복사 (Eeep copy), 깊은 병합 (Deep merge) : 중첩된 객체가 있는 객체를 복사하는 것
 - 원본 객체(Defaults)와 중첩된 객체(name)는 독립적으로 메모리값을 가지고 있다.
 - 원본 객체(Defaults)에서는 중첩된 객체(name)의 메모리 주소 값만 존재한다.

Object.assign()
 - 다른 객체의 Key-Value (속성)로 객체의 필드를 생성하고 갱신할 수 있다.
 - 모든 Object의 값만 복사한다.
  - 만약 Object 내부에 값이 객체일 경우 깊은 복사가 발생한다.
  - 즉, 원본 객체 또는 복사한 객체 중에서 중첩된 객체의 값을 변경하면 원본 객체와 복사한 객체 모두 변경된다.

중첩된 객체로 인한 문제를 피하는 방법
 1. 중첩된 객체를 두지 않는 것
 2. Object.assign()을 이용해 중첩된 객체를 복사하는 것
 3. Lodash.cloneDeep() 이라는 별도의 라이브러리를 이용해 해결하는 것 



= Tip 12 객체 펼침 연산자로 정보를 갱신하라

객체 펼침 연산자
 - Key-Value를 목록에 있는 것처럼 반환한다.
 - 새로운 정보는 펼침 연산자의 앞이나 뒤에 쉽게 추가할 수 있다.
 - 독립적으로는 사용할 수 없고 객체에 펼쳐지게 해야 한다.
 - 동일한 키에 서로 다른 값을 추가하면 어떤 값이든 가장 마지막에 선언된 값을 사용한다. ☆
 - 새로운 객체를 생성하려는 의도를 명확하게 전달할 수 있다.



= Tip 13 맵으로 명확하게 Key-Value 데이터를 갱신하라

맵 객체 (Map Object)
 - 객체에 많은 정보를 추가해야 하는 경우에 사용
 - Key-Value가 자주 추가되거나 삭제되는 경우에 사용
 - Key가 문자열이 아닌 경우에 사용

맵 객체의 장점
 - 인터페이스가 명확
 - Method는 예측 가능한 이름을 가지고 있다.
 - 반복과 같은 동작이 내장되어 있다.

시간 복잡도
 - Object의 Key Search 시간복잡도 : O(n)
 - Map의 Key Search 시간복잡도 : O(n log n)
 - 즉, 크기가 커질수록 Object가 Map보다 비용이 더 많이 들어간다.

Key 'color', Value 'black',을 필터링 조건 컬렉션에 추가하면 필터링 조건을 바탕으로 객체를 필터링한다.

체이닝 (chaining)
 - 새로운 인스턴스를 생성하고 바로 메서드에 연결하는 것 

Mapfilter 함수의 특징
 1. 항상 맵 인스턴스의 Method를 사용한다.
 2. delete() Method를 사용할 수 있기 때문에 언어 수준의 연산자를 사용하지 않는다.
 3. clear() Method를 사용할 수 있기 때문에 새로운 인스턴스를 생성하지 않는다.


객체 (Object)
 - Key에 사용할 수 있는 데이터 형식에 제약이 존재한다.
 - 특정한 자료형의 Key만 사용할 수 있다. 
 - 정수를 Key로 저장할 경우 String으로 자동 형 변환이 이루어진다.

맵 (Map)
 - 여러 가지 자료형을 Key로 받을 수 있다.



= Tip 14 맵과 펼침 연산자로 Key-Value 데이터를 순회하라

Map.entries();
 - Map에 있는 Key-Value를 쌍으로 묶은 Map Iterator를 반환한다.
 ex) Map Iterator = [key, value], [key, value]
 ex) [ 'color', 'black' ] 
 - Map을 순회할 때 Key-Value를 해체 할당 문법으로 변수에 할당할 수 있다. ☆
 ex) for (const [key, value] of Map )

맵 (Map)의 특징
 - Map에 입력된 데이터들은 순서를 가지고 저장된다.
 - 정렬 Method가 내장되어 있지 않다.
 - 펼침 연산자를 사용할 경우 Key-Value값이 동시에 반환된다.
 ex) [ 'color', 'black' ] [ 'breed', 'labrador' ]

Map을 정렬하고 문자열 Array로 만드는 방법 ☆
1. Map을 Array로 변환한다.
2. Array를 정렬한다.
3. Array에 담긴 Key-Value 쌍을 `Key:Value` 형식의 문자열로 변환한다.
4. Array의 항목을 연결해 문자열을 만든다.
5. Template Literal을 이용해 다른 정보와 함께 문자열로 병합한다.



= Tip 15 맵 생성 시 부수 효과를 피하라

Map.has( key: String ) : key값이 존재하는지 확인한다.

필터링 조건 객체를 사용하는 이유
 1. 데이터에 필터링 조건을 적용
 2. 사용자가 선택한 조건을 알려주는 데 사용

new Map( [ ...Map1, ...Map2] )
 - Map1에 Map2를 덮어쓰기 한 새로운 Map을 생성한다. ☆



= Tip 16 세트를 이용해 고윳값을 관리하라

세트 (Set)
 - 각 고유 항목을 하나씩만 갖는 특화된 배열
 - 배열을 담아 한번에 전달하거나 하나씩 값을 전달할 수 있다.
 - 전달된 데이터의 순서가 보장되며 최초에 값이 추가된 위치가 유지된다.
 - 이미 존재하는 값을 다시 넣더라도 원래 위치를 유지한다.

Set.add( Key: Any ) : key값을 Set에 추가한다.
Set.has( Key: Any ) : key값이 Set에 존재하는지 확인한다.
Set.delete( Key:Any ) : key값을 Set에서 삭제한다.
Set.clear() : Set를 초기화한다.