Why declare jQuery twice?

What is the purpose of the following code?

Note that before the second script code below, jquery.min.js is already included with googleapis.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>')</script>

It's to fallback to the jquery.min.js file stored on the same server when the CDN is down or cannot be reached.

It's essentially saying:

// 1. Try to download and run https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js

// 2. Was jQuery successfully loaded from the CDN? If so, it will be defined:
if (window.jQuery) {
    // Yes, it's defined. Good. Nothing more needed.
}
else {
    // No, it's not defined. Use my copy:
    document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>')
}

Read more here and you can find the original code here.

Regarding window.jQuery || document.write(...) that is essentially shorthand for the code above. When defined window.jQuery will be truthy and so the statement on the right hand side of || will not be executed; however, if it's not defined it will be falsy and the statement on the right hand side of || will be executed.

It's trying to use the version hosted on Google's CDN first. There's a chance the person viewing the site already has that exact script cached from visiting some other site, so they might as well try that first.

If the CDN version loads, window.jQuery is set, the or is short-circuited, and the code moves on.

If the CDN version can't be loaded for some reason, it adds another script tag to the page pointing to a locally-hosted version of the script.

Edit: as MTCoster points out in a comment above, this trick relies on the way JavaScript is normally loaded. The browser pauses execution until the

The first script will try to load jQuery from an external website (in this case, Google CDN).

The second one will try to find the jQuery object in window, and only if it doesn't find it, then it will load the library from an internal link. It's only a fallback in the case the CDN fails.

window.jQuery || document.write(...)
// the code above means the same as the code below
if (window.jQuery === undefined) document.write(...)

In Javascript, besides booleans (true/false), there are truthy and falsy values. Anything that's different to 0, false, undefined and null is a truthy value.

In that case, if the jQuery property exists on window, it will be an object, and it will be a truthy value, so, the second statement won't run (because the first one is already true - and in an OR operator, if any of the statements is true, it skips the others (from left to right).

Although, if the jQuery property doesn't exist, it's because the first script didn't load correctly, and the property will be undefined, a falsy value. So, the second statement will run, and the local jQuery will be loaded as a fallback.

It is a fallback mechanism if the jquery from CDN is not reached for some reason like blocked by firewall, CDN down etc

I will add one more practical scenario I faced last year. One of my client decided to host and use the web application created by me in LAN without internet availability. With the local IIS the application was deployed properly but failed due to CDN non availability, if I had used the code mentioned in question the web app would have worked the very first time without any change.

I hope that it will makes sense now :) For me it was a lesson learnt.