JavaScript - ES6+ 문법

---

취업을 하기 위해서 이곳저곳 서류를 넣을 때 보면, 수많은 필요요건 중에 ES6+ 문법의 이해 부분이 들어가 있는 경우가 많다. 나는 웹 공부를 시작한지 오래 되지 않아서 처음부터 ES6+ 문법을 사용하였지만 어떤 것들이 있는지 정확히 알고 쓰면 더 좋을 것 같기 때문에 이곳에 정리하겠다.

1. Variable

• 이전과는 다르게 var에서 let, const가 더 추가되었다.
• let, const를 통해서 호이스팅의 발생을 막고 블록 단위의 scope를 사용할 수 있다.
• var은 재선언이 가능 / let은 재선언 불가능, 재할당 가능 / const는 재선언, 재할당 불가능

2. Destructuring

• object, array로 구조화된 변수를 다시 분해시켜 할당하는 것이다.

// 기본 배열
const [a, b] = [10, 20];
console.log(a, b); // result: 10, 20

// 배열 iterator
const [c, d, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // [30, 40, 50]

// 기본 객체
const obj = {k1: 10, k2: 'string', k3: [10, 20, 30]};
const {k1, k2, k3} = obj;
console.log(k1, k2, k3); // result: 10, 'string', [10, 20, 30]

// 객체 iterator
const {k1, ...obj2} = obj;
console.log(obj2); // {k2: 'string', k3: [10, 20, 30]}

• ... 은 인덱스에 대응되지 않은 나머지 값들의 배열 및 객체로 생각하면 편하다.

3. Template String

• `를 이용하여 보다 가독성 높고 간결하게 문자열을 선언하는 방법이다.

// es5+
var num = 10;
var str = '\n
  따옴표나 쌍따옴표를 사용하면 엔터 문자는 이렇게 \n
  사용해야 하며, 문자열 내부에 변수를 사용할 때도 \n
  num2 : '+num2+' 이런 방식을 사용해야합니다. \n
';

// es6+
const num2 = 10;
const str2 = `
  backquote를 이용하여 선언하면
  이처럼 엔터 문자를 사용할 수 있으며
  변수도 사용할 수 있습니다.
  num2 : ${num2}
  또한 '' "" 이렇게 따옴표를 맘대로 사용해도 됩니다.
`;

3. Arrow Function

• 기본 함수 형태에서 보다 간결히 사용하기 위해서 화살표를 사용하는 기법이다.

// es5
function a (num) {
  var res = num * 10
  return res
}
a(10); // 100

// es6+
const a = (num) => {
  const res = num * 10
  return res
};
a(10); // 100

• arrow function은 생성자로 사용될 수 없다.
• 객체를 반환할 경우에는 괄호로 감싸야 한다.

const func = () => {  foo: 1  };               
// func() 호출은 undefined를 반환!

const func = () => {  foo: function() {}  };  
// SyntaxError: function 문은 이름이 필요함

const func = () => ({ foo: 1 });
// o

4. Function Parameter

• 함수의 매개변수를 통해서 다양한 초기화가 가능하다.

// Default
const f = (x, y=10) => x + y;
f(1);	// 11
f(10, 5);	// 15

// Rest
const f = (x, ...y) => x * y.length;
f(10, 2, 3, 4, 5); // 10 * 4 = 40
f(10, 2); // 10 * 1 = 10

// Spread
const f = (x, y, z) => x + y + z;
const arr = [10, 20, 30];
f(...arr); // 10 + 20 + 30 = 60
f(...[1, 2, 3]); // 6

5. Class

• class 문법을 지원한다.
• extends를 통한 상속도 지원한다.
• static도 지원한다.

6. for of

• for in보다 좀 더 가볍게 사용할 수 있는 for of가 생겼다.
• forEach는 function을 사용한다.
• for of는 반복 도중 종료할 수 있고, forEach는 불가능하다.

for(const v of [10, 20, 30]){
  console.log(v);
  if(v === 10) return;
}
// 10 출력

[10, 20 ,30].forEach(v => {
  console.log(v);
  if(v === 10) return;
})
// 10, 20 ,30 모두 출력

7. Object 할당

• object에 값을 할당할 시, key의 name과 value의 variable name이 같을 경우, 생략이 가능하다.

// es5
var a = 10, b = 20, c = 30;
var obj = { a: a, b: b, c: c};

// es6
const a = 10, b = 20, c = 30;
const obj = {a, b, c};

황준일 님께서 작성하신 글을 스스로 공부하기 위해 간결하게 정리만 한 것이기 때문에 모든 출처는 황준일 님께 있습니다.

출처 - http://junil-hwang.com/blog/javascript-es6-spec/ // https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90