How do parameters named as strings work in Javascript?

Question

How does Javascript work with arguments as string and why is this done? For example:

window.addEventListener('hashchange', function () {

I understand how this helps with minification in the case of, for example, Angular (which must match arg names like $scope from another file) but this is native Javascript. And how does this work 'behind the scenes' (does the JS interpreter, for example, analyze the strings and substitute them for actual arguments)?

First day on Stackoverflow, apologies if this is a repeat question :)

Javascript is a funny language! But the fact is its really helpful to know such stuff — Akshay Khandelwal
– Akshay Khandelwal, Commented Nov 21, 2015 at 17:29
That's because its a loosely typed language. It does not look for types while setting parameters or variables. :) — Akshay Khandelwal
– Akshay Khandelwal, Commented Nov 21, 2015 at 17:29
this was done in order to simplify and make it more human. For instance you do not set the type of a child to male or female before its birth. You only know it after it's born. That is how Javascript is meant to be unlike any other language where you do int a = 10; in javascript you always do var a and assign the value as and when required which may be 10 or "10" or true/false or {} or [] — Akshay Khandelwal
– Akshay Khandelwal, Commented Nov 21, 2015 at 17:32
Is your question on how addEventListener() works, what the first argument means or how AngularJS' dependeny injection (resolution of the argument name $scope to inject the proper reference) works? — try-catch-finally
– try-catch-finally, Commented Nov 21, 2015 at 20:14
Its about how I parameters passed as strings work in javascript. The addEventListener() is given as an example and AngularJS is mentioned to contrast how it uses strings to preserve argument names. — Warrshrike
– Warrshrike, Commented Nov 21, 2015 at 22:17

transistor09 · Accepted Answer · 2015-11-21 23:06:44Z

1

How are arguments passed

Let's say you define a function as follows

function Foo(argument1, argument2, argument3) {
    return argument1 + argument2
}

When the function is called, the arguments get assigned respectively as passed, substituting undefined for any that are missing. For illustration purposes, you can imagine it as the following code (although it doesn't really happen anywhere and any expressions you have will be evaluated in the calling scope).

// somewhere in the script
foo('bar', 'baz' + '1')
...
// in scope of function Foo, between its { and }
var argument1 = 'bar', // these lines never actually exist
    argument2 = 'baz1', // but variables are created as if they were
    argument3 = undefined
return argument1 + argument2

How the script engine actually handles this situation is an implementation detail and you needn't worry about it.

Also, it doesn't matter at all whether you use a literal string or pass a variable that has a string.

var a = 'like this', b = 'and this'
foo('like this', 'and this')
foo(a, b) // the function has no way to differentiate these 2 lines

As a side note, this is perfectly safe, because strings are immutable. Assigning to them inside the function will not propagate back to the outer scope (even if they are String objects). With JavaScript passing a string is actually the same as passing an integer.

Why would you use a string as an argument

There are several cases where this design decision would make sense. In the case of addEventListener it is useful because you can easily make your own events that you can be sure won't trip over some browser's internal mechanism.

Should the argument names match

Absolutely not. What's inside the function argument list is completely isolated of any interaction with other code, but when you're maintaining a code base you want your code to be readable and consistent. This is matter of agreement, not something enforced by the language.

edited Nov 21, 2015 at 23:06

answered Nov 21, 2015 at 20:21

transistor09

5,1782 gold badges27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Warrshrike Over a year ago

Is that all that's happening? So the parameter really is being treated as a string? That is to say, to check what type of even listener it is, the implementation of eventListener would contain something like this: if (type == 'hashChange'). I was under the impression some advanced voodoo was taking place rather than it simply being a string literal.

Warrshrike Over a year ago

Also if that's the case, why isn't something like an enum used to select the type of event? In my own code, using strings as 'selectors' has always seemed shoddy.

transistor09 Over a year ago

@Warrshrike function parameters are not type checked. If the algorithm is sensitive to type you have to check it yourself. Your question doesn't really touch on this though, but from the perspective of the language it's completely valid to pass integers, floats, strings, arrays or objects and they appear in the function unmodified.

yolanda_dlh · Accepted Answer · 2015-11-21 19:09:46Z

0

The first parameter in the addEventListener method is used to specify the type of the event handler like "click" or "mousedown".

Internally, it is attached an object (the event handler) that listens for incoming events in order to handle them or respond to that specific event. These events are triggered as a result of the interaction with the web application, for example the user clicked a button.

In the case of AngularJS it is followed the MVC (Model-View-Controller) software architecture pattern: https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller, so the $scope is the glue between the model and the view.

In AngularJS it is used to access to the data-model. The data-model in AngularJS has the same functionality as the document object but with the advantage that you can define diferent scopes levels to access the DOM.

answered Nov 21, 2015 at 19:09

yolanda_dlh

431 gold badge1 silver badge7 bronze badges

1 Comment

Warrshrike Over a year ago

I'm curious as to why JavaScript uses this pattern of using strings to determine the event handler type (I assume something like if (eventType == 'hashChange') is present inside the function). I haven't really seen this used anywhere else. For example, Java frameworks tend to have different methods for types of event handlers and some libraries have enums.

Collectives™ on Stack Overflow

How do parameters named as strings work in Javascript?

2 Answers 2

How are arguments passed

Why would you use a string as an argument

Should the argument names match

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

How are arguments passed

Why would you use a string as an argument

Should the argument names match

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related