This question already has answers here:
React Function Calling Methods
(3 answers)
Closed 8 months ago.
I have noticed that (at least in React) there are different ways to call a function. I'd say:
onClick={myFunction}
onClick={myFunction()}
onClick={()=>myFunction}
onClick={()=>myFunction()} /*Not sure if I've seen this type*/
Being the case all are correct, what are the difference between them?
onClick={myFunction}
Assigns myFunction to onClick.
onClick={myFunction()}
Calls myFunction immediately and assigns the return value (which needs to be another function) to onClick.
This is often an error caused by people not understanding how () works and wanting the previous syntax.
onClick={()=>myFunction}
Creates a new function and assigns it to onClick.
The new function mentions myFunction but doesn't do anything with it. It is a noop.
It is always a mistake.
onClick={()=>myFunction()}
Creates a new function, which calls myFunction, and assigns it to onClick.
This is usually a waste of resources. It is useful only if myFunction would do something with the event object that onClick passes to the event handler when called and you want to prevent that.
If you were to pass arguments to myFunction (which this example does not) then it would be more generally useful.
Related
This question already has an answer here:
Mystery of "this" in ReactJS
(1 answer)
Closed 3 years ago.
We all know that this will be undefined according to the given code of React. We have many solutions for this problem, like binding, arrow function, etc. I want to know the reason behind this behavior. Please, explain the reason for the behavior of this reference, instead of solutions.
class Foo extends Component {
clickHandler() {
console.log(this);
}
render() {
return <button onClick = {this.clickHandler}> Click Me </button>;
}
}
1)this.clickHandler=this.clickHandler.bind(this) is returns a new function,in which reference to 'this' will refer to the function this is the way of saving the current value of this which is scope during the call to the constructor so that it can be called later the function is called.
if our function dont require access to the state at your component then sure you dont need to bind this.
2)arrow functions automatically bind this, that’s why we don’t need to use .bind() method.
This question already has answers here:
Why can I use a function before it's defined in JavaScript?
(7 answers)
Closed 5 years ago.
I'm currently a teacher's assistant in a web development course. Today, a student asked for help with his homework, in which he'd used setInterval, passing as the first parameter a function which he didn't define until a few lines of code later. I told him that wouldn't work, as the function would be undefined by the time the interval setting code was reached.
To my surprise, it worked perfectly. I've been trying to research this and am coming up blank: does JavaScript actually wait until the first execution of the callback to even see if the function name passed to it exists? That seems so counter-intuitive, but I can't imagine any other reason it would have worked. Where can I find out more about this unexpected behavior?
It depends:
If its a function expression :
//callback not defined ( exists but undefined)
var callback=function(){};
//callback defined
If its a function declaration :
//callback is defined
function callback(){}
//callback is defined
This is called hoisting, so vars and functions are moved to the top.
It also depends on the passed function too:
setInterval(callback,0);//doesnt work, callback is *undefined* in this moment
setInterval(function(){ callback();},100);//does work as callback is just called before being referenced.
var callback=function(){};
This question already has answers here:
What is the use of the JavaScript 'bind' method?
(23 answers)
Closed 6 years ago.
In some part of onInit function of a controller in a SAPUI5 application there is an auto generated code like this:
this.getView().addEventDelegate({
onBeforeFirstShow: function() {
// Some codes
}.bind(this)
});
Now my question is what does .bind(this) mean? What does it do? Is it a pure JavaScript code or it is related to SAPUI5?
Yes, it's pure JavaScript code, you can learn more about what bind is and does here
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
In this case what it does is basically binding the current this to that function, so when onBeforeFirstShow is called, the this inside that function will be the one passed to the bind function.
You may also want to look at the new arrow function syntax in ES6, it auto binds the current this so bind(this) is not necessary.
It binds the listener of the function to the current class, then when you use this pointer inside of the onBeforeFirstShow function, the this pointer refer to encapsulated class and you can access to its members.
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
Syntax
fun.bind(thisArg[, arg1[, arg2[, ...]]])
Reference to Mozilla Developer Network
This question already has answers here:
When to use () after a callback function name? [duplicate]
(5 answers)
Closed 6 years ago.
Well I'm starting with jQuery and I'm wondering what is the difference between writing a function with or without parentheses inside a function.
For example if I have the following function:
function test(){
alert("pen pineapple apple pen");
}
This:
$(document).ready(test);
and this:
$(document).ready(test());
both show the same result: "pen pineapple apple pen"
Putting parentheses () at the end of a function causes that function to be invoked immediately, and use its return value in the expression.
This code $(document).ready(test); is using test as a callback function. It essentially says: when the document becomes ready, call the function that I'm providing you with (test).
This code $(document).ready(test()); is immediately invoking the function test, having it return a value, and then passing that value to the ready method. It's possible that test is returning a different function here, which in turn will act as the required callback function. It could also just be an error though, with someone inadvertently including the parentheses when they shouldn't have.
This question already has answers here:
What is a callback function?
(22 answers)
Closed 7 years ago.
$("p").click(function(){
// action goes here!!
});
In the above jquery code why we pass a function() to the event?
It's called a callback or an anonymous function that you want executed when the event happens. You'll notice it's not just jQuery, but almost all Javascript frameworks will expect one. It's usually whenever you are binding to events, executing functions that might take a while to return, or functions that execute other functions.
But you can also provide it a function name if you want.
function clickedMe(){
alert("Something clicked me");
}
$("p").click(clickedMe)
Because the click method is defined this way (the method parameter ).
See:
click
You have to understand its not a default JavaScript method, this method is defined in the JQuery so you have to call it as it is defined in the method.
Behind the scene actually when JQuery registering any event with DOM its only says to do one thing which is calling your provide method.
The simplest answer: according to documentation.
https://api.jquery.com/click/
When a user clicks a p element, jQuery is supposed to fire an event and execute something. How is it supposed to pass actions, if not using functions?