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. Let’s start it with language basics: variables, coding style etc.



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

Statements are separated by a semicolon.

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" That’s 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



Guess. you don’t want to repeat my path here. They are described in the ECMAScript specification. In short. And don’t ask me why. . the newline is ignored. The newline is also ignored if the expression is not finished. I stepped into pitfalls so many times that I know how to get the way out very quickly. Definition First. And that’s 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 .1/21/2014 r e t u r n r e s u l t . a variable is a named “box”. where you could put a value. r e s u l t . The output in the example below is 8 . . 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. 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. Nowadays. 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. Because I’m in JavaScript for a very long time. That can be done in any place of code using directive v a r http://javascript. Variables and statements | JavaScript Tutorial … Is. a variable should be defined. same as r e t u r n . Put semicolons between statements. What’s 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 . most people agree that they should. because of a newline. but doing so gives freedom to the interpreter. it is possible to omit ending semicolons in most cases. you find lots of code without semicolons. In the tutorial. you can put a backslash before line break. To insert a convenience newline. Semicolon: to write or not to write? There was an argue between programmers: “should I put a semicolon or not?”. but rather walk around the pits. The freedom which it could abuse and cause bugs. 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. That just my bad habit.info/tutorial/variables-and-statements 2/5 . there is a great wiki article about it Shortly.

3 $ . The second char and other chars are allowed to be digits.f u n c t i o n . 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.s o n g=" L a l a l a " In JavaScript you can assign to a variable which you haven’t defined using v a r : n o V a r=" v a l u e " Technically. 5 $ 1 . like in the code below. Strange. which can’t be variable names. Reserved words There is also a list of reserved words. But in IE the auto-generated variable is an internal reference that can’t be changed.1/21/2014 v a rx Variables and statements | JavaScript Tutorial When a variable is defined. 6 u s e r 1 5 JavaScript is CaSE-sEnSitiVe! A p p l eand A P P L Eare two different names. 4 _ . it is possible to operate with it.r e t u r n . IE. http://javascript. it doesn’t cause an error. 2 _ p r i v a t e . 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. so variable t e s t references D I Vin the example above. That’s a good style and helps to evade certain errors. but valid names: 1 v a r$ t h i s .c It is possible to assign a variable in definition: v a rn a m e=" J o h n " . Safari/Chrome and Opera create a variable for each element with i d . That’s why assignment to t e s tcauses an error. It includes v a r .info/tutorial/variables-and-statements 3/5 . but don’t go this way. for example. Always define variables with v a r . $or _ . 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 .

2 . / /1 2 3i san u m b e r v a rn a m e=" J o h n " . . It consists of multiple statements wrapped in curly braces.info/tutorial/variables-and-statements 4/5 . / /" 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 n d e f i n e dmeans “no value”. /and may span multiple lines.i m p l e m e n t sand other words. 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. like c l a s sare not used in modern JavaScript.. Some words. like the following: http://javascript. like ' c a t ' . Multiline comments Multiline comment is enclosed with / *. Blocks The next building element is a block. / /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. Weak typing Variables in JavaScript are weakly typed. The following code works in Firefox which allows ' c l a s s 'as variable name. There are browsers which allow them. 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 ./ /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. most of them are used in the language itself. object Objects. You can put a value of any type into any variable For example: v a ru s e r I d=1 2 3 . it has u n d e f i n e dvalue. 5etc. Every value has a type 2. integer and non-integer: 1 .' 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 . Comments Did you note these “//” from the previous example? That were comments. / /l e t ' ss e ew h oi sh e r e : v a rn a m e=" J o h n " .1/21/2014 Variables and statements | JavaScript Tutorial c l a s s . * / v a ra=" J o h n " . Single line comment starts with / /and continues to the end of line. That means two things: 1. We’ll talk about them later. The following statements mean the same: v a rx v a rx=u n d e f i n e d Generally. but using them may lead into a pitfall. Comments in JavaScript have two different forms. u s e r I d=f a l s e . Language types JavaScript defined the following basic types: number Any number. special values There are special values which have no type: n u l land u n d e f i n e d . but still reserved. . 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 .1 . string A string.

Statements are divided by semicolons. * /comments. A newline usually implies a semicolon. 2 { 3 i=6 . so technically it is possible to omit them most time.i f .w h i l e . 2011. This site is not affiliated with Oracle corp. functions. etc. We’ll get to them in the next sections. They can be assigned in definition. . ‹ Hello.info/tutorial/variables-and-statements 5/5 . 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. A variable can contain a value of any type.1/21/2014 1 v a ri=5 . There are single-line / /and multiline / . 4 } 5 v a rb . . Summary A few important points to summarize: Variables are defined by v a ranywhere in the code. Choose your way with eyes open. "JavaScript™ is a registered trademark of Oracle corp. But curly braced statements come as a part of more complex syntax constructs like f o r . Variables and statements | JavaScript Tutorial Standalone blocks are never used in JavaScript. http://javascript. © Ilya Kantor. There are arguments pro and contra omitting semicolons.