Javascript 핵심 개념 알아보기 - JS Flow

Javascript 핵심 개념 알아보기 - JS Flow

(123개의 수강평)

1732명의 수강생
Javascript알고리즘
heetobot 프로필

온라인강의 건너뛰고 오프라인 부록강의만 봐도 상관없나요? heetobot 13일 전
온라인강의 건너뛰고 오프라인 부록강의만 봐도 상관없나요?

1
do wang 프로필

return으로 인한 할당에 관련하여 질문드립니다. do wang 1달 전
6:36 익명 함수를 정의 하고 반환한다는 것 까지는 이해가 가는데 반환된 익명함수가 변수 count에 할당된 다는 것이 이해가 잘 가지 않습니다.  return function 이라는 것을 setCounter 함수로 받아들여야 하나요??  return이  나오니 갑자기 헷갈리는 것 같습니다 ㅠ

1
boutime2017 프로필

코어 자바스크립트 질문입니다! boutime2017 1달 전
번거롭게 해드려 죄송합니다 아마 코어 자바스크립트 서적 내에서는 마지막 질문이 될 것 같습니다 194페이지의 에제 7-12와 관련한 질문입니다 157페이지에 따르면, 생성자 함수의 프로퍼티인 프로토타입 객체 내부에는 constructor라는 프로퍼티가 있는데, 이는 생성자 함수 자기 자신을 참조합니다. 그렇다면, 191페이지의 Bridge를 통한 상속 흉내에서,  Bridge의 프로토타입이 참조하는 Rectangle의 프로토타입에는 constructor프로퍼티가 있고, 이 프로퍼티는 Rectangle을 참조하는 것이죠? 그런데 193페이지의 밑부분의 설명을 보면 SubClass의 프로토타입이 SuperClass대신 Bridge의 인스턴스를 바라보고 있으므로 SuperClass와의 관계를 복구해야 한다고 설명해주셨습니다. 그렇다면, Bridge.prototype = SuperClass.prototype 이 코드를 실행하는 과정에서 SuperCalss.prototype.constructor속성이 변경되나요? 제가 생각하기에는 예제 7-12의 7번째 줄인 Bridge.prototype.constructor = SuperClass; 이 작업이 필요가 없을 것 같은데 무엇을 놓친 것인지 궁금합니다.

2
boutime2017 프로필

코어 자바스크립트 질문입니다! boutime2017 1달 전
192페이지의  '예제 7-9에서는 즉시실행함수 내부에서 Bridge를 선언해서 이를 클로저로 활용함으로써 메모리에 불필요한 함수 선언을 줄였습니다.'부분에 관한 질문입니다! 메모리에 불필요한 함수 선언을 줄였다는 부분이 잘 이해가 되지 않습니다 1.즉시실행함수가 실행되면 즉시실행함수의 컨텍스트가 활성화되고, 2.즉시실행함수의 렉시컬 환경의 환경 레코드에 Bridge와 (return으로 반환되는)함수 선언문이 담기며, 3.Bridge에 빈 함수가 할당되고, 4.익명함수를 반환하며 즉시실행함수의 컨텍스트가 종료. 5.반환된 함수에서 Bridge를 참조하고 있기 때문에 가비지 컬렉터가 Bridge를 수거하지 않음. 저는 이렇게 이해했는데요, 선생님의 표현을 빌리자면 이 Bridge가 메모리 '소모'를 하고 있는 것이죠...? 이그렇다면 이 때 메모리에 불필요한 함수 선언을 줄였다는 것이 어떤 상황과 대비했을 때를 말하는 것인지 잘 모르겠습니다 ㅠ 1. 클로저를 활용한 것이 메모리에 불필요한 함수 선언을 줄였다. 2. 함수 표현식으로 선언할 경우, 전역 컨텍스트의 렉시컬 환경의 환경 레코드에서 그 함수를 참조하고 있으므로, extendClass2에 해당 함수의 실행 결과를 할당하더라도, 전역 컨텍스트가 종료되기 이전에는 여전히 해당 함수가 메모리를 차지하고 있다. 작성하다 보니 2번일 것 같기는 한데 확신이 들지 않아 여쭤봅니다 ㅠㅠ 

2
hgson.8 프로필

prototype chaining 강의 예제로 만들어진 toString 작동원리(?) 설명 부탁드립니다 hgson.8 1달 전
안녕하세요! 강의 4:23부터 나오는 toString method를 제대로 이해 못한 것 같아서 질문드립니다..  제가 이해한 바는 다음과 같습니다:1. obj.toString()을 호출하면(실행시키면?) res 배열이 생성 2. obj의 각 프로퍼티 값에 대해 toString() 실행. 2.1.  a: 1의 경우 1이 객체가 아니므로 기존 toString() 메서드가 실행됨. res[0] = a: 1 2.2. b: {c: 'c'}의 경우 2.2.1. 값인 {c: 'c'}가 객체이므로 {c: 'c'}에 예제에서 만든toString() 자신이 다시 호출됨. {c: 'c'} 반환. 2.2.2 res[1] = b: {c: 'c'} 3. {res[0], res[1]} 반환  질문드리고 싶은 내용은 다음과 같습니다: 1. 제가 잘못 이해하고 있는 부분이 있는 것 같아서 어떤 부분을 잘못 이해하고 있는지 알려주시면 감사하겠습니다ㅜ 확인차 var obj = {a: 1, b: 'c', d: {c: 'c'}} ; Object.prototype.prac = function(){ var res = []; for(var key in this){     res.push(`${key}: ${typeof this[key]===                 'object'? this[key].prac(): this[key].toString()}              `);        }; return '{'+res.join(', ')+'}'; } 로 예제를 바꿔서 실행해봤는데 반환값이 a: 1, b: c, d: {c: 'c' 로 마지막 프로퍼티 값에 뒷쪽 중괄호가 반환이 안되어서요,  원리를 잘못 이해하고 예제를 바꿔서 이런 오류가 나는 게 아닌가 싶은 생각이 들었습니다..  중괄호가 반환되지 않는 이유도 함께 설명해주시면 감사하겠습니다..! 2. 윗 obj.prac() 반환값에 prac method가 포함되었습니다. 강의 예제와는 달리 method가 함께 반환된 이유를 알고 싶습니다. 강의 잘 들으면서 도움 많이 받고 있습니다! 답변 해주시길 기다리겠습니다..! 감사합니다!

1
박명재 프로필

데이터타입 오프라인 온라인 차이 박명재 1달 전
온라인 강의를 다 듣고 오프라인 강의를 들어보니깐 기본형데이터 타입은 주소값이 바뀌고 데이터는 그대로 나둔다고 했는데 온라인 강의 부분에서는 그낭 그 주소값에 데이터를 덮어 씌운다고 하는데 어느게 정확한가요 ?

1
boutime2017 프로필

코어 자바스크립트 질문입니다! boutime2017 1달 전
165페이지 '프로토타입 체이닝'에 관한 질문입니다. var arr = [1, 2]; Array.prototye.toString.call(arr); Array의 프로토타입에는 toString이라는 메서드가 없으니 프로토타입 체이닝으로 거슬러 올라가서 Object의 프로토타입에 있는 toString메서드를 참조한다는 것은 알겠습니다.  call로 arr를 this바인딩 해주었으니 출력 결과도 '1, 2'가 나오는 것도 이해가 됩니다. 그런데 Object.prototype.toString.call(arr);의 출력 결과가 [object Array]가 나오는 것은 왜인가요? 똑같이 Object의 프로토타입에 정의된 메서드를 호출한 것이고, this바인딩도 같은 값을 참조하는데 무엇이 다른 것인지 모르겠습니다. (메서드의 호출 주체가 서로 다르다 할지라도, call로 this바인딩을 동일하게 묶어주었으면 다를 것이 없지 않나요?) 또, 저는 교재의 설명상 원래 다른 생성자에는 toString메서드가 없고, 오직 Object.prototype에만 toString메서드가 있는 것으로 이해했습니다. 다른 생성자로 생성된 인스턴스들이 toString메서드를 참조할 수 있는 것은 프로토타입 체이닝을 통해 호출하는 것이고요. 그런데, mdn에서 toString을 검색해보면 다른 생성자 함수의 프로토타입에도 toString이 정의되어 있는 것처럼 보입니다. 개발자 도구에서 로그를 찍어봐도 아래와 같이 나오고요. 책 출판 시점에서 그새 무언가 바뀌었는가 싶다가도, 어쨌거나 Object.prototype.toString.call(arr);의 출력 결과가 [object Array]인 것에 대해서는 이해가 잘 안됩니다. mdn의 설명에 따르면,  커스텀 객체에서 toString메서드를 호출하면 Object로부터 상속받은 기본 값을 반환하게 된다고 설명되어 있는데, 애초에 자바스크립트에는 '상속'의 개념은 없지 않나요? 질문이 중구난방이라 죄송합니다 ㅠ

2
boutime2017 프로필

코어 자바스크립트 질문입니다! boutime2017 1달 전
코어 자바스크립트 138~139페이지 질문입니다(이미지가 두 개 동시에 안 올라가네요 ㅠ) debounce함수는 콜백으로써 호출되는 함수이지만, addEventListener에 의해 debounce함수 내의 this는 document.body가 되는 것으로 알고 있습니다. 그렇다면 mousemove혹은 mousewheel이벤트가 발생했을 때, debounce함수가 내뱉은 익명함수가 실행될 것이고, 여기에서 self에 할당한 this는 document.body가 되는 것이죠...? 그런데 이 self를 왜 func에 bind해주어야 하는지 잘 이해가 되지 않습니다 ㅠ 인자로 받는 func는 moveHandler나 wheelHandler함수인데, 이 두 함수의 경우 console.log만을 수행할 뿐, this에 접근할 일이 없는데 왜 bind 작업이 필요한 건가요...?

1
Jiwon 프로필

null이 Primitive Type이 맞나요? Jiwon 2달 전
typeof(null) 했을 때, 'object'로 출력이 되는데, 튜터님의 설명에서는 primitive type으로 되어 있어서 혼란스럽습니다!  어떤게 맞는 건가요 ?_?

1
조진표 프로필

1. 데이터 타입에서 기본형과 참조형의 차이에 대해 궁금한 점이 있습니다. 조진표 2달 전
책, 강의 보면서 혼자 이해해보았는데 제대로 이해하고 있는 것인지 궁금합니다. 참조형의 가변성을 설명하신 부분중에(코어 자바스크립트, 20p 불변객체 부분) '참조형 데이터의 가변은 데이터 자체가 아닌 내부 프로퍼티를 변경할 때만 성립합니다'이라고 말씀하셨는데, 여기서 궁금한 부분은 2가지가 있습니다. 1. '참조형 데이터의 가변은 데이터 자체가 ~'  여기서 데이터란 말은 var obj; 에서 프로퍼티들의 집합을 표현(?)하기 위해 할당한 메모리 주소값을 의미하나요 ?  예를 들어 var obj; 은 @1004의 식별자를 obj로 하고 데이터(이름 : obj, 값 @5006)일 때, 여기서 객체에 다른 객체를 할당하는 경우 즉, @5006 -> @5008로 변경되는데 여기서 [ @5006 ,@5008 ]이 말씀하신 데이터 인가요 ? 2 '~ 내부 프로퍼티를 변경할 때만 성립합니다' obj.a 값이 3이고 아래와 같이 표현했을 때, @5003의 데이터 3은 기본형이기 때문에 '불변성'을 지니고, @8204(obj.a)의 값은 데이터로 '기본형'이 아닌 '주소값'을 가지기 때문에 변할 수 있다(그냥, 다른 것을 참조만 하면 되니깐...?). 이런 이유로 참조형은 데이터 자체가 변하는 경우가 아닌, 그 내부의 프로퍼티의 데이터가 변하는 경우에만 '가변'이라는 말이 성립하는건가요 ? 주소            8204                                               ~        |  5003 데이터     이름: a, 값 : @5003                           ~         |  3

2
고의성 고 프로필

감사드립니다! 고의성 고 3달 전
프로토타입에 대해 항상 명확히 이해 하지 못해 찜찜한 마음이 컷는데 오랜 시간 고민하시고 깨우치신 것을 가르쳐 주셔서 정말 감사드립니다! :)

1
조지헌 프로필

화살표 함수의 this 조지헌 3달 전
강의에는 없는 내용이지만 this 관련 궁금증이 생겨 질문남깁니다. 다음 강의에 있는 내용이라면 죄송합니다. const a = {         aa: function() {           console.log(this);         },         bb: () => {           console.log(this);         } 이렇게 했을 때 화살표 함수는 왜 window를 가리키게 되는지 궁금합니다.

2
류시명 프로필

var와 const의 차이? 류시명 3달 전
const a = 10; const obj = { a: 20, b() { console.log(this.a); // this === obj function c() { console.log(a); // 10 console.log(this); // window console.log(this.a); // undefined } c(); } } obj.b(); 위 코드에서 function c() 내부의 console.log(this.a)가 undefined를 출력하는 이유가 뭘까요? 전역공간에서 a를 var로 선언하면 10이 나오는데, const로 선언하면 undefined가 나오네요. 어떤 원리인지 궁금합니다.  + 좋은 강의 정말 감사드립니다! 덕분에 JS를 보는 눈이 확 트인 것 같아요.

2
불멸의너구리좌 프로필

헛갈리는데, 불멸의너구리좌 3달 전
안녕하세요. 영상내용 + 삼각형 그림을 같이 봤을 때 조금 헛갈려서 질문드립니다. 객체를 인스턴스로 복사했을때, prototype의 함수들(ex map(), foreach  등..)이 상속 되는건지, 상속이 아니라 사용할 수 있도록 '연결'되는건지 궁금합니다.

2
임준성 Lim 프로필

코어 자바스크립트 책과 비교 임준성 Lim 4달 전
안녕하세요. 코어 자바스크립트 책을 보다가 인터넷 강의까지 수강하게 되었는데요. 아직 인터넷 강의에서 "기본형과 참조형의 종류 및 차이점" 밖에 보지 못했는데, 책에서의 설명과 강의에서의 설명이 좀 다른 것 같아 혼란스럽네요. 예를 들어 1. 책에서는 데이터 영역에 데이터를 할당하기 전에 같은 값을 갖는 데이터가 메모리에 있는지 검색한 후에 값이 없으면 할당한다고 써있는데, 강의에서는 검색 과정없이 같은 값이라도 그냥 할당하는 것으로 설명하셨고, 2. 책에서는 변수만 선언한 경우(예를 들어 var a;) 데이터를 저장하기 위한 메모리 영역을 할당하지 않고 변수명을 저장하기 위한 메모리 공간만 할당하는 것처럼 써있는데, 강의에서는 데이터를 저장하기 위한 메모리 영역을 우선 할당하고, 변수명을 저장하기 위한 메모리 공간에 그 데이터 메모리 주소를 저장하는 식으로 설명해주셨습니다. 그 외에 참조형에 있어서도 책과 강의가 약간 다르게 설명되어 있는 것 같은데 이해하는데는 어느 쪽을 따라가도 상관없을 것 같지만, 어느게 더 실제 동작에 가까운 것인지 궁금합니다. 그리고 혹시 이 주제(변수 선언 및 데이터 할당시 메모리에서 일어나는 동작)와 관련해서 참고할만한 자료가 있다면 알려주셨으면 합니다. 감사합니다.

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