'Javascript'에 해당되는 글 49건

Loop 안의 클로저(Closure) - Closure in loop

- 클로저는 loop 문 안에서 문제를 일으킨다

1. 문제

1) 예 1

var arry = []; for(var i = 0; i< 5; i++){ arry[i] = function(){ return i; } } for(var aa in arry){ console.log(arry[aa]()); }

- 실행 결과 : 5 5 5 5 5

- 예상과는 다른 결과가 출력되었다

- 원인 

- 클로저는 생성될 때 각자의 환경을 가진다, 그러나 위와 같은 경우 내부 함수가 생성되면서 하나의 환경을 공유한다, 그러므로 최종 결과인 5를 공유하여 배열에 5만 저장되었다

2. 해결

var arry = []; for(var i = 0; i< 5; i++){ arry[i] = function(num){ return function(){ return num; } }(i); } for(var aa in arry){ console.log(arry[aa]()); }  

- 밖에 외부 함수를 선언한다

- 배열의 외부함수의 return 값을 넣는다

- 내부함수의 변수가 외부 함수의 인자값을 지정

- 클로저가 생성될 때 마다 각각의 환경을 부여 받는다

클로저(closure)를 이용한  private 메소드 - Emulating private methods using closures

1. 정의

- Java의 private 접근 제어자 처럼  Javascript에서도 클로저를 이용해 private 메소드를 만들 수 있다

2. 구현

1) 예제1

var list = (function(){ var privateList = []; function addList(val){ privateList.push(val); } function removeList(){ privateList.shift(); } return{ add : function(_val){ addList(_val); }, remove : function(){ removeList(); }, value : function(){ return privateList; } }; })(); document.write(list.value()+"<br>"); list.add('Kyle'); list.add('Tom'); list.add('Jane'); document.write(list.value() +"<br>"); list.remove() document.write(list.value()+"<br>");

- 실행 결과 : Kyle,Tom,Jane

                 Tom,Jane

     - 설명 : privateList라는 배열에 사람이름을 저장 혹은 삭제한다

- 실행 순서

1) 먼저 익명의 함수의 리턴 값을 list라는 변수에 저장을 한다

2) 익명의 함수 안에는 private 한 값의 list변수와 addList(), removeList()가 있다

3) 익명의 함수 안에 private 값에 접근하기 위하여 클로저(add, remove, value)를 선언

- 클로저를 이용 함으로서 공통 환경에서 변수를 조작 할 수 있다

2) 예제2

function people(name){ return { getName : function(){ return name; }, setName : function(_name){ name = _name; } } } kyle = people('kyle'); tom = people('tom'); console.log(kyle.getName()); console.log(tom.getName()); kyle.setName('jane'); console.log(kyle.getName());  

- 실행 결과 : kyle, tom, jane

클로저(Closure)

1. 정의

- 자신의 범위(scope) 밖에 있는 변수의 접근 하는 함수 ?

- Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions 'remember' the environment in which they were created. ?

- 외부함수의 실행이 끝나더라도 내부함수는 외부 함수의 변수에 접근할 수 있는 로직?

- MDN에서 정의한 클로저에 따르면 독립적인 변수를 참조하는 함수이며 이 함수들은 그들이 생성된 환경을 기억한다라고 한다

- 몬소린지 정확히 모르겠다.- - 

- 클로저(Closure) == 함수, 클로저(Closure) 는 변수에 접근한다

- 생성자 내에서 전용 변수를 참조하는 함수안의 함수

2. 외부함수와 내부함수

1) 예

//외부함수 function outerFun(){ var name ="Hee"; //내부함수 function innerFun(){ console.log(name); } innerFun(); } outerFun();

- 실행 결과: Hee

2) 내부함수

- 내부함수는 외부함수의 변수(var name) 의 접근이 가능하다

3. 내부함수와 클로저(Closure)

- 내부함수와 클로저는 깊은 연관 관계가 있다

- 클로저로 인해 외부함수의 생명이 끝나더도 외부 함수의 변수에 접근이 가능하다

1) 예제1

function outerFun(){ var name ="Hee"; return innerFun; function innerFun(){ console.log(name); } } var closure = outerFun(); closure();  

- 실행 결과 : Hee

- 다른 프로그램언어 (ex:java)를 보면 함수의  return은 곳 함수의 실행 종료, 함수의 생명 끝 이라는 말 과 같다

- 위의 상황

1) closure 라는 함수 객체에 외부함수 리턴 값 저장(상식적으로? return했으니 외부함수(outerFun() 끝)

2) closure() 실행 

3) 내부함수 innerFun()이 실행되며 그 안에 외부함수 변수 값 참조

2) 예제2

function sum(x){ return function(y){ return x+y; } } var closure = sum(2); document.write(closure(4));  

- 실행결과 : 6

- 외부함수의 파라미터 값은 함수의 지역 변수가 된다

- 위의 상황

1) closure 라는 객체에 sum(2) 에 해당하는 return 값을 저장한다

2) closure(4) 를 실행하면 내부함수의 return 값이 실행된다

4. 결론

The solution to this puzzle is that closure has become a closure. A closure is a special kind of object that combines two things: a function, and the environment in which that function was created.  -MDN

- 결국 클로저란 함수, 혹은 하나의 메커니즘이라고 이해했다. 정확히 말하자면 함수 + 함수가 생성되는 환경 을 종합적으로 말하는 것 같다

자바스크립트 큐(Queue)  - Queue

- 자바스크립트의 큐는 자바로 구현 할 때보다  손쉽게 구현 가능하다

- 기존에 push(), shift() 함수를 이용한다

1. Queue.class

function Queue(){ this.dataStore = []; this.enqueue = enqueue; this.dequeue = dequeue; this.toString = toString; this.front = front; this.back = back; this.empty = empty; }

- enqueue() : 데이터를 넣는다

- dequeue() : 맨 앞에 넣은 데이터를 뽑는다

- front() : 앞에있는 데이터를 가져온다

- back() : 뒤에 있는 데이터를 가져온다

- empty() : 큐가 비어있는지 체크한다

2. enqueue(), dequeue()

function enqueue(element){ this.dataStore.push(element); } function dequeue(){ this.dataStore.shift(); }  

- 기존 자바스크립트 함수 push(), shift()를 활용한다

3. front(), back()

function front(){ return this.dataStore[0]; } function back(){ return this.dataStore[this.dataStore.length-1]; }  

4. empty(), toString()

function toString(){ var str="" for(var i = 0; i<this.dataStore.length; i++){ str += this.dataStore[i] + " "; } return str; } function empty(){ if(this.dataStore.length == 0){ return true; }else{ return false; } }  

5. 실행

var queue = new Queue(); queue.enqueue(2); queue.enqueue(5); queue.enqueue(6); queue.enqueue(7); document.write("<br>"+queue.toString()); queue.dequeue(); queue.dequeue(); document.write("<br>"+queue.front()); document.write("<br>"+queue.back()); document.write("<br>"+queue.toString());