자바스크립트 최신문법 ES6, ES11

spread

전달인자(argument)로 배열을 모두 펼쳐서 요소들로 전달할 때 사용

• 기존 변수를 사용한다
• 기존 배열을 변경하지 않는다 immutable
• 얕은 복사 수행

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);    // 전달인자 0, 1, 2 전달

• 배열 복사해서 새로운 배열 생성

const arr = ["a", "b", "c", "d"];
const arr2 = [...arr];   // 값만 복사, 주소는 다름 = 얕은 복사
console.log(arr === arr2); // false , 서로 주소가 다르기 때문

• 배열끼리 연결한 새로운 배열 생성

const arr1 = ["a", "b"];
const arr2 = ["c", "d"];
const array = [...arr1, ...arr2]; // ["a", "b", "c", "d"]

rest

• 객체, 배열, 함수의 매개변수에서 사용 가능
• 객체,배열,매개변수에서 특정 값을 뽑고 싶을 때 사용

// 배열
const numbers = [0, 1, 2, 3, 4, 5, 6];
const [one, ...rest] = numbers;
console.log(one, rest); // 0, [1, 2, 3, 4, 5, 6]

// 객체
const student = {
  name: '김나나',
  age: 12,
  likeColor: 'purple'
};
const { age, ...rest } = purpleCuteSlime;
console.log(age); // 12
console.log(rest); //{ name: '김나나', likeColor: 'purple'}

// 매개변수
  function sum(...theArgs) {   // 매개변수
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}
console.log(sum(1, 2, 3)); //  6
}

주의할 점

밑처럼하면 에러 발생함. rest는 나머지를 의미하므로 마지막에 위치해야함

const numbers = [0, 1, 2, 3, 4, 5, 6];
const [..rest, last] = numbers; // Unexpected Token ...

Destructing assignment 구조분해할당

spread 문법을 사용하여 값을 변수에 각각 할당하는 과정

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

// object
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

// ex2
const account = {
  userName: 'Ariana';
  createdAt: '2002-12-10';
};
const { userName, createdAt } = account;
// 이름 변경이 가능하다
const { userName: personName, createdAt: whatever } = account;

Shorthand property names

const mun = {
  name: 'moon';
  age: '20';
};
const name = 'moon';
const age = '20';

const mun2 = {
  name,      // name : name, 축약한 표현
  age,      // age : age, 축약한 표현
}

Default parameters

추가된 방식

인자 다음에 초기값 지정 가능

function printMessage(message = 'default message'){ // 초기값 지정
  console.log(message);
}
printMessage('hi hello'); // 'hi hello'
printMessage(); // 'default message'

오래된 방식

function printMessage(message){
  if(message == null){
    message = 'default message';
  }
  console.log(message);
}
printMessage('hi hello'); // 'hi hello'
printMessage(); // 'default message'

Ternary Operator ? true : false

• 삼항연산자
  조건 ? ture값 : false값

const component = isLikes ? '❤️' : '💔";

Template Literals

• (백틱) ${변수명} 문자열 (백틱)

const name = 'haha';
const program = 'runningman';

console.log(`${name} is ${program} member.`);

Optional?.chainning?.isWhat

console.log(person.job?.manager?.name);
// person에 job이 있으면? .manager 있으면 ? name 출력

널 병합 연산자 Nullish Coalescing Operator

좌항이 null 혹은 undefined이면, 우항 반환 / 아니면, 좌항 반환
좌항 ?? 우항

• 변수에 기본값 할당하는 용도

널 병합 연산자 도입 전 - ||` OR 연산자 문제점

• 기존에 || OR 연산자로 조건 사용시 의도와 다른 버그 발생함
  0이나 ''도 기본값으로 설정하고 싶은데 설정이 안됨

const str = '' || 'default';
console.log(str); // "default"

• 좌항이 falsy값 (false, '', 0, null, undefined)이면 우항 반환하기 때문.

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

const num = null;
const message = num || 'Guest';
console.log(message); // Guest

// 이름에 '', 숫자에 0 지정하고 싶다
// 하지만, false 리턴함으로 의도와 다른 값을 리턴해버림!!
const name = '';
const message = name || 'Guest';
console.log(message); // Guest  name 을 빈문자열로 두고 싶은데 false가 리턴

const num = 0;
const message = num || 'undefined';
console.log(message); // undefined

추가된 문법 ??

변수에 값이 있는지 없는지로 판단한다

const name = ' ';
const userName = name ?? 'Guest'; // name에 값이 없다면 Guest 출력
console.log(userName);;  // 
const num = 0;
const message = num ?? 'undefined';
console.log(message);  // 0
// 좌항이 null or undefined면 우항 출력
const str = null ?? 'default';
console.log(str); // "default"

단축 평가 논리 계산법 short-circuit evaluation

A && B

A가 truthy값이면 B리턴
A가 falsy값이면 A리턴

• 특정 값(A)이 truthy할 때, 값(B)을 조회하려고 사용

A || B

A가 truthy값이면 A리턴
A가 falsy값이면 B리턴

• 특정 값(A)이 falsy할때, 지정할 값(B) 사용

// &&
true && 'hello' // 'hello'
false && 'hello' // false
// ||
true || 'hello' // true
false || 'hello' // 'hello'

console.log(true && 'hello'); // hello
console.log(false && 'hello'); // false
console.log('hello' && 'bye'); // bye
console.log(null && 'hello'); // null
console.log(undefined && 'hello'); // undefined
console.log('' && 'hello'); // ''
console.log(0 && 'hello'); // 0
console.log(1 && 'hello'); // hello
console.log(1 && 1); // 1

참조

전개 구문
Rest 파라미터

https://soopdop.github.io/2020/12/02/rest-and-spread-in-javascript/

벨로퍼트와 함께하는 모던 자바스크립트 - 단축 평가 (short-circuit evaluation) 논리 계산법