JavaScript 요약정리 - 변수(전역변수/지역변수)와 자료형

안녕하세요.

#yeoneeblog 여니입니다 :)

 

<JavaScript 자바스크립트 변수(전역변수/지역변수)와 자료형>

* 변수와 자료형
* 변수 선언 위치에 따른 전역변수/지역변수
let 변수명; // 전역변수(global)
            const 변수명; // 상수(값을 할당하면 바꿀수 없음)

            var 변수명; // 전역변수(global)  과거에 쓰이던 키워드.


            변수명; // 전역변수(global)

            function 함수명(){
                var 변수명; // 지역변수(local)

                변수명; // 지역변수(local)
            }

            var 변수 문제점이 많아서 let, const로 대체됨.
            하지만 아직도 많은 스크립트에서 var가 사용되고 있음

 <script>
        // 1) 영역문제
        if(true) {
            var varTest = "var";
            let letTest = "let";
        }
        // console.log(letTest); 에러발생(블록단위기준(자바와 스코프범위가 동일함))
        console.log(varTest); // 에러 안남(전역에 남아있다.), 함수내에서 선언시 해당 함수에서만 쓰이고 , 그외는 전역변수
        
        // 2) 중복문제
        var user;
        var user; // 에러안남.

        //let user;
        //let user; // 에러남(재사용하지 못함)

        // 전역변수들은 자동으로 window객체의 필드로 등록된다.
        str ="전역변수";
        var str2 = "var 전역변수";

        // let, const는 window객체의 필드로 등록되지 않음
        let str3 = "let 전연벽수";

* 자료형
변수 선언시 자료형을 별도로 지정하지 않음(자료형의 개념이 없는건 아님)
=> 변수에 대입되는 값(리터럴)에 따라서 알아서 자료형이 자동으로 결정됨

[자바스크립트의 자료형]
    <ul>
        <li>string(문자열)</li>
        <li>number(숫자)</li>
        <li>BigInt(진짜큰숫자)</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 name = '홍길동';
            let name = "홍길동"; // 전부 문자열
            const age = 20;
            const flag = true;

            const hobby = ["영화","유투브","낮잠"];

            const user = {
                name : 'ㄳㅇ',
                age  : 36,
                id   : 'ksy'
            };
            
            const testfn = function (){
                alert("ㅎㅎ");
            }

            let noVal;

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

            const divEl = document.querySelector("#area");

            // 자료형 확인시 사용되는 함수 : typeof(변수명)
            divEl.innerHTML = name+"의 자료형 : "+typeof(name)+"<br>";
            divEl.innerHTML+= `${age}의 자료형 : `+typeof(age)+"<br>";
            divEl.innerHTML+= `${flag}의 자료형 : `+typeof(flag)+"<br>";
            divEl.innerHTML+= `${hobby}의 자료형 : `+typeof(hobby)+"<br>";
            divEl.innerHTML+= `${user}의 자료형 : `+typeof(user)+"<br>"; // 객체의 경우 화면에 출력시[object Object]로 출력된다
            divEl.innerHTML+= `${testfn}의 자료형 : `+typeof(testfn)+"<br>";
            divEl.innerHTML+= `${noVal}의 자료형 : `+typeof(noVal)+"<br>";

            // 객체 내부의 속성에 접근 => .으로 접근
            divEl.innerHTML += user.name+"의 나이는 "+user.age+"이며 아이디는 "+user.id+"입니다.";

            //특이케이스
            console.log("null값의 자료형 ? ",typeof(null));
            // null은 별도의 고유한 자료형을 가지는 특수한 값임. 즉, 객체가 아님
            // 하지만, 하위호환성을 위해 오류를 수정하지않고 남겨둔 상황
        }
    </script>