[자바스크립트]자주 사용하는 ES6 문법 총 정리!!

ES6(ECMAScript6)는 무엇인가요?

ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전입니다. ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 합니다. 현재 주요 JavaScript 엔진들에서 ES6 기능들을 구현 중에 있습니다.

 

1. let, const 키워드

• let 변수 선언 키워드와 상수 선언 키워드인  const가 추가되었다. const는 var보다 강력하고 사용되면 다시 변수를 할당할수 없다 .즉, 객체와 함께 사용할 때를 제외하고는 변경불가능한 변수 이다.
• let은 새로운 값을 가질 수도 있고 재할당할 수도 있습니다. 변경 가능한 변수가 생성됩니다.
• let은 const와 동일하게 모두 블럭 범위라는 점입니다. 즉, 변수는 범위 내에서만 사용할 수 있습니다.

2. 템플릿 리터럴

• 더이상 문자열을 연결하기 위해 더하기(+)연산자를 사용할 필요가 없으며 사용법은 백틱(`)으로 가능하다.
• ${} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.

const myFunc = (name, age) => {
    return `안녕 ${name}, 너의 나이는 ${age}살 이다!`; 
};
 
console.log(myFunc1('영희', 22));
// 출력 => 안녕 영희, 너의 나이는 22살 이다!

• 이전 보다 훨씬 간결해진 코드로 객체를 선언할 수 있다.
• 메소드에 더 이상 콜론(:)이나 function을 붙이지 않아도 된다.
• 함수명이 겹치는 경우에는 한 번만 쓸 수 있다.

const person = {
  name: {
    firstName,
    lastName
  },
  city,
  gender,
  sayHello() {
    return `Hello, ${firstName} ${lastName} from ${country}!`
  },
}

4. 화살표 함수

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

// ES6 화살표 함수
const myFun = (name) => {
    return `안녕 ${name}`;
}
 
console.log(myFun('민수')); // 출력 => 안녕 영희
 
// 또는 화살표를 사용하거나 'return' 키워드를 사용하지 않아도 됩니다
const myFun = (name) => `안녕 ${name}`;
 
console.log(myFun('민수')); // 출력 => 안녕 영희

5. 비구조화 할당(구조분해 할당)

• 객체나 배열에서 사용하며, 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다.

const person = {
  name: {
    firstName: 'Youngkyun',
    lastName: 'Kim'
  },
  country: 'South Korea',
  gender: 'Male'
}
 
const counts = [1, 2, 3]
 
// 기존의 객체, 배열 할당 방식
const firstName = person.name.firstName;
const lastName = person.name.lastName;
const gender = person.gender;
console.log(`${firstName} ${lastName} is a ${gender}`);
 
const one = counts[0]
const two = counts[1]
const three = counts[2]
console.log(`one + two + three = ${one + two + three}`);
 
// 비구조화 객체, 배열 할당 문법
const { name: { firstName, lastName }, gender } = person;
console.log(`${firstName} ${lastName} is a ${gender}`);
 
const [one, two, three] = counts;
console.log(`one + two + three = ${one + two + three}`);
 
// 비구조화 문법으로 함수 인자에도 적용 가능
const sayHello = ({ name: { firstName, lastName }, country }) => {
  return `Hello, ${firstName} ${lastName} from ${country}!`
}
console.log(sayHello(person)); // Hello, Youngkyun Kim from South Korea!

6. Promise

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

const myPromise = () => {
    return new Promise((resolve, reject) => {
        resolve('안녕하세요 Promise가 성공적으로 실행했습니다');
    });
};
 
cosole.log(myPromise());
// Promise {<resolved>: "안녕하세요 Promise가 성공적으로 실행했습니다"}

예를 들어 API에서 데이터를 가져오거나 실행하는데 시간이 걸리는 함수를 가지고 있을 때 사용할 수 있습니다.

 

관련 포스팅으로 이동 👉

Promise

 

async 와 await , 유용한 Promise APIs

7. Class

• 자바스크립트는 프로토타입 기반의 객체 지향 언어이다.코드를 더욱 안전하게 캡슐화할 수 있습니다.
• 클래스 기반의 객체 지향 프로그래밍도 할 수 있게 Class 키워드를 도입하였다..

class myClass {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
 
const user = new myClass('영희', 22);
 
console.log(user.name); // 영희
console.log(user.age); // 22

8. String Method (includes, startsWith, endsWith)

• 포함되어있는지(includes), 시작하는지(startsWith), 끝나는지(endsWith)
• boolean 타입을 return 해준다.

9. Multi-line String

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

10. Default Parameter

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

const myFunc = (name, age = 22) => {
    return `안녕 ${name} 너의 나이는 ${age}살 이니?`; 
};
 
console.log(myFunc1('영희'));
// 출력 => 안녕 영희 너의 나이는 22살 이니?

12.Multi-line String

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

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

// ES6
let str = `asdhasfhfsahsfhfshasfhsfahsfahsfahasfh
mxmxmxmxmxmxmxmmxmxmxmxmxmmxmxmxmxmxm`;

13.Import and export(가져오기 및 내보내기)

export를 사용하면 다른 JavaScript 구성 요소에 사용할 모듈을 내보낼 수 있습니다. 우리는 그 모듈을 우리의 컴포넌트에 사용하기 위해 가져오기 import를 사용합니다.

예를 들어, 두 개의 파일이 있습니다. 첫 번째 파일은 detailComponent.js이고 두 번째 파일은 homeComponent.js입니다.

detailComponent.js에서는 detail 함수를 내보낼 예정입니다.

// ES6
export default function detail(name, age) {
	return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}

그리고 homeComponent.js에서 이 기능을 사용하려면 import만 사용합니다.

import detail from './detailComponent';

console.log(detail('영희', 20));
// 출력 => 안녕 영희, 너의 나이는 20살 이다!

둘 이상의 모듈을 가져오려는 경우, 중괄호에 넣기만 하면 됩니다.

import { detail, userProfile, getPosts } from './detailComponent';

console.log(detail('영희', 20));
console.log(userProfile);
console.log(getPosts);

14. Module

• 모듈이란, 재사용하기 위한 코드 조각을 뜻하며, 세부사항은 캡슐화 시키고, API 부분만 외부에 노출시킨 코드이다.
• type에 module을 추가시키고 확장자를 mjs로 변경하여 사용한다.
• 모듈은 모듈 스코프를 가지며, import와 export 키워드를 이용하여 사용한다.

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