Javascript 핵심 개념 알아보기 - JS Flow
Javascript 핵심 개념 알아보기 - JS Flow
수강정보
(139개의 수강평)
1937명의 수강생
스킬태그 #Javascript, #알고리즘
이순곤 프로필

Employee.prototype = new Person()와Bridge.prototype = Person.prototype차이 이순곤 1일 전
Employee.prototype = new Person()와 Bridge.prototype = Person.prototype 차이를 잘 모륵겠습니다 TT 제가 이해한거는 맨위에 new Person()을 하면 인스턴스를 Employee.prototype 에 넣어서 Person클래스의 메소드를 상속받아서 getName(),getAge()를 쓸수있는거는 알겠는데 Bridge.prototype = Person.prototype 하면은 어떻게 되는건지 ... 그리고 Employee.prototype = new Person() 하면 프로토타입에 name , age 이름없음 나이없음 뜨는게 생성자를 통해 생성된 인스턴스여서 name ,age프로퍼티가 존재하는건가요?  쓰면서 생각났는데 그러면 그와 반대로 Person.prototype를 Bridge.prototype넣으면 인스턴스가 아니라 prototype이니까 프로퍼티가 없는건가요?

1
임성후 프로필

3:03 외부에게 지역변수 변경 권한을 준다의 의미가 궁금합니다. 임성후 3일 전
자동차 게임 예시를 통해, 지역변수를 선언이 외부로부터 그 값을 바꾸지 못하도록 한다는 것을 이해하였습니다. 그런데 3:03초쯤에 외부에게 지역변수 변경 권한을 부여한다는게 무슨 의미인지 잘 와닿지 않습니다. 자동차 게임에서 지역변수를 선언하면서 외부에서 값을 변경 못하도록 한건, 지역변수 변경 권한을 없앤것 아닌가용?.?

2
pgk7926 프로필

프로퍼티 상속에서~ pgk7926 16일 전
Employee 생성자에서 this.superClass(name, age) 이 부분이 체이닝을 거쳐 Parent(name, age)가 되고, 이 Parent 생성자 함수가 생성자가 아닌 일반 함수로서 호출되어 name과 age를 매개변수로 받아 값을 할당하게 되는 걸로 이해했는데 맞나요??? 

2
이순곤 프로필

inner함수 console.log(a)질문.. 이순곤 17일 전
undefined가 출력되는데 여기서 이해가 안되는게 outer함수가 호출될때 outer실행컨텍스트가 실행되면서 this바인딩하고 호이스팅이 일어나는데 여기서 호이스팅으로  함수선언식인 inner함수가 호이스팅됩니다. 그 다음에 outer scope에서 a를  탐색하는데 지역변수가 없으니까 global scope에서 탐색 해서 전역변수인 a 가 1일이니까 1출력하고 그다음 inner함수가 호출되면서  inner실행컨텍스트가 생성되면서 호이스팅이 일어나면서 a가 3이 할당되면서 올라오지 않나요?? 그래서 a가 3인줄알았는뎅 여기가 이해가 안됩니다 죄송하지만 이유를 조금 더 풀어서 알려주실수 있을까요 ?? TT

2
­오승영(공과대학 산업경영공학과) 프로필

호이스팅 관련 질문 ­오승영(공과대학 산업경영공학과) 19일 전
안녕하세요? 강의 재밌게 잘 들었습니다. 호이스팅 관련된 질문이 있습니다. 강의를 보고나니 호이스팅, 즉 스코프 내에서 선언과 할당을 분리하는 방식이 언어 설계 상에 어떤 의도가 있는지 의문이 생겼는데요. 열심히 구글링을 해보니 1.  JS 엔진이 코드를 실행하기 앞서서 컴파일 과정을 거치고 이 컴파일 과정에서 먼저 선언문을 처리함으로써 각 선언문의 렉시컬 스코프를 결정해주기 위해서라는 결론에 도달했습니다. 그런데 어차피 실행 하기 전에 컴파일 되는 방식이라면요.  굳이 선언을 올리는 방식이 아니라 다른 언어들처럼 컴파일러가 알아서(죄송하지만 구체적으로 표현을 못하겠습니다) 최적화된 기계어를 뽑아낸 다음에 그걸 실행시키면 되는게 아닌가? 라는 의문이 생겼습니다. 다시 구글링을 열심히 해보니  2. JS는 브라우저에 렌더링 하기 직전 짧은 시간에 컴파일을 해줘야 하기 때문에 위와 같은 방식이 불가 하고 컴파일과 인터프리팅을 한 번에 top-down으로 쭉 해줘야 한다는 내용을 알게되었습니다. 저는 1과 2를 합해서 3. 현재 스코프의 모든 선언문이 어디서 나타나든 실행 전에 컴파일 과정을 지나게 해야한다. 그래야 top-down으로 컴파일->인터프리팅이 가능하기 때문이다. 그래서 호이스팅으로 현재 스코프의 선언문을 먼저 올려야 한다. 라는 결론을 내렸는데요. 1과 2에 대한 정보는 많은데 3에 대한 자세한 잘 못찾겠어서 이곳에 질문을 남깁니다. 3의 내용에 잘못된 부분이 있는지 알려주신다면 감사하겠습니다. 긴 질문 읽어주셔서 감사합니다. 답변 기다리도록 하겠습니다.

2
정재훈 프로필

md 파일 뷰어 정재훈 1달 전
강의 노트를 다운 받아서 크롬에 markdown viewer extension 설치를 했는데도 그냥 텍스트로 보이는데 제대로 볼려면 어떤 프로그램을 이용해야 하나요?

2
1401660 프로필

Execution Context 관련 궁금증들 질문드립니다 1401660 1달 전
안녕하세요 !Execution Context에 강의 정말 잘 들었습니다. 덕분에 Execution Context에 대한 개념을 잡을 수 있었습니다! 감사합니다 😀Execution Context수강 후 여러 자료를 살펴본 결과 Excution Context가 생성되는 시점은 1.Global,  2.Function call, 3.Eval 등이 있다는 것을 알게 되었습니다.이와 관련하여 질문드립니다 ! 1.첫 번째로 해당 Execution Context이외에  JS가 업데이트 되면서 추가로 존재하는 Execution Context가 있을까요 ?만약에 존재한다면 기존의 Context와 동일한 방식으로 동작하나요 ? 2.두 번째 질문으로 Global Execution Context(GEC)의 소멸시점에 대해 궁금한 것이 있습니다 !JS CallStack에 쌓여진 GEC의 경우 언제 사라지나요? 네트워크 요청이나, setTimeout과 같은 비동기 작업이 있을때도가장 마지막에 GEC가 사라지나요?만약 GEC가 먼저 사라진 경우 비동기 작업처리 후 Callback이 실행되고, 해당 Callback Function이 Global Scope에 있는 변수를 접근한다면 어떤 일이 생기나요 ?3.마지막으로는 Lexcial Environment와 Lexical Scope에 대한 개념이 명확하지 않은데요Lexical Environment는 Execution Context 생성 시, 즉 Function이 call되는 시점에 생성되는 객체 정보라고 알고 있습니다.반면 Lexical Scope의 경우 정적 스코프로 함수가 선언된 위치의 Scope 정보를 담고 있다고 하던데실행과 선언에 대한 시점에 대해서 이해가 잘 되지 않습니다. 이 둘 간의 관계에 대해 설명해주실 수 있나요 ?

2
김민섭 프로필

함수형태로 호출된 this가 undefined 김민섭 1달 전
부록으로 올려주신 강의중 예제코드에 대한 설명을 듣고  node로 실행해보았는데, 아래의 코드에서  c()호출로 인한 console.log의 값이 undefined가 나오는데,  해당 블럭에서 this가 전역객체를 가르키게 되니까 10이 나와야 한다고 설명해주셨는데, 왜 undefined가 나오는 것이까요 !?... var a = 10; var obj = { a: 20, b: function () { console.log(this.a); function c() { console.log(this.a); } c(); }, }; obj.b();

1
김민섭 프로필

this가 가르키는 값이... 김민섭 1달 전
아래의 코드를 node로 실행해보면  콜백함수가 실행이 될때 vals of undefined... 에러가 발생합니다! this 가 전역객체를 가르키게 된다고 배운것 같은데 전역에 var varls를 정의해도 읽지못하네요 ... 혹시 이유를 여쭤봐도 되까요 ㅠㅠ  var arr = [1, 2, 3, 4, 5]; // var vals = [1,1,1]; var obj = { vals: [1, 2, 3], logValues: function(v, i) { if (this.vals) { console.log(this.vals, v, i); } else { console.log(this, v.i); } } }; obj.logValues(1, 2); arr.forEach(obj.logValues); var obj = { vals: [1, 2, 3], logValues: function(v, i) { if (this.vals) { console.log(this.vals, v, i); } else { console.log(this, v.i); } } }; obj.logValues(1, 2); arr.forEach(obj.logValues);

2
devToroko 프로필

class 상속 구현 강의 질문 있습니다. devToroko 1달 전
강의의 6:11 때의 그림을 보다가 문득 궁금한 점이 생겼습니다.현재 강의에서는 Bridge 라는 객체를 사용하는데,그냥 Employee.prototype = Person.prototype 를 해주면 되는 거 아닌가요??  아니면 혹시 어떤 차이점이 있기 때문에 Bridge를 쓰신건가요? 

2
devToroko 프로필

prototype chaining 강의 마지막에 나오는 코드를 따라해봤는데요... devToroko 1달 전
제목 그대로 prototype chaining  강의 마지막에 나오는 코드를 따라했는데요, 일반적인 html에 script 태그 안에 넣어서 돌리면 잘됩니다. 콘솔창에 잘 뜹니다.그런데 문제는 현재 이 강의를 재생하는 상태에서 제가 옆에 콘솔창을 띄우고 똑같이 해봤는데요 이런 에러가 납니다. 맨 처음 출력은 되는게 보이지만 그 이후로 무수한 에러가 납니다... 이유가 뭘까요? 궁금합니다!

2
snaag 프로필

__proto__ 로 하지 않는 이유가 따로 있을까요?? snaag 1달 전
안녕하세요!! 너무 좋은 강의 잘 보고 있습니다. bridge를 통해서 static method, variable과 연결고리를 끊는 부분에 대해서 질문 드립니다. <1> function Person() { this.staticBye = function() { console.log("bye"); } } Person.prototype.prototypeHi = function() { console.log("hi"); } function Employee() { } function Bridge() {} Bridge.prototype = Person.prototype; Employee.prototype = new Bridge(); Employee.prototype.constructor = Employee; const e = new Employee(); e.prototypeHi(); // hi e.staticBye(); // TypeError: e.staticBye is not a function <2> function Person() { this.staticBye = function() { console.log("bye"); } } Person.prototype.prototypeHi = function() { console.log("hi"); } function Employee() { } Employee.prototype.__proto__ = Person.prototype; const e = new Employee(); e.prototypeHi(); // hi e.staticBye(); // TypeError: e.staticBye is not a function <1>: bridge를 사용한 경우 <2>: __proto__ 로 연결한 경우 이 경우 __proto__ 를 사용하였을 때와 같은 결과를 보여주는 것 같은데, bridge를 사용하는 이유가 어떤 이유일지 궁금해서 질문을 드리게 되었습니다. 추가로 new 키워드로 prototype과 연결했을 때 (Employee.prototype = new Bridge();) Employee의 prototype과 constructor에 어떤 일이 일어나는지 알아보고 싶은데, 어떻게 검색해야 할지 감이 잘 오지 않아서 혹시 이 부분에 대해서 관련한 키워드 조금만 던져주시면 정말 감사하겠습니다!! 좋은 강의 정말 잘 듣고 있습니다!!

4
118jjh@naver.com 프로필

생성자 함수에서 스태틱 메소드에 접근이 불가능하다는 부분이 이해가 되지 않습니다. 118jjh@naver.com 2달 전
안녕하세요!  스태틱 메소드에 접근이 불가능하다는 부분이 이해가 안돼서 질문드립니다! 4분 50초 쯤에있는 코드에서, 아래와 같은 코드를 작성하면 인스턴스에서도, 스태틱 프로퍼티와 스태틱 메서드에  직접 접근이 가능할 것 같은데 안된다고 하셔서 다른 의미로 말씀하신건지 궁금합니다. function Person(name, age){ this._name = name; this._age = age; this.getInformations = function(instance) { return { name: instance._name, age: instance._age, }; } } 그리고, 추가적으로 궁금한 것이 있는데 constructor가 인스턴스를 생성할 때 어떤식으로 진행하는 것인지 궁금합니다. var 인스턴스 = new 생성자함수(); 라고 있을 경우에 생성자함수에 있는 모든 값을 그대로 복제해서 인스턴스를 생성하는 줄 알았는데 그게 아닌 것 같아서 궁금합니다. 제가 추측하기로는 new 연산자를 통해 플레인 생성자 함수의 prototype이 포함된 껍데기를 만들어 인스턴스를 생성하고, 생성된 인스턴스로 this 바인딩을 한 뒤에 함수가 실행되면서,  자연스럽게 this. 으로 되어있는 변수나 메서들만 새로운 인스턴스에 추가가 되는 것 같은데 이 순서가 맞는건지 궁금합니다! 감사합니다.

1
118jjh@naver.com 프로필

bind함수대신 var self = this로 바꾸어서 만들어보려하는데요. 118jjh@naver.com 2달 전
var callback = function() { console.dir(this); }; var obj = { a: 1 }; setTimeout(callback.bind(obj), 100); 위 예시를 bind를 쓰지 않고 만들어 보려고 하는데요. 제가 만든 방법은 아래와 같은데, 혹시 더 간단하게 만드는 다른 방법이 있을까요? var obj = {     a: 20,     b: function() {         var self = this;         var c = function() {             console.log(self);         }         setTimeout(c, 100);     } } obj.b();

1
118jjh@naver.com 프로필

안녕하세요. 잘못 된 부분을 수정해주셨는데 이해가 되지 않습니다. 118jjh@naver.com 2달 전
안녕하세요! 수정된 부분에 대해서 궁금해서 질문드립니다. callback.call(slef, this[i], i, this); 를 callback.call(this, this[i], i, self); 로 수정해주셨는데 어떻게 그렇게 되는건지 이해가 되지않습니다. forEach가 callback함수로 아래 3개를 받는 걸로 알고있는데,  그렇다면 원래 순서가 맞지 않는지 궁금합니다. 그리고 this 바인딩도 self로 되어야 하는게 맞지 않나요? 감사합니다. currentValue[[, index,] forEach()를 호출한 배열]

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스