ES6 문법

• 2015년에 발표된 JavaScript 버전 중 하나.
• 이전 버전인 ES5에서 새로운 문법과 기능을 도입해 효율성을 개선했다.

1. let, const

• var를 대체할 수 있다.

2. 화살표 함수 (Arrow Function)

function add(){ }

var add = function (){}

var add = (x) => {
return 1;
};

var add = (x) => 1

3. 삼항 연산자 (ternary operator)

condition ? true 인 경우 : false인 경우;

console.log(true ? "참" : "거짓"); // 참
console.log(false ? "참" : "거짓"); // 거짓
console.log(1 === 1 ? "참" : "거짓"); // 참
console.log(1 !== 1 ? "참" : "거짓"); // 거짓

4. 구조 분해 할당 : (destructuring)
(de + structure + ing) de = not, structure = 구조

• 객체 안에 있는 속성들, 즉 오른쪽 구조를 분해해서 각각 name, age에 할당해준다
  

(1) 배열의 경우

let [value1, value2] = [1, "new"];
console.log("1", value1); //1
console.log("2", value2); //new
let arr = ["value1", "value2", "value3"];

let [a, b, c, d = 4] = arr; //값이 안들어올 것 같을 때는 초기값 지정 가능 

console.log(a); //value1
console.log(b); //value2
console.log(c); //value3
console.log(d); // 4

(2) 객체의 경우

let user = { name: "nbc", age: 30 };

// 구조분해할당
let { name, age } = {
  name: "nbc",
  age: 30,
};

console.log(name, age); // nbc 30

let {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user; // 초기값 정해주기 가능
console.log(birthDay) // today

// 새로운 이름으로 할당
let user = { name: "nbc", age: 30 };

let { name: newName, age: newAge } = user; 
//name을 빼서 가져오긴 할건데 그걸 newName에 넣겠다.

console.log(newName, newAge); //nbc 30
console.log(name, age); // ReferenceError: name is not defined (에러 발생)

//없는 내용을 선언하면 undefined가 뜬다
let user = { name: "nbc", age: 30 };
let { name, age, birthDay } = user;
console.log(birthDay); // undefined

let user = { name: "nbc", age: 30 };
let { name, age, birthDay = "today" } = user; // 초기값 정해주기 가능
console.log(birthDay); // today

5. 단축 속성명 (property shorthand)

• 객체의 key와 value 값이 같다면, 생략 가능

const name = "nbc";
const age = "30";

// key - value
const obj = {name : name, age: newAge };
const obj1 = { name, 	age: newAge }

6. 전개 구문 (Spread Operator)

• 배열이나 객체를 전개. 구조분해할당과 함께 가장 많이 사용되는 ES6 문법 중 하나

//배열
let arr = [1, 2, 3];

let newArr = [...arr, 4];
console.log(newArr); // [1,2,3,4]

//객체
let user = { name: "nbc", age: 30 };
let user2 = { ...user };

console.log(user); // { name: 'nbc', age: 30 }
console.log(user2); // { name: 'nbc', age: 30 }

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

function exampleFunc(a, b, c, ...args) {
  console.log(a, b, c);
  console.log(args);
}

exampleFunc(1, 2, 3, 4, 5, 6, 7);
// 1 2 3
// [ 4, 5, 6, 7 ]

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

const testValue = "안녕하세요";
console.log(`Hello, World ${testValue}`);
console.log(`Hello, 
      My name
            is  JavaScript`); //멀티라인ㅇ => 편의성 증가