Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

June 18, 2014

JavaScript Function Terminology

Filed under: JavaScript @ 12:43 pm

I have been working on and off with JavaScript since 2001. But its one thing to use JavaScript functions and another thing entirely to know the vocabulary of JavaScript functions.

So here are some common JavaScript function terms:

Function Declaration

Defines a named function.

function onClick(buttonName) {

    return “Clicked: ” + buttonName;

}

Calling:

  • onClick() – executes the function and returns the value.
  • onClick – references the function.

In JavaScript, function declarations are always moved (“hoisted“) to the top of their scope at runtime. This means that the function does not need to be declared before it is used.

So something like this is valid:

onClick(“OK”);

function onClick(buttonName) {

    return “Clicked: ” + buttonName;

}

Function Expression

Defines a function as part of a larger expression such as a variable assignment.

The function can be named, as with the onClick function below:

var buttonClick = function onClick(buttonName) {

    return “Clicked: ” + buttonName;

}

Or anonymous as with this function:

var buttonClick = function(buttonName) {

    return “Clicked: ” + buttonName;

}

Calling:

  • buttonClick() – executes the function and returns the value.
  • buttonClick – references the function.
  • onClick() – generates an undefined error.

Function expressions are not “hoisted”. So attempting to use them before they are defined generates a type error:

buttonClick(“OK”);

var buttonClick = function(buttonName) {

    return “Clicked: ” + buttonName;

}

NOTE: The variable declaration (buttonClick) does get hoisted, but only the definition, not the assignment. So at runtime, var buttonClick = undefined is hoisted. But the assignment does not occur until the un-hoisted assignment statement is executed.

Function Statement

Basically a function declaration. (See above).

Guidance

In general, guidance says to favor function expressions over function declarations (or function statements) for the following reasons:

  • The hoisting of function declarations can cause confusion or hard to find bugs.
  • Function expressions more clearly imply that the function itself is an object.

See this link for more examples and an enhanced discussion of function declarations vs function expressions.

Enjoy!

4 Comments

  1.   John DeHope — June 19, 2014 @ 9:12 am    Reply

    I read your blog post first. Then I took the quiz in the blog post you referenced. I got all four questions right. You’re a good teacher!

  2.   DeborahK — June 19, 2014 @ 11:24 am    Reply

    Thanks John!

  3.   Ken Dason — June 20, 2014 @ 5:54 am    Reply

    Your have been a great help to the developer community since the early days of VB. Hopefully, this foray into JavaScript is an indication of more to come in this area! Thank you!!

  4.   DeborahK — June 20, 2014 @ 6:05 pm    Reply

    Thank you Ken! I am currently working on an AngularJS course for Pluralsight and having a great time! So yes, more JavaScript to come! :-)

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs