변수

1. 변수란?

 

변수는 변하는 데이터를 저장할 수 있는 메모리 공간

하나의 데이터만 저장

데이터의 종류 : 문자형, 숫자형, 논리형, Null 

 

 

변수 선언

 

var 키워드를 변수명 앞에 붙임

한글 사용이 불가능

영문, 숫자, _ , $ 사용가능 

단어와 단어의 조합이라면 두 번째 글자의 첫 글자는 대문자로 표기 (Camel 표기법)

 

var 변수형; 또는 var 변수명=값;

 

변수에는 하나의 값만 넣을 수 있다. 

만약 변수에 100을 저장하고 30을 다시 저장하면 기존 100은 삭제되고 30이 저장된다.

 

    <script>
        var box;
        box=100;
        box=30;
        document.write(box);
    </script>

출력화면

 

 

2. 변수에 저장할 수 있는 자료형

 

1) 문자형 (String)

 

문자형은 큰따옴표(" ")나 작은따옴표(' ')로 감싸고 있다.

문자형 데이터에 HTML 태그를 포함하여 출력하면 태그로 인식한다.

 

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

 

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

실행화면

 

 

2) 숫자형 ( Number )

 

단어 의미 그대로 숫자를 의미

만약 "100" 처럼 큰 따옴표 안에 숫자가 있다면 숫자가 아닌 문자형으로 취급한다.

문자형을 숫자형으로 변경하고 싶다면 Number("100") 을 이용해서 바꿀 수 있다.

    <script>
        var a = "30"; // 변수 a는 문자형
        document.write(a, "<br>");

        var a = Number("40"); // 변수 a는 숫자형
        document.write(a, "<br>");

        var a = Number.parseInt("50"); // 변수 a는 숫자형
        document.write(a, "<br>");
        
    </script>

 

 

3) 논리형 ( Boolean )

 

true(참) 또는 false(거짓)의 결과가 있다.

 

    <script>
        var a = true; //true
        var b = false; //true
        var c = 10 > 5; //true

        // ,뒤에는 다음 붙일 변수나 문자열
        // ,와 +는 동일하다.
        //document.write(a, "<br>");
        document.write(a + "<br>"); //true
        document.write(b, "<br>"); //false
        document.write(c, "<br>"); //true
    </script>

출력화면

 

 

4) null & undefined 데이터

 

undefined : 변수 s에 값이 등록되기 전의 기본 값을 말함

null : 변수에 저장된 데이터를 비우고자 할 때 사용

 

var s;	//undefined
var t = hello;
t = null;

 

5) typeof

 

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

- typeof 변수 혹은 typeof 데이터 

 

    <script>
        var num = 100;
        var str = "자바스크립트";
        
        document.write(typeof num, "<br>"); //number
        document.write(typeof str);         //string
    </script>

실행화면

 

3. 변수선언 방식

 

위의 예제들에서 확인 할 수 있듯, 변수를 재선언 하는 경우 기존의 값은 삭제가 되고 새로운 값이 덮힌다.

 

간단한 코드가 아닌, 길고 복잡한 코드에서는 사람이기에 기존의 선언해둔 변수의 존재를 잊고 재선언하는 경우에는 문제가 발생이 될 수 있다.

 

이를 보완하기 위해 추가된 변수 선언 방식이 let과 const이다.

 

1) let

 

중복선언 불가, 재할당 가능

let title = 'book';
console.log(title); // book

let title = 'movie';
console.log(title); 
//Uncaught SyntaxError: Identifier 'title' has already been declared

title = 'music';
console.log(title);//music

 

let은 var와 달리 중복선언 시, 해당 변수는 이미 선언되었다는 에러 메시지를 뱉는다.
즉, 중복선언이 불가하다. 하지만 변수에 값을 재할당하는 것은 가능하다.

 

 

2) const

 

중복선언 불가, 재할당 불가

 

const title = 'book';
console.log(title); // book

const title = 'movie';
console.log(title); 
//Uncaught SyntaxError: Identifier 'title' has already been declared

title = 'music';
console.log(title);
//Uncaught TypeError: Assignment to constant variable

 

let와 const의 차이는 immutable(재할당)가능여부이다. 재할당은 가능한 let과 달리 const는 재할당 또한 불가하다.

 

 

4. 변수 선언 시 주의 사항

 

- 첫 글자로는 영문자나 $, _만 올 수 있음 (숫자나 다른 특수기호로 시작 불가)

- 변수명에는 영문자, 숫자, $, _ 만 올 수 있음

- document, location, window과 같은 예약어(이미 사용중인 단어)는 사용 불가 

- 되도록이면 의미를 부여해줄 것

- 대소문자 구분해야함 (대소문자 다르면 아예 다른 변수임)

 

 

---

 

참고자료 : Do it! 자바스크립트+제이쿼리 입문, https://cheershennah.tistory.com/231