Youngble_개발스토리

콜백함수란? 콜백함수는 다른 코드의 인자로 넘겨주는 함수 이다. 콜백함수의 기능을 일상생활 예시를 통해 설명해보자. A 와 B는 다음날 아침 8시에 만나기로 하고 잠을 잔다고 했을때, 약속장소에 가려면 적어도 6시에 일어나야한다. A는 불안한 마음에 수시로 잠에서 깨면서 시계를 확인하고 잠들기를 반복하다가 결국 5시에 이를 포기하고 일어난다. 반면 B는 시계알람을 세팅하고 해당 시간일때 알람이 울리는걸 알기에 쭉 잠을 자다가 해당 시간이 될때 상쾌하게 일어났다. A는 수시로 시간을 구하는 함수를 직접 호출한걸로 볼수있고 B는 시계 알람을 설정하는 함수를 호출하고 호출 당시에는 아무것도 하지않다가 정해준 시각이 됐을때 알람이 울리는 결과를 반환 한다. A의 경우 시계 함수의 제어권은 A에게 있고, 시계는 ..

ES5에서 추가된 기능으로 call과 비슷하지만 즉시 호출하지않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다. 다시 새로운 함수를 호출할 때 인수를 넘기면 그 인수들은 기존 bind 메서드를 호출할 때 전달했던 인수들의 뒤에 이어서 등록된다. bind 메서드는 두가지 목적을 지닌다. 1. 함수에 this를 미리 적용하는 것 2. 부분 적용 함수를 구현 var func = function(a,b,c,d){ console.log(this, a, b, c, d); } func(1,2,3,4); //Window{...} 1 2 3 4 var bindFunc1 = func.bind({x:1}); bindFunc1(5,6,7,8) // {x:1} 5 6 7 8 var bindF..

Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]) call / apply 메서드 call 메서드와, apply 메서드는 기능적으로 완전히 동일하다. call 메서드와 apply 메서드는 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령이다. 이때 첫번째 인자를 this로 바인딩하고, 그 이후 인자들을 호출할 함수의 매개변수로 한다. 명시적 this 바인딩 지정 함수를 그냥 실행하면 this는 전역객체를 참조하지만 call, apply 메서드를 사용하면 임의의 객체를 this로 지정할 수 있다. 차이점은 call 경우 첫번째 인자 이후의 모든 인자들을 호출할 함수의 매개변수로 순서대로 지정하는 반면, apply는 두번째에 배열로 인자를 받아 호출할 함..

생성자 함수 생성자 함수는 어떤 공통된 성질을 지니는 객체를 생성하는데 사용하는 함수라고 정의한다. 객체지향 언어에서는 생성자를 클래스(class)라고 하고, 클래스를 통해 만든 객체를 인스턴스(instance)라고 한다. 예를들어, '인간'의 공통 속성들을 생각해보면 직립 보행, 언어 구사, 도구 사용 등 이 있다면 이런 공통 속성들을 모아 인간집합을 정의한 것이 바로 클래스이고, 각 사람들은 인간 클래스에 속하는 인스턴스이다. 이러한 인스턴스는 공통점들도 있지만 저마다의 개성도 존재할 수 있다. 생성자(클래스)는 구체적인 인스턴스를 만들기 위한 일종의 틀이라고 생각하면된다. 이 틀에는 해당 클래스의 공통 속성들이 준비되어있고, 여기에 구체적인 인스턴스의 개성을 더해 개별 인스턴스를 만든다. 자바스크립..

콜백함수는 함수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..