CODEWITHSUNDEEP
javascriptreactjsredux
Isaac Perez
Isaac Perez

Reputation: 590

Having trouble understanding this javascript destructuring statement

I'm working with a react/redux sample project and since I'm kind of new to Javascript, my exposure to some of the shorthanded ES6 javascript is limited. The statement I am having trouble following is this:

function mapStateToProps(state) {
  const { selectedSubreddit, postsBySubreddit } = state;

  // This part here is confusing to me
  const { isFetching, lastUpdated, items: posts } = postsBySubreddit[
    selectedSubreddit
  ] || {
    isFetching: true,
    items: []
  };

  return {
    selectedSubreddit,
    posts,
    isFetching,
    lastUpdated
  };
}

I mostly understand the purpose of this function but I'm not sure what's going on in that part that I have a comment in.

What I gathered so far is that postsBySubreddit is an array that we are getting an element from based on selectedSubreddit. From that element, we are 'extracting' isFetching, lastUpdated, and items (while aliasing it to posts simultaneously). The thing that throws me off is the || operator and the statement that follows it in the curly braces.

Is this an OR condition? If it is, are we saying that if postsBySubreddit[selectedSubreddit] === undefined, we're giving isFetching the value of true and items an empty array?

Upvotes: 1

Views: 80

Answers (2)

Jorge Fuentes González
Jorge Fuentes González

Reputation: 11809

The || operator means to run the next statement if the previous one is false.

Just look at this:

if (thing == "ok" || otherthing == "notok") {

I think that you know what this means. Enter the block if either statement is true. The way it "runs" is by first checking the left statement (thing == "ok") and if is false, then run the next statement (otherthing == "notok").

The same thing can be done to assign to variables:

var result = thing == "ok" || otherthing == "notok";

This thing will make result be true if the left or right statement returns true, following the same logic as I explained above.

Now, if we go further with this logic, we can do this:

var result = FIRST_STATEMENT || SECOND_STATEMENT;

This will run the FIRST_STATEMENT, get the value and check if is not false. If the result is not false, will run the SECOND_STATEMENT and return the value. if the FIRST_STATEMENT is not false, will return that value instead (because will not run the SECOND_STATEMENT).

In short, the || operator will evaluate statements from left to right and return the first one that is not false.

PD: Note that null, undefined, "", NaN and 0 is the same as a false statement.

PD2: To clarify, none of these values will be triple equal (===) to each other.

Upvotes: 1

junvar
junvar

Reputation: 11574

Your understanding is almost correct. Until the || operator, you're correct. But for the || operator,

if postsBySubreddit[selectedSubreddit] === undefined, we're giving isFetching the value of true and items an empty array

Not necessarily undefined, if postsBySubreddit[selectedSubreddit] is falsy, e.g. 0, '', false, null, undefined, NaN. Note that [] and {} are truthy. (to easily check if you've forgotten, you can type !!NaN in the dev console or node interpreter).

let a = b || c is equivalent to:

let a;
if (b)
  a = b;
else
  a = c;

Similarly, let a = b || {x: 0, y: 1} is equivalent to

let a;
if (b)
  a = b;
else
  a = {x: 0, y: 1};

Upvotes: 2

Related Questions