CODEWITHSUNDEEP
javascriptfunctionsyntax
user3048961
user3048961

Reputation: 25

Decoding the JavaScript syntax of function(event) {}

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

Upvotes: 2

Views: 134

Answers (4)

Matt
Matt

Reputation: 75317

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 :).

Upvotes: 4

Hans
Hans

Reputation: 2800

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.

Upvotes: 0

LittleSweetSeas
LittleSweetSeas

Reputation: 7054

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.

Upvotes: 0

Joe
Joe

Reputation: 47609

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.

Upvotes: 0

Related Questions