• too many ways to achieve goal
  
• too  flexible
  
• implicit type conversion
• global(browser)
• no module

• flexible
• JIT - very fast
• high order function
• duck typing
• ubiquitous
• prototype based

(function() {   "use strict";
   //blabla})();

• without var
  

function hello() {  "use strict";
  job = "Hello"; //error}

• duplicate key in object

function duplicate() {  "use strict";
  var obj = {    name : 'yum',    name : 'yum'  }; //error}

• duplicate arguments

function duplicate(arg, arg) { //error  "use strict";
  console.log(arg, arg);}

• freeze arguments of function

function hello(arg) {  "use strict";
  arguments[0] = "Hello World"; //no side effect  console.log(arg); //Javascript}
hello("Javascript");

• arguments.callee

var max = 3,    count = 0;
function hello() {
  "use strict";    while(count < max) {    count++;    console.log("count", count);    arguments.callee(); //error  } }
hello();

• Core of large application
  
• There is no native module for javascript
• AMD
• CommonJS
• ECMA6

• Asynchronous module definition
  
• Require.js
• sandbox

<script data-min="js/app.js" src="js/require.js"></script>

require.config({  path : {    "jquery" : "lib/jquery.js",    "angular" : "lib/angular.js"  },  shim : {    "angular" : {      deps : [jquery],      exports : 'angular'    }  }});
require(['angular', 'jquery', 'main'], function(angular, $, main) {  main.init();});

//conf.jsdefine(function() {  return {    name : "hello"  };});
//main.jsrequire(["conf", function(conf) {  return {    init : function() {       console.log(conf.name); //hello    };  };}]);

• optimization with r.js
  
• plugin support
• path alias
• no build step for development
• load text, css
• CommonJs compatability

• boilerplate, verbose
  
• some overhead to file size
• remove require.js dependency in build time
• jquery build

• node.js, vert.x
• browserify

//myFactory.jsvar forEach = require('mout/array/forEach'),    mixIn = require('mout/object/mixIn'),    map = require('mout/array/map');
var myFactory = function() {  //blabla};
module.exports = mixIn(myFactory, {  extend : mixIn});
//app.jsvar factory = require('./myFactory');var result = factory.extend({}, { name : 'hello' });

• simple
• build step(browerify)
• we can use node.js module

• Class vs Prototype
  
• Object

var myObj = {  name : 'mac',  getName : function() {    return this.name;  },  setName : function(name) {    this.name = name;  }};

function Car(name, price) {   this.name = name;   this.price = price;}Car.prototype.getPrice = function() {  var interest = 10;  return this.price + interest;};
var car1 = new Car('spring', 100);console.log(car1.getPrice()); //110//oh myvar car2 = Car('summer', 100);console.log(car2.getPrice());

var car = {  name : 'car',  myPrice : 0,  get price() {    var interest = 100;    return this.myPrice + interest;  },  set price(price) {    this.myPrice = price;  }};
var myCar = Object.create(car);myCar.name = 'my Car';myCar.price = 1000;console.log(myCar.price);

var myCar = Object.create(car, {  name : {    value : 'my car',    enumerable : true,    configurable : true,    writable : true  }});
Object.defineProperty(myCar, 'name', {  value : 'he'});
//bettervar myCar = Object(car, utilFunc({ name : 'my car' }));

var animal = {  name : 'animal',  meow : function() {    console.log('hello');  }};
var man = {  name : 'james',  play : function() {     console.log('play');   } };
var myObj = _.extend({}, man, animal, { name : 'My name' });myObj.meow(); //hellomyObj.play(); //play

var carFactory = (function() {  var privatePrice = 1000;
  return function(parent, prop) {      var newCar = Object.create(arg);      newCar = _.extend(newCar, prop);      newCar.getPrivatePrice = function() { return privatePrice; };      return newCar;  };})();
var car = { getName : function() {  return this.name + " Hello";}};var myCar = carFactory(car, { name : "my car" });myCar.getPrivatePirce(); //1000

• Classical inheritance is obsolete
• use factory for creating object
• inherit methods and default state
• state is cloned
• compose factories
• link

//prototypevar availability = stampit().methods({  getName : function() {    return this.name + "!";  }});//own statevar person = stampit().state({  name : "james"});//closurevar animal = stampit().enclose(function() {  var price;    return { getPrice : function() { return price; } };});

var availability = stampit().enclose(function() {  var isOpen = false;
  return stampit.mixIn(this, { open : function() {} });});var membership = stampit({  add : function() {}}, {  members : {}});var defaults = stampit().state({  name : 'House'});
var mybar = stampit.compose(defaults, availability, membership);mybar.add({ name : 'home' }).open();

• Referential transparency
  
• Immutability
• No side effect
• High order function

• declarative
• lazy evaluation
• closure
• recursive
• function is first class object

• Is Javascript functional language?
• High order function
• closure
• call, apply

• alternative for underscore and more
• performance optimization
• custom build

var curried = _.curry(function(a, b, c) {    console.log(a + b + c);});

curried(1)(2)(3); //6curried(1)(2,3); //6curried(1,2,3); //6

var newFunc = _.partial(function(a, b, c) {    console.log(a + b + c);}, 1);

newFunc(2, 3); //6

var newFunc = _.bind(function(greeting) {    console.log(greeting + " " + this.name);}, { name : 'james' }, 'Hello');

newFunc(); //Hello james

• change context
• function with value(closure)

var fibonacci = _.memoize(function(n) {  return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);});
fibonacci(9); //34

var format = function(name) {  return name.upperCase();};
var greet = function(formatted) {  return "Hello " + formatted + "!";};
var func = _.compose(greet, format);func("james'); // Hello JAMES!

var greet = function(name) {  return "Hello " + name + "!";};var newFunc = _.wrap(greet, function(func, text) {  console.log('before');    func(text);    console.log('after');});
newFunc('james');

var throttled = _.throttle(updatePosition, 100);
$(window).on('scroll', throttled);
var searchThrottled = _.throttle(checkAutoComplete, 100, {  'trailing' : true});$('#searchQ').on('keydown', searchThrottled);

• ajax
• animation
• callback
• promise

• callback hell
  

someAsync(function(error, someData) {  anotherAsync(someData, function(error, anotherData) {      theOtherAsync(anotherData, function(error, result) {        console.log(result);      });  });});

• difficult to read
• difficult to parallel call
• difficult to compose

• promise/A+
  
• event result of async operation
• then operation(fulfill, reject)

var promise = new Promise(function(resolve, reject) {  if( /*  some condition  */) {    resolve('success');  } else {    reject('reject');  }});
promise.then(function(result) {  console.log(result); //success}, function(reason) {  console.log(reason); //reject});