JavaScript ES6 추가 문법

1. 삼항 연산자

   조건 ? 참 일 때 : 거짓일 때

const data = [1,2];

if(data.lengh ===0) {
	console.log('empty');
    }else{
    console.log('full');
    
    
data.lenght === 0 ? console.log('empty') : console.log('full');

2. 함수의 기본인자(파라미터) 값 설정

   ES6에서 나온 문법으로, 인자 값을 넣지 않을 시, 디폴트로 인자에 넣어지는 값을 설정할 수 있음

function printData(name='Heo') {
	console.log(name);
    }

printData();  //Heo

3. 구조 분해 할당(비구조화 할당) 문법

   이름만 보면 이해하기 어려운 구조 분해 할당은 배열이나 객체의 속성을 해체해서, 값을 개별 변수에 대입 할 수 있게 하는 문법

const data = {
	name : 'Heo',
    age : 30,
    hobby : 'coding'
};

let {name, age} = data;
console.log(name,age); //Heo 30

let {name:myName, age:myAge} = data;
console.log(myName,myAge); //Heo 30

동일할 프로퍼티명을 써줘야, 해당 프로퍼티에 맞는 값이 대입 됨.

프로퍼티명과 다른 변수명을 사용하고자 하는 경우, {대입할 프로퍼티명:다른 변수명} 의 형태로 써줘야 함

 

4. 배열 분해 할당

   배열의 각 아이템을 별도 변수에 할당하는 문법

let data = [1,2,3];

const [item1, item2, item3] = data;

console.log(item1, item2, item3); // 1 2 3

앞의 배열부터 차례로 가져옴.

앞에 두개는 건너뛰고 3만 갖고오고 싶다면 [ , , item3] 이렇게 하면 됨.

배열의 갯수를 넘어가면 undefined로 나온다. 

 

5. Rest 파라미터

   Rest 파라미터는 함수 인자 선언 앞에 ...을 붙여서 정의하는 문법

   해당 함수에 전달된 인자 리스트는 하나의 배열로 해당 변수에 넣어짐

function getData(...rest){
	console.log(rest);
    }
    
getData(1,2,3);		// [1,2,3]

인자의 수만큼 순차적으로 인자값이 대입되고, 나머지만 배열로 대입

...변수는 함수의 맨 마지막에 나와야 함. (...rest,a,b)의 형태는 안됨.

 

6. Spread파라미터

   iterable한 변수 앞에 붙여서, 해당 변수의 데이터를 개별 아이템으로 분리함.

  (iterable이란 반복 가능한 객체를 의미하며, 배열,문자열 등을 의미함.)

const data = [1,2,3];

console.log(data);     ///[1,2,3]
console.log(...data);  ///1 2 3
console.log(data[0],data[1],data[2]);  ///1 2 3

배열에 있는 아이템 각각이 분리되는 것임.

function func(a,b,c,d){
	console.log(b,c);
    }
const data = [1,2,3,4];

func(...data);   // 2 3