Disclaimer: I'm not sure that I'm using the correct terminology.
Given this code:
var sample = 'Text';
var test = function(sample) {
console.log(sample);
};
test('Text Too');
I am aware that if the function parameter had a different name, the console.log() call would output "Text". Is there a way for the test() function to reference the "parent scope" variable, sample without changing the name of the function parameter? If so, how?
No, there is no way to do this in JavaScript. If you use the same variable name in the inner scope, the outer scope variable becomes completely inaccessible to that inner scope.
Edit: Except, of course, when the outer scope is the global scope. Then you could use window.sample.
#plbsam is right, he shouldn't have deleted his answer.
In your specific case, this inside a function is the context it is called in: docs
var sample = 'Global var';
var test = function(sample) {
console.log("sample: "+sample);
console.log("this.sample: "+this.sample);
};
test('Local var');
EDIT:
as this all depends on the scope the function is called in you can always assign this to a separate var in the global scope to be able to access it anywhere:
// this var can now be accessed inside any function as a reference to the global scope.
global = this;
var sample = 'Global';
var test = function(abc) {
console.log("sample: "+sample);
console.log("this.sample: "+this.sample);
console.log("global.sample: "+global.sample);
};
test('Local');
Related
If I have this code below:
var greeting = 'Hola';
(function(spanishGreeting, name){
var spanishGreeting = 'Como estas!';
spanishGreeting = 'HOLA!'
console.log(spanishGreeting);
}(greeting,'John'));
console.log(greeting);
Can you explain to if my understanding of the above code is correct?
So first inside the IIFE:
var spanishGreeting = 'HOLA!!';
That line of code creates a whole new variable with the same name as the parameter that is passed into the IIFE (this new variable declaration has nothing to do with that parameter, spanishGreeting, passed into the IIFE correct?).
Also:
spanishGreeting = 'Como estas!'
will look for the spanishGreeting variable in the current Execution Context of the IIFE. Now the problem is there are two spanishGreeting variables in the current Execution stack. The one in the IIFE parameter and the one I just created:
var spanishGreeting = 'HOLA!!';
How does the JS engine know which one to use?
That line of code creates a whole new variable with the same name as the parameter
No, in fact it doesn't. There is only one scope (the function scope) with one variable of the name spanishGreeting (and a second variable that goes by name).
The var is ignored, it doesn't create a second variable after the parameter did already introduce it.
When you call the function, the variable is first filled with the argument ('Hola'), then it is overwritten with the value 'Como estas!', and then with the value 'HOLA!'.
However, there is a situation where you can have two different variables that go by the same name - when they are in different scopes:
var greeting = "Hello outer!";
function greet() {
var greeting = "Hello inner!";
console.log(greeting);
}
greet();
How does the JS engine know which one to use?
Here, the JS engine just uses the local variable (which could be declared via var or as a parameter, doesn't make a difference) in the current scope. The inner variable is said to shadow the outer variable.
Btw, if you use the ES6 let keyword to declare your variables, the engine will throw an error if you attempt to re-declare an already defined variable (in the same scope).
i'm not an expert in javascript but. inside a function if your variable name matches with an "outside" variable, it will use the local variable which is inside the function.
as far as i know you can declare variables in javascript 2 ways:
var variable1 = 2,
variable2 = 3;
or..
var variable1 = 1;
var variable2 = 3;
try this:
var spanishGreeting = 'Como estas!',
spanishGreeting = 'HOLA!';
If functions are objects in javascript, why can't I access the function scope defined variables?
I understand that in the code:
// variable test assigned an anonymous function
var test = function(){
var x = 5;
};
console.log(test.x); // undefined
// Even when the function is explicitly named:
function test(){
var x = 5;
}
console.log(test.x); // undefined
I don't need to get this working or anything; I just need to understand why functions are like this.
Thanks.
This would be one way to accomplish what you are trying:
function test() {
this.x = 5;
}
var foo = new test();
console.log(foo.x);
Using var x rather than this.x just declares a local variable
I believe it is because those variables only exist within the scope of the function you have defined. Outside the scope of that function they do not exist.
They are the equivalent of private members in a class of an object oriented language.
Alternatively you could have
function test() {
this.x = 5;
}
var testInstance = new test();
console.log(test.x);
Functions are objects, but that doesn't mean that any variable declared inside the function becomes a property of that function object. In fact, that would be terrible because you wouldn't be able to run a function more than once (since the second time, the variables would start with different values).
You can assign a property to a function object like this:
var test = function () {};
test.x = 5
The variable is visible only in the function and it is possible to access it only within the function, you can use global variable and then edot it insode the function.
You have created Local variables. Local variable can only be accessed within the function.
Try to understand about Local & Global JavaScript Variables
Local JavaScript Variables
Variables declared within a JavaScript function, become LOCAL to the function.
Local variables have local scope: They can only be accessed within the function.
function myFunction() {
var name = "roy";
// code here can use name
}
Global JavaScript Variables
A variable declared outside a function, becomes GLOBAL.
A global variable has global scope: All scripts and functions on a web page can access it.
var name = "roy";
// code here can use name
function myFunction() {
// code here can use name
}
var someName = function(){var x ...} /// only has local scope.
What is the scope of variables in JavaScript?
Will describe it better than I can. Good job on being curious and motivated.
I'm trying to learn JS on codeacademy and I can't understand/get past this thing. Can someone please provide an answer and also an explanation of why is it so? Would deeply appreciate.
// This function tries to set foo to be the
// value specified.
function setFoo(val) {
// foo is declared in a function. It is not
// accessible outside of the function.
var foo = val;
}
setFoo(10);
// Now that we are outside the function, foo is
// not defined and the program will crash! Fix this
// by moving the declaration of foo outside of the
// function. Make sure that setFoo will still update
// the value of foo.
alert(foo);
You can see scope as a term meaning what variables you can reach at a specific "level" in the code. In JavaScript, these "levels" are defined by functions. Each function introduces a new level.
For example, take this sample code:
var a;
// you can access a at this level
function function1() {
var b;
// you can access a, b at this level
function function2() {
var c;
// you can access a, b, c at this level
}
}
So in your case, you should declare var foo; outside the function, preferably above it. Then you can set it inside setFoo with foo = val;. foo then refers to the one you declared in the level above setFoo.
foo is accessible both in setFoo and in the alert call that way; compare it with the above sample code (function1 is setFoo, a is foo and the alert call is in the top-most level. function2, b and c are not used in your case.).
// Create globale variable
// (You should not use globale variables!)
var foo;
// set value
function setFoo(val) {
foo = val;
}
setFoo(10);
// show value
alert(foo);
Just declare foo outside any function then it will be global:
var foo = null;
function setFoo(val) {
foo = val;
}
setFoo(10);
alert(foo);
Try it !
When you declare a variable in Javascript it is only visible to code that is in the same function as it is declared, or a function inernal to that function. Because foo is originally declared in the SetFoo function nothing outside of SetFoo is able to see it, so the call to alert fails as foo does not exist in the gloabl scope.
As the comments suggest, moving the declaration of foo out of the function and into the global scope (which you can think of as a catch-all function that contains everything) would allow you to use foo when calling alert.
var foo;
function setFoo(val) {
foo = val;
}
setFoo(10);
alert(foo); // No longer crashes
Every function in Javascript has it's own scope. That means that every variable you define there with the var keyword, will only be available within that function. That means that when you call setFoo(10), you create the variable foo, give it a value of five, after which it is immediately destroyed because it went out of scope.
There are multiple ways to solve this problem. The first would be to remove the var keyword. This would put foo in the global scope, which means that it's available everywhere. However, this is discouraged, you want to keep the global scope as uncluttered as possible, so that if you have javascript code provided by multiple people on the same page, they can't overwrite other people's variables. Another way to do it would be this:
function setFoo(val){
var foo = val;
alertfoo = function(){
alert(foo)
}
}
In this example, the only thing you're putting in the global scope is the alertfoo function, because you want that to be available everywhere. The alertfoo function is defined inside the setFoo function, this means that although foo should have gone out of scope after setfoo has been executed, it is kept in memory, because alertfoo has access to it.
This makes for some nice tricks. For example, let's say you're making a javascript library that will be included on other people's pages, you'll want to create a scope inside of which you can define variables, without polluting the global scope. The most common way to do this, is by declairing a self-executing function. This is a function which is executed immediately after being defined, it looks like this:
(function(){
//set variables you want to be global in your own code
var mainpage = document.getElementById('main');
//define functions you want to make available to other people in a way that puts them in the global scope
setMainElement = function(newmain){mainpage = newmain;}
})();
You can make this even better by making only one object global, and provide your interfae through the methods of that object, this way, you create a namespace with all the functions that your library contains. The next example uses an object literal to do this. In javascript, you can create an object by putting key/value pairs petween curly braces. the key/value pairs are properties of the object. for example:
(function(){
var privatevar = 10,otherprivate=20;
publicInterface = {
'addToPrivate': function(x){privatevar+=x;},
'getPrivate': function(){return private}
};
})();
Original code:
function setFoo(val) {
var foo = val;
}
setFoo(10);
alert(foo); // Crash!
Their advice to fix the crash:
Fix this by moving the declaration of foo outside of the function
I'm guessing you're confused as to what they mean by "outside of the function".
Try this edited code:
var foo = 5; // "var" declares the variable to be in this outer scope
function setFoo(val) {
foo = val; // but we can still access it in this inner scope...
}
setFoo(10);
alert(foo); // Displays a dialog box that says "10"
Variables defined in the function is valid only in the function
function setFoo(val) {
foo = val;
}
In JavaScript, new scopes are only created by functions
What is difference between
while(condition){
var variable;
...
}
and
while(condition){(function(){
var variable;
...
})();}
Can somebody explain me defference?
In the first case the variable is accessible anywhere inside the while (and even after it). In the second case it is private and accessible only inside the auto-invoking anonymous function. So the difference is basically in the scope of the variable. The second example seems pretty convoluted without providing more context.
First example:
while(condition) {
var variable;
... // the variable is accessible here
}
// the variable is accessible here
Second example:
while(condition) {
(function() {
var variable;
... // the variable is accessible here
})();
// the variable is NOT accessible here
}
// the variable is NOT accessible here
Variables have function scope in JavaScript. So in the first loop variable is visible anywhere inside your function—the function that contains the while loop, that is.
In the second one, variable is visible only inside the anonymous function, since that's the function in which it's declared.
In the first case, variable accessible anywhere in the function that encloses the while. That's because JavaScript does not have a local scope, only function scope.
This might be undesirable in some cases and hence the second variant, which encloses the variable (and loop's body) within anonymous function.
The auto calling function basically creates a scope. Variables defined inside it will not be accessible outside the while loop.
var i = 0;
while (i++ == 0) {
var a = "hi a";
}
console.log(a); //hi a
var ii = 0;
while (ii++ == 0) {
(function() {
var b = "hi b";
})();
}
console.log(b); //Uncaught ReferenceError: b is not defined
http://jsfiddle.net/
Got closures to consider as well as Darin Dimitrov comments.
Given the following JavaScript:
var someFunction = function(id) {
//do some stuff
var modifyId = function(id) {
//do some stuff
outer.id = id; //is there any way to modify the id variable in the outer scope from here?
}
}
How do you modify the id passed into the outer function scope from within the inner function scope?
Unfortunately you can't. By naming the parameter in the nested function id, you've shadowed the parameter in the outer function. Javascript contains no facility for accessing the shadowed name. The only option is to choose a different name for one of the variables.
No, there isn't. From within a function, there's no way (something weird in Mozilla's code or ES5 aside) to refer to the scope as a context in any explicit way, and there's no way to climb up the lexical scope chain in any direct way.
Good question though.
var someFunction = function(id) {
//do some stuff
var oid = id;
var modifyId = function(id) {
//do some stuff
// you can access the outer id via the oid variable
}
}
But, yes, you should just rename one of the formal parameters.
Why can't you just rename one of the variables?