Basic Javascript Syntax Question
January 18, 2012 12:51 PM Subscribe
Can you (of all people) help me figure out a javascript syntax issue I'm having?
Just kidding...you are awesome. Anyhow, I am working through Head First: HTML5 Programming and even though it's only the beginning of the book, I'm already struggling. Let me get more specific. One of the issues I am having is that I don't understand what is going on when the authors write something that looks like this:
What I don't understand is how can a variable equal that same variable plus something?
On a related question, when the authors write something like:
...the authors don't specify what the "++" does to the "i". I mean, I know some addition is going on but how do I know what is being added to "i"? Thanks in advance!
Just kidding...you are awesome. Anyhow, I am working through Head First: HTML5 Programming and even though it's only the beginning of the book, I'm already struggling. Let me get more specific. One of the issues I am having is that I don't understand what is going on when the authors write something that looks like this:
var count = 0;
for (var i = 0; i < 5; i++) {
count = count + i;
}
alert("count is" + count);
What I don't understand is how can a variable equal that same variable plus something?
count = count + i
On a related question, when the authors write something like:
for (var i = 0; i < 5; i++)
...the authors don't specify what the "++" does to the "i". I mean, I know some addition is going on but how do I know what is being added to "i"? Thanks in advance!
++ means "add one to this", because that's the most common addition in loops.
For 'count', it helps if you look at it this way:
Count(the new value) = count(the existing value) +1
posted by Paragon at 12:54 PM on January 18, 2012
For 'count', it helps if you look at it this way:
Count(the new value) = count(the existing value) +1
posted by Paragon at 12:54 PM on January 18, 2012
Best answer: The ++ is an arithmetic operator, specifically increment.
"What I don't understand is how can a variable equal that same variable plus something?"
Because that's not a comparison, it's an assignment: "Take 'count' and make it now equal 'count plus 1'
A comparison(a little further down that page) would use the "==" operator.
posted by Su at 12:56 PM on January 18, 2012
"What I don't understand is how can a variable equal that same variable plus something?"
Because that's not a comparison, it's an assignment: "Take 'count' and make it now equal 'count plus 1'
A comparison(a little further down that page) would use the "==" operator.
posted by Su at 12:56 PM on January 18, 2012
i++ means i = i + 1. There's just a special shorthand for that, because it's such an incredibly common thing to do in programming.
posted by Tomorrowful at 12:57 PM on January 18, 2012
posted by Tomorrowful at 12:57 PM on January 18, 2012
Best answer: You need to adjust your thinking a bit... the lines that say...
count = count + i
are not equations. they are "assignment" statements. What they mean is
variableName = some value;
or in this case
count (my variable named "count") =(is now being assigned the value of) count+i (the current value of my variable named count plus the value of the other variable named i)
posted by utsutsu at 12:58 PM on January 18, 2012
count = count + i
are not equations. they are "assignment" statements. What they mean is
variableName = some value;
or in this case
count (my variable named "count") =(is now being assigned the value of) count+i (the current value of my variable named count plus the value of the other variable named i)
posted by utsutsu at 12:58 PM on January 18, 2012
In most programming languages, '=' doesn't mean "is equal to," but rather, it means "change the left side to be this other thing."
So x = 5 means "make x be 5."
And then "x = x + 1" means "make x be whatever x + 1 is."
And in this case, x + 1 is 6, so that meant "make x be 6."
posted by SemiSophos at 12:59 PM on January 18, 2012 [1 favorite]
So x = 5 means "make x be 5."
And then "x = x + 1" means "make x be whatever x + 1 is."
And in this case, x + 1 is 6, so that meant "make x be 6."
posted by SemiSophos at 12:59 PM on January 18, 2012 [1 favorite]
I'll add, the code snippet that you posted translates to this...
- I'm declaring a variable named count, and it's initial value is 0.
- loop 5 times, each time adding the value of "i" to my variable "count". i starts at 0 and increases by 1 each pass through the loop.
so, you get...
count = 0
count = 0 + 1
count = 1 + 2
count = 3 + 3
count = 6 + 4
now, pop up an alert box that says "count is 10"
posted by utsutsu at 1:01 PM on January 18, 2012
- I'm declaring a variable named count, and it's initial value is 0.
- loop 5 times, each time adding the value of "i" to my variable "count". i starts at 0 and increases by 1 each pass through the loop.
so, you get...
count = 0
count = 0 + 1
count = 1 + 2
count = 3 + 3
count = 6 + 4
now, pop up an alert box that says "count is 10"
posted by utsutsu at 1:01 PM on January 18, 2012
Crap, I should have added a count = 0+0 as the second line in that set... :/
posted by utsutsu at 1:04 PM on January 18, 2012
posted by utsutsu at 1:04 PM on January 18, 2012
Best answer: think of a single equals as more of a funnel where the thing on the right gets poured into the container on the left.
For example (assuming you ran thes in the order):
x = 5; (this would make x==5)
y = 7; (now you've got two variables defined x==5, y==7)
x = x + y; (you've changed x but not y: x==12, y==7)
x = x + 1; (you've added 1 to x: x==13, y==7)
posted by empath at 1:04 PM on January 18, 2012 [1 favorite]
For example (assuming you ran thes in the order):
x = 5; (this would make x==5)
y = 7; (now you've got two variables defined x==5, y==7)
x = x + y; (you've changed x but not y: x==12, y==7)
x = x + 1; (you've added 1 to x: x==13, y==7)
posted by empath at 1:04 PM on January 18, 2012 [1 favorite]
There's a difference between ++i and i++ too. If you use them in the context of an assignment, it becomes clear:
var i = 0;
var x = ++i; // x = 1, i = 1
var y = i++; // y = 1, i = 2
The reason is, ++i increments i before assigning it to x, and i++ increments i after assigning it to y.
It makes no difference in the context of a for loop, except that post-incrementing can use a bit more memory.
posted by klanawa at 1:12 PM on January 18, 2012
var i = 0;
var x = ++i; // x = 1, i = 1
var y = i++; // y = 1, i = 2
The reason is, ++i increments i before assigning it to x, and i++ increments i after assigning it to y.
It makes no difference in the context of a for loop, except that post-incrementing can use a bit more memory.
posted by klanawa at 1:12 PM on January 18, 2012
As of others have said, = is an assignment operator. The corresponding test uses == (double equals) and the entire expression evaluates as a boolean (true/false -- although javascript types are weak). I wanted to add a note about the increment operator (++) -- the placement of that operator matters -- before the variable name means increment its value before evaluating the statement, whereas after means increment its value after:
versus:
While it doesn't matter in the
posted by axiom at 1:14 PM on January 18, 2012
x = 5;
y = ++x;
//y and x are both 6
versus:
x = 5;
y = x++;
// now x = 6, y = 5
While it doesn't matter in the
for
statement, it does matter other times (as indicated by my example).posted by axiom at 1:14 PM on January 18, 2012
In case you want to know what this is:
That's what's called a for loop (it used to be called a next loop).
Anything inside {} will run repeatedly over and over again for as long as the variable i is < 5. It's set to 0 the first time the loop executes (var i = 0). Every time the loop completes, i increases by one (i++).
'i' is also accessible inside the loop.
So what happens here, is the first time the loop runs, count = 0 (0+0), the second time, it equals 1 (0+1), the third time, it equals 3(1+2), the third time, it equals 6(3+3), the 4th time it equals 10(6+4). If you add a print statement to the loop and run it indefinitely, it'll print out all the triangular numbers.
posted by empath at 1:15 PM on January 18, 2012
for (var i = 0; i < 5; i++) {
count = count + i;
}
That's what's called a for loop (it used to be called a next loop).
Anything inside {} will run repeatedly over and over again for as long as the variable i is < 5. It's set to 0 the first time the loop executes (var i = 0). Every time the loop completes, i increases by one (i++).
'i' is also accessible inside the loop.
So what happens here, is the first time the loop runs, count = 0 (0+0), the second time, it equals 1 (0+1), the third time, it equals 3(1+2), the third time, it equals 6(3+3), the 4th time it equals 10(6+4). If you add a print statement to the loop and run it indefinitely, it'll print out all the triangular numbers.
posted by empath at 1:15 PM on January 18, 2012
Khan Academy has some really basic programming tutorials that cover the basic principles really well. He wrote them in python, but the concepts are similar.
posted by empath at 1:25 PM on January 18, 2012
posted by empath at 1:25 PM on January 18, 2012
Response by poster: Thanks so much everyone! Understanding the first question boils down to this looking like algebra but not actually being algebra. The "funnel" metaphor is quite helpful for me in this regard, but I fear that truly "getting" this will be a challenge. As it stands klanawa and axiom's repsonses regarding the placement of the arithmetic operator in relation doesn't feel intuitive to me.
Anyhow, gracias to all!
posted by Hypnotic Chick at 1:30 PM on January 18, 2012 [1 favorite]
Anyhow, gracias to all!
posted by Hypnotic Chick at 1:30 PM on January 18, 2012 [1 favorite]
I'd ignore the i++ and ++i stuff. That's a little advanced and there are other ways to do it that are more intuitive. It's kind of 'hacker shortcut', really.
posted by empath at 1:31 PM on January 18, 2012
posted by empath at 1:31 PM on January 18, 2012
Don't worry about the whole ++ thing. just know it's shorthand for + 1, and the nuances don't generally get taught to beginner's. If I was writing the tutorial, I would have just used + 1.
posted by utsutsu at 1:32 PM on January 18, 2012 [1 favorite]
posted by utsutsu at 1:32 PM on January 18, 2012 [1 favorite]
The Javascript "for" loop is borrowed from C. (Lots of programming languages have something like this.) It's exactly the same as doing this:
var i = 0;
while(i < 5)
{
count = count + i;
i++;
}
but the initialization (i=0), comparison (i<5) and increment (i++) are placed together up in one line. You can actually put any expression in any of those three places, or leave them empty (you may see this sometimes), but doing an initialization, a comparison, and an increment is the usual thing.
posted by thefool at 1:32 PM on January 18, 2012
var i = 0;
while(i < 5)
{
count = count + i;
i++;
}
but the initialization (i=0), comparison (i<5) and increment (i++) are placed together up in one line. You can actually put any expression in any of those three places, or leave them empty (you may see this sometimes), but doing an initialization, a comparison, and an increment is the usual thing.
posted by thefool at 1:32 PM on January 18, 2012
yeah, for what you're doing all you need to know is that i++ is the same as i = i + 1
posted by empath at 1:32 PM on January 18, 2012
posted by empath at 1:32 PM on January 18, 2012
Do you know about codeacademy?
I've been doing their Code Year stuff and it's been really accessible and fun so far. The ++ is explained here, for example.
posted by pishposh at 1:40 PM on January 18, 2012
I've been doing their Code Year stuff and it's been really accessible and fun so far. The ++ is explained here, for example.
posted by pishposh at 1:40 PM on January 18, 2012
It might help you to read the statement as:
count ← count + 1
posted by Idle Curiosity at 1:43 PM on January 18, 2012
count ← count + 1
posted by Idle Curiosity at 1:43 PM on January 18, 2012
Anothing thing you might also run into are assigment operators like +=, -=, *=, and /=. Just so you're prepared, here are some examples:
var i = 0; // assign 0 to i; i is now 0
i += 5; // add 5 to i; i is now 5
i *= 2; // multiply i by 2; i is now 10
i /= 5; // divide i by 5; i is now 2
posted by zsazsa at 2:07 PM on January 18, 2012
var i = 0; // assign 0 to i; i is now 0
i += 5; // add 5 to i; i is now 5
i *= 2; // multiply i by 2; i is now 10
i /= 5; // divide i by 5; i is now 2
posted by zsazsa at 2:07 PM on January 18, 2012
A very long time ago, assignments in BASIC started with the word LET. For example,
If it helps, mentally pencil that LET back in there. "LET count = count + i" is more intuitively understood as an assignment, not a comparison.
posted by ceribus peribus at 2:09 PM on January 18, 2012 [1 favorite]
LET i = i + 2The keyword LET was optional because the computer could tell it was an assignment by looking for the "=" symbol. Eventually programmers stopped using the word LET altogether, and new languages that came along (like javascript) didn't use LET at all.
If it helps, mentally pencil that LET back in there. "LET count = count + i" is more intuitively understood as an assignment, not a comparison.
posted by ceribus peribus at 2:09 PM on January 18, 2012 [1 favorite]
Variables are just like boxes. Each box has a name. Using the assignment operator "=" means, take this thing and put it in that box.
// Make an integer shaped box called "count". Take 0 and put it in the box.
// Because it is an integer it fits. How convenient.
int count = 0;
// Look in the "count" box. Look in the "i" box.
// Add the contents of those boxes and slap it in the "count" box instead of whatever is in there now.
count = count + i;
Remember, javascript is not algebra. It is nothing like algebra. There are programming languages that are like algebra but they are obscure and this is not one of them.
Algebra is for thinking about things. Javascript is for doing things.
posted by emilyw at 3:01 PM on January 18, 2012
// Make an integer shaped box called "count". Take 0 and put it in the box.
// Because it is an integer it fits. How convenient.
int count = 0;
// Look in the "count" box. Look in the "i" box.
// Add the contents of those boxes and slap it in the "count" box instead of whatever is in there now.
count = count + i;
Remember, javascript is not algebra. It is nothing like algebra. There are programming languages that are like algebra but they are obscure and this is not one of them.
Algebra is for thinking about things. Javascript is for doing things.
posted by emilyw at 3:01 PM on January 18, 2012
Response by poster: Do you know about codeacademy?
I actually started it, but I felt I needed a little more hand-holding. I didn't get too far before I started not passing the sections even with the help. I'll probably go back to it, though, once I get through the first few chapters of this book.
mentally pencil that LET back in there
That helps...from re-interpretation to exemplary metaphor to, this, a sort of historically-based context. Like I said, you all are awesome.
posted by Hypnotic Chick at 3:02 PM on January 18, 2012
I actually started it, but I felt I needed a little more hand-holding. I didn't get too far before I started not passing the sections even with the help. I'll probably go back to it, though, once I get through the first few chapters of this book.
mentally pencil that LET back in there
That helps...from re-interpretation to exemplary metaphor to, this, a sort of historically-based context. Like I said, you all are awesome.
posted by Hypnotic Chick at 3:02 PM on January 18, 2012
When I read your question I raised my hand and said "oh, oh! I know this one!" No lie, it's because I did the first two lessons of codeacademy earlier this evening. I am not a programmer, I've never even played one on tv. I had to think pretty hard to get through the lessons, had to go over some things multiple times, but in the end I got it, am mighty proud, and am looking forward to continuing. Can't recommend it highly enough.
posted by Breav at 9:25 PM on January 18, 2012
posted by Breav at 9:25 PM on January 18, 2012
This thread is closed to new comments.
i++ is just a simplified version of saying i = i+1.
posted by thewumpusisdead at 12:53 PM on January 18, 2012