ES6 문법 [ Javascript ] [ JavaScript 문법 종합반 2주차 ]

// ES6

// 2015년도 이전 var
// 1 let(변수), const(상수)

// 2 arrow function

// 3 구조분해할당 destructure
// 3-1 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // new

let arr = ["value1", "value2", "value3"];
let [a, b, c, d = 1] = arr;
console.log(a); // value1
console.log(b); // value2
console.log(c); // value3
console.log(d); // 초기값을 세팅 안하면 undefined 세팅하면 초기값

// 4 객체인 경우
// let user = {
//     name: 'nbc',
//     age:30,
// }

// let { name, age } = {
//   name: "nbc",
//   age: 30,
// };
// console.log(name); // nbc
// console.log(age); // 30

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

let { name: newName, age: newAge } = user;
console.log(newName); // nbc
console.log(newAge); // 30

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

// 단축 속성명 : property shorthand ======================
const name1 = "nbc";
const age1 = 30;

// key-value 가 똑같으면 생략할 수 있다.
const obj = {
  name1,
  age1,
};

// 전개 구문 = spread operator
// destructuring 과 함께 가장 많이 사용되는 es6 문법중 하나

let arr1 = [1, 2, 3];
console.log(arr1); // [ 1, 2, 3 ]
console.log(...arr1); // 1 2 3

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

// 객체

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

let user2 = { ...user };

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

// 나머지 매개변수 (rest parameter)
function exampleFunc(a, b, c, ...args) {
  console.log(a, b, c); // 1 2 3
  console.log(args); // [ 4, 5, 6, 7 ]
}

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

// 템플릿 리터럴 (Template Literal)
const testValue = "안녕!";
console.log(`Hello World ${3 + 3}, ${testValue}`); // Hello World 6, 안녕!
console.log(`
    Hello
            hihi
            멀티라인 개꿀!
`);

---

대부분 자주 많이 쓰이기 때문에 숙지해둘 필요가 있다.