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' }
      

템플릿 리터럴

템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 ``` 를 사용한다.

1. 백틱을 이용 시 문자열에서 스페이스바가 그대로 적용된다
2. ${}을 사용하여 문자열에 새로운 문자열을 삽입할 수 있다.

const first = 'Ung-mo';
const last = 'Lee';

// ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.');
// "My name is Ung-mo Lee."

// ES6: String Interpolation
console.log(`My name is ${first} ${last}.`);
// "My name is Ung-mo Lee."

console.log(`1 + 1 = ${1 + 1}`); // "1 + 1 = 2"
// 삽입한 표현식은 문자열로 타입 변환됨

화살표 함수 선언 방법

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

화살표 함수 호출

익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

const pow = x => x * x;
console.log(pow(10)); // 100