본문 바로가기
💻 1. 웹개발_Front end/1-4 Javascript

[Javascript] 02-2 변수

by 달님🌙 2021. 9. 5.
반응형

 

변수란?

 

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

- 데이터를 담을 수 있는 그릇으로 오직 한개의 데이터만 저장할 수 있음

- 새로운 데이터가 들어오면 기존의 데이터는 메모리 공간에서 지워진다.

- 변수에 저장할 수 있는 데이터의 종류로는 문자형, 숫자형, 논리형, Null 데이터가 있음

 

 

변수 선언

 

- 기본형과 같이 var 키워드를 변수명 앞에 붙임

- 한글 사용이 불가능하고 영문과 숫자, 그리고  _ , $ 만 쓸 수 있음 

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>variable</title>
</head>
<body>
    <script>
        // 메모리에 box라는 공간 생성
        // 변수 타입과 무관하게 var로 변수 선언
        var box;
        var box1 = "javascript"
        var box2 = true;
        var box3 = null;
        // box라는 공간에 100 값 할당
        box = 100;
        // 할당되어 있는 100을 30으로 변경
        box = 30;
        document.write(box+"<br>");
        document.write(box1+"<br>");
        document.write(box2+"<br>");
        document.write(box3+"<br>");
    </script>
</body>
</html>

 

 

 

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

 

1. 문자형 ( String )

- 문자형은 큰따옴표나 작은따옴표로 감싸고 있음

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

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>string tag</title>
</head>
<body>
    <script>
        var s = "javascript";
        var num = "100";
        var h1 = "<h1>h1</h1>";
        document.write(h1);
        var h2 = "<h2>h2</h2>";
        document.write(h2);
        var h3 = "<h3>h3</h3>";
        document.write(h3);
        var h4 = "<h4>h4</h4>";
        document.write(h4);
    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>string tag</title>
</head>
<body>
    <script>
        // 문자형 변수에 태그를 담아서 웹 문서에 추가할 수 있다.
        var tag = "";
        tag += "<table border='1'>";
        tag += "    <tr>";
        tag += "        <td>1행1열</td>";
        tag += "        <td>1행2열</td>";
        tag += "    </tr>";
        tag += "    <tr>";
        tag += "        <td>2행1열</td>";
        tag += "        <td>2행2열</td>";
        tag += "    </tr>";
        tag += "</table><br>";
        document.write(tag);
        var a = Number.parseInt("3");
        document.write(a, "<br>");
        var a = Boolean(0); //false
        document.write(a, "<br>");
    </script>
</body>
</html>

 

 

2. 숫자형 ( Number )

- 숫자를 따옴표로 감싸면 그것은 더이상 숫자가 아님 (문자형이다)

- 문자형을 숫자형으로 변경하고 싶다면 Number("100") 을 이용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>string tag</title>
</head>
<body>
    <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>
</body>
</html>

 

 

3. 논리형 ( Boolean )

- 종류는 참 또는 거짓 두 가지임 

- 주로 2개의 데이터를 비교할 때 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>boolean</title>
</head>
<body>
    <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>
</body>
</html>

 

 

4. Boolean() 메서드

- 숫자 0, null, undifined, 빈 문자("")를 넣으면 false

- 그 외에 모든 데이터는 true를 반환한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>boolean</title>
</head>
<body>
    <script>
        var d = Boolean(null); //false
        var e = Boolean("javascript"); //true
        var f = Boolean(0); //false
        var undef;
        var g = Boolean(undef); //false

        document.write(d, "<br>"); //false
        document.write(e, "<br>"); //true
        document.write(f, "<br>"); //false
        document.write(g, "<br>"); //false
    </script>
</body>
</html>

 

5. 빈 데이터 ( undefined )

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

 

6. null 데이터

- 변수에 저장된 값이 null인 경우를 가리킴

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

 

    <script>
        var s;
        var t = "hello";
        document.write("변경 전 t는 " + t, "<br>");
        t = null;
        document.write("변경 후 t는 " + t, "<br>");
        document.write("t의 자료형은 " + typeof t, "<br>");
    </script>

 

7. typeof

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

- typeof 변수 혹은 typeof 데이터 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>typeof</title>
</head>
<body>
    <script>
        var str = "javascript"; // 문자형
        var num = 100; // 숫자형
        var bool = 10 < 20; // 논리형
        var nu;
        nu = null; // null형
        var undef; // undefined형
        document.write(typeof(str) + "<br>");
        document.write(typeof(num) + "<br>");
        document.write(typeof bool + "<br>");
        document.write(typeof nu, "<br>");
        var type_undef = typeof undef; // undefined형
        document.write(type_undef, "<br>");

        // camelcase 표기법 : 첫 단어는 소문자로, 두 번째 단어의 첫 글자만 대문자로 표기
        var classNum;
    </script>
</body>
</html>

 

변수 선언 시 주의 사항

 

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

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

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

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

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

반응형
저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-4 Javascript' 카테고리의 다른 글

[Javascript] 03-1 제어문이란?  (0) 2021.09.05
[Javascript] 02-3 연산자  (0) 2021.09.05
[Javascript] 02-1 자바스크립트 기초 문법  (0) 2021.09.05
[Javascript] 01-3 자바스크립트 맛보기 예제  (0) 2021.09.05
[Javascript] 01-2 개발 환경 준비하기  (0) 2021.09.05

관련글

댓글

티스토리툴바