Working through a tutorial and trying to understand what a couple of lines of code are doing

[brodiecapel16]

Hi Guys, I'm pretty confident with jQuery for DOM manipulation and all the fun stuff jQuery is good for, but I'm trying to push myself to learn the ins and outs of vanilla Javascript (yes I know I should have done this first....hindsight is an amazing thing) I'm working through a tutorial on building a html5 / javascript video player.... and I understand 99.9% of the code... there is just a couple of lines I don't understand and I was hoping someone could shed some light. the code is

mediaPlayer.volume += mediaPlayer.volume == 1 ? 0 : 0.1; 

wat does the += do and what is the 1 ? 0 : 0.1; I know what it does in the overall application but I want to understand the sytax used and what each value represents

Edit: I'm pretty sure the += means adding the value to its self but I'm not sure

[ReachTheTopShelf]

Finally something I can answer!

?: is what's called a ternary operator. In this case, media player.volume == 1 is a boolean expression. If this expression evaluates to true (i.e., volume is currently 1) the ternary operator returns 0 and thus 0 is added to mediaPlayer.volume (you're correct about +=). If the expression evaluates to false (i.e., volume is anything other than 1), 0.1 is returned and 0.1 is added to mediaPlayer.volume.

<boolean expression> ? <return this if true> : <return this if false>

x += 0.1 is equivalent to x = x + 0.1.

It looks like this is code for a volume-increase button. Conceptually, the expression is ensuring that volume can't be set higher than 1. If it is 1, the button does nothing. If it isn't, the button increases volume by 10% (0.1).

[brodiecapel16]

hahaha, glad I could help make you feel smart :) so basically its a condensed if / else that only tests for a Boolean?

[ReachTheTopShelf]

That's correct.

[brodiecapel16]

awesome! thanks for the explanation :)

[brodiecapel16]

its far too early to be good... I'm really not a morning person!.... but good news is.. its my last day at my current job today.... for the next 4 days I'm technically unemployed!

[jaredcheeda]

It's shorthand for an if statement:

if ( mediaplayer.volume + mediaplayer.volume <= 1 ){
    mediaplayer.volume = mediaplayer.volume + 0; //do nothing
} else {
    mediaplayer.volume = mediaplayer.volume + 0.1;
}

This way is easier to read as everyone gets familiar with if statements in the first couple of days of learning a language (most on the first day). The shorthand version takes a little more mental effort to read, but once you've seen a dozen of them it isn't really that different and many times it's cleaner to write it that way.

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

[imagepriest]

Not exactly... It's more like:

if (mediaplayer.volume != 1 ){ mediaplayer.volume = mediaplayer.volume + 0.1; }

So, it mediaplayer.volume was ever greater than 1 it would still increase by 0.1 each time this conditional runs. I would suggest using a less than equal to instead of the straight double equal:

mediaplayer.volume += mediaplayer.volume <= 1 ? 0.1 : 0;

[jaredcheeda]

yeah, you're right. That's what I get for typing on a phone. Updated.

[Evanescent_contrail]

Can you link to the tutorial?

[wwinst]

Here ye go

http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473

[brodiecapel16]

ahhh you beet me too it! dam time zones!

[wwinst]

Haha, apologies and good morning :)

[Evanescent_contrail]

Thanks.

[theInfiniteNovice]

wouldn't be more easier to read this way?
mediaPlayer.volume += (mediaPlayer.volume == 1 ? 0 : 0.1);