[JS] var를 사용한 변수의 특징

함수 선언과 실행 순서

// 전역변수 : 코드 전부에서 사용 가능 
// => 어디서든 사용가능한 형태의 변수
var num = 100;
function ex1() {
    // 지역변수 : 지역(블럭)에서 사용 가능
    // => 특정 지역(함수)에서밖에 못씀
    var num = 200;
    document.write(num+"<br>"); // 지역변수가 필요한 경우 지역 안에 써줘야함
}
// var num = 300;
document.write(num+"<br>");
ex1();
document.write(num+"<br>");

var 변수(ES6) (p517~)

• 전역변수 : 모든 스코프(scope)에서 사용 가능한 변수

  var a = 100;
          function TEST() {
              // var a  = 100;(x -> 지역변수)
              a = 100; // 전역변수 var 뺴고 사용
          }
  

• (함수 밖에서 선언 후 사용, 함수 안에서 사용할 경우 var 타입을 제거)
• 지역변수 : 특정 지역에서 사용 가능한 변수

중괄호 안에는 모두 지역변수. if, for, switch문

호이스팅: '끌어올린다' 라는 개념으로 사용됨

<script>
var x = 10;

function print() {
    document.write(x);
    document.write(y);

    var y = 20;
}
print();

</script>

var x = 10;
function print() {
    document.write("x :" + x + "<br>");
    document.write("y :" + y + "<br>");
    document.write("z :" + z + "<br>");
    
    var y = 20; // 실제코드
    y = 20;
}
print();

위 코드는 오류가 난다.

// document.write("z :" + z + "<br>");
// => **오류 발생! Uncaught ReferenceError: z is not defined**

//var y = 20; // 실제코드

위 코드를 호이스팅을 해주면,

<script>
        var x = 10; // 변수 선언
        x = 20; // 변수 재할당(재사용)

        var x = 30; // 변수 재선언

        function print() {
            document.write("x :" + x + "<br>");
            document.write("y :" + y + "<br>");
            // document.write("z :" + z + "<br>");
            // => 오류 발생! Uncaught ReferenceError: z is not defined
            
            var y = 20; // 실제코드
            // y = 20; // 함수 호이스팅
        }
        print();
    </script>

오류 안남!

---

(p.523~)

let 타입 : 변수를 선언한 블럭 {중괄호} 에서만 사용가능하다.

let 예약어를 사용하여 선언한 변수는 값을 재할당할 수는 있지만, 변수를 재선언 할 수는 없다.

<script>
  let A = 100;
  // let A = 200; // 변수의 재선언 불가능! 
  // => 오류발생! Uncaught SyntaxError: Identifier 'A' has already been declared (이미 정의된 것을 또 만듦)

  function ex2() {
      // A = 200; // 변수의 재사용O
      let A = 200; // 변수의 재선언X -> 지역변수O
      document.write("A : "+A+"<br>");
      // document.write("B : "+B+"<br>"); // 출력안됨
      // -> 오류발생! Uncaught ReferenceError: B is not defined

      //let B = 200;
      // => 호이스팅x
  }
  ex2();
</script>

const 타입 : 변하지 않는 값을 저장하는 타입

-변수의 재사용 X -변수의 재선언 X -변수 호이스팅 X

<script>
const C = 200;
//재사용X
// C = 300;
// => 오류발생! Uncaught TypeError: Assignment to constant variable. (상수변수는 수정할 수 없다.) 

//재선언X
// const C = 300;
// => 오류발생! Uncaught SyntaxError: Identifier 'C' has already been declared

//호이스팅X
document.write("C : "+C );
function ex3() {
    document.write(D);
    const D = 100;
}
ex3();
// => 오류발생! Uncaught SyntaxError: Identifier 'C' has already been declared
</script>

var타입 : 전역변수를 선언해서 사용

-변수의 재사용 O -변수의 재선언 O -> 가능하면 사용 X -변수 호이스팅 O -최소한의 사용을 권장함 (코드 상단위치)

익명함수

var tmp = function() {
  }

  tmp();

즉시실행 함수

선언과 동시에 실행함

**(**function() {
      alert("즉시실행함수 실행!");
  }**());**

화살표 함수(람다표현식)

• 익명함수 형태의 구조와 같음

const st = function() {
      return "Hello";
  }

위 코드를 한 줄로 바꿀 수 있음

// const st = () => { return "Hello"; }
// const st = () => return "Hello";
const st = () => "Hello";

셋 중 아무거나
아래로 갈수록 간략해짐

중괄호는 안써도됨!