[SEB_FE_45] 2023.04.26 / ES6 주요 문법

📖 [강의 내용 및 개념 정리]
목차

• spread/rest 문법
• 구조분해할당
• 화살표 함수

spread/rest 문법

spread 문법

const arr = [1, 2, 3, 4, 5];
// 1. 불변성을 유지한 채 배열 복사하기
const copiedArr = [...arr];

// 2. 배열 합치기
const concatedArr = [...arr, copiedArr];

// 3. 여러 숫자를 파라미터로 받는 함수 파라미터에 담기
Math.max(...copiedArr); // 5

// 4. 함수에서 나머지 파라미터 받아오기
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

rest 문법

function sum(...theArgs) {
  return theArgs.reduce((prev, cur) => {
    return prev + cur;
  });
}

sum(1,2,3) // 6
sum(1,2,3,4) // 10

구조분해할당

분해 후 새 변수에 할당

const [a, b, ...rest] = [10, 20, 30, 40, 50];
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}

객체 분해

const user = {
	info: {
    	address: "서울시",
      	phoneNumber: "010-0000-0000",
      	name: "유저",
    },
  	id: "kay",
  	pw: "암호화된 패스워드라는 의미",
}

const {info, id, pw} = user;

화살표 함수

const arrowFn = (x, y) => {
	return x + y;
}

특징1. 함수 스코프가 아닌 블록 스코프를 탄다.
특징2. 매개변수가 1개 일 때 소괄호를 생략할 수 있다.

const arrowFn = x => {
	return x;
}

특징3. 함수 코드 블록 내부가 코드 한 줄일 경우 중괄호를 생략하거나 return 키워드를 생략할 수 있다.

const arrowFn = x => x;