Variable vs Parameter Scope and Assignment Values - javascript

I have been watching a video series by Douglas Crockford. I am a little confused on the relationship of assigning variables as a parameter of assigning variables as a global variable, let me demonstrate.
var bob = 22; //global scope
function funky(parameter){
parameter = null; //sets the var passed in to null
bob = 44; //sets the bob
}
var hello = [];
funky(hello); // hello still has the value of an empty array even after the function is invoked.
bob; // value is 44
So 'var bob' is assigned 44 when funky() is invoked. This bob holds the new value outside the scope of the function.
var hello is passed as a parameter, while inside funky, it has the value null, outside when hello is invoked in global space, it holds the value of an empty array.
Is this just something I have to memorize? If a defined variable in global scope is passed as a parameter, it will only hold it's new assigned value within the scope of the function? Am I missing something at a broader scope with either how a parameter is passed and assigned in a function?
Here is a repl.it of the code with console.log outputs while inside and outside the function/global scope.
http://repl.it/NgN

Because this line
parameter = null;
Only sets the value of the function's parameter, not the value of the variable that was passed in. However, bob inside the function is interpretted as a reference to the global variable, so it does modify the external value.
Note, however, that objects are references, so if you wrote it like this:
function funky(parameter){
parameter.hello = null;
}
Then calling funky does directly modify the object that the parameter references.
var x = { hello: [] };
funky(x); // x => { hello: null }
Is this just something I have to memorize?
Yes, understanding how parameters are passed is pretty important.
If a defined variable in global scope is passed as a parameter, it will only hold it's new assigned value within the scope of the function?
Parameters only hold their values within the scope of the function. Global variables are, well, global, so if they are modified inside the function, they keep that value outside the function.
Also, be aware of hiding—if a parameter has the same name as a global variable, the parameter hides the variable within the scope of that function.

ok, so the following example will confuse you even more.
var a = {'a': 'A'};
function foo(param){param.a = 'B';}
foo(a);
// now print a
{'a': 'B'}
Here's an important concept:
Primitives are passed by value, Objects are passed by "copy of a reference".
As for more information, you can check this answer:
Does Javascript pass by reference?

Regarding this:
var hello is passed as a parameter, while inside funky, it has the value null, outside when hello is invoked in global space, it holds the value of an empty array.
Do not think of parameter as an alias for hello. They are distinct variables. They are free to point to different things. Assigning a value -- null in this case -- to parameter has no effect on hello. After that line, the global variable hello still points to an empty array. Only parameter points to null.
Furthermore, funky(hello) passes the value of hello to the funky function. Consider the following:
var arr = [];
function addElements(arr) {
arr.push(5);
arr.push(77);
}
The global arr is still empty after addElements executes. The arr inside the function is distinct from the arr in the global scope. (I should note that the contents of each arr may point to the same objects, but that's a separate issue.)
(Note also that some languages do allow the sort of aliasing you seem to expect, but that's not how parameters are passed in JavaScript.)

JavaScript assumes that if you assign a value to a variable it is in the global scope—unless that variable is declared with a var. Like for example, this:
var bob = 22; //global scope
function funky(parameter){
parameter = null; //sets the var passed in to null
var bob = 44; //sets the bob
}
var hello = [];
funky(hello); // hello still has the value of an empty array even after the function is invoked.
bob; // value is 22
Since the function's bob variable is declared with a var, it is owned by the local scope of the function and has no impact on the bob declared outside the function's scope.
Regarding how objects differ from primitives when passed into functions, check out Jonathan Snook's article http://snook.ca/archives/javascript/javascript_pass and the helpful comment from #p.s.w.g.

Related

How the parameters affect the variable values in a function?

I'm currently studying JavaScript and I have a question with function parameters. I have this function:
//Function 1
let from = 'Ann';
function showMessage(from, text) {
from = 'Jane';
alert(from + ' says ' + text);
}
showMessage(from, 'Hello');
alert(from);
//Function 2
let userName = 'John';
function showMessage1(){
userName = 'Bob'
alert('Hello '+ userName);
}
alert(userName);
showMessage1();
alert(userName);
I can understand that in the Function1 showMessage(from, 'Hello'); displays Jane says Hello and alert(from) displays Ann because when I pass the arguments, the function creates a local copy of the values that I passed. I had read that when you have a same-named global and local variable, local shadows global and I think that it happens in Function1 and that's why I get 'Ann' in the last line.
Then since I don't pass on any argument to the Function2, it doesn't create local copy and that's why the value of userName is equal Bob and it is displayed in the last line.
EDIT: I rephrase my question: Why do they behave differently (one does not overwrite the global variable and the other does) if the only difference that I see is that one is passed parameters and the other is not?
It's because you haven't declared a local variable userName inside showMessage1. Variables are declared with one of the keywords var, let or const (I won't go into the differences here, although they are important). If you did this, then you would get the expected result:
//Function 1
let from = 'Ann';
function showMessage(from, text) {
from = 'Jane';
alert(from + ' says ' + text);
}
showMessage(from, 'Hello');
alert(from);
//Function 2
let userName = 'John';
function showMessage1(){
let userName = 'Bob'
alert('Hello '+ userName);
}
alert(userName);
showMessage1();
alert(userName);
In your snippet, because there is no let (or var or const) before the assignment userName = 'Bob', there is no local variable called userName to assign to, so instead it assigns to the userName variable in the enclosing scope - here the global scope. This is why, in your example, the global userName is overwritten, but it isn't in the version above.
EDIT: I rephrase my question: Why do they behave differently (one does not overwrite the global variable and the other does) if the only difference that I see is that one is passed parameters and the other is not?
To answer this explicitly: the difference isn't to do with being passed parameters or not. The difference is between the assignment inside the function being to a local variable or a non-local (in this case, global) one. In your showMessage, the assignment is to from, which is by definition a local variable because it's a function parameter. In your original showMessage1, the assignment to userName was to the non-local variable from the enclosing (global) scope, since no userName is declared in the function's scope. By declaring the variable with let (or var or const), a local variable of that name is created inside the function, which is then assigned to without affecting the same-named ("shadowed") variable in the enclosing scope.
A very shorthand rule set is that JS do not decides between "byValue" and "byReference". At least not as other Programming languages do that. Everything which is a primitive type is passed by Value ( strings bools and numbers etc). Compund variables e.g. OBJECTS and ARRAYS are passed by reference. And that is it. There is no keyword to tell to act different. If you want to put a Array or Object by Value then create a copy of it. If you want to have a primitive type by reference - create a object of the primitive type. Type less languages like Javascript or REXX and some others handles such things different as languages which relay on a compiler. The compiler HAS to know whats to do exactly. In a scripting language we have a nice interpreter and he can decide in the last second whats right and whats wrong. :) .oO(and sometimes creates some gray hairs by acting like that ;)

dynamic object definition

This is a serious question, It has been nagging me for a while. In JavaScript you can declare a variable which has no type. It's type is often dynamic, depends on further value assigned to it.
e.g
var text;
typeof(text); //undefined
text = 'someText';
typeof(text); //string
So as we know that Javascript can dynamically change variable's type why these assignments are invalid then?
e.g
var someObj;
someObj.a = 'hello world';
console.log(someObj) //TypeError
var someTable;
someTable[0] = 'hello world';
console.log(someTable[0]) //TypeError
where this problem can be fixed just by adding definition to variable declaration:
var someObj = {};
var someTable = [];
I'd expect a good explanation of this problem. Thanks for answers.
There's a big difference between declaration and initialisation of variables.
When you declare a variable without initializing it with a value, its type will be undefined, so when you will try to call it or access it, it will give undefined, because simply there were no value defined for the variable.
That's why it should be initialized:
var someObj = {};
var someTable = [];
So you can treat it as a string, an object or an array according its initialized value.
Documentation:
Please take a look at variables MDN Reference for further reading, where it says:
A var statement declares variables that are scoped to the running execution context’s VariableEnvironment. Var variables are created when their containing Lexical Environment is instantiated and are initialized to undefined when created. [...] A variable defined by a VariableDeclaration with an Initializer is assigned the value of its Initializer’s AssignmentExpression when the VariableDeclaration is executed, not when the variable is created.
You're getting confused about where the error is thrown. In your first example:
var someObj;
someObj.a = 'hello world'; // the error is thrown here
That error is thrown because someObj is undefined (not undeclared). So, you can't access the property a on undefined.
The same explanation applies for your second example:
var someTable;
someTable[0] = 'hello world'; // the error is thrown here
You're trying to access index 0 of undefined.
The reason that defining them as {} and [], respectively, fixes your issue, is that you are then accessing property a of {} and index 0 of [].
1) Data types in Javascript are not dynamic, they are mutable. This means that depending on kind of operation you are applying to them they can change from being something into another thing (e.g. a number can become a string doing something like this: 4 + 'a').
2) The "error" is a consequence of having a variable not initialized. In Javascript when you are doing this:var something = 'a'
you are doing two operations, a declaration, and an assignment. If you don't do the assignment and you try to access to a property of the object you have declared it will throw an error. In your case, you are declaring a variable but not initializing it to the "compiler" can't access the "a" property or the position 1 because it is of type undefined.

What's the difference of passing an parameter to the left-hand side as opposed to the right hand-side?

Why is it that when I do the following:
var a = 1;
function foo(a) {
a = 2;
}
foo();
console.log(a); // a = 1
But I get a different result for the following:
var a = 1;
function foo() {
a = 2;
}
foo();
console.log(a); // a = 2
In the first example the function foo parameter a is shadowing the global variable a and thus the value of the global variable never changes. The code in the first example is equivalent to this one:
var a = 1;
function foo(x) {
x = 2;
}
In the second example you are referencing the global variable a inside the body of the function foo. Here no variable shadowing occurs so that you get the expected result - a is asigned the value of 2.
JavaScript doesn't really have "parameters on the left/right side." Your first example passes a parameter. Your second example uses a closure.
In programming languages, closures (also lexical closures or function closures) are techniques for implementing lexically scoped name binding in languages with first-class functions. Operationally, a closure is a record storing a function together with an environment: a mapping associating each free variable of the function (variables that are used locally, but defined in an enclosing scope) with the value or reference to which the name was bound when the closure was created. A closure—unlike a plain function—allows the function to access those captured variables through the closure's copies of their values or references, even when the function is invoked outside their scope.
In your first example, the variable a inside the function foo is a different variable than a outside of the function. Changing foo's parameter a has no effect on the global variable a that gets passed to console.log.
In your second example, the variable a is not a parameter, but rather a part of the environment that is captured by the function foo. The log shows a modified value of a because the assignment inside foo and the console.log call outside of foo are actually referring to the same variable.
if a is passed in as an argument to that function -- then the value of a within that function is isolated and only accessible within that function. otherwise your a defined outside the function is shared across all functions and objects.
agree with #RomanPerekhrest -- read up.
**UPDATE in reply to comment **
var a = 1;
function foo(a) {
a = 2;
}
foo();
console.log(a); // a = 1
In the code above, the reference to a on lines 2 and 3 are a different variable from the a on lines 1 and 6. In the code from your comment, you are setting a to the value of x within the foo function. That's a bit different from the original question. No?

How JavaScript assigns `name` attribute of function?

In JavaScript, when I define function like this
function aaa(){}
I can later access the name by name attribute:
aaa.name
which will return
"aaa"
However, when I define function via var, it technically should be anonymous function without name attribute:
var aaa=function(){}
But instead it assumes that aaa is function name and assigns it to name attribute:
aaa.name
will also return
"aaa"
How JavaScript decides what should be the name, especially considering the fact that assignments could use more complicated scenarios:
var aaa=bbb=function(){}
or
var aaa=arr[0]=function(){}
?
Javascript declares the name variable of the function by taking the left-hand side argument that is equal to the function, which is 'aaa' in all basic cases. In the first complex definition, you declared state above Javascript will take the variable ab and assign it to a function making the name 'ab'. In the final example, you provided it sets the function equal to a pointer in memory, which is not a defined variable, this sets the name property to an empty string because arr[0] is not a variable name but a pointer to memory.
Here is a JSFiddle displaying this.
Something like this:
Inferred function names
Variables and methods can infer the name of an anonymous function from
its syntactic position (new in ECMAScript 2015).
var f = function() {};
var object = {
someMethod: function() {}
};
console.log(f.name); // "f"
console.log(object.someMethod.name); // "someMethod"
Read the entire blog. It will clear all your queries.

Does the original string always stay unmodified?

var name = 'naGeoExit';
var name = name.substring(2,5);
console.log(name); //output: Geo
Is the first name variable and the second name variable are two different variables being allocated in the different parts of the memory or value of the original variable is being changed ?
If they have the same name and are in the same scope then they're the same variable.
At line 1, there is a string in memory containing "naGeoExit". There is a variable in scope, called name that points to it.
At the second line, there is a copy of the subsequence of the string in memory. The variable name now points to that. There is no reference to the original string object, so it is garbage collected at some point.
Using the var keyword means "create a variable in the current scope (rather than the global scope)". The current scope is a closure, for example a function definition (although it could also be the global scope if you are not in a function).
It is not a syntax error to use var twice, but its purpose is to create a new variable and you should only use it once per scope. Second time round will have no effect.
Yes, the original string is unmodified. In your example, though, it's immediately available for garbage collection.
Here's an example that shows that the string is unmodified more clearly:
var n1 = 'naGeoExit';
var n2 = n1.substring(2,5);
console.log(n1); //output: naGeoExit
console.log(n2); //output: Geo
In your original code, you had only one variable called name, and you assigned the result of the substring operation to it, which is why the original string was immediately available for garbage collection. Re-declaring the same variable in the same scope has no effect. So the code:
var name = "foo";
var name = "bar";
...is exactly the same as:
var name = "foo";
name = "bar";
...and is, for that matter, exactly the same as:
var name;
name = "foo";
name = "bar";

Categories