Jaeilit

문제 아래의 5번의 console.log(a) 에는 값이 몇일까요 답이 먼저 궁금하시면 여기 밑을 드래그 해보시면 답이 있습니다. 1, 3, undefind, 3, 3 var 를 쓰는 일은 극히 드뭅니다. 하지만 호이스팅 개념을 이해하고 변수와 함수의 선언부, 호출과 각 컨텍스트들을 이해하기에는 많은 도움이 된다고 생각합니다. 실행 순서 1) var a = 1 은 전역컨텍스트에서 변수 a 가 선언과 초기화, 할당까지 됩니다. 2) function outer() 은 전역 컨텍스트에서 함수 'outer' 가 선언됩니다. 3) outer 함수가 호출되고 outer 함수 내부로 진입하여 outer 함수에 대한 새로운 실행 컨텍스트가 생성됩니다. 3-1) 첫번째 console.log(a) 를 만나게 되고 oute..

이벤트 버블링 자세한 내용 https://ko.javascript.info/bubbling-and-capturing 버블링과 캡처링 ko.javascript.info onChange 는 Form 태그에 걸려있다. 위 사진은 동작은 classname 이 SearchInput__input 에서 입력을 했을 때 경우고 이번 사진은 급하게 만들어본 아무것도 없는 순수 input 태그이다. 두 콘솔의 차이는 path 속성과 target 부분이다. path 는 마치 스코프를 타고타고 전역까지 가는 모습이고 target 는 현재 target 즉 currentTarget 을 보여주는 것 같다. 왜 이런 차이가 발생했을까 이벤트 버블링은 최하위 이벤트가 일어난 속성부터 부모까지 이벤트를 전달전달전달 하는 것을 이야기하는..

프로토타입 프로토타입 도식화 어떤 생성자 함수를 new 연산자와 함께 호출할때 Constructor(생성자 함수 초기화) 가 생긴다 이 Constructor 는 instance 가 생기게 된다. instance 는 __proto__ 라는 프로퍼티가 자동으로 부여된다. 이 프로퍼티는 prototype이라는 프로퍼티를 참조한다. 코드 var Person = function (name) { this._name = name; }; Person.prototype.getName = function() { return this._name; }; let suzi = new Person('Suzi') Person.prototype === suzi.__proto__ // true Person.prototype // { g..

클로저 - MDN 클로저는 함수와 그 함수가 선언 될 당시의 어휘적 환경의 상호관계에 따른 현상 예제1) var outer = function () { var a = 1; var inner = function () { console.log(++a) // 2 return ++a } inner() } console.log(outer()) // undefined console.log(outer()) // undeinfed 설명은 그림과 같지만, outer() 함수 호출 당시 실행컨텍스트는 환경레코드에 a 와 inner 를 담고 외부환경으로는 outer 를 담습니다. inner() 함수는 호출 당시에 실행컨텍스트에 환경레코드로 담을 변수가 없습니다. inner가 ++a 를 해줘야하는데 inner() 환경레코드에..

콜백함수는 다른 코드의 인자로 넘겨주는 함수 콜백함수의 활용 -> 동기적인 작업이 가능한 콜백함수는 비동기 함수 호출 후 콜백함수로 동기적인 작업을 할 수 있다. let count = 0; let timer = setInterval(function () { console.log(count); // 0, 1, 2, 3 if (++count > 4) clearInterval(timer); }, 300); let countb = 0; let cbfunc = function () { console.log(countb, "b"); //0, 1, 2, 3 if (++countb > 4) { clearInterval(timerb); } }; let timerb = setInterval(cbfunc, 300); set..

생성자 함수 내부에서의 this 생성자 함수를 호출하면 우선 생성자의 prototype (프로토타입) 프로퍼티를 참조하는 __proto__ 라는 프로퍼티가 있는 객체를 만들고, 미리 준비 된 속성 및 개성을 해당 객체(this)에 부여하면서 인스턴스가 만들어진다 1. 처음 Cat 안의 this 는 빈 객체(인스턴스)이고, name을 인자로 받아왔다. 2. name 을 this.name 에 할당하고 난 뒤 this.name과 this를 console.log를 해보면 받아온 name 값이 this.name에 할당되었고 this 자체도 준비 된 속성에 할당되어있다. 3. 생성자 함수로 내부의 This는 인스턴스 자체를 가르킨다. # 유사배열객체 객체에는 배열메서드를 직접 적용할 수는 없지만 키가 0또는 양의정..

1) this 앞선 실행컨텍스트를 생성될 때 결정 된다. 실행컨텍스트는 어떠한 환경에서 코드를 하나씩 수집하면서 그 스냅샷으로 환경변수를 만들어내고 그 이후에 변하는 것들에 대해서는 어휘적환경에서 반영하게 된다. 이때 this 바인딩도 같이 만들어지게 된다. this는 함수를 호출 할 때 결정 된다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다. 1. 전역공간에서의 this 전역공간에서의 this는 전역객체를 가르침 브라우저 환경에서는 this 는 window node 환경에서는 global 임. 2. 변수는 어떤 객체의 프로퍼티 처럼 동작한다. (앞전의 포스트 내용 실행컨텍스트 이야기) 여기서 어떤 객체란 어휘적환경을 가르키는 것이고, 실행 컨텍스트는 변수를 수집해서(환경레코드)프로퍼티로 저장..

어쩌면 이 모든게 클로저를 위한 학습이 아닐까?.. # 식별자 식별자란 유효범위 a 외부에서 선언한 변수는 외부뿐 아니라 a 의 내부에서도 접근이 가능하지만 a 내부에서 선언한 변수는 오직 a 내부에서만 접근 가능 es5 까지의 자바스크립트는 전역공간을 제외하면 오직 함수 스코프만 생성 됨 식별자의 유효범위, 스코프를 안에서 바깥으로 차례로 검색해나가는 것을 스코프 체인이라 함, 이를 가능하게 하는 것이 바로 어휘적 환경(렉시컬환경)의 두번째 수집 자료인 외부환경참조이다. 복습 실행컨텍스트의 수집 정보 환경변수(Variable Enviroment) 와 렉시컬환경은 모두 환경레코드와 외부환경참조를 갖는다. 환경변수의 환경레코드와 외부환경참조는 최초 실행 스냅샷을 저장하고 렉시컬환경은 그 이후에 변경사항을 ..