JavaScript_ES6_Study [ let, const 변수, Hoisting, Template Literals ]

2022-03-08 노션페이지
기록된 노션을 다시 정리

1. var 의 문제점

1. 함수레벨스코프이다 → 함수가 아닌 다른 곳에서 선언 시 모두 전역변수로 사용됨
   2. var 선언 생략 허용 → 의도하지 않는 곳에서 변수가 만들어질 수 있다.
   3. 변수 중복 선언 허용 → 이 또한 의도치 않은 곳에서 중복이 될 수 있다.
   4. 변수 호이스팅 → var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 코드가 아직 변수 선언 코드에 도착하지 않아도 전역스코프로 인해 선언이 된다.

2. let

1. 블록레벨스코프이다 → 함수가 아닌 곳에서 선언되더라도 전역변수가 아닌 지역변수로 사용된다. ex) for문, if문, while문 등...
   { } = 블록
   2. 변수 중복 선언 금지 → 같은 이름의 변수를 선언할 경우 에러 발생
   3. 호이스팅 → 자바스크립트는 모든 선언을 호이스팅한다. (var, let, const, function, function*
      , class) 하지만 여기서 var 과 다른 점은 변수 선언 코드에 도착해야 변수 초기화 단계가 실행

3. const ( let과 다른 점 )

1. 재할당 금지
   - 주의할 점은 const는 반드시 선언과 동시에 할당이 이루어져야 한다
   - 그렇지 않으면 다음처럼 문법 에러(SyntaxError)가 발생한다

   2. const는 상수(변하지 않는 값)를 위해 사용한다.

      // 10의 의미를 알기 어렵기 때문에 가독성이 좋지 않다.
      if (rows > 10) {
      }
      // 값의 의미를 명확히 기술하여 가독성이 향상되었다.
      const MAXROWS = 10;
      if (rows > MAXROWS) {
      }

   3. 재할당은 불가능하지만 할당된 객체의 내용(프로퍼티의 추가, 삭제, 프로퍼티 값의 변경)은 변경할 수 있다.

      const user = { name: 'Lee' };
      // const 변수는 재할당이 금지된다.
      // user = {}; // TypeError: Assignment to constant variable.
      // 객체의 내용은 변경할 수 있다.
      user.name = 'Kim';
              console.log(user); // { name: 'Kim' }

4. Hoisting

호이스팅(Hoisting)이란, 모든 선언(var, let, const, function, class)을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

• Function은 선언과 초기화, 할당이 모두 이루어짐
• 변수의 경우 두가지 경우가 있음
  var VS let, const
  먼저 변수는 3단계에 걸쳐 생성된다.

  1. 선언단계
     • 변수를 실행 컨텍스트의 변수 객체(Variable Object)에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
  2. 초기화 단계
     • 변수 객체(Variable Object)에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined로 초기화된다.
  3. 할당 단계
     • undefined로 초기화된 변수에 실제 값을 할당한다.

---

var의 호이스팅 과정

• 선언 단계와 초기화 단계가 한번에 이루어진다.
• 스코프의 선두에서 선언과 초기화가 이루어짐
  ➡️ 그렇기에 변수 선언문 이전에 변수에 접근하여도 undefined가 반환되어 에러가 발생하지 않음

---

let, const의 호이스팅 과정

• 선언 단계와 초기화 단계가 분리되어 진행된다.
• 선언 단계만 호이스팅이 되고 초기화 단계는 변수 선언문에 도달했을 때 이루어진다.
  ➡️ 그렇기에 변수 선언문 이전에 변수에 접근한다면 초기화 이전 이므로 참조 에러(ReferenceError)가 발생한다.
  ➡️ 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 ‘일시적 사각지대(Temporal Dead Zone; TDZ)’라고 부른다.

5. Template Literals

템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `` 를 사용한다.
1. 백틱을 이용 시 문자열에서 스페이스바가 그대로 적용된다
2. ${}을 사용하여 문자열에 새로운 문자열을 삽입할 수 있다.

참조: poiemaweb.com