[JS] 지역 변수와 전역 변수

1. 기본적 예제 : 변수 (전역변수)가 밖에 선언

var vscope ='global'
function fscope() { 
	alert (vscope);
}
fscope();

//여기서 fscope라는 함수를 선언하 globa이라는 텍스트가 경고창에 출력 
//함수안에 있는 alert이 함수 밖에 '변수'에 접근할 수 있다는게 취지 

1. 변수가 밖에 선언되고, 함수안에도 선언됨과 동시에 ‘local’이라는 문자열을

새로 갖게 되었을 때 결과는 어떻게 될까?

var vscope ='global' //전역변수
function fscope() { 
	var vscope = 'local';	//지역변수
	alert (vscope);
}
fscope();

 

• 정답
• ‘local’을 출력하게 됨 vscope는 가까운 함수를 찾게 됨, 만약 같은 함수안에 정의된게 없으면 함수 바깥에 있는 변수를 찾는다.

1. 전역변수가 선언되었고, 함수안에 지역변수 vscope가 local이라는 문자열을 갖고,

‘local variables’라는 문자열을 가진 lv라는 지역변수가 하나더 생성되었다.

이럴때는 무엇이 호출될까?

var vscope = 'global';
functiono fscope () {
var vscope = 'local';
var lv = 'local variables';
alert(lv);

}
fscope();
alert(lv);

• 정답

  ---

• 여기서는 undefined가 호출된다, 이유는 lv라는 변수는 지역내에서만 만들어진 변수이고 지역에서 만들어진 변수는 지역내에서만 유효하다. lv를 alert으로 밖에서 호출한 경우에는 유효하지 않다.

var vscope = 'global'; //전역변수 선언
function fscope(){
	var vscope = 'local'; //var로 지역변수 선언
	vscope = 'local'; //변수 
}
fscope(); 
alert(vscope);

정답

‘global’ var로 vscope를 할당한다는 거 자체가 지역변수를 할당한다는 것

함수안에 var로 변수 선언 VS var 쓰지 않았을때 차이점

var vscope = 'global';
function fscope(){
    vscope = 'local';
    alert('함수안'+vscope);
}

alert('함수밖'+vscope);

---

정답fscope(); → local왜 함수밖에서도 vscope값이 Local인가? 답은 지역변수 선언할 때 var을 사용하지 않았기 때문이다. 

변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.

  💡 var를 사용안쓰면 전역변수 선언이 된다.

공교롭게도 둘다 local이다

💡 alert(’함수밖’ + vscope); → local

---

!왜 지역변수와 전역변수라는 구분, 즉 유효범위가 나온 것일까? 효용성의 측면에서 살펴보자

이유는 같은 의미를 가진 동일 단어로 인한 혼선을 막기위해 (코드가 길어지고 프로그램이 커질수록 겹칠 가능성도 농후)

지역변수 사용 VS 전역변수 사용 비교 코드

//지역변수 사용  

function a (){
    var i = 0;

} //a라는 함수는 var i = 0;을 선언한다.

for(var i = 0; i < 5; i++){
    a();
    document.write(i);

**//a라는 함수는 for문안에서 i만큼 반복된다. 그리고 그 결과 값을 
//나타낸다 

//실행결과 : 01234 
//문제 없음 (함수안에 var가 지역변수로 선언됐기때문에 함수밖에 있는 for문에 선언된 i에 영향을 끼치지 않음)

그러나 여기 아래 전역변수를 사용하면 문제가되는 예시를 보여준다.

//전역변수의 사용 

function a (){
    i = 0;
} //a라는 함수는 i = 0;을 선언한다. (var이 없다는 것은 전역변수라는 의미, 문제의 근원)

for(i = 0; i < 5; i++){
    a();
    document.write(i);
} //for문은 똑같다, 그러나 결과는 다르게 나올 것 
//a라는 함수가 실행될 때 a안에 i는 0이다. 하지만 var을 붙이지 않았기때문에 지역변수가 아니다.
//지역변수가 함수안에 없으니 밖으로 영향을 끼침 결과적으로 for가 아무리 반복되어도 조건문에 있는 
// i의 값은 계속해서 0에서 벗어나지 못함 = 무한 반복 

이것이 바로 전역변수 사용을 현업에서 지양하는 이유를 엿볼 수 있는 쉬운 예문

전역변수를 불가피하게 사용해야하는 경우

MYAPP = {} //MYAPP은 함수에 있는게 아니니까 전역변수
//변수의 값은 {} 객체이다.
MYAPP.calculator = {
		'left' : null,
		'right': null
} 

//그리고 MYAPP이라는 변수안에 .calculator라는 ***속성**이 있다.

MYAPP.coordinate = {
		'left' : null,
		'right': null
}

//마찬가지로 MYAPP이라는 변수안에 .coordinate라는 *속성이 있다.

MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum () {
		return MYAPP.calculator.left + MYAPP.calculator.right;

}
document.write(sum());

 💡 *속성 : 객체 {} 안에 들어있는 변수를 속성이라고 한다.

 

+익명함수 사용 버전

전역변수를 사용하지 않고 싶을 때 쓰는 방법

*모듈화할때 많이 쓰는 기법

***(function()***{
**var** MYAPP = {} //MYAPP은 함수에 있는게 아니니까 전역변수
//변수의 값은 {} 객체이다.
MYAPP.calculator = {
		'left' : null,
		'right': null
} 

//그리고 MYAPP이라는 변수안에 .calculator라는 ***속성**이 있다.

MYAPP.coordinate = {
		'left' : null,
		'right': null
}

//마찬가지로 MYAPP이라는 변수안에 .coordinate라는 *속성이 있다.

MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum () {
		return MYAPP.calculator.left + MYAPP.calculator.right;

}
document.write(sum());
}())

 💡 *모듈화 : 관련된 기능을 하나로 묶어 다른 코드와 결합도를 줄이고, 재사용성을 높이기 위해 사용됨.

 

---

!자바스크립트에서 유효범위는 함수에 대해서만 적용

이 말은 반대로 말하면 함수가 아닌 것들에 대해서는 유효범위가 적용되지 않는다는 것

so, for문, while문 같은 경우엔 밖에서도 괄호안에 변수에 대해서 접근할 수 있음

for(var i = 0; i < 1; i++){
    var name = 'coding everybody';
}
alert(name);

//결과 
-> 경고창에 'coding everybody' 출력 

//for문은 함수가 아니기때문에 name이 지역변수로 for문안에 선언됐음에도 
//밖에서 접근하는데 아무런 문제가 되지 않음 

---

!정적 유효범위

-영어로는 lexical scoping이라고도 한다.

: 자바스크립트는 함수가 선언된 시점부터 유효범위를 갖음

함수를 실행했을 때가 아니다! @@@@

생활코딩갓 : “초심자 입장에선 몰라도 됨, 나중에는 중요하게 사용될 것”

실행결과는 5일까 10일까?

var i = 5; // 전역변수 i = 5; 선언 
 
function a(){
    var i = 10;
    b();
} 

//a 함수에선 Var로 지역변수 i = 10; 선언하였고
//b (); 함수를 호출한다

 
function b(){
    document.write(i);
}

//b함수는 변수 i값을 띄워준다. 

a (); 

//결과는 5

  💡 b함수가 a함수안에 있기에 b 함수안에 있는 i가 전역변수보다 a안에 선언된 i = 10;의 값의 영향을 받을 것으로 생각할 수 있지만

자바스크립트의 ’정적 유효범위’ 특성은 여기서 나타난다. ’함수는 선언된 시점에서 유효범위를 갖는다’

그러므로 b함수는 a() 함수를 실행되고 i 변수를 a에 영향받기이전에 b함수가 선언됨과 동시에 유효범위를 갖기때문에 전역변수 i = 5; 의 값을 우선적으로 갖는다.