자바스크립트 강좌 3 - 변수

3. 자바스크립트 변수

1. 변수타입

1 - 1. 자바스크립트는 변수타입이 고정되어 있지 않습니다. 다시 말하면, 자바스크립트 변수는 어떠한 데이터 타입의
값이라도 담을 수 있다는 것입니다.

1. var x = 10;
2. var str = 'str';

2. 변수 선언

2 - 1. 자바스크립트 변수 선언은 var 키워드를 사용하여 선언합니다.

1. var x = 10;

3. 변수 선언의 반복과 생략

3 - 1. 자바스크립트는 선언되지 않은 변수에 접근하려고 하면 에러가 발생합니다.
 

3 - 2. 만일 var 선언문으로 선언되지 않은 변수에 값을 정의하면, 자바스크립트는 암묵적으로 그 변수를 선언합니다.
(단 암묵적 선언은 모두 전역변수로 선언됩니다.)

 

1. // 명시적 선언
2. var x = 10;
3. // 암묵적 선언
4. y = 10;

4. 변수의 유효 범위

4 - 1. 변수 유효범위란 그 변수가 정의되어 있는 영역을 말합니다.
 

4 - 2. 전역변수의 유효범위는 "전역"이며, 함수 안에서 선언된 변수(지역변수)는 오직 그 함수 몸체 안에서만 유효합니다.

1. // 전역변수의 유효 범위는 전역이기 때문에 함수 내부에서 전역 x값을 수정 하였으므로 결과 적으로 20을
   반환합니다.
2.  
3. var x = 10;
4.  
5. function fnX1(){
6.    
7.     x = 15;
8. }
9.  
10. fnX1();
11.  
12. alert(x); // 15

1. // 함수 내부에서 x 지역변수를 선언 및 정의 하였으므로 외부 전역변수 값은 변동없이 15를 반환한다.
2.  
3. function fnX2(){
4.    
5.     var x = 20;
6. }
7.  
8. fnX2();
9.  
10. alert(x); // 15

5. 블록 단위의 유효 범위는 없다.

5 - 1. 자바스크립트는 블록 단위 유효범위라는 것이 존재 하지 않으며, 오로지 함수 블록에서만 유효범위가 존재합니다.

1. // x, y 지역변수는 블록 유효 볌위뿐만 아니라 함수 전체에 걸쳐 정의 되어있다. 즉, 블록단위 유효 범위는 존재하지 않으며, 함수 유효범위만 존재한다는 것을 알 수 있습니다.
2.  
3. function fn1(){
4.     var x = 10;
5.  
6.     {
7.         var y = 20;
8.     }
9.  
10.  
11.     if (x === 10){
12.         // y는 블록 내부에서 선언되었지만 함수 전체를 걸쳐 사용될수 있다.
13.         alert(y); // 20
14.     }
15. }
16.  
17. fn1();
18.  
19.  
20. // 전역변수 x
21. var x = 10;
22.  
23. function fn2(){
24.    
25.     // 함수 외부에 전역변수 x가 선언되어 있지만 함수 유효범위 안에서 같은 이름의 지역변수로 다시 선언되었기 때문에 alert(x)는 정의되지않은 값을 나타내는 'undefined'를 반환합니다.
26.     alert(x); // undefined
27.    
28.     var x = 10;
29.  
30.     {
31.         var y = 20;
32.     }
33.  
34.  
35.     if (x === 10){
36.         // y는 블록내부에서 선언되었지만 함수 전체를 걸쳐 사용될수 있다.
37.         alert(y); // 20
38.     }
39. }
40.  
41. fn2();

6. 정의 되지 않은 변수 vs 할당되지 않은 변수

6 - 1. 자바스크립트에서 정의되지 않은 변수의 첫번째 경우는 아직 선언된 적이 없는 변수입니다.(선언되지 않은 변수에 접근하면 정의 되어 있지 않다는 에러가 발생합니다.)
 

6 - 2. 정의되지 않은 변수의 두번째 경우는 선언은 되었으나 아직 값이 정의되지 않은 경우입니다.

1. // x 전역변수는 var 선언문으로 선언되었지만 아직 정의는 되지 않았기 때문에 정의되지 않은 값을 나타내는 undefined를 반환합니다.
2.  
3. alert(x); // undefined
4. var x = 10;

7. 기본 타입과 참조 타입

기본 타입: 숫자, 불리언 값, null, undefined

참조 타입: 객체, 배열

기본 타입(값타입)은 고정된 크기의 메모리를 차지합니다. 

예를 들어 숫자 타입은 8바이트의 메모리를 차지하고 불리언 값은 오직 1비트만으로 표현될 수 있습니다.

숫자 타입은 모든 기본 타입 중에서 가장 크기가 크기 때문에 만일 각각의 자바스크립트 변수가 8바이트의 메모리를 할당 받는다면 어떤 기본 타입 값이라도 그 변수에 그대로 담을 수 있는 것입니다. (문자열의 경우 값타입이면서 길이가 가변적이기 때문에 여기서는 예외로 두도록 하겠습니다.)

반면 객체(참조타입)는 고정된 크기를 갖지 않으며, 담겨지는 데이터 양에 따라 크기가 달라질 수 있습니다. 
즉, 객체는 크기가 고정되어 있지 않다는 것입니다.

크기가 고정되어 있지 않기 때문에 변수에 직접 저장할 수 없으며, 대신 변수에 저장되는 것은 이런 값에 대한 참조 입니다.

참조는 보통 포인터의 한 종류이거나 메모리 주소입니다. 참조는 데이터 값 자체가 아니라 그 값을 찾을 수 있는 위치를 변수에게 알려주는 것입니다.

1. var ref1 = [];
2. ref1[0] = 'ref1';
3.  
4. // 값이 아닌 참조값이 전달되기 때문에 전달받은 ref2 객체의 참조를 통해 원본 객체인 ref1 객체가 수정될 수 있습니다.
5. var ref2 = ref1;
6. ref2[1] = 'ref2';
7.  
8. alert(ref1); // ref1, ref2
9.  
10.  
11. var ref3 = ref1;
12.  
13. alert(ref3); //ref1, ref2

더 자세한 내용을 원하신다면 이전 포스트를 참고 하시기 바랍니다.


참고서적: (자바스크립트 핵심 가이드)