Youngble_개발스토리

콜백함수는 함수A의 제어권을 다른함수(또는 메서드) B에게 넘겨주는 경우, 함수A를 콜백함수라고 한다. 이때 this는 함수B 내부로직에서 정한 규칙에 따라 값이 결정된다 -> 추후에 나오겠지만 전역객체 일수도, 메서드의 객체의 this일수도 있다. 콜백함수 내부에서의 this setTimeout(function(){ console.log(this); }, 300); [1, 2, 3, 4, 5].forEach(function(x){ console.log(this, x); }); document.body.innerHTML += '클릭'; document,body.querySelector('#a').addEventListener('click', function(e){ console.log(this, e); ..

ES6에 도입된 화살표함수(arrow function)는 실행 컨텍스트를 생성할때 this바인딩 과정 자체가 빠지게된다고 한다. 따라서 상위 스코프의 this를 그대로 활용할수있다. var obj = { outer: function(){ console.log(this); var innerFunc = () =>{ console.log(this); } innerFunc(); } }; obj.outer(); 결과 {outer: ƒ} {outer: ƒ} 이렇게 InnerFunc()를 함수로서 호출하였을때도 화살표함수로 innerFunc가 실행컨텍스트가 실행되므로 this바인딩 과정이 없다. 따라서 상위 스코프 this인 outer를 활용하는 것이다. 한가지 따로 테스트 한건 만약 outer프로퍼티도 화살표함수로..

실행컨텍스트를 활성화할 당시에 this가 지정되지 않을경우 this는 전역객체를 가리킨다고 이전에도 설명한바 있다. 이를 더글라스 크락포드(자바스크립트 언어 개발 참여자, json포멧 보급 등)는 명백한 설계상 오류 라고 지적했다. 이에 대해서 알아보고자한다. 내부함수에서의 this var obj1 = { outer: function(){ console.log(this) // (1) var innerFunc = function(){ console.log(this); // (2),(3) } innerFunc(); var obj2 = { innerMethod: innerFunc }; obj2.innerMethod(); } }; obj1.outer(); 다음과 같이 this를 함수내에서 console.log ..

함수와 메서드는 미리 정의한 동작을 수행하는 코드 뭉치 함수와 메서드의 차이는 어떤 함수를 함수로서 호출하는지 메서드로서 호출하는지에 차이가 있고 그때에 this값이 다르다. 따라서 둘을 차이는 독립성에 나타난다. 함수는 그 자체로 독립적인 기능을 수행, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행 메서드는 객체의 프로퍼티에 할당된 함수라고 말하고 (50%) + 객체의 메서드로서 호출할 경우에만 메서드로 동작(50%) = 객체의 프로퍼티로 할당된 함수가 객체의 메서드로서 호출할경우를 메서드라고 한다 (100%) 예시코드 var func = function(x){ console.log(this, x); }; func(1); // window{...} 1 var obj = { method: func..

this this는 실행 컨텍스트가 생성될때 함께 결정된다. 즉 this는 함수를 호출할 때 결정된다. 상황마다 this값이 달라진다. 전역공간에서 this는 전역 객체이고 브라우저환경에서 전역객체는 window, node.js 환경에서는 global 이다. 브라우저환경 console.log(this); console.log(window); console.log(this===window); //true Node.js환경 console.log(this); console.log(global); console.log(this===global); //true 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로도 할당한다. var a = 1; console.log(a); // 1 console.lo..

스코프, Scope 스코프는 식별자에 대한 유효범위를 나타낸다. 어떤 경계 A의 외부에서 선언한 변수는 A의 외부와 내부에서 접근이 가능하지만 A 내부에서 선언한 경우는 오직 내부에서만 접근이 가능하다. 다른 언어 역시 스코프라는 개념을 가지고있지만 자바스크립트의 경우 ES5까지는 오직 함수에 의해서만 스코프가 생성된다. 또한 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것을 스코프 체인이라고 한다. 이를 가능하게 하는 것이 바로 LexicalEnvironment의 두번째 수집 자료인 outerEnvironmentReference 이다. 그전에 올렸던 실행컨텍스트의 3가지 정보수집의 그림을 다시보면 알수있다. 스코프 체인, Scope Chain outerEnvironmentReference..

웹페이지가 로드될때, 브라우저는 그 페이지의 DOM(Document Object Model)을 생성한다. HTML DOM 모델은 객체들의 트리구조로 구성되어있다. HTML DOM이 있다면, 자바스크립트는 HTML document의 모든 요소들(elements)에 접근할수있고 바꿀수있다. 객체모델이 있다면, 자바스크립트는 동적인 HTML을 생성할때 필요한 모든 권한을 가진다: JavaScript can change all the HTML elements in the page (모든 요소 변경가능) JavaScript can change all the HTML attributes in the page (모든 속성 변경가능) JavaScript can change all the CSS styles in the..

호이스팅에 관하여 알아야하는 정보중에 알면 좋은 정보는 함수선언문과 함수표현식 이다. 함수선언문 function a(){ ... 실행 코드 } a(); 함수선언문은 function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미한다. 호이스팅시 함수선언문은 함수명, a 가 곧 변수명으로 생각하고 실행된다고 생각하면된다. 함수표현식 정의한 function을 별도의 변수에 할당하는 것을 말한다. 함수선언문은 함수명이 반드시 정의되야 하는 반면, 함수표현식은 정의를 해도 되고 안해도된다. 이때 함수표현식은 기명 함수표현식, 익명 함수표현식으로 두가지로 나뉜다. 만약 함수명을 정의했다면 기명, 하지않았다면 익명 함수표현식이라고 정의하였다. 익명 함수표현식 var b = function(){ // 익명 함수..

실행컨텍스트 실행컨텍스트(execution context)에는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체인데 어떤 실행 컨텍스트가 활성화되는 시점에서 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행하는데 이로인해 다른언어에서는 발견할수없는 특이한 현상들이 발생한다. 이때 실행컨텍스트의 실행할 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택, call stack에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 실행 컨테스트의 콜 스택 실행 순서 예시 코드 //-----(1) var a = 1; function outer(){ fu..

객체를 복사할때 객체안에 직접적인 프로퍼티에 해당한다면 (1차복사, 얕은복사)값만 복사하여 복사한 객체의 프로퍼티값을 바꾸거나 원본객체의 프로퍼티값을 바꿔도 서로 같은것을 참조하지않기 때문에 서로 다른값의 프로퍼티가 된다. 하지만 객체 안의 프로퍼티가 또다른 객체를 가지고 있다면(2차 복사, 깊은복사) 이는 깊은 복사가 필요하다. 만약 깊은복사를 하지않는다면 원본객체에서 값을 바꾸면 복사된 객체에서도 값이 바뀌게 된다. 즉 불변객체를 만들어줘야한다. 이때 깊은 복사하는 방법은 몇가지 있다. 1. 재귀함수 var copyObject = function(target){ var result ={}; if(typeof target==='object'&& target!==null){ for(var prop in ..