[Javascript] ES6 문법

Javascript의 표준을 나타내는 ES의 버전6에 대해 알아보겠습니다.

 

 

 

ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어입니다.

뒤에 숫자는 버전을 뜻하고 ES5는 2009년, ES6는 2015년에 출시되었습니다.

 

 

 

ES6를 기점으로 매년 문법 변경 사항을 발표하고, 새로운 문법 상세에 대해서도 활발한 논의가 이루어지고 있다고 합니다.

 

 

---

1. let, const 키워드

 

- 블록스코프를 가지고 재선언 불가 재할당 가능한 let 변수 선언 키워드와 상수 선언 키원드 const가 추가되었습니다. 

- 기존 var 키워드만 있었을 때 보다 예측 가능한 코드를 작성 할 수 있게 되었다.

 

 

if (true) {
  var x = 'var로 선언한 변수입니다.';
}
console.log(x); // (출력값) var로 선언한 변수입니다.


if (true) {
  const y = 'const로 선언한 변수입니다.';
}
console.log(y); // (출력값) ReferenceError: y is not defined

 

위와 같이 블록 안에서 선언한 const는 전역에서 사용할 수 없습니다.

 

 

 

var x = 1;
var x = 2;

console.log(x); //  (출력값) 2


let y = 1;
let y = 2; // 에러 발생

 

let 변수의 경우, var와 다르게 재 선언이 불가능하여 코드에러를 막을 수 있습니다.

 

 

 

---

 

2. 템플릿 리터럴

 

 

// ES5
var s1 = ', ';
var s2 = 'World!';
var s3 = 'Hello' + str1 + str2;

// ES6
let s1 = ', ';
let s2 = 'World!';
let s3 = `Hello ${str1} ${str2}`;

 

위와 같이 템플릿 리터럴을 통해 직관적으로 표현 할 수 있고, 매번 변수와 문자열을 '+'로 이어 줄 필요도 없습니다.

 

 

 

 

---

 

3. 객체 리터럴

 

- 이전 보다 훨씬 간결해진 코드로 객체를 선언할 수 있습니다. 

- 메소드에 더 이상 콜론(:)이나 function을 붙이지 않아도 됩니다. 

- 함수명이 겹치는 경우에는 한 번만 쓸 수 있습니다. 

- 객체의 프로퍼티를 동적으로 생성하려면 객체 리터럴 바깥에서 [text + 1]과 같이 선언했어야 했는데, 

ES6부터는 객체 안에서 바로 속성으로 사용할 수 있습니다.

const func = function() {
  console.log('func');
};

const val = 'Hi';


const obj = {
  inside() {
    console.log('객체 안에 바로 함수를 선언');
  },
  func,
  [val + 1]: 'parkkingcar'
};


obj.inside(); // 출력값: 객체 안에 바로 함수를 선언
obj.func(); // 출력값: func
console.log(obj.val1); // 출력값: parkkingcar

 

 

---

4. 화살표 함수

 

- 함수 표현식을 화살표 함수로 표현할 수도 있습니다. 

- 화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되어 가독성 및 유지 보수성이 올라갔습니다. 

- 만약 함수의 본문(body)에 return만 있는 경우 화살표 함수는 return과 {}를 생략할 수 있습니다. 단, 같이 생략

- return문에서 소괄호는 사용가능.

 

 

// ES5
function func(a, b) { 
  return a + b; 
} 


// ES6
// 함수 표현식 - 화살표 함수
const func = (a, b) => {
  return a + b;
}

// 함수 표현식 - 화살표 함수 (생략형)
const func = (a, b) => a + b;

 

 

---

 

5. 구조 분해 할당

 

구조분해 할당이란 펼치다란 뜻으로 객체나 배열에서 사용하며, 값을 해체한 후,

개별 값을 변수에 새로 할당하는 과정을 말합니다.

 

 

// 배열에서 Spread 사용
const arr = [1, 2, 3];
const [one, two, three] = arr;

one // 1
two // 2
three // 3

// 객체에서 Spread 사용
const obj = {
 firstName: 'P',
 lastName: 'SY'
};

const { firstName, lastName } = obj;
firstName // P
lastName // SY

 

 

---

 

6. Promise

 

자바스크립트에서 비동기 처리를 기존에는 콜백 함수를 사용한, 콜백 패턴을 사용하였습니다. 

결과론적으로, 콜백헬을 발생시켰습니다. 

 

이를 해결하기 위해 프로미스가 도입되었고, 

프로미스 후속처리 메소드를 이용해 에러 처리를 효과적으로 할 수 있게 되었습니다.

 

 

acync, await 참고

async와 await

 

 

---

 

7. Class

 

- 자바스크립트는 프로토타입 기반의 객체 지향 언어입니다. 

- 클래스 기반의 객체 지향 프로그래밍도 할 수 있게 Class 키워드를 도입하였습니다. 

- 자바스크립트에서 클래스는 내부적으로 프로토타입을 이용해서 만들어졌습니다. 

- 클래스는 호이스팅이 let, const 키워드 처럼 동작합니다.

 

 

 

 

---

 

8. String Method (includes, startsWith, endsWith)

 

각 함수에 따라  boolean 타입을 return 해준다.

 

const str = 'Hello World!';
str.includes("World"); // true
str.startsWith("Hello"); // true
str.endsWith("World!"); // true

 

 

---

 

9. Multi-line String

 

 

문자열이 라인을 넘어가게 되면 ‘\n’ 과 덧셈 연산자를 사용했는데, 백틱을 사용하게 되면서 여러줄의 문자열 관리도 편해졌습니다.

 

// ES5
var str = 'qwertyuiopasdfghjklzxcvbnm.\n' + 
'qwertyuiopasdfghjklzxcvbnm.\n'

// ES6
let str = `qwertyuiopasdfghjklzxcvbnm
qwertyuiopasdfghjklzxcvbnm`;

 

 

---

 

10. Default Parameter

 

기존에는 함수의 매개변수에 초기화를 하려면 내부 작업이 필요했으나, ES6 에서는 필요 없어졌습니다.

 

// ES5
function func(a, b) {
  var a = a || 100;
    var b = b || 200;
  return a + b;
}
console.log(func(100)); // 300

// ES6
const func = (a = 100, b = 200) => a + b;
console.log(func()); // 300

 

 

---

 

11. Module

 

- 모듈이란, 재사용하기 위한 코드 조각을 뜻하며, 세부사항은 캡슐화 시키고, API 부분만 외부에 노출시킨 코드입니다. 

- type에 module을 추가시키고 확장자를 mjs로 변경하여 사용합니다. 

- 모듈은 모듈 스코프를 가지며, import와 export 키워드를 이용하여 사용합니다.

 

 

<script type="module" src="lib.mjs"></script>

 

 

 

 

 

 

 

 

참고자료

모던 JavaScript 튜토리얼

[Javascript] Tutorial(4): ES6 문법