Method of calling functions in JavaScript [duplicate] - javascript

This question already has answers here:
Semantic meaning of writing functions
(3 answers)
var functionName = function() {} vs function functionName() {}
(41 answers)
Closed 8 years ago.
So, lets say I have a little program that gives the user an alert that says Hello, that is inside of a function. Everyone says that you should call functions like this:
var thefunct = awesomefunct();
Yet it still works perfectly fine like this:
awesomefunct();
What is the difference between the two, and why couldn't I just use the second one? I know that both methods work but all my programmer friends tell me to use the first one. Why?

If you run
awesomefunct()
You call the function. So when you type:
var thefunct = awesomefunct();
You run the function and assign the result to thefunct variable.
after that just typing
thefunct
Wont call the function. So there is not that much differencebetween the 2 other than that you catch the return value on the first 1.

The difference is that the return statement of the function will be assigned to the variable thefunct in the first one, whereas the second just runs the function and doesn't store the return statement.
Say I have a function like this:
function doSomething(a, b) {
return (a*b)
}
It would be a good idea to store the result in a variable, because the function returns the result, it doesn't assign it to a previously declared global variable.

Do you care about the return value? Use:
var thefunct = awesomefunct();
Don't care about the return value? Use:
awesomefunct();

You may be misunderstanding what your code is doing.
Writing thefunct is not calling the function awesomefunct, your function has already been called when you wrote var thefunct = awesomefunct(); in which case thefunct now contains the return value of awesomefunct

The first type of function call:
awesomefunct();
runs the function, but the return value (if any) is not stored anywhere.
The second type of function call:
var thefunct = awesomefunct();
runs the function, and stores whatever the function returns (0, "I'm awesome", an object, whatever it may be) in the variable thefunct.

Related

JavaScript function not working when passing variable instead of hard coded value [duplicate]

This question already has answers here:
Using a string to access a variable
(3 answers)
Closed 3 years ago.
I have a JS function as below
// A simple array where we keep track of things that are filed.
filed = [];
function fileIt(thing) {
// Dynamically call the file method of whatever 'thing' was passed in.
thing.file();
// Mark as filed
filed.push(thing);
}
Now, function fileIt(thing) is working well when called as below
fileIt(AuditForm);
Whereas, its giving error at line thing.file(); when i am trying to pass a variable like below
var formID = obj.id;
fileIt(formID);
Variable formID has same value and i.e. "AuditForm" what's wrong here. Kindly suggest.
If obj.id is the string AuditForm, then you have no choice but to use dynamic property notation on the global window object, or use eval if you didn't declare AuditForm with var on the global scope:
If you declare AuditForm with var on the global scope:
fileIt(window[formID]);
If you don't:
fileIt(eval(formID));
Do note that eval is a very poor option, as if obj.id can be interpreted as other code, e.g. another eval call which will be evaluated, then malicious operations can be performed. Example:
const obj = {
id: "eval('alert(\"Inside an eval script!\")')"
};
eval(obj.id);

Javascript Closure -Local variable nested function [duplicate]

This question already has answers here:
Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
(7 answers)
Closed 6 years ago.
I am trying to use a variable x defined inside a function P whose value I am trying to set in another function. It always comes undefined.
I tried applying my mind to use closure but it's just going off my head. It does not gives me a string rather a object.
The logic is as follows.
function P(i){
var x;
if(i!=null){
//this pulls the data correctly and i could see it in network tab response.
var dataFromQuery=widgets.DATA.create({
url:"abc/cde",
queryTemplate :"/query"+i+ "?"
});
//we query the data and set the value as per the logic.
dataFromQuery.query(function(data){
if(data[0].name){
x=data[0].name; // this stays undefined , and i understand this is a new local variable x.Also the value is here and comes fine here so no issues with the data but i want to set it to the variable defined outside as x.
}
})
}
else{
x="somehardcode";
}
};
I have tried storing the result dataFromQuery.query(function(data){ to a var and then setting it to x but it again comes as a object, which i need as a string.
Thanks
I think you're looking for something like this:
var P = (function() {
var x;
function _P(i) {
//your internal logic here
}
return _P;
})();
Both xand _P are wrapped in the enclosure and scoped only to the auto-executed anonymous function. _P is returned and available as var P in the outer scope, but x will remain hidden.

Dynamically call function in javascript [duplicate]

This question already has answers here:
Calling function inside object using bracket notation
(2 answers)
Closed 6 years ago.
I rather have a seemingly trivial issue, but am not able to figure out an efficient approach.
I have a list of about 50 functions to be called such as :
globalClient.funcA(...)
globalClient.funcB(...)
globalClient.funcC(...)
My code should ideally dynamically create the name of the function (funcA / funcB/ funcC and then proceed to actually call that function. My approach below does not work (please note that these aren't exactly the actual names of the functions. I'm only giving these arbitrary names for simplicity of understanding):
var functionName = 'func'.concat('A');
globalClient.functionName
The second line is where it errors out. Now JS thinks that functionName itself is the name of the function. What I want it to do is resolve functionName to funcA and then call globalClient.funcA(...) instead.
I've thought about implementing a switch / case for this but I'm sure there is a far simpler appraoch. Any ideas?
You could use the bracket notation as property accessor.
globalClient[functionName]()
You can use the [ ] operator for accessing the properties.
var globalClient = {
funcA: function(){
console.log('funcA is called');
}
}
var functionName = 'func'.concat('A');
globalClient[functionName]();

What is the difference between writing a function with or without parentheses inside a function in jQuery? [duplicate]

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.

why does this code execute my function soon as the document is loaded? [duplicate]

This question already has answers here:
In JavaScript, does it make a difference if I call a function with parentheses?
(5 answers)
Closed 7 years ago.
I'm trying to understand why this code below executes my function as soon as the document is loaded:
var list = document.getElementsByTagName('li');
function yep() {
window.alert('yep');
}
list[0].onclick = yep();
But this does not:
list[0].onclick = yep;
Why does () make a difference when executing a function in this situation?
The parenthesis () execute function immediately. On your second line you are assigning the value of list[0].onclick to the function name but not executing it.
Putting () after a reference to a function means that you want to call the function. Leaving them off means you just want to work with the reference to the function as a value in and of itself.
yep is a reference to a function.
yep() is a directive telling the Javascript engine to execute the yep function.
That's why one executes immediately and the other does not.

Categories

Resources