I have the following scenario
var bar = (function () {
function foo() {
console.log("Hello World");
}
function bar() {
foo();
}
return bar;
} ());
// override foo before the call
bar();
Since foo is being called from the bar function which is returned from inside the a closure, it can be considered that foo is acting like a private property.
I want to know if it is possible to override the foo function before the bar is called? How many ways can it be achieved?
Here is something that is tried but I was unable to achieve the result.
var bar = (function () {
function foo() {
console.log("Hello World");
}
function bar() {
foo();
}
return bar;
} ());
var _bar = (function () {
function foo() {
console.log("Hey there");
}
return bar;
} ());
_bar();
I want to know If it is possible to override the foo function before the bar is called? How many ways can it be achived?
No, not and keep/reuse the current functionality of bar. You could completely replace bar, but that's not particularly useful.
foo is entirely private to the context in which it was created. bar has access to it, but nothing else does (well, okay, foo has access to itself). There's no way to reach into the execution context bar closes over and change its foo binding unless something explicitly enables that, which nothing in your example does.
Related
Learning JavaScript Fundamentals, confused on what the function calls return.
I have an idea of f.bar returns 7 because when the f object is created it gets access to functions of Foo that have the "this" keyword. Also I believe f.baz returns an error because this function is only available locally and does not use the "this" keyword which makes it unavailable outside Foo. f.biz I am confused but I do know the Prototype keyword allows for inheritance of Foo properties.
An explanation for each function call would be awesome, thank you everyone!
var Foo = function(a){
this.bar = () => {
return a;
}
var baz = function(){
return a;
}
Foo.prototype = {
biz: () => {
return this.bar();
}
}
}
var f = new Foo(7);
f.bar();// what does this return?
f.baz(); // what does this return?
f.biz(); // what does this return?
As it is now, only the bar function will work as intended.
The baz function is in a local variable, so it's only accessible inside the Foo function as baz but not as this.baz (variables and instance properties (this.whatever) are not connected in any way).
The case of biz is a bit more complicated. Normally, that's more or less how you'd create a prototype method, but you did it in the wrong place. It should be outside the function, because the way it is now, it's:
reassigned on every call of new Foo() (unnecessary)
assigned only after the current instance is created, so it will take effect only on the next instance (also if you used a in it (which you shouldn't), you'd find that it always has the a of the previous call)
You also don't want to use an arrow function when you want to "let JS set this" (arrow functions copy their this from where they were defined).
So, to make biz work, you have to do this:
var Foo = function(a){
this.bar = () => {
return a;
}
}
Foo.prototype = {
biz: function (){
return this.bar();
}
}
var f = new Foo(7);
console.log(f.bar());
console.log(f.biz());
I have two functions in one module:
export function foo() {
console.log('foo');
}
export function bar() {
foo()
}
Now I want to test bar(), set a spy on foo() and assert for it to be called. How can this be achieved?
EDIT/update: Sorry had bar and foo backwards.
The way the module is currently structured.
When the code is executed, the bar reference inside function bar is resolved against the local implementation. You can't modify that since it's outside of the module code. There's no access to the intervals.
Have you tried using code like this for the test file?
let obj = {};
obj.bar = function () {
this.foo();
}
obj.foo = function() {
...
}
export default obj;
david sharif made a JS quiz which pretty much looks like-
var foo=1;
function bar(){
return foo;
foo=10;
function foo(){}
var foo =5;
}
typeof bar();//?
In my understanding, functions are hosited first and then variable declared inside. the hosited form of the function would be something like (correct me if i am wrong)-
var foo=1;
function bar(){
function foo(){}
var foo;
return foo;
foo=10;
foo =5;
}
typeof bar();//?
why typeof bar() is function not undefined?
Is this because of, at the time of function execution, it finds the first foo (which is a function) and returns happily without continuing search. Or something else?
Appreciate your time.
I found the answer in David Shariff blog.
"Shamelessly copied from his blog"-
Even though foo is declared twice, we know from the creation stage that functions are created on the activation object before variables, and if the property name already exists on the activation object, we simply bypass the declaration.
Therefore, a reference to function foo() is first created on the activation object, and when we get interpreter gets to var foo, we already see the property name foo exists so the code does nothing and proceeds.
If this sound like greek, read the whole blog
The Function Declaration "shadows" the var statement.
Paste this in to your console:
var foo = function(){}
var foo
typeof foo
This is how the code "looks like" to the Interpreter after compiletime:
var bar = function bar(){
var foo = function foo(){}
foo
return foo;
// never reached
foo = 10;
foo = 5;
}
var foo;
foo = 1
typeof bar();//"function"
Function declarations are evaluated upon entry into the enclosing scope, before any step-by-step code is executed. The function's name (foo) is added to the enclosing scope (technically, the variable object for the execution context the function is defined in).
Example 1
From this example wecan see that even we are declaring foo after the return statement, we can still get foo returned.
function bar() {
return foo;
function foo() {} // this will get initialized before the return statement.
}
console.log(typeof bar()); // this will be function
Example 2
From this example we can see that if we are declaring our variables in a normal way after the return statement, they will not execute(assigned).
Declare function after return.
function bar() {
return foo;
var foo = function() {} // this will not get assigned
}
console.log(typeof bar()); // this will be undefined
Declare number after return
function bar() {
return foo;
var foo = 12; // this will not get assigned
}
console.log(typeof bar()); // this will be undefined
Example 3
Now let's walk through a messier example line-by-line.
function bar() {
return foo;
function foo() {} // <-- initialize foo as a function
var foo = 11; // <-- this will not get assigned
}
console.log(typeof bar()); // function
I hope the above example will not only answer you question but also give you a better understanding of:
var foo = function() {} vs function foo() {}
Does a Javascript self executing function work like a compiled program. I.e can you declare some function after a named anonymous function within a self executing function and have the named anonymous function locate the other function at runtime? I.e why does the following work?
I'd thought that you could not hoist named anonymous functions as they are only created during runtime so perhaps the self executing function "compiles" the code to make the named anonymous function available to the function that calls it!!
(function(){
var myFunc = function(){
var bar = "Bar";
return myFunc2() + bar;
}
function myFunc2(){
return "Foo ";
}
})()
or even
(function(){
function myFunc(){
var bar = "Bar";
return myFunc2() + bar;
}
var myFunc2 = function(){
return "Foo ";
}
window.fooBar = myFunc();
})()
console.log(fooBar);
That particular example works because myFunc2 is never called because myFunc is never called.
In general though, the normal rules for JS scope, hoisting and timing apply:
A variable must be populated before you use it, not before you define a function that will use it when called.
Lets see what actually happens in your code.
1.you have a function that performs a variable assignment:
var myFunc = ;
2.you declare a function. (But don't yet invoke it)
3.you assign myFunc to window.foobar.
4.And you invoke the function you were defining.
Now, these steps happen:
myFunc gets a function as its value.
myFunc2 gets defined.
window.foobar gets the result of calling myFunc().
so what happens is, myFunc() returns the result of invoking myFunc2() and appends its result to bar.
Thus, the value of window.foobar will be "foobar".
(no, this is not how compiled programs work)
(function(){
var myFunc = function(){
var bar = "Bar";
return myFunc2() + bar;
}
function myFunc2(){
return "Foo ";
}
})()
After some hoisting this becames:
(function(){
var myFunc;
function myFunc2(){
return myFunc2() + bar;
}
myFunc = function(){
var bar = "Bar";
return "Foo ";
}
})()
And actually this will work if you call myFunc(); and log the returned value from myFunc2 you will get Foo Bar.
When hoisting named anonymous functions(which is actually function expression), only
var myFunc (= undefined); is hoisted. Then the assignment stay at the same level.
Also you cant refer this function as self execution function(because self executed function is actually recursion). This is Immediately Invoked Function Expressions.
And #Quentin said the rest: A variable must be populated before you use it, not before you define a function that will use it when called.
Is this even possible?
function foo() {
// do stuff
}
foo.prototype = {
// stuff...
bar: function() {
// do some things with this, where this refers to foo
},
bar.prototype: {
// set some definitions for bar to work with.
// Where does "this" go and what does it refer to?
}
}
No. You'd need to use
function bar() {...}
bar.prototype = {...};
function foo() {...}
foo.prototype.bar = bar;
Although this won't work. There is no reason to put the bar constructor on foos prototype, because when instantiating bar objects by using new ((new foo()).bar)(), there will be no reference to the foo instance. You could equally use new foo.prototype.bar().