[Javascript] (번역 및 요약) ECMAScript 6 - ECMAScript 2015

ECMAScript 6 - ECMAScript 2015 (혹은 es6) 문법을 이해하기 위해

w3school의 문서를 번역 및 요약을 하고 이 페이지를 지속적으로 업데이트 할 예정이다.

물론 원문을 직접 보아도 문제 없으나, 눈으로도 보고 직접 써 내려 가는 것이 더 기억에 남을 것이기에!

이 페이지는 수시로 업데이트를 해 갈 것이다.

 

원문

https://www.w3schools.com/js/js_es6.asp

ECMAScript 6

ECMAScript 6?

ES6 혹은 ECMAScript 2015로 불린다.

어떤 사람들은 JavaScript 6라고도 한다.

 

---

가장 큰 변화는 스코프별 변수 선언이 지원 된다는 점.

(var로만 선언하는 문법은 이제 좋지 않은 습관)

let

block scope에 선언할 수 있는 변수

var x = 10;
// Here x is 10
{
  let x = 2;
  // Here x is 2
}
// Here x is 10

---

const

정수(定數).

let과 닮았으나 값이 변할 수 없다. <단! const가 오브젝트 형이라면 내부 속성값은 변할 수 있다.>

var x = 10;
// Here x is 10
{
  const x = 2;
  // Here x is 2
}
// Here x is 10

※ 개발 팁!

es6부터는 스코프 개념이 도입되어 무조건 var로 변수 선언을 하던 이전 문법이 필요없게 되었다

(물론 전역 변수에는 여전히 사용).

기본적으로 변수는 const로 선언하고, 필요 시 let과 var를 적재적소에 쓰는 습관을 들이도록 할 것

---

화살표 함수(Arrow Functions)

함수를 표현하기 위해 짧은 구문을 허용한다.
더 이상 function, return 키워드나 중괄호{}가 필요없다.

// ES5 
var x = function(x, y) { 
   return x * y; 
} 

// ES6 
const x = (x, y) => x * y; 

• 화살표 함수는 자체 this를 갖지 않는다. 객체 메소드를 정의하기에는 적합하지 않다.
• 화살표 함수는 호이스트 되지 않으며, 사용되기 전에 선언돼야 한다.
• 함수 표현은 언제나 상수값이기에 var를 사용하기보다 const가 안전하다.
• 함수가 단일 문장일 경우에만 return 키워드와 중괄호{}를 생략할 수 있다. 때문에, 생략하기 보다는 항상 쓰는 것이 좋은 습관일 수 있다.

const x = (x, y) => { return x * y };

---