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 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!
posted by Hypnotic Chick to Computers & Internet (25 answers total) 1 user marked this as a favorite
An easy way to think of it is that the right side is evaluated first-- count + i gets turned into (for exampe) 0+1, which is 1, which then gets passed into the left side.

i++ is just a simplified version of saying i = i+1.
posted by thewumpusisdead at 12:53 PM on January 18, 2012

++ 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

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

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

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

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]

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

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

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]

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

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:

x = 5;
y = ++x;
//y and x are both 6


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:

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

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]

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

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]

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;

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

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

It might help you to read the statement as:

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

A very long time ago, assignments in BASIC started with the word LET. For example,
   LET i = i + 2
The 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

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

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

« Older How can I get Chapters to hire me?   |   Excel woes - automatic sums including dates? Newer »
This thread is closed to new comments.