Global variables

	var x = 5;

	function globalVar() {
		x = 3;

    		console.log(x); // 3
	}

	console.log(x); // 3
						

x is a global variable. inside the function, we access x and overwrite it this might give us unexpected results. bad.

Implied global variables

	function impliedGlobal() {
		x = 2;
	}

	function localVar() {
		var y = 2;
	}

	console.log(x); // 2
	console.log(y);	// y is undefined
						

the difference between using and not using var. not using var creates an implied global variable. can be dangerous for reasons stated before (overwriting) using the var statement makes the variable (y) local to the function scope.

Local variables

	var x = 5;
	
	function localVar() {
		var x = 2;

		console.log(x); // 2
	}
	
	console.log(x); // 5
						

local variable is local. global variable is global. they dont interfere.

Named functions create global vars

	console.log(globalVar);
	// function globalVar() { ... }
	console.log(localVar);
	// function localVar() { ... }
						

Chained assignment

	function randomFunction() {
		var a = b = 0;
	}

	console.log(a); // undefined
	console.log(b); // 0 
						

right to left evaluation b = 0; b doesnt exist so it is declared as an implied global. a is local to the function

	function initSlider() { /* ... */ }
	
	function initModal() { /* ... */ }
				
	function initSearch() { /* ... */ }
					
	$(document).ready(function() {
		initSlider();
		initModal();
		initSearch();
	});
						

each function creates a new global. anti pattern. how2fix? IIFE

• Every function creates a new global variable
• jQuery ($) attaches itself to the global namespace aswell
• What if a third-party script implements initSlider();?

• Part of the solution
• Contain everything within a function's scope
• Variables are local to this function

Create a function and immediately execute it:

	(function() { alert('Kunstmaan'); })();
						

can also be written as (function () {}()); something about performance.

	(function ($) {

		var initSlider = function() { /* ... */ };
		var initSearch = function() { /* ... */ };
		var initModal  = function() { /* ... */ };

		$(document).ready(function() {
			initSlider();
			initSearch();
			initModal();
		});

	}(jQuery));
						

multiple var statements

Slight optimalisation by using one var statement

	
	(function ($) {
		var init, initSlider, initModal, initSearch;

		init = function () {
			initSlider();
			initModal();
			initSearch();
		};
		initSlider = function() { /* ... */ };
		initSearch = function() { /* ... */ };
		initModal  = function() { /* ... */ };		

		$(document).ready(function () {
			init();
		});
	})(jQuery);
						

one var statement

The Module Pattern

	
	var myApp = (function ($) {
		var init, initSlider, initModal;

		init = function () {
			initSlider();
			initModal();
		};
		initSlider = function() { /* ... */ };
		initModal  = function() { /* ... */ };

		return {
			init: init
		};
	}(jQuery));

	$(document).ready(function () {
		myApp.init();
	});
						

The Module Pattern

• provides structure
• helps organize your code as it grows
• Combination of techniques:
  • Namespaces
  • IIFE's
  • Private and public members

Revealing Module Pattern

	var myApp = (function ($) {
		var init, initSlider, initSearch, search;

		init = function () {
			initSlider();
			initSearch();
		};
		initSlider = function() { /* ... */ };
		initSearch = function() { /* ... */ };
		search     = function() { /* ... */ };

		return {
			init: init,
			search: search
		};
	}(jQuery));

	$(document).ready(function () {
		myApp.init();
	});

	$('#btn').click(function () {
		myApp.search($('#someInput').val());
	});
						

Ideas

One Kunstmaan namespace with different plugins

• Kunstmaan.FormValidator
• Kunstmaan.Modal
• Kunstmaan.WhosGoingForBroodjes
• Kunstmaan.CatGifGeneratorForIbe

Why bother?

• Even though jQuery has a large ecosystem, a lot of plugins are bloated or badly written.
• We build what we need and expand on it for future projects, where needed
• We might learn something out of it
• Reusability

Example code

• Kunstmaan.Modal
• Kunstmaan.FormValidator (CoffeeScript)

CoffeeScript?

Jasmine