-
Notes from reading 🔖 You Don't Know JS Yet - 3JavaScript 2025. 5. 27. 19:58
## chapter 3
- 이터레이터 디자인 패턴은 데이터를 일정 단위로 쪼개고 점진적으로 처리한다는 아이디어다.
- next() 메서드가 있는 게 이터레이터 패턴의 대표적인 예인데, next를 호출하면 쪼개진 단위로 다음 데이터를 불러온다.
- 더 이상 불러올 데이터가 없으면 예외를 발생시킨다.
- 이터레이터 패턴의 핵심은 데이터를 처리할 때 표준화된 방법을 제공한다는 점이다.
- JS에서 이터레이터 패턴은 ES6에 추가되어 next() 메서드는 이터레이터 result 라 불리는 객체를 반환하고 해당 객체 내부에는 done과 value가 있어야 한다고 정의된다.
- 반복 작업이 안끝나면 done은 false다
- for of 문법으로 이터레이터 result 객체를 소비할 수 있다
- ... 같은 전개구문, 나머지 매개변수로도 소비 가능하다.
- 이터러블을 사용하면, 이터레이터 인스턴스를 생성하고 소비, 연산 후 마무리 할 수 있다.
- 여러개의 인스턴스를 만들어 하나의 이터러블을 여러번 소비할 수 있다.
- 이터러블의 JS 예는 문자열, 배열, 맵, 셋과 같은 기본이 되는 자료구조/컬랙션이다.
- JS 이터러블은 keys() values() entries() 같은 순회 메서드를 제공한다.
- 클로저는 거의 모든 JS 개발자가 사용한다
- 클로저란, 함수가 정의된 스코프가 아닌 다른 스코프에서 함수가 실행되어도, 스코프 밖에 있는 변수를 기억하고 접근할 수 있는 것이다.
- 클로저는 함수의 특징
- 객체와 달리 함수는 자연스레 클로저가 됨
- 클로저 확인은 함수 외부의 다른 스코프에서 실행해 확인해야 한다
- 클로저 덕분에 GC되지 않은 내부 함수 인스턴스를 활용할 수 있다. 🎶
- 클로저는 데이터를 복사한 값을 지니지 않고, 참조하기에 해당 데이터가 업데이트되면 최신 데이터를 사용할 수 있게 해준다.
- 클로저는 콜백 등 비동기 작업 코드에서 흔히 찾아볼 수 있다.
- this 키워드는 JS를 지탱하는 가장 강력한 메커니즘 & 오해를 많이 받는 메커니즘
- this가 자기 자신 혹은 메서드가 속한 인스턴스를 참조한다는 것은 매우 많이 알려진 오해
- 함수는 접근 가능한 영역을 정의한다 이때, this 키워드를 통해서 이 실행 컨텍스트에 접근 가능하다.
- 스코프는 정적, 실행 컨텍스트는 동적이다.
- 실행 컨텍스트는 함수의 호출 방식에 따라 결정된다. (즉, this도 호출 방식에 따라 결정됨) ♥️
- 컨텍스트를 지정하지 않으면, 기본 컨텍스트가 전역 객체(브라우저는 window)가 된다 🍝
- 함수에서 this를 사용하면, 컨텍스트를 동적으로 지정할 수 있고 다른 객체에서도 해당 함수를 재사용할 수 있다. 🤗
- 프로토타입은 객체, 프로 퍼티 접근할 때 일어나는 동작에 관련된 특징이다.
- 프로토타입은 두 객체를 연결하는 linkage
- 프로토타입으로 연결된 객체들은 프로토타입 체인이라고 부른다.
- 프로토타입 체인을 통해서 다른 객체에만 존재하는 메서드를 위임받아 접근할 수 있게 한다 -> 두 개 이상의 객체가 협력하여 작업 가능
- 예를 들면, 객체는 toString이 정의되어 있지 않아도, Object.prototype으로 Object에 연결되어 있기 때문에 toString 같은 내장 메서드에 접근이 가능하다. 🧃
- Object.create()로 객체 프로토타입 연결장치를 직접 정의할 수 있다.
- Object.create(null)로 어떤 객체에도 연결 안된 순수 독립 객체를 만들 수 있다.
- 프로토타입과 this를 함께 다루면 더 심화 과정 (동적으로 연결되는 this에 프로토타입을 통해서 여러 객체를 위임할 수 있다 -> 추후 더 자세히 알아봐야 될듯 🫥)
'JavaScript' 카테고리의 다른 글
Notes from reading 🔖 You Don't Know JS Yet - 5 (0) 2025.06.11 Notes from reading 🔖 You Don't Know JS Yet - 4 (0) 2025.06.05 Notes from reading 🔖 You Don't Know JS Yet - 2 (0) 2025.05.14 Notes from reading 🔖 You Don't Know JS Yet - 1 (0) 2025.04.16 JS UI 라이브러리를 instance로 만들어 React 이식하기 (with useImperativeHandle & Tui Grid) 💘 (0) 2025.04.01