[JavaScript] 자주 사용하는 ES6 문법 정리

Node.js와 React관련 프로젝트를 진행하면서 기존에 배워왔던 jQuery를 활용한 ES5 문법으로 JavaScript 코드를 작성하였지만 이제는 최신 트렌드에 맞게 ES6 문법으로 JavaScript 코드를 작성하는 요구사항이 많아지기 시작했습니다.
여기서는 새로 추가된 기능을 모두 설명하는 대신 자주 사용하는 기능위주로 설명하겠습니다.

ES6(ECMAScript6)는 무엇인가요?

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

ES6는 아래의 새로운 기능들을 포함하고 있습니다.

• const and let
• Arrow functions(화살표 함수)
• Template Literals(템플릿 리터럴)
• Default parameters(기본 매개 변수)
• Array and object destructing(배열 및 객체 비구조화)
• Import and export(가져오기 및 내보내기)
• Promises(프로미스)
• Rest parameter and Spread operator(나머지 매개 변수 및 확산 연산자)
• Classes(클래스)

1. const and let

const는 변수 선언을 위한 ES6의 새로운 키워드입니다. const는 var보다 강력하고 일단 사용되면 변수를 다시 할당할 수 없습니다. 즉, 객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수 입니다.

이 기능은 선택자를 대상으로 하는 데 매우 유용합니다. 예를 들어 이벤트를 실행하는 단일 단추가 있거나 JavaScript에서 HTML 요소를 선택하려면 var 대신 const를 사용하십시오. 이것은 var가 '호이스팅(hoisting)'이기 때문입니다. 변수를 재할당하지 않으려면 항상 상수를 사용하는 것이 좋습니다.

// ES5
var MyBtn = document.getElementById('mybtn');
 
// ES6
const MyBtn = document.getElementById('mybtn');

위의 코드에서 const는 변경되지 않으며 재할당할 수 없습니다. 새로운 값을 제공하려고 하면 오류가 반환됩니다.

let은 새로운 값을 가질 수도 있고 재할당할 수도 있습니다. 변경 가능한 변수가 생성됩니다.

let name = '철수';
 
name = '영희';
 
console.log(name); // 출력 => 영희

let은 const와 동일하게 모두 블럭 범위라는 점입니다. 즉, 변수는 범위 내에서만 사용할 수 있습니다.

2. Arrow functions(화살표 함수)

화살표 함수는 최신 코드처럼 보이게 합니다.

// ES5
function myFunc(name) {
    return '안녕' + name;
}
console.log(myFunc('영희')); // 출력 => 안녕 영희
 
// ES6 화살표 함수
const myFunc = (name) => {
    return `안녕 ${name}`;
}
console.log(myFunc('영희')); // 출력 => 안녕 영희

변수(const, let)로 function을 구현하는게 가능해졌습니다. 
또한, 화살표 함수를 map과 filter, reduce 등 내장 함수와 함께 사용할 수 있습니다.

const myArrary = ['진수', '영철', '영희', 5];
// ES5 즉시실행함수
let arr1 = myArrary.map(function(item) {
    return item;
});
console.log(arr1); // 출력 => (4) ["진수", "영철", "영희", 5]
 
// ES6 화살표 함수
let arr2 = myArrary.map((item) => item);
 
console.log(arr2); // 출력 => (4) ["진수", "영철", "영희", 5]

화살표가 있는 map 함수는 ES5의 map보다 더 선명하고 읽기 쉬워 보입니다. ES6를 사용하면 더 짧고 스마트한 코드를 작성할 수 있습니다. filter와 reduce 같은 동일한 함수를 사용할 수 있습니다.

3. Template Literals(템플릿 리터럴)

화살표 함수에서 문자열을 연결하기 위해 더하기(+) 연산자를 사용할 필요 없이 ${변수} 형식으로 불러오는게 가능합니다.
백틱(`)을 사용하여 문자열 내에서 변수를 사용합니다.

var name='미노';
let age=33;
 
// ES5
function myFunc1() {
    return 'ES5 안녕' + name + '너의 나이는' + age + '살 이다!'; 
}
 
console.log(myFunc1('영희', 22)); // 출력 => "ES5 안녕미노너의 나이는33살 이다!"
 
// ES6
const myFunc = (name, age) => {
    return `ES6 안녕 ${name}, 너의 나이는 ${age}살 이다!`; 
};
 
console.log(myFunc('영희', 22)); // 출력 => "ES6 안녕 영희, 너의 나이는 22살 이다!"

4. Default parameters(기본 매개 변수)

함수를 선언 하고 실행할 때 매개 변수를 쓰지 않은 경우, 오류가 반환되지 않습니다.
기본값이 매개 변수에 들어가 있는 상태로 반환됩니다.
매개 변수가 일부 빠졌을 경우, 선언한 매개변수 순서대로 매핑되고 그 이후는 기본값으로 들어갑니다.

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

위의 예제에선 myFunc에 하나의 인자만 들어가다보니, 두번째 age는 기본값으로 들어가서 실행됩니다.
오류가 발생하지 않고 실행된다는 부분이 주목할 점 입니다.
그리고 기본값 = undefined 로 고정되어 나타나지만, 기본값을 미리 선언해 둘 수 있습니다.
아래 예제처럼 하면 기본값을 원하는데로 설정할 수 있습니다.

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

5. Array and object destructing(배열 및 객체 비구조화)

비구조화를 통해 배열 또는 객체의 값을 새 변수에 더 쉽게 할당할 수 있습니다.

// ES5 문법
const contacts1 = {
    famillyName: '이',
    name: '영희ㅎ',
    age: 22
};
 
let familly1 = contacts1.famillyName;
let name1 = contacts1.name;
let age1 = contacts1.age;
 
console.log(familly1); 
console.log(name1);
console.log(age1);
// 이
// 영희ㅎ
// 22
 
// ES6 문법 
const contacts2 = {
    famillyName2: '김',
    name2: '선희ㅎ',
    age2: 25
};
 
let { familly2, name2, age2 } = contacts2;
 
console.log(familly2);
console.log(name2);
console.log(age2);
// undefined (let 배열의 변수명과, contact2의 key 명이 같아야 매핑된다.)
// 선희ㅎ
// 25

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

JavaScript 응용프로그램에서 import 및 export를 사용하여 외부 자바스크립트 파일에서 특정부분만 불러오는게 가능합니다.
JavaScript MVC 프레임워크에 익숙한 경우, 대부분의 경우 import 및 export를 사용하여 구성요소를 처리합니다.

일반적으로 js 파일을 불러오고 하다보면, 통으로 가져오는 부분이 크다보니 성능이나 시간에 차이가 생기기 마련이지만
export를 사용하면  선택적으로 다른 JavaScript 구성 요소에 사용할 function을 내보낼 수 있습니다.
다른 컴포넌트에 사용하기 위해 가져오기 import를 사용합니다.

// ES6  외부 파일 (detailComponent.js)
export default function detail(name, age) {
    return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}
 
-------------------------------------------------
// 실행할 파일
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);

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

사이즈가 중량인 홈페이지에서 유용한 기능이라 생각합니다.

7. Promises(프로미스)

Promise는 ES6의 새로운 특징입니다. 비동기 코드를 쓰는 방법입니다.
예를 들어 API에서 데이터를 가져오거나 실행하는데 시간이 걸리는 함수를 가지고 있을 때 사용할 수 있습니다.

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

콘솔을 기록하면 Promise가 반환됩니다. 
따라서 데이터를 가져온 후 함수를 실행하려면 Promise를 사용합니다.
Promise는 두 개의 매개 변수를 사용하며 resolve및 reject 예상 오류를 처리 할 수 있습니다.

const url = 'https://jsonplaceholder.typicode.com/posts';
const getData = (url) => {
    return fetch(url);
};
 
getData(url).then(data => data.json()).then(result => console.log(result));

이제 콘솔을 기록하면 데이터 배열이 반환됩니다.
참고 : fetch 함수는 Promise 자체를 반환합니다!

8. Rest parameter and Spread operator(나머지 매개 변수 및 확산 연산자)

Rest parameter는 배열의 인수를 가져오고 새 배열을 반환하는데 사용됩니다.
아래 예제에서 const로 ...rest 가 있습니다.
해당부분은 '영희', 20, '열성적인 자바스크립트' 가 각각 val1, val2, val3로 맵핑 되고,
이후의 값인 '안녕' '지수' '어떻게 지내니?' 가 배열로써 rest 안에 저장되는 것을 의미합니다.
때문에 console로 출력하면 "안녕 지수 어떻게 지내니?" 가 출력 가능해집니다.

const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];
 
// 비구조화를 이용한 값을 얻기
const [ val1, val2, val3, ...rest ] = arr;
 
const Func = (restOfArr) => {
    return restOfArr.filter((item) => {return item}).join(" ");
};
 
console.log(Func(rest)); // 안녕 지수 어떻게 지내니?

Spread operator는 Rest parameter와 구문이 동일하지만 Spread operator는 인수뿐만 아니라 배열 자체를 가집니다.
for 반복문이나 다른 메서드를 사용하는 대신 Spread operator를 사용하여 배열의 값을 가져올 수 있습니다.

9. Class(클래스)

자바에서 쓰는 class가 자바스크립트 에서도 나왔습니다.
class는 객체 지향 프로그래밍(OOP)의 핵심입니다. 코드를 더욱 안전하게 캡슐화할 수 있습니다.
class를 사용하면 코드 구조가 좋아지고 방향을 유지합니다.

class를 만들려면 class 키워드 뒤에 두 개의 중괄호가 있는 class 이름을 사용합니다.
이제 new 키워드를 사용하여 class 메서드와 속성에 액세스할 수 있습니다.
다른 class에서 상속하려면 extends 키워드 다음에 상속할 class의 이름을 사용합니다.

class myClass {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
 
    sayHello() {
        console.log(`안녕 ${this.name} 너의 나이는 ${this.age}살이다`);
    }
}
 
const user = new myClass('영희', 22);
console.log(user.name); // 영희
console.log(user.age); // 22
 
// myClass 메서드 및 속성 상속
class UserProfile extends myClass {
    userName() {
        console.log(this.name);
    }
}
 
const profile = new UserProfile('영희', 22);
profile.sayHello(); // 안녕 영희 너의 나이는 22살이다.
profile.userName(); // 영희

자바스크립트에 여러 기능이 추가되면서 구현할 수 있는 것들이 많아졌으니 참고하면 되겠다.