1/21/2014

Variables and statements | JavaScript Tutorial

Log in

JavaScript Tutorial
Home Tutorial JavaScript: from the Ground to Closures First Steps
Hello, World! Browser Developer's Tools Tutorial

JavaScript: from the Ground to Closures

JavaScript: from the Ground to Closures Javascript and related technologies First Steps
First Steps

Variables and statements

Ilya Kantor

1. Code structure 1. Semicolon 2. Missing semicolon pitfalls 2. Variables 1. Definition 2. Variable names 3. Reserved words 4. Language types 5. Weak typing 3. Comments 1. Multiline comments 2. Blocks 4. Summary JavaScript is a special language indeed. Especially for those coming from PHP, C, Java. Lets start it with language basics: variables, coding style etc.

Like

Setup your environment Hello, World! Variables and statements Browser Developer's Tools User interaction: alert, prompt and confirm Operators and constructs

Functions: declarations and expressions Mastering data types Four scents of "this" Type detection Function arguments Static variables and methods Scopes and Closures Decorators

Code structure
The code consists of multiple statements.

Document and Events Object Oriented Programming Timing

Semicolon
Statements are separated by a semicolon.
Show!

Frames and windows Regular expressions in JavaScript Advanced and Extra stuff

0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0

< h t m l > < b o d y > < s c r i p t > a l e r t ( ' H e l l o ' ) ; a l e r t ( ' W o r l d ! ' ) ; < / s c r i p t > < / b o d y > < / h t m l >

Donate Donate to this project

Spaces and tabs are ignored, so one-lining is possible: a l e r t ( ' H e l l o ' ) ; a l e r t ( ' W o r l d ! ' ) ;

But newlines are not ignored. Instead, a newline may separate statements, just like semicolons do. These two lines are fully equivalent: a=5 a=5 ;

Missing semicolon pitfalls

There are few mistakes which beginners tend to make in multiline assignments and calls, because of semicolon issues. First, this is not going to work: v a ra=" l o n g l i n e" Thats because a parser thinks that the first line is a full statement, like: v a ra=" l o n g ; l i n e" ; And there will be an error about unfinished string (unterminated literal). Second, these two snippets of code are equivalent: r e t u r n

http://javascript.info/tutorial/variables-and-statements

1/5

1/21/2014

r e t u r n r e s u l t ;

Variables and statements | JavaScript Tutorial

Is, because of a newline, same as r e t u r n ; r e s u l t ; And thats of course different from: r e t u r nr e s u l t Only the last example actually returns r e s u l t . To insert a convenience newline, you can put a backslash before line break, like that: 1 v a ra=" l o n g\ 2 l i n e" 3 4 r e t u r n\ 5 r e s u l t A backslash before a line break forces the interpreter to ignore the newline. The newline is also ignored if the expression is not finished, particularly for unfinished operators or unclosed brackets: 1 v a ra=" l o n g"+ 2 "l i n e" 3 4 v a rb=2+( 5 2+3 6 ) JavaScript tries to be even smarter than that. The output in the example below is 8 , the newline is ignored. And dont ask me why.
Run!

1 v a rb=2*2 2 +4 3 4 a l e r t ( b ) The rules about the semicolon insertion are complicated and sometimes weird. They are described in the ECMAScript specification. In short, it is possible to omit ending semicolons in most cases, but doing so gives freedom to the interpreter. The freedom which it could abuse and cause bugs.

Semicolon: to write or not to write?

There was an argue between programmers: should I put a semicolon or not?. Nowadays, most people agree that they should. In the tutorial, you find lots of code without semicolons. That just my bad habit. Because Im in JavaScript for a very long time, I stepped into pitfalls so many times that I know how to get the way out very quickly. Guess, you dont want to repeat my path here, but rather walk around the pits. Put semicolons between statements.

Whats wrong here? 1 v a ra=" E m p t ys p a c e s-w h a ta r ew el i v i n gf o r ? 2 A b a n d o n e dp l a c e s-Ig u e s sw ek n o wt h es c o r e . . 3 O na n do n ! 4 D o e sa n y b o d yk n o ww h a tw ea r el o o k i n gf o r ? " 5 6 a l e r t ( a )

Open solution

Variables
If you are not familiar with general programming variable concept, there is a great wiki article about it Shortly, a variable is a named box, where you could put a value. .

Definition
First, a variable should be defined. That can be done in any place of code using directive v a r

http://javascript.info/tutorial/variables-and-statements

2/5

1/21/2014
v a rx

Variables and statements | JavaScript Tutorial

When a variable is defined, it is possible to operate with it, for example, put a value into it: v a rx x=5 Or you can define multiple variables in single v a rstatement: v a ra ,b ,c It is possible to assign a variable in definition: v a rn a m e=" J o h n " ,s o n g=" L a l a l a "

In JavaScript you can assign to a variable which you havent defined using v a r : n o V a r=" v a l u e " Technically, it doesnt cause an error, but dont go this way. Always define variables with v a r . Thats a good style and helps to evade certain errors, like in the code below. Run this in IE:
Show!

0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1

< h t m l > < b o d y > < d i vi d = " t e s t " > < / d i v > < s c r i p t > t e s t=5 a l e r t ( t e s t ) < / s c r i p t > < / b o d y > < / h t m l >

There will be an error. IE, Safari/Chrome and Opera create a variable for each element with i d , so variable t e s t references D I Vin the example above. But in IE the auto-generated variable is an internal reference that cant be changed. Thats why assignment to t e s tcauses an error. The following code works:
Show!

0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1

< h t m l > < b o d y > < d i vi d = " t e s t " > < / d i v > < s c r i p t > v a rt e s t=5 a l e r t ( t e s t ) < / s c r i p t > < / b o d y > < / h t m l >

Variable names
A variable name first char must be a letter, $or _ . The second char and other chars are allowed to be digits. Strange, but valid names: 1 v a r$ t h i s , 2 _ p r i v a t e , 3 $ , 4 _ , 5 $ 1 , 6 u s e r 1 5

JavaScript is CaSE-sEnSitiVe! A p p l eand A P P L Eare two different names.

Reserved words
There is also a list of reserved words, which cant be variable names. It includes v a r ,f u n c t i o n ,r e t u r n ,

http://javascript.info/tutorial/variables-and-statements

3/5

1/21/2014

Variables and statements | JavaScript Tutorial

c l a s s ,i m p l e m e n t sand other words, most of them are used in the language itself. Some words, like c l a s sare not used in modern JavaScript, but still reserved. There are browsers which allow them, but using them may lead into a pitfall. The following code works in Firefox which allows ' c l a s s 'as variable name. And fails in Safari which gives syntax error on such variable:
Run!

1 v a rc l a s s=5 2 a l e r t ( c l a s s ) Read more about naming principles and how to make good names in the article Variable naming.

Language types
JavaScript defined the following basic types: number Any number, integer and non-integer: 1 ,2 ,1 . 5etc. string A string, like ' c a t ' ,' d o g 'or ' m ym o m m i eb o u g h tap u p p y ' boolean Two possible values: t r u eand f a l s e . object Objects.. Well talk about them later. special values There are special values which have no type: n u l land u n d e f i n e d .

Weak typing
Variables in JavaScript are weakly typed. That means two things: 1. Every value has a type 2. You can put a value of any type into any variable For example: v a ru s e r I d=1 2 3 ; / /1 2 3i san u m b e r v a rn a m e=" J o h n " ; / /" J o h n "i sas t r i n g But you are free to reassign the variable to a value of another type: v a ru s e r I d=1 2 3 ; u s e r I d=f a l s e ; / /1 2 3i san u m b e r / /n o wu s e r I di sb o o l e a n

Before a variable is assigned, it has u n d e f i n e dvalue. The following statements mean the same: v a rx v a rx=u n d e f i n e d Generally, u n d e f i n e dmeans no value.

Comments
Did you note these // from the previous example? That were comments. Comments in JavaScript have two different forms. Single line comment starts with / /and continues to the end of line. / /l e t ' ss e ew h oi sh e r e : v a rn a m e=" J o h n " ;/ /M ym o s tv a l u e dv i s i t o r Anything you put after / /is ignored by the interpreter.

Multiline comments
Multiline comment is enclosed with / *. . . /and may span multiple lines. 1 2 3 4 5 6 7 / * T h ef o l l o w i n gv a r i a b l eh a sas h o r tn a m e . U s u a l l yas h o r tn a m em e a n st h a tt h ev a r i a b l ei s t e m p o r a r ya n du s e do n l yi nn e a r e s tc o d e . * / v a ra=" J o h n " ;

Blocks
The next building element is a block. It consists of multiple statements wrapped in curly braces, like the following:

http://javascript.info/tutorial/variables-and-statements

4/5

1/21/2014
1 v a ri=5 ; 2 { 3 i=6 ; 4 } 5 v a rb ;

Variables and statements | JavaScript Tutorial

Standalone blocks are never used in JavaScript. But curly braced statements come as a part of more complex syntax constructs like f o r ,i f ,w h i l e , functions, etc. Well get to them in the next sections.

Summary
A few important points to summarize: Variables are defined by v a ranywhere in the code. They can be assigned in definition. A variable can contain a value of any type. There are single-line / /and multiline / . . . * /comments. Statements are divided by semicolons. A newline usually implies a semicolon, so technically it is possible to omit them most time. There are arguments pro and contra omitting semicolons. Choose your way with eyes open. Hello, World! Browser Developer's Tools

See also:
Variable naming Google JavaScript Style Guide

The content of this site is available under the terms of CC BY-NC-SA. Ilya Kantor, 2011.

"JavaScript is a registered trademark of Oracle corp. This site is not affiliated with Oracle corp.

http://javascript.info/tutorial/variables-and-statements

5/5