1.전역변수Global Variable와 지역변수Local Variable
자바스크립트에서 함수는 모듈화 근간 코드재사용 , 정보 구성 ,정보 감추고 객채행위를 지정하는 행위에 함수를 사용함 .(다른 언어들도 유사)
유효범위(Scope)는 변수의 수명을 의미한다. 아래의 예제를 보자. 결과는 global이다.
var vscope = 'global';//vscope이라는면수를 'global'로 할 당햇다
//fscope이 함수 밖에 있는 vscope변수에 접근할 수 있다 것이 코드의 취지
function fscope(){/ 경고창에 global이 호출됨
alert(vscope);
}
fscope();
함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 그렇기 때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것이다. 아래 예제를 보자.
결과는 '함수안 local'과 '함수밖 global'이 출력된다.
1 var vscope = 'global';// 전역 변수= 애플리 케이션 전체사용가능
function fscope(){
3 var vscope = 'local';// 지역 변수 = 함수 안에 서만
4 alert('함수안 '+vscope);
}
fscope();
7 alert('함수밖 '+vscope);
즉 함수 안에서 변수 vscope을 조회(4행) 했을 때 함수 내에서 선언한 지역변수 vscope(3행)의 값인 local이 사용되었다. 하지만 함수 밖에서 vscope를 호출(7행) 했을 때는 전역변수 vscope(1행)의 값인 global이 사용된 것이다. 즉 지역변수의 유효범위는 함수 안이고, 전역변수의 유효범위는 에플리케이션 전역인데, 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선한다는 것을 알 수 있다.
아래 예제를 보자. 결과는 모두 local이다.
-var을 사용하는 것과 사용하지 않는 것 .
var vscope = 'global';
function fscope(){
vscope = 'local';
alert('함수안'+vscope);
}
fscope();
alert('함수밖'+vscope);
함수밖에서도 vscope의 값이 local인 이유는 무엇일까? 그것은 함수 fscope의 지역변수를 선언할 때 var를 사용하지 않았기 때문이다. var를 사용하지 않은 지역변수는 전역변수가 된다. 따라서 3행은 전역변수의 값을 local로 변경하게 된 것이다. var을 쓰는 것과 쓰지 않는 것의 차이를 이해해야 한다.
예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript"> // 이코드 실행 결과=global ? var vscope = 'global'; function fscope(){ var vscope = 'local'; vscope = 'local';// var 앞에 붙이지 않아도 local변수가 존재하는지 부터 확인한다 만약 ㅇ지역면수가 있다면 //여기서의 vscope은 지역 변수가 된다 } fscope(); alert(vscope); </script> </body> </html> | cs |
전역변수는 사용하지 않는 것이 좋다. 여러가지 이유로 그 값이 변경될 수 있기 때문이다. 함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까? 함수의 동작도 달라지게 된다. 이것은 버그의 원인이 된다. 또한 함수를 다른 에플리케이션에 이식하는데도 어려움을 초래한다. 함수의 핵심은 로직의 재활용이라는 점을 상기하자. 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면
그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.
유효범위의 효용
2.유효범위의 효용성
아래 두개의 예제는 변수 i를 지역변수로 사용했을 때와 전역변수로 사용했을 때의 차이점을 보여준다. 전역변수는 각기 다른 로직에서 사용하는 같은 이름의 변수값을 변경시켜서 의도하지 않은 문제를 발생시킨다.
지역변수의 사용
function a (){
1. var i = 0;// 지역변수//01234
2. i = 0;// 전역변수//무한 루프
}
for(var i = 0; i < 5; i++){// for문의 i는 전역변수가 된다 어떤함수에 소속되어있지않았기에
a();//1번은 변수이름 안겹친다 //2번은 i변수가 계속 0으로 초기화 된다 5보다 커질 수 가 없다
document.write(i);
}
실행결과
01234
전역변수의 사용
본 예제는 무한반복을 발생시킨다.
function a (){
i = 0;
}
for(i = 0; i < 5; i++){
a();
document.write(i);
}
전역변수의 사용
3.전역변수 사용하는법
불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고
객체의 속성으로 변수를 관리하는 방법을 사용한다.
변수하나를 만들고 속성들을 사용하여 이름이 안겹치게 한다
MYAPP = {}
MYAPP.calculator = {
'left' : null,
'right' : null
}
MYAPP.coordinate = {
'left' : null,
'right' : null
}
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum(){
return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum());
전역변수를 사용하고 싶지 않다면 아래와 같이 익명함수를 호출함으로서 이러한 목적을 달성할 수 있다.
(function(){// 이렇게 바로 호출하는 함수를 익명함수라 한다 // 정역변수가 없는 앱플 만듬 /자주사용되는 로직을 재활용하기 쉽도록
만들어놓은 코드들을 라이브러리라고 한다 모듈화기법으로 많이 사용된다
var MYAPP = {}
MYAPP.calculator = {
'left' : null,
'right' : null
}
MYAPP.coordinate = {
'left' : null,
'right' : null
}
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum(){
return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum());
}()// 바로호출시)
위와 같은 방법은 자바스크립트에서 로직을 모듈화하는 일반적인 방법이다.
유효범위의 대상 (함수)
4.유효범위의 대상
유효범위의 대상이 무엇인가라는 것이다 다시말해서 우리가 지역변수를 선언할 수있는 곳은 함수로 제안이된다
다른어어를 다루신 분들은 헷갈릴 수 있다
자바스크립트는 함수에 대한 유효범위만을 제공한다. 많은 언어들이 블록(대체로 {,})에 대한 유효범위를 제공하는 것과 다른 점이다.
아래 예제의 결과는 coding everybody이다.
자바스크립트는 에러가 안난다 for { }안에서만 사용하는 것이아니라 var name 이렇게 변수를선언하면 포문밖에서도 사용이된다
다시말해 자바스크립트는 함수 안에서만 지역변수가 되는 것이다 4대제어문 같은곳에서는 지역벼수로서의의미를 갖지않음(전역으로 쓰인다)
for(var i = 0; i < 1; i++){
var name = 'coding everybody';
}
alert(name);
자바에서는 아래의 코드는 허용되지 않는다. name은 지역변수로 for 문 안에서 선언 되었는데 이를 for문 밖에서 호출하고 있기 때문이다.
//하지만 이코드는 에러가난 다 { }안에서 변수를 선언 했기 때문에 지역변수가 된다
for(int i = 0; i < 10; i++){
String name = "egoing";// 자바는 변수를 선언할 때 형식을 지정하게 되어있다
//var name = "egoing";// 자바스크립트와 같은 의미
}
System.out.println(name);//for문밖에서 호출
자바스크립트의 지역변수는 함수에서만 유효하다.
정적 유효범위
5.정적 유효범위
자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다. 이러한 유효범위의 방식을 정적 유효범위(static scoping),
혹은 렉시컬(lexical scoping)이라고 한다.
var i = 5;//전역 변수이다
function a(){
var i = 10;//a함수가 지역변수 i를 선언하고
b();//b함수를 호출한다
}
function b(){
document.write(i);//근데 b함수가 i를 호출한다 결과는 전역일까 ?지역일까?
1. i는 b함수안에 i라는 지역변수를 먼저 찾는다
2. 지역변수가 존재하지않으면 적역 변수를 찾게된다
}
a();
실행 결과는 5이다.
b함수가 호출된 시점에서 b가 담겨져있는 함수에 지역변수가 사용되는 것이 아니다
사용될 때가 아니고 ! 정의될때!의 전역변수가 사용되게 된다 이러한것을 정적 유효범위(렉시컬위효범위)라고 한다
b함수는 누구한테 사용할지모른다 .하지만 사용되어지는 대상에 따라서 그대상의 변수에 접근 할수 있다면 동적인 유효범위가된다
b함수 정의 되어있는 시점에서 변수를 바라보게 된다면 누가 사용하건 똑가틍ㄴ 결과를 갖고오기때문에 그것은 정적유효범위가 된다
'생활코딩 JavaScript' 카테고리의 다른 글
| 함수지향 클로저-1.내부함수,외부함수 2.크로저란? 3. private variable 4.클로저의 응용 미완성 (0) | 2018.11.28 |
|---|---|
| 함수지향-값으로서의 함수와 콜백 1.함수의 용도-1 2.값으로서의 함수와 콜백-함수의 용도2 3.값으로서의 함수와 콜백-콜백이란?4.비동기 콜백과 Ajax 미완성 (0) | 2018.11.26 |
| 함수지향 (0) | 2018.11.26 |
| 정규표현식 -1.오리엔테이션 2.패턴만들기 3.RegExp 객체의 사용 4.String과 정규표현식 5.옵션(i,g)6.캡쳐7.치환 (0) | 2018.11.26 |
| UI와 API 그리고 문서보는 법1.UI와 API 소개 2.문서보는법 (0) | 2018.11.26 |
