\(@^0^@)/

오늘 읽은 범위 : (프로토타입) p.160 ~ p.174 프로토타입 체인 메서드 오버라이드 인스턴스가 동일한 이름의 프로퍼티 또는 메서드를 가지고 있는 상황이라면? var Person = function (name) { this.name = name; }; Person.prototype.getName = function () { return this.name; }; var iu = new Person('지금'); iu.getName = function () { return '바로 ' + this.name; }; console.log(iu.getName()); // 바로 지금 당연히 iu.__proto__.getName이 아닌 iu 객체에 있는 getName 메서드를 호..

오늘 읽은 범위 : (프로토타입) p.146 ~ p.159 프로토타입 JS는 프로토타입 기반의 언어이다. 클래스 기반 언어에서는 '상속'을 사용하지만, 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고, 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 유명한 프로그래밍 언어의 상당수가 클래스 기반인 것에 비교하면 프로토타입은 꽤나 독특한 개념이라 할 수 있음. - 프토토타입의 개념 이해 - Constructor, prototype, instance 위의 그림은 아래의 코드를 도식화한 것이다. var instance = new Constructor(); 어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면 Construct..

오늘 읽은 범위 : (클로저) p.125 ~ p.145 클로저 콜백 함수 내부에서 외부 데이터를 사용하고자 할 때 // 콜백 함수와 클로저 var fruits = ['apple', 'banana', 'peach']; var $ul = document.createElement('ul'); fruits.forEach(function (fruit) { // A 함수 var $li = document.createElement('li'); $li.innerText = fruit; $li.addEventListener('click', function() { // B 함수 alert('your choice is ' + fruit); }); $ul.appendChild($li); })..

오늘 읽은 범위 : (클로저) p115 ~ p.124 클로저 클로저의 의미 자신을 내포하는 함수의 콘텍스트에 접근할 수 있는 함수 함수를 선언할 때 만들어지는 유효 범위가 사라진 후에도 호출할 수 있는 함수 로컬 변수를 참조하고 있는 함수 내의 함수 어떤 함수에서 선언한 변수를 참조하는 내부 함수에서만 발생하는 현상 클로저의 원리 일반적인 외부 함수의 변수를 참조하는 내부 함수 var outer = function () { var a = 1; var inner = function () { console.log(++a); }; inner(); }; outer(); 클로저 발생하는 외부 함수의 변수를 참조하는 내부 함수 var outer = function () { var ..

오늘 읽은 범위 : (콜백 함수) p.94 ~ p.114 콜백 함수 콜백 함수 (callback function)는 다른 코드의 인자로 넘겨주는 함수. 콜백 함수는 제어권과 관련이 깊다. 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행할 것. 제어권 var count = 0; var cbFunc = function () { console.log(count); if (++count > 4) clearInterval(timer); }; var timer = setInterval(cbFunc, 300); // -- 실행 결과 -- // ..

오늘 읽은 범위 : (this) p.80 ~ p.93 명시적으로 this를 바인딩하는 방법 1️⃣ call 메서드 Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]) 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로. 함수를 그냥 실행하면 this는 전역 객체를 참조하지만 call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있다. 객체의 메서드를 그냥 호출하면 this는 객체를 참조하지만 call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있다. // 함수 var func = function (a, b, c) { co..

오늘 읽은 범위 : (this) p.65 ~ p.79 다른 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미하고, this를 클래스에서만 사용할 수 있기 때문에 혼란의 여지가 없거나 많지 않다. 하지만, 자바스크립트(JS) 에서의 this는 어디서든 사용할 수 있다. 함수와 객체(메서드)의 구분이 느슨한 JS에서 this는 실질적으로 이 둘을 구분하는 거의 유일한 기능이다. 상황에 따라 달라지는 this JS에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. (실행 컨텍스트는 함수를 호출할 때 생성됨) 즉, this는 함수를 호출할 때 결정된다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다. 1️⃣ 전역 공간에서의 th..

오늘 읽은 범위 : (실행 컨텍스트) p.53 ~ p.64 스코프, 스코프 체인, outerEnvironmentReference 스코프(scope) : 식별자에 대한 유효 범위 ES5까지의 JS는 전역 공간을 제외하면 오직 함수에 의해서만 스코프가 생성됐음. (var) 스코프 수준(level) : 함수 스코프(Function Scope) : var , 함수 외부에서 함수 내부의 변수에 접근 불가 블록 스코프(Block Scope) : let, const , 블록 외부에서 블록 내부의 변수에 접근 불가 스코프 종류(Function Level Scope) : 전역 스코프(Global Scope) : 어떤 경계 A의 외부에서 선언한 변수는 A의 외부뿐 아니라 A의 내부에서도 ..

오늘 읽은 범위 : (실행 컨텍스트) p.36 ~ p.53 실행 컨텍스트 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 스택 (stack) : 출입구가 하나뿐인 깊은 우물 같은 데이터 구조 큐 (queue) : 양쪽이 모두 열려있는 파이프, 보통 한쪽은 입력만 다른 한쪽은 출력만을 담당. 실행 방법 : 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 call stack에 쌓아 올렸다가 실행. 구성 방법 : 함수를 실행하는 것 (자동으로 생성되는 전역 공간과 eval 제외) 1. JS 파일이 실행되는 순간 전역 컨텍스트가 활성화되어 콜 스택에 담김. 2. outer 함수를 호출하는 순간 해당 함수의 환경 정보..

[ 코어 자바스크립트 DAY 2 ] 오늘 읽은 범위 : (데이터 타입) p.20 ~ p.35 참조형 데이터의 '가변'은 데이터 자체가 아닌 내부 프로퍼티를 변경할 때만 성립. 데이터 자체를 변경하고자 하면 (새로운 데이터를 할당하고자 하면) 기본형 데이터와 마찬가지로 기존 데이터는 변하지 않는다. 불변성을 확보할 수 있는 경우 : 1. 내부 프로퍼티를 변경할 필요가 있을 때마다 매번 새로운 객체를 만들어 재할당하기로 규칙을 정하거나 2. 자동으로 새로운 객체를 만드는 도구를 활용 3. 불변성을 확보할 필요가 있을 경우에는 불변 객체로 취급, 그렇지 않은 경우네는 기존 방식대로 사용. 불변 객체가 필요한 경우 : 값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우. 얕은 복사(s..