Wookim

javascript 글로벌 변수 본문

programming language/Javascript

javascript 글로벌 변수

개발자인 경우 2019. 1. 2. 13:58

Javascript 글로벌 변수의 위험성



글로벌 변수사용을 지양해야 하는 이유.


-> 실수 할 확률이 증가한다.



필자는 html코딩을 할 때, 

html문서와 js파일을 분리한다. (제 성향입니다.) (javascript 파일 확장자 : .js)


js와 html을 분리하면, html에서 해당 js 파일들을 

불러오는 구조로 코딩을 할 것이다.


이때 html에서 여러개의 js파일을 불러오면,

볼러와진 모든 js 파일들은, 하나의 js파일처럼 작동한다.


즉 test1.js, test2.js, test3.js 파일을 testHtml1.html에서 모두 불러온다면,

test1의 변수및 함수는 test2에서도 사용이 가능하다. (test3도 마찬가지)



코드로 살펴보자


test.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="test1.js" charset="utf-8"></script>
    <script type="text/javascript" src="test2.js" charset="utf-8"></script>
    <script type="text/javascript" src="test3.js" charset="utf-8"></script>
  
</head>
 
<body>
    <script>
        target();
    </script>
</body>
 
</html>
cs



test1.js

1
2
3
4
5
6
7
8
9
10
var testText = "A";
var testNum = 5;
var i = 0;
 
function target(){
 
    printM();
    finishM();
}
 
cs



test2.js

1
2
3
4
5
function printM(){
    for (i = 0; i < testNum; i++){
        console.log(i + testText);
    }
}
cs



test3.js

1
2
3
4
5
function finishM(){
    if(i == 5){
        console.log("finish");
    }
}
cs



위처럼 작성하고, 실행시키면 


위처럼 작동한다.


이 결과를 살펴보면,

전혀 별개의 파일이라 생각 할 수 있는 각각의 js파일들은 

하나의 js파일처럼 동작한다는 것이다.


즉 위 별개의 3개의 js파일들은 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var testText = "A";
var testNum = 5;
var i = 0;
 
function target(){
 
    printM();
    finishM();
}
function printM(){
    for (i = 0; i < testNum; i++){
        console.log(i + testText);
    }
}
function finishM(){
    if(i == 5){
        console.log("finish");
    }
}
 
cs


위 처럼 동작한다는 것이다.


이것이 굉장히 편리하게 느껴지는가???


이는 굉장히 위험한 코드이다. 


길고 복잡한 코드를 분리하여 관리할 때,

글로벌 변수들을 무분별하게 사용하면?


-> 엉뚱한 변수를 사용하는 등, 에러가 발생할 수 있다.


* test2.js와 test3.js에서 선언도 안한 변수들을 

사용한다는 점에 주목할것.




끝으로 자주 실수하는 예를 살펴보자.


1
2
3
4
5
function testM(){
    a = 5;
    console.log(a);
}
 
cs


위의 자바스크립트 함수는 간단한 글로벌 변수의 선언 및 사용 예이다. (var를 꼭 붙히자)

위 처럼 a = 5: 라는 식의 변수 선언은 자바스크립트에서 전역 변수를 할당하는 문법이다.



1
2
3
4
5
function testM(){
    var a = 5;
    console.log(a);
}

cs



결론 : 글로벌 변수의 사용을 지양하자!





'programming language > Javascript' 카테고리의 다른 글

MIDI device with JavaScript (웹미디)  (0) 2020.11.10
'programming language/Javascript' Related Articles more
Comments