자바스크립트 ES6(ECMAScript 6) 정리

자바스크립트 ES6(ECMAScript 6) 정리해봤습니다. ECMAScript는 자바스크립트 프로그래밍 언어를 정의하는 국제 표준의 이름입니다. 

템플릿 문자열(리터럴)

문자열 안에 변수와 연산식을 혼합하여 사용할 수 있습니다.

let id = '12345';
console.log(`id값은 ${id}입니다.`); //결과: id값은 12345입니다.

`${}`

백틱(`)으로 감싸고 문자열은 그대로 적고 ${연산식}으로 작성합니다.

화살표 함수

기존의 함수보다 구문이 짧고 자신의 this, arguments(함수에 전달된 인수에 대항하는 배열 형태의 객체), super 또는 new.target을 바인딩하지 않습니다.

(매개변수) => {함수 기능}

let arr = ['css','html','javascript','es6'];
console.log(arr.map(data => data.length)) // [3, 4, 10, 3]

스코프(변수 선언방식)

기존에는 var를 사용하여 변수를 선언했지만 ES6은 let과 const로 변수를 선언할 수 있습니다.

const는 변경될 수 없는 변수에 대해서 선언할 수 있으며 재선언 및 재할당이 불가능합니다.

let은 변경될 수 있는 변수에 대해서 선언할 수 있으며 재선언 및 재할당이 가능합니다.

let a = 10, b = 20;
a = 40;
const c = a+b;
console.log(c); //결과: 60

default parameter

함수 파라미터의 기본값을 설정할 수 있습니다. undefined 혹은 누락된 파라미터에 대해서 그 값을 출력합니다.

const datas = (data1=1,data2=2,data3=3,data4=4,data5=5) =>{
 console.log(data1,data2,data3,data4,data5);
}
datas(1,null,undefined,4); //결과: 1, null, 3,4,5

같은 문자열 확인하는 메소드

startsWith(), endsWith(): 앞, 뒤로 일치하는 문자열이 있는 여부를 판단합니다.

includes(): 문자열이 포함되어 있는지 여부를 판단합니다.

const str = 'HelloWorld JavaScript';
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('JavaScript')); // true
console.log(str.includes('Hello')); // true

 

 

배열 출력

기존의 for in은 자기 자신이 가지고 있지 않은 상위 값들도 출력되는 문제가 있어 for of를 이용하여 문제를 해결할 수 있습니다.

let arrData = [1,2,3,'hello','javascript'];
for(let i in arrData){
 console.log(i); // 0,1,2,3,4
}
for(let i of arrData){
 console.log(i) // 1,2,3,hello,javascript
}

for in은 객체에서 key에 해당되는 것만 반복하고 for of는 iterator(값을 차례대로 꺼낼 수 있는 객체) 데이터에 대해서 반복합니다.

rest parameter(전개 연산자)

매개변수를 배열로 기존의 arguments를 대체해 함수에 전달된 인수들의 목록을 배열로 전달받는 문법입니다.

...매개변수

const rest = (...rest) =>{
 console.log(...rest);
}
rest(1,null,undefined,4); // 1 null undefined 4

spread operator(펼침 연산자)

iterable(반복 가능)한 데이터를 펼칠 수 있습니다. 기존의 배열은 그대로 두고 새로운 값을 복사할 수 있는 방법으로 배열을 합치거나 펼쳐지는 방식을 구현할 때 사용합니다. concat, push 등 추가하는 함수를 대신해서 사용합니다.

const arr1 = ['hello', 'world'];
const arr2 = ['Node.js', 'JavaScript'];
const arr3 = arr1.concat('add').concat(arr2);
console.log(arr3); //[ 'hello', 'world', 'add', 'Node.js', 'JavaScript' ]
const arr4 = [...arr1, 'add', ...arr2];
console.log(arr4); //[ 'hello', 'world', 'add', 'Node.js', 'JavaScript' ]

객체 간략화

객체에서 key와 value에 할당된 변수명이 동일한 경우 하나로 작성할 수 있습니다.

let aa = 'a', bb = 'b';
let obj = {
 aa,bb,
 getName: () =>{return this.aa}
}
console.log(obj); //{ aa: 'a', bb: 'b', getName: [Function] }

구조 분해(Destructuring) 할당

객체나 배열을 변수로 분해할 수 있도록 해주는 문법입니다.

const so = [1,2,3,4,5];
let [one, two, ...rests] = so;
console.log(one, two, rests); //1 2 [3,4,5]

const dog = {
 name : '단추',
 age : 1,
 color : 'white'
}
const { name,age,color } = dog
console.log(name,age,color) //단추 1 white

 

위 예제 코드는 이곳에서 실행할 수 있습니다.