[ES6] 자바스크립트 ES6 - 2. 추가된 자주 쓰는 문법

 

* includes / String Literal(문자열 리터럴) / Arrow function(화살표 함수)

* es6에서 추가된 기능 중 자주 쓰던 것이다.

 

 

1. includes

* 배열에 특정값이 있는지 boolean으로 리턴하는 함수이다.

const colorArr = ['red','yellow','blue','green'];

colorArr.includes('blue');   // true

 

 

* 기존 es5의 이런 코드를 줄이는데도 좋다.

* 길이가 확실히 줄어들고, 동일한 if 절이 자주 사용될 때 유용했다. 속도는 건수가 많지 않아 비슷했다.

// es5
if ( '10'.equals(statCd) || '20'.equals(statCd) || '30'.equals(statCd) || '40'.equals(statCd) )

// includes 사용
const statArr = ['10','20','30','40'];
if ( statArr.includes( statCd ) )

 

 

2. String Literal ( 문자열 리터럴 )

* 이름은 거창하지만 문자열 값이다.

* 기존 +로 한땀한땀 붙이던 스트링을 ``(숫자키 1 옆에 있는 물결)로 쉽게 붙일 수 있다.

let str1 = "똘아재";
let str2 = "중독";

// AS-IS
alert( str1 + "는 게임을 " + str2 + "수준으로 좋아합니다." );

// es6
alert( `${str1}는 게임을 ${str2}수준으로 좋아합니다.` );

 

* 길이는 별로 안 짧아지는거 같아 보여서 막상 써보면 5만배 편하다.

  더이상 여기서 띄고 저기서 띄고 띄어쓰기 신경 안 쓰고 보이는 대로 쓰면 된다.

 

 

반응형

 

 

3. Arrow Function ( 화살표 함수 )

* 이게 처음봤을때 좀 난감했다. 알고 보면 그냥 기존의 함수표현식과 비슷하다.

 

// 예제 1
var check  = function( a ) { '생략' return abc }
// 매개변수 하나일 때 괄호 생략 가능
let check  = a => { '생략' return abc } 

// 예제 2
var check2 = function( a, b ) { return a + b; }
// 표현식이 하나이면 중괄호와 return 생략 가능
let check2 = (a, b) => a + b;

 

* 화살표 함수에는 this가 없으니 this쓸 때는 일반 함수를 사용한다.