JavaScript(변수와자료형)

변수와 자료형

변수 선언시 var, let, const를 이용해서 선언이 가능하다.

변수 선언	중복선언	재할당	범위
var	가능하다	가능하다	function scope 내에서 사용가능
let	가능하다	불가능하다	변수가 선언된 블럭에서만 사용가능
const	불가능하다	불가능하다	변수가 선언된 블럭에서만 사용가능

 

1) 변수 선언시 중복선언과 재할당

<h1>변수와 자료형</h1>
<h2>변수 선언시 var,let,const를 이용해서 선언 가능</h2>
<h3>* var,let,const의 차이점</h3>

<h4>1) 변수 선언 방법</h4>
    <button onclick="diffDeclare();">클릭</button>
    
       <script>
        function diffDeclare(){

            var userId = "user01";
            console.log(userId);

            //중복선언 가능 (자바에선 불가능)
            var userId = "user02";
            console.log(userId);
        
            //재할당 가능 (자바에선 가능)
            userId = "user03";
            console.log(userId); 
        
            console.log("------------------------");

            //let은 중복선언 불가능, 재할당은 가능 (j) 자바랑 흡사)
            let userPw="pass123";
            console.log(userPw);

            // let userPw="pass321";  //중복선언 불가능
            // console.log(userPw);

            userPw="pass321";
            console.log(userPw);

            //const 중복선언, 재할당 불가 (상수개념)
            const userName="김세정";
            console.log(userName);

            // const userName="설인아"; //중복선언 불가능
            // console.log(userName);

            // userName="설인아"; //재할당 불가능
            // console.log(userName);
            
            </script>

            /*
                var는 자유롭게 변수 선언을 할 수 있다는 장점이자 단점이 있다.
                중복된 변수가 생길 수 있고 값이 변경될 여지가 있다.
                이를 보완해서 나온 타입이 let과 const이다.
            */
        }

---

2) 변수 선언시 범위

<script>
	 //범위 확인 함수
        function diffScope(){
        //1) var는 function scope = 변수가 선언된 함수영역 내에서 사용 가능
        var name = "박보검";
        console.log(name);
        // test();

        if(true){
            var age=20;
        }
        console.log(age);

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

        //2)let,const는 block scope == 변수가 선언된 블럭{} 내에서만 사용가능(지역변수 개념)
        //자바랑 유사

        if(true){
            let gender="남";
            const hobby="축구";
        }
        // console.log(gender); 사용불가
        // consol.log(hobby); 사용불가
        function test(){
            console.log(name);
        }
</script>

---

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

• 지역변수와 전역변수명이 중복일 때 지역변수가 우선순위를 갖는다.
• 만약 지역변수명과 전역변수명이 중복일 경우에 전역변수에 접근하고 싶다면? window 또는 this. 으로 접근할 수 있다(단, var만 가능)
• let과 const는 전역변수 접근불가(undefined)

    <h3>변수 선언 위치에 따른 전역/지역 변수</h3>

    <script>
        //특정 함수영역 밖에 선언된 변수는 전역변수로 사용(전역변수는 어디든 사용가능)
        var declareVar="var 전역변수";
        let declareLet="let 전역변수";
        const declareConst="const 전역변수";

        declareNone="그냥 전역변수"; //권장하지 않음

        console.log(declareVar);
        console.log(declareLet);
        console.log(declareConst);
        console.log(declareNone);

        window.onload=function(){ //해당문서가 다 로딩된 직후에 실행시키겠다.
            //전역변수와 동일한 이름으로 지역변수 선언해보기
            var declareVar="var 지역변수";
            let declareLet="let 지역변수";
            const declareConst="const 지역변수";

            console.log(declareVar);
            console.log(declareLet);
            console.log(declareConst);
            //지역변수랑 전역변수명이 중복일때 지역변수가 우선순위를 갖는다.
            console.log(declareNone);
            console.log("-------------------");
            //만약 지역변수명과 전역변수명이 중복일때 전역변수에 접근하고 싶다면?
            //window. 또는 this.으로 접근할 수 있다. 단! var만 가능
            
            console.log(window.declareVar);
            console.log(this.declareVar);

            //let과 const는 전역변수 접근불가 -undefined
            console.log(window.declareLet);
            console.log(this.declareLet);

            console.log(window.declareConst);
            console.log(this.declareConst);
        }
    </script>

---

4) 자료형

자바스크립트 변수 선언 시 자료형을 별도로 지정하지 않는다. 변수에 대입되는 값(리터럴)에 따라서 자동으로 결정된다.

<h4>자바스크립트의 자료형</h4>

    <ul>
        <li>string 문자열</li>
        <li>number 숫자</li>
        <li>boolean 논리값</li>
        <li>object 객체</li>
        <li>function 함수</li>
        <li>undefined 정의되지 않음</li>
    </ul>

    <button onclick="typeTest();">자료형 테스트</button>
    <div id="area" style="border:1px solid black"></div>

    <script>
        function typeTest(){
            let name="설인아";
            let age=20;
            let flag=true;

            let hobby=["영화보기","음악듣기","등산하기"];
            let user={
                name:'안효섭',
                age:25,
                id:'anhyo'
            };

            let test=function(){
                alert("안녕하시렵니까?");
            };

            let noVal;

            console.log(name);
            console.log(age);
            console.log(flag);
            console.log(hobby);
            console.log(user);
            console.log(test);
            console.log(noVal);

            var div1 = document.getElementById("area");

            div1.innerHTML=name + "자료형 : "+typeof(name)+"<br>";
            div1.innerHTML+=age + "자료형 : "+typeof(age)+"<br>";
            div1.innerHTML+=flag + "자료형 : "+typeof(flag)+"<br>";
            div1.innerHTML+=hobby + "자료형 : "+typeof(hobby)+"<br>";
            div1.innerHTML+=user + "자료형 : "+typeof(user)+"<br>";
            div1.innerHTML+=test + "자료형 : "+typeof(test)+"<br>";
            div1.innerHTML+=noVal + "자료형 : "+typeof(noVal)+"<br>";
        }
    </script>