[JavaScript] 자바스크립트 변수, 자료형

1. 자바스크립트 변수

<script>
    // 변수 선언
    var name;
    console.log(name);

    // 변수 초기화(할당)
    name = "홍길동";
    console.log(name);

    // 변수 선언 및 할당(문제가 있다)
    // 변수 선언은 같은 이름으로 하면 안된다.
    // var name = "김유신";
    // console.log(name);

    var str = "김유신"; // 다른 이름의 변수로 생성(선언)하면 문제 없다.
    console.log(str);

    // 변수 값 재할당()
    name = "이순신";
    console.log(name);

    // ',' 를 사용해 여러개의 변수를 선언 및 초기화
    var no1 = 1, no2 = 2, no3 = 3;
    /*
        var no1 = 1;
        var no2 = 2;
        var no3 = 3;
    */
   console.log(no1);
   console.log(no2);
   console.log(no3);
</script>

• 변수
  - 프로그램에서 값을 저장하기 위한 하나의 메모리 공간
  - 일반적으로 값을 저장하는 것을 할당, 값을 읽어오는 것을 참조라고 함
  - 변수 선언 : 변수를 생성
  - 변수 초기화 : 변수에 값을 저장
  - 변수 사용 : 변수에 있는 값을 사용
• 변수의 선언
  - 값을 저장 및 사용하기 위해 메모리 공간(주소)를 생성하는 것
  - 변수를 선언할 때 같은 이름으로 하면 문제가 생김
  ex) var name;          // name 이라는 변수 생성
  ex) var text;             // text 이라는 변수 생성
• 변수의 초기화(값 할당, 저장)
  - 선언한 메모리에 값을 할당(저장)하는 행위
  ex) var name = "홍길동";          // 선언과 동시 초기화(할당)
  ex) name = "이순신";                // 변수에 값 초기화(할당)
  
  var title;                                    // 선언
  title = "자바스크립트";              // 초기화(할당)
• 변수 사용
  - 변수에 저장되어 있는 값을 읽어 사용
  ex) document.write(name);      // 웹페이지에 변수 값 출력
  ex) console.log(name);            // 콘솔창에 변수 값 출력
• 변수 타입
  - 자바스크립트에서 모든 변수는 모든 자료형
  (정수, 실수, 논리, 문자열 배열 및 Object(객체) 등)
  - 심지어 함수(Function)도 하나의 변수로 관리 및 처리 가능
  - 변수 타입으로는 var, let, const가 있다. 차이점은 밑에 블로그 참조
  https://tadaktadak-it.tistory.com/74?category=1024177

  [JavaScript] 스코프, 호이스팅, 변수의 선언 방식

2. 자바스크립트 자료형

* 자바스크립트에서 변수는 var, let, const로 모든 자료형을 가질 수 있다.
* 동적 변수 타입은 장점도 있지만 문제점도 가지고 있어 이를 보완한 언어가 TypeScript이다.

<script>
    var a = "Hello";    // 최초 선언시 문자열 변수로 사용
    console.log(a + " : " + typeof a);

    a = 123;    // 이제 숫자형
    console.log(a + " : " + typeof a);

    a = true;    // 이제 논리형
    console.log(a + " : " + typeof a);

    a = [1,2,3];    // 이제 배열
    console.log(a + " : " + typeof a);

    a = function() {
        console.log("함수입니다.")
    };
    console.log(a + " : " + typeof a);

    var b = 1/0;
    console.log("1/0 : "+ b);
    
    b = "문자" / 2;
    console.log("'문자' / 2 : " + b);

    b = "문자" / 2 + 5;
    console.log("'문자' / 2 + 5 : " + b);

    var c = "Hello";
    console.log(c + " : " + typeof c);

    c = "안녕하세요. 반갑습니다.";
    console.log(c + " : " + typeof c);

    console.log(" ");
    // ``(백쿼트)를 사용해서 변수를 문장에 넣어서 더 간편하게 사용 가능
    var name = "홍길동";
    c = `저의 이름은 ${name}입니다`;
    console.log(c);
    
    c = '저의 이름은 ' + name + '입니다';
    console.log(c);

    var age = 40;
    c = `${c} 저의 나이는 ${age + 5}세 입니다.`;
    console.log(c);

    console.log(" ");
    var d = true;
    console.log(d);

    d = 10 < 20;
    console.log(d);

    var e = null;
    console.log(e);

    var f = undefined;
    console.log(f);
</script>

• 자료형 변수 선언
  
  

  문자열	var a = 'Hello';        var a = "Hello";
  숫자	var b = 0;               var b = 1.3;
  논리	var c = true;           var c = false;
  배열	var d = [];               var d = new Array();
  객체	var e = {};              var e = new Object();
  null	var d = null;
  undefined	var e = undefined; (정의되지 않은 것)
  함수	var h = function() {};

• 동적 사용
  var a = "Hello";               // 최초 선언시 문자열 변수로 사용
  a = 123;                         // 이제는 숫자형
  a = true;                         // 이제는 논리형
  a = [1,2,3];                     // 이제는 배열
  a = function() {}              // 하다하다 함수까지...
• ` `(백쿼트)
  - ` ` 백쿼트 사이에 ${변수이름} 을 쓰면 기존과는 더 편하게 변수를 사용할 수 있다.
  var name = "홍길동";
  c = `저의 이름은 ${name}입니다`;
     
  c = '저의 이름은 ' + name + '입니다'