JAVASCRIPT
LEXICAL STRUCTURE
Lexical Structure
Character Set
Case Sensitivity
Whitespace
Comments
Literals
Identifiers
Reserved words
Optional semicolons
Lexical structure
the lexical structure of a programming language
is
the set of elementary rules
that specifies how you write programs in that language
Lexical Structure
Character
set
Unicode
which is a computing industry standard for the consistent
encoding, representation and handling of text
expressed in most of the world's writing systems
JavaScript
uses UTF16 code units internally
externally, the browser determines the encoding
LEXICAL STRUCTURE
to support older technology
that can not display or input the full set of Unicode characters,
unicode escapes have been defined
\u followed by four hexadecimal digits
\u000A
// => UNICODE CHARACTER 'LINE FEED (LF)' (U+000A)
\u00E2
// => LATIN SMALL LETTER A WITH CIRCUMFLEX (U+00E2)
LEXICAL STRUCTURE
normalization
Unicode allows more than one way of encoding the same character
\u00e2\u0302
//=> LATIN SMALL LETTER A WITH CIRCUMFLEX
the source code that is interpreted
is assumed to have already been normalized
that's why no attempt to normalize
identifiers / strings / regular expressions
is made
Lexical Structure
Case
sensitivity
capitalization of letters matters
keywords / variables / function names
&
all other identifiers must always be typed
with a consistent capitalization
the for keyword for example
must be always typed with small caps
NOT
For / FOR
LEXICAL STRUCTURE
<button onClick="someFunction()">Click Me</button>
LEXICAL STRUCTURE
Whitespace
spaces are ignored
line breaks for most part are ignored too
source code can be formatted
&
indented freely
LEXICAL STRUCTURE
Comments
JavaScript supports two styles of comments
block
/* ... */
&
single-line comments
// ...
LEXICAL STRUCTURE
var str = "JavaScript";
/*
var regex = /[A-Z]*/; str.replace(regex, '_');
*/
Lexical StructureS
Literals
literals are fixed values NOT variables
that are literally provided in a script
LEXICAL STRUCTURES
JavaScript
has
numeric / string / boolean
object / array /
function / regular expression
literals
Lexical Structure
Numeric Literals
JavaScript has a single number type
10 //=> 10 - number ten
1.5 //=> 1.5 - number one point five
.2 //=> 0.2 - number zero point two
1e2 //=> 100 - number one hundred
-1 //=> -1 - number minus one
020 //=> 16 - number sixteen in base 8 (octal)
0x10 //=> 16 - number sixteen in base 16 (hexadecimal (hex))
[0xff, 0x00, 0x00] //=> [255, 0, 0] - it looks like?
LEXICAL STRUCTURE
parseInt('JavaScript'); //=> NaN
typeof NaN //=> "number"
NaN === NaN //=> false
LEXICAL STRUCTURE
Infinity
represents all values greater than
1.79769313486231570e+308
or
1.79769313486231570 × 10308
1.79769313486231570e+309 //=> Infinity
1.79769313486231570e+309 //=> Infinity
Lexical Structure
String Literals
'JavaScript' //=> "JavaScript"
"JavaScript" //=> "JavaScript"
'' //=> ""
"" //=> ""
"\u005C" //=> "\"
LEXICAL STRUCTURE
Boolean Literals
represented by two literal values
true & false
Lexical Structure
Object Literals
represented by a list of zero or more pairs of
property names & associated values
enclosed in curly brackets
var course = {
name: 'Javasript - The Basics'
};
console.log(course);
//=> Object {name: "Javasript - The Basics"}
LEXICAL STRUCTURE
Array Literals
surrounding zero or more values
separated by commas
var course = ['JavaSript', 'The Basics'];
console.log(course); //=> ["JavaSript", "The Basics"]
var course = ['JavaSript', 'The Basics'];
console.log(course); //=> ["JavaSript", "The Basics"]
Lexical Structure
A function literal defines a function value
formed by
function keyword / optional name
list of parameters / function body
var name = function (param1, param2, param3) { (function () {
console.log(param1, param2, param3);
})(); }
name('JavaScript', '-', 'The Basics'); //=> JavaScript - The Basics
LEXICAL STRUCTURE
Regular Expression Literals
provide compilation of the
regular expression when the script is loaded
var regex = /[A-Za-z0-9]/g;
Lexical Structure
Identifiers
used to
name variables & functions
or
to provide
labels for certain loops
LEXICAL STRUCTURE
identifiers must begin with
a letter
an underscore _
or a dollar sign $followed by
letters / digits / underscores / dollar signs
digits are not allowed as the first character
use only ASCII letters & digits
LEXICAL STRUCTURE
Reserved Words
are keywords
reserved by the language
&
cannot be used as identifiers
LEXICAL STRUCTURE
LEXICAL STRUCTURE
avoid using predefined global variables
&
function names
arguments / Array / Boolean / Date
decodeURI / decodeURIComponent / encodeURI / encodeURIComponent
Error / eval / EvalError / Function / Infinity / isFinite / isNaN / JSON
NaN / Number / Object / parseFloat / parseInt / RangeError / ReferenceError
RegExp / String / SyntaxError / TypeError / undefined / Math
have in mind that JavaScript implementations
may define other global variables & functions
LEXICAL STRUCTURE
Optional Semicolons
the
semicolon ; is used to
separate
statements
to make the code clearer
it CAN usually be omitted
between two statements
if those statements are written on separate lines
at the end of a program
before a closing curly bracket }
Lexical Structure
JavaScript treats a line break as a semicolon if the
next non space character cannot be interpreted as a continuation
of the current statement
var last = 'JavaScript'
var first = 'The Basics'
var name = last + first
(last + first).toUpperCase()
//=> TypeError: string is not a function
LEXICAL STRUCTURE
if a statement begins with
( [ / + -
there is a chance that it could be interpreted
as a continuation of the previous statement
there are two exceptions
return true;
// is interpreted as: return; true;
// even if you meant:
return true;
LEXICAL STRUCTURE
i
++
j
// is parsed as:
i; ++j;
// not as:
i++; j;
JavaScript - The Basics - Lexical Structure
By Raul Matei
JavaScript - The Basics - Lexical Structure
- 1,483