[자바스크립트 ES6 공부] 01

✋🏻 책 '러닝 리액트'를 정리한 내용입니다.

📍 변수 선언하기

✔️ const 키워드

• ES6부터 상수가 도입
• const 키워드를 이용해 상수 선언

const pizza2 = true;
pizza2=false; //error 발생

✔️ let 키워드

• let 키워드로 구문적인 변수 영역 규칙을 지원
• if/else/for문으로 만들어진 블록은 별도의 영역을 구성하지 않는다. (즉, 변수의 영역이 그 블록 안으로만 한정되지 않음을 의미)

아래는 let을 안 쓴 예시.

var topic = 'js';
if(topic){
    var topic='react'
    console.log('block',topic)
}
console.log('global',topic) //global js가 아니라 global react가 출력된다.

아래는 let을 써서 전역 변수를 보호한 예시이다.

var topic2 = 'js';
if(topic){
    let topic2='react'
    console.log('block',topic2)
}
console.log('global',topic2) //global js가 출력된다.

➕ for문도 마찬가지이다.

✔️ 템플릿 문자열

• 템플릿 문자열을 문자열 연결(전통적인 방식, +를 사용한다.) 대신 사용할 수 있다.
• 문자열 중간에 변수 삽입 가능

아래는 전통적인 문자열 연결 방식.

let lastname="ssook"
let firstname="choi"
console.log(firstname+" "+lastname)

아래는 템플릿 문자열을 사용한 예시이다.

let lastname="ssook"
let firstname="choi"
console.log(`${firstname} ${lastname}`)

이때 템플릿에서는 변수를 ${}를 사용해 문자열 안에 집어넣을 수 있기 때문에, 문자열을 단 하나만 사용해도 된다 → html 제목과 글의 본문에 변수를 포함시킬 수 있다.