[YDKJ] Get Started - Chapter 3 - 1

요약

Iteration

• 반복적인 데이터를 처리하기 위해 사용하는 패턴
• iterator 자료구조를 가지고 있음.
• 값과, next(), done으로 이루어져있음 => done은 값이 마지막인지 확인하는 true/false
• 대표적으로 for...of가 있음.

 

Iterables

• 이터레이터 소비 프로토콜은 이터러블에서 이터레이터 인스턴스를 만들어 소비함.
• es6에서 문자열, 배열, 맵, 셋등등을 이터러블로 정의함.
• 대부분의 경우 JS의 이터러블은 keys(), values(), entries()를 제공함.

즉, 이터레이터 인스턴스를 반환하면 이터러블(iterable)

이터레이터 결과값을 반환하면(value, done) 이터레이터(iterator)

 

 

Closure

• 함수가 다른 스코프에서 실행될때에도 함수가 외부스코프의 변수에 계속 엑세스하고 사용하는것.
• 자세한 것은  Scope & Closures 파트에서...

function counter(step = 1) {
    var count = 0;
    return function increaseCount(){
        count = count + step;
        return count;
    };
}

var incBy1 = counter(1);
var incBy3 = counter(3);

incBy1();       // 1
incBy1();       // 2

incBy3();       // 3
incBy3();       // 6
incBy3();       // 9

 

this Keyword

• JS에서 this는 다른 언어와는 좀 다르다.
• JS에서 this는 함수의 정의에 기반하지 않고, 함수가 호출될 때마다 결정되는 동적인 특성임.

function classroom(teacher) {
    return function study() {
        console.log(
            `${ teacher } says to study ${ this.topic }`
        );
    };
}
var assignment = classroom("Kyle");

이렇게 작성한 이후에,

assignment();

를 실행시키면

Kyle says to study undefined을 출력하게 됨

그러나

var homework = {
    topic: "JS",
    assignment: assignment
};

homework.assignment();

이 구문을 추가하면

Kyle says to study JS를 출력하게 됨

즉, 위의 예시는 실행컨텍스트에 대한 정보가 없었기 때문에 기본값으로 전역객체가 this에 연결되었음.

그러나 아래의 경우 homework가 this의 객체로 연결된 것

이렇게 동적으로 this가 결정이됨.

 

그러나 call을 이용한 방법도 존재함.

let otherHomework = {
  topic:"Math"
}
assignment.call(otherHomework);

이렇게하면 assigment의 this에 otherwork를 연결시킬 수 있음!

 

Prototypes

• 프로토타입 연결이 이루어진 일련의 객체를 프로토타입 체인이라고 함.

프로토타입 객체 연결시키는 법!

let homework = {
    topic:"JS",
}
console.log(homework.toString()); //[object Object]
let otherHomework = Object.create(homework);
otherHomework.topic;
console.log(otherHomework.topic); //JS

otherHomework = "Math"로 하더라도

homework.topic은 JS

 

 

 

느낀 점

JS의 굵직한 개념인 클로저, this, 프로토타입, 이터러블에 대해서 설명이 나왔다.

그러나 뭔가 좀 얕은 느낌이 든다.

더 깊은 내용을 알고싶어서 얼른 진도를 빼야겠다.