Code I don't understand

JavaScript
1

Hi there. :blush:

I am learning React.js now. And I am reading code in Codepen.
I found this : Rendering React from JSON

And I don’t know what these means in JavaScript :

----- Part 1 -------------------------------------------------------------------

const stock = { Channels, Copy, Cover, Link, Twitter };

----- Part 2 -------------------------------------------------------------------

${xxxx}
@{xxxxxx}

----- Part 3 -------------------------------------------------------------------

   ((def.props || {}).children || [])
        .map(c => this.createElement(c))

I don’t understand what these code is doing.
And syntax of Part 3 is really complicated.
Could some explain it for me && give me some tutorial to read? Thanks a million!

2
  1. property shorthand - http://es6-features.org/#PropertyShorthand
  2. decorator https://www.sitepoint.com/javascript-decorators-what-they-are/
  3. default values https://www.sitepoint.com/community/t/and-and-or-operators/284217
3 Likes
3

( a || b) means if a is true, then a, if not then b

5

Can you elaborate, I think what I - albeit simplified - said, stands?

If we have ||, and a is true, doesn’t that finish the evaluation of that?

In the case I wrote - if a evaluates to true, then that is it, yes?

6

Yes, it does stand.

Yes you’re right. I knew what I meant at the time, but was tired. My apologies for any confusion, I’ve removed the previous post.

The updated part I’ve bolded below:

With || operators JavaScript keeps on evaluating from left to right, until a truthy value occurs, giving that truthy value or failing that, the last falsey value.
With && operators JavaScript keeps on evaluating from left to right, until a falsey value occurs, giving that falsey value or failing that, the last true value.

If a evaluates to true, then that evaluation is the value of a.

Why does that matter? Because String(a) could be “Cucumber” when a is “Cucumber”, or it could be “[object Object]” when a is an object.

Or, it could be an empty string “” when a is an array.
Confusingly, ( && “something else”) evaluates to true, even though String() evaluates to an empty string, which evaluates to false.

2 Likes
7

It’s probably fairly important to point out that truthy values can be a bit misleading.
0 is false
“” is false
is true. So is {}.
null,NaN,false, and undefined (which is usually what the || is used for in this case) are false.
So be wary of using || for evaluating things that might legitimately return 0, for example.

1 Like
8

The first one is an expression interpolation in a template literal; the second one is an expression embedded in JSX, preceded by the literal character "@".

It’s a bit confusing as decorators do look similar, but the @ would be followed by the name of the decorator function then – you have to look at code in the pen to see that it’s not part of the expression here.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.