2. First appearance in Netscape Navigator 2.0 in Sept 1995
Microsoft launched JScript as alternative in Aug 1996
Request for Standardization in Nov 1996
ECMA-262 specification in June 1997
Third edition in Dec 1999
Fifth edition in Dec 2009
Sixth edition expected by mid 2015
Today – Preferred programming language of the Web
Not limited to Web Browsers – node.js, ringo.js
3. Imperative, Object Oriented, Functional, and Prototypal
Dynamic
Single Threaded
Asynchronous, Event Driven
Sandboxed
God created the earth in 7 days.
Brendan Eich created JavaScript in 10 days.
4. UI Thread
Browser
DOM
Work Queue
JS Engine Layout Engine
Operating System
C P U G P U
5. Never mind ! Everything is a var
var stringVariable = “JavaScript”
var booleanVariable = true
var intVariable = 10
var floatVariable = 10.5
Numbers are treated as float
null !== undefined
Falsy values – 0 (zero), NaN, ‘’, false, null, undefined
6. Object is collection of key–value pairs with optional hidden link to prototype object
Instantiation
var obj = new Object()
var objShortHand = { }
var objWithInitialValue = { “property” : “value”}
var objTheUltimate = Object.create(parentObject)
Access
obj.property
obj[“property”]
obj.nestedObj.property
obj[“nestedObj”].property
Runtime Mutation
obj.newProperty = “value”
obj.nestedObj = { “property” : “value”}
obj.nestedObj[“property”] = “different value”
Deletion
delete obj.property
7. Callable first class citizen
Linked to Function.prototype linked to Object.prototype
Can be passed and return as object
No Overloading
Definitions
var add = new Function(‘a’, ‘b’, ‘return a + b’);
var add = function (a, b) { return a + b; };
function add(a, b) { return a + b;}
Blessed with
this
arguments
8. Function invocation (Direct Invocation)
add(1, 2)
isPalindrome(‘madam’)
this bound to global object !!!
9. Method Invocation
Method => a function stored as property of object
this bound to method holder object
var obj = {
value : 0, //zero
increment : function (inc) {
this.value += typeof inc === ‘number’ ? inc : 1;
}
}
obj.increment(1) ; // 1
obj.increment(2); // 3
10. var someClass = function (property) {
this.publicProperty = property;
var privateVariable = “value”;
this.publicMethod = function () {
//code for method definition
};
var privateMethod = function () {
//code for method definition
};
// return this;
}
11. Constructor Invocation
JS way of creating objects OO style
var EmployeeClass = function (firstName, designation) {
this.firstName = firstName;
this.designation = designation;
};
EmployeeClass.protoype.getFirstName = function () { return this.firstName;};
EmployeeClass.protoype.getDesignation = function () { return this.designation;};
var employee = new EmployeeClass(‘Piyush’, ‘Software Dev’)
employee.getFirstName(); // ‘Piyush’
employee.getDesignation(); // ‘Software Dev’
12. Apply Invocation (Reflective Invocation)
var argsArray = [2, 3];
var sum = add.apply( null, argsArray); // 3
//OR
var sum = add.call( null, 2, 3); //3
var firstName = EmployeeClass.getFirstName.apply(empObject);
//OR
var firstName = EmployeeClass.getFirstName.call(empObject);
13. Facilitates late(runtime) binding
Function.prototype.bind = function (objToBind) {
var self = this;
return function () {
var argArr = Array.prototype.slice.call(arguments);
return self.apply(objToBind || null, argArr);
};
}
14. Use when some of the inputs to function are always known
Function.prototype.curry = function () {
var initArgs = Array.prototype.slice.call(arguments);
var self = this;
return function () {
var args = Array.prototype.slice.call(arguments);
return self.apply(null, initArgs.concat(args))
}
};
15. Never ever ever make use for loop again while operating on Arrays !
var names = [‘Piyush’, ‘James’, ‘Shwetha’, ‘Kapil’, ‘Praveen’, ‘Matt’, ‘Nag’, ‘Shabina’]
map => conversion function which get executed for every element
names.map(function(name){ return name.substring(0, 3); })
filter => logical condition function to consider only sub set of array
names.filter(function(name){ return name.indexOf(‘i’) > 0; })
reduce => compute result by considering each element with optional initial value
names.reduce(function(name1, name2) { return name1 + ‘ , ’ + name2; })
names.reduce(function(name1, name2) { return name1 + ‘ , ’ + name2; }, ‘ Madhu’)
sort => comparison function to order the element in custom fashion
names.sort()
names.sort(function(name1, name2) { return name1 < name2; })
forEach => alternative to for loop to just focus on operation
names.forEach(function(name) { console.log(name); })
every => does every element in array satisfies the logical condition
some => does at least one element in array satisfies the logical condition
reduceRight => same as reduce but iterates array from last to first index
17. Avoid global variables and functions
Use parseInt(obj, 10)
eval function is evil !
‘===’ and ‘!== ’ for comparison
Never use void, becoz its operator !
Always prefix var with variable declaration
Use semicolons everywhere at EOL
Never augment built in objects
Consider underscore.js as default choice
Use JSLint for code inspection
And of course above all, Do Meditate !
18. var clockOnce = setTimeout(fn, delay)
Execute function <fn> after <delay> milliseconds
Queue function <fn> to execute after <delay> milliseconds
Used to divide highly computationally complex(CPU bound) tasks
Cancellation => clearTimeout(clockOnce)
var timer = setInterval(fn, delay)
Execute function <fn> after every <delay> milliseconds
Queue function <fn> to execute after every <delay> milliseconds
Cancellation => clearInterval(timer)
20. var Singleton = ( function () {
var instance;
function createInstance() {
var object = new Object("I am the only instance");
return object;
}
return {
getInstance : function () {
if (! instance) {
instance = createInstance();
}
return instance;
}
};
})();
21. Why ?
Higher level abstraction and constructs
Type safety
Declarative - More focus on WHAT need to be done instead of HOW
Stick to one worthy language for end to end application stack
Usage
Code in your own language
Compile it into JS (either offline or in browser itself )
Run in browser
Support debugging for original language in browser using source maps
Options
CoffeeScript
TypeScript
Dart
ScalaJS
PythonJS
ClojureScript
More at this link
22. Process of removing all unnecessary characters and
modifying source code spread over single or multiple
file without changing its functionality
Advantages
Single artifact for whole application
Reduced size of code
Obfuscated code
Applicable for JS and CSS
23. JavaScript : The Good Parts by Douglas Crockford
JavaScript Pattern by Stoyan Stefanov
Wikipedia.org
24. jQuery - for DOM access and manipulation
Node.js – server side JS
Require.js - async module loader
Backbone.js – client side MVC
Angular.js – powerpack SPA framework
