Kevin Powell - Community•9mo ago

JS logic question

var x = 10;
var y = 20;

function abc(x, y) {
  x = x + 10;
  y = y + 10;
  console.log(x);
  console.log(y);
  return x * 10;
}

z = abc(x,y);
console.log(x);
console.log(y);
console.log(z);

var x = 10;
var y = 20;

function abc(x, y) {
  x = x + 10;
  y = y + 10;
  console.log(x);
  console.log(y);
  return x * 10;
}

z = abc(x,y);
console.log(x);
console.log(y);
console.log(z);

Why is the answer to this 20 30 10 20 200 and not 10 20 20 30 200? Would anyone mind explaining it to me?

47 Replies

ἔρως•9mo ago

because abc has local variables that receive 10 and 20, respectively and the function is the first thing to run when it exits the function, the variables in that scope are unchanged, and that's why it goes back to 10, 20 and then 200

Myndi•9mo ago

So, z = abc(x,y); basically means that the function is being called, and not declared, right?

ἔρως•9mo ago

right, because the function is defined before and the function receives 2 arguments if you remove the 2 arguments, the result will be 20, 30, 20, 30, 200

Myndi•9mo ago

I still can't understand it fully 😭

ἔρως•9mo ago

well, inside the function abc, rename x to tomato and y to potato

Myndi•9mo ago

The naming is not what confuses me, is the calling order.

ἔρως•9mo ago

the calling order has no influence everything inside the function is something different

Myndi•9mo ago

It does 20 and 30, which are the logs of abc, then it does 10 and 20? but then it gives the 200

ἔρως•9mo ago

you're mixing the local variables in the function with the variables outside they just happen to have the same name as the variables outside, but you can use any valid name and nothing will change

Myndi•9mo ago

This is the correct answer based on the test I took 20 30 10 20 200 The correct order

ἔρως•9mo ago

yes because javascript runs from top to bottom

Myndi•9mo ago

Is this incorrect?

var x = 10;
var y = 20;

function abc(x, y) { // 10 and 20
  x = x + 10; // so x = 20
  y = y + 10; // so y = 30
  console.log(x); // logs 20
  console.log(y); // logs 30
  return x * 10; // returns 200
}

z = abc(x,y); // now it's declared, but not read
console.log(x);  // logs 10
console.log(y);  // logs 20
console.log(z);  // logs 20, 30 and 200

var x = 10;
var y = 20;

function abc(x, y) { // 10 and 20
  x = x + 10; // so x = 20
  y = y + 10; // so y = 30
  console.log(x); // logs 20
  console.log(y); // logs 30
  return x * 10; // returns 200
}

z = abc(x,y); // now it's declared, but not read
console.log(x);  // logs 10
console.log(y);  // logs 20
console.log(z);  // logs 20, 30 and 200

ἔρως•9mo ago

z = abc(x,y); // now it's declared, but not read <-- no, this is the function being called

Myndi•9mo ago

And what should be the outpuf of Z? 20, 30, 200?

ἔρως•9mo ago

and z receives the value returned by the function 200 but z is the last thing to be shown

Myndi•9mo ago

console.log(x) -> console.log(y) -> console.log(z) in this case, this would be the order, correct?

ἔρως•9mo ago

yes it goes from top to bottom

Myndi•9mo ago

I mean, the way I understand it, is that it first calls Z, and it just returns the 2 logs inside the function, then you log X, then you log Y, then you log Z, which Z returns 200 (and I don't understand why it doesn't return the 2 logs inside)

ἔρως•9mo ago

no, z isn't a function z is a variable z = abc(x,y); <-- the = means "assignment"

Myndi•9mo ago

then why the heck does it show the 2 logs inside Z first

ἔρως•9mo ago

it doesn't z contains a number, not a variable z can't do anything

Myndi•9mo ago

aha, and it goes back to my question why is 20 30 10 20 200 the correct answer

ἔρως•9mo ago

that line should be written like this: var z = abc(x,y);

Myndi•9mo ago

and not 10 20 20 30 200

ἔρως•9mo ago

because `abc´ is called

Myndi•9mo ago

but you just said it was an assingment thonking

ἔρως•9mo ago

execution order: 🟥 🟦 🟪 🟧

ἔρως•9mo ago

z = abc(x,y); is 3 things in 1: 1- calls abc 2- defines a global variable z 3- assigns the result of calling abc(x,y) into z

Myndi•9mo ago

okay, the function by itself does nothing until being called, when Z is declared it also calls and runs the function, right?

ἔρως•9mo ago

no z doesn't do anything hang on so, a long time ago, i wrote my own language, and i think the code will help you understand what's going on

Set the variable $x to 10.
Set the variable $y to 20.

Create a function called &abc with arguments ($x, $y)
Begin.
    Set the variable $x to the result of calling &add($x, 10).
    Set the variable $y to the result of calling &add($y, 10).
    
    Show the values $x, " ", $y, " ".
        
    Return the value &multi($x, 10).
End.

Set the variable $z to the result of calling the function &abc with the arguments ($x, $y).

Show the values $x, " ", $y, " ", $z.

Set the variable $x to 10.
Set the variable $y to 20.

Create a function called &abc with arguments ($x, $y)
Begin.
    Set the variable $x to the result of calling &add($x, 10).
    Set the variable $y to the result of calling &add($y, 10).
    
    Show the values $x, " ", $y, " ".
        
    Return the value &multi($x, 10).
End.

Set the variable $z to the result of calling the function &abc with the arguments ($x, $y).

Show the values $x, " ", $y, " ", $z.

ἔρως•9mo ago

the result of it is exactly what you explained, but the "code" is written in pure english

Myndi•9mo ago

What I don't get is why the console log from inside the function is logged, before the function is called. That's what I don't understand I get everything else that's why I asked my order vs the answer's order

ἔρως•9mo ago

Set the variable $z to the result of calling the function &abc with the arguments ($x, $y). <-- this it calls the function THEN assigns the returned value but the function is called first and part of the function is to produce output

Myndi•9mo ago

Yeah, I assume you could just type abc(x,y) but in this case you type abc(x,y) = z (to write it in another way) I guess what throws me off is the return at the end

ἔρως•9mo ago

more like abc(x, y) -> z

Myndi•9mo ago

it returns 200, ends the function, but nothing happens with it

ἔρως•9mo ago

yup

Myndi•9mo ago

because it's not being told to exist anywhere else and when you assign it to Z, Z assumes the value of 200 but ignores the console.logs?

ἔρως•9mo ago

it doesn't ignore

Myndi•9mo ago

or they get sent to the void?

ἔρως•9mo ago

think of a function as a completely new program

Myndi•9mo ago

what happens with the console.log(z)

ἔρως•9mo ago

and that program receives stuff, and shows stuff

Myndi•9mo ago

I know it's 200 because of the return, but what happpenedto the logs?

ἔρως•9mo ago

they are above the return, therefore, they are already executed javascript runs from top to bottom from the 1st line towards the last line if the first line is send cookies, then it will send cookies before doing anything else

Myndi•9mo ago

thank you for your help ^_^

ἔρως•9mo ago

you're welcome

Gaming

Programming

JS logic question