본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] 변수

변수

변수는 하나의 데이터를 저장하는 저장소입니다. 변수는 변수는 사용 가능 범위에 따라 지역변수, 전역변수, 매개변수, 멤버변수로 나눌 수 있으며, 변수는 식별자로 구분해야 하기 때문에 변수에는 숫자, 문자열, 불린, 함수, 객체등을 사용할 수 있습니다.


변수

변수는 하나의 데이터를 저장하는 저장소입니다.

변수 선언

변수는 변수명을 선언하고 값을 넣을 수 있습니다.

var 변수명 = 값;

변수명

자바스크립트에는 의미를 가진 단어들이 있기 때문에 사용자가 임의로 사용할 수 없는 단어들이 있습니다.

키워드 : 자바스크립트에서 사용하는 단어
식별자 : 사용자가 임의로 사용하는 단어

식별자를 만드는 규칙

  • 사용자가 사용할 수 있는 문자 : 알파벳(a~z, A~Z), 숫자(0~9), 밑줄(_), 달러기호($)
  • 첫 글자는 숫자를 사용할 수 없습니다.
  • 공백을 사용할 수 없습니다. : 밑줄(_) 사용가능, 하이픈(-) 사용 안됩니다.
  • 특수기호를 사용할 수 없습니다. : 달러기호($)는 사용 가능합니다.
  • 키워드를 사용 할 수 없습니다.

단어를 조합할 때 규칙

  • 언더스코어 노테이션(스네이크 표기법) : color_top과 같이 중간에 '_'를 사용합니다.
  • 캐멜 노테이션(로어 캐멀 표기법) : colorTop과 같이 두번째 단어의 첫 글자를 대문자로 사용합니다.
  • 파스칼 노테이션(어퍼 캐멀 표기법) : ColorTop과 같이 모든 단어의 첫 문장을 대문자로 사용합니다.

키워드

  • break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, false, finally, for, function, if, import, in, instanceof, new, null, return, super, switch, this, throw, true, try, typeof, var, void, while, with, yield

변수 선언

변수를 선언하는 예제입니다.

html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
    <script>
        //변수 선언
        var x = 100;             //변수 x에 100 숫자를 저장함
        var y = 200;             //변수 y에 200 숫자를 저장함
        var z = "javascript";    //변수 z에 javascript 문자를 저장함

        document.write(x);
        document.write("<br>");
        document.write(y);
        document.write("<br>");
        document.write(z);
        document.write("<br><br>");

        //변수 선언
        let a = 100;             //변수 a에 100 숫자를 저장함
        let b = 200;             //변수 b에 200 숫자를 저장함
        let c = "javascript";    //변수 c에 javascript 문자를 저장함

        document.write(a);
        document.write("<br>");
        document.write(b);
        document.write("<br>");
        document.write(c);
        document.write("<br><br>");

        //변수의 변경
        x = 300;            //변수 x값이 100에서 300으로 변경
        y = 400;            //변수 y값이 300에서 400으로 변경
        z = "ES6";          //변수 z값이 javascript에서 ES6으로 변경

        document.write(x);
        document.write("<br>");
        document.write(y);
        document.write("<br>");
        document.write(z);
        document.write("<br><br>");
    </script>
</head>
<body>
    
</body>
</html>

변수 var/let

변수 var과 let의 차이점을 보여주는 예제입니다.

html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>변수 var과 let의 차이점</title>
    <script>
        //변수 선언
        var x1 = 100;  
        let x2 = 200;

        document.write(x1,"<br>");
        document.write(x2,"<br><br>");

        //if문에서 변수 선언
        if(true){
            var x3 = 300;  
            let x4 = 400;
        }
        document.write(x3,"<br>");
        //document.write(x4,"<br><br>"); //에러 발생

        //변수 선언
        var x5 = 500;
        if(true){
            document.write(x5,"<br>");
            var x5 = 600;
            document.write(x5,"<br><br>");
        }

        //if문에서 변수 선언
        let x6 = 700;
        if(true){
            //document.write(x6,"<br>"); //에러 발생
            let x6 = 700;
            document.write(x6,"<br>");
        }
    </script>
</head>
<body>
    
</body>
</html>

상수

상수는 변하지 않는 수를 의미합니다. 상수는 값을 할당한 후에 재할당을 할 수 없습니다. ECMAScript 6에서부터 const 변수가 새로 추가 되었습니다.

const 변수명 = 값;

var과 const

변수 var과 const의 차이점을 보여주는 예제입니다.

결과
200
html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>자바스크립트(Javasript)</title>
</head>
<body>
    
    <script>
        var x1 = 100;  
        x1 = 200;

        document.write(x1,"<br>");

        const x2 = 100;  
        x2 = 200;

        document.write(x2,"<br>");
    </script>
</body>
</html>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기