JoonDevBlog

모던JS 제너레이터 챕터를 학습하며 예제를 직접 만들고, 헷갈릴만한 문제를 정리해보았다. 스터디때도 팀원들에게 도움이 많이 된 것 같아 블로그에도 글을 남겨본다. 문제1 function* genFunc(){ const x = yield 1; const y = yield (x+10) yield x+y } const gen = genFunc() 위 코드에 대하여 gen.next() gen.next(10) gen.next(30) 를 실행하였을 때 반환되는 객체의 형식은 {value: @, done: @} 입니다. 마지막 gen.next(30) 대하여 예상되는 반환객체를 작성해주세요. 답: {value: 40, done: false} 문제2 function* genFunc(){ const x = yield 1;..

프로미스가 나오게 된 배경 이전까지 학습을 하며 Ajax와 RestAPI에 대해 학습하였고, 이를 토대로 어떤 url에 GET요청을 보내 데이터를 출력해보려고 한다. // GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // 서버의 응답을 콘솔에 출력한다. console.log(JSON.parse(xhr.response)); } else { console.error(`${xhr.status} ${xhr.statusText}`); } }; }; // id가 1인 post를 취득 ge..

html,css,JS로 DOM에 접근하여 이벤트를 발생시키는 실습을 하다가 의문을 발견했고, 그 의문을 따라가다보니 이론으로 알고있던 호이스팅과 계속 헷갈리던 즉시실행함수를 익히는 경험을 하여 글을 작성한다. bold라는 className을 가진 버튼을 클릭시 alert가 뜨게 하려고 한다. 원래 하려던 예제의 html은 다음과 같았다. Bold Italic dddd 그리고 JS는 다음과 같았다. (() => { document.querySelector(".bold").addEventListener("click", () => { alert("hello"); }); })(); className이 bold인 Bold버튼을 클릭하면 alert창이 hello가 정상작동하도록 함수를 작성하였다. (css는 임의로..

클로저가 잘 이해가 되지 않는 와중에 (특히나 이해가 안되기보단 와닿지 않았다) 어떤 의의를 가진 것인지 잘 나타내는 영상이 있어서 참고하였다. 영상 let cnt = 0; function cntPlus() { cnt = cnt + 1; } console.log(cnt); //0출력 cntPlus(); console.log(cnt); //1출력 cnt를 선언하고 cntPlus라는 함수를 작성했다. 그런데 코드를 이렇게 작성하고 작업하다보면 의도치 않게 다음과 같은 상황이 발생할 수 있다. let cnt = 0; function cntPlus() { cnt = cnt + 1; } console.log(cnt); cntPlus(); console.log(cnt); //수많은 코드들로 작업함 cnt = 100..

스코프를 알기 위해서는 호이스팅을 알아야한다. 또한 호이스팅을 알기 전 실행컨텍스트의 개념을 알고, 실행컨텍스트 객체 안에 담긴 environmentRecord를 알아야한다. 실행컨텍스트 [JavaScript] 실행 컨텍스트 코어 자바스크립트 2강 - 실행컨텍스트 실행 컨텍스트 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 스코프와 클로저 라는 개념을 이해하기 전에 살펴보자. 우리가 다음과 같은 JS파일을 junly21.tistory.com 호이스팅 environmentRecord에는 현재 컨텍스트에 관한 정보들이 저장된다. 이 때 컨텍스트 내부에 함수 선언문이 있다면 '함수 그 자체'를 수집하고, var로 선언된 변수도 수집하고 한다. 이렇게 변수 정보 수집을 마쳐도 실행 컨텍스트가 관여할 코드들은..

코어 자바스크립트 2강 - 실행컨텍스트 실행 컨텍스트 실행 컨텍스트란, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 의미한다. 그 유명한 스코프와 클로저 라는 개념을 이해하기 전에 알아야 하는 개념. 우리가 다음과 같은 JS파일을 실행한다고 가정해보자. //--------------------(1) var a = 1; function outer() { function inner() { console.log(a); // undefined var a = 3; } inner(); //--------------------(2) console.log(a); // 1출력 } outer(); //--------------------(3) console.log(a); //1 파일이 실행되자마자 (1)순간 콜 스..