iterable 객체

반복 가능한(iterable, 이터러블) 객체는 배열을 일반화한 객체입니다. 이터러블 이라는 개념을 사용하면 어떤 객체에든 for..of 반복문을 적용할 수 있습니다.
배열은 대표적인 이터러블입니다. 배열 외에도 다수의 내장 객체가 반복 가능합니다. 문자열 역시 이터러블의 예입니다.

• for..of 를 사용할 수 있는 객체

이터러블 객체의 핵심은 '관심사의 분리(Separation of concern, SoC)'
->이렇게 하면 이터레이터 객체와 반복 대상인 객체를 분리할 수 있습니다.

이터러블과 유사 배열

1. 이터러블(iterable)
   메서드 Symbol.iterator가 구현된 객체입니다.
2. 유사배열(array-like)
   인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체입니다.

이터러블 메서드 Symbol.iterator

이터러블엔 메서드 Symbol.iterator가 반드시 구현되어 있어야 합니다.

1. obj[Symbol.iterator]의 결과를 이터레이터라고 부릅니다. 이터레이터는 이어지는 반복 과정을 처리
2. 객체 {done: Boolean, value: any}을 반환하는 메서드 next()가 반드시 구현되어 있어야한다.

맵과 셋

1. 객체
   키가 있는 컬렉션을 저장
2. 배열
   순서가 있는 컬렉션을 저장

• 부족한 자료구조를 채우기 위하여 Map 과 Set 등장!

맵

데이터를 저장한다는 점에서 객체와 유사합니다. 다만, 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있습니다.

• 맵은 객체와 달리 키를 문자형으로 변환하지 않는다.
  맵은 키로 객체를 허용한다!

셋

중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션입니다.
셋에는 키가 없는 값이 저장됩니다.

• 값의 유일무이함을 확인하는데 최적화되어있습니다.

<맵과 셋의 공통점>
컬렉션 내 요소나 값을 재 정렬하거나 (배열에서 인덱스를 이용해 요소를 가져오는 것처럼) 숫자를 이용해 특정 요소나 값을 가지고 오는 것은 불가능합니다.

위크맵과 위크셋

• 가비지 컬렉션에서 배웠듯이 자바스크립트 엔진은 도달 가능한 (그리고 추후 사용될 가능성이 있는) 값을 메모리에 유지합니다.

위크맵

1. 위크맵을 사용하면 키로 쓰인 객체가 가비지 컬렉션의 대상이 됩니다.
2. 위크맵의 키가 반드시 객체여야 한다는 점입니다. 원시값은 위크맵의 키가 될 수 없습니다.
3. 위크맵의 키로 사용된 객체를 참조하는 것이 아무것도 없다면 해당 객체는 메모리와 위크맵에서 자동으로 삭제
4. 맵에 비하면 반복 작업과 keys(), values(), entries() 메서드를 지원하지 않는다. --> 키 or 값 전체를 얻는 것이 불가능하다.
5. 부차적인 데이터를 저장할 곳이 필요할 때 진가를 발휘.
6. 캐싱(caching)이 필요할 때 유용하다.

캐싱(caching)
시간이 오래 걸리는 작업의 결과를 저장해서 연산 시간과 비용을 절약해주는 기법입니다.

• 캐시 메모리..

위크셋

1. 객체만 저장할 수 있다.
2. 원시값은 저장할 수 없습니다.
3. 셋 안의 객체는 도달 가능할 때만 메모리에서 유지.
4. 부차적인 데이터를 저장할 때 사용
   5.위크셋엔 위크맵처럼 복잡한 데이터를 저장하지 않습니다. 대신 "예"나 “아니오” 같은 간단한 답변을 얻는 용도로 사용

< 위크셋과 위크맵의 공통점>
구성 요소 전체를 대상으로 하는 메서드를 지원하지 않는다.
구성 요소 하나를 대상으로 하는 메서드만 지원!

Object.keys, values, entries

1. Object.keys(obj) – 객체의 키만 담은 배열을 반환합니다.
2. Object.values(obj) – 객체의 값만 담은 배열을 반환합니다.
3. Object.entries(obj) – [키, 값] 쌍을 담은 배열을 반환합니다.

객체 변환하기

객체엔 map, filter 같은 배열 전용 메서드를 사용할 수 없습니다.

• 하지만 Object.entries와 Object.fromEntries를 순차적으로 적용하면 객체에도 배열 전용 메서드 사용할 수 있습니다.

구조 분해 할당

• 객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조

  <객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우>
  객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment) 을 사용

중첩구조 분해

객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나 객체의 정보를 추출

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

function showMenu({
  title = "Untitled",
  width: w = 100,  // width는 w에,
  height: h = 200, // height는 h에,
  items: [item1, item2] // items의 첫 번째 요소는 item1에, 두 번째 요소는 item2에 할당함
}) {
  alert( `${title} ${w} ${h}` ); // My Menu 100 200
  alert( item1 ); // Item1
  alert( item2 ); // Item2
}

showMenu(options);

중첩객체와 콜론을 조합하여 구조분해.

1. 구조분해 할당을 하면 객체나 배열을 변수로 바로 연결할 수 있다.
2. 객체 분해하기

let {prop : varName = default, ...rest} = object

오브젝트의 프로퍼티 prop의 값은 변수 varName에 할당.
오브젝트에 prop이 없으면 default가 varName에 할당된다.
3. 배열 분해하기

let [item1 = default, item2, ...rest] = array

4. 할당 연산자 좌측의 패턴과 우측의 구조가 같으면 중첩 배열이나 객체가 있는 복잡한 구조에서도 원하는 데이터를 뽑아낼 수 있다.

Date 객체와 날짜

날짜를 저장할 수 있고, 날짜와 관련된 메서드도 제공해주는 내장 객체 Date
--> Date 객체를 활용하면 생성 및 수정 시간을 저장하거나 시간을 측정할 수 있고, 현재 날짜를 출력하는 용도 등으로도 활용

• 자바스크립트의 타임스탬프는 초가 아닌 밀리초 기준이라는 점을 항상 유의

Date.now()를 사용하면 현재 시각의 타임스탬프를 빠르게 구할 수 있습니다.

JSON과 메서드

네트워크를 통해 객체를 어딘가에 보내거나 로깅 목적으로 객체를 출력해야 한다면 객체를 문자열로 전환해야함.
--> 이때 전환된 문자열엔 원하는 정보가 있는 객체 프로퍼티 모두가 포함되어야만 합니다.

JSON.stringify

JSON (JavaScript Object Notation)은 값이나 객체를 나타내주는 범용 포맷.
다른 언어에서도 사용되는 호환성 덕분에 JSON을 데이터 교환 목적으로 사용하는 경우가 많다. (클라이언트 언어가 javascript 인 경우일 때)

1. JSON.stringify – 객체를 JSON으로 바꿔줍니다.
2. JSON.parse – JSON을 객체로 바꿔줍니다.

   이렇게 변경된 문자열은 JSON으로 인코딩된(JSON-encoded), 직렬화 처리된(serialized), 문자열로 변환된(stringified), 결집된(marshalled) 객체라고 부릅니다. 객체는 이렇게 문자열로 변환된 후에야 비로소 네트워크를 통해 전송하거나 저장소에 저장할 수 있습니다.

JSON으로 인코딩된 객체의 특징 (일반 객체와 차이점)
1. 문자열은 큰따옴표로 감싸야 합니다. JSON에선 작은따옴표나 백틱을 사용할 수 없습니다('John'이 "John"으로 변경된 것을 통해 이를 확인할 수 있습니다).
2. 객체 프로퍼티 이름은 큰따옴표로 감싸야 합니다(age:30이 "age":30으로 변한 것을 통해 이를 확인할 수 있습니다).

재귀와 스택

재귀는 큰 목표 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 유용한 프로그래밍 패턴

• 목표 작업을 간단한 동작 하나와 목표 작업을 변형한 작업으로 단순화시킬 수 있을 때도 재귀를 사용
• 특정 자료구조를 다뤄야 할 때도 재귀가 사용
• 함수에서 다른 함수를 호출해야 할 때가 있습니다. 이때 함수가 자기 자신을 호출할 수도 있는데, 이를 재귀라고 부른다.

실행 컨텍스트와 스택

• 실행 중인 함수의 실행 절차에 대한 정보는 해당 함수의 실행 컨텍스트(execution context) 에 저장

실행 컨텍스트는 함수 실행에 대한 세부 정보를 담고 있는 내부 데이터 구조

나머지 매개변수와 전개 문법

상당수의 자바스크립트 내장 함수는 인수의 개수에 제약을 두지 않습니다.

‘arguments’ 변수

arguemnts라는 특별한 유사 배열 객체(array-like object)를 이용하면 인덱스를 사용해 모든 인수에 접근할 수 있습니다.

• arguments는 유사 배열 객체이면서 이터러블(반복 가능한) 객체

배열이 아니기 때문에 배열 메서드를 사용할 수 없다는 단점이 있다. 또한 인수 전체를 담기 때문에 나머지 매개변수처럼 인수의 일부만 사용할 수 없다는 단점도 존재한다.

spread 문법

배열을 통째로 매개변수에 넘겨주는 것

• 함수를 호출할 때 ... arr를 사용하면, 이터러블 객체 arr이 인수 목록으로 '확장’됩니다.

전개 문법은 for..of와 같은 방식으로 내부에서 iterator(반복자)를 사용해 요소를 수집

Array.from(obj)와 [...obj] 차이점
1. Array.from은 유사 배열 객체와 이터러블 객체 둘 다에 사용할 수 있습니다.
2. 전개 문법은 이터러블 객체에만 사용할 수 있습니다.

무언가를 배열로 바꿀 때는 전개 문법보다 Array.from이 보편적으로 사용

변수의 유효범위와 클로저

• 자바스크립트는 함수 지향 언어 --> 개발자들에게 많은 자유도를 부여. (함수를 동적으로 생성할 수 있고, 생성한 함수를 다른 함수에 인수로 넘길 수 있으며, 생성된 곳이 아닌 곳에서 함수를 호출할 수도 있기 때문)

중첩 함수

함수 내부에서 선언한 함수는 ‘중첩(nested)’ 함수라고 부릅니다.

• 중첩 함수는 반환될 수 있다는 점에서 흥미롭습니다. 새로운 객체의 프로퍼티 형태로나 중첩 함수 그 자체로 반환되어 어디서든 호출하여 사용될 수 있다.

렉시컬 환경

변수

자바스크립트에선 실행 중인 함수, 코드 블록 {...}, 스크립트 전체는 렉시컬 환경(Lexical Environment) 이라 불리는 내부 숨김 연관 객체(internal hidden associated object)를 갖습니다.

<렉시컬 환경 객체의 구성>
1. 환경 레코드(Environment Record) – 모든 지역 변수를 프로퍼티로 저장하고 있는 객체입니다. this 값과 같은 기타 정보도 여기에 저장됩니다.
2. 외부 렉시컬 환경(Outer Lexical Environment) 에 대한 참조 – 외부 코드와 연관됨

’변수’는 특수 내부 객체인 환경 레코드의 프로퍼티일 뿐입니다. '변수를 가져오거나 변경’하는 것은 '환경 레코드의 프로퍼티를 가져오거나 변경’함을 의미

함수 선언문

함수는 변수와 마찬가지로 값입니다.

다만 함수 선언문(function declaration)으로 선언한 함수는 일반 변수와는 달리 바로 초기화된다는 점에서 차이가 있습니다.

• 함수 선언문으로 선언한 함수는 렉시컬 환경이 만들어지는 즉시 사용할 수 있습니다. --> 선언되기 전에도 함수를 사용할 수 있는 이유.

내부와 외부 렉시컬 환경

함수를 호출해 실행하면 새로운 렉시컬 환경이 자동으로 만들어집니다.

• 이 렉시컬 환경엔 함수 호출 시 넘겨받은 매개변수와 함수의 지역 변수가 저장