[JavaScript] 변수 / 자료형

1. JavaScript 변수 var / let / const

변수명	특징
var	함수내 동일변수 중복선언 가능, 재할당 가능  var는 자유롭게 변수선언, 사용 가능하다는 장점 그러나 중복변수 남발 / 의도치않은 값의 변경 발생가능
let	중복선언 불가(동일식별자 사용불가), 재할당 가능
const	중복선언 불가, 재할당 불가(자바의 상수)

 

2. var,let,const의 차이점

변수	스코프	재선언 가능여부	재할당 가능여부
var	함수 스코프	가능	가능
let	블록 스코프	불가능	가능
const	블록 스코프	불가능	불가능

 

1) var : 함수내 동일변수 중복선언 가능, 재할당 가능 

function defDeclare(){
            
            var userId = 'user01';
            console.log(userId);

            var userId ='user02';
            console.log(userId);
            
            // 동일 변수명 중복선언 -> 가능!

            userId= 'user03';
            
            // 재할당 -> 가능!
            console.log(userId);
}

* var는 선언 전에도 사용할 수 있다. (호이스팅)

var name;

console.log(name);  // undefined
name = 'Mike' ;

 => 호이스팅: 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 동작

 

 

2) let : 중복선언 불가(동일식별자 사용불가), 재할당 가능

변수가 선언된 함수 내에서만 또한, 변수가 선언되기 전에 참조해도 undefined를 반환합니다.

            let userPwd ='pass01';
            console.log(userPwd);            
            let userPwd ='pass02';
            console.log(userPwd);
            
            //SyntaxError: Identifier 'userPwd' has already been declared 
            // 빨간줄 & 콘솔 에러
            userPwd='pass03';
           	console.log(userPwd);
            // 재할당은 가능함

 

3) const: 중복선언 불가, 재할당 불가(자바의 상수)

            한 번 초기화된 값은 변경 불가함
            - 중복선언 불가
             빨간줄 Cannot redeclare block-scoped variable 'userName' 
             - 재할당도 불가
            04_변수와자료형.html:56         
            Uncaught TypeError: Assignment to constant variable.
            at defDeclare
            const userName = '홍길동'
            console.log(userName);
            const userName = '홍길동'

* 선언, 초기화, 할당이 동시에 이루어져야함

scope(사용가능 범위) 예시

 

function defScope(){
            // 1) var의 functionScope == 변수가 선언된 함수영역 내 사용가능
            var name ='홍길동';
            console.log('홍길동');

            if(true){
                var age = 20;
            }

            console.log(age);
            // if문 scope를 벗어났지만 사용가능!
            // var는 전체 함수 범위 내에서(function scope) 사용가능하다

            for(var i=0; i<10; i++){           
            }
            console.log(i);
        }

        function scopeTest(){
            console.log(name);
            //변수가 선언된 함수 영역을 벗어났으므로 사용불가
        }

        // let, const는 blockScope : 변수가 선언된 블럭{} 내에서만 사용가능
        if(true){
            let gender ='M';
            const hobby='안경쓰기';            
        }

        // console.log(gender); 사용불가
        // console.log(hobby); 사용불가

 

<script>
        //전역변수
        str = '전역변수'; 
        // 변수선언 및 초기화

        var str2 = 'var전역변수';
        
        window.onload
        // window.onload 해당 html문서가 다 로딩되고 나서 곧바로 실행할 함수 지정
        // 순서 상관없이 먼저 실행됨
        window.onload = function(){
            var str ='지역변수';
            // 전역변수명과 중복

            var str3= '새로윤 지역변수';
            str4 = '내가누구게';
        
        console.log('--str--');

        console.log(str);
        // 지역변수명과 전역변수명이 동일할 시 지역변수를 호출
        // 전역변수에 접근하고자 한다면 : window.전역변수명 또는 this.전역변수명

        console.log(window.str);
        console.log(this.str);

        console.log('---str2---');
        console.log(str2);
        // 해당이름의 지역변수가 없을시 전역변수 값이 옴
        console.log('----str3---');
        console.log(str3);
        // 지역변수 값이 옴
        console.log(window.str3);
        // undefined(정의되어 있지않음, 지역변수만 존재, 전역변수 x)
        console.log(str4);
        console.log(window.str4);
        console.log(this.str4);
        // 변수선언시 var를 생략할 경우 전역변수 취급

    }
    function getGlobal(){
        console.log('전역변수 총출동');
        console.log(window.str +'또는'+this.str);
        console.log(str2);
        console.log(str4);

    }
    
    </script>

 

 

 

 

 

 

 

 

 

 

 

 

 

* 기타

 <!-- less than / grader than

     꺽세를 태그 시작과 끝이 아닌 실제 문자로 표시 -->

    <pre>

        &lt; script &gt;

            var 변수명;

            변수명;

            function 함수명(){

                var 변수명;

                변수명;

            }

        &lt; /script &gt;

    </pre>

 

 

     window.onload
        // window.onload 해당 html문서가 다 로딩되고 나서 곧바로 실행할 함수 지정
        // 순서 상관없이 먼저 실행됨

*자료형

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

이터	설명	예시
string	숫자	var num = 10; var num = '10' //문자열
number	문자	var str = '안녕하세요‘ var str = "안녕하세요“
Boolean	true 혹은 false의 결과값을 갖는 데이터나 수식	var bool = true; //키워드 var bool = 10 > 5; //비교연산자
function	함수데이터 유형	var fx = prompt('값입력',‘값’);
object	객체데이터 유형	var db = {    name: '홍길동‘,    age: 20 }
undefined	초기화가 진행되지 않은 변수	var unf;

 

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

        <script>
            function typeTest(){
                var name='홍길동';
                var age = 15;
                var flag = true;
                var hobby = ['수영', '조깅', '등산'];
                var user = {
                    name : '사용자',
                    id: 'user01'
                };

                var testFn = function(){
                    alert('abcdef');
                };

                var noVal;



                var divEl= document.getElementById('area'); //요소객체 변수에 할당
                // divEl.innerHTML= name+'<br>'+age+'<br>'+flag+'<br>'+hobby+'<br>'+user+'<br>'+testFn;
                divEl.innerHTML= name+'<br>';
                divEl.innerHTML += age+'<br>';
                divEl.innerHTML += flag+'<br>';
                divEl.innerHTML += hobby+'<br>';
                divEl.innerHTML += user+'<br>';
                divEl.innerHTML += testFn+'<br>';
                divEl.innerHTML += noVal+'<br><hr>';

               /* 홍길동
                15
                true
                수영,조깅,등산
                [object Object]
                function(){ alert('abcdef'); }
                undefined
             */

             //자료형을 확인하는 함수: typeof(변수명)
                divEl.innerHTML += typeof(name) + '<br>';  
                divEl.innerHTML += typeof(age)+'<br>';
                divEl.innerHTML += typeof(flag)+'<br>';
                divEl.innerHTML += typeof(hobby)+'<br>'; 
                divEl.innerHTML += typeof(user)+'<br>';
                divEl.innerHTML += typeof(testFn)+'<br>';
                divEl.innerHTML += typeof(noVal)+'<br>';

            /*    string
                number
                boolean
                object // 배열은 자바스크립트에서 객체(object)타입임
                object
                function
                undefined
             */   

            }

        // 값 찍어보기

https://ossam5.tistory.com/126?category=938138