ES6

ES6

Shorthand Property Names

const person1 = {
  name: 'boseong',
  age: 28
};

const name = 'boseong';
const age = 28;

const person2 ={ // name: name 이렇게 반복해서 해야하는 불편함이 있다.
  name: name,
  age: age
}

const person2 ={ // 간단하게 줄여서 작성이 가능해졌다.
  name,
  age
};

Destructuring Assignment

const student = {
  name: 'Bill';
  level: junoir,
};
const name = student.name;
const level = student.level; // 구조를 분해해서 할당하는 방법

const {name, level} = student;
// 이렇게 name, level에 값을 할당할 수 있다!! 
// easier!!👊

Spread Syntax

const obj1 = {key: 'key1'};
const obj2 = {key: 'key2'};

const array = [obj1, obj2]; 

const arrayCopy = [...array];
// 변수 array 안에 있는 배열이 그대로 나열된다.
const arrayCopy2 <= [...array, {key: 'key3'}];
// 위와 같은 방법으로 배열을 추가 할 수 있다. 
// 물론 객체에서도 동일한 방법으로 추가 할 수 있다.^^

⚠️여기에서 주의할 점은 array 와 arrayCopy, arrayCopy2는 주소값만 가져오기 때문에 obj1의 값을 바꿔주게 되면 나머지 전부 바뀌게 된다!!

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const array = [...arr1, ...arr2];
// concat 하는 기능도 가지고 있다.
// console.log(array) 해보면 [1, 2, 3, 4, 5, 6]이 나온다!!

const dog = {animal: 'dog'};
const cat = {animal: 'cat'};
const newAnimal = {...dog, ...cat};
// 객체를 concat 할 경우 키 값이 같을 경우 그 위에 덮어 씌운다.
// 그래서 console.log(newAnimal)을 해보면 {animal: 'cat'}이 나온다!!

Default Parameters

function printMessage(message){
  console.log(message);
}
printMessage('hello') // hello가 나온다!
printMessage() // undefined가 나온다!! 

//여기에서 undefined말고 default parameter를 지정할 수 있다.😯

function printMessage(message='default message'){
  console.log(message);
}
printMessage('hello') // hello가 나온다.
printMessage() // default message가 나오게 된다.

Ternary Operator

let isTrue = true;
let component;
if (isTrue) {
  component = 'true';
} else {
  component = 'false';
}
// 위 조건문을 삼항 조건 연산자를 사용하면 간단해 진다!!
const component = isTrue ? 'true' : 'false';

Template Literals

let a = 'iphone';
console.log("I love " + a); //``(백틱)을 사용하면 심플해진다. 
console.log(`I love ${a}`); //👍