다시보는 자바스크립트 - 08

Javascript 헷갈렸던 내용, 새로 알게된 내용 정리
→ 자바스크립트 최신문법

자바스크립트 최신문법

---

shorthan property names

const name = 'jay'
const local = 'seoul'

const jay = {
  name : name,
  local : local
};

↓ 이렇게 key와 value가 같은 경우 아래처럼 표현할 수 있다 ↓ 

const jay = {
  name,
  local
};

Destructuring assignment

const student = {
  name: 'Anna',
  level: 1,
}

{
  const name = student.name;
  const level = student.level;
}

/* 위에서 object의 value값 반복을 피하기 위한 방법 
		(Destructuring assignment)*/
{
  const {name, level} = student;
}

/* 위의 선언방식은 변수명을 object의 value값과 동일하게 해야한다는 한계점.
		이때, 다른 변수명으로 표현하고 싶을 때 사용할 수 있는 방법 */
{
  const { name: studentName, level: studentLevel } = student;
}

############################################################
/* 배열도 가능 */

const animals = ['강아지','고양이'];

{
  const first = animals[0];
  const second = animals[1];
}

/* Destructuring assignment */
{
  const [first, second] = animals;
}

Spread Syntax

const obj1 = {key:'key1'};
const obj1 = {key:'key2'};
const array = [obj1, obj2];

//위의 array 변수를 '얕은복사'하기 위한 간단한 방법
const arrayCopy1 = [...array];
//위에서 얕은복사와 동시에 마지막에 값을 추가하고 싶을 때는 아래처럼 표현 가능
const arrayCopy2 = [...array, {key:'key3'}];

//다시말하지만 이것은 얕은복사이기 때문에 obj1의 특정 값을 변경하면 나머지 arrayCopy1, 2안에서 보여지는 값도 변경됨


//배열 뿐만 아니라 object도 복사 가능
const obj3 = {...obj1};

//응용하여 object 합치기 가능
const obj4 = {...obj1, ...obj2}; 
//이 때 같은 key가 있다면 뒤에있는 값으로 덮어쓰기가 된다

//이것을 활용하여 배열 합치기도 가능
const fruits1 = ['복숭아', '딸기'];
const fruits2 = ['바나나', '키위'];
const fruits = [...fruits1, ...fruits2];
console.log(fruits); // ['복숭아', '딸기', '바나나', '키위'];

Default Parameter

function printMessage(message = 'default message'){
	console.log(message);
}

printMessage('hello'); //hello
printMessage(); //default message

Ternary Operator

const isCat = true;

// Bad
let component;
if (isCat) {
  component = '고양이';
} else {
  component = '강아지';
}

// Good
const component = isCat ? '고양이' : '강아지';

Optional Chaining

console.log(person.job?.manager?.name);

Nullish Coalescing Operator (ES11)

const name = 'jay'
const userName = name || 'Guest';
console.log(userName); // jay

const name = null;
const userName = name || 'Guest';
console.log(userName); // Guest

const name = '';
const userName = name || 'Guest';
console.log(userName); // Guest

문제는 이 경우 name에 ''(공백)이나 숫자 0이 들어가도록 의도하고 싶어도
뒤에 선언한 Guest로 할당 된다는 점을 유의해야한다

/* Nullish Coalescing Operator */
이 때, '공백'이나 숫자 0도 '사용자 임의의 값'으로 간주하고 싶을 때는 "??" 사용
const name = '';
const userName = name ?? 'Guest';
console.log(userName); //

const name = 0;
const userName = name ?? 'Guest';
console.log(userName); // 0