a !

= A

Case-sensitive
start with: letters, _, $

letters: [ascii, unicode]

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

key words

Identifier

class; const; enum; export;

extends; import; super;

Nonstrict
Reserved words

implements; interface; let;

package; private; protected;
public; static; yield;

'use strict'

Variables

var a; // local
a = 123; // global

// single line
comments

/* multi-line
comments */
'number'

typeof

0
1.2
045

value

0x56
0.314e2

Number [Primitive like]

NaN

Number()

parseInt("2.7", 10);

// 2

parseInt('10', 2); // 2

parseFloat('2.5');

// 2.5

isNaN(parseFloat('a')); // true
+-*/%
<, <=, >, >=, !=, ==
'string'

typeof

"Hello"

value

'World'
var a = 8;
a.toString(2); // '1000'

String()/toString()

var a = 'ABC';
a[0];
a[0] = 'D';
a;

String [Primitive like]

immutable

// 'A'
// 'ABC'

var a = 'abc';
a = a + 'd';
a;

// 'abcd'

+
<, <=, >, >=, !=, ==
'boolean'

typeof

true

value

false

number
Boolean [Primitive like]
string

Boolean()

object

Boolean(0);

// false

Boolean(NaN);

// false

Boolean(!0);

// true

Boolean('');

// false

Boolean('*');

// true

Boolean(null);

// false

Boolean({});

// true

Boolean(undefined);// false

undefined

Data type

typeof

'undefined'

value

undefined

Undefined [Primitive like]

undefined == undefined;
var a;
a == undefined;
console.log(d);

undefined != Not defined

// true
// true
// Error

'object'

typeof

var p = {
name: 'Ad',
'age': 24
};
{}

var q = {};
q.name = 'Bob';
q.age = 24;
console.log(q.name);
console.log(q['age']);

Object (basic)

// 'Bob'
// 24

var p
= new Object();
p.sayHi = function(){
console.log('Hi!');
}
p.sayHi();

new Object()

// 'Hi!'

typeof
Null //[Primitive like]

'object'

value

null

"undefined object"

null == undefined; // true

'function'

typeof

var a = function(arg1, arg2){

//func body;
}
function a(arg1, arg2){
//func body;
}

create

(function(arg1,arg2){
//func body;
})
var f = function(x, y){
console.log('x: ' + x + ', y: ' + y);
};
var x = 'x', y = 'y';
f(x, y);
// x: x, y: y
f(y, x);
// x: y, y: x

Function (basic)
// by order

var f = function(x){
console.log(x);
};
f();

arguments
undefined

inside function

var f = function(){
console.log(arguments);
};
f(3,2,1);
// { '0': 3, '1': 2, '2': 1 }

arguments
Tips
+-------------+
|Node
+------+
+-------------+
|
|global = {
|
+-->
|
|
|
|};
|
|
+-------------|
|
|
|
+-------------|
|Browser
+------+
+-------------+
|window = {
|
|
|
|};
|
+-------------+

+-----------------------+
|Execution Context
|
+-----------------------+
|[Variable Object] = { |
|
|
| variables
|
|
|
| data
|
|
|
| functions
|
|
|
| objects
|
|
|
| ...
|
|
|
|};
|
+-----------------------+

return
'1'+2
3+'4'
+

string > number > boolean

'5'+false
6+true

global

+-*/%

casting
'1'-2
3-'4'
-

number > string > boolean

'5'-false

Operators
+-----------------------------------+
|function b() // create new context +-----+
+-----------------------------------+
|
|Variable Object = {
|
|
| arguments = ...;
|
|
|
|
|
|
|
|
|};
|
|
|Scope chain =
|
|
| +-------------------------------+ |
|
| |global
| |
|
| | +---> f = 'no';
| |
|
| | |
| |
|
| | +---> function a()
| |
|
| |
+---> f = 'ye'
| |
|
| |
|
| |
+->
| |
+---> function b() | |
| |
+--->
| |
| |
|
| |
| |
+--->
| |
| |
| |
| +-------------------------------+ |
|this = {Object owns b};
|
+-----------------------------------+

// undefined

6-true
++a a-- a+=1 a-=1
>, >=, <, <=

+---------------+
|
|
|
|
|
|
|
|
|
.
|
|
.
|
|
.
|
|
|
|
|
|
|
+---------------+
|function b
|
+---------------+
|function a
|
+---------------+
|global context |
+---------------+
Context Stack

Execution context

==, !=

// only value

===, !==

// both value & type

compare
a > b;

casting

! && ||

context stack

// a - b > 0

!true;

// false

true && false;

// false

false || true;

// true
'function'

typeof

f.length;

properties

var api = function(){

return {
name: 'rainy',
age: 24
};
};
var handler = function(d){
console.log('Name: '+d.name+', Age: '+d.age);
};
var request = function(api, callback){
callback(api());
};

http://rainy.im

+--------------------------------------------+
|Scope Chain
|
+--------------------------------------------+
+-+global [Variable Object]
|
| |
|
| +-> var x;
|
| |
|
| | <---------------+
|
| |
+
|
| +-> function a() [Variable Object]<+
|
| |
+
|
|
| |
|
|
|
| |
+--> var x;
|
|
| |
|
|
|
| |
|
+
|
| |
+--> function b() [Variable Object] |
| |
|
| | <---------------+
|
| |
+
|
| +-> function c() [Variable Object]<+
|
| |
+
|
|
| |
|
|
|
| |
+--> var x;
|
|
| |
|
|
|
| |
|
+
|
| |
+--> function d() [Variable Object] |
| |
|
| v
|
|
|
+--------------------------------------------+
+-------------------+
+-----------------+
|Execution context | +---+[Scope chain]
|
+-------------------+ |
+-----------------+
+> | var x = 100;
| |
|[Function inc]
|
| | var inc1 = inc(); +--+
| +
|
| | var inc2 = inc(); +--+
| +-> x;
|
| |
|
| |
|
| | inc1();
|
| +-> [Function] |
| | inc1();
|
|
+
|
| | inc2();
|
|
+-> x++; |
| | inc1();
|
|
|
| | inc2();
|
+-----------------+
+--+ x;
|
http://rainy.im
|
|
+-------------------+

Scope

javascript in one pic

as value (callback)

Function

request(api, handler); // Name: rainy, Age: 24

//
//
//
//
apply/call/bind

methods

func.apply(thisObj, [arg1, arg2, ...]);

func.call(thisObj, arg1, arg2, ...);
func.bind(thisObj, arg1, arg2, ...);
about thisObj, see `Scope`

var sayHi = function(name){

console.log('Hello, ' + name + '!');
};
sayHi.call(this, 'rainy');
sayHi.apply(this, ['rainy']);
sayHi.bind(this, 'rainy')();

Scope chain

// Hello, rainy!
// Hello, rainy!
// Hello, rainy!

'object'

typeof

var a = [1, 2, '3', [4, true]];

var a = new Array(1, 2, '3', [4, true]);
a.length;

properties

// 4

a[0] == 1;

// true

a[3][1] == true;

// true

a.slice(0, 2);

// [1, 2]

a.indexOf(1);

// 0

a.push({});

// return a.length(Mod)

a.pop();

// return popped element(Mod)

Closure

a.toString() == a.join(',');
a.join('-');

// ?

a.concat(['a', 'b']);

// VS push()

var s = 'a,b,c,d';
s.split(','); // ['a', 'b', 'c', 'd']

// arr.map(callback, thisObj)

Array

/* callback = function(element, index, arr){

*
return element to the same pos of (returned)arr;
* };
*/

methods

[55, 44, 33, 22, 11].map(function(e, i, arr){

return e/(arr.length-i);
});
// [ 11, 11, 11, 11, 11 ];
// arr.reduce(callback, init);

map/reduce

/* callback = function(prev, curr, index, arr){

*
curr walk through
*
arr.slice(init != undefined ? 0 : 1, arr.length);
*
prev cache last returned value start with:
*
(init != undefined ? init : arr[0]);
* };
*/
[55, 44, 33, 22, 11].reduce(function(p, c, i, arr){
return p + c/(arr. length-i);
}, 55);
// 0;
Reference type

filter/some/every
shift/unshift/sort/reverse/splice

// will change the array

for(var i = 0; i < a.length; i++){

console.log(a[i]);
}
iteration
a.forEach(function(ele){
console.log(ele);
});
root of everything.
function Person(name){
this.name = name;
this.sayHi= function(){
console.log('Hi ' + this.name + '!');
};
};
Constructor

var p1 = new Person('Ad');

var p2 = new Person('Bob');
p1.name
p2.sayHi();

// 'Ad'
// 'Hi Bob!'

p1.constructor === Person

p1 instanceof Person
p1.sayHi == p2.sayHi

// true
// true
// false

function Person(){};
Person.prototype.name = 'Person';

Person

name

'Person'
prototype

var p1 = new Person();

var p2 = new Person();
p2.name = 'rainy';

p1 = new Person();
age

24

prototype
console.log(p1.name);
console.log(p2.name);

// 'Person'
// 'rainy'

p1 instanceof Person
p1.age = 24;

prototype chain

Object (OOP)

p2 = new Person();
name

// true

p1.hasOwnProperty('name');
Person.hasOwnProperty('name');

// false
// true

p1.hasOwnProperty('age');
'name' in p1
'age' in Person

// true
// true
// false

// All properties on the prototype are shared among instances

Person.prototype.friends = ['Ad', 'Bob'];
p1.friends.pop();
console.log(p2.friends);

// 'Bob'
// ['Ad']

// Combine constructor & prototype

function Person(){
this.friends = ['Ad', 'Bob'];
};
Person.prototype.name = 'Person';
function Father(){};
Father.prototype.familyName = 'Good';
prototype chain

function Child(){};
Child.prototype = new Father();
var c = new Child();
console.log(c.familyName);

Inheritance

function Father(){
this.familyName = 'Good';
};
constructor

function Child(){
Father.call(this);
};
var c = new Child();
console.log(c.familyName);

if

if(cond){
state1;
}else if(cond2){
state2;
}else{
state3;
}
false ? a : b

switch

switch (day) {
case MON:
break;
case TUE:
break;
case WEN:
break;
default:
}
do {
state1;
} while(cond)

Flow control

while

while(cond){
state1;
}
break; continue
for(var i = 0; i < len; i++){
state1;
}

for

for(var k in Obj){
// if Obj.hasOwnProperty(k){
console.log('Obj[' + k + '] = ' + Obj[k]);
// }
}

try/catch/finally

// 'Good'

var a = {};
try{
a.f();
}catch(e){
console.log(e instanceof TypeError);
(function(){
console.log('a.f()');
})();
}finally{
console.log('always');
}

// true
// 'a.f()'
// 'always'

// 'Good'

'rainy'