We launched a new IT training category! Check out the 140+ courses now.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Properly using white space

From: Foundations of Programming: Fundamentals

Video: Properly using white space

JavaScript, like virtually all modern programming languages, does not care about whitespace, and by whitespace I mean spaces, tabs, line breaks. These are all regarded as insignificant, they are ignored. So if I have a file of JavaScript here with multiple statements in it, it doesn't matter if I start putting line breaks in between the lines whether at the start or the end or in the middle. This has no impact on behavior whatsoever. In the same way I've been starting every statement on the first character, but if I decided to put in a few tabs or a few spaces that doesn't matter at all.

Properly using white space

JavaScript, like virtually all modern programming languages, does not care about whitespace, and by whitespace I mean spaces, tabs, line breaks. These are all regarded as insignificant, they are ignored. So if I have a file of JavaScript here with multiple statements in it, it doesn't matter if I start putting line breaks in between the lines whether at the start or the end or in the middle. This has no impact on behavior whatsoever. In the same way I've been starting every statement on the first character, but if I decided to put in a few tabs or a few spaces that doesn't matter at all.

The language just doesn't care. It's ignoring the white space and just reading the characters that do occur. It's ignoring the line breaks because we use the semicolon to tell JavaScript where the statement ends. In fact, because we do it this way, if I wanted to, I could actually combine multiple statements onto one line. There is no problem with doing this in JavaScript. It does make our code tougher to read, so I am not going to do this. The general rule is one statement one line, but we could do it that way.

Even inside the statements themselves whitespace is ignored. I could put multiple spaces between the different elements of that statement or on the other hand I could actually get rid of a couple of those spaces. The rule here is don't confuse JavaScript and don't confuse ourselves. While I could have this line, var b=10, squeeze down about this much, I couldn't take it one step further and get rid of this space, because now I am confusing JavaScript. What is varb mean? It needs to be able to figure out where one part ends and the next begins.

So I'll need a space between the var and our variable name b. It's one of the reasons we can't have spaces in our variable names themselves. What I don't need is a space between the variable name here, b, and the equal sign. And that's because JavaScript knows the equal sign is not allowed as part of the variable name so this part must be separate, but best practice there are spaces between the different elements, the different parts of your statement. The only thing that's typical is you don't use a space before the closing semicolon.

Now you could have one. This is perfectly a valid JavaScript, with one space or a dozen before the semicolon. But the way most people write JavaScript and other C-based languages is just to immediately close with the semicolon as soon as you can. It's just the way we finished the line like using the period at the end of a sentence in English. White space more than anything is simply for readability. You start jamming all the elements up against each other, it becomes tough to read. So you use as many spaces as you need to make this clear.

Now there are a few customs that you may run into. Let's say we are using the ++ operator and I am just doing a++ here. I could write this as a ++, but by convention, a simple line like this is just written this way, but that takes us into one more point. There are two places that white space does matter. First, if we are using an operator that has multiple characters like the ++ operator, this is one thing. While I could put a space between the variable name and the ++ and I could put a space between the ++ and the closing semicolon, I cannot put a space in between the two. And that's because as far as JavaScript is concerned, this is not two addition operators.

It is one ++ operator, the increment operator, the ability to add one to a variable. So you can't put a space in the middle of that, same with a --, same with operators like += or -=. You can't put a space in the middle of this just the same way you can't put the space in the middle of var or alert or prompt or a variable name. Now the second place whitespace matters is inside a string. There's a difference between what, space, is, space, your, space, name, and adding a few more spaces to it and that's because we want spaces to matter inside a string.

So when you are creating string literals they will be regarded as significant. Now one question might be what if you want a line break inside a string? Well, for example here I might want to break the line between what is and your name. Now it's an easy thing to think, well, I'll just split that onto another line because after all we're ending the entire statement with the semicolon, so does this work? Well, no, it doesn't. You are not allowed to do it this way. JavaScript will get very confused about what's going on. If you want a line break inside a string, you may have to give JavaScript a clue that this is what we're doing, quite similar to adding the quotes inside a string by using the backslash.

What we use is another backslash to say this is what's called an escape character, there is a special character coming up that means something other than regular text, and then I say \n. Now this looks little weird. It looks like what is \nyour name? But as far as JavaScript is concerned, these two characters here are special. \n means new line, and I am using this string literal in a prompt. So if I save this, let's test this one. I'm going to open up the HTML page that's pointing to this file and as we can see here, the message is now coming out as, What is, line break, your name.

I type in Simon, I click OK, and we get the rather ugly looking message HelloSimon. Well, that's simply because I'm concatenating or combining two strings together here. I've created a variable called message that says Hello and then I'm adding the word Hello and whatever name was typed in and popping that up as an alert box. But really what I want is Hello, space, and then the name. So this would be another reason we would want this space regarded as significant.

So that when we are combining strings together, they don't all jam up against each other. Saving that and trying that one again, we could just reload the page to try it again. We can see that now that space is being taken into account. Now as we start writing more and more code you'll often see a few blank lines. You'll often see lines indented with tabs or spaces. Again, JavaScript doesn't care. It doesn't pay attention to this. Whitespace has no actual meaning, no impact on what this code is going to do, but whitespace can be very useful for making our code more readable and we'll see much more of that soon.

Show transcript

This video is part of

Image for Foundations of Programming: Fundamentals
Foundations of Programming: Fundamentals

61 video lessons · 92649 viewers

Simon Allardice
Author

 
Expand all | Collapse all
  1. 4m 15s
    1. Welcome
      1m 17s
    2. Making the most of this course
      2m 8s
    3. Using the exercise files
      50s
  2. 22m 11s
    1. What is programming?
      5m 45s
    2. What is a programming language?
      4m 48s
    3. Writing source code
      5m 34s
    4. Compiled and interpreted languages
      6m 4s
  3. 16m 29s
    1. Why JavaScript?
      4m 45s
    2. Creating your first program in JavaScript
      6m 54s
    3. Requesting input
      4m 50s
  4. 31m 38s
    1. Introduction to variables and data types
      5m 16s
    2. Understanding strong, weak, and duck-typed languages
      3m 51s
    3. Working with numbers
      5m 4s
    4. Using characters and strings
      4m 5s
    5. Working with operators
      4m 47s
    6. Properly using white space
      6m 46s
    7. Adding comments to code for human understanding
      1m 49s
  5. 24m 48s
    1. Building with the if statement
      7m 35s
    2. Working with complex conditions
      4m 9s
    3. Setting comparison operators
      6m 59s
    4. Using the switch statement
      6m 5s
  6. 17m 54s
    1. Breaking your code apart
      4m 1s
    2. Creating and calling functions
      2m 56s
    3. Setting parameters and arguments
      6m 7s
    4. Understanding variable scope
      2m 23s
    5. Splitting code into different files
      2m 27s
  7. 13m 31s
    1. Introduction to iteration
      4m 28s
    2. Writing a while statement
      5m 24s
    3. Creating a for loop
      3m 39s
  8. 19m 28s
    1. Cleaning up with string concatenation
      4m 30s
    2. Finding patterns in strings
      8m 3s
    3. Introduction to regular expressions
      6m 55s
  9. 19m 58s
    1. Working with arrays
      5m 46s
    2. Array behavior
      5m 29s
    3. Iterating through collections
      5m 18s
    4. Collections in other languages
      3m 25s
  10. 10m 50s
    1. Programming style
      5m 55s
    2. Writing pseudocode
      4m 55s
  11. 25m 55s
    1. Input/output and persistence
      3m 6s
    2. Reading and writing from the DOM
      8m 11s
    3. Event driven programming
      7m 47s
    4. Introduction to file I/O
      6m 51s
  12. 24m 25s
    1. Introduction to debugging
      5m 57s
    2. Tracing through a section of code
      7m 5s
    3. Understanding error messages
      3m 21s
    4. Using debuggers
      8m 2s
  13. 14m 16s
    1. Introduction to object-oriented languages
      5m 18s
    2. Using classes and objects
      6m 28s
    3. Reviewing object-oriented languages
      2m 30s
  14. 11m 14s
    1. Memory management across languages
      5m 11s
    2. Introduction to algorithms
      4m 2s
    3. Introduction to multithreading
      2m 1s
  15. 29m 20s
    1. Introduction to languages
      1m 42s
    2. C-based languages
      4m 40s
    3. The Java world
      3m 13s
    4. .NET languages: C# and Visual Basic .NET
      6m 17s
    5. Ruby
      3m 4s
    6. Python
      2m 56s
    7. Objective-C
      4m 3s
    8. Libraries and frameworks
      3m 25s
  16. 1m 2s
    1. Where to go from here
      1m 2s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Foundations of Programming: Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.