Anyone able to explain this code snippet? ++ REP UP FOR ANSWER ++

[BlueIshDan]

Javascript

window.matchMedia || (window.matchMedia = function() {

}());

 

[spikepl]

30 sec of google: read the comments in/after this code: https://gist.github.com/paulirish/710855

As penance: run naked back and forth through the main street of your hamlet for 10 minutes

 

[dan-cat]

Looks like a check for browser support of the matchMedia function.

 

[BlueIshDan]

Lol thankyou for looking up the document I'm reading and telling me what the module says it does in the description. BUT

I'm looking for more of an explanation grammatically of what is going on here.

var1 || (var1 = function(){

I know what is happening. I'm wondering how this first line works in programmatic grammar and why?

Also the correct link with the latest version of this file is located here.

 

[dan-cat]

Your snippet is incomplete so I have to add to it to explain:

[I]var window.matchMedia[/I] = window.matchMedia || (window.matchMedia = function() {
[I]//do something[/I]
}());

The function window.matchMedia is set to the following value:

1) window.matchMedia if it exists

or

2) An anonymous function which currently does nothing.

 

[dan-cat]

The OR operator syntax for javascript can be found here

Basically if window.matchMedia is supported then window.matchMedia will return true so that is what window.matchMedia is set to.

If it's not supported it will return false thus window.matchMedia will be set to the anonymous function.

It's a short-hand way of writing

if(test!=null){
test=test;
}
else{
test=something;
}

 

[BlueIshDan]

It is not incomplete if you look at the up to-date source.

The Grammar of a programming language describes all eligible/valid expressions using a languages syntax.

The master programmers that created this module know exactly how to manipulate this grammar to be the most cost effective within millions of transactions on their clients computers. In this case the media query is used to create a relative styling for an image within its parent environment.

I'm wondering if anyone knows why you can use var1 || (var1 = function() {}())); as a valid expression and am looking for a conversation to figure out why this is the most cost effective way of doing it.

 

[BlueIshDan]

The OR operator syntax for javascript can be found here

Basically if window.matchMedia is supported then window.matchMedia will return true so that is what window.matchMedia is set to.

If it's not supported it will return false thus window.matchMedia will be set to the anonymous function.

It's a short-hand way of writing

if(test!=null){
test=test;
}
else{
test=something;
}

Awesome. So it's like a condition statement outside of an if's scope?

 

[dan-cat]

Awesome. So it's like a condition statement outside of an if's scope?

Just looked at the source, yes you're right it's not incomplete.

When the script runs it will hit window.matchMedia. If that returns true the OR statement is settled and the second part is not run. If it returns false (ie null) then window.matchMedia = function() {}; is run.

They've used the OR operator instead of if..else. Either way is valid but || will be smaller in file size. I couldn't tell you about the performance aspect.