You don't know JS Part 1 - Chapter 3 공부 기록하기

1. 이터레이션 

• 이터레이터 패턴(iterator pattern) : 데이터를 덩어리 단위로 표준화된 방법을 사용해 각각 처리할 수 있음. 
• 데이터 전체를 일정 단위로 쪼개어 조각들을 차례대로 순회하며 점진적으로 처리하면 좀 더 범용적이고 유용할 거라는 아이디어에서 출발함. 
• 이터레이터 패턴에는 처리할 데이터를 참조하는 데이터 구조인 이터레이터(iterator)가 정의됨. 
  • 이터레이터는 next()라는 메서드를 지원하며, next()를 호출할 때마다 관계형 데이터베이스에서 질의 결과에 해당하는 레코드(record)나 줄(row)와 같은 데이터 조각이 차례대로 반환됨. 
• 이터레이터 패턴에서는 데이터를 전부 처리했음에도 불구하고 또 다른 작업을 시작할 때 특별한 값을 사용하거나 예외를 발생시켜 반복 작업이 종료되었다는 신호를 줌 
• 이터레이터 패턴의 핵심 : 반복 작업으로 데이터를 처리할 때 "표준화된 방법"을 제공한다는 점. 

이터레이션 소비하기 

• next() 호출 반환값인 이터레이터 리절트 객체의 done 프로퍼티가 true라면 반복 작업이 주단됨. 
• 위 방식은 다소 품이 들기 때문에 ES6에서는 for ...of 반복분 같은 새로운 문법과 API를 새롭게 정의해 표준화된 방법으로 이터레이터 리절트 객체를 소비할 수 있도록 제공 

// 처리하려는 데이터의 이터레이터 
var it = /* ... */; 

// 이터레이터 리절트 객체를 순회함 
for (let val of it) {
	console.log(`값 : ${val}`); 
    }

 

• 표현식 ... 사용  

// 이터레이터를 펼친 결과가 배열의 각 요소다 되도록 함 
var vals = [...it];

// 이터레이터를 펼친 결과를 함수 호출문에 넘겨 각 값을 인수로 사용 
doSomethingUseful(...it);

이터러블 

• 이터러블 : 순회 가능한 값, 문자열, 배열, 맵, 셋 같이 기본이 되는 자료구조나 컬렉션 
• 이터레이터 소비 프로토콜은 이터러블을을 사용해 이터레이터 인스턴스를 생성하고 생성한 이터레이터 인스턴스를 소비해 연산을 마무리한다. 

 

이터레이션 프로토콜에 직접 이터레이터를 제공할 수 있었던 이유는 이터레이터는 그 자체로 이터러블 이기 때문.. ! 

 

2. 클로저 

• 클로저 : 함수가 정의된 스코프가 아닌 다른 스코프에서 함수가 실행되더라도 스코프 밖에 있는 변수를 기억하고 이 외부 변수에 계속 접근할 수 있는 경우 
• 클로저는 변수를 스냅샷한 값(복사해서 별도로 만든 값)을 사용하지 않음. 대신 변수 자체와 직접적인 관계를 맺어서 변수가 업데이트 되는 것을 관찰하고 최신 값을 가져와서 사용함. 

3. this 키워드 

• 함수는 this 키워드를 통해 실행 컨텍스트에 접근함 
• 스코프는 정적이며 함수를 정의하는 순간 해당 스코프에서 사용할 수 있는 한정된 변수 집합을 포함함. 반면 함수의 실행 컨텐스트는 동적임. 실행 컨텍스트는 함수를 정으한 위치나 함수를 호출하는 위치와 상관없이 함수의 호출 방식에 따라 결정됨 -> this는 함수를 호출할 때마다 결정되는 동적인 특성 
• 실행 컨텍스트 : 함수가 실행되는 동안 함수에서 사용할 수 있는 프로퍼티를 가진 유형의 객체 

function classroom(teacher){
	return function study(){
    	console.log(
         `${ teacher } 선생님이 ${this.topic}을/를 공부하라고 했습니다.`
         ); 
      }; 
 } 
 
var assignment = classroom('카일'); 

assignment(); // this.topic = undefined 

var homework = {
	topic : 'JS'; 
    }

homework.assignment(); // this.topic = 'JS'; d

var otherHomework = {
	topic : '수학' 
    }; 

assignment.call(otherHomework); // this.topic = '수학'

4. 프로토타입 

• 프로토타입  : 두 객체를 연결하는 연결 장치  
• 프로토타입 체인 : 프로토타입을 통해 연결된 일련의 객체 

객체 연결 장치 

• 객체 프로토타입 연결 장치를 직접 정의하고 싶을 때는 Object.create()를 사용해 객체를 만들면 된다. 

var homework = {
	topic : 'JS'
    }; 
    
var otherHomework = Object.create(homework); 

otherHomework.topic; // 'JS'

🍯 이 글을 마치며 

자바스크립트의 이터레이션, 클로저, this, 프로토타입 같은 개념들은 이미 알고 있었지만, 다시 공부하면서 더 명확하게 정리된 느낌이다. 이터레이터 패턴은 그냥 개념적으로만 알고 있었는데, 실제로 for...of나 spread 연산자(...) 같은 문법이 반복 작업을 얼마나 직관적으로 만들어주는지 새삼 실감했다. 클로저도 변수를 단순히 복사하는 게 아니라 참조하면서 최신 값을 유지한다는 점을 다시 한번 체감했고, this는 여전히 헷갈리지만 실행 컨텍스트와 연결 지어 보니 조금은 이해가 쉬워졌다. 프로토타입도 머리로는 알고 있었지만, 객체 간 연결이 어떤 식으로 이루어지는지 다시 보니 Object.create() 같은 메서드가 더 의미 있게 다가왔다. 결국, 예전에도 알던 개념들이지만, 다시 공부하면서 실무에서 어떻게 활용할지 좀 더 명확하게 정리된 기분이다.