자주 쓰는 ES6 문법 정리

1. 기본적인 ES6 Desstructing assingnment 구조 분해 할당

[a, b] = [10, 20] // [10, 20]
[a, b] = [b, a]; // 변수 swap. [20, 10]

[a,b, ...rest] = [10, 20, 30, 40, 50]
console.log(rest) // [30, 40, 50]

const person = {
    name: 'Ellery Moon',
    familyName: 'Moon',
    givenName: 'Ellery'
    company: 'goodgood company',
    address: 'Seoul',
}

const { familyName, givenName } = person; // 객체에서 필요한 Key-value 엔티티만 꺼내 씀

// 객체 생성시 키 생략하기
const name = 'Ellery moon';
const company = 'goodgood company';
const person = { // 객체를 생성할 때 프로퍼티 키를 변수 이름으로 생략할 수 있음
  name,
  company
}

1. 배열 loop를 함수형으로 작성

let sum = 0;
for(int i = 5; i < 10; ++i) {
	sum += i;
}

const sum = Array.from(new Array(5), (_, k) => k + 5).reduce((acc, cur) => acc + cur, 0);

1. 중복 제거 Set, spread syntax (...)

const names = ['Lee', 'Kim', 'Park', 'Lee', 'Kim'];
const uniqueNamesWithArrayFrom = Array.from(new Set(names);
const uniqNamesWithSpread = [...new Set(names)];

1. Spread syntax(...)를 이용한 객체 병합

const person = {
	name: 'Ellery Moon',
	familyName: 'Moon',
	givenName: 'Ellery'
}

const home = {
    name: 'pangyo',
    address: 'Seoul'
};

const MCM = { ...person, ...home };
/ {
//   address: 'Seoul'
//   familyName: 'Moon'
//   givenName: “Ellery”
//   name: 'pangyo' // **중첩되는 키는 마지막에 대입된 값으로 정해진다.**
// }

1. &&, || 활용

const name = participantName || 'Guest'; // ||: default value 넣어주고 싶을 때 사용
// participantName이 0, undefined, 빈 문자열, null일 경우 'Guest'로 할당

flag && func(); /// && flag가 true일 경우에만 실행

const getCompany = (address) => { // 객체 병합에도 응용할 수 있음
  return {
    name: 'pangyo',
    ...address && { address: 'Seoul' }
  }};
console.log(getCompany(false)); // { name: 'pangyo' }
console.log(getCompany(true)); // { name: 'pangyo', address: 'Seoul'}

1. 비구조화 할당 사용하기

const makeContract = ({ name1, name2, contractName }) => { // 함수에 객체를 넘길 경우 필요한 것만 꺼내 씀
  return {
    name1,
		name2,
    contractName
  }
};
const Contract = makeContract({ name1: 'Ellery', name2: 'goodgood company', contractName: 'stock-option' });

1. 동적 속성

const nameKey = 'name';
const emailKey = 'email';
const person = {
  [nameKey]: 'Ellery',
  [emailKey]: '[e-mail]'
};

1. !! 연산자: 0, null, '', undefined, NaN 값을 검사할 수 있음

function check(variable) {
  if (!!variable) { // 0, null, '', undefined, NaN이 들어오면 여길 통과할 수 없음
    console.log(variable);
  } else {
    console.error('잘못된 값');
  }
}

구조 분해 할당 - JavaScript | MDNMDN Web Docs

Array.from() - JavaScript | MDNMDN Web Docs

Spread syntax (...) - JavaScript | MDNMDN Web Docs