변수

변수란?

변수(variables)는 변하는 데이터(값)을 저장할 수 있는 메모리 공간입니다.

변수 선언

var 변수명 - 값; 

<script>
    var box = "변수";
    var box2 = "변수는 변하는 데이터 값을 저장할 수 있는 메모리 공간입니다."
            
    document.write(box);
    document.write(box2);
</script>

//변수
//변수는 변하는 데이터 값을 저장할 수 있는 메모리 공간입니다.

변수명

키워드 : 자바스크립트에서 정해진 단어

식별자 :사용자가 임의로 만들어서 사용하는 단어

식별자를 만드는 규칙

• 사용자가 사용할 수 있는 문자 : 알파벳(a-z. A-Z). 숫자(0-9), 특수기호('_'.'$')

• 첫 글자에는 숫자를 사용할 수 없다.

• 공백을 사용할 수 없다. 밑줄('_')은 사용 가능

• 특수기호도 사용할 수 없다. 달러($)는 사용 가능

• 키워드를 사용할 수 없다.

• 변수명을 사용할 때에는 대문자, 소문자를 구분해야 한다.

단어를 조합할 때 규칙

• 언더스코어 노테이션 : box_text와 같이 중간에 '_' 를 사용합니다.

• 캐멀 노테이션 : boxText와 같이 두번째 단어의 첫 글자를 대문자로 사용합니다.

• 파스칼 노테이션 : BoxText와 같이 모든 단어의 첫 글자를 대문자로 사용합니다.

변수의 종류

지역변수 : 특정 범위 안에서만 사용하는 변수 전역변수 : 모든 범위 안에서 사용하는 변수 매개변수 : 함수 외부에서 함수 내부로 전달하기 위한 변수 멤버변수 : 클래스 내부에서 만들어지며 주로 객체에서 사용하는 변수

//변수 선언
let x = 1000; //지역변수 x 설정
let y = 2000; //지역변수 y 할당
let z = 700; //지역변수 z

//함수선언 전역변수는 모든 범위 안에서 출력 가능
function fun1() {
    let x = 1000; //전역변수 x 설정
    let y = 2000; //전역변수 y 할당
    z = 7000; //전역변수 z 7000에서 700으로 바뀜

    document.write("함수 안 <br>");
    document.write(x, "<br>");
    document.write(y, "<br>");
    document.write(z, "<br>");
}
fun1();

//함수 선언 지역변수는 안에서만 출력이 가능 
function fun1() {
    let x = 1000; //지역변수 x 설정
    let y = 2000; //지역변수 y 할당
    let z = 7000; //지역변수 z

    document.write("함수 밖 <br>");
    document.write(x, "<br>");
    document.write(y, "<br>");
    document.write(z, "<br>");
}
fun1(); // 장점 - 변수명을 하나씩 바꿔주지 않아도 한 번에 출력 가능


//함수 안
1000
2000
7000
함수 밖
1000
2000
7000

<script>
    let x = 400;
    x = 800;
    
    function fun1(){
        let x = 100;
        x = 200;
        
        document.write("함수 안 <br>");
        document.write(x,"<br>");
    }
    fun1()
    document.write("함수 밖 <br>");
    document.write(x);    
</script>

문자형

문자형(string) 데이터는 다음과 같이 문자나 숫자를 큰따옴표(" ") 또는 작은따옴표(' ')로 감싸고 있습니다. 또한 문자형 데이터에 HTML. 태그를 포함하여 출력하면 태그로 인식합니다.

var 변수="사용할 문자나 숫자";

 <script>
     var box = 10; //숫자
     var text = "변수"; //문자
     var box2 = 10; //문자
     
     document.write(box);
     document.write(text);
     document.write(box2);
 </script>

<script>
    var s = "javascript";
    var num = "100";
    var tag = "<h1>string</h1>";
    
    document.write(s);
    document.write(num);
    document.write(tag);
 </script>

숫자형

숫자형(Number) 데이터는 단어 의미 그대로 숫자를 의미합니다. 만약 "100"과 같이 큰따옴표가 숫자를 감싸고 있다면 숫자가 아닌 문자형 데이터입니다. 이 경우에 Number("100")를 이용하면 문자형 데이터를 숫자형 데이터로 바꿀 수 있습니다.

var 변수= 숫자; 또는 Number("문자형 숫자");

<script>
    var s = 100;
    document.write(s);
    
    var t = Number("500"); // 문자 "500" -> 숫자 500 변경 
    document.write(t);
</script>

논리형

논리형(Boolean) 데이터 true (참) 또는 false(거짓)가 있습니다. 이 데이터는 주로 2개의 데이터를 비교할 때 나오는 결과입니다. 예를 들어 '100보다 10이 크다'는 잘못된 비교이므로 false라는 결과를 반환하게 됩니다.

typeof

typeof는 지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용합니다.

typeof 변수 또는 데이터;

<script>
    //변수명 box 변수에 값은 숫자 100을 넣어서 출력해보세요
    var box = 100;
    document.write(box);
    document.write("<br />"); // 밑으로 띄우고 싶을 떄 
        
    document.write(typeof box);
        
    document.write("<br />");
    var box2 = "100";
    document.write(box2);
    document.write("<br />");
        
    document.write(typeof box2);
 </script>
//100
//number
//100
//string

형변환

let c = Number(b);
document.write(typeof c, "<br>");

let d = a = "" + a;
document.write(typeof d, "<br>");

let e = String(c);
document.write(typeof e, "<br>");

/*
number
string
string