[Koans]koans 후기3

Spread syntax

얕은 복사? 깊은 복사? 배열 안의 배열, 배열 안의 객체, 객체 안의 배열, 객체 안의 객체
의 안에 있는 값에 대해서는 얕은 복사가 일어난다.

const test = [1, 2, [3]];
const test2 = [...test];

console.log(test[2] === test2[2]); // true

test2[2] = [4];
console.log(test[2]); // [3]
test[2][0] = 4;
console.log(test2[2][0]); // 4

const test3 = [{ a: 1 }, { b: 2 }];
const test4 = [...test3];

test4[1] = { c: 3 };
console.log(test3[1]); // {b: 2}
test3[0].a = 0;
console.log(test4[0]); // {a: 0}

const test5 = { c: 3, d: { e: 4 } };
const test6 = { ...test5 };

test5.d.e = 5;
console.log(test6.d.e); // 5
test6.d = { e: 6 };
console.log(test5.d); // {e: 5}

const test7 = { f: 5, g: [6] };
const test8 = { ...test7 };

console.log(test7.g === test8.g);

test7.g[0] = 7;
console.log(test8.g[0]); // 7
test8.g = [8];
console.log(test7.g); // [7]

rest parameter

spread syntax를 통해 간단하게 구현됩니다.

function RestParameter(...args) {
  return args;
}

const restParams = RestParameter(["first", "second", "third"]);
console.log(restParams); // [['first', 'second', 'third']]

argumets는 함수의 실행 시 자동으로 생성되는 객체

function Obj() {
  return arguments;
}

const argumentsObj = Obj("first", "second", "third");
console.log(Object.keys(argumentsObj)); // ['0', '1', '2']
console.log(Object.values(argumentsObj)); // ['first', 'second', 'third']

const argsArr = Array.from(argumentsObj);
console.log(argumentsObj); // ['first', 'second', 'third', callee: ƒ, Symbol(Symbol.iterator): ƒ]
console.log(argsArr); // ['first', 'second', 'third']

Array.from()

배열과 유사한 개체에서 얕은 복사된 새 인스턴스를 만듬

console.log(Array.from("foo")); // ["f", "o", "o"]

console.log(Array.from([1, 2, 3], (x) => x + x)); // [2, 4, 6]

---

Rest Parameter는 전달인자의 수가 정해져 있지 않은 경우에도 사용가능

function sum(...nums) {
  let sum = 0;
  for (let i = 0; i < nums.length; i++) {
    sum = sum + nums[i];
  }
  return sum;
}

console.log(sum(1, 2, 3)); // 6;
console.log(sum(1, 2, 3, 4)); // 10;

---

구조분해할당

rest 문법 이후에 쉼표가 올 수 없음

const [first, ...middle, last] = array // Uncaught SyntaxError: Rest element must be last element