javascript - 변수

javascript의 변수에대해 알아보도록 하겠습니다.

 

 

1. 변수선언

javascript 에서는 변수선언시 var키워드를 사용합니다. java 와는 다르게 다양한 타입을 var를 이용해 모두 담을 수 있다는 것 입니다. 예시를 보겠습니다.

 

정수

x
<script type="text/javascript">
    var a = 1;
    
    alert(a);
​
</script>
​
== 결과 ==
    1

위 코드의 실행 결과로는 대화상자에 1이란 값이 담겨 출력됩니다.

 

실수

xxxxxxxxxx
<script type="text/javascript">
      var a = 1.0;
      var b = 1.5;
​
      alert(a+b);
</script>
​
== 결과 ==
    2.5

 

문자열

xxxxxxxxxx
<script type="text/javascript">
    var a = 'hello ';
    var b = 'world';
​
    alert(a+b);
</script>
​
== 결과 ==
    'hello world'

 

Boolean

xxxxxxxxxx
<script type="text/javascript">
      var a = true;
​
      if (a){
        alert('true');
      }      
</script>
​
== 결과 ==
    'true'

 

 

2. var가 없는 변수 선언

javascript에서는 var 키워드를 생략하여 변수를 선언할 수도 있습니다.

 

xxxxxxxxxx
<script type="text/javascript">
    a = 1
    b = 2
​
    alert(a+b);
</script>
​
== 결과 ==
    3

하지만! 이렇게 선언한다면 해당 변수가 전역변수로 인식이 됩니다. 무슨말인지 예제를 통해 알아보겠습니다.

 

xxxxxxxxxx
<script type="text/javascript">
      function add(){
        a = 1;
        b = 2;
        return a+b;
      }
​
      a = 10;
      alert(add());
      b = 5;
      alert(a+b);      
</script>
​
== 결과 ==
    3
    ?

? 안의 결과값은 무엇일까요? 15 ? 아닙니다. 6이 정답입니다. 하나하나 살펴봅시다.

 

add() 함수가 정의된 후,

a라는 변수에 10이 담기게 됩니다.

그 후 add()가 호출됩니다.

add() 안에서 a라는 변수에 1을 담고, b라는 변수에 2를 담고, 두수를 더해 return 합니다.

alert()의 실행으로 3이 출력이 됩니다.

그 후 b의 값에 5를 담습니다.

add() 안에서 a라는 값을 1로 최신화 했으므로 마지막 alert()의 결과는 6이 출력됩니다.

 

 

해결책

xxxxxxxxxx
<script type="text/javascript">
    function add(){
        var a = 1;
        var b = 2;
        return a+b;
    }
​
    a = 10;
    alert(add());
    b = 5;
    alert(a+b);
</script>
​
== 결과 ==
    3
    15

우리가 예상한 대로 값이 잘나온것을 볼 수 있습니다. var키워드를 이용하면 새로운 변수를 생성합니다. 다시 말해 add()라는 함수 안에서 변수를 새로 생성했기 때문에, add() 안에서는 a라는 지역변수를 사용한 것입니다. 따라서, add() 함수 밖에 존재하는 a에는 영향을 미치지 않습니다.

 

 

결론

전역적으로 선언이 되어야하는 변수가 아닌 경우에는 var키워드를 꼭 사용하도록 합시다.