JavaScript_변수

▶️ 변수의 기본

var name = 'John';
var age = 20;

변수라는 문법은 var라는 키워드를 이용해 만들어 준다.

---

▶️ 변수를 사용하는 이유

  var alert = document.getElementById('alert');
  var alert = $('#alert');

  alert.show();

1. 훨씬 직관적이고
2. DOM탐색을 적게하여 자바스크립트 실행속도가 빨라진다.

---

▶️ 변수의 선언과 할당

  var name;
  name = 'john';
  name = 'Tom';

그런데 var 이름 = 'john'; 이 코드는 실은 두개의 파트로 이루어져있던 코드이다. 이름이라는 변수를 만들겠다~ 라는 선언과, 이름이라는 변수에 'john'이라는 글자를 넣겠다~ 라는 할당, 이렇게 두개의 파트로 분리가 가능하다.

---

▶️변수의 범위

  function abc() {
    ~~~~
    var 나이 = 20;
  }

  console.log(나이);

자바스크립트에선 함수 밖에서 만든 변수는 함수 내에서도 자유롭게 사용가능하다. 자바스크립트가 그렇게 설계됐기 때문이다.

---

▶️자바스크립트 신문법(ES6)

var // 전역변수, 재선언 O, 재할당 O
let // 지역변수, 재선언 X, 재할당 O
const // 지역변수, 재선언 X, 재할당 X

ES6문법엔 var말고도 let 과 const라는 문법도 있다. ES6문법에서는 var뿐만 아니라 let과 const라는 키워드로도 변수를 만들 수 있다. 이들은 각각 변수의 범위, 재선언가능 여부, 재할당 가능 여부가 다르다.

---

▶️ 변수의 호이스팅

자바스크립트 코드를 인터프리터가 로드할 때, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 호이스팅이라고 한다.

  function sum (a, b) {
    var x = add(a,b);
    return x;

    function add (c, d) {
      var result = c+d;
      return result;
    }
  }

위와 같은 코드를 JS 인터프리터는 아래의 순서로 읽는다.

  function sum (a, b) {
    var x = undefined;
    function add (c, d) {
      var result = c+d;
      return result;
    }

    x = add(a,b);
    return x;
  }

• 변수의 경우 어디서 어떻게 선언을 하더라도 항상 컨텍스트 내의 최상위로 끌고 올라온 뒤 'undefined'를 할당한다. 이후 함수 선언을 끌고 올라오고 난 뒤 변수의 할당과 함수의 실행문을 순서대로 가져온다.
• 호이스팅을 이해해야 원치않는 undefined가 출력되는 것을 막을 수 있다.
• ES6 이후로 let이라는 예약어를 사용하면 호이스팅을 막을 수 있다. 실제 현업에서 var 키워드는 절대 쓰이지 않으며 99%이상의 경우 모든 함수를 무조건 const와 arrow syntax로 선언한다.

---