CODEWITHSUNDEEP
javascriptoperators
smwikipedia
smwikipedia

Reputation: 64423

What's this JavaScript syntax?

I am new to JavaScript. The following code is from some production codebase. The regDefinition is passed in JSON form. But I am not quite sure about the syntax in the method body. Especially the || and [] parts.

function getCookieValue(regDefinition) {
    return (document.cookie.match(regDefiniation.regEx) || [])[regDefiniation.index] || null;
}

Upvotes: 10

Views: 1367

Answers (5)

Ashish Rajput
Ashish Rajput

Reputation: 1529

So to understand this let's dig into this example

var myValue = someValue || otherValue

So here if someValue can be converted into true then myValue would contain someValue else it would contain otherValue

// Values that evaluate to false:
false
"" // An empty string.
NaN // JavaScript's "not-a-number" variable.
null
undefined // Be careful -- undefined can be redefined!
0 // The number zero.

Anything else would return true

So to understand your code let's break it

var myCookie = document.cookie.match(regDefiniation.regEx) || []

So here if document.cookie.match(regDefiniation.regEx) returns true then return it else return the empty array. Same for other part too. For more information of logical operators in JavaScript please follow the following link

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

Upvotes: 6

Paul S.
Paul S.

Reputation: 66394

There are some good answers here, but nobody seems to really be explaining why you'd do

(foo || [])[bar]; // or similarly (foo || {})[bar]

instead of just

foo[bar]

Consider case the RegExp failed,

var foo = null, bar = 0;

Now without anything special you'd get an error thrown and the code would stop

foo[bar]; // TypeError: Cannot read property '0' of null

However the parenthesised-or version will be different

(foo || [])[bar]; // undefined (note, no error)

This is because the result of (null || []) is [], and you can now try to read a property of it safely

Upvotes: 25

Wyzard
Wyzard

Reputation: 34581

document.cookie is a string that contains the cookies associated with the current page. The document.cookie.match(regDefiniation.regEx) function call is searching this string with a regular expression to get a list of substrings that match.

If nothing in the cookie string matches the regex, the match call will return null, so the || [] is there to replace that null with an empty array. This ensures that the expression (document.cookie.match(regDefiniation.regEx) || []) always returns an array.

The [regDefiniation.index] is just retrieving an element from that array. But if the requested index doesn't exist in the array — for example, if the array is empty because the regex didn't match anything in the cookie string — the result will be undefined, so the || null changes the result to null in that case.

Upvotes: 7

Ashish Rawat
Ashish Rawat

Reputation: 3513

Here's the step-by-step:

document.cookie returns a string and match method (inbuilt) is applied to that. If the parameter is in regDefiniation.regEx found, then do this else return [] (i.e., array) After this, whatever is returned by above step, apply indexing to that with [regDefiniation.index].

`If all the above steps fail, then return null.

Upvotes: 3

GolezTrol
GolezTrol

Reputation: 116180

It looks like someone has made a lot of effort to make this very hard to read.

If I interpret it right, it does something like this:

  • call the match method.
  • it returns an array of matches, or nothing (null, undefined?). If it doesn't return anything, default to an empty array.
  • Of the array, get the element with index 'regDefiniation.index'.
  • If that item doesn't exist (which can be the case for matches, and will always be the case for the empty default array), return null.

Upvotes: 31

Related Questions