How to access a variable inside a function in javascript? - javascript

I am extremely new to javascript so apologize for questions that may be trivial ?
var foo = function () {
a = "10";
this.b = "20";
};
foo.c = "30";
console.log(foo.a); // undefined
console.log(foo.c); // prints 30.
var foo1 = new foo();
console.log(foo1.b) // prints 20
How to access var "a" ? Is it even possible ?

Actually, as long as you don't prefix the variable declaration with var it will be global:
var foo = function () {
a = "10";
this.b = "20";
};
foo();
console.log(a); // is 10
Compared to:
var foo = function () {
var a = "10"; // private scope
this.b = "20";
};
foo();
console.log(a); // is undefined

Using global variables:
var a = 10;
var foo = function() {
a = 15;
this.b = 20;
};
console.log(a); // equals 10
foo();
console.log(a); // equals 15
If you wanted to actually access the variable a within the function, much like your example:
var foo = function() {
a = 10; // private member
};
There is no way to access that private member.
Turns out when you declare a variable in this way, you have created a global variable. You can access it with console.log(a); and it will return 10. However if you use var a = 10; inside the function, you will not be able to access this member.

What you can do is return an object in your constructor that defines public members:
function Foo() {
var a = '10';
function getA() {
return a;
}
return {
'a': a,
'b': 20,
'getA': getA
};
}
var foo = new Foo();
console.log(foo.a) // 10
console.log(foo.b); // 20
console.log(foo.getA()); // 10

The code
console.log(foo.a);
console.log(foo.c);
implies that you believe that a would be set as the equivalent of foo.a = "10", that is setting a static field of the "class" foo. This is not the case in JavaScript.
a = "10";
This sets the global variable a to the value "10", creating a global variable slot if necessary. This type of global assignment should be avoided and is caught by tools like JSLint.
this.b = "20";
This sets the field of the object passed as the this parameter of the function to "20", creating the field slot if necessary. Note that if you call foo directly, e.g. foo(), without new, the global scope is passed as this and this.b will also create a global variable. This type of error can be caught by strict mode. If you execute in strict mode, undefined is passed in as the this parameter and this will throw an exception.
var foo1 = new foo();
This creates a new, empty, object with the __proto__ property set to the value of the prototype property of foo and then calls foo passing the new object as the this parameter. All fields of __proto__ appear as the default values of fields of the object. This leads to the convention of adding methods to the prototype object of the constructor function and initializing fields in the constructor function. Inheritance can be simulated by constructing an object with the ancestor prototype object as its __proto__ value and assigning it to the functions prototype property of the constructor function. The constructor function would also call the ancestor constructor function (without new), passing its this as the constructor function's this parameter (using apply or call). This is all a bit awkward so ECMAScript 6 standardized this into a class construct which roughly translates to what I described.

Related

Why can't I assign a function to a variable using prototype?

I keep on trying to assign a function to a variable and I keep getting a message saying foo is not a function. I am not sure why it is saying that. When I invoke the method by itself it works, but when I assign it to a variable it won't work.
Can anyone please help me figure this out? Thank you!!!
Below is my code:
function Test(){
function foo(){
return "foo";
}
this.bar = function () {
var foo = foo();
console.log(foo);
};
}
var test = new Test();
test.bar();
The culprit is this line var foo = foo();. The statement var foo is redeclaring the local foo variable. By the time you try to access it with foo() it has become an undefined variable.
Rename the variable or the function and everything works correctly.
Following code will work. As Now we are not trying to assign same function variable to variable.
The problem is because JavaScript is function scoped. It is failing because this.bar function will try to evaluate foo first and foo is name of variable in this function so interpreter will try to execute the foo but foo is variable in this scope it will not consider foo mentioned above. Hence it fails.
Where as foo1 will work because when interpreter hits the term foo1 it will look for current scope and all parent scopes and it will get it.
function Test(){
function foo1(){
return "foo";
}
this.bar = function () {
var foo = foo1();
console.log(foo);
};
}
var test = new Test();
test.bar();
Error is at this line
var foo = foo();
Your variable foo has the same name as the function, that hides the function outside.
Renaming it will resolve the error.
var foo1 = foo();
There error you're seeing is from this line:
var foo = foo();
When you use var there you are saying that foo is being defined for the current level of scope (this.bar) - meaning it won't bubble up to Test. You can either rename the variable to something else:
var result = foo();
console.log(result);
or just forgo that variable altogether like this:
console.log(foo());
totally your choice.
If you are learning how to create and work with JavaScript objects, you may want to rewrite your code like so:
// This function constructs the object when called with new
function Test(prop) {
// Some arbitrary property
if (typeof prop === "undefined") {
prop = null;
}
this.prop = prop;
}
// The two functions
Test.prototype.foo = function() {
return "foo";
}
Test.prototype.bar = function() {
var foo = this.foo();
console.log(foo);
}
// Create the object and call foo
var test = new Test('p');
test.bar();
All JavaScript objects inherit the properties and methods from their
prototype. Objects created using an object literal, or with new
Object(), inherit from a prototype called Object.prototype. Objects
created with new Date() inherit the Date.prototype. The
Object.prototype is on the top of the prototype chain.
From: http://www.w3schools.com/js/js_object_prototypes.asp

Class loses "this" scope when calling prototype functions by reference

Can anyone explain to me why "b" returns undefined and how I can get around this problem? Why does the "this" scope get lost when I call prototype functions by reference?
MyClass = function(test) {
this.test = test;
}
MyClass.prototype.myfunc = function() {
return this.test;
}
var a = new MyClass('asd').myfunc();
var b = new MyClass('asd').myfunc;
// Returns "asd" correctly
console.log(a)
// Returns undefined??
console.log(b())
=== EDIT / SOLUTION ===
As plalx writes, the correct solution in my case is to use .bind(). So the result looks like this:
MyClass = function(test) {
this.test = test;
}
MyClass.prototype.myfunc = function() {
return this.test;
}
var a = new MyClass('asd').myfunc();
var b = new MyClass('asd'),
bfunc = b.myfunc.bind(b)
// Returns "asd" correctly
console.log(a)
// Also returns "asd" correctly!
console.log(bfunc())
You need to explicitely bind the this value if you want this behaviour.
var c = new MyClass('asd'),
b = c.myfunc.bind(c);
console.log(b());
By default, this will point to the leftSide.ofTheDot(); in an invocation, or simply the object on which the function was called.
Note: Calling b(); is the same as window.b();.
Binding every function to the object instance is possible but rather inefficient because functions will not get shared across instances anymore.
E.g.
function MyClass(someVal) {
var me = this;
me.someVal = someVal;
me.someFn = function () {
return me.someVal;
};
}
The line var b... is a function reference and you're not actually calling the function.
Here you are assigning to a variable a result of myfunc() function.
var a = new MyClass('asd').myfunc();
And here, you are asigning to b variable function reference, rather then runing it, and assign result to variable.
var b = new MyClass('asd').myfunc;
And finaly here:
console.log(b())
You trying to log result of function b and in that case b() isn't defined anywhere, only it is assigned reference to function.
Try this:
console.log(b); // It logs [Function]
But besides that, your question is hard to understand.
P.S. Use semicolons!

Object literal and static variable

Object literal is considered as a static object.
So, object literal should contain only static variable, but in the following piece of code
var obj = {
a : "hello",
foo : function(){
console.log(this.a);
console.log(obj.a);
}
};
I can access a, in a static way obj.a and in a non-static way this.a.
Is a a static variable?
I think you are confusing a bunch of different things.
You've created an object named obj that has a field named a. That field can be accessed as obj.a (or obj['a'] if you prefer). If you arrange for some other variable to refer to obj, then it's also available via that variable.
One way to arrange for some other variable to point to obj is to take a field of obj which is defined as a function/closure, and invoke it using "method" syntax, as in obj.foo(). That means that inside the body of foo, for the duration of that invocation, the special variable this will refer to obj. Therefore code within that function can access obj.a via this.a.
None of this has anything to do with static vs dynamic scope, or singletons, or "class" vs "instance" members, or any of that. It's just an object.
The object literal is not a static class, it's an instance of Object; therefore obj.a can't be static either. Perhaps the confusion lies in the fact that the {} notation actually creates an object:
typeof {
a : "hello",
foo : function(){
console.log(this.a);
console.log(obj.a);
}
};
"object"
It's equivalent to:
var obj = new Object();
obj.a = 'hello';
obj.foo = function() {}
Conclusion
Static properties only have a meaning in class-oriented languages, but the same concept of classes in JavaScript is arguably non-existent.
obj.a is "static", the way you refer to it. You would only use this in this way when using new obj() - so obj would have to be a function.
By default this refers to the parent object when used inside a function that is an object member. In the case of your code obj is the parent object.
An example of using prototypes and this:
var Obj = function(){this.a = "hi"};
Obj.prototype.foo = function(){
console.log(this.a);
}
Obj.b = "sth";
var myObj = new Obj();
myObj.foo(); // "hi"
console.log(myObj.b); // undefined
This is not so simple , check the
let baba = {
a: 12,
foo: function () {
baba.a = 13;
this.a = 14;
},
roo: function () {
alert("baba.a = " + baba.a + "\nthis.a = " + this.a);
}
};
var theApp = {
start_action: function () {
let sola = Object.create(baba);
sola.foo();
sola.roo();
let bola = Object.create(baba);
bola.roo();
}
}
$(document).ready(theApp.start_action);
first call to foo after a roo() call we get : 13, 14
second call to foo 13, 13

Assigning a private variable to the value of a same-named variable from its parent scope

Can a private variable within a child scope be set to the value of a same-named private variable from its parent scope?
Consider the following:
var foo = 10;
function bar () {
var f = foo, foo = f;
return foo;
}
bar() // Returns 10
Can this be done without using the placeholder variable f?
var foo = 10;
function bar () {
var foo = foo;
return foo;
}
bar() // Want 10 but returns undefined.
I would like a solution that does not pass any arguments to bar. I realize that this isn't important for any reason other than aesthetics.
In the second case, global variable is not visible since there is a local variable having the same name. In other words, local variable hides the global variable.
var foo = foo;
The declaration of foo ends only after reaching ;. But trying to initializing foo to foo itself is undefined since it hasn't reached it's ending point of declaration.
Yes, but you'll have to explicitly reference foo off of the parent scope. Usually that will just be this, but you'll have to be careful in situations where your function may have been invoked via apply or call. This, for example, should work:
var foo = 10;
function bar () {
var foo = this.foo;
return foo;
}
bar(); // 10
Edit: I need to make a correction, per #Felix' comment. this will indeed usually refer to the global scope, rather than the parent scope. Consider this for example:
var x = 'global';
(function () {
var x = 'inner';
(function() {
var x = this.x;
console.log(x); // 'global'
})();
})();

When I declare a variable inside a function, which object is it a property of?

So when I declare a variable outside the scope of any function, it becomes a property of the window object. But what about when I declare a variable inside the scope of a function? For example, in the following code I can treat x as a property of window, i.e., window.x, but what about y? Is it ever the property of an object?
var x = "asdf1";
function test() {
var y = "asdf2";
}
test();
It becomes a property of the Variable object associated with the function call. In practice, this is the same thing as the function call's Activation object.
I don't believe that the Variable object is accessible to running JavaScript code, though; it's more of an implementation detail than something you can take advantage of.
Access all local variables is a related question here on SO.
In order to declare a JS variable a property of an object you need to either use the new Object(); method or the {} syntax.
var variableName = new Object();
var variableName = {myFirstProperty:1,myNextProperty:'hi',etc};
Then you can assign child objects or properties to said variable object
variableName.aPropertyNameIMadeUp = 'hello';
variableName.aChildObjectNameIMadeUp = new Object();
As such the new variable object is associated with a method if it is within the method call.
Cheers
See following example (I have copy from other question-answer) very nice:
// a globally-scoped variable
var a=1;
// global scope
function one(){
alert(a);
}
// local scope
function two(a){
alert(a);
}
// local scope again
function three(){
var a = 3;
alert(a);
}
// Intermediate: no such thing as block scope in javascript
function four(){
if(true){
var a=4;
}
alert(a); // alerts '4', not the global value of '1'
}
// Intermediate: object properties
function Five(){
this.a = 5;
}
// Advanced: closure
var six = function(){
var foo = 6;
return function(){
// javascript "closure" means I have access to foo in here,
// because it is defined in the function in which I was defined.
alert(foo);
}
}()
// Advanced: prototype-based scope resolution
function Seven(){
this.a = 7;
}
// [object].prototype.property loses to [object].property in the scope chain
Seven.prototype.a = -1; // won't get reached, because 'a' is set in the constructor above.
Seven.prototype.b = 8; // Will get reached, even though 'b' is NOT set in the constructor.
// These will print 1-8
one();
two(2);
three();
four();
alert(new Five().a);
six();
alert(new Seven().a);
alert(new Seven().b);

Categories