Grow your CSS skills. Land your dream job.

The Syntax vs The Spirit

Published by Chris Coyier

Sometimes I literally can't remember how to write a for loop. Not like funny ha-ha I can't remember how to spell "psychology" but really I can figure it out in a few seconds. Like, go to Google, type in "for loop PHP", click on a promising result, copy and paste, then alter it.

I'm mostly a front-end guy, but I'm essentially a professional programmer. Isn't that ridiculous and embarrassing? Meh.

I'm in and out of a lot of different languages in any given day. A for loop is different in all of them. Here they are:

for i in 1..5
  puts i
end
for (i = 0; i < 5; i++) {
  console.log(i);
}
for ($i = 1; $i < 5; $i++) {
  echo $i;
}
@for $i from 1 through 5 {
  .n-#{$i} { color: red; }
}
- (1..16).each do |i|
  %div #{i}
for i in [1...16]
  console.log(i)

They are all different. None are very difficult to understand, but the for loop is probably the simplest construct you'll need to write in a language, so you can imagine it gets worse.

So what.

All those languages have perfectly good reasons for why they do that the way they do. It is a minor inconvenience to maneuver the correct characters into place to get them to do the job.

What matters is:

  • I know what a for loop is
  • I know when to reach for a for loop
  • I know the difference between a for loop and other loops
  • I know the potential dangers of a for loop

Nevermind the syntax, it's the spirit that counts.

Comments

  1. Matt Ward
    Permalink to comment#

    Well said, Chris.

    I spend a ton of my time in WordPress and PHP, but I still find myself having to go back to Google for certain constructs, functions and such that I don’t use on a regular basis.

    It gets even worse when I’m jumping between languages. For some reason, PHP doesn’t like it when I try to print something out with the command:

    alert $myvar;

    Go figure…

  2. Ralph
    Permalink to comment#

    I think the best solution is to use something like Sublime Text 3 with good snippets and than you can do all kind of stuff much faster and easier in any language.

  3. Permalink to comment#

    just to keep the spirit: a loop in haxe is different too :)

    for (i in 0…5)
    {
    trace(i);
    }

  4. Permalink to comment#

    Nevermind the syntax, it’s the spirit that counts.

    I always say to all who wants to learn programming, the important thing is spirit of code not a language syntax.

    I want to translate this article to persian

  5. In JavaScript, my for loops mostly look like:

    [0, 1, 2, 3].forEach(function(i){
        console.log(i)
    }
    
    • MaxArt
      Permalink to comment#

      Isn’t that a little overkill? And not recommended for performance intensive tasks. Or longer iterations.

    • Unfortunately this isn’t always supported. It won’t work pre-IE9 without creating a polyfill. Not a deal-breaker though.

      It will only work on Arrays, since it is a prototype fn of Array.

      Another con is you can’t actually break a forEach loop.

      So it certainly isn’t the most flexible for loop to go for in JavaScript.

  6. Haha, glad to know I’m not the only one in the same boat. I am with you on this one Chris. Knowing when to use something is much more valuable than remembering all the syntaxes and not knowing when to use which.

    We have just so many brain cells, and we should use it for innovation and not storing stuff which google best handles.

  7. MikeMac
    Permalink to comment#

    I feel like I’ve been “outed”

  8. RioBrewster
    Permalink to comment#

    Thanks Chris! I’ll bookmark this page for the next time I need one!

  9. asdasdas
    Permalink to comment#

    you shouldn’t like that either. Use console.log instead.

  10. Very true. This is similar to how I recommend people to pick up new languages: it would take years to fully memorize every command you need to use in every syntax, but as long as you know the capabailities of a launch, and the building blocks of programming in general, it’s not about remembering formulas. It’s about knowing what to use and how to find it.

  11. This is why we have documentation :)

  12. I seem to always forget the “case..when…otherwise”, especially in Javascript. I use it in C#, XSLT and javascript but every time (even now) I ask my friend, Google :-)

    Often I land on good old w3schools.com, like: Javascript Switch.

    - Oh, and I have been a programmer since 1986 (!)

  13. justdan
    Permalink to comment#

    Reading things like this is always a relief to me. I recently have gotten into JQuery and pure JS and sometimes feel like I messed up in my studying when I get to a problem and can’t remember how to structure the syntax. It’s nice to read that even at more advanced levels, sometimes you draw a blank and need to use some external resource.

  14. Permalink to comment#

    Ha, I run into a similar thing with comment syntax…

    <!-- HTML -->
    /* CSS */
    // JS
    

    Not that I forget what the syntax is, but when jumping between files I occasionally use the wrong one by accident. Always thrown off for a second when I simply add a comment and suddenly everything breaks… :-)

    • Dominic
      Permalink to comment#

      Coffeescript

      (* F# *) or // F#
      ' VB
      % Matlab / LaTeX
      REM Windows batch files
      <%-- ASP.net --%>
      @* ASP.net razor *@
      -- SQL or /* SQL */
      

      Gets even more interesting when you work in a couple of different environments ;)

    • Dominic
      Permalink to comment#

      Yeah, Coffeescript was dropped somehow:

      # CoffeeScript
      
    • That is why its a good idea to have an IDE that allows you to highlight a block of text and press a key combination to comment it out.

  15. Permalink to comment#

    Not remembering the syntax of a for-loop is not a problem at all. The problem is not to know how/when to use it.

  16. Luis (other Luis)
    Permalink to comment#

    Same happens to me as I change from JS to PHP or to other languages. But oddly, I always remember how to write it in Basic!

  17. I completely agree. It’s not about who can remember the right syntax, rather who knows the right tools/constructs for each situation.

  18. Ryan Boone
    Permalink to comment#

    Yeah, it’s like playing different instruments. If you can write good music, it’s just syntactical differences. Doubly true within the same family of instruments (strings, brass, woodwind, percussion, etc.). Good post.

  19. Curious to know why Haml and CoffeeScript got to loop 16 times and the rest only 5? ;)

  20. Nicole
    Permalink to comment#

    I love this article. I forget random things too and I’m a good developer! I think it is like you said, when you’re out of so many languages that happens sometimes. So refreshing to hear from someone who I consider a complete ninja. I also really love the loop rundown in all these languages – would make a nice poster!

    For loop’s sake, here’s the loop in AMPscript:
    %%[for @i = 1 to 3 do ]%%
    [variables, fields and output]
    %%[next @i]%%

  21. :3
    Permalink to comment#

    What is “Haml”?

    • yaswanth
      Permalink to comment#

      HAML is html template parsing engine. In other words, it is a framework to optimize coding in html…

      Please google it for More…

  22. Theo
    Permalink to comment#

    Forgetting the exact syntax is something that very often happens to me when writing code.

    But I don’t code every day. Sometimes I might not write any code for weeks because I do other things (design in Photoshop, SEO, writing content for my websites etc). I believe Chris is in a similar situation.

    Somebody that does not much else than write code every day – the whole day, is highly unlikely that he will forget how to write a for loop in any of the languages he regularly uses.

  23. I realise this isn’t in the ‘spirit’, but it may help those not familiar with JavaScript; In your JS loop you aren’t declaring i so it will be in the global scope, which may cause issues with other uses of i in your code. It should be:

    for (var i = 0; i < 5; i++) {
      console.log(i);
    }
    
  24. Franck Fremont
    Permalink to comment#

    That’s why I have always Dash opened and ready to help when I work!

    If you don’t know already Dash, please consult: http://kapeli.com/dash

    Nota bene: I have no intrest in common with the Dash developers, I just find it’s a great solution to help in this kind of situation… ;-)

  25. You may want to add these:

    Python:

    for i in range(5):
        print i
    

    Java:

    int i;
    
    for(i = 0; i < 5; i++) {
        System.out.println(i);
    }
    
  26. Harm de Wit
    Permalink to comment#

    The example in Ruby is considered bad practice according to the the Ruby Styleguide:

    arr = [1, 2, 3]
    
    # bad
    for elem in arr do
      puts elem
    end
    
    # note that elem is accessible outside of the for loop
    elem #=> 3
    
    # good
    arr.each { |elem| puts elem }
    
    # elem is not accessible outside each's block
    elem #=> NameError: undefined local variable or method `elem'
    

    Personally, the only for loop i can properly remember are the ones with each from ruby and haml because they seem to resemble to natural language the most. In other languages the ones i dislike the most are (i = 0; i < 5; i++) because they are way to configurable than needed in 99% of their usage. Most of the times i just want to loop over the whole list.

  27. Exactly!!

    Many a times, I too get confused, or should I say, forget!

  28. Rimantas
    Permalink to comment#

    Erm… Haml’s for loop is Ruby’s for loop…

  29. Permalink to comment#

    Exactly!

    A good programmer isn’t someone who remembers syntax perfectly. You can look up any syntax or functions you need in just a few seconds. It’s about being creative and thoughtfull.

  30. Chris D.
    Permalink to comment#

    I suggest anyone that codes to use something like AutoHotkey – a cool text auto-expander.

    Example: I type “fori” and it expands into my most common php for loop. (dang it, yes it auto expanded as I typed it here too haha :)

    I setup all my scripts in one text file, that file is in dropbox, so it’s same on any computer I use.

    As Chris mentioned, there are many languages, so one may choose to setup; pfor, jfor, sfor… etc.

    I believe we are getting to a time where we don’t need remember spelling, nor exact syntax for some stuff – computers are at our aid : )

  31. Roberto
    Permalink to comment#

    Confirmed any topic is to discuss, even something as silly as this

  32. Inderpreet
    Permalink to comment#

    That’s what I say in all my seminars. Now I have someone to support me. :P

  33. EMFE
    Permalink to comment#

    I love this site. Somehow, I wind up here either if I want it or not. Chris’ articles don’t have any ego in them or any other BS. Gives me confidence as a web developer, that these sort of “easy” things, that I also forget / sometimes have problems with, also exist at all sorts of levels. Thanks.

  34. How quickly you can Google your little code problems counts too. **It’s the spirit! **

  35. Plippie
    Permalink to comment#

    From all languages the most easiest loop to remember is ASP classic loop:

    dim i
    
    For i = 1 to 10    
        do stuff...
        i = i + 1
    next
    
    i = 10
    Do While i <= 11 
        do stuff...        
    Loop
    
    i = 1900
    Do Until i = 2005    
        do stuff...
        i = i + 1
    Loop
    
    i = 10
    For i = 0 to 10 Step 2 'use i as a counter
     do stuff...
    Next
    
  36. Soufiane
    Permalink to comment#

    Nice article , thank you .

  37. Andrew
    Permalink to comment#

    Great post, I’m a front ender who invariably spins cycles fine tuning my errors from language to language. My looping has become somewhat like Spanglish always close to the native syntax, but flavored with a little sabor from JS or SCSS.

  38. Funny… this is just one of those things that comes with coding in many languages. I can’t count the number of times I’ve used the wrong syntax for simple functions (such as this) because I’m typing in one language, and thinking in another. Haha!

  39. traq
    Permalink to comment#

    for ($i = 1; $i < 5; $i++) {
    echo $i;
    }

    Every once in a while I slip up and use commas instead of semicolons. Really throws me for a loop (no pun intended).

  40. Alex
    Permalink to comment#

    This site has many common algorithms for several popular programming languages. You can view by algorithm, or by language.

    http://langref.org/all-languages/program-structure/loops

  41. sqqqrly
    Permalink to comment#

    I cannot remember the various syntaxes either. But my editor can. vim lets me type fl. Out pops a for loop in the correct syntax for the language. cl for a class, wl for a while loop, etc.

    I assume many editors can do this, or can with appropriate plug-ins.

    -sq

    • Chris D.
      Permalink to comment#

      Good point. phpStorm has this capability too, helps a lot for zen coding. Can specify short codes per file type. So, “fl” can be used multiple times and the IDE knows which for loop to generate depending on file type. Clever helpful stuff : )

  42. J. Shook
    Permalink to comment#

    Amen.

    Glad to hear I’m not the only one.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".