<variable>=function(){...}

Jim Moon

Hi.

I'm curious about this syntax:
<variable>=function(){...}

I'm not finding a definition of this syntax, but I see it used at this
website:
http://www.htmldog.com/articles/suckerfish/dropdowns/

Here's the usage (in a few different lines) I found there:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Thanks!

Jim

Oct 13 '05 #1

web.dev

Jim Moon wrote:

Hi.

I'm curious about this syntax:
<variable>=function(){...}

I'm not finding a definition of this syntax, but I see it used at this
website:
http://www.htmldog.com/articles/suckerfish/dropdowns/

Here's the usage (in a few different lines) I found there:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Thanks!

Jim

The syntax variable = function() {...} simply put is this:

You are creating a function literal, which is another way to create
functions. It's similar to the function statement, however in this
case it is used as an expression rather than a statement and a function
name is not required.

The implications of this usage is that you can dynamically create
functions.

There is another way of defining functions through the use of the
Functions(). But it can get awkward pretty quickly.

Oct 13 '05 #2

sneill

If you think of everything in JS as an object its easy to see what's
happening here. Quite simply you're creating a new object of type
function. The "function()" declares a 'function' object and the curly
braces defines the function body.

Hope that helps.

Steve

Oct 13 '05 #3

Michael Winter

On 13/10/2005 21:17, Jim Moon wrote:

I'm curious about this syntax:
<variable>=function(){...}

What you have there is a function expression.

Function declarations:

function identifier() {
}

are parsed into function objects before execution begins[1]. This is why
one can call a declared function before its definition in the source.

myFunction(); /* No problem calling this here */

function myFunction() {
/* ... */
}

Function expressions are different in that they only create function
objects /if/ they are evaluated. This means that control structures can
prevent them from being created at all, or repeatedly evaluate the
expression to create several distinct function objects from the same code.

var myFunction;

if(false) {
myFunction = function() { /* ... */ };
}

Here, a function object won't be created because the code branch
containing the function expression will never be entered.

This feature affords tremendous flexibility to the author.

Like function declarations, function expressions can be given identifiers.

var myVariable = function myFunction() {};

However, the identifier is only for use within the function itself; it
allows the function to refer to itself.

[snip]

Mike
[1] To be more precise, function declarations are parsed when
their containing execution context is entered. That is,
global function declarations are parsed immediately, but
inner functions are only parsed when their outer function is
called. Moreover, they are reparsed on each invocation of
that outer function.

function myGlobalFunction() {

function myInnerFunction() {
/* ... */
}
/* ... */
}

When interpreted, the function, myGlobalFunction, will be
created immediately. However, the function, myInnerFunction,
will not exist yet.

When the outer function is called, the inner function will
then be created before statements within myGlobalFunction are
executed. When the scope of myGlobalFunction is left, the
inner function will be destroyed.
Incidentally, variable declarations work much the same way.
Declared variables within a particular execution context are
created before any code is executed. If an initialisation is
included with the declaration

var myVariable = ...;

the variable will exist from the start, but actual
assignment will not occur until that point in the code is
reached and evaluated.

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

Oct 13 '05 #4

Lee

Jim Moon said:

Hi.

I'm curious about this syntax:
<variable>=function(){...}

I was going to explain that since there is no name between the
"function" keyword and the parens, that this is creating an
anonymous function and assigning it to the variable. That led
me to try the following:

<html>
<body>
<script type="text/javascript">
var alpha=function beta() { alert("Hello, world!")}
alpha();
beta();
</script>
</body>
</html>

This behaves differently in IE and Firefox. In IE, the function is available by
either name, but in Firefox, "beta()" is undefined. I can't imagine why this
would ever matter, but I found it interesting.

Oct 13 '05 #5

Michael Winter

On 13/10/2005 23:05, Lee wrote:

[snip]

var alpha=function beta() { alert("Hello, world!")}
alpha();
beta();
[snip]
This behaves differently in IE and Firefox. In IE, the function is
available by either name, but in Firefox, "beta()" is undefined. I
can't imagine why this would ever matter, but I found it interesting.

That's why I thought to mention it briefly in my post.

The Identifier in a FunctionExpression can be referenced from
inside the FunctionExpression's FunctionBody to allow the
function to call itself recursively. However, unlike in a
FunctionDeclaration, the Identifier in a FunctionExpression
cannot be referenced from and does not affect the scope
enclosing the FunctionExpression.
-- Section 13, ECMA-262 3rd Ed.

IE is wrong, as is any other implementation that does the same. They'd
probably call it a 'feature', though. ;)

Another interesting test is this:

if(true) {
function a() {
alert('Hello world!');
}
}
a();

This should fail as the function, a, is a function expression /not/ a
declaration. This is because function declarations are only permissible
at global scope, or inside a function body (but still outside block
statements), so this should be parsed as part of an expression statement.

Most browsers don't 'pass'.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

Oct 13 '05 #6

Duncan Booth

Michael Winter wrote:

Another interesting test is this:

if(true) {
function a() {
alert('Hello world!');
}
}
a();

This should fail as the function, a, is a function expression /not/ a
declaration. This is because function declarations are only permissible
at global scope, or inside a function body (but still outside block
statements), so this should be parsed as part of an expression statement.

I disagree. You should actually get a syntax error for the above code.

Expression statements are not allowed to begin with either '{' or
'function', so the 'function' here cannot begin an expression statement and
there is no other production possible.

Oct 14 '05 #7

Michael Winter

On 14/10/2005 08:50, Duncan Booth wrote:

[snip]

Expression statements are not allowed to begin with either '{' or
'function' [...]

Oops, yes. Good point. I should have looked at the grammar for an
ExpressionStatement again.

Still, most browsers do not parse it correctly.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

Oct 14 '05 #8

Jim Moon

Thank you for all the great insight, you guys!

Jim

Oct 14 '05 #9