JAVASCRIPT

THE BASICS



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



however be aware that HTML is not case-sensitive

onclick  

event handler is sometimes specified as 

onClick  

in HTML 

 <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



issue whit block comments 

var str = "JavaScript";
/*var regex = /[A-Z]*/; str.replace(regex, '_');*/
above code causes a syntax error

do you realize why?

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 ten1.5    //=> 1.5 - number one point five
.2     //=> 0.2 - number zero point two1e2    //=> 100 - number one hundred-1     //=> -1 - number minus one020    //=> 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


NaN
is a result of an operation 
that cannot produce a normal result
parseInt('JavaScript');   //=> NaN

NaN is a number
typeof NaN  //=> "number"
&
is not equal to any value
including itself
NaN === NaN   //=> false

LEXICAL STRUCTURE


Infinity
represents all values greater than
1.79769313486231570e+308
or
1.79769313486231570 × 10308
 

1.79769313486231570e+309       //=> Infinity

Lexical Structure


String Literals


a string literal  can be created
by wrapping any type of character
in single or double quotes

'JavaScript'   //=> "JavaScript"
"JavaScript"   //=> "JavaScript"
''             //=> ""
""             //=> ""
"\u005C"       //=> "\"

JavaScript doesn't have a character (char) type

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


represented by a pair of square brackets
surrounding zero or more values
separated by commas

var course = ['JavaSript', 'The Basics'];
console.log(course); //=> ["JavaSript", "The Basics"]


Lexical Structure


Function Literals


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


reserved keywords

abstract / arguments / boolean / break
byte / case / catch / char / class 
const / continue / debugger / default / delete
do / double / else  / enum
export /  extends / eval / false / final / finally 
float / for / function / goto / if / implements
import / in / instanceof / int / interface
let / long / native / new / null
package / private / protected / public 
return / short / static / super
switch / synchronized / this / throw / throws
transient / true / try / typeof
var / volatile / void / while / with

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 / break / continue
    a line break after any of these words will always be interpreted as a semicolon
    return
true;
    // is interpreted as:
return; true;// even if you meant:return true;

    LEXICAL STRUCTURE


    ++ & -- operators
    if you want to use them as postfix operators
    they must appear on the same line as the expression they apply to 

    otherwise the line break will be treated as a semicolon & 
    the ++ or -- will be parsed as a prefix operator applied to the code that follows

    i
++
j

// is parsed as:
i; ++j;
// not as:
i++; j;

    JavaScript - The Basics - Lexical Structure

    By Raul Matei

    Made with Slides.com

    JavaScript - The Basics - Lexical Structure

    • 1,510

    More from Raul Matei