개발일기

Prototypeprototype V.S [[Prototype]] V.S constructor 생성자 함수를 new 연산자로 instance를 생성할 경우, constructor의 'prototype'이라고 하는 프로퍼티의 내용이 instance의 [[Prototype]]라고 하는 프로퍼티로 참조를 전달하게 된다.곧, Constructor.prototype과 instance[[Prototype]]은 같은 객체를 바라본다.그런데 [[Prototype]]은 접근 가능한 것이 아닌 정보를 보여주기만 할 뿐, 실제 동작 상으로는 instance와 동일시되며, 이 프로퍼티를 이용해 constructor.prototype에 직접 접근할 수는 없다.생성자의 프로토타입은 인스턴스를 가리킨다.리터럴로 생성한 배열이든, ..

클로저(Closure)MDN says: A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). ... In Javascript, closures are created every time a function is created, at function creation time.내부 함수와 LexicalEnvironment의 조합 실행 컨텍스트 A 내에서 함수 B를 생성한 경우, A(실행 컨텍스트)의 lexical environment와 내부함수 B의 조합에서 나타나는 특별한 현상 컨텍스트 A에서 선언한 변수를 내부함수..

콜백 함수(callback function)함수를 처리해달라고 요청하고, 이 요청을 넘겨받은 쪽에서 알아서 작업을 한 다음 처리가 끝난 뒤 요청한 쪽으로 알려주는 것.( callback 함수에 대한 제어권을 넘긴다는 것을 의미(= 제어권 위임) )제어권을 위임한다는 것은 아래의 것들을 넘겨준다는 것을 의미한다.실행 시점매개변수this1. 실행 시점 setInterval SPEC => setInterval(callback func, milliseconds) callback Func를 milliseconds 뒤에 setInterval 함수가 실행시켜준다. 사용자가 milliseconds 마다 callback func에 있는 내용을 호출해줄 필요 없이. setInterval(() =..

this 바인딩- this binding은 실행 컨텍스트가 활성화 될 때 한다.(= 실행 컨텍스트가 생성되는 순간에 this를 바인딩한다.)- 실행 컨텍스트는 컨텍스트에 해당하는 함수가 호출될 때 생성된다. 곧 this는 함수가 호출될 때에 비로소 결정되는 것이다. 그렇기에 정적으로 코드만 봤을 때 어떤 것의 this가 무엇이다 바로 예측할 수 있는 것이 아니라 이 함수를 어떤 식으로 호출했느냐에 따라서 this가 얼마든지 달라질 수 있다.(= this는 동적으로 바인딩 된다.) 호출하는 방식에 따른 this* 아래의 다섯가지에 대한 차이점을 이해하면 this에 대해 완벽하게 정리할 수 있다.전역공간에서 호출할 경우함수를 함수로서 호출할 경우함수를 메서드로서 호출할 경우함수를 callback 함수로 넘겼..

Execution Context= 코드를 실행하는데 필요한 주변 환경= 코드의 배경이 되는 조건/환경= 코드를 실행하는 데에 필요한 배경이되는 환경= 함수를 실행할 때 필요한 환경정보를 담은 객체 javascript에서 동일한 조건을 지닐 수 있는 환경은 4가지(전역공간, 함수, eval, module) 밖에 없다.eval은 여러 문제를 야기하는 몹시 위험한 명령자바스크립트 코드가 실행되는 순간에 바로 전역 컨텍스트가 생성되고, 전체 코드가 끝날 때에 비로소 전역 컨텍스트가 종료되기에 '전역공간'은 거대한 함수 공간이라고 볼 수 있다.module도 import 되는 순간에 그 모듈 내부에 있는 컨텍스트가 생성이 되고 그 모듈 코드가 전부 끝났을 때 컨테스트 종료되기에 module 또한 하나의 함수 공간이..

JS typeprimitive, reference type으로 구성primitive(원시값)number, string, boolean, null, undefined, Symbol (ES6에 Symbol이 추가)Reference(참조값)Object(객체): Array, Function, RegExp, Set / WeakSet, Map / WeakMap (Set, WeakSet, Map, WeakMap 등 ES6에 추가되었다.)이 두 타입을 구분하는 이유가 있다. 이 두개의 타입은 메모리에 저장되는 형식이 다르기 때문이다.javascript 메모리 구조는 Stack Memory와 Heap Memory 영역으로 구성되어 있다.스택 영역에는 변수, 기본형 데이터 저장(정적 할당)힙 영역에는 참조형 데이터(동적 ..

button A button B button C 이벤트를 걸어줄 때, 요소 하나 하나마다 addEventListener를 통해 걸게 되면, 성능이 안좋게 된다. 따라서 event를 걸어줄 요소들의 부모에 event를 걸어주면, 성능을 향상 시킬 수 있다. 즉, event를 걸어줄 요소들의 부모로 event 처리를 위임하는 것이다. 위에 코드에서는 각 button 들에 addEventListener를 등록하는 것이 아니라 menu라는 클래스를 갖는 부모 div element에 event를 등록하는 것이다. 하지만 이러한 경우, 아래의 상황을 처리해야한다. 부모에 이벤트를 걸어줬기 때문에, 그 부모 내에서 어떤 자식요소(어떤 버튼)를 클릭했는지를 구분할 수 있는 작업이 필요하다. 구분할 수 있는 방법으로는 ..