BLOG main image
LEEEJONG (165)
IT (53)
주관적평가 (31)
창작공간 (80)
109,976 Visitors up to today!
Today 10 hit, Yesterday 57 hit
daisy rss
tistory 티스토리 가입하기!
'속 깊은 자바스크립트'에 해당되는 글 1건
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
prev"" #1 next

티스토리 툴바