즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript function을 말한다. -mdn- (function () { statements })(); 첫 번째 괄호는 Grouping Operator 로 둘러 쌓인 익명 함수이고 두 번째 괄호는 즉시 실행 함수를 생성하고 실행하는 괄호이다. 즉시 실행 함수는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 즉시 실행 함수 내부 안으로 다른 변수들을 막을 수 있는 방법이다. 즉시 실행 함수는 자신만의 고유 스코프가 생기기 때문에 함수 내부에서 전역에 있는 변수는 접근이 가능하지만 외부에서 내부 스코프 변수에 접근이 불가능하다. ..

앞선 포스팅에서 비동기 함수를 사용할때의 callback hell을 설명한 바 있다. [Javascript] 비동기함수(2) - CallBack 비동기와 콜백 저번 포스팅에서는 비동기 함수가 어떻게 작동하는지 보았다. client에서 자원을 server에게 요청하는 코드들은 대부분 비동기함수로 작동을 한다. 예를 들어 어떤 이벤트가 발생했을때 아래의 함수.. artdev.tistory.com 2015년 6월 , Ecma International 에서는 es2015라는 새로운 문법을 도입하였다. 약 500p 분량의 내용이 있는데 나도 아직 모르는문법이 수두룩하다. ecma2015바로가기 es6라 불리는 이 문법에 promise가 설명되어있다. 조금 deep해서 mdn의 설명을봐도 좋을것 같다. -mdn m..

비동기와 콜백 저번 포스팅에서는 비동기 함수가 어떻게 작동하는지 보았다. client에서 자원을 server에게 요청하는 코드들은 대부분 비동기함수로 작동을 한다. 예를 들어 어떤 이벤트가 발생했을때 아래의 함수가 실행된다고 가정해보자. server에게 data를 가져오는 http요청을 하는 함수이다. // Client side code... function getUserData() { //request (kim 이라는 user의 데이터를 요청 ) someCallToServer({username:"kim"},(err,data)=> { if(err){ return "err!!!"; }else{ // 받아온 data를 가지고 작업... } }) } 보통 이런식으로 작업을 하게 된다. callback으로 넘겨..

코드는 위에서 아래쪽으로 순차적으로 실행된다. console.log('첫번째'); console.log('두번째'); console.log('새번쨰'); 콘솔에 당연히 순서대로 찍힐것이다. 하지만, web api 중 일부를 사용하다보면 코드가 순서대로 실행되지 않는경우를 볼수가 있다. 바로가기 : [ Javascript WEB API ] console.log('1'); window.setTimeout(function(){ console.log('1초 후 실행'), 1000 }) console.log('3'); 위의 코드는 web api중 하나인 setTimeout이라는 매서드를 사용한것이다. 코드의 실행시간을 정할수가 ..

지금은 javascript가 많이 발전하여 oop를 구현하는것이 그리 어렵지 않지만 예전엔 구현이 좀 까다로웠다. 이번 포스팅은 예전에는 어떤 방식으로 oop를 구현하는지 정리하는 포스팅이다. 아래의 내용을 알아야 이번 포스팅을 이해할수가 있다. [programming paradigm] Object Oriented Programming OOP 의 기본 컨셉은 프로그램 내에서 표현하고자 하는 실 세계(real world)의 일들을 객체를 사용해서 모델링하고, 객체를 사용하지 않으면 불가능 혹은 무지 어려웠을 일들을 쉽게 처리하는 방법을 제공한다. - m.. artdev.tistory.com [Javascript] Object.create( ) 과 prototype chaining 앞에서 prototype ..

이번 포스팅은 this의 4가지 바인딩 말미에서 언급한 강제로 this 바인딩을 변경하는것에 대한 포스팅이다. this가 가리키는것을 알아야 이번 포스팅을 이해할수 있으니 이 부분을 꼭 알고 와야 한다. [Javasvript] this는 가리킬뿐, this의 4가지 바인딩 this는 가리킬뿐. this는 객체 생성시, 함수 생성시 자동으로 생성되는 변수같은 놈이다.(그렇다고 변수는 또 아니다...) this는 객체를 "가리킬"뿐이다. (자.동.으로) [Javascript] 값을 저장하는 방식, pass by.. artdev.tistory.com call, apply, bind 메소드는 Function 객체의 메소드로 , 이 부분을 먼져 알아야 한다. (mdn문서를 보고오면 좋다.) Function Fun..

앞에서는 object.create( ), prototype.constructor 를 이용해서 상속을 구현했다면 ES6 에서는 이 방법을 좀더 쉽고 간결하게 쓸수있도록 새로운 문법을 만들었다. class Person { constructor(name){ this.name = name; } eat(){ // do something } } class Employee extends Person { constructor(name){ super(name) } work(){ // do something } } 엄청나게 간결해졌다. extends 키워드를 사용해서 어떤 클래스를 상속할지 적어준다(매우매우 직관적이다.) Employee class에서 constructor 함수를 보면 name을 받고 있는데, 인스턴스 생..

앞에서 prototype 과 __proto__ 를 알아보았다. 이번엔 특정 객체와 또 다른 특정 객체의 상속관계를 자바스크립트는 어떤식으로 만들어가는지 알아보자. [programming paradigm] Object Oriented Programming OOP 의 기본 컨셉은 프로그램 내에서 표현하고자 하는 실 세계(real world)의 일들을 객체를 사용해서 모델링하고, 객체를 사용하지 않으면 불가능 혹은 무지 어려웠을 일들을 쉽게 처리하는 방법을 제공한다. - m.. artdev.tistory.com cf. o.o.p 에 대해 어느정도 이해가 있어야 코드를 이해할수 있을것 같다. var Person = function() { this.canTalk = true; }; Person.prototype...

prototype 자바스크립트는 prototype기반의 언어라고 한다. 그럼 prototype은 무엇을 말하는걸까? mdn에서 prototype을 이렇게 말하고 있다. Javascript는 엄밀히 말해서 하위클래스(sub-class)객체가 없기에, prototype은 객체 역할을 하는 특정 함수의 "기반 클래스" 객체를 만드는 유용한 차선책 입니다. "특정 함수의 기반클래스 객체를 만드는" 이 부분이 포인트인것 같다. new 키워드로 객체를 만들어낼수있는 constructor function을 예를 들어, var Person = function() { this.canTalk = true; }; console.dir(Person) console.dir(Person.prototype) 을 보면 이런식으로 나..

Cambridge Dictionary 에서 call back의 뜻을 알아보았다. 정의들을 보면 빈번하게 중복되는 단어를 볼수가 있다. request 와 return 어떤 요청을하고 그에 따른 리턴을 받는것. 프로그래밍에서의 callback도 동일하다. function sayHello(){ console.log("hello!"); } sayHello(); 이 코드는 sayHello함수의 실행의 주체가 '나' 다. 내가 불렀으니까. function sayHello(){ console.log("hello!"); } setTimeout(sayHello, 3000); 하지만 이 코드는 sayHello함수의 실행주체는 setTimeout함수다. (나는 함수 작성만 했을 뿐.) "setTimeout함수야, 3초후에 ..