JavaScript Closures

 

What is a closure?
A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.

Source:

http://javascriptissexy.com/understand-javascript-closures-with-ease/

Example:

function showName (firstName, lastName) {

	​var nameIntro = "Your name is ";
	    // this inner function has access to the outer function's variables, including the parameter​
	​function makeFullName () {
        
	​return nameIntro + firstName + " " + lastName;
    
	}
	​
	​return makeFullName ();

	}

	​
	showName ("Michael", "Jackson"); // Your name is Michael Jackson


JavaScript and Functional Programming

Functional Programming is exactly what it says, functional. It creates clean and easy to read code that uses functions to efficiently do whatever is needed.

I really enjoyed reading the following sites explanation for Functional Programming, specifically the “split pea soup” reference.

Yes, dear, to make pea soup you will need split peas, the dry kind. And you have to soak them at least for a night, or you will have to cook them for hours and hours. I remember one time, when my dull son tried to make pea soup. Would you believe he hadn’t soaked the peas? We almost broke our teeth, all of us. Anyway, when you have soaked the peas, and you’ll want about a cup of them per person, and pay attention because they will expand a bit while they are soaking, so if you aren’t careful they will spill out of whatever you use to hold them, so also use plenty water to soak in, but as I said, about a cup of them, when they are dry, and after they are soaked you cook them in four cups of water per cup of dry peas. Let it simmer for two hours, which means you cover it and keep it barely cooking, and then add some diced onions, sliced celery stalk, and maybe a carrot or two and some ham. Let it all cook for a few minutes more, and it is ready to eat.

¶ Another way to describe this recipe:

Per person: one cup dried split peas, half a chopped onion, half a carrot, a celery stalk, and optionally ham.

Soak peas overnight, simmer them for two hours in four cups of water (per person), add vegetables and ham, and cook for ten more minutes.

¶ This is shorter, but if you don’t know how to soak peas you’ll surely screw up and put them in too little water. But how to soak peas can be looked up, and that is the trick. If you assume a certain basic knowledge in the audience, you can talk in a language that deals with bigger concepts, and express things in a much shorter and clearer way. This, more or less, is what abstraction is.

¶ How is this far-fetched recipe story relevant to programming? Well, obviously, the recipe is the program. Furthermore, the basic knowledge that the cook is supposed to have corresponds to the functions and other constructs that are available to the programmer.

This broke it down into a different way to understand the concept. Here is a link to that site: http://eloquentjavascript.net/1st_edition/chapter6.html

Here are some helpful hints I found for functional programming at: https://www.smashingmagazine.com/2014/07/dont-be-scared-of-functional-programming/

1. All of your functions must accept at least one argument.
2. All of your functions must return data or another function.
3. No loops!

First, data in functional programs should be immutable, which sounds serious but just means that it should never change.

Secondly, functional programs should be stateless, which basically means they should perform every task as if for the first time, with no knowledge of what may or may not have happened earlier in the program’s execution (you might say that a stateless program is ignorant of the past).

Here is some interesting history about Functional Programming from: https://en.wikipedia.org/wiki/Functional_programming

Lambda calculus provides a theoretical framework for describing functions and their evaluation. Although it is a mathematical abstraction rather than a programming language, it forms the basis of almost all functional programming languages today.

 

 

Event Delegation in JavaScript

	"The example uses event delegation. Instead of 
attaching a handler to each cell, 
we attach a single handler to the whole table, 
which uses event.target to get the originating element."

Benefits:

• Simplifies initialization, saves memory from extra handlers.
• Simplifies updates.
• Allows to use innerHTML without additional processing.

Limits:

• First, an event should bubble in IE. Most of events do bubble, but not all of them. For other browsers, capturing phase is also suitable.
• Second, delegation in theory puts extra load on the browser, because the handler runs when an event happens anywhere inside the container. So, most of time the handler may do idle loops. Usually it’s not a big deal.

table.onclick = function(event) {

	  event = event || window.event

	  var target = event.target || event.srcElement

	  // ...

	}

Here is the link where I found the above information:
http://javascript.info/tutorial/event-delegation

Here is a code snippet of an event handler using JQuery:

$(selector).delegate(childSelector,event,data,function)

http://www.w3schools.com/jquery/event_delegate.asp

Auto Reload Page using JavaScript

Below is a code snippet that I thought could be useful in the future. It explains itself in the text that displays when you run the code, “This page will refresh every 5 seconds. This is because we’re using the ‘onload’ event to call our function. We are passing in the value ‘5000’, which equals 5 seconds.” I found the site that had this snippet also had other snippets that could be useful as well. Some sites might require that the page auto reloads or it could enhance a site by auto reloading.

Link:
http://www.javascript-codes.com/javascript-codes-and-snippets/

 
function timedRefresh(timeoutPeriod) {
	setTimeout("location.reload(true);",timeoutPeriod);
}

Web Development Article

This article addresses the Web Development industry in a different way than what I have seen.  They don’t just give you and overview of what you do and what you might make. They go in detail to give you 10 top cities for Tech Jobs. Then goes on to show what and average wage is for different languages you might use, this was something I have not seen before. The part of the article that I read that kept me reading was this: “Developers versed in programming language Ruby, C and Python are, on average, making six figures, whereas those proficient in C# and PHP are on the lower end of the wage spectrum, pulling in less than $90,000, which is still more than double the national income average of $44,888. ”

The article also has a chart explaining some programming languages and what website use each one. I have never seen anything showing you which languages are used on popular sites, so this was cool to me. I also thought it was cool that it listed Madison, WI. on the top 10 tech cities. Researching the current market and what is the top programming language used in the field are all important information to know.

 

Here is the full article: http://www.entrepreneur.com/article/241644