자바스크립트 최신 문법 정리

• shorthand property names

const name = "Dohyun";
const age = "25";

const Me = {
  name : name,
  age : age,
};

=

const name = "Dohyun";
const age = "25";

const Me = {
  name,
  age,
};

• dostructing assignment

const Me = {
  name: Dohyun
  age: 25
};

const {name, age} = Me;

key 이름 변경시,

const {name : myName, age : myAge} = Me;

• spread syntax

const obj1 = {key : "value1"};
const obj2 = {key : "value2"};
const array1 = [obj1, obj2];

다른 객체에서 같은 key값으로 가져오면 뒤에 있던 것으로 할당됨.

복사

const array_2 = [...array];

객체의 경우 : const obj_2 = {...obj};

• default parameter

function printMsg(msg = "default message") {
  console.log(msg);
}

printMsg("hello");

printMsg();

msg의 기본값을 설정해줬으므로 따로 인자를 넣지 않아도 자동으로 할당된다.

• ternary operator

const isCat = true;
let component;

if (isCat) {
  component = "cat";
} else {
  component = "dog";
}

const component = isCat ? "cat" : "dog";

• template literal

let weather = sunny;

console.log("Todays weather is ${weather}".)

• optional chaning

function printManager1(person) {
  console.log(person.job && person.job.professor && person.job.professor.name);
}

function printManager2(person) {
  console.log(person.job?.professor?.name);
}

물음표 함수

• nullish coalescing operator

const name = "";
const userName = name ?? "guest";
console.log(userName); 

name 값이 있다면 name을, 없다면 "guest"를 출력하라