Javascript ES6 — 보다 효율적으로 코딩하기

원글 : JavaScript ES6 — write less, do more

원작자 : SaidHayani

Javascrpt ES6의 새로운 문법과 기능들로 우리는 보다 모던하고 읽기 편한 코드를 짤 수 있게 되었다. 더 적은 코드로 더 많은 일을 할 수 있게 된 것이다. ES6는 우리에게 arrows functions, template strings, class, modules과 같이 근사한 기능들을 안겨주었다. 자, 그럼 그 기능들을 하나씩 살펴보도록 하자.

Const and let

const는 ES6에서 추가된 변수를 선언할 때 쓰이는 새로운 키워드다. const를 이용하여 변수를 선언하면 다른 곳에서 해당 변수를 변경할 수 없게된다.

이는 선택자로 특정 엘리먼트를 선택할 때 특히 유용하다, 예를들어 누르면 특정 이벤트를 발생시키는 버튼이 있다고 한다면 혹은 Javascript를 이용해서 HTML 엘리먼트를 선택해야 해야하고 그 변수가 변경되면 안되는 값이라면 var 대신 const를 사용하라. const로 정의된 변수를 다른 곳에서 다시 정의하려고 한다면 에러가 발생할 것이다.

반면에 let 키워드는 const와는 달리 변수 값을 다시 정의할 수 있게 한다. 그리고 let과 const모두 블록 스코프라 선언된 스코프 안에서만 유효하다.

Arrow Functions

arrow function은 정말로 멋진 기능이라 생각한다, 그리고 arrow function을 통해 코드가 한결 더 읽기 편해지고, 짜임새를 갖추며, 보다 현대적인 코드로 만들어 준다.

아래의 코드 대신

arrow function을 이용해 이렇게 코딩해보시라.

보시는 바와 같이 arrow function을 사용하면 코드가 보다 깔끔해진다. 물론 arrow function으로 map, filter, reduce와 같은 함수역시 사용 가능하다.

es5에서의 map보다 es6에서의 map 함수가 코드면에서는 훨씬 깨끗해 보이지 않는가? 우리는 ES6를 통해 보다 짧고, 나은 코드를 짤 수 있다

Template Literals

Template literals 또는 Template Strings를 통해 우리는 더이상 문자열 중간에 스크립트 코드를 사용하기 위해 중간 중간에 +를 넣지 않아도 된다.

기존방식의 코드는 이러한 모습일 것이다.

하지만 ES6에선 이렇게 바뀌었다.

정말 간단하지 않는가? 기존방식과 ES6의 새로운 방식에 큰 차이점을 느낄 것이다. 문자열을 스크립트에서 조작할 때 ES6의 새로운 문법이 훨씬 더 정돈되고 잘 짜인 코드처럼 보인다는 느낌을 준다

Default parameters

나는 PHP로 작업할 때 주로 매개변수에 디폴드 값을 선언해 놓는다. 이를통해 매개변수의 값을 미리 지정해놓는 것이다. 이로 인해 혹시나 매개변수 값을 넘기는 것 까먹었을 때 undefined error 대신 디폴트로 세팅해 놓은 값으로 함수가 처리된다.

예제를 함께 보도록 하자.

위의 함수를 돌리면 undefined error가 발생한다. 왜냐면 두번째 매개변수인 age값을 같이 넘기지 않았기 때문이다. 하지만 default parameters를 쓰게되면 미리 세팅한 값으로 함수가 처리되므로 이로 인한 오류가 발생하지 않는다.

보는바와 같이 2번째 매개변수 값을 주지 않았는데도 디폴트로 세팅한 값을 이용해 함수를 처리하는 것을 볼 수 있다.

Array and object destructing

destruction 기능은 배열값 이나 객채를 다른 변수에 할당하는 작업을 수월하게 만들어 준다.

예제를 통해 한번 살펴보도록 하자.

ES6의 문법으론 위의 과정을 아래와 같이 간결하게 만들 수 있다.

ES5문법에서는 객체의 속성값을 각각의 변수에 선언해줘야 했다. 하지만 ES6에서는 선언하고자 하는 객체의 속성값을 중괄호 안에 변수로 선언해주면 끝이다.

주의 : 객체의 속성값과 다른 이름의 변수로 선언하면 undefined를 리턴시킨다. 예를 들어 객체의 속성값이 name인데 변수 이름은 username이라고 선언하면 undefined를 리턴시킨다.

하지만 해당 변수의 이름을 바꾸고 싶다면 아래와 같이 :를 붗여주면 된다.

배열 역시 객체와 같은 형태의 문법이 쓰인다, 하지만 배열은 중괄호 대신 대괄호를 쓴다.

Import and export

Import와 export를 통해 독립되고 재사용이 가능한 컨포넌트의 제작이 가능하게 된다. Javascript MVC framework에 익숙하다면 대부분 컴포넌트를 조정하기위해 Import와 export를 쓴다는 걸 알것이다. 그렇다면 실제론 어떻게 동작하는 것일까?

실제로는 간단하다, export는 특정 모듈을 다른 Javascript에서도 사용가능 하게끔 만들어주며 import를 통해 특정한 모듈을 가지고와 현재 작업중인 컨포넌트에서 사용한다.

예를들어 detailComponent.js라는 파일과 homeComponent.js 라는 두개의 자바스크립트 파일이 있다고 가정하자. 그리고 detailComponent.js에서 detail 이라는 함수를 export할 것이다.

그리고 이 함수를 homeComponent.js에서 사용하고 싶다면 import를 통해 가져올 수 있다.

Promises

Promise는 ES6에서 새로 생긴 기능이다. 비동기식 코드를 작성하기 위해 쓰는 method인데 특정 API에서 data를 가져오거나 콜백함수등을 이용하는 상황들에 쓰일 수 있다. Promise는 resolve와 reject 두개의 매개변수를 갖는다.

Classes

Class는 객체지향프로그래밍의 핵심이라고 할 수 있다. 그리고 이를 통해 코드가 한층 더 안전하고 캡슐화 되며 보다 균형잡기 코드를 작성할 수 있게 해준다.

Class를 생성하기 위해선 class 키워드와 함께 class이름, 그리고 그 뒤에 중괄호를 추가해주라.

이제 우리는 new keyword를 이용해 해당 클래스의 methods 와 properties를 사용할 수 있게 된다.

다른 class를 상속하고자 한다면 extends keyword를 통해 가능하다. extends와 상속하고자 하는 class명을 뒤에 추가해주면 된다.