mutation-side-effects.js

/** 
 * Encode credit card number, except last 4 digits
 */
const maskSensitivityInfos = (card) => {
  card.number = card.number.replace(/.(?=.{4})/g, '#');
  
  return card;
}

/** 
 * Simulate the display of payment info.
 * This is usually done to confirm the selected payment method.
 */
const displaySelectedPayment = (card) => {
  console.log(`Paying with ${card.type} ${card.number}`);
}

/**
 * Simulate the payment processing.
 * This is the part where we make the payment transactions
 * so the REAL (unmodified) DATA is required in this step.
 */
const processPayment = (card) => {
    console.log('Card details', card);
};

const creditCard = { type: 'MasterCard', number: '5431111111111111', cvv: '595' };

// we mask sensivity infos to be displayed in the screen
// this is a standard security approach that you might have seen before
const maskedCreditCard = maskSensitivityInfos(creditCard);

displaySelectedPayment(maskedCreditCard);
// output: 'Paying with MasterCard ############1111'

processPayment(creditCard);
// output: 'Card details: { type: 'MasterCard', number: '############1111', cvv: '595' }'
// as you could spot, the card number was mutated and it is no longer valid
// to process the transaction