JS_추가된 문법

//Shorthand property names
{
const ellie1 = {
name: "Ellie",
age: 18,
};

const name = "Ellie";
const age = "18";

//old way
const ellie2 = {
name: name,
age: age,
};

//new way
const ellie3 = {
name,
age,
};

console.log(ellie1, ellie2, ellie3);
}

/////////////////////////////////////////////////////////////////

//Destructuring Assignment
{
//object 오브젝트
const student = {
name: "Anna",
level: 1,
};

//old way
const name = student.name;
const level = student.level;
console.log(name, level);

//new way
{
const { name, level } = student;
console.log(name, level);

// Make custom
const { name: studentName, level: studentLevel } = student;
console.log(studentName, studentLevel);

}

//Array 배열
const animals = ["dog", "cat"];

//old way
{
const first = animals[0];
const second = animals[1];
console.log(first, second);
}

//new way
{
const [first, second] = animals;
console.log(first, second);
}
}

///////////////////////////////////////////////////////////////////////////

//Spread Syntax

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

//array copy old way
const array = [obj1, obj2];
//혹은
//map 이나 , forEach 를 쓰는 방법이 있고,

//array copy new way 이게 스프레드 신텍스임.
const arrayCopy = [...array];
console.log(array, arrayCopy);

//새로 추가하고자하는 아이템이 있다면, 이렇게 뒤에 추가해주면 되고,
const arrayCopy2 = [...array, { key: "key" }];
obj1.key = "newkey"; // 참고로 그냥 복사는 주소값(해당 오브젝트가 가르키고 있는 참조값)이 복사되는거여서, 같은 값을 공유하고 있다면, 값이 바뀌면 다같이 바뀌게되는것임.
console.log(array, arrayCopy, arrayCopy2);

// object copy 오브젝트 복사
const obj3 = { ...obj1 };
console.log(obj3);

// array concatenation 배열 한꺼번에 다 가지고 오기
const fruits1 = ["peach", "strawbrry"];
const fruits2 = ["banana", "kywee"];
const fruits = [...fruits1, ...fruits2];
console.log(fruits);

//object merge 객체 병합
const dog1 = { dog1: "개1" };
const dog2 = { dog2: "개2" };
const dog = { ...dog1, ...dog2 };
console.log(dog); //이렇게 하면 가장 마지막의 아이가 앞에 아이를 덮어 씌움
}

////////////////////////////////////////////////

//Default parameters
{
function printMessage(message = "default message") {
if (message == null) {
message = "default message";
}
console.log(message);
}

printMessage("hello"); // hello 나옴 근데 아무 인자도 전달하지 않으면 undefined 가 뜬다.

//그런데
//function printMessage(message = 'default message') {
// 이렇게 하면 인자 초기값을 미리 설정해 주는 거임

////////////////////////////////

//Ternary Operator
{
const isCat = true;
//bad way
{
let component;
if (isCat) {
component = "cat";
} else {
component = "dog";
}
console.log(component);
}

{
  //good way
  const component = isCat ? "cat" : "dog";
  console.log(component);
  //or
  console.log(isCat ? "cat" : "dog");
}

}
}

////////////////////////////////////

//Template Literals

{
const weather = "sunny";
const temparature = "16C";

//bad way
console.log(
"Today weather is" + weather + "and temparature is" + temparature
);

//good way
console.log(Today weather is ${weather} and temparature is ${temparature} );
}

////////////////////////////////////

//ES 11

//////////////

//Optional Chaining

{
const person1 = {
name: "Ellie",
job: {
title: "S/W Enginner",
manager: {
name: "Bob",
},
},
};
const person2 = {
name: "Bob",
};

//Bad way1
{
function printManager(person) {
console.log(person.job.manager.name);
}
printManager(person1);
printManager(person2); //manager 없기 때문에, 에러남
}

//Bad way2
{
function printManager(person) {
console.log(
person.job
? person.job.manager
? person.job.manager.name
: undefined
: undefined
);
}
printManager(person1);
printManager(person2);
}

//Bad way3
function printManager(person) {
console.log(person.job && person.job.manager && person.job.manager.name);
}
printManager(person1);
printManager(person2);

//good way
function printManager(person) {
console.log(person.job?.manager?.name);
}
printManager(person1);
printManager(person2);
}

/////////////////////////////////

//Nullish Coalescing Operator (ES11)
{
//Logical OR operator
//false: false, '', 0, null, underfined
{
const name = "Ellie";
const userName = name || "Guest";
console.log(unserName); //Ellie
}

//Bad way
{
//const name = null;
const name = "";
const userName = name || "Guest";
console.log(unserName); //Guest //이름이 비워져도 게스트가 출력됨

const num = 0;
const message = num || "undefined";
console.log(message); //undefined // 0이 할당되도 언디가출력됨

}

//good way
{
const name = "";
const userName = name ?? "Guest";
console.log(unserName); //왼쪽 출력

const num = 0;
const message = num || "undefined";
console.log(message); // 0이 출력됨

}
}