Calculator code


#1

How does this code return as turning off first when the if statement is true?

Also how does it run the code and receive a different outcome each time? It’s the same code so it should return the same result.



 let calculatorIsOn = false;

const pressPowerButton = () => {
  if (calculatorIsOn) {
    console.log('Calculator turning off.');
    calculatorIsOn = false;
  } else {
    console.log('Calculator turning on.');
    calculatorIsOn = true;
  }
};

pressPowerButton();
// Output: Calculator turning on.

pressPowerButton();
// Output: Calculator turning off.



#2

we declare calculatorIsOn as false:

let calculatorIsOn = false;

then the if condition evaluates to false, so else runs, now we update calculatorIsOn to true, so now the calculator is on. Then we call the pressPowerButton function again, now calculatorIsOn is true, so the if condition evaluates to true, so the calculator is turned off, and we update calculatorIsOn to false to indicate calculator is now off


#3

I still don’t understand the second part of my question.

Are you saying once the function runs, when it runs again it will take what the variable is declared as on the last line of the function? Because let calculatorIsOn is still false at the start of the function?

Does the function only run when it’s called?


#4

I understand your confusion @alenart. Let me explain what is going on in your file so that you understand the basic idea of what’s happening when you write code in a text file.

When writing code in a text file, the file is read by the browser/console from top to bottom.

Your first line written is declaring that a variable be equal to a value. In earlier versions of JavaScript we used the var someVariable = 'someString'; to declare a variable. Var = variable. Now we have let and const to afford us more control in the scope these variables have.

Your variable using the let command is a global variable because you declared it outside of any blocks of code or functions, so you can access that value as deep as you want, where a typical variable declared (when you use the var command) in a function is only usable directly from within that function.

This variable you wrote is not equal to a string however, such as my example was. You are storing a boolean, which simply means this value is true or false. So you’re saying that the computerIsOn is a false statement.

If you take a look at your function, you are constructing the body/skeleton/structure of this block of code that you can execute at all time later on in the script file. Remember files are read top to bottom. A function is a block of code tied to a name like a variable is line value of code tied to a name. Calling a function executes the code while calling a variable will execute a value;

Now pay attention to your functions structure. When this function is called it performs one if/else check. In an if clause you are seeing if the statement between your ( ) is true or not. This requires some practice to understand how you get ourself to think like a computer.

Because you’re only calling the value of calculatorIsOn you’re bsically asking if it is true that calculator is on. Well because when you declared that variable (meaning you created it) and assigned its value to false, this is not true. So your statement moves on to the else block and execute that code.

In either block you will notice two lines, a console.log() method which prints the string to your web console, and a reassignment of your calculatorIsOn to the opposite of the condition you’re checking for.

Think of it this way. If you if statement is checking that calculator is on, and it WAS on, and our function is equivalent to performing the action of pressing a power button, doing so if the power button is in would turn the device off. Same is true if it was already off we’d turn it on by doing that.

Now when you are calling this method, imagine yourself performing this action. you initially set it to off, so you press the button.

pressPowerButton();
// Output: Calculator turning on.

Now you’ve turned it on.

pressPowerButton();
// Output: Calculator turning on.

Now it’s off again. That code block you built under the pressPowerButton() method is only performed when you only write the method like that. So initially you assigned false to calculatorIsOn but your function reassigned it twice. Your file is only read once when the page loads, but your function is called twice. When you get into more advanced JavaScript you will see how what’s really happening is when you create functions, objects, and variables, they are read and stored by the browser for use throughout your web page. When you get to assigning events to specific html elements and create buttons and actions you can call on these functions and values many times. It really brings your page to life!

I hope that helped. Keep at it!


#5

Thank you I understand a lot better now!


#6

yes, functions only execute when called

when the function runs, the calculatorIsOn variable gets updated/re-assigned by this line:

    console.log('Calculator turning on.');
    // the line below updates calculatorIsOn variable
    calculatorIsOn = true;

now calculatorIsOn is true, which we can prove:

 let calculatorIsOn = false;

const pressPowerButton = () => {
  if (calculatorIsOn) {
    console.log('Calculator turning off.');
    calculatorIsOn = false;
  } else {
    console.log('Calculator turning on.');
    calculatorIsOn = true;
  }
};

pressPowerButton();
// Output: Calculator turning on.
// what is the status of our variable?
console.log(calculatorIsOn);

pressPowerButton();
// Output: Calculator turning off.

as you can see, the variable got assigned a new value (the variable has updated)

so now, calculatorIsOn being true, when we call the function again if (calculatorIsOn) will evaluate to true, causing the calculator to be turned off, the calculatorIsOn variable updates once again, and so on, for reach time that you call the function


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.