Blog

[JavaScript] ES6 문법

https://hanamon.kr/javascript-es6-%EB%AC%B8%EB%B2%95/

[JavaScript] ES6 문법 알아보기

  • ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다.
  • 뒤에 숫자는 버전을 뜻하고 ES5는 2009년 ES6는 2015년에 출시되었다.

1. let, const 키워드

  • 블로스코프를 가지고 재선언 불가 재할당 가능한 let 변수 선언 키워드와 상수 선언 키원드 const가 추가되었다.
  • 기존 var 키워드만 있었을 때 보다 예측 가능한 코드를 작성 할 수 있게 되었다.

2. 템플릿 리터럴

  • 사용법은 “(back tick)으로 가능하다.
  • ${} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.
// ES5
var str1 = ', ';
var str2 = 'World!';
var str3 = 'Hello' + str1 + str2;

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

3. 객체 리터럴

  • 이전 보다 훨씬 간결해진 코드로 객체를 선언할 수 있다.
  • 메소드에 더 이상 콜론(:)이나 function을 붙이지 않아도 된다.
  • 함수명이 겹치는 경우에는 한 번만 쓸 수 있다.
  • 객체의 프로퍼티를 동적으로 생성하려면 객체 리터럴 바깥에서 [text + 1]과 같이 선언했어야 했는데, ES6부터는 객체 안에서 바로 속성으로 사용할 수 있다.
const myFn = function() {
  console.log('myFn');
};

const text = 'TEXT';
const obj = {
  inside() {
    console.log('객체 안에 바로 함수를 선언');
  },
  myFn,
  [text + 1]: '하나몬'
};

obj.inside(); // 출력값: 객체 안에 바로 함수를 선언
obj.myFn(); // 출력값: myFn

console.log(obj.TEXT1); // 출력값: 하나몬

4. 화살표 함수

  • 함수 표현식을 화살표 함수로 표현할 수도 있다.
  • 화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되어 가독성 및 유지 보수성이 올라갔다.
  • 만약 함수의 본문(body)에 return만 있는 경우 화살표 함수는 return과 {}를 생략할 수 있다. 단, 같이 생략해야한다.
  • return문에서 소괄호는 사용가능하다.
// ES5
function plusFn(a, b) {
  return a + b;
}

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

// 함수 표현식 - 화살표 함수 (생략형)
const plusFn = (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: '하나',
  lastName: '몬'
};

const { firstName, lastName } = obj;

firstName // 하나
lastName // 몬

6. Promise

  • 자바스크립트에서 비동기 처리를 기존에는 콜백 함수를 사용한, 콜백 패턴을 사용하였다.
  • 결과론적으로, 콜백헬을 발생시켰다.
  • 이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메소드를 이용해 에러 처리를 효과적으로 할 수 있게 되었다.

7. Class

  • 자바스크립트는 프로토타입 기반의 객체 지향 언어이다.
  • 클래스 기반의 객체 지향 프로그래밍도 할 수 있게 Class 키워드를 도입하였다.
  • 자바스크립트에서 클래스는 내부적으로 프로토타입을 이용해서 만들어졌다.
  • 클래시는 사실 특별한 함수이다.
  • 클래스는 호이스팅이 let, const 키워드 처럼 동작한다.

8. String Method (includes, startsWith, endsWith)

  • 포함되어있는지(includes), 시작하는지(startsWith), 끝나는지(endsWith)
  • boolean 타입을 return 해준다.
const str = 'Hello World Hanamon';

str.includes("Hana"); // true
str.startsWith("Hello"); // true
str.endsWith("mon"); // true

9. Multi-line String

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

var str = 'asdhasfhfsahsfhfshasfhsfahsfahsfahasfh.\n' +
'mxmxmxmxmxmxmxmmxmxmxmxmxmmxmxmxmxmxm.\n'

// ES6

let str = `asdhasfhfsahsfhfshasfhsfahsfahsfahasfh
mxmxmxmxmxmxmxmmxmxmxmxmxmmxmxmxmxmxm`;

10. Default Parameter

  • 기존에는 함수의 매개변수에 초기화를 하려면 내부 작업이 필요했으나, ES6 에서는 필요 없어졌다.
// ES5
function myFn(a, b) {
  var a = a || 100;
  var b = b || 200;
  return a + b;
}

console.log(myFn(100)); // 300

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

11. Module

  • 모듈이란, 재사용하기 위한 코드 조각을 뜻하며, 세부사항은 캡슐화 시키고, API 부분만 외부에 노출시킨 코드이다.
  • type에 module을 추가시키고 확장자를 mjs로 변경하여 사용한다.
  • 모듈은 모듈 스코프를 가지며, import와 export 키워드를 이용하여 사용한다.
<script type="module" src="lib.mjs"></script>
Tags: , , ,
guest
0 Comments
Inline Feedbacks
View all comments