Decoding the JavaScript syntax of function(event) {}

Question

I've just come across this little snippet of JavaScript code online:

exampleSocket.onopen = function(event) { // rest of code here;}

And I'm rather confused about the function(event) part, as there are no comments for me to analyze. (Who needs comments when you're designing bi-directional duplex connections? Haha ).

What exactly is function(event)? I always thought you had to define a function name with the function in javaScript. Is this an example of bad code? Additionally, the (argument-parameter-whatever) 'event' isn't even defined anywhere else in the code. Just bam. There it is. Is it necessary to define that, or is (event) a special predefined value? Lastly, if you were to replace (event) with some other value like (e), would the code still work?

Thanks

Yes you can replace event with e, that is just a variable name. But probably the function is triggered by an event. And the function has a name in the form of a variable `exampleSocket.onopen`. — putvande, Nov 29 '13 at 10:53
@putvande Strictly speaking, that's not actually the function's _name_. — Neil, Nov 29 '13 at 11:07

score 4 · Accepted Answer · edited May 23 '17 at 12:12

What you've got there is a function expression, not a function statement.

In a function statement, the name is mandatory. In a function expression it is optional. A function expression with a name is called a named function expression. A function expression without is called an anonymous function

There are a number of subtle differences between all these different methods of declaring a function which are covered in this question; var functionName = function() {} vs function functionName() {}

What you're doing here is setting the onopen property of exampleSocket to a function (expression). Note that you are not running that function at all; you are simply declaring it, and saving a reference to it in exampleSocket.onopen.

This means that someone can execute that function when they want to by calling;

exampleSocket.open();

They can pass a parameter to the function, which you can use inside the function using the event variable (and to answer your question; event is not a special word. You can call it anything).

exampleSocket.onopen = function (event) {
    console.log(event); // will log "hello"
};

exampleSocket.open("hello");

The fact the variable event isn't used anywhere will likely mean the developer has named the argument to say "hey, look, you can use this if you want to", but hasn't in his actual implementation.

You don't have to declare the variable yourself. It is declared already by being named in the argument list, and it will be initialized to a value when someone passes an argument when they call the function.

Note that we could define this event handler using a function statement;

function foo(event) {
    console.log(event);
}

exampleSocket.open = foo;

... or via a named function expression:

exampleSocket.open = function foo(event) {
    console.log(event);
};

To confuse things (don't worry about this; it's a quirk of JavaScript) the name of a named function expression is only available inside the function itself;

exampleSocket.open = function foo(event) {
    console.log(event);

    console.log(typeof foo); // you'll get "function"
};

console.log(typeof foo); // you'll get "undefined"

... but in a function statement, you'll be able to access the name both inside and out.

I hope this helps... it's a bit of a "brain dump" of information :).

So, does that mean that any anonymous function expression that I create with the syntax function(whatever) is an, um, event handler? — user3048961, Nov 29 '13 at 11:12
I notice that you've enclosed a semicolon after the function brackets. Is that necessary for functions like these? — user3048961, Nov 29 '13 at 11:13
@user3048961 You can create anonymous functions and keep references to them in variables or object properties. In many ways that works just as named function would. This has nothing to do with event handlers. — Tibos, Nov 29 '13 at 11:13
@user3048961 The semicolon is needed in some cases. Here is an answer that explains why: http://stackoverflow.com/questions/20048093/putting-at-the-end-of-a-function-definition/20048209#20048209 — Tibos, Nov 29 '13 at 11:16
O.K., using my head a bit more...since this is part of an expression, that means that assignment is involved right? And semicolons are the status quo to terminate assignments. Oh, saw your comment. — user3048961, Nov 29 '13 at 11:16
@user3048961: I've expanded my answer to show how you can define an event handler using all types of functions. Tibos shows a great link as to why you need semi-colons when declaring function expressions, but not function statements. Note that an "event handler" is just a loose concept for assigning a function to be executed when an event fires later. For example, it's the assignment of a function to a `onsomeevent` or passing a function to a `addEventListener()` that makes it an event handler, not simply the act of declaring it. — Matt, Nov 29 '13 at 11:22
Definitely a "brain dump" lol, I'm getting the vacuum cleaner now to take it all in. Very cool information. — user3048961, Nov 29 '13 at 11:31

score 0 · Answer 2 · edited May 23 '17 at 12:05

This is an anonymous function. A function is a value, and you can declare and store functions like this. More information on that syntax in this question.

Reading the code (I don't think it needs any more comments than it already has), you are writing a handler function which is called when the socket opens. The socket open event will be passed to the function in the variable event.

Why event? Because the API, whatever it is, expects to pass in an argument that represents the 'open' event.

score 0 · Answer 3 · answered Nov 29 '13 at 10:55

It's a simple and common JS event-binding function.

It attach an anonymous function to the "open" event of "exampleSocket". When such event is fired the declared function is called.

Each event may have some parameters, which contain additional info about the event itself. You can name that parameter the way you want ("event","e" or "anythingElse") and then you can refer to it in the anonymous function body.

score 0 · Answer 4 · answered Nov 29 '13 at 10:58

You are basically assigning a function value to exampleSocket.onopen, which can then be called elsewhere. Imagine something like this:

var obj = {};

obj.onsomething = function(a, b, c, d) {
    alert(a+b+c+d);
};

obj.onsomething(1, 2, 3, 4);

In this case, I gave obj.onsomething a function that takes 4 parameters (should be numbers) and alerts the sum. Then I can just call obj.onsomething with 4 parameters.

So the function that you assign to exampleSocket.onopen will get called when it is appropriate (for example, when the socket is open).

Hope that helps.

Decoding the JavaScript syntax of function(event) {}

4 Answers4