JavaScript 02.변수와 자료형

변수와 자료형

자바스크립트에서는 변수선언시 자료형을 지정하지않음
var, let, const 를 이용해서 변수를 선언, 아무값을 담을 수 있음 (특정값 대입시 그 값에 맞춰 자료형이 저장)

자료형 : 변수에 대입되는 값(리터럴)에 따라서 자료형이 결정

• string (문자열) / number(숫자) / boolean(논리값) / object(객체) / function (함수) / undefined(초기화안된변수)

-> 자료형 확인시 사용하는 함수 : typeof(변수명)

 

* var , let, const 의 차이점

 

1) 변수 선언 방법
  

  - var : 중복 선언 가능 (단점) , 재할당 가능 
  - let : 중복 선언 불가능, 재할당 가능 
  - const : 중복선언 불가능, 재할당 불가능 (상수같은 개념) 

 <button onclick="diffDeclare();">클릭</button>
  <script>
        function diffDeclare(){
            //1) var : 중복선언 가능 (단점), 재할당 가능 
            var userId = "user01";
            console.log(userId);
            
            var userId = "user02";
            console.log(userId);

            userId = "user03";
            console.log(userId);

            console.log("-----------------------");

            //2) let : 중복선언 불가능, 재할당 가능 
            let userPwd = "pass01";
            console.log(userPwd);

            //let userPwd = "pass02";
            //console.log(userPwd);
            
            userPwd = "pass02";
            console.log(userPwd);

            console.log("-----------------------");

            //3) const : 중복선언 불가능, 재할당 불가능(상수같은 개념)
            const userName = "홍길동";
            console.log(userName);

            //const userName = "김말똥";
            
            //userName = "김말똥";
            //console.log(userName);
        }
</script>

>> 콘솔창 결과 

 

2) 스코프 (사용가능 범위) 
 

- var : functional scope == 변수가 선언된 "함수영역"내에서 다 사용가능
- let, const 는 block scope== 변수가 선언된 "블럭{}" 내에서만 사용가능 (자바와 같음)

<button onclick="diffScope();">클릭</button>
<script>
  function diffScope(){
            //1) var : function[al]  scope == 변수가 선언된 "함수영역" 내에서 다 사용 가능
            var name = "홍길동";
            console.log(name);
			scopeTest();
            
            if(true){
                var age = 20;//if블럭 안에서 선언된 변수 
            }
            console.log(age); // age변수가 속해있는 function안이라면 다 사용가능 

            for(var i =0;i<10;i++){
                
            }
            console.log(i); //사용가능 

            console.log("------------------------");
            
            //2) let, const는 block scope == 변수가 선언된 "블럭{}"내에서만 사용가능 (자바랑 똑같음)
            if(true){
                let userId = "user01";
                const userPwd = "pass01";
            }
            console.log(userId);
            console.log(userpWd);
        }

        function scopeTest(){
            console.log(name);
        }
 </script>

>> 콘솔창 결과 

---

* 변수 선언 위치에 따른 전역변수 / 지역변수 

 - 전역변수 : 특정 함수 밖에 선언된 변수 , 함수내에 var,let,const없이 선언된 변수는 전역변수로 잡힘

-  지역변수 : 함수내에 var,let,const로 선언된 변수

> 지역변수명과 전역변수 명이 중복될 경우 -> 지역변수를 우선시 해서 찾음 
   전역변수에 접근하고자 할 경우 window. | this.으로 접근 가능하지만 let, const는 접근 불가 (undefined)