Click to add Text

Javascript

Presented by Bunlong VAN

http://geekhmer.github.io

Basic

The Disclaimer

Data Types

•Object•Function•Number•Strings•Booleans•Null – a values isn't anything•Underfined – default value for variables and parameters, value of missing members in the object etc.

typeof Prefix Operator

•The typeof prefix operator returns a string identifying the type of value•Use instanceof instead

typeof(true); // “boolean”

[] instanceof Array; // true

Object

•Objects can contain data and methods•Objects can inherit from other objects•An object contain an unordered collection of name/value pairs•Values can be any type including other objects•JSON

Object Literals

•Object are wrapped in {}•Names can be string•Value can be an expression•; used for separation•, separate pairs

var myObject = {name: “Javascript”,“data”: { foo: 10, bar: 20 }

}

var name = myObject.name;var foo = myObject.data.foo;

Array

•Array inherits from Object (like every other object in JavaScript)•No need to provide length when creating a new one•Unlike object they have a length member and is always 1 larger than the highest subscript

concat, join (can also be used for concatenating multiple strings), pop, push, slice, sort, splice

Array (Con.)

value.constructor === Array

• Use construction

value instanceof Array

• Use instanceof

[].constructor === Array; // true

[] instanceof Array; // true

Function

•They are first class Objects•Can be passed, stored and returned just like any value•Inherit from Object•Function can appear anywhere an expression can appear

Closure (Function Con.)

function sayHello(name) {var text = 'Hello ' + name;var sayAlert = function() { alert(text); };return sayAlert;

}var say = sayHello(“Foo”);say();

•Function can be contained inside other functions•Inner function has access to the variable and parameters of the function it is contained within•This is static or lexical scoping•The scope that inner function has access to continues even after the parent function has returned is called Closure

Function (Con.)

•Function inside an object is called a method•When invoked with too many arguments, the rest are ignored•When invoked with fewer arguments, the rest are set to undefined

var showMe = function(foo, bar) {return foo + bar;

}showMe(“foo”, “bar”, “foobar”); // 3rd argument will be ignoredshowMe(“foo”); // bar will be undefined

Function (Con.)

•When a function is invoked in method format, this refers to the object containing it.

var foo = {baz: 10,bar: function() {

console.log(this.baz);}

};foo.bar();

Function (Con.)

•When object is invoked in function, this refers to the global object.

var globalVariable = 5;function test() {

console.log(this.globalVariable);}test

Function (Con.)

•When new function is used (implicit return is optional), then this returns the new object created

var Test = function(id) {this.something = id;this.foo = function() {

console.log(“this is a test: ” + this.something);}

}var t = new Test(10),

t1 = new Test(11);t.foo();t1.foo();

Function (Con.)

•When function is invoked, in addition to its parameters it has a special parameter called arguments•Contains all arguments from invocation•Arguments.length will tell you how many arguments were passed •Arguments is not of type Array even•Though it has length

var foo = function() {var a = new Array();console.log(typeof a);console.log(typeof arguments);console.log(arguments instanceof Object);console.log(arguments instanceof Array)

}foo();

global object

•As crockford says, the object that dare not speak of its name•It is the container for all global variables and all built in objects•On browsers window is the global object•Variable defined with a var makes it local to the scope

global variables are evil

•Un-namespaced values can clash each others values•Use of it should be minimized or gotten rid of totally•Variables defined in the function / module should start with var otherwise they have a global scope