내맘대로

클로저는 함수 선언 시 만들어지는 유효 범위를 뜻한다. var outerValue = 'outerValue';var later; function outerFunction() {var innerValue = 'innerValue'; function innerFunction() {console.log('outerValue', outerValue); // outerValueconsole.log('innerValue', innerValue); // innerValue} later = innerFunction;} outerFunction();console.log('innerValue', innerValue);later(); outerFunction 함수와 innerFunction 함수가 생성되면서 각 함수에 대한..

자바스크립트는 함수형 언어다. 함수형 언어에서의 함수는 유연하다. 언제든지 정의할 수 있고 언제든 제거도 가능하다. '유연한 함수'라는 것의 예로는 익명 함수를 들 수 있다. 익명 함수는 함수를 변수에 저장하거나, 콜백 함수로 등록하는 경우 사용되는 '이름이 없는 함수'다. window.onload = function() {console.log("안녕안녕~~");} var obj = {speak : function() {console.log("내 이름은 김김이야");}} obj.speak(); setTimeout(function() {console.log("만나서 반가워융");}, 1000) 위의 예시에서 볼 수 있듯이, 이벤트 실행 시, 객체의 메소드 실행 시, setTimeout 함수의 콜백 실행 시..

JS에서는 함수를 일반 함수와 메소드로 함수를 구분할 수 있다. 사실 함수와 메소드는 동일한 구문으로 생성되는 문법인데,메소드와 함수, 함수와 메소드로 이름을 달리하는 이유는 무엇일까? 메소드란 무엇인가를 설명하고 나면 함수를 설명하기 쉬울 것 같다. 메소드란 객체 안에 존재하는 함수를 의미한다.함수는 객체에 속하지 않은 함수를 의미한다. 위의 설명에 대한 예시는 다음과 같다. var object = {method : function() {console.log("안녕! 나는 메소드야!");}} function func() {console.log("안녕! 나는 함수야!:");} 그렇다면 굳이 함수와 메소드로 분류한 이유는 무엇일까?바로 컨텍스트(this)가 다르게 할당되기 때문이다. 일반 함수의 경우 함수..

Node.js는 이벤트 기반의 비동기 프로그램이다. 그러면 Node.js에서는 어떻게 이벤트를 생성하며 핸들링할까? process.on('exit', function(code) {console.log('종료');}); process.on('uncaughtException', function() {console.log('예외 발생');}); 우선 다음의 코드에서 알 수 있듯이,on 메소드를 사용하면 parameter의 이벤트 명이 발생 시,이벤트 발생 이후에 대한 행동을 지정할 수 있다. (콜백함수로) 하나의 이벤트 명에 대해서 여러 개의 이벤트 리스너 등록 시node에서 warning 메시지를 뿜게 된다. 이벤트 연결 갯수를 제한함으로써 warning 메시지를 막을 수 있다. process.setMaxL..

가끔 void 0 이라는 코드를 보는 경우가 있다. void 0은 무엇인가?? 찬찬히 void 연산자 부터 살펴보자. void는 함수 body의 내용을 실행하고 undefined를 리턴하는 연산자다. void 0이라는 문구는 void(0)과 동일한 코드이며,단지 undefined라는 값을 얻기 위한 코드인 것이다. 그러면 undefined라는 값을 직접 사용하지 않고void 0을 사용한 이유는 무엇일까? JS 초창기 시절 undefined는 writable한 전역 변수였다.(즉, undefined에 값을 할당이 가능) 값이 할당된 undefined로 인한 버그를 막기 위해void 0 이라는 코드를 사용하게된 것이다. 물론 최신 브라우저에서는undefined에 값 할당이 불가하다. 마지막으로 관련 url ..

JS에서 함수를 실행하게 되면 함수의 컨텍스트가 바뀌게 되어 컨텍스트를 유지시켜줘야 하는 경우가 있다. 컨텍스트를 유지하여 실행하는 방법으로는 함수를 실행 전에 변수를 설정해서 기존의 this를 할당 후,해당 변수를 통해 컨텍스트를 유지하도록 할 수는 있다. var view = this;$("div.className").on("click", function() {view.func();}); 하지만, 먼가 이런 방법 말고 Function 자체의 함수를 통해컨텍스트를 유지하고 싶다면? Function 자체의 함수로 함수의 컨텍스트를 유지시킬 수 없을까?? call, apply, bind가 컨텍스트를 유지시켜주는 역할을 하는 함수다.그럼 이 함수들의 차이점은 무엇인가? 우선 크게 call, apply와 bin..

Angular에서는 view의 DOM에 대한 내용을 처리하는 Directive라는 개념이 있다. Angular가 기본적으로 제공되는 directive도 있으며,사용자가 필요에 따라 커스텀하게 만들 수 있다. 이 포스팅에서는 기본 제공되는 여러 directive 중 @HostListener와 @HostBinding에 대해 비교해보려 한다. (왜냐면 내가 헷갈렸기 때문이다ㅠ) 결과적으로 보면 이름은 비슷한데,하는 내용은 완전히 다르다. 예시를 각각 보면서 확인해보자. HostListener 예시 @HostListener('click', ['$event.target'])onClick(target) {console.log('click!', target);} HostListener 디렉티브는첫번째 paramete..

웹 브라우저에서는 window 객체가 최상위 객체다.node.js는 웹 브라우저에서 동작하지 않는다. 따라서 node.js에서의 최상위 객체는 window 객체가 아니며 window 객체가 존재조차 하지 않다. 대신, 전역 변수, 전역 객체와 전역 함수를 갖고 있다. 전역 변수 출력하기 console.log("filename", __filename); console.log("dirname", __dirname); 위의 코드를 실행 시, 현재 실행 파일의 이름과 파일 디렉토리를 출력해준다. console 객체 이용하여 내용 출력하기 console.log("매개변수의 갯수가 부족하면 걍 스트링 %d가 출력된다.");console.log('%d + %d = %d !! %d', 273, 52, 273+52); ..