I know something very basic I am missing . But can't find what's wrong with it ?
<!DOCTYPE html>
<html>
<body>
<p>A function can access variables defined inside the function:</p>
<button type="button" onclick="alert(makeMyCounter.increment)">Click Me!</button>
<p id="demo"></p>
<script>
var makeMyCounter = function () {
var privateCounter = 0;
return {
increment : function() {
privateCounter += 1;
},
decrement : function() {
privateCounter += -1;
}
}
}();
</script>
</body>
Why is privateCounter returning undefined ? But when debugged via browser , it is being assigned 1 though .
You are using method reference as property, to call method properly use it like that:
makeMyCounter.increment()
next thing You not return in method so it will be undefined. Add return:
return {
increment : function() {
return privateCounter += 1;
},
decrement : function() {
return privateCounter += -1;
}
}
privateCounter isn't a function, so it doesn't return anything.
increment is a function, but you didn't put () after it, so you aren't calling it and it will alert the result of converting the function to a string.
If you were to call it (alert(makeMyCounter.increment());), then it would return undefined because it has no return statement.
When you run your function you just increment its value but there is no return statement.
In javascript if your function has no return statement undefined will be returned by default.
if you need your new value return privateCounter in increment and decrement functions
return {
increment : function() {
privateCounter += 1;
return privateCounter;
},
decrement : function() {
privateCounter += -1;
return privateCounter;
}
}
Related
Studying about closures, I looked at the Developer's Mozilla article about it and saw the code below:
var counter = (function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
};
})();
console.log(counter.value()); // 0.
counter.increment();
counter.increment();
console.log(counter.value()); // 2.
counter.decrement();
console.log(counter.value()); // 1.
I'm confused about how the function is attributed to the variable counter, because the function is initially envolved by those parentheses, and after all, there are also two unreaseble parentheses together... I just wondered, what's the reason of that syntax? I certainly would do:
var counter = function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
};
};
But then I got the error
Uncaught TypeError: counter.value is not a function
When I do console.log(counter.value());
Can someone please explain it to me?
What you're looking at is an Immediately Invoked Function Expression or IIFE. This code is creating a function, then immediately calling that function, then assigning the return value of the function to counter. So counter isn't a function, it's an object with three properties: increment, decrement, and value.
The reason that they used an IIFE was to make what's essentially a private variable. privateCounter is only in scope to other code inside that function, which means only increment, decrement, and value can access it.
If they didn't care about making the variable private, the equivalent code would be:
var publicCounter = 0;
function changeBy(val) {
publicCounter += val;
}
var counter = {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return publicCounter;
}
}
I have a code
var variable = 0;
function add() {
return variable += 1;
}
console.log(add());
console.log(add());
Im wonder is there a way to write this code only using function and scope, smth like
function add() {
/* SET INITIAL STATE IF NOT SET*/
/* EXECUTE */
/* RETURN NEW VAL */
}
add(); /* RETURN 1*/
add(); /* RETURN 2*/
to get the same result.
Thank you.
...only using one function...
Your code does use only one function (add). If you mean you don't want it to close over variable, you can store the count elsewhere, for instance as a property on the function itself:
function add() {
if (!add.variable) {
add.variable = 0;
}
return ++add.variable;
}
console.log(add());
console.log(add());
console.log(add());
But of course, that means any code can access and change it.
The usual thing is to close over the variable, and perhaps hide it in a scope where nothing else can see it:
var add = (function() {
var variable = 0;
return function add() {
return ++variable;
};
})();
console.log(add());
console.log(add());
console.log(add());
You can create a pseudo static variable for the function:
(() => {
document.querySelector("#test").addEventListener("click", () => console.log(add(1)));
function add(n) {
add.constant = add.constant || 0;
add.constant += n;
return add.constant;
}
})()
<button id="test">add 1</button>
Also could see the yield operator (generator functions), or console.count()
var add = function () {
var generate = function *inc() {
var i = 0
do {
i++
yield i
} while(true)
}()
return function() {
return generate.next().value
}
}()
console.log(add())
console.log(add())
console.log(add())
I have two different case below. Both case applies the same method javascript closure function. Case 2 output the result as expected but case 1 doesn't, as the increament stops at 1 every time the button is clicked. I know some other closure method to make it work as i expected or increase count every time the button is clicked. But i am just curious why the below case 1 doesn't work while having same method and same way as in case 2 which works though. I hope it makes sense.
case:1
function incrementClickCount() {
var clickCount = 0;
function a() {
return ++clickCount;
}
return a();
}
<input type="button" value="click me" onclick="alert(incrementClickCount());">
case:2
function addNumber(firstNumber, secondNumber) {
var returnValue = 'Result is : ';
function add() {
return returnValue + (firstNumber + secondNumber);
}
return add();
}
console.log(addNumber(10, 20));
You need to return the function a from the incrementClickCount function, at the moment you are returning a() i.e. the result of calling a.
function incrementClickCount(){
var clickCount = 0;
function a(){
return ++clickCount;
}
return a;
}
var incrementer = incrementClickCount();
<input type="button" value="click me" onclick="alert(incrementer())">
A more compact approach is to declare and return the function in one go, with ES6 lambda notation:
function incrementClickCount() {
var clickCount = 0;
return () => ++clickCount;
}
Another piece of advice would be to add a listener to the button rather than using the onclick attribute. The benefits include encapsulating all behaviour within your Javascript, and being able to remove the listener if needed.
function makeIncrementer() {
var clicks = 0;
return () => ++clicks;
}
const incrementer = makeIncrementer();
function clickHandler() {
alert(incrementer());
}
document.getElementById('incrementButton').addEventListener('click', clickHandler);
<button id='incrementButton'>Increment</button>
You need to move the variable outside the function, so you don't keep resetting it back to 0.
var clickCount = 0;
function incrementClickCount() {
function a() {
return ++clickCount;
}
return a();
}
<input type="button" value="click me" onclick="alert(incrementClickCount());">
There's not much point in using the inner function in this case. You can simply write:
var clickCount = 0;
function incremenCount() {
return ++clickCount;
}
I followed a tutorial online on how to build a calculator using javascript. The code uses a for loop to go through all the buttons of the calculator and 2 functions to add the numbers and to calculate.
Here is the code:
for (var i = 0; i < buttons.length; i += 1) {
if (buttons[i].innerHTML === "=") {
buttons[i].addEventListener("click", calculate(i));
}
else {
buttons[i].addEventListener("click", addValue(i));
}
}
function addValue(i) {
return function() {
if (buttons[i].innerHTML === "~" ) {
result.innerHTML += "/";
}
else if (buttons[i].innerHTML === "x") {
result.innerHTML += "*";
}
else {
result.innerHTML += buttons[i].innerHTML;
}
};
}
function calculate(i) {
return function() {
result.innerHTML = eval(result.innerHTML);
};
}
I want to ask why the 2 functions, addValue and calculate return functions? If i remove the return, the code will not work. Why?
If you remove the return statement then addValue returns undefined.
addEventListener expects two arguments, the name of the event to run a function on, and the function to run.
If addValue returns undefined then you are passing undefined to addEventListener instead of a function.
The line:
buttons[i].addEventListener("click", calculate(i));
At the moment it is called, it calls calculate(i). This then returns the function that will be called by the event handler. The event handler is not calling calculate(i) but the function returned from it.
returning function throw a function is the property of JavaScript named closure ,generally with the functions we get a solved value through return statement but when our variable is not solved then we can pass a function as return value for further computation
When a function returns another function or recives functions as parameters that is called
High Order Function
Wikipedia
This is just a feature that some languajes offer us.
e.g:
function addTextTag(idTag) {
return function(text) {
document.querySelector('#'+idTag).innerHTML = text;
}
}
var containerChange = addTextTag('container');
//calling addTextTag with first parameter return a function
// that would receive another parameter
containerChange('tag says that');
containerChange('Now says this');
//here we can call first function and pass directly parameter to the function returned
addTextTag('otherId')('Other Text');
So I need a function which increments the value of a variable say n=0. When ever the function runs, the value of this varible must be incremented and it should not be equal to 0 again. For example consider the following code :
function increment(){
var n = 0;
n++;
return n;
}
Now everytime you run this function you get a value of 1. But my requirement is if you run this function for the 1st time, it should be 1, if you run it for the second time, it should be 2 and so on. Unless you refresh the html page and run the function again, it should not be equal to 0. Can anybody help me?
I'm new to coding and any small help is appreciated. Thanks in advance!!!
Create a closure to hold the value
Closures are functions that refer to independent (free) variables.
In short, variables from the parent function of the closure remain bound from the parent's scope.
var increment = (function(n) {
return function() {
n += 1;
return n;
}
}(0)); // -1 if you want the first increment to return 0
console.log(increment());
console.log(increment());
console.log(increment());
You need to declare n outside of the function.
var n = 0;
function increment(){
n++;
return n;
}
The problem is scopes. when you declare a variable inside of a function it is bound to the local scope of the function. as soon as the function is done the variable is gone.
declaring the variable in the root level of the script places it in the global scope.
another way to do this would be to have a variable outside that you're passing around and then you pass it to the function via a parameter.
var i = 0;
function increment(n){
n++;
return n;
}
i=increment(i);
for more information on scopes and variables, review this page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope
You can bind the data to the function (since functions are objects).
function increment(){
increment.n = increment.n || 0;
return ++increment.n;
}
What about making the number of times increment was called a parameter ?
function increment(numberOfIncrementCalls){
numberOfIncrementCalls++;
return numberOfIncrementCalls;
}
function increment(numberOfIncrementCalls){
numberOfIncrementCalls++;
return numberOfIncrementCalls;
}
n = document.getElementById("demo");
o = document.getElementById("event");
numOfIncr = 0;
o.addEventListener("click",function(){
numOfIncr = increment(numOfIncr);
var insert = numOfIncr.toString();
n.innerHTML = insert;
});
<html>
<p id="demo"></p>
<button id="event">Click me</button>
</html>
var n = 0;
function increment(){
n++;
return n;
}
Learning about scopes will help you greatly. What you want here is the variable 'n' to be of a global scope.
var n = 0; //Declare n outside of the function makes it accessible to the function
//and to any other functions or expressions that want access to n
function inc() {
n++;
}
You can try this code and store the value in localstorage. All time it will be increase old Value untill you have not clear localstorage...
<script>
localStorage.setItem("n", 0);
increment();
function increment(){
let n;
n = localStorage.getItem('n');
n++;
localStorage.setItem("n", n);
return n;
}
</script>
Every time you call a function the value will be incremented by +1 by this method --
let x = 0;
function increment (){
return x = x + 1;
}
This code will always return 501
a=500;
function increment(n){
return n+1
}
increment(a);
You could equate a to the function
a=increment(a);
That would set a to 501, then 502 etc
However consider using an array for the argument instead
a=[500];
function increment(n){
n[0]++;
}
increment(a);
Now it will increment the value of a[0] even though it doesn't have a return statement. The benefit of this is it means we can have multiple arguments and increment them all, and then return some other variable if you like. Like this
a=[0];
b=[5];
function incrementToTen(n,o)
{
n[0]++;
o[0]++;
if(n[0]>=10||o[0]>=10)
{
return true;
}
else
{
return false;
}
}
So after running incrementToTen(a,b) 5 times it will return true