#JSbasics

Boring theory

ECMAScript!

Browser support

 new Date().toISOString();

Functions

 function quanti() {
   console.log("Quanti FTW!");
 }

 var quanti = function () {
   console.log("Quanti FTW!");
 }

 var quanti = function quanti() {
   console.log("Quanti FTW!");
 }

Self-executing functions

 (function () {
   console.log("Quanti FTW!");
 })();

 !function () {
   return "FTW!";
 }();

 (function (quality) {
   console.log("Quanti is " + quality + "!");
 })("the best");

 (function ($) {
   // Do stuff with $
 })(jQuery);

Overloading

 function overloaded(first) {
   console.log("Version 1!");
 )

 function overloaded(first, second) {
   console.log("Version 2!");
 )

Equality

== vs ===

Coertion

Comparison x == y, where x and y are values, produces true or false.

Coertion - type of x is the same as type of y

• x is undefined, return true: undefined == undefined
• x is null, return true: null == null
• x is number
  • x or y is NaN, return false: NaN != NaN
  • x is the same value as y, return true: 2 == 2
  • Zero equality: 0 == -0 == +0
  • Else return false: 2 != 1
• x is string, then return true if x and y are exactly the same sequence of characters
• x is boolean, return true if x and y are both true or both false
• x is object, return true if x and y refer to the same object

Coertion - type of x is not the same as type of y

• x is null and y is undefined, return true: null == undefined
• x is undefined and y is null, return true: undefined == null
• x is number and y is string, return the result of the comparison x == ToNumber(y): 2 == "2"
• x is string and y is number, return the result of the comparison ToNumber(x) == y: "2" == 2
• x is boolean, return the result of the comparison ToNumber(x) == y: false == 0 and true == 1 but true != 2
• y is boolean, return the result of the comparison x == ToNumber(y)

Coertion - x is string or number and y is object

x == ToPrimitive(y): ToPrimitive means implicit valueOf call or toString if toString is defined and valueOf is not

Example

    [0] == true;

    //HOW IT WORKS...
    //convert boolean using toNumber
    [0] == 1;
    //convert object using toPrimitive
    //[0].valueOf() is not a primitive so use...
    //[0].toString() -> "0"
    "0" == 1;
    //convert string using toNumber
    0 == 1; //false!

Falsy values

• 0
• null
• undefined
• false
• ""
• NaN

OO

 var quanti = {
   name: "Quanti s.r.o.",
   employees: 25,
   greet: function() {
     console.log("Welcome to Quanti!");
   }
 };

Constructor

 function Company(name, employees) {
   this.name = name || "No name";

   var employees =  employees || 0;

   this.greet = function() {
     console.log("Welcome to Quanti!");
   };

   this.getNumberOfEmployees = function() {
     return this.employees;
   };
 }

 var quanti = new Company("Quanti.s.r.o.", 25);

Prototype

 function Company(name, employees) {
   this.name = name || "No name";

   var employees =  employees || 0;


 }

 Company.prototype = {
   greet: function() {
     console.log("Welcome to Quanti!");
   },
   getNumberOfEmployees: function() {
     return this.employees;
   }
 }

 var quanti = new Company("Quanti.s.r.o.", 25);

beware of this!

 function Company(name) {
   this.name = name || "No name";

   this.bindInput = function(input) {
     jQuery(input).on("keydown", function() {
       this.name = jQuery(input).val();
     });
   };
 }

 function Company(name) {
   this.name = name || "No name";
   var instance = this;

   this.bindInput = function(input) {
     jQuery(input).on("keydown", function() {
       instance.name = jQuery(input).val();
     });
   };
 }

Global namespace

 var superCoolStuff = 1;
 setTimeout(...);

 window.superCoolStuff = 1;
 window.setTimeout(...);

Packages

 var cz.quanti.supecoolpackage = cz.quanti.supecoolpackage || {};

 cz.quanti.supecoolpackage.Company = function(name) {
   // ...
 };

 var quanti = new cz.quanti.supecoolpackage.Company("Quanti s.r.o.");

Module pattern

 var cz.quanti.supecoolpackage = (function(dependency) {
    var package = {};

    package.Company = function(name) {
      // ...
    };

    package.Employee = function(company, name) {
      // ...
    };
    
    return package;
 }) ()