[js] Default parameters of function & Spread syntax in object literals

function 개발 시 기본값 매개변수 사용(Default Parameters)과 object literals 에서 전개 구문(Spread syntax)

Default Parameters

• 함수의 매개변수로 정의되었으나 호출 시 undefined가 넘겨지는 경우.

  1function func1(value1 = 1){
  2  return value1;
  3}
  4func1();  //1
  5func1(3); //3

  • 아래와 같이 undefined인 경우에 대한 예외처리를 하지 않아도 된다.

  1function func1(value1){
  2  return value1 || 1;
  3}
  4func1();  //1
  5func1(3); //3

• 매개변수가 여러개인 경우 앞쪽 매개변수를 뒷쪽 매개변수 정의하는데에 사용할 수 있다.

  1function func2(value1, value2 = value1*10){
  2  return value1+value2;
  3}
  4func2(2);     //22
  5func2(2, 31); //33

  • 앞쪽 매개변수에만 기본값이 있는 경우 아래와 같은 결과가 발생한다.

  1function func2(value1 = 3, value2 = value1*10){
  2  return value1+value2;
  3}
  4func2(2);  //22
  5func2(31); //341
  6func2(undefined, 31); //34

Spread syntax in object literals

• js로 객체를 생성 할 때 같은 이름의 변수를 2번 이상 사용하는 경우 나중에 작성되는 값으로 최종 할당된다. 이러한 경우는 spread syntax를 사용할 때에도 마찬가지이다.

  1const defaultObj = {
  2  prop1: 10,
  3  prop2: 'title'
  4};
  5const data1 = {
  6  prop1: 30,
  7  prop2: 'description',
  8  ...defaultObj
  9};
  10const data2 = {
  11  prop1: 40,
  12  ...defaultObj
  13};
  14const data3 = {
  15  ...defaultObj,
  16  prop1: 20,
  17  prop2: 'tags'
  18};
  19console.log(data1); //{prop1: 10, prop2: 'title'};
  20console.log(data2); //{prop1: 10, prop2: 'title'};
  21console.log(data3); //{prop1: 20, prop2: 'tags'};

함수의 파라미터로 위의 두 개념을 모두 사용하는 경우

• 함수의 파라미터로 객체를 받는 경우, 객체의 구성 요소 중 일부만 넘기고 나머지는 기본 값으로 사용할 수 있다.

  1let defaultObject = {
  2  prop1: 10,
  3  prop2: 'title
  4};
  5
  6function func3(obj = defaultObject){
  7  return {
  8    ...defaultObject,
  9    ...obj
  10  };
  11}
  12
  13func3({prop2: 'description'}); //{prop1: 10, prop2: 'description'}