ydkjs yet! Get Started - Chapter 3 요약정리

Chapter 3: Digging to the Roots of JS

 일단 서론 - 앞에꺼 안봤으면 공부하고 와라!!

Iteration

그 다음다음다음하는 이터레이터 패턴 맞다 ㅋㅋ

왜 중요? 수많은 자료구조를 접근하는 표준화된 방법(=이터레이터)을 제안하기 때문에

 

이터레이턴 value 와 done 프로퍼티를 가지고 있는데 딱 이름 그대로의 역할을 한다

 

es6 이후 부턴 for .. of 루프로 이터레이터 접근 가능 (C++ 에서 range based for loop 과 같다고 생각)

// loop over its results one at a time
for (let val of it) {
console.log(`Iterator value: ${ val }`);
}
// Iterator value: ..
// Iterator value: ..
// ..

또한 spread 연산자(...)를 이용해서도 이터레이터를 뜯어낼수있다

 

이터러블??  :string array maps sets 등등등등

맵같은 경우엔 k, v 페어니까 구조분해할당(array destructuring)을 통해 두개로 받아야 함

 

추가로 key 또는 value 만 받고싶으면 .keys(), .values() 를 이터레이터 돌리시고

인덱스도 같이 얻고싶으면 .entries() 를 이터레이터 돌리기 

 

Closure

클로저?

1.함수에서

2.외부 스코프의 변수 사용시 그런것..

 MDN 발 설명 : 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다

developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures

클로저

클로저 때문에 내부 함수객체가 살아있는 한 외부함수가 끝나도 gc가 메모리 정리를 안함!!

클로저는 스냅샷이 아니고 다이렉트 링크!! (=외부 스코프의 변수들이 잘 살아있고 업데이트도 잘된다는 소리)

 

클로저 자주 쓰는곳 ajax, patch 등등 비동기 코드에서 콜백받을때 쓰임

 

또한 클로저의 외부 스코프가 항상 함수인건 X 그냥 내부 함수에서 접근하는 바깥 객체가 최소 하나이상만 있으면 된다고 함

 

let과 var 에 대해서 한마디도 했는데 보통 생각하는대로 작동하게 만들기 위해선 let을 사용 권장!!

=> let은 그때 그때 블록스코프를 만들기 때문! (특히 비동기 좀만 묻으면 let 안쓰면 안됨 ㅠ,ㅠ )

for (let [idx,btn] of buttons.entries()) {
btn.addEventListener("click",function onClick(){
console.log(`Clicked on button (${ idx })!`);
});
}
//경험상 이코드 이터레이터 돌때 var 쓰면 idx에 모두 같은값이 바인딩 됨(가장 마지막 버튼의 인덱스)

 

this Keyword

js 에서 this => 함수 자기자신가리키는 키워드 X 인스턴스를 가리키는 키워드 X

실행컨텍스트(execution context) 를 가리키는 키워드 O

실행컨텍스트? 함수에서 접근할수있는 모든 것들을 가리키는 말로 이해 함

스코프는 정적이지만, 실행흐름은 어떻게 호출되느냐에 따라서 달라질수 있다

assignment
study() {
console.log(
`${ teacher } says to study ${ this.topic }`
);
}
// 여기서 teacher 는 Kyle 로 바인딩 됨


var homework = {
topic: "JS",
assignment: assignment
};
homework.assignment();
// Kyle says to study JS (객체에서 호출)

var xxx = function(){
    topic = 'hello'
    assignment()
}
xxx()
// Kyle says to study hello (함수에서 호출)

var otherHomework = {
topic: "Math"
};
assignment.call(otherHomework);
// Kyle says to study Math (call 을 통한 호출)

assignment.bind(homework)()
// Kyle says to study JS (bind 를 통한 호출)

Prototypes

프로토 타입은 오브젝트의 특성

프로토 타입 체인 오브젝트들이 프로토타입으로 연결되어 있는 것

 

말로만 설명하면 어려우니 예시로

 

var homework = {
    topic: "JS"
};

//Object.create() 는 주어진 인자를 프로토타입으로 삼는 새로운 객체를 생성하는 메서드
var otherHomework = Object.create(homework);

otherHomework.topic; // JS
otherHomework.topic = 'Math' //Shadowing
otherHomework.topic // Math
homework.topic // JS
homework.toString() //[object Object] (최상위 프로토타입 Object)

그림으로 위의 코드를 표현하면 이런 그림이긴한데 클래스의 상속과 유사한 느낌이 난다

차이점을 굳이 생각하자면 기존의 oop 에서 인스턴스에 해당하는 객체를 부모로 삼는 다른 인스턴스를 만들수 있다는 점??? *Object.create(otherHomework) => 문제 X

 

var homework = {
study() {
console.log(`Please study ${ this.topic }`);
}
};
var jsHomework = Object.create(homework);
jsHomework.topic = "JS";
jsHomework.study();
// Please study JS
var mathHomework = Object.create(homework);
mathHomework.topic = "Math";
mathHomework.study();
// Please study Math

그 다음엔 this 를 다시 한번 봐보는 내용인데 지금까지 공부를 제대로 했으면 별다른 설명없이도 잘 이해가 될것같다!!