모던 자바스크립트(ES6+) 기본대시보드

안녕하세요 강의내용을 따라하다가 한가지 질문이 생겨서 글을 씁니다 prototype에 연결한 함수, 그러니까 method안에다가 화살표함수를 사용한 경우에서 말인대요 여기서 이 method의 스코프는 인스턴스이고, 그걸 화살표 함수가 this로서 사용한다고 이해를 했습니다 그래서 debugger를 붙여서 브라우저의 개발자 모드로 확인해봤는데,  const Point = function(){ this.point = 100; }; Point.prototype.getPoint = function(){ // Set an Arrow Function in a normal function that is set under "prototype" const add = () => this.point +20; console.log(add()); [1, 2].forEach((value) => { console.log(this.point + value); // the "this" of the Arrow Function takes the "this" of its scope, which is the method, "getPoint()" }) // the scope of "getPoint()" is the instance }; new Point().getPoint(); debugger; 저기에 나오는 console.log(this.point + value)에서 this에 마우스를 가져가보면 Window라고 뜨고,  this.point위로 마우스를 가져가 보면 undefined가 뜹니다 원래 이런건가요?

강의에서 let 변수는 호이스팅 되지 않는다고 하셨는데, MDN 문서 let and const hoisting에는 "let과 const로 선언된 변수도 호이스팅은 되지만, default 값으로 초기화가 되지 않을 뿐이다"라는 문구가 있습니다. 호이스팅이라는 용어를 정확히 어떻게 해석해야할지 궁금합니다.

fromCodePoint() 와 codePointAt()의 차이는 함수와 메소드의 차이입니다. 함수와 메소드의 차이는 객체에 종속 되는가? 라고 생각합니다.   빌트인 오브젝트는 엔진이 만든 객체이고, 우리가 사용하는 값들은 객체로 생성된 인스턴스라는 생각입니다.   fromCodePoint()는  코드포인트를 해당하는 문자로 반환하는 함수인데, 유니코드의 코드포인트는 "숫자"입니다.  만약 "숫자"에 fromCodePoint()를 '메소드'로 연결하려한다면, 자바스크립트엔진은 "숫자"를 Number타입으로 판단하고 빌트인Number오브젝트 객체안에서 fromCodePoint()를 찾으려 할 것입니다.(당연히 에러가나고 엔진은 찾지도 않겠지만 '만약'입니다) '숫자'를 처리한다는 것이 요점입니다. 처리하기이전에 생성되어야하고 개발자입장에서 생성하는과정은 생략되어있지만 엔진입장에서는 let num = 123 은 let num = new Number(123);// 이과정이 생략되어있음을 기억해야합니다. 이것이 유니코드 "숫자"를 처리하는 빌트인String오브젝트의 fromCodePoint()가 메소드가 될수 없고 함수 일수 밖에 없는 이유입니다. 빌트인 Number오브젝트의 인스턴스인 '숫자'에 빌트인String오브젝트의 '메소드'를 연결하는것은 맞지않으나, 함수의 파라미터로서 숫자를 받아 처리하는것은 상관없기 때문입니다.    반대로 codePointAt()은 "문자열"을 유니코드포인트로 반환합니다. 중요점은 "문자열"을 처리한다는 것입니다. "문자열"이 이미 빌트인String오브젝트 객체로 생성된 인스턴스입니다. 마찬가지로 let hello = "hello" 는 let hello = new String("hello") 가 생략되어있음을 기억해야합니다. 이때 인스턴스와 객체는 프로토타입으로 연결되어있고 인스턴스는 빌트인String오브젝트 메소드를 상속받아 사용할수있습니다.    메서드는 객체에 종속된다는 설명은 이런것입니다. 메서드는 메서드를 가지고 있는 객체, 그리고 그 객체로 생성되고 메소드를 상속받은 인스턴스만 메서드를 사용하기를 바라는(기대하는) 것입니다. 굳이 그렇지 않다면 같은기능을 하는 함수로 정의하면 되는거 아닐까요? 굳이 메소드로 만들 이유가없습니다.   그러므로 만약 codePointAt()앞에 [1,2,3]을 작성한다면,  is not function() 에러가 뜨겠지만, 엔진입장에서는 [1,2,3]은 빌트인Array오브젝트 객체로 생성된 인스턴스이기때문에 빌트인Array오브젝트 객체안에서는 해당 메소드를 찾을수 없다는 논리로 설명 할수 있겠습니다.    부족하지만 제 이해는 이렇습니다. 다른분들은 더 나은 답을 찾으시리라 믿습니다. 감사합니다.                  

위 식에서 result의 값을 result로 할당(+=)하는 듯?한 식을 어떤 논리로 이해해야할지 난감합니다.   예를 들어, 비슷한 구조로, const result = yield one + two console.log(result) 라는 식이 있을때,   1번째 next() 일 경우 => one + two의 값이 반환됨 2번째 next() 일 경우이면서 인자가 들어간 next로 호출될때 (예: next(20)) => next의 인자, 20이 result에 할당되어, result는 20의 값을 가짐 =>console.log(result) // 20 이라고 이해하고 있습니다.   즉.  one + two의 값이 result에 할당되는 것 같지만,  그렇지 않고,  분리가 되어, 호출되는 next의 인자값이 할당되는 것으로 이해하고 있습니다.   만약 간단하게, yield result++ 일 경우라면,  증감된(++) result가 반환되는거로 이해하면 되는데요,   반면 result +=yield result;은 위의 식 처럼이라면, yield 의 표현식인 (우측의) result가 반환 될 것같은데, 그게 아니라 이전 result에 이후 result가 더해진 새로운 result(result+=result)가 출력이 됩니다.   (제가 알고 있는 지식으로) 1.yield 우측의 표현식의 반환값은 좌측의 변수로 할당되지 않고 2.그 이후에 호출되는 next()메서드에 인자로 넣은 값을 갖는 거라고 알고 있는데요   해당 소스를 크롬 디버거로 돌리면, result의 값이 next메서드에 인자(10,20,30,40)로 들어간 값이 누적해서 더해지고 있습니다.   제네레이터 함수는 이전 값을 기억하고 있어 이후의 값과 연산이 가능한 건 알겠는데, yield 표현식의 값이 할당되는 건 아닐텐데,,, '할당' 되는 모습"인거 같아 "너무 혼란스럽습니다...ㅠ   위의 식을 어떤 논리로, 흐름으로 이해하면 좋을까요??.. 위 식을 강의 진행해주신 것처럼 풀어 설명 해주실 수 있을까요?   부탁드립니다!!

스코프 설명 중에 let 변수를 같은 이름으로 선언하면 실행에러가 아닌 컴파일 에러라고 설명을 해주셨는데요. 자바스크립트는 인터프리터 언어로 브라우저엔진이 해석해주는걸로 알고 있었는데 내부에서  자바스크립트 파일을 컴파일 하는 과정이 있나요? 호이스팅 단원에서 보니 아래에 선언된 변수를 위에서 사용할 수 있도록 끌어 올려주려면 전처리가 필요할 것 같긴한데, 그것이 컴파일 과정일까요? 이 부분은 심화에서 다뤄지나요? 읽어주셔서 감사합니다.

this로 오브젝트 참조 코드를 아래와 같이 arrow function을 이용해 봤는데, 값이 [NaN, NaN]이 나옵니다.. 단순히 arrow funtion으로만 바꿧을 뿐인데 왜 그럴까요? const like1 = {0: 10, 1: 20, length:2}; console.log(Array.from(like1, (value) => {   return value + this.plus; }, {plus: 70}));

안녕하세요. 강사님   clear() 메소드를 사용하면 모든 엘리먼트를 지운다고 하셨는데, 엘리먼트와 entry가 같은 의미인가요?

좋은 강의 감사합니다. 첫 번째 강좌인 Well-know Symbols에서 마지막 페이지에 있는 Well-know Symbols 표를 기준으로 "대응"에 있는 걸 실행할 때, Symbol코드가 있으면 Symbol을 먼저 실행하고 @@가 실행된다고 이해하고 있습니다. 그러면 constructor가 실행됐을 때 Symbol 코드가 없으면 @@species가 실행되고, @@species는 인스턴스를 생성하여 반환하는 Well-Know Symbol이라고 생각하면 될까요? 선생님께서 이 강의 마지막 페이지에서 설명하시길 obj.slice()처리 결과를 인스턴스에 설정 후 반환하는데 이게 Symbol.species가 인스턴스 만드는 기능을 해서다 라고 하셨습니다. obj가 인스턴스이기에 constructor가 없다는 것까지 이해가 되는데 예제 코드에는 Symbol.species 가 없어서 질문드립니다. Symbol.species는 개발자가 작성해야하는거 아닌가요? 그렇다면 예제에도 Symbol.species 코드가 있어야하는거 아닌가요?

yield 키워드 강의를 듣다가 한 가지 의문이 들어 질문을 남기게 되었습니다. function* test(one) {   let two = yield one;   let param = yield one + two;   yield param + one; } const testObj = test(10); console.log(testObj.next()); console.log(testObj.next()); console.log(testObj.next(20)); console.log(testObj.next()); 위의 코드를 제 나름대로 해석해보면, 1. generator object를 생성한다. 2.첫 번째 next()가 호출 되었을 때 one은 parameter로 넘긴 10을 가지고 있는 상태이므로 { value: 10, done : false }를 반환한다. 이 후 two에 값을 할당하지 않는다. 3. 다음 next()에선 parameter로 보낸 값이 없으므로 two에는 undefined가 할당된다. 3번에서 two에 undefined가 할당되고 yield one + two는 undefined + undefined로 계산되야 하는거 아닌가요? 그런데 one은 10이 할당된 것으로 나와서 어떻게 해석해야할지 잘 모르겠습니다. 그리고 param도 제 생각엔 one + two가 계산된 값이 할당되어야 할 것 같은데, 20이 할당되어있네요. 답변 주시면 감사하겠습니다.

안녕하세요. const test = function () { console.log('test 입니다.') } 함수표현식으로 된 코드가 있습니다. window 오브젝트를 사용하여 접근을 하고 싶습니다. 개발자도구로 Scope에서 Script 에 적용되어 있는거 까진 확인했습니다. window 오브젝트를 통해 함수표현식 코드를 실행하려고 한 이유는 팝업창(자식창)에서 부모창에서 선언된 함수를 호출하려 합니다. ex) window.opener.test(); 만약 window 오브젝트에서 Script Scope를 접근할 수 없다면 팝업창(자식창)에서 부모창의 함수를 호출하는 방법을 알고 싶습니다.

String.fromCodePoint(50)와 "123".codePointAt(1)의 형태가 다른데 그 이유는 무엇일까요? String.fromCodePoint( )은 직접 호출하는 함수의 형태로 다수의 파라미터를 작성합니다.  codePointAt( ) String.prototype.codePointAt() 호출, prototype을 사용한 메소드 형태로 파라미터에 인덱스 하나만 작성합니다. [1, 2, 3]으로 작성하면 타입에러가 발생하면서 이는 동작하지 않습니다.  codePointAt()은 값을 구하는 대상이 있지만, fromCodePoint()은 대상이 없습니다. --- + 이는 유니코드와 문자열을 서로 인코딩과 디코딩을 하기위한 목적으로 설계되었다고 생각하였습니다.   + fromCodePoint()은 String 빌트인에서 직접 호출하여 사용하는 함수 형태입니다. 이는 파라미터에 작성한 유니코드 값을 문자열로 변환하는 것에 초점이 맞추어져 있으며, 즉 디코딩의 목적으로 사용하라는 의미 같습니다.   + codePointAt()은 생성한 String 오브젝트에 대하여 프로토 타입에 내장된 메소드를 사용하는 형태입니다. 생성한 오브젝트에 초점이 맞추어져 있으며, 즉 인코딩의 목적으로 사용하라는 의미 같습니다. 

선생님 강의 듣다가 궁금한 점이 생겨서 질문드립니다. 화살표 함수 show()의 [[Scope]]가 , 실행컨텍스를 생성한 후에, This 바인딩 컴포넌트에 바인딩되여, 참조하도록 되는 것인지, 아니면, 실행 시점에, 렉시컬 환경 컴포넌트의 외부 렉시컬 환경 참조에 참조하는  book 오브젝트를 통해서, 식별자해결을 통해,   window 오브젝트를 참조하는 것으로 봐야할까요

일전에 ES5 심화과정 에서 event 처리시에 this 를 참조하지 못해서 bind 를 이용해서 해결하신다고 알려주셨는데, 제 나름대로 활용을 해봤습니다. 아직은 많이 미숙하지만 이게 정말 되는게 너무 신기하네요. 덕분에 많이 배우며 성장하고 있습니다. 항상 좋은강의 감사드립니다! var obj = { yellowPoint: 100, redPoint: 200, bluePoint: 300, setEvent: function () { var node = document.querySelector('.sports'); for (let k = 0; k < node.children.length; k++) { node.children[k].onclick = this.myEvent.bind(obj, k); } }, myEvent: function (k, event) { switch (k) { case 0: event.target.style.background = 'yellow'; console.log('k : ', k); console.log('yellowPoint : ', this.yellowPoint); break; case 1: event.target.style.background = 'red'; console.log('k : ', k); console.log('redPoint : ', this.redPoint); break; case 2: event.target.style.background = 'blue'; console.log('k : ', k); console.log('bluePoint : ', this.bluePoint); break; } }};obj.setEvent();

안녕하세요. 선생님. 제가 궁금한점이 생겨서 글남김니다. 현재 작업중인 코드가 있는데 for문안에 Aajax를 두번 사용하고 있습니다. for문안에 var를 사용해서 ajax에서 사용하니 끝값을 갖게되어 전송이 제대로 안되어 고민 하던 차에 선생님 강의를 듣고  영감을 얻어 let을 사용하여 해결 하였습니다. 문제는 크롬에서는 잘되는데  익스플로러를 사용 할때는 for문안에서 let에 문제가 있다고 들었는데요.. 익스플로러에서도 사용할수 있도록 다른 방법이 있을까요? var를 사용하면서 끝수가 아닌 순차적으로 할수 있는 방법이 있을까요? for(var j=0; j < result.length; j++){ let formData = new FormData(); let errData = null; let Key1 = null; let Key2 = null; let pdf = null; (function(j) { var getToken = function(){ return new Promise(function(resolve, reject){ //토큰을 얻어오기 위한 ajax jQuery.ajax({ url: "" ,type:"POST" ,contentType :"application/json" ,data: JSON.stringify({""}) ,success : function(res){ var token; token = res["token"]; key1 = result[j]["Key1"] Key2 = result[j]["key2"] pdf = result[j]["pdf"]; formData.append("key1", key1); formData.append("Key2", Key2); formData.append("pdf", pdf); return resolve(token); },error : function(err){ } }) }); } getToken().then(function(res){ //토큰을 얻고 데이터를 보내주는 ajax jQuery.ajax({ url: "" ,type:"POST" ,data : formData ,processData : false ,contentType : false ,success : function(result){ },error : function(err){ } }); }); })(j); }

안녕하세요. 선생님. 좋은 강의 너무 잘듣고 있습니다. 제가 강의를 듣다가 질문이 생겨서 글올리게 되었습니다. let변수 4강에서  var node = document.querySelector(".sports"); for (var k = 0; k < node.children.length; k++){   node.children[k].onclick = function(event){     event.target.style.backgroundColor = "yellow";     console.log(k);   }; }; 에서 var k가 왜 3이 나오는지 생각을 해도 이해가 되지 않아서 질문드립니다!

실제로 콘솔에 찍어보니 아래와 같이 나오는데요, Array.from()은 파라미터를 쪼개서 배열로 만들어주고, 파라미터가 object 타입이면 빈 배열 []을 반환하더라고요. 반면 Array.of()는 object 타입을 파라미터로 받았을 때 그대로 반환하고, 다른 파라미터는 객체 하나로 통째로 반환하였습니다. 제가 잘못 이해한 건지요? 'use strict'; const arrayLike = {0: "zero", 1: "one", length: 2}; const obj = {1:1, 2:2, 3:3} console.log(Array.from(obj));         // [] console.log(Array.from("ABC"));       // ["A", "B", "C"] console.log(Array.from(arrayLike));   // [zero, one] console.log(Array.of(obj));         // [{1: 1, 2: 2, 3: 3}] console.log(Array.of("ABC"));       // ["ABC"] console.log(Array.of(arrayLike));   // [{0: "zero", 1: "one", length: 2}]

안녕하세요. 예전에 이해하고 넘어갔으나 다시 잘 안떠올라서 돌아왔는데, 또 뭔가 새롭습니다. 몇 가지 혼란스러운 부분이 있어 질문하고자 합니다.   var value = 1000; function Node(value) {   this.value = value; } Node.prototype.getValueByArrow = () => {   console.log("this: ", this);   console.log(this.value); }; Node.prototype.getValueByFunc = function () {   console.log("this: ", this);   console.log(this.value);   let hello = "hi";   const hi = () => {     console.log(this);     console.log(hello);   };   hi(); }; Node.prototype.getValueTest = function () {   console.log("this: ", this);   console.log(this.value);   const arrowTest = () => {     console.log("arrow this in func: ", this);   };   arrowTest(); }; new Node(100).getValueByArrow(); new Node(300).getValueByFunc(); new Node(300).getValueTest(); 1️⃣ Arrow Function의 this는 Arrow Function이 속해있는 object의 ThisBindingComponent를 따라가는 건가요? 위의 코드로 테스트 해보니, 'getValueTest'의 this와 안에 있는 'arrowTest'의 this가 같음을 확인했습니다. 그렇다면 ThisBindingComponent를 따라간다고 해석해도 될까요?2️⃣ 정리하자면, "일반함수(function name() {...})의 this는 호출할 때 앞의 object가 scope로 되고(ex: obj.name()), Arrow Function은 자기가 속해있는 object의 this(ThisBindingComponent)를 참조한다." 이렇게 해석해도 될까요? 3️⃣ this는 함수가 호출될 때 결정이 된다고 알고있습니다. 그렇다면 Arrow Function은 Engine에 의해 만들어질 때, 정해진다고 봐도 될까요? 답변 주시면 감사하겠습니다.

설명을 쭉 들으니 '첫번째 파라미터의 prototype으로 두번째 파라미터 설정' 이 아니라 '두 번째 파라미터의 prototype으로 첫번째 인스턴스/오브젝트의 prototype 을 설정한다'고 설명해야 맞는 표현이 아닌가 해서요. obj(Array-Like) 인스턴스의 __proto__ 에 Object.prototype에 연결된 메소드가 설정되어 있다가  Object.setPrototypeOf(obj, Array.prototype) 문장을 실행하면 Array.prototype에 연결된 메소드가 obj 에 설정되니 두 번째 파라미터의prototype으로 첫 번째 파라미터를 설정하는 것 아닌가요? 질문 읽어주셔서 감사합니다.

강의를 만드는 시점에는 let 변수와 const 변수가 브라우저 디버거 창의 오른쪽에 표시되지 않았으나, 2021.02.13 기준, 질문을 받고 확인해보니 표시됩니다. 변경되었습니다.표시되더라도 변수 앞에서 호이스팅으로 let 변수, const 변수를 사용할 수 없으며 에러가 발생합니다만, 블록에 작성된 변수를 표시하여 사용의 편리를 제공하기 위한 것으로 생각됩니다.  바로 아래 질문에 화면 캡처가 있으니 참조하기 바랍니다.

콘솔은 강의대로 찍혀있지만,  소스 디버깅 처음부터 Script 에 globalLet이 떠있습니다. 강의에서는 ( 16. let globalLet; ) 변수 선언이 실행되어야 Script에 설정되는 것처럼 나오는데 제 브라우저에서는 그 문장 실행 이전부터도 Script에 globalLet이 설정되어 있어서 혼란스럽습니다. 이것 역시 실행하기 전에 엔진이 한 번 훑었다고 생각하면 될까요...?