JavaScript: The React Parts

...Spread

The third syntactic sugar that we will cover is spread operator.

You can see spread operator as opposite of destructuring; destructuring decomposes an array or object to its smaller item/ properties, while spread operator is used to merge smaller array/object into a bigger one.

Similar to destructuring, we have array spread and object spread.

Array Spread

How do you merge multiple array item a single array?

js

Using the array spread:

js

It may be confusing at first because both spread and rest use the same syntax (...). The difference is on the context that you're using them. ... during destructuring means rest, while in other context it means spread.

Spreading Array to Function Invocation

You can spread an array to an function invocation so the array item will be provided as the parameters of the function call.

js

A useful case is to spread an array to a function that accepts any numbers of parameters, e.g. Math.max.

js

Exercise

  1. Given three variables below:

    js

    write the expression to join them to produce:

    • ['a', 'b', 'c', 'd', 'e', 'f', 'g']
    • ['d', 'e', 'f', 'g', 'a', 'b', 'c']
    • ['a', 'b', 'c', 'a', 'b', 'c']

    You may not need to use all three variables.

  2. Write a function min that accepts a parameter numbers which is an array of numbers and return the smallest number in the array. (Hint: use Math.min)

    js

Object Spread

To merge multiple object into a single object:

js
  • Object.assign is an utility function that will merge objects from right to left, i.e. properties of object on right will override properties of object of the left.
  • The properties are merged shallowly, e.g. it override the whole address property instead of merge recursively.

Using object spread:

js
var base = {
currency: 'RM',
decimalPlaces: 2,
thousandSeparators: ',',
address: {
country: 'Malaysia',
city: 'KL',
},
};
var options = {
currency: 'USD',
roundOff: true,
address: {
country: 'United States',
},
};
var result = { ...base, ...options };
console.log(result); /*
{
currency: 'USD',
roundOff: true,
decimalPlaces: 2,
thousandSeparators: ',',
address: {
country: 'United States'
}
} */

The good thing about object spread is to express nested merge it's quite self-explanatory:

js
var base = {
currency: 'RM',
decimalPlaces: 2,
thousandSeparators: ',',
address: {
country: 'Malaysia',
city: 'KL',
},
};
var options = {
currency: 'USD',
roundOff: true,
address: {
country: 'United States',
},
};
var result = {
...base,
...options,
address: {
...base.address,
...options.address,
},
};
console.log(result); /*
{
currency: 'USD',
roundOff: true,
decimalPlaces: 2,
thousandSeparators: ',',
address: {
country: 'United States',
city: 'KL'
}
} */

Override Function Default

A use case of object spread is to wrap a third-party function which you like to override its default.

For example, a formatMoney function that will format a number so it's in the common money format. Its signature could be:

ts
function formatMoney(value, options) {}

where options is an optional parameters, and is an object with following properties:

js
{
prefix: '$',
thousandSeparator: ',',
decimalSeparator: '.',
decimalPlaces: 2
}

Assume that for your application, the most common prefix is 'RM' instead of '$', so you would like to create a wrapper function that default prefix to 'RM', you can use spread and rest syntax to achieve that:

js
function myFormatMoney(value, { prefix = 'RM', ...otherOptions } = {}) {
return formatMoney(value, { prefix, ...otherOptions });
}

Now myFormatMoney works similar to formatMoney, just the default is customized for your convenience!

Exercise

  1. Write the merge function that would merge objA and objB to produce the desired result:

    js
    var objA = {
    theme: 'light',
    fontFamily: 'Tahoma',
    mediaQuery: {
    mobile: 560,
    tablet: 720,
    desktop: 1020,
    },
    };
    var objB = {
    theme: 'dark',
    mediaQuery: {
    mobile: 500,
    },
    };
    function merge(defaultStyle, customized) {
    // write your code
    }
    var result = merge(objA, objB);
    • Expected result:

      js
      {
      theme: 'dark',
      fontFamily: 'Tahoma',
      mediaQuery: {
      mobile: 500
      }
      }
    • Expected result:

      js
      {
      theme: 'dark',
      fontFamily: 'Tahoma',
      mediaQuery: {
      mobile: 500,
      tablet: 720,
      desktop: 1020
      }
      }
Comments

There is no comment on this post yet.

Issue on this page? Report here