JeongShin_Blog/TIL/study/JavaScript

[utterances-bot]

Vanilla JavaScript | JS Blog

JeongShin 의 코딩 블로그 👨🏻‍💻

https://jeongshin.github.io/JeongShin_Blog/TIL/study/JavaScript.html

[eyabc]

step4 부분 유용하게 잘 읽었습니다.

1. 자유변수,
2. 함수형 언어,
3. JS 에서 함수형 프로그래밍이 가능한 요인 일급객체로서의 함수, 클로저
4. 클로저의 캐싱
5. Object.create 와 new Person() 으로 객체를 생성하는 방법의 차이점 : 생성자 호출 유무 에 대한 것을 알게 되었습니다 감사합니다

그리고 일급 객체로서의 함저 -> 함수 오타가 있네요

[khw970421]

step4 클로저를 사용하여 문제를 해결하는 부분 잘읽었습니다

[nwleedev]

감사합니다.

[pul8219]

인사이드 자바스크립트 추천해주신덕에 잘 읽고 있습니다. 저처럼 입문자에게도 적합한 책인 것 같습니다. 결과물 볼 때마다 느끼는 점인데 정리를 참 잘하시는 것 같아요. 잘 읽었습니다!

[eyabc]

by 정웅

• NodeLists 도 iterable 이다.

  
  const nodeLists = document.querySelectorAll('*'); 

[...nodeLists];

for (const v of nodeLists) { console.log(v) }

- 생성자 함수는 yield 키워드를 만날때 까지 실행된다. 
```text
Generator 는 next 메소드를 통해 호출되면 어떤 값이 소비되고 생성자 함수는 yield 키워드를 만날때 까지 실행된다.

to 정웅

Q. 코드스피츠 들으면서 JS 엔진이 동작하는 것은 변화하기 때문에. 스코프 체인방식도 과거의 개념이며,
// return undefined 👉 JS 는 반환 값이 없으면 자동으로 undefined 를 반환
// 5) 에서 return 값이 반환 되면 done 이 true 로 바뀐다.
여기에 있는 동작 방식의 내용도 과거의 동작 방식 일수 도 있다는 추측이 듭니다. 혹은 같은 말을 다르게 서술한 거라고 볼 수 있는데요.

제 글을 보면 아시겠지만, 코드스피츠 맹선생님이 설명하는 바로는 { done: false, value: 1 } 이런 형태의 객체를 IteratorResultObject 이라고 하는데, generator 루틴을 빠져나올 때 { done: true, value: undefined } 를 반환한다고 하였습니다.

// 1) genny 라는 generator 선언
// function * 👉 Generator 로 사용됨을 의미
function* genny() {
    yield 'a';
    yield 'b';
    // return undefined 👉 JS 는 반환 값이 없으면 자동으로 undefined 를 반환
}

// 2) genny 라는 generator 로 iter 라는 iterator 생성
// iterator 는 next 라는 built-in function 제공
let iter = genny();
console.log(iter.next()); // 3) { value 'a', done : false }
console.log(iter.next()); // 4) { value 'b', done : false }
console.log(iter.next()); // 5) { value : undefined, done : true }

// 5) 에서 return 값이 반환 되면 done 이 true 로 바뀐다.

to 정웅

Q. 'value 값과 done 값이 모두 참이 되면' 문구가 애매 한 것 같습니다. value 가 참인 것을 어떻게 무슨기준으로 확인할까요?

Iterator 란 Arrays, Strings, Maps, Sets, NodeLists 에 포함된 built-in Object 이다. 
Iterator 는 두 개의 속성 (value, done) 을 반환하는 next() 메소드를 사용하여 객체의 Iterator protocol 을 구현한다. 
마지막 값에 done 이 true 로 되는데 value 값과 done 값이 모두 참이 되면 Iterator 의 리턴 값이 된다.

Q. done: false; -> ; 객체 문법 오류가 있습니다

let count = -1;
let movieIter = {
    // 이 객체 안에는 1개의 Symbol.iterator 프로퍼티가 있다.
    // Symbol 을 통해 iterator 의 Unique함을 보장할 수 있다.
    [Symbol.iterator]: function(movie){
        return {
            // next () 함수를 통해 순회하므로 next 를 구현 해준다.
            next: () => {
                count++;
                switch (count) {
                    case 0:
                        return {
                            value: movie.title,
                            done: false,
                        }
                    case 1:
                        return {
                            value: movie.year,
                            done: false,
                        }
                    case 2:
                        return {
                            value: movie.director,
                            done: false,
                        }
                    case 3:
                        return {
                            value: undefined, done: true
                        }
                    default:
                        return {
                            value: undefined, done: true
                        }
                }
            }
        }
    }
}

[pul8219]

잘 읽었습니다. 다만 아래 부분에서요! 궁금한 게 있는데요,

또한 속성 값이 동일 또는 유사한 객체들은 같은 Iterator 로 순회 할 수 있다.

그러면 속성값이 비슷하지만 달라도 같은 iterator로 순회할 수 있는 건가요?...

+++ 에고 제가 잘못이해했네요 속성명이랑 헷갈렸어요. 같은 iterator로 순회하려면 속성명은 같아야하는거죠?

[jeongshin]

@pul8219 네 동일한 속성을 공통적으로 가진 객체라면 같은 iterator 로 순회가 가능할 듯 하네요,,

const obj1 = { 'a' : 1 , 'b' : 2 }
const obj2 = { 'a' : 3, 'b' : 4, 'c' : 6 }

이라 가정하면 obj1, obj2 는 a, b 속성에 한하여 공통적인 속성을 가지기 때문에 인자로 전달하여 가능할 듯해요

사용해본적이 없어서 정확히는 모르겠네요 ㅠ

[khw970421]

step5 잘봤습니다 한번더 결과를 확인하려고 복사해 사용해봤는데 case 부분의 false부분에 ; 부분이 있으면 오류가 뜨는 부분이 있는것같습니다.

[jeongshin]

@khw970421 해당 부분 수정 하였습니다. 감사합니다 🙏

[eyabc]

Q. 첫 줄은 호이스팅이 발생한다고 하였는데 두번째 줄인 호이스팅이 일어나지 않는다 라고 되어 있습니다. 그 이유는 무엇인가요 ?

- 일반적으로 클래스 선언문도 호이스팅이 발생한다. 모든 선언문은 런타임 이전에 실행됨을 기억하자.
- 클래스 선언은 let 과 const 처럼 블록 스코프에 선언되면 호이스팅 이 일어나지 않는다

[jeongshin]

@eyabc 일반적으로는 호이스팅이 되지만 블록 스코프 내부에서는 let, const 처럼 호이스팅 되지만 선언문 이전에는 tdz 에 있다 이해했습니다.

[pul8219]

Step6 잘 읽었습니다!