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
ἔρως
ἔρως14mo 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
MyndiOP14mo ago
So, z = abc(x,y); basically means that the function is being called, and not declared, right?
ἔρως
ἔρως14mo 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
MyndiOP14mo ago
I still can't understand it fully 😭
ἔρως
ἔρως14mo ago
well, inside the function abc, rename x to tomato and y to potato
Myndi
MyndiOP14mo ago
The naming is not what confuses me, is the calling order.
ἔρως
ἔρως14mo ago
the calling order has no influence everything inside the function is something different
Myndi
MyndiOP14mo ago
It does 20 and 30, which are the logs of abc, then it does 10 and 20? but then it gives the 200
ἔρως
ἔρως14mo 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
MyndiOP14mo ago
This is the correct answer based on the test I took 20 30 10 20 200 The correct order
ἔρως
ἔρως14mo ago
yes because javascript runs from top to bottom
Myndi
MyndiOP14mo 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
ἔρως
ἔρως14mo ago
z = abc(x,y); // now it's declared, but not read <-- no, this is the function being called
Myndi
MyndiOP14mo ago
And what should be the outpuf of Z? 20, 30, 200?
ἔρως
ἔρως14mo ago
and z receives the value returned by the function 200 but z is the last thing to be shown
Myndi
MyndiOP14mo ago
console.log(x) -> console.log(y) -> console.log(z) in this case, this would be the order, correct?
ἔρως
ἔρως14mo ago
yes it goes from top to bottom
Myndi
MyndiOP14mo 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)
ἔρως
ἔρως14mo ago
no, z isn't a function z is a variable z = abc(x,y); <-- the = means "assignment"
Myndi
MyndiOP14mo ago
then why the heck does it show the 2 logs inside Z first
ἔρως
ἔρως14mo ago
it doesn't z contains a number, not a variable z can't do anything
Myndi
MyndiOP14mo ago
aha, and it goes back to my question why is 20 30 10 20 200 the correct answer
ἔρως
ἔρως14mo ago
that line should be written like this: var z = abc(x,y);
Myndi
MyndiOP14mo ago
and not 10 20 20 30 200
ἔρως
ἔρως14mo ago
because `abc´ is called
Myndi
MyndiOP14mo ago
but you just said it was an assingment thonking
ἔρως
ἔρως14mo ago
execution order: 🟥 🟦 🟪 🟧
No description
ἔρως
ἔρως14mo 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
MyndiOP14mo ago
okay, the function by itself does nothing until being called, when Z is declared it also calls and runs the function, right?
ἔρως
ἔρως14mo 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.
ἔρως
ἔρως14mo ago
the result of it is exactly what you explained, but the "code" is written in pure english
No description
Myndi
MyndiOP14mo 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
ἔρως
ἔρως14mo 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
MyndiOP14mo 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
ἔρως
ἔρως14mo ago
more like abc(x, y) -> z
Myndi
MyndiOP14mo ago
it returns 200, ends the function, but nothing happens with it
ἔρως
ἔρως14mo ago
yup
Myndi
MyndiOP14mo 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?
ἔρως
ἔρως14mo ago
it doesn't ignore
Myndi
MyndiOP14mo ago
or they get sent to the void?
ἔρως
ἔρως14mo ago
think of a function as a completely new program
Myndi
MyndiOP14mo ago
what happens with the console.log(z)
ἔρως
ἔρως14mo ago
and that program receives stuff, and shows stuff
Myndi
MyndiOP14mo ago
I know it's 200 because of the return, but what happpenedto the logs?
ἔρως
ἔρως14mo 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
MyndiOP14mo ago
thank you for your help ^_^
ἔρως
ἔρως14mo ago
you're welcome
Want results from more Discord servers?
Add your server