ES6 const,let 비구조화할당 템플릿문자열

 

1. 변수 선언자let,const

먼저 let을 설명하려고하는데요, 이제 ES6부터는 거의 var을 안씁니다.

아래는 var의 스코프와 let의 스코프를 비교하는 코드인데요,

{
  var a = 3;
}
console.log(a); //3

{
  let b = 3;
}
console.log(b); //ReferenceError: b is not defined

이렇게 var은 함수스코프를 가지고, let은 블록 스코프를 가지기 때문에

{} 밖에서 변수를 출력할때 var a는 출력이 되고 let b는 사라졌기때문에

출력이 안되는걸 알수있습니다.

다른 언어에서 변수를 선언할때랑 완전히 같아요

 

const 또한 let과 같은 블록 스코프를 가지지만

상수라는 이름 그대로 값이 한번 할당되면 절대로 다시 재할당할수없습니다.

const a = 3;
a = 1 //TypeError: Assignment to constant variable

이렇게 재할당하려고하니까 상수변수에 값을 넣을려고했다며 에러를 뿜습니다.

 

2. 비구조화 할당

비구조화할당은 객체,배열의 요소를 변수에 할당하려고할때 유용하게 사용할수있습니다.

먼저 객체의 비구조화 할당입니다

let person = {
  name: "kim",
  age: 20,
  money: 1000,
  job: { main: "mainjob", sub: "subjob" },
};

const {
  name,
  money: m,
  job: { main, sub },
} = person;
console.log(name, m, main, sub);

이렇게 let {}=객체의 꼴로 할당할수있는데 좌변의 {}안에는 기본적으로 name같이

오른쪽 객체에서 꺼내 변수로 만들 키의 이름을 좌변에 적으면 그 변수가 생깁니다.

그리고, money:m과 같이 keyname:newname 형태로 작성하면 newname 변수가 oldkeyname의 값이 할당된 상태로 만들어집니다.

마지막으로 job: { main, sub }과 같이 객체의 키에 값이 객체인경우 {keyname:{가져올 키이름}} 형태로 적으면 변수가 할당됩니다.

 

다음으로 배열의 비구조화 할당입니다.

let score = [100, 2, 4, 0];
let [firsrt, second, , fourth] = score;
console.log(firsrt, second, fourth);

이렇게 좌변에 저장할 변수이름을 써주고, 중간에 저장하고싶지않은 요소는 그냥 , ,로 공백으로 냅두면 됩니다.

 

3. 템플릿 문자열

템플릿 문자열은 다른 언어의 문자열 보간,fstring 이런 문법들과 같은역할을합니다.

먼저 템플릿 문자열은 1키의옆에있는 `(백틱)기호로 문자열을 감싸야합니다 `문자열`

그리고 문자열 안에서 ${변수 또는 식} 형태로 작성하면 그 자리를 {}안에 있는 변수,식이 대체하게됩니다.

let age = 10;
let name = "홍길동";
let man = true;
console.log(`내 나이는${age}살이고 이름은 ${name}이야 1+1=${1 + 1}`); // 내 나이는10살이고 이름은 홍길동이야 1+1=2