[JS] ES6 이후의 변화 01 / let, const / 템플릿 문자열 / default parameter / 화살표 함수 / 트랜스파일링

React에는 ES6 이후의 문법이 적용되므로(React documentation에서는 독자들이 최신 ES 문법을 잘 알고 있을 것이라고 가정한다고 한다) React를 잘 알기 위해서는 ES6 이후 문법을 잘 아는 것이 중요하다.

❓ (참고 겸 의문점) 그렇다면 ES6 이전 문법은 필요없지 않나?

• 모든 브라우저에서 ES6 이후 문법을 적용하는 것이 아니다.
• 참고: Can I use ES6
• 모든 웹이 그렇 듯 internet explorer 가 문제다
  - 아니 IE 없어졌잖아? 지원 안하는데? 라고 할 수 있지만 여전히 그럼에도 불구하고 IE를 쓰는 곳이 있다! (예를 들면 공공기관)
  • 그리고 위 링크에서 보면 알 수 있지만 Opera mini에서도 지원하지 않는다.
• 그래서 그 이전 문법도 알아야 한다!

➡️ 그리고 ES6 이후 문법, 즉 상위 문법을 호환되는 하위 문법으로 변환(트랜스파일링)해주는 것이 "Babel"이다.

---

1. let, const 추가

let

• js도 lexical variable scoping을 지원해서 다른 언어들처럼 let을 사용하면 선언된 scope 내에서만 변수에 접근이 가능하다.

  TL; DR
  let: 선언된 block scope 내부에서만 접근 가능
  var: 어느 scope에서 선언, 재할당하든 global에서 접근 가능

1️⃣ var 사용

var name = "JS ES6";

if (name) {
  var name = "REACT";
  console.log("block inside", name); // block inside REACT
}

console.log("block outside", name); // block outside REACT

• var을 사용하면 if block 내부에서 name을 재할당해도 전역에서 바뀌는 것을 확인할 수 있다.

2️⃣ let 사용

var name = "JS ES6";

if (name) {
  let name = "REACT";
  console.log("block inside", name); // block inside REACT
}

console.log("block outside", name); // block outside JS ES6

• let을 사용하면 if block 내부에서 재할당한 name이 block scope 내부에서만 바뀌는 것을 확인할 수 있다.

---

2. 템플릿 문자열

`${variable}`

- 이 문자열을 사용하려면 양 끝에 ` (backtick)을 넣어줘야 한다.

• 코드 중간에 변수를 사용하고 싶을 때 쓰는 문자열

ES6 이전 ➡️ + 기호로 변수와 문자열을 연결해서 사용했음

console.log(name+", " + age + " " + gender)

ES6 이후

console.log(`${name}, ${age}, ${gender}`)

3. default parameter

• 함수를 정의할 때 parameter의 default 값을 선언할 수 있게 되었다.

function sample(param1="hello", param2="world", param3=10){
	console.log(${param1}, ${param2}, ${param3});
}

---

4. 화살표 함수

화살표 함수가 생긴 목적 ➡️ 간결한 코드 작성을 위해

가장 간결한 기본 형태

// 화살표 함수 사용 안함
var sampleArrow = function(num) {
  return num+1
}

// 화살표 함수 사용
var sampleArrow = num => num+1

• parameter가 하나일 때는 () 생략 가능
• 함수 구현부가 리턴문 하나일 때는 {}와 return 키워드 생략 가능
  
  

인자도, 구현부도 여러 줄일 때

var sampleArrow2 = function(str1, str2) {
	if (!str1){
      throw new Error("sampleArrow2의 str1이 누락되었습니다.")
    } 
  	if (!str2){
      throw new Error("sampleArrow2의 str2가 누락되었습니다.")
    }
  	return `${str1}, ${str2}`
}

화살표 함수는 this를 새로 바인딩하지 않는다

• 참고: this의 MDN 문서

---

5. ES6 트랜스파일링

트랜스파일링

• 브라우저에서 ES6 코드를 실행하기 전에 ES5로 컴파일해서 ES6가 제대로 작동하도록 보장하는 것
• 대표적 트랜스파일링 도구: BABEL

컴파일과의 차이점

• 트랜스파일링은 코드를 binary로 변환하는 것이 아님
• 한 버전의 js 코드를 더 많은 브라우저가 이해할 수 있는 다른 버전의 js 구문으로 변환하는 것!

모든 브라우저가 ES6를 모두 지원하면 더 이상 BABEL은 필요하지 않을까?

• JS 버전은 계속해서 높아지고 있기 때문에 엄청난 변화가 일어나지 않는 한 당분간은 계속 사용될 것

---

참고 자료: Learning React, 알렉스 뱅크스, 이브 포셀로 지음, 한빛 미디어