오늘배운 것들

Spread 문법

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers)

여기서 sum(...number)는 x,y,z에 1,2,3이 차례대로 들어가서 1+2+3 이 된다.
이처럼 Spread문법은 배열을 풀어서 인자로 전달하거나, 각각의 요소로 넣을때 사용된다.

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

이처럼 spread 문법을 사용해서 배열에 배열을 넣을 수 도 있고 아래처럼 배열과 배열을 합칠 수 도 있다.

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

let arr = [1, 2, 3];
let arr2 = [...arr]; 
arr2.push(4);
arr2 = [1,2,3,4]
arr = [1,2,3]

이처럼 배열을 복사할 수 도 있다. 여기서 주의해야 할 점은 arr2를 수정했다고 해서 arr까지 수정되지는 않는다는 점이다. 주소를 복사한 것 이 아니라 새로운 heap을 만들어 할당한 것이기 때문에 arr과 arr2는 완전히 별개의 주소를 가지고 있다.

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};

spread문법은 객체에서도 사용할 수 있다. 여기서 주의할 점은 mergedObj의 경우처럼 obj1과 obj2의 키가 같을경우 뒤에오는 객체의 value를 사용한다는 점이다.

Rest 문법

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

sum(1,2,3) // 6
sum(1,2,3,4) // 10
이처럼 parameter에 배열값을 넣을 수 있게 해주는 문법을 Rest문법이라고 한다. 파라미터 값이 가변적일때 유용하게 쓰인다.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");

console.log는
a one
b two
manyMoreArgs ["three", "four", "five", "six"]
로 출력된다.

구조 분해

구조 분해 할당은 Spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다.

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

이처럼 Spread 문법으로 값을 해체한 후 rest라는 변수에 새로 할당한다.

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

객체에서도 구조 분해를 사용할 수 있다.

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'

이처럼 함수에서도 객체를 분해할 수 있다.

JavaScript Koans

내가 쓴 코드를 테스트할 때 쓰는 방법론이다(https://github.com/mrdavidlaing/javascript-koans). 이 섹션을 통해 내가 애매하게 알고 있던 개념들을 다시 짚어보고 갈 수 있게되었다.

  let currentYear = 2021;
    function afterTenYears(year) {
      year = year + 10;
    }
    afterTenYears(currentYear);
    expect(currentYear).to.equal( ? ? ? );

이때 ??? 에는 2031이 아닌 2021이 들어간다. primitive data type이 함수의 인자에 들어가면 값이 복사 되어 들어간다. 원시타입 자체가 들어가는 것이 아니다! 5번째 줄을 실행하면 year = 2021 로 할당한다는 소리가 되는 것 이다. 그리고 함수를 호출하면서 넘긴 인자가 호출된 함수의 지역변수로 (매 호출 시마다) 새롭게 선언된다.

    const emptyArr = [];
    expect(typeof emptyArr === 'array').to.equal(0);
    expect(emptyArr.length).to.equal(false);

array는 typeof로 확인할 수 없다. 객체와 array는 array로 나오기 때문
그래서 Array.isArray로 확인하고 빈 array인지 확인하고 싶다면 arr.length를 사용해야한다.