41. ES6의 특징

 

 JavaScript ES6는 코드를 보다 현대적이고 읽기 쉽게 만들기 위해 새로운 구문과 새로운 놀라운 기능을 제공한다. 코드를 적게 쓰고 더 많은 작업을 할 수 있다. 따라서 Write less, do more! 을 하나의 슬로건처럼 사용하는 듯 하다. ES6에서는 화살표 함수기능, template literal,  module 등과 같은 여러 가지 훌륭한 기능을 갖고 있다. 한번 살펴보자!

---

const , let , var

const and var

const는 변수를 선언하기 위한 ES6의 새로운 키워드이다. const는 기존의 var보다 더 강력하다. 따라서 변수를 한 번 사용하면 다시 할당할 수 없다. 즉, 개체와 함께 사용될 때를 제외하고는 불변의 변수이다. 이것은 선택기를 대상으로 하는 데 정말 유용합니다. 예를 들어 이벤트를 발생시키는 버튼이 하나이거나 JavaScript에서 HTML 요소를 선택하려는 경우 var 대신 const를 사용하는 것이 더 유용할 것이다. 왜냐하면 var는 'hoisted'되기 때문이다. 따라서 변수를 재할당하지 않으려면 항상 const를 사용하는 것이 좋다.

// ES5
var aaa = document.getElementById('aaa');

// ES6
const aaa = document.getElementById('aaa');

위의 코드에서 const는 변경되지 않으며 재할당될 수 없다. 새 값을 지정하려고 하면 오류가 반환될 것이다.

let

그렇다면 재할당을 할수 있도록 활용하려면 어떤 타입으로 변수를 지정해 주어야 할까? 수정가능한, 재할당 가능한 변수 키워드를 사용할 때에는 let 을 사용하도록 한다. 

let age = 13;
	age = 15;
    
console.log(age)
//output : 15

let 은 위의 예제에서 볼 수 있듯 재할당이 가능하며 가장 나중에 할당된 값을 리턴한다. let 과 const 모두 blocked-scope 라는 점에서 같지만 할당 가능하냐 재할당이 불가능능 하냐가 가장 큰 차이점이다. 참고로 blocked-scope란 해당 범위 내에서만 사용가능하다는 의미이다. 

화살표 함수(Arrow funcitons)

화살표 기능은 우리의 코드를 더 읽기 쉽고, 더 구조적이고, 현대 코드처럼 보이게 한다. 먼저 기존에 ES5에서 사용하는 함수의 형식을 살펴보자.

// ES5

function myFunc(name) {
	return 'Hello' + name;
    }
    
 console.log(myFunc('HW'));
 //output : Hello HW

 우선 기존의 문법형식에 따르면 함수를 세팅할 때 function으로 함수임을 명시하고 함수명(매개변수) {함수가 실행할 내용} 의 형식으로 작성했다. 그렇다면 화살표 함수는 어떨까?

// ES6 Arrow Function

const myFunc = name => {
	return `Hi ${name}`;
    }

console.log(myFunc('HW'));
// output : Hi HW

화살표 함수의 가장 큰 특징은 function을 적지 않아도 된다! 라는 점이다. 따라서 구조를 살펴보면 함수명 = 매개변수 => {함수가 실행할 내용} 보다시피, 화살표 기능은 더 읽기 쉽고 깨끗해 보인다. 때문에 더 이상 이전 구문을 사용할 필요가 없다. 또한 화살표 기능을 map, filter, reduce 와같은 내장 기능과 함께 사용할 수 있다.

Import and export

JavaScript 에서 import 및 export를 사용하면 우리의 서비스를 더욱 다채롭고 다양한 기능을 구현할 수 있다. 또한 JavaScript MVC 프레임워크에 익숙하다면 대부분의 경우 import 및 export를 사용하여 구성요소를 처리해본 경험이 있을 것이다. 그렇다면 import 와 export는 어떻게 작동하는 걸까? 사실 매우 간단하다. export를 사용하면 모듈을 내보내 다른 JavaScript 구성 요소에 사용할 수 있다. 우리는 import를 사용해서 그 모듈을 우리 구성 요소에 사용하기 위해 import를 사용하면 끝이다.

예를 들어서 두개의 파일을 만들어보자. 첫 번째 이름은 detailComponent.js이고 두 번째 이름은 homeComponent.js이다.

detailComponent.js에서 detail 함수를 내보낸다.

export default function detail(name, age) {
	return `Hello ${name}, my age is ${age}`
    }
    
 // arrow function을 사용해도 동일함

그리고 만약 우리가 homeComponent.js에서 이 기능을 사용하고 싶다면, 우리는 해당 파일에서 import를 사용하면 된다. 모듈을 두 개 이상 가져오려면 대괄호 안에 넣기만 하면 된다.

import detail from './detailComponent'

console.log(detail('HW',20))
//output : Hellow HW, my age is 20

 

---

이 외에도 예전 포스팅에서 작성했던, Template Literals, 구조분해할당 등도 있지만 이들은 한번 다뤄봤던 내용이기에 다른 내용만 먼저 다뤄봤다. 이 외에도 다양한 특징이 있기 때문에 계속 추가해볼 예정이다!