코딩쌀롱

메서드 오버라이드 const Person = function (name) { this.name = name; }; Person.prototype.getName = function () { return this.name; }; const iu = new Person('지금'); iu.getName = function () { return '바로 ' + this.name; }; console.log(iu.getName()); // 바로 지금 prototype에도 getName 메서드가 있고, 인스턴스인 iu에도 getName 메서드가 있다. iu.getName()을 호출하면 어떤 메서드를 실행할까? 자바스크립트 엔진이 메서드를 찾는 방식은 가장 가까운 대상인 자신의 프로퍼티를 검색하고, 없으면 그 다음으로 ..

자바스크립트는 프로토타입 기반 언어이다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. Constructor, prototype, instance 프로토타입을 도식으로 추상화 해본다면, const instance = new Constructor(); 1. 어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면 2. Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성된다. 3. 이때 instance에는 __proto__라는 프로퍼티가 자동으로 부여되는데, 4. 이 프로퍼티는 Constructor의 prototype이라는 프로퍼..

부분 적용 함수(partially applied function) 부분 적용 함수란 n개의 인자를 받는 함수에 미리 m개의 인자만 넘겨 기억시켰다가, 나중에 n-m개의 인자를 넘기면 비로소 원래 함수의 실행 결과를 얻을 수 있게끔 하는 함수이다. this를 바인딩해야 하는 점을 제외하면 bind 메서드의 실행 결과가 바로 부분 적용 함수다. this를 사용하지 않는다면 bind 메서드만으로 문제없이 구현되겠지만 this의 값을 변경(null)할 수 밖에 없기 때문에 메서드에서는 사용할 수 없다. bind와 다르게 this에 관여하지 않는 부분 적용 함수가 있다면 더 좋을 것이다. 1) 부분 적용 함수 구현(1) 첫 번째 인자로 원본 함수, 두 번째 인자 이후부터는 미리 적용할 인자들을 전달하고, 반환할 ..

콜백 함수 내부에서 외부 데이터를 사용하고자 할 때 1) 콜백함수를 내부함수로 선언, 외부 변수 직접 참조 const fruits = ['apple', 'banana', 'peach']; const $ul = document.createElement('ul'); // (공통 코드) fruits.forEach(function (fruit) { // (A) forEach 콜백 const $li = document.createElement('li'); $li.innerText = fruit; $li.addEventListener('click', function() { // (B) 클릭e 핸들러 alert('your choice is ' + fruit); // fruit 외부 변수 참조 }); $ul.appen..

5-1 클로저의 의미 및 원리 이해 const outer = function () { let a = 1; const inner = function() { console.log(++a); }; inner(); }; outer(); (1) inner 함수 내부에서는 a를 선언하지 않았기 때문에 environmentRecord에서 값을 찾지 못하므로 outerEnvironmentReference에 지정된 상위 컨텍스트인 outer의 LexicalEnvironment(L.E)에 접근해서 다시 a를 찾는다. (2) 그리고 2가 출력된다. (3) outer 함수의 실행 컨텍스트가 종료되면 L.E에 저장된 식별자들(a, inner)에 대한 참조를 지운다. 그러면 각 주소에 저장돼 있던 값들은 자신을 참조하는 변수가 ..

4-1 콜백 함수란? 'callback'은 되돌아 호출해달라는 명령이다. 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보낸 것이다. 함수 X는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 Y를 직접 호출한다. 이처럼 콜백 함수는 함수 또는 메서드에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수다. 4-2 제어권 호출 시점 let count = 0; const timer = setInterval(function () { console.log(count); if (++count > 4) clearInterval(timer); }, 300); 이 코드를 실행하면 콘솔창에는 0.3초에 한 번씩 숫자가 0부터 1씩 증가하며 출력되다가 4가 출력된 이후 종..

call 메서드 Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]) call 메서드는 호출 주체인 함수를 즉시 호출하고, this 바인딩한다. 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로 한다. apply 메서드 Function.prototype.apply(thisArg[, argsArray]) apply 메서드는 call 메서드와 기능적으로 완전히 동일하다. 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다. call과의 차이는 호출 함수의 매개변수를 전달하는 방식에서만 있다. call / apply 메서드의 활용 call, apply 메서드는 명시적으로 별도의 this를 바인딩하면서 함..

전역 공간에서의 this 전역 공간에서 this는 전역 객체를 가리킨다. 전역 컨텍스트를 생성하는 주체가 전역 객체이기 때문. 브라우저에서 전역 객체는 'window', Node.js에서는 'global'이다. 전역 변수를 선언하면 자바스크립트 엔진은 전역 객체의 프로퍼티로 할당한다. 변수이면서 객체의 프로퍼티인 것. let a = 1; console.log(a); // 1 console.log(window.a); // 1 console.log(this.a); // 1 자바스크립트의 모든 변수는 특정 객체의 프로퍼티로서 동작한다. [변수 선언] 실행컨텍스트: 변수 수집 → Lexical Environment 프로퍼티로 저장 [변수 호출] 실행컨텍스트: L.E 조회 → 프로퍼티 값 반환 전역 공간에서 va..

2-1 실행 컨텍스트란? - 실행 컨텍스트: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 - 구성 방법: 전역공간(자동생성), eval함수(악마), 함수 실행 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행하고, 코드 실행이 종료되면 실행컨텍스트가 콜 스택에서 제거되고, 이전 컨텍스트를 다시 실행. 마지막으로는 전역 컨텍스트가 남고, 제거되고, 모든 코드 실행 종료. 전역 컨텍 → 컨텍1쌓임 → 컨텍2쌓임 → 컨텍3쌓임 → 3코드끝, 컨텍3 콜스택에서 제거 → 2코드끝, 컨텍2 콜스택에서 제거 → 1코드끝, 컨텍1 콜스택에서 제거 → 전역 컨텍 제거 → 빈 콜 스택, 종료 * ..

1-1. 데이터 타입의 종류 - 기본형(primitive type): number, string, boolean, null, undefined, symbol - 참조형(reference type): object, array, function, Date, RegExp, Map, WeakMap, Set, WeakSet 1-2 데이터 타입에 관한 배경지식 메모리와 데이터 컴퓨터는 모든 데이터를 0, 1로 바꿔 기억. - 비트(bit): 0, 1을 표현하는 하나의 메모리 조각, 고유한 식별자로 위치를 확인 - 바이트(byte): 8bit 모든 데이터는 바이트 단위의 식별자, 정확하게는 메모리 주솟값을 통해 서로 구분하고 연결 1-3 변수 선언과 데이터 할당 - 변수 선언: 메모리에서 비어있는 공간(변수 영역)을..