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) 와 렉시컬환경은 모두 환경레코드와 외부환경참조를 갖는다. 환경변수의 환경레코드와 외부환경참조는 최초 실행 스냅샷을 저장하고 렉시컬환경은 그 이후에 변경사항을 ..

실행컨텍스트 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언 된 변수를 위로 끌어올리고(호이스팅) 외부 환경 정보를 구성하고, this 값을 설정 하는 등의 동작을 수행함. # 스택과 큐 스택과 큐는 자료구조와 알고리즘에서도 나오는 개념임 스택 선입후출 (FILO) 스택은 쌓다라는 의미로 블럭을 밑에서 위로 쌓듯이 책을 쌓듯이 쌓는 구조를 의미함 쌓여있으니 당연히 맨 처음에 들어온게 맨 마지막에 나가게 된다. 호출스택이 쌓이는 스택구조에 너무 많은 스택이 들어가면 stack over flow 에러가 발생함. 예를 들어 100개만 저장할 수 있는 스택에 101개가 들어가면 stack over flow 에러가 발생. 큐 선입선출 (FIFO) 터널과..

불변성이 필요한 경우는 값으로 전달 받은 객체에 변경을 가하더라도 원본객체는 변하지 않아야 하는 경우이다. 다시 전달받은 객체에 변경을 가하더라도 (가변) 원본객체는 변하지 않아야한다. (불변) 가변은 데이터의 내부 프로퍼티만 바뀔 때 성립한다. 데이터 자체를 변경하고자 하면 원시형형 데이터와 마찬가지로 기존의 데이터는 변하지 않는다. (새로운 객체를 만들게 됨, 불변) 불변성을 지키면서 내부프로퍼티만 변경하려면 새로운 객체를 만들면서 원본의 데이터를 불변상태로 보존하고 새로운 객체에서 내부프로퍼티만 변경하면 된다. changName 함수 로직에 따라 user는 newUser에게 복사함으로써 같은 주소를 바라보고 newUser.name에 newName을 할당하더라도 같은 주소를 바라보기 때문에 내부프로퍼..