javascript-tutorial / en.javascript.info

Modern JavaScript Tutorial
https://javascript.info
Other
23.63k stars 3.88k forks source link

Variable Lesson #2677

Closed itsadhem closed 3 years ago

itsadhem commented 3 years ago

Hello, I am using your tutorial to learn javascript and it is very helpful so far. I am on the first variable lesson, and I notice there isn't a mention of the importance of order when setting two variables equal to each other (in that the first variable named takes the second variables value, instead of the other way around/regardless if the first variable is undefined.)

For example:

let admin, name; 

name = "John";

name = admin;

alert( admin ); 

Prints a different result than

let admin, name; 

name = "John";

admin = name;

alert( admin ); 

This may be obvious to someone with basic coding experience, but I thought it might be helpful to include in a beginner's guide.

Thanks for the guide!

MuhammedZakir commented 3 years ago

IMO, there shouldn't be any mention of "order" when setting variables.

The form lhs = rhs, we're setting lhs's value to whatever is on the right of =. If rhs is "some string", then lhs's value will be "some string". If rhs is 1, then lhs's value will be 1. If rhs is a variable foo, then lhs's value will be foo's value. In the example you gave, name = admin, admin's value is undefined and so, name's (lhs's) value is undefined.

It's clearly mentioned in the chapter:

We can also declare two variables and copy data from one into the other.

let hello = 'Hello world!';

let message;

// copy 'Hello world' from hello into message
message = hello;

// now two variables hold the same data
alert(hello); // Hello world!
alert(message); // Hello world!

Of course, if it's not clear enough, we can try to improve it. :-)

MuhammedZakir commented 3 years ago

Maybe we should mention that a declared variable's value will be undefined by default until it is assigned some value/data.

itsadhem commented 3 years ago

Of course I'm not disagreeing with how the command works. I know the value of the right variable goes into the value of the left variable. However, nowhere in the lesson doesn't it state which gets copied into which.

We can also declare two variables and copy data from one into the other. <- doesn't ever clearly state what value is copied though. The example demonstrates it, but it's never explicitly explained. This can be difficult for a new user, as it may seem naturally more intuitive that the RHS variable value "goes into" the LHS variable since English reads right to left.

MuhammedZakir commented 3 years ago

But it's mentioned at the start of the chapter?

Now, we can put some data into it by using the assignment operator =:

let message;

message = 'Hello'; // store the string

This shows (although implicity) whatever is on the rhs is being assigned to whatever is on the lhs. Is it not clear without explicitly stating it?


I'm asking these to get a better idea of what exactly is wrong* here. Hope you don't mind! :-)

* not quite good

joaquinelio commented 3 years ago

I get it. It's just a click in the brain, then we don't think about it ever again.

= is NOT intuitive but

store 0x80, a // --> and load a, 0x80 // <--

they both are.

perhaps drawing an arrow may help


let message;

message = 'Hello'; // message <-- 'Hello'

here the direction may be obvious but <--- tells the brain it's not a picture but an acttion

itsadhem commented 3 years ago

You've probably been using Javascript and similar languages for years, so it's second nature for you. Consider looking at it from the mathematical perspective.

Think like someone who's never coded, and think about the reflexive property in mathematics. (x+1)=y, so y=(x+1). Our brains are wired to believe both statements are true (at least in mathematics). However, the statement is not reflexive in Javascript. This may be abundantly clear to you, but someone who is naturally more experienced in algebra than in coding (which I would guess would be most people) might not make the distinction.

Someone with no coding experience can easily read and understand the following conclusion:

There exists 2 variables a and b a = 5 ------ a is equal to 5 a = b ------ a and b are equal b = 5 ------ therefore b is equal 5

Trying that again with the same logic used in Javascript.

There exists 2 variables a and b a = 5 ------ a is equal to 5 a = b ------ a copies its value from b b = unknown ------ therefore b is unknown

Problem statement is exactly the same, but the conclusions drawn are different.

iliakan commented 3 years ago

There're some words there @itsadhem, in the example:

let hello = 'Hello world!';

let message;

// copy 'Hello world' from hello into message
message = hello;

// now two variables hold the same data
alert(hello); // Hello world!
alert(message); // Hello world!

Not enough?

joaquinelio commented 3 years ago

I dont think it's a big deal, everyone understand it soon enough but you may help earlier

NORMAL brains read "a IS = to b" you need to break the hardcoded declarative nature of "=" "make a = to b"

the article is perfect... and you can repeat those words inline 1st example

smethng like

let message;               //  do CREATE the storage
message = 'Hello';        // MAKE message store the string   message <--- 'Hello'
iliakan commented 3 years ago

I hope, https://github.com/javascript-tutorial/en.javascript.info/commit/c3214e76848c944c8bb8112e7400d3bfe5c51a76 is enough.