Categories
Code

Functions as Variables

Whenever I am working with folks who are just learning JavaScript, they seem to get hung up on functions until the light bulb goes on. One of the aspects of functions is understanding that functions are just fancy variables. What does this mean? It means that you can build meaningful functions and utilize names that make sense. Here is an example…

[code lang=”js”]
var someVariable = function() {
// Do some geeky code stuff
}; // Should have a semi-colon here since a variable is being declared
// ‘Traditional’ function
function foobar(){
// Do some more geeky code stuff
}
[/code]

​As you can see, the “guts” of the function is the same. You are simply storing the function literal into a variable instead of naming the function in the traditional manner. So how do you then call this function? I am glad you asked…

[code lang=”js”]
// Call the function literal stored in the variable
someVariable();
[/code]

The variable someVariable is simply a reference to the function…like your mailing address to your house.

Now…what about arguments/parameters of functions. How would you work with those in this scenario? Turns out, it is fairly easy…

[code lang=”js”]
var someVariable = function(someArgument) {
// Do some geeky code stuff
};
// Call the function literal stored in the variable someVariable(argument);
[/code]

Some of you may ask, “Why not just do it the ‘old’ way?” That is perfectly fine. I like this way only because I like to see my variables in my code in this manner and utilize them. In other words, it is many times a personal preference.

Happy Coding!

Clay Hess

Categories
Code

Everyone…”Go to Your Room!”

In today’s post, I want to address a concept entitled, ‘Separation of Concerns’. This is a programming concept to make maintenance of your application easier. First let’s go back in history…

In the early days of web sites, everything was jumbled up. All web applications have three basic parts…

  1. Content (HTML)
  2. Presentation (CSS)
  3. Functionality (JavaScript)
In the ‘old days’, these three legs of a web app were jumbled together. Let me illustrate this with an HTML tag that is now deprecated.

There used to be an HTML tag called, “font”. This tag has now been deprecated (in fact, this tag is not supported in HTML5), although you might run across it on sites that are ancient and have not been updated. This tag was used for content to control the styles of text. So while this tag is no longer in use, it is a good way to illustrate the need for separation of concerns. Here is an example…

[code lang="html"]
<font size="3" color="red">Some Text</font>
[/code]

So in the aforementioned example, you can see how the font tag was used to set the size and color of the text. Why was this a problem?

Imagine your company site contains 72,000+ pages (I used to oversee such a site). Now imagine your company goes through a merger...again...this happened to me. The marketing department comes to you and says, "We used to have red as our primary header color and we are switching to blue. Can you please make that change to the web site and do it for the press release tomorrow?" Well, if you used the font tag, then you have to go through every page and every header and make the change. Yes, we could use find and replace, but still a headache...an expensive one.

If we would have separated our style from our content and utilized a css style, then all we would have to do is make the change in the css and it would be replicated across the site.

Note: When I took over that 72,000+ site, it was commingling thses items. One of my first projects was separating these. It made life so much easier and we were able to make changes much quicker. So work to separate your applications into those three areas as much as possible. It is more work on the front end, but saves so much in the long run.

Happy Coding!

Clay Hess

Categories
Code

About Clay Hess

Clay has a passion for technology…not just for the ‘cool-ness’ factor, but for the way technology has and is improving our lives. Who could have foreseen how technology has become integral in everyones daily way of life. Each of us relies on some sort of technology to improve our lives and the lives of others. That is what drives Clay and Webolution Designs…changing peoples’ lives. Web technology can be an amazing tool to improve businesses, quality of life and bring hope to those that otherwise may not receive it if it weren’t for a technological advance. This is the reason that the Webolution Designs tagline is “We all want to change the world”.