# Chapter 3: Digging to the Roots of JS

## Iteration

The iteration protocol defines a `next()` method whose return is an object called an iterator result; the object has `value` and `done` properties, where `done` is a boolean that is `false` until the iteration over the underlying data source is complete.

### Consuming Iterators

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

Another mechanism that's often used for consuming iterators is the `...` operator. This operator actually has two symmetrical forms: *spread* and *rest*. The spread form is an iterator-consumer.

```javascript
var vals = [ ...it ];
doSomethingUseful( ...it );
```

### Iterables

ES6 defined the basic data structure/collection types in JS as iterables. This includes strings, arrays, maps, sets, and others.

For the most part, all built-in iterables in JS have three iterator forms available: keys-only (`keys()`), values-only (`values()`), and entries (`entries()`).

## Closure

Closure is when a function remembers and continues to access variables from outside its scope, even when the function is executed in a different scope. Closure can observe updates to these variables over time.

```javascript
for (let [idx,btn] of buttons.entries()) {
    btn.addEventListener("click",function onClick(){
       console.log(`Clicked on button (${ idx })!`);
    });
}
```

## this Keyword

One common misconception is that a function's `this` refers to the function itself.

When a function is defined, it is attached to its enclosing scope via closure. It also has an execution context, and that is exposed to the function via its `this` keyword. The execution context is dynamic, entirely dependent on how it is called.

Without strict mode, context-aware functions that are called without any context specified default the context to the global object. (`window` in browser)

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

assignment(); // Kyle says to study undefined
```

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

homework.assignment(); // Kyle says to study JS
```

The `call(..)` method takes an object to use for setting the `this` reference for the function call.

```javascript
var otherHomework = {
    topic: "Math"
};

assignment.call(otherHomework); // Kyle says to study Math
```

## Prototypes

A prototype is a characteristic of an object, and specifically resolution of a property access. Delegation of property/method access allows two objects to cooperate with each other to perform a task.

### Object Linkage

To define an object prototype linkage, create the object using the `Object.create(..)`.

```javascript
var homework = {
    topic: "JS"
};

var otherHomework = Object.create(homework);

otherHomework.topic;
```

### this Revisited

```javascript
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
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://xiaoyang-liu.gitbook.io/programming-notes/web-development/you-dont-know-js/get-started/chapter-3-digging-to-the-roots-of-js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.