Naming convention for method/functions in Javascripts

Question

I have a question regarding the naming convention of method/functions in JavaScript. I have seen where most events names start with "on" for example "onClick". If onClick calls a function, should that function name precedes with "on" ?

For example:

<Button onClick={() => onClose()}>CANCEL</Button>

onClose(){
do something...
}

or is it oK to have:

<Button onClick={() => close()}>CANCEL</Button>

    close(){
    do something...
    }

Answer 1

I have seen where most events names start with "on" for example "onClick".

They don't.

• Very old-school HTML attributes used to bind event handlers start with on
• Old-school event binding with JS used on on the property names (window.onload = function () ...)
• React uses on to bind its event handlers in JSX

Modern JS uses addEventListener which just accepts the event name as an argument (addEventListener("load", function () ...).

---

If onClick calls a function, should that function name precedes with "on" ?

There is no requirement that is does so.

I have not seen any coding convention which does so.

Answer 2

The method/function name should tell anyone who reads the code what that method/function does.

Answer 3

on[name] naming conversation is/was used to make clear that if you assigned a function to that property that this function will be called for the event [name].

But the function that is called for that event would not have the on prefix. You in general name the function by the action it does. So if that function closes something you call it close if that function is called, when e.g. the dialog is closed you might call it onClose

Answer 4

When it comes to naming convention you have to be careful not to hide other function with your function. Also, recently I had problem with callback named close in global scope, that couldn't be called due to other, browser native, function existing in scope. So usually I stay away from names like close, open etc. and instead use more discriptive names as closePopUp etc.

Answer 5

The onXyz convention you are talking about relates to the very old paradigm of setting up events either via HTML event attributes (as in your examples) or via properties of DOM objects in JavaScript (i.e. window.onload = ...). Both techniques have serious drawbacks and neither should continue to be used (use .addEventListener() instead).** In fact, event names themselves never actually start with on. For example, the click event is called click, not onclick, the on was meant to indicate what you wanted to do when click occurs. But, these two out of date techniques are unique to event registrations and not functions/methods in general, so the on paradigm isn't something you should worry about.

There are naming conventions for functions and methods:

• They should have verb-like names to indicate that they perform a behavior/task (whereas data properties should have noun-like names to indicate the information they store).
• If the function is meant to be called as a function or as a method of an object, it should be written in "camel case" (where the first word is all lower-case, but any/all additional words begin with a capital letter (i.e. doSomethingCool).
• If the function is to act as a constructor function (to be invoked with the new operator to create a new instance of an object), it should be written in "pascal case" (where each word starts with a capital letter). This convention alerts other developers that they should be calling the function with the new operator.