[JS] ES6 문법

ES6

es6는 2015년도 공식 발표되었으며 JS의 개발 기준이 되었다. 이전 버전에 비하여 훨씬 강력하고 표현력이 풍부하기 때문이다.

도입된 이후 변경(추가)사항

1. 변수

• 2015년 이전
  var을 사용하여 변수를 선언
• ES6 도입
  let(변수), const(상수)

2. 화살표 함수 (allow function)

let func1 = (x)=>{
	return x;
};

let func2 = x => x;

3. 삼항 연산자

(조건문) ? true 일 때 실행문 : false 일 때 실행문

4. 구조분해할당 (destructuring)

• 배열의 경우

let [v1, v2] = ["say","hello"];
console.log(v1); // say
console.log(v2); // hello

let arr = [1,2,3]
let [a,b,c,d] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // undefined

• 객체의 경우

let {a, b} = {a:1, b:2};
console.log(a); // 1
console.log(b); // 2

5. 단축속성

const name = "카타리나";
const gender = "여성";

const human = {
	name : name, // 값에 변수값을 넣을 수 있다
	gender : gender
};

const human2 = { name, gender };
// 키 이름과 변수명이 같다면 단축해서 쓸 수 있다.
console.log(human);
// { name: "카타리나", gender:"여성" } 출력 
console.log(human2);
// { name: "카타리나", gender:"여성" } 출력 

6. 전개구문 ( spread operator )

let human { name:"카타리나", gender:"여성" }
let human2 = {...human}
human2.name = "아리"

console.log(human2); // { name:"아리", gender:"여성" }

배열이나 객체의 괄호를 풀어헤치는 기능이라고 생각하면 된다.

7. 나머지 매개변수 ( rest parameter )

function sum (a, b, ...args){
	let c=0;
    args.forEach( num => c+=num );
    console.log(a+b+c);
}
sum(1,2); // 3
sum(1,2,3); // 6
sum(1,2,3,4,5); // 15

8. 템플릿 리터럴 (Template literals)

var a = "hello"
var b = `${a} guys!`;
var c = `hi
			bro`;

console.log(a); // hello
console.log(b); // hello guys!
console.log(c); /* hi
                      bro*/

` <- 백틱 이라고 부르고 문자열을 생성할 때 따옴표나 쌍따옴표가 아닌 백틱으로 감싸면
여러줄 또는 js 변수를 넣을 수 있는 상태가 된다.