What does this javascript return statement mean?

Question

Please take a look at this return statement :

sortedNotes() {
      return (
        this.notes &&
        this.notes.sort((a, b) => {
          const aDate = new Date(a.createdAt)
          const bDate = new Date(b.createdAt)
          return bDate - aDate
        })
      )
    }

What does it mean? Isn't that enough to be just like this :

sortedNotes() {
      return this.notes.sort((a, b) => {
          const aDate = new Date(a.createdAt)
          const bDate = new Date(b.createdAt)
          return bDate - aDate
        })
    }

Update:

To be more clear look at this:

return (foo && bar);

what does this mean? If foo is true then return bar ?? then what about this:

return (bar && foo);

What exactly is returned here?

No, because if `this.notes` is null or undefined you get an error when you try to call the missing sort method. See e.g. https://stackoverflow.com/questions/3163407/javascript-and-operator-within-assignment — jonrsharpe, Oct 02 '19 at 07:08
In short, the first one firstly checks for the existence of `notes`, while the second ones doesn't... in this last case, if `notes` is `undefined` (or `null`), the code will break, because `sort` cannot be called on `undefined`. — lealceldeiro, Oct 02 '19 at 07:09
the second returns `undefined`. wihtout the rest. that's becuase the first has parentheses. — Nina Scholz, Oct 02 '19 at 07:10
as it stands, the second never reaches `this.notes.sort ...`. — Nina Scholz, Oct 02 '19 at 07:18
@NinaScholz oh I see what you mean, but I doubt that's what the OP is asking about; I don't think they've run the second example. — jonrsharpe, Oct 02 '19 at 07:24
@NinaScholz you mean in the first example the `notes` will never be sorted? — Ahmad Mobaraki, Oct 02 '19 at 08:37
i am speaking of the **second example**. the first one depends on the existence of `this.notes`. — Nina Scholz, Oct 02 '19 at 08:40
Thanks, I fixed the typo that causes ASI problem in the second example by the way — Ahmad Mobaraki, Oct 02 '19 at 08:52

CertainPerformance · Accepted Answer · 2019-10-02T08:56:26.650

The this.notes && ensures that this.notes exists first. If it doesn't exist, it'll return without throwing an error (to be more precise, it'll return the falsey value of this.notes - probably undefined).

If you unconditionally returned this.notes.sort, an error will be thrown if this.notes is not an array. For example:

class Notes {
  sortedNotes() {
    return (
      this.notes &&
      this.notes.sort((a, b) => {
        const aDate = new Date(a.createdAt)
        const bDate = new Date(b.createdAt)
        return bDate - aDate
      })
    )
  }
}

const n = new Notes();
// this.notes doesn't exist yet, so this doesn't do anything, but at least it doesn't throw an error:
n.sortedNotes();
console.log('done');

class Notes {
  sortedNotes() {
    return (
      this.notes.sort((a, b) => {
        const aDate = new Date(a.createdAt)
        const bDate = new Date(b.createdAt)
        return bDate - aDate
      })
    )
  }
}

const n = new Notes();
// Throws:
n.sortedNotes();
console.log('done');

So the test for this.notes' existence is needed to avoid an error when this.notes doesn't exist when sortedNotes is called.

It may have just been a typo, but make sure that something follows the return statement other than a plain newline - either use return this.notes.sort((a, b) => {, or put an opening parentheses ( right after it, to avoid ASI problems. (otherwise, nothing will be returned)

return (foo && bar);

means: Evaluate foo. If it is truthy, evaluate bar and return bar. Otherwise, return foo.

return (bar && foo);

means: Evaluate bar. If it is truthy, evaluate foo and return foo. Otherwise, return bar.

In your context, a more accurate minimal example would be when it's not known whether a property exists yet. Eg

return obj.fn()

will throw if obj is undefined, whereas

return obj && obj.fn();

will not throw.

All this said, this is odd code to write. It would be much more readable to have an explicit test instead, eg something like:

if (!obj) {
  return 'Not defined yet!';
} else {
  return obj.fn();
}

as [`@nina`](https://stackoverflow.com/questions/58196691/what-does-this-javascript-retern-statement-mean#comment102771994_58196691) pointed out in comments in the second snippet of OP's code it won't even `reach to this.notes.sort`, since you added `()` around the return so that behavior cannot be observed in your code, but this will happen in OP's code — Code Maniac, Oct 02 '19 at 07:22
Thank you! I fixed the typo for `ASI` problems. I kinda figure it out myself but I am confused! My question is: does the first example in my question event sort the `notes` array if it is not `undefined`? See the updated part of the question. — Ahmad Mobaraki, Oct 02 '19 at 08:49

What does this javascript return statement mean?

1 Answers1