Home > Mobile >  Can someone explain this JavaScript code please?
Can someone explain this JavaScript code please?

Time:03-05

I am fairly beginner to JavaScript development and I would be obliged if someone could help explain this code to me.

m = function () {
 let t = e.getCookie("cli-analytics"),
     a = e.getCookie("cli-advertisement"),
     r = e.getCookie("CLI");
 return !(!t && !a) && { analytics: "yes" === t, ads: "yes" === a, visitorHasChosen: !!r };
}

I can understand the function assignment to the variable m and the cookie reads, but I have trouble understanding what the return actually does (returning an object ANDed with a complex logical NOT? Inside the object a property is assigned a double NOT?). By the way is this good programming practice/writing?

Thanks to all

CodePudding user response:

If this condition !(!t && !a) is satisfied, return { analytics: "yes" === t, ads: "yes" === a, visitorHasChosen: !!r }

CodePudding user response:

condition:

if one of t or a has a falsy value or both of them has a falsy value, return that object

object:

the value of keys is a boolean type because comparing (===) or !! so it checks if the value of t equal 'yes' then the value of analytics must be true otherwise false, also it's happening in ads

!!r in visitorHasChosen is Eqaul to Boolean(r)

CodePudding user response:

As already mentioned, the code was first minified and then prettyfied again.

Thus one can comprehend the code's intension just from the "speaking" string values of the getCookie method. From there and from following the shortened variable names of t, a and r one can come up with own meaningful variable names and a substitution of the former by the latter.

Then, as already pointed to, one does apply name substitution and DeMorgan's law to the following expression ...

!(!t && !a)
  1. !(!analyticsValue && !advertisementValue)

    • ... negation casts a value into a true boolean value, opposing the value's own truthy/falsy representation ... e.g. !0 === true, !'' === true, !{} === false.
  2. (!!analyticsValue || !!advertisementValue)

    • ... double negation casts a value into a true boolean value of the value's own truthy/falsy representation ... e.g. !!0 === false, !!'' === false, !!{} === true.
  3. (analyticsValue || advertisementValue)

    • ... a boolean operator on two values validates the expression by both of the values' truthy/falsy representations but returns the real value instead ... e.g. (0 || 1) === 1, (2 || '') === 2 ... but (2 && '') === '', (2 && 3) === 3, ('' && 3) === ''.

... which for 2) reads ... "if either of the values exists (is true)"

... and for 3) ... "if either of the values is truthy".

Since for the following restored example code it still is not clear where e does come from and what it means/represents, the example assumes a custom cookie storage which is treated as the function's sole parameter ...

/*
 * @returns {Object|false}
 *  either returns an object which features cookie values
 *  or returns the `false` boolean value.
 */
function getCliCookieValue(storage) {

  const analyticsValue = storage.getCookie('cli-analytics');
  const advertisementValue = storage.getCookie('cli-advertisement');

  // instead of ...
  return (!!analyticsValue || !!advertisementValue) && {

    analytics: 'yes' === analyticsValue,
    ads: 'yes' === advertisementValue,
    visitorHasChosen: !!storage.getCookie('CLI'),
  };

  // // ... one might consider ...
  // /*
  //  * @returns {Object|null}
  //  *  either returns an object which features cookie values
  //  *  or returns the `null` value.
  //  */
  // return (!!analyticsValue || !!advertisementValue) ? {
  // 
  //   analytics: 'yes' === analyticsValue,
  //   ads: 'yes' === advertisementValue,
  //   visitorHasChosen: !!storage.getCookie('CLI'),
  // 
  // } : null;
}

One could rewrite the above restored function to something more expressive / straightforward but of cause the computation process of the return value does not follow exactly the original one's, thus the return value for falsy intermediate values might differ in comparison with the original implementation.

/*
 * @returns {Object|false}
 *  either returns an object which features cookie values
 *  or returns the `false` boolean value.
 */
function getCliCookieValue(storage) {

  const isAnalytics = ('yes' === storage.getCookie('cli-analytics'));
  const isAdvertisement = ('yes' === storage.getCookie('cli-advertisement'));

  // instead of ...
  return (isAnalytics || isAdvertisement) && {

    analytics: isAnalytics,
    ads: isAdvertisement,
    visitorHasChosen: !!storage.getCookie('CLI'),
  };

  // // ... one might consider ...
  // /*
  //  * @returns {Object|null}
  //  *  either returns an object which features cookie values
  //  *  or returns the `null` value.
  //  */
  // return (isAnalytics || isAdvertisement) ? {
  // 
  //   analytics: isAnalytics,
  //   ads: isAdvertisement,
  //   visitorHasChosen: !!storage.getCookie('CLI'),
  // 
  // } : null;
}
  • Related