function abc(){
var a = 'lorem';
var b = 'ipsum';
//... and so on - abot 20 variables.
// do something with the variables.
}
this variables I need in many functions so I tried to create a common function just for give them a value:
function givemevars(){
var a = 'lorem';
var b = 'ipsum';
...
}
and then
function abc(){
givemevers();
console.log(a);
}
result: undefined;
I know, I should firstly declare all that variables outside any function (like
var a; var b;...), but the question is - is there any shorter way?
update
I also tried:
function givemevars(){
a = 'lorem';
}
function abc(){
givemevers();
console.log(a);
}
result - undefined
function givemevars(){
a = 'lorem';
}
function abc(){
givemevars();
console.log(a);
}
abc();
You can re-structure you multiple variables to an object and wrap it to a method e.g giveMeVars() and just call it using object.key notation whenever you need any value from it.
function giveMeVars() {
const myVars = {
a: 'lorem',
b: 'ipsum',
c: 'zipsum'
//... and so on - abot 20 variables.
// do something with the variables.
}
return myVars;
}
function abc() {
let gotVars = giveMeVars();
console.log(gotVars.a);
}
abc();
Why your existing doesn't work?
Because it has typo on givemevars() and missing method invocation i.e abc(). Lets try like this way.
function givemevars() {
a = 'lorem';
}
function abc() {
givemevars();
console.log(a);
}
abc()
Okay, there are a couple things you need here.
First is an understanding of functional scope in javascript.
This will help you understand why your console.log is undefined;
Second, if you have 20 loose variables you might want to put them inside an object.
let variableContainer = {a:'ipsum', b:'lorum', c: 'whatever'};
variableContainer.d = 'something'; //add new variable or change existing
console.log(variableContainer.a); //access a
console.log(variableContainer); //view all
Now, you can just pass that object around to get its contents.
you are always going to have to declare all the variables, the question is where?
You can go with your first thought by declaring it outside a function, making a global object (or variable). From there you can call it anywhere in your script (including inside functions).
However, global variables are generally a bad practice. You had some of the right ideas before with you givemevars function. Try something like this:
function doWorkWithVariables(){
let variableObject = givemevars();
//now we do work with variables without having to make them global
console.log('vars', variableObject);
}
function givemevars(){
const myVariableObject = {
a: 'ipsum',
b:'lorem',
c:'something'
}
return myVariableObject;
}
Related
I have a function that returns a variable and a function which edit the variable value.
But it's not working and I don't know why.
And what is the correct way to do this?
Here is my code:
function t(){
var test = 1;
var changeTest = function(){
test++;
}
return {
changeTest:changeTest,
test:test
}
}
var b = t();
b.changeTest();
console.log(b.test) // the value is 1 not 2
The value of test is a primitive and so it is indeed not a reference.
A solution: make the exposed test property a getter, so that the value of the private test variable is retrieved at the moment the property is accessed:
return {
changeTest:changeTest,
get test() { return test }
}
function t(){
var test = 1;
var changeTest = function(){
test++;
}
return {
changeTest,
get test() { return test }
}
}
var b = t();
b.changeTest();
console.log(b.test);
With this pattern, the test variable remains private, and you only expose the features you want to. So in this case you allow explicitly to read the test value, but not to write it.
NB: you can shorten the object literal notation to just:
return {
changeTest,
get test() { return test }
}
In changeTest you have to use this.test instead of test.
function t(){
var test = 1;
var changeTest = function(){
this.test++;
}
return {
changeTest:changeTest,
test:test
}
}
var b = t();
b.changeTest();
console.log(b.test) // the value is 1 not 2
If you would like to increase inside of the function, you need to use this keyword inside, just like the following:
function t(){
const changeTest = function() { this.test++; };
return { changeTest, test: 1 };
}
const b = t();
console.log('original value', b.test);
b.changeTest();
console.log('increased value', b.test);
The reason is why it is happening because you are not modifying the value inside, it is called lexical closure what you face with, as the documentations states:
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
Using the this keyword the code accesses the proper test variable.
For further explanation please read further here:
Closures: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
I hope this helps!
I wanted to rearrange my Code to OOP, but I am not able to figure out my errors here, especially since they appear correct according to different Tutorials and examples.
I suppose I misunderstand something of JS´s, object-instantiation and Call stack.
I will provide some examples, which I don´t understand.
What I want here is to do some operations on an Array and then get it to an other class.
https://jsfiddle.net/8g22nj8y/1/
<script>
$(document).ready(function() {
var p = new Parser();
p.init();
p.getArray();
p.getArray2();
p.get3();
}</script>
function Parser() {
var myArray = [];
this.myArray2 = [];
thisReference = this;
this.myArray3=[];
return {
init: function () {
alert("huhu");
this.parse2();
parse();
},
getArray: function () {
alert(thisReference.myArray2.length);
},
getArray2: function () {
alert(myArray);
}
}
function parse() {
var arr = [1, 2, 3];
myArray.push(arr);
myArray2.push(arr);
for(var i =0;i<10;i++){
a=[];
a.push(i);
thisReference.myArray3.push(a);
}
}}Parser.prototype.parse2 = function () {
var arr = [1, 2, 3];
myArray.push(arr);
this.myArray2.push(arr);};
Independent how I run it, it always says that this.parse2() is not a function.
When I am only using parse(), it says that myArray2 is undefined, althought it´s clearly there - just as "class variable". If I change myArray2 in parse() to thisReference.myArray2 it´s working.
Why? I thought an inner Function - which parse() clearly is, is able to grab all the variable in the outer function - in this case Parser(). When I am now using myArray3 either if it´s used with thisReference or with this. "it is not defined".
If I call parse2 with thisReference it´s working, but then "myArray is not defined", yes it´s an local variable but it´s in the same class and if I call parse() I am able to use it without problems.
Furthermore:
simplified: https://jsfiddle.net/Lzaudhxw/1/
function Syntax(){
var mine = new Lex();
myRef=this;
}
Class1.prototype.foo=function(){
myRef.mine.setFunc(5);
myRef.mine.publicFunc();}
function Lex(){
this.x, this.h=1;
return{
publicFunc: function(param){
this.h;
this.x;
},
setFunc: function(x){
this.x=x;
}
}
Initially I set h to be 1. If I now instantiiate Syntax and call from that the publicFunc from Lex both are undefined. But if I run foo() from Syntax and call the publicFunc again, x is set to the value and h is undefined. Why is it not possible to predefine an varriable (in this case h) like that and then use it?
EDIT to Jan´s Answer:
I read in many Tutorials and some production code that you should store "this" into an variable. Why should myRef point to anything else than the Syntax Object? :O
Why is myRef not an variable of Syntax? Does it have to be this.myRef?
Ahh right, var means local, so mine is only accessiable in the constructor?!
I didn´t wanted to init "x", only define it.
Ahh with return{} I am creating a new class/object, then it´s clear that this. does not point to the above vars. But to introduce an myRef=this should do the job, right?
...So, it´s wiser to use prototype to add functions instead of an inner function?
Yeah you've got a bunchload of JS concepts wrong. I suggest you read the documentation. Tried adding a few explanations.
function Syntax(){
// Since you're returning a new object from "Lex" straight away, there's
// little point of using "new" here
var mine = new Lex();
// Why store "this" here? "this" will be accessible from your prototype
// methods pointing to your object instance... Provided you use "new Syntax()",
// Otherwise "myRef" will (probably) point to the global object.
myRef=this;
}
// Where's "Class1"? You don't have a Class1 function anywhere. You probably mean "Syntax"
Class1.prototype.foo=function() {
// "myRef" is not a property of "Syntax", so it wouldn't be accessible here.
// Furthermore, "mine" is declared as a variable above, so it wouldn't be
// accessible in this manner even if "myRef" pointed to "this" (which it doesn't).
myRef.mine.setFunc(5);
myRef.mine.publicFunc();
}
function Lex(){
// This is a correct property declaration of h. You're not setting the
// value of x here though, just calling it. Javascript allows "trying"
// to call ANY property of ANY object without giving neither a compilation
// nor runtime error, so calling the undefined "this.x" here is valid.
// It just won't do anything.
this.x, this.h=1;
// Here you return a new object straight off, so the below "this" will point
// to the object below, not the "Lex" object defined above. So your above
// defined "this.h" will not be used, it's a property of a different object.
return {
publicFunc: function(param){
this.h;
this.x;
},
setFunc: function(x){
this.x=x;
}
}
// You're missing a closing bracket here.
What you're probably trying to do would look something like this with correct Javascript syntax
function Syntax(){
this.mine = Lex();
}
Syntax.prototype.foo=function() {
this.mine.setFunc(5);
this.mine.publicFunc();
}
function Lex() {
return {
h:1,
publicFunc: function(){
console.log(this.h);
console.log(this.x);
},
setFunc: function(x){
this.x=x;
}
}
}
var s = new Syntax();
s.foo();
But returning an object from Lex would be pretty impractical in most cases. So what you really REALLY want to do is probably
function Syntax(){
this.mine = new Lex();
}
Syntax.prototype.foo = function() {
this.mine.setFunc(5);
this.mine.publicFunc();
}
function Lex() {
this.h = 1;
}
Lex.prototype = {
publicFunc: function(){
console.log(this.h);
console.log(this.x);
},
setFunc: function(x){
this.x=x;
}
};
var s = new Syntax();
s.foo();
I decided to create a funcB function that I call from funcA. I want all variables from funcA to be available in the funcB so func B can change that variables.
How to modify the code below so it meets my requirements? I doubt passing all variables it the only possible and the best way.
function funcB(){
alert(var1);//how to make it alert 5
alert(var20);//how to make it alert 50
}
function funcA(){
var var1=5;
...
var var20=50;
funcB();
}
var obj = {
one : "A",
two : "B",
fnA : function() {
this.fnB(); // without fnB method result will be displayed as A B, with fnB as C D
console.log(this.one + " " + this.two);
},
fnB : function() {
this.one = "C";
this.two = "D";
}
};
obj.fnA();
this keyword refers to obj object
You can define object with properties and methods inside it. With methods all the variables can be manipulated as you wish, from this example with fnB I'm changing values of properties which are displayed from fnA method
JSFiddle
One way is to drop the var keyword:
function funcB(){
alert(var1);//how to make it alert 5
alert(var20);//how to make it alert 50
}
function funcA(){
var1 = 5;
var20 = 50;
funcB();
}
This will expose them to the global scope so funcB can access them. Notice you can also create the varaibles in the global scope itself, with the var keyword, but both methods will ultimately have the same effect.
Note:
This may not work if there is already a var1 or var20 in the global scope. In such case, it will modify the global value and may result in unwanted errors.
This method is not preferred for official code, and is bad practice Reason
This is not possible as when you declare a variable with the var keyword, they are scoped to the function in which they are declared.
If you avoid the var keyword, they are instead defined as a global variable. This is deemed very bad practice.
I would recommend you read up on javascript coding patterns, particularly the module pattern.
For example:
var myNamespace = (function () {
var foo, bar;
return {
func1: function() {
foo = "baz";
console.log(foo);
},
func2: function (input) {
foo = input;
console.log(foo);
}
};
})();
Usage:
myNamespace.func1();
// "baz"
myNamespace.func2("hello");
// "hello"
En example can be found in Twitter'a typeahead.js here:
function () {
// ...
return this.each(initialize);
function initialize() {
// ...
}
}
Questions:
What are the scopes and what function sees what?
What is the reason for using such a construct (usage scenarios and advantages)?
Javascript has function based scope, which means that every thing defined inside a function is available from the first line, since the definition is "hoisted" by the complier.
That goes for both variable and function definitions - variable values however, are not available until after assignment.
You can read all about javascript scoping and hoisting here
This means that the function initialize is available from the first line of the wrapping anonymous function.
There is no real reason, and no advantages, for doing it that way, unless you count the code structure as an advantage.
Personally I don't see any reason to do this. For me even it looks a little bit weird. Martin is right. You should be careful, because the defined variables are not accessible like functions. For example this doesn't work:
var getValue = function(func) {
return func();
}
var f = function() {
return getValue(now);
var now = function() {
return 10;
}
}
alert(f());
However, this works:
var getValue = function(func) {
return func();
}
var f = function() {
return getValue(now);
function now() {
return 10;
}
}
alert(f());
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);