Spread/Rest

• Spread 문법

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

sum(...numbers) // 6

---

• Rest 문법

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

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

---

배열에서 사용하기

1) 배열 합치기

let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];

// ['head','shoulders', 'knees', 'and', 'toes']

---

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];

// [0, 1, 2, 3, 4, 5]

2) 배열 복사

let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);  // 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr2를 수정한다고, arr이 바뀌지 않습니다.

// arr = [1, 2, 3]
// arr2 = [1, 2, 3, 4]

---

객체에서 사용하기

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };

// clonedObj : {foo: "bar", x: 42}
// mergedObj : {foo: "baz", x: 42, y: 13}

---

const student = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }

function getSummary({ name, lesson: course, grade }) {
  return `${name}님은 ${grade}의 성적으로 ${course}을 수강했습니다`
}

getSummary(student)
// '최초보님은 B+의 성적으로 양자역학을 수강했습니다'

위 예시의 function의 arguments에서 lesson: course부분 주목!
lesson을 name처럼 사용하려면 lesson만 arg로 받아 템플릿 안에 사용하면 된다.
lesson: course의 형식으로 arg를 받았을 때, lesson을 템플릿 리터럴 안에 집어 넣으면 undefined가 뜨더라.

---

심화(?)

//질문
const user = {
	name: '김코딩',
	company: {
		name: 'Code States',
		department: 'Development',
        role: {
          name: 'Software Engineer'
        }
    },
	age: 35
}

//1
const changedUser = {
	...user,
	name: '박해커',
	age: 20
}

//2
const overwriteChanges = {
	name: '박해커',
	age: 20,
	...user
}

//3
const changedDepartment = {
	...user,
	company: {
	...user.company,
	department: 'Marketing'
	}
}

위 문제에 대해 마지막 답만 기록하고 넘어가야겠다.... 너무 많다.

{	name: '김코딩',
	company: {
		name: 'Code States',
		department: 'Marketing',
        role: {
			name: 'Software Engineer'
        }
    },
	age: 35
}

---

함수에서 나머지 파라미터 받아오기

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

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

// a one
// b two
// manyMoreArags ["three", "four", "five", "six"]

---

구조 분해

구조 분해시, 미리 구조 분해에 사용될 변수를 선언하지 않으면, window 객체의 변수로 할당이 되니 이점 유의해야 할 것으로 보인다.

[] 배열

[a, b, ...rest] = [10, 20, 30, 40, 50];
rest
// [30,40,50]

{} 객체

객체에서의 rest/spread 문법

{a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
// {c: 30, d: 40}

const student = { name: '최초보', major: '물리학과' }
const { name, ...args } = student

name  // '최초보'
args // {major : '물리학과'} <- spread는 객체 상태를 보존 하는 것에 유의

객체의 단축 문법

const name = '김코딩'
const age = 28
const person = {name, age, level: 'Junior'}

// person = { name: '김코딩', age: 'age', level: 'Junior'}
// 변수 명이 key가 되고 변수의 값이 키 값이 되는 것을 알 수 있었다.

객체 구조 분해

const student = { name: '박해커', major: '물리학과', age : 45}
const {age=4, name} = student  // <- age 기본 값을 4로 지정하였다.
age // 45  <- 순서 상관 없이 잘 나온 것에 유의(객체는 순서가 없다.)
name // '박해커'

var loc = {city: 'Seoul', population: 500, latitude: 2, longitude:3 }
var {city:city_2} = loc
city_2 // 'Seoul' <-- 구조 분해를 이용해서 city_3에 city 값을 저장하였다

객체를 🛠'분해'하여서 변수를 선언하는 것처럼 사용하였다.

---

함수에서 객체 분해

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

let user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

whois(user) // jdoe is John