BLOG main image
LEEEJONG (166)N
IT (54)N
주관적평가 (31)
창작공간 (80)
110,267 Visitors up to today!
Today 29 hit, Yesterday 67 hit
daisy rss
tistory 티스토리 가입하기!
'클로져'에 해당되는 글 2건
2017.07.07 15:24

JS학습내용 중 Scope 관련내용을 정리해본다.




핵심내용 요약을 먼저하면


1. Scope는 일적으로 생각하는 것처럼 {} brace를 기준으로 생성되지 않고 약속된 상황에서만 생성된다. 그렇지 않은 경우라면 Global scope를 갖는것이 일반적

2. 약속된 상황이라면 function구문 / catch 구문 / with 구문 세가지 상황을 말한다.

3. scope가 생성되는 특징때문에 발생되는 현상을 함수를 이용해서 혹은 클로져(closure)를 이용해서 해결한다.




책 내용 중 중요하다고 생각하는 부분만 일부 옮겨본다.


책 제목은 '속 깊은 자바스크립트' 


2.1 스코프란?

스코프란 현재 접근할 수 있는 변수들의 범위를 뜻한다. 



위의 for-loop를 돌 때는 별도의 스코프가 생성되지 않고 i는 글로벌 스코프에 존재한다. 그러다가 addEventListner()로 콜백 함수를 설정할 때 익명함수가 선언되면서 이때 스코프가 생성되어 스코프 체인을 만들게 된다.



2.1.1 스코프의 생성

이처럼 자바스크립트는 다른 언어와는 달리 일반적인 블록 스코프를 따르지 않는다. 자바스크립트의 스코프는 특정 구문이 실행될 때 새로 생성하여 2.1 절과 같은 스코프 체인을 생성하게 된다. 이렇게 스코프를 생성하는 구문들은 다음과 같다.

 - function / with / catch


* catch 와 with의 경우 인자로 포함되는 error / inScope등의 변수들은 scope 안에서만 사용가능하나 그 내부에서 선언한 변수들은 global scope를 따른다.




2.1.2 스코프의 지속성

엄밀하게 따져보면 스코프가 생성되는 방식이 기존 언어와 다르지는 않다. 하지만 스코프가 지속되는 것은 다른 언어와는 다른 자바스크립트만의 강점 중 하나이다. 자바스크립트에서 이러한 스코프의 지속성이 필요한 이유는 새로운 스코프가 생성되고 스코프 체인을 참조하는 함수를 변수에도 넣을 수 있고, 다른 함수의 인자로 넘겨줄 수도 있으며, 함수의 반환값으로도 활용할 수도 있기 때문이다. 즉 지금 함수가 선언된 곳이 아닌 전혀 다른 곳에서 함수가 호출될 수 있어서, 해당 함수가 현재 참조하는 ㄴ스코프를 지속할 필요가 있는 것이다.



클로저를 활용한 문제해결


이처럼 함수를 별도로 생성하는 것을 조금 다르게 자바스크립트의 특징 중 하나인 클로저를 활용해서 해결할 수도 있다.


(function (index) {

return function () {

alert("you clicked div # " + index) ;

};

} (i) )


위의 소스가 쉽게 이해된다면 이미 클로저에 대한 개념이 어느 정도 잡혀있는 독자일 것이다. 이러한 기법은 자바스크립트에서 많이 사용되고 있고 응용 볌위도 넓으므로 개발하면서 쉽게 적용할 수 있도록 익혀두면 유용하다. 약간 복잡해 보이고 with 구문과 비슷하게 생각할 수 있지만, with 구문과는 다르게 구문 안에서 스코프 체인을 function 으로 만들고 있다.


var func = function(index) { } ;

var returnValue = func(i);

returnValue = (function (index){ } (i) );


역시 새로운 스코프가 클릭 이벤트 핸들러의 콜백 함수의 상위에 추가되면서 문제를 해결하고 있는데, 이것은 클로저의 아주 기초적인 활용 방법이다.


'IT > WebB' 카테고리의 다른 글

Javascript Scope 자바스크립트 스코프란란란?  (0) 2017.07.07
Java Generics  (0) 2017.05.25
TCP의 이해  (0) 2016.03.25
UTIL_DEBUG.NWZ  (0) 2016.01.25
HeadFirstXHTML / CSS기초 노트  (0) 2016.01.06
MSSQL SP내용 쿼리로 보기  (0) 2015.12.16
Name
Password
Homepage
Secret
2014.05.29 14:32

JQuery 플러그인을 제작하던중.

사수님의 입에서 '클로저'라는 말이 등장했다.


도무지 내 상식으로는 일어나서는 안되는 일들이

사수님 버전 플러그인에서 일어나고 있었다.


따라서 대체 이게 뭔지 찾아보았다.


MDN에 클로져(Closures) 소개 페이지를 링크한다.

https://developer.mozilla.org/ko/docs/JavaScript/Guide/Closures


여러분들은 무려 두개의 손과 열개의 손가락을 보유중이기 때문에 저 링크에 들어가서

내용을 파악할 수 있겠지만, 내가 이해한 내용을 요약해 본다.


--------------------------------------------------------------


내가생각하는 HTML문서는 굉장히 정적이다.

여기에 숨을 불어넣는것이 JS라고 생각한다.


그럼에도 불구하고 웹페이지는 정적이다. 왜냐하면 페이지 전체가 하나의 프로그램이 아니라
정해진 동작에 반응하도록 설계되어있기 때문이다


그런데 이걸 가능하게 할수도 있는 것 같다.

클로저를 통해서.


클로저가 뭐냐면 함수를 저장할때 함수 내용 말고도, 실행중인 환경을 저장해주는거다.


그러니까 기존에 내가 쓰던 변수들 상태를 그대로 달고있으니, 프로그램 짜듯이 짜도

문제될게 없다는 이야기 되시겠다.


근데 이 내용이 나한테는 좀 쇼킹했다.


이게 말이 됨?


당신도 궁금하다면  MDN을 정독하도록 하세요.


'IT > WebB' 카테고리의 다른 글

RequireJS  (0) 2015.12.08
JQuery Plugin - Context Div  (0) 2014.05.29
Closure가 무엇인가  (0) 2014.05.29
AJAX  (0) 2014.03.17
Javascript 상속-함수를 사용한 방식  (0) 2013.08.05
SMARTY(스마티) 템플릿  (0) 2013.07.18
Name
Password
Homepage
Secret
prev"" #1 next

티스토리 툴바