Dive into JavaScript

A Brief Introduction of JavaScript

Created by Jianrong Yu

History of JavaScript

Those who do not read history are doomed to repeat it. (by George Santayana)

Birth of JavaScript

Lightweight interpreted language for nonprofessional programmers (like Microsoft's Visual Basic) in 1995.
Standardized as ECMAScript in 1996.

Evolution of ECMAScript

Edition 3: Published in December 1999, most widely implemented version
Edition 4: Abandoned in 2008
Edition 5(5.1): Plulished in December 2009, implemented in IE9+ and all other browsers.
Edition Harmony: Former edition 4

ECMAScript Edition5 - Strict Mode

Strict mode added to ECMAScript Edition 5 to standardize the behaviour of Javascript.
Activate the Strict Mode:
Add "use strict"; to the first statement of any excution context.

function strictFunc(){ "use strict"; // ... code in strict mode }

Playground

Developer tools in browser:

Chrome Webkit developer tools
Firefox firebug

Chrome - Code evaluation

Chrome - Debug support

Online Playground

Try the hidden button on the bottom left corner of the page.

// And you can use console object in the Code Pad to // print some information: console.log("Hello, it's normal text"); console.warn("Hello, it's warning text"); console.error("Hello, it's error text");

run

Types

Types - 5 primitive types

Primitive types:

Undefined
Null
Boolean
String (Immutable)
Number (double/32bit integer)

Number literal

Normal

123, -123

Float

1.5, 2.34e20, -1.2e-20

Hex number:

0xAFF, 0x1FFFFFFFF

Octal number (not avaliable on strict mode):

023, 077

String literal

Single quotes or double quotes

'string', "string", '"double quotes in single quotes"', "'same for single'"

Unicode UTF-16 encoding used internal(two characters for unicode supplementary planes)

'你好', '𠀰𠀱𠀲𠀳𠀴'

Control characters

\uHHHH (unicode, BMP only), \b (backspace), \f (formfeed), \n (newline), \r (carriage return), \t (tab), \' , \"

console.log("Hello".length); console.log("你好".length); console.log("𠀰𠀱𠀲𠀳𠀴".length); // 5 characters but length is 10

run

Types Operator: typeof

Explicit Type Conversion

Boolean()
String()
Number()

And other ways:

// convert to Boolean: console.log( !!0 ); // convert to String: console.log( "" + 100 ); // convert to Number: console.log( parseInt("234.3", 10) ); console.log( parseFloat("234.3") ); console.log( +"234.3" ); // DO NOT: // x|0, x >> 0 for interger conversion console.error( "0x10000000" |0 ); console.error( "0x100000000" |0 );

run

Implicit Type Conversion

Implicit type conversion happended for a lot of operators.

console.log( 5 + "10" ); console.log( "5" + 10 ); console.log( "5" - 10 ); console.log( "" == false ); console.log( "" == 0 );

run

Types - Map-like object

// object literal var mObjLiteral = {}; mObjLiteral.property1 = 1; mObjLiteral["property2"] = "value2"; // object literal var mObjLiteral = { "property1" : 1, "property2" : "value2" }; var sValue1 = mObjLiteral["property1"]; var sValue2 = mObjLiteral.property1; console.log( JSON.stringify( mObjLiteral, null, " " ) );

run

Object Type Operators

in
delete
instanceof
for (in ...) loop (unordered)

var obj = { "a" : 100, "b" : 200 }; "a" in obj; // true delete obj["a"]; "a" in obj; // false new Date() instanceof Date; // true "str" instanceof String; // false, Primitive string is not instance of String Class obj.b = undefined; "b" in obj; // true, set to undefined does not remove the property for ( var key in obj ) { console.log( "key: " + key + " value: " + obj[key]); }

Object copy by reference

Object is always copied by reference.

var objA = { name: "ObjA", value: 100 }; function modifyObject( obj ){ obj.name = "modifiedObject"; } // modify the object argument of a function modifyObject( objA ); // modifiy the copied object var objB = objA; objB.value = 200; console.log( objA.name); console.log( objA.value );

run

Global Object

There is always a global object in ECMAScript environment.

window in web browser
global in nodejs

// assign to Global Object directly window.globalVar1 = 100; // assign in global excutation context var globalVar2 = 200; // ATTENTION: avoid global pollution // assign in non-strict mode function function nonStrictFunc(){ // "use strict"; globalVar3 = 300; // ECMAScript 5: exception thrown } nonStrictFunc(); console.log( window.globalVar1 ); // console.log( window.globalVar2 ); // Code pad is executed in function. console.log( window.globalVar3 );

run

Identifier

Identifier in ECMAScript

Identifier in Javascript:

Start with _, $, alphabet character or other unicode letter
Used in loop label ,variable name and object properties assign/get

var $Hello = "hello, "; var 世界 = { なまえ:"世界" }; console.log( $Hello + 世界.なまえ );

run

Reserved Words in ECMAScript

Identifier cannot be any of the following reserved words:

Null and Boolean Literal:

null true false

Keyword:


              break case catch continue debugger default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with

Reserved words for future:


              class const enum export extends import super

Strict mode:


              implements interface let package private protected public static yield

Words in Global Object

Attention: These words are properties of Global Object and avaliable for identifier, but DO NOT USE THESE WORDS FOR IDENTIFIERS!

undefined:

undefined

Primitive type wrapper:

Boolean Number String

Special number:

NaN Infinity

Other built-in ECMAScript class:

Object Function Array Date RegExp

Operators

Basic operators

Arithmetic operators:

+ -(subtraction ) * / %
++ -- + -(Unary negation)

Bitwise operators (Note: the number will be converted to 32 bits integer for any Bitwise operation)

& | ^ ~ << >> >>>

Assign operators:

+= -= *= /= %= <<= >>= >>>= &= ^= |=

Comparison and other operators

Comparison operators

== != > >= < <= === !==

Logical operators

&& || !

String operators

+ +=

// == and != should not be used in most cases console.log( 5 == "5" ); console.log( 0 == "" ); console.log( 0 == {} ); console.log( 0 == [] ); console.log( undefined == null ); console.log( undefined == 0 ); // result will be false if operator ==== is used

run

Special operators

Conditional operator

condition ? val1 : val2

Comma operator

,

Operators for object

delete in instanceof new this

Special operators

typeof void

Operator precedence

Statements

Comments

Line comment

// this is a line comment

Block comment

/* this is a block comment */

HTML comment (not recommended)

Variable Declaration and Hoisting

Variable declaration

var name_1 [ = value_1] [ ,..., name_n [= value_n]]

var variableA = 200; (function (){ console.log( variableA ); var variableA = 100; console.log( variableA ); console.log( variableB ); })();

run

Function Declaration and Hoisting

Function declaration

function functionName([arguments list]) { [statements] }

Function Expression

var foo = function([arguments list]) { [statements] }

run

Conditionals

if (expression) { statements } [ else if (expression) {statements} ]

switch

switch (expression) { case x: statements; break; [default: ...] }

? :

condition ? val1 : val2

Loops

while

while (expression) statements

do/while

do statements while (expression);

for

for (initialize ; test ; increment) statement
labled break: label: for(...) { break/continue label; }

outer: for ( var i = 0; i< 4; ++i) { for ( var j = 0; j< 4; ++j){ console.log("["+i+","+j+"]"); if (i === 1 && j === 1) { break outer; } } }

run

For in Loops

for (key in object)
Warning:

Unordered
Use on simple data object only!
Do not use on Array

var objA = { name: "objA" }; objA.printName = function(){ console.log(this.name); }; for (key in objA) { console.log(key+ " : "+ objA[key]); }

run

Return

return expression;

function returnByArg(arg) { switch (arg){ case 0: return 0; case 1: return "A"; case 2: return;// return undefined if no expression } } console.log( returnByArg(0) ); console.log( returnByArg(1) ); console.log( returnByArg(2) );

run

Exception

try/catch/finally

try{ statements }[ catch(exception){ statements } ] [ finally{ statements } ]

throw

throw expression;

try { console.log( "before exception thrown" ); throw { message: "exception throw!", code: 0xff }; console.log( "after exception thrown" ); } catch (e) { console.log( "exception: " + e.message ); } finally{ console.log( "finally" ); }

run

Note

with (Unavaliable in strict mode!)

Optional Semicolons (Add Semicolons always!)

K&R Code Style is mandatory

Always add braces {} to loop and condition

// Semicolon automatically added after return case a bug. function foo(){ console.log("foo") return { name : "bar" } // Use K&R Style to prevent above bug } console.log( foo().name ); // miss semicommon on the end may cause bug var x = function(){ } ["abc","def"].forEach(function(item){ });

run

No block scope

No block scope in ECMAScript!

Braces {} used both on block definition and object literal

run

Function

Declaration and Expression

Function Declaration

function foo( [argument list] ) { statements }

Function Expression (lambda)

( function [bar] ( [argument list] ) { statements } )

run

Optional parameters

Additional parameter set to undefined

Arguments Object for variable-length argument list

// use undefined to detect optional parameters function foo(a, b/*optional, default is 100*/) { if (b === undefined) { b = 100; } return a * b; } console.log( foo(5, 9) ); console.log( foo(5) ); // use arguments for any-length parameters function bar(){ for (var i=0; i<arguments.length; ++i) { console.log("parameter["+i+"]:"+arguments[i]); } } bar(1,2,"hello", {name: "obj"}, undefined);

run

Function is Object

Function is object with:

Internal [[call]] method

Internal scope context object

Internal JS code content

Other members

function foo(a,b){ return 100; } foo.bar = 200; console.log( foo.length ); // Length of the arguments console.log( foo.bar ); console.log( foo.name ); // NOT IN SPECIFICATION

run

Scope Chain and Closure

No block scope

Variable locate through scope chain to the Global scope

Closure is created when the function object is created (not function variable stack)

run

Invocation

Function Invocation

Method Invocation

Indirect Invocation

functionFoo.call( object [, arg1 [,arg2 ...]] )
functionFoo.apply( object [,argument list] )

// Method invocation var foo = { Name: "foo", id: 42, nickName: "bar", // method Invocation print: function(){ console.log( "I'm " + this.Name + "#"+ this.id ); } }; foo.print(); function printNickName(prefix){ console.log( prefix + this.nickName + "#" + this.id ); } // indirect invocation printNickName.call( foo, "I'm " ); printNickName.apply( foo, ["You'are "] ); // fix it foo.postpondPrint = function(){ setTimeout( function(){ console.log( "postpond for : " + this.Name ); }, 1000 ); }; foo.postpondPrint(); // method call on other object // var x=Object.prototype.toString.call( Math ); // console.log(x);

run

new Invocation

Function is used for class constructor and operator new is used for instantiation.
Warning:

Global Object will be polluted if operator new is missing
Function may return another object

run

How new Works & prototype

Operator new create new object in several steps:

Create an empty object
Assign the internal variable [[prototype]] to Constructor.prototype
Constructor function is called on the new object
Return the new object(or the return value of function if an object is returned)

run

prototype chain

Prototype chain is a feature common used for class inheritance in ECMAScript

// Simple Example function Animal(){ } Animal.prototype = { shout: function(){ console.log(this.name + ' shout:"' + this.voice + '"!'); } }; function Cat(name){ // missing: call the constructor function of parent class this.name = name; } Cat.prototype = new Animal(); Cat.prototype.voice="meow"; var kitty = new Cat("kitty"); var doraemon = new Cat("doraemon"); kitty.shout(); doraemon.shout();

run

Extension of Native Prototypes

Native Object can be extended by modify the prototype of their Native Constructors.
Note: Monkey patching on native object is not recommended, the only exception is backport the features of newer JavaScript specification.

// example: extend native Function. NOT RECOMMENDED! function foo(){} var bar = " bar "; Function.prototype.showMe = function(){ console.log("It's function [" + this.name + "]"); }; foo.showMe(); // example: backport new method in ECMA5 to ECMA3 String.prototype.trim = function(){ return this.replace(/^\s*|\s*$/g, ""); }; console.log("[" + bar.trim() +"]");

run

More on prototype

in vs hasOwnProperty: prototype chain will not be checked for hasOwnPropert

instanceof: check if the class function's prototype in the prototype chain

isPrototypeOf(ECMA5): check for the instance

Object.getPrototypeOf(ECMA5): get the prototype of an instance

run

Built-in Object

Global Object

The root object of ECMAScript environment. window in browser and global in nodejs.

Value properties

NaN Infinity undefined

Function properties

eval()
parseInt(string, radix) parseFloat(string) isNaN(number) isFinite(number)

 decodeURI(encodedURI) encodeURI(uri) decodeURIComponent(encodedURIComponent) encodeURIComponent(uriComponent) 
 escape/unescape

Object Objects

Constructor methods: (ECMA5 Only)

Property related

defineProperty defineProperties getOwnPropertyDescriptor getOwnPropertyNames

Internal state

freeze isFrozen preventExtensions isExtensible seal isSealed

Others

getPrototypeOf create keys

Object Objects

Portotype methods

constructor

toString

toLocaleString

valueOf

hasOwnProperty

propertyIsEnumerable

isPrototypeOf(ECMA5)

Array Objects

Literal (NOTE: Always use literal instead of constructor to create array)

[value1, value2, ...]

Constructor methods:

isArray(ECMA5)

// Length is 3. var a1 = new Array(x1, x2, x3); // Length is 2. var a2 = new Array(x1, x2); // If x1 is a number and it is a natural number the length will be x1. // If x1 is a number but not a natural number this will throw an exception. // Otherwise the array will have one element with x1 as its value. var a3 = new Array(x1); // Length is 0. var a4 = new Array();

Array Objects

Portotype variables and methods

Methods will generate a new Array

concat slice

Methods will modify the Array itself

pop push shift unshift splice reverse sort(unstable, string comparison default)

Methods to convert to string

toString join

New methods in ECMA5 (implemented in es5-polyfill)

indexOf lastIndexof every some forEach map filter reduce reduceRight

Instance variables

length

Array Objects

Note:

Do not use for ( ... in ...) loop on Array object, elements may be unordered, methods on polyfill may be enumerated.

typeof method is not working for type check, use Object.prototype.toString.call() instead (or Array.isArray if ECMA5 is avaliable).

Methods are working on other Array-like object too.

// Object.prototype.toString.call() console.log(Object.prototype.toString.call([])); console.log(Object.prototype.toString.call(/ /)); console.log(Object.prototype.toString.call(new Date())); // Array-like oObject var foo = { 0: { bar: 100, name: "A" }, 1: { bar: 300, name: "B" }, 2: { bar: 200, name: "C" }, length : 3 }; Array.prototype.sort.call(foo, function(a,b){ return a.bar > b.bar ? 1 : a.bar < b.bar? -1 : 0; }); console.log(JSON.stringify(foo, null, " "));

run

Primitive type wrappers

There are three primitive type wrappers in ECMAScript make primitive types working like Object.

String

Number

Boolean

Automatiocally boxing: primitive value will be boxing to object wrapper when method or variable propertie is invoced.
Note: Do not use new to create primitive wrapper!

// same console.log( true.toString() ); console.log(new Boolean(true).toString()); console.log( "abc".length ); console.log( 12..toFixed(3) ); // DO NOT USE new TO CREATE PRIMITIVE WRAPPER var foo = new String("foo"); var bar = new Boolean(false); var foobar = new Number(123); console.log( typeof foo ); console.log( typeof bar ); console.log( typeof foobar ); if (bar) { console.warn( "it's false!" ); } // Used for type conversion is OK but not recommended var x = Number("123"); // console.log( typeof x );

run

Type wrapper:String

Constructor methods:

Generate character from unicode

fromCharCode()

console.log( String.fromCharCode( 0x597d ) );

run

Type wrapper:String

Portotype methods:

Generate a new String

charAt concat replace slice(start, end) substring(start, end) toLowerCase toUpperCase trim() substr

Return other value

indexOf lastIndexOf search(regexp) match(regexp) localeCompare charCodeAt([]) split(seperator)

Instance variables:
length

Type wrapper:Number

Constructor variable properties:

MAX_VALUE : 1.7976931348623157*10³⁰⁸

MIN_VALUE : 5*10^-324

NaN

NEGATIVE_INFINITY

POSITIVE_INFINITY

Type wrapper:Number

Portotype methods for string format:

toString( [ radix ] )

toFixed(fractionDigits)

toExponential (fractionDigits)

toPrecision (precision)

Type wrapper:Boolean

Nothing special.

Function Objects

Portotype methods and variable properties:

toString

apply

call

bind (ECMA5, implemented in es5-polyfill)

Instance variables:

length

var foo={ name: "bar", value: 100 } function printMe(){ console.log( this.name+ " " + this.value); } var wrapper = printMe.bind(foo); wrapper();

run

Date Objects

Constructors:

new Date (year, month [, date [, hours [, minutes [, seconds [, ms ] ] ] ] ] ) (Note: local time)

new Date (value) (value can be Date String or number)

Constructor methods:

parse(string) Parse Date String to number(milliseconds)

UTC(year, month [, date [, hours [, minutes [, seconds [, ms ] ] ] ] ] ) Return a number(milliseconds)

now() Return the current time in number(ms)

Date Objects

Portotype methods:

String formatter

toDateString() toTimeString() toISOString() toJSON()

Value manipulate

(get/set)FullYear, Month, Date, Day, Hours, Minutes, Seconds, MilliSeconds
(getUTC/setUTC)FullYear, Month, Date, Day, Hours, Minutes, Seconds, MilliSeconds
getTime/setTime getYear/setYear

Other

getTimezoneOffset

RegExp Objects

Literal

/[RegExp pattern]/[gmi]

Constructor

new RegExp(pattern, flags)

Portotype methods:

exec() test()

Regexp instance variable properties:

global ignoreCase multiline lastIndex source

Error Objects

Portotype variable properties:

name message

Built-in Error Types:

EvalError RangeError ReferenceError SyntaxError TypeError URIError

The Math Object

Constants

E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2

Functions

Trigonometric functions

sin(x) cos(x) tan(x) asin(x) acos(x) atan(x) atan2(y,x)

Arithmetic functions

pow(x,y) sqrt(x) exp(x) log(x) abs(x) floor(x) ceil(x) round(x)

Other functions

max ([ value1 [ , value2 [ , … ] ] ])
min ([ value1 [ , value2 [ , … ] ] ])
random ()

The JSON Object

JSON (JavaScript Object Notation) is a lightweight data-interchange format (http://www.json.org/).

Functions

parse(text, [receiver])

stringify ( value [ , replacer [ , space ] ] )

var foo = JSON.parse('{"foo":100,"bar":{"a":"string"}}'); console.log( foo.foo ); console.log( JSON.stringify(foo.bar, null, " ") );

run

Best Practices

Use JSLint/JSHint

JSLint or JSHint to check several potential bug on the code(Used on the embeded code editor too).

To prevent:

Missing semicolons
Risky code

var x // semicolons missing if ( a == false) { // a may be 0, undefined ,etc. }

run

Do not

Use with(){}
Use eval()(except for deserialization)
Modifying prototypes of builtin objects (especially on Object.prototype and Array.prototype)
Wrapper objects for primitive types
Use for-in loop for complex object or array

Always

Explicit scope
K&R Code Style (curly braces on line end)
Use JSHint/JSLint to check the code before submit

Tricks

Use val ? foo : bar
&& and || for shorten code
foo&&foo.bar&&foo.bar.method()
var defaultValue = foo || 100;

Common patterns: Immediate Function

Immediate Function is common used to prevent Global Object pollution.

(function(){ "use strict"; // the name foo will not be added to Global Object var foo; // the name bar will not be added to Global Object function bar(){ console.log(arguments.length); } bar(1,2,3); })();

run

Common patterns: Private variables

Private variable and methods can be hidden by closure.

run

Common patterns: Options argument

Data object is common used for named options of function.

run

Reference

Basic:

Advanced:

Standard ECMA-262 ECMAScript Language Specification (pdf)
JavaScript: The Good Parts(book)
JavaScript Patterns(book)
JavaScript Garden
Google JavaScript Style Guide

THE END

BY Jianrong Yu

With presentation framework reveal.js.
Fork the trainning on GitHub.