자바스크립트 복습3

• 이터러블은 배열이 아닌 애들을 순회 가능하게 만든 규칙
• 이터러블의 대표적 3가지 예시

• URLSearchParams

?sort=asc&page=3&category=js 
// key: sort, page, category
// value: asc, 3, js

• FormData

for (const [key, value] of formData) {
  // 유효성 검사, 로깅 등
}
// email, password등등

• Headers

for (const [key, value] of response.headers) {
  console.log(key, value);
}
// Content-Type, Authorization, Accept, User-Agent등등

---

• 제너레이터 : 중간에 멈췄다가 다시 이어서 실행할 수 있는 함수
• 실행하다가 yield에서 멈춤 => next() 호출하면 멈춘 자리에서 다시 시작 => 또 yield에서 멈춤 => 필요할 때까지 계속 이렇게 움직임 (마치 넷플릭스의 일시정지같음)

function* myGen() {
  console.log("1");
  yield "a";

  console.log("2");
  yield "b";

  console.log("3");
  return "끝";
}

const g = myGen();

console.log(g.next()); // "1" 출력, { value: "a", done: false }
console.log(g.next()); // "2" 출력, { value: "b", done: false }
console.log(g.next()); // "3" 출력, { value: "끝", done: true }

---

• 스프레드 연산자 : 객체나 배열을 '풀어서' 다른 곳에 펼쳐 넣는 문법
• 스프레드 연산자는 얕은복사(1depth까지만)

const a = { name: "nana", info: { age: 20 } };
const b = { ...a };

b.name = "bobo";  // a 영향 없음
b.info.age = 30;  // a.info.age도 30이 되어버림 ❗ (얕은 복사라서)

---

• 구조 분해 할당 : 객체나 배열 속 값을 꺼내서 변수로 쏙쏙 뽑아쓰는 문법

const user = {
  name: "nana",
  age: 25,
  job: "dev"
};

const { name, age } = user;

---

• Set 자료구조 : 중복을 허용하지 않는 값들의 집합
• Set을 쓰는 이유 : 중복제거, 빠르게 "포함 여부 체크"
• Set의 메서드

const s = new Set();

// 값 추가 (이미 있으면 무시)
s.add(1);
s.add(1); // 중복 -> 무시

// 값 존재 여부 체크
s.has(1); // true

// 특정 값 삭제 → boolean 반환
s.delete(1); // true

// 전체 삭제
s.clear();

// 프로퍼티(메서드 X)
s.size; // 요소 개수

---

• Map 자료구조 : 키와 값을 쌍으로 저장하는 자료구조
• Map이 객체보다 좋은 이유
  • 키에 모든 타입 사용 가능 (객체는 key가 반드시 문자열/심볼이여야 함)
  • 저장한 순서 그대로 순회됨
  • size 프로퍼티로 바로 갯수 확인 가능
  • key/value 관리가 객체보다 훨씬 안정적
• Map의 메서드

// 값 저장 (체이닝 가능)
m.set("name", "nana").set("age", 20);

// 값 가져오기
m.get("name"); // "nana"

// 키 존재 여부 확인
m.has("age"); // true

// 삭제
m.delete("age");

// 전체 삭제
m.clear();

// 요소 개수
m.size // 2

---

• 심볼 : 유일한 값을 만드는 특별한 타입, 주로 객체 키로 사용됨, 남이 만든 객체에 안전하게 키 추가할 수 있음

---

• 널 병합 연산자: 왼쪽 값이 null 또는 undefined일때만 오른쪽 값을 사용

0 ?? 10   // 0
false ?? true   // false
"" ?? "hi"   // ""

---

• or 연산자는 왼쪽이 "falsy"이면 오른쪽 실행 (0, false,"", null, undefined 다 취급)

0 || 10   // 10
0 ?? 10   // 0

"" || "기본"   // "기본"
"" ?? "기본"   // ""