What they don't tell you about JavaScript

/** * southWest * Gets the southwestern quadrant of the tree * return {Quadtree} **/ Quadtree.prototype.southWest = function() { return new Quadtree( new space2d.Point( this._origin.x, Math.floor(this._size.y / 2) ), new space2d.Point( Math.floor(this._size.x / 2), this._size.y ), this ); };

/** * southEast * Gets the southeastern quadrant of the tree * return {Quadtree} **/ Quadtree.prototype.southEast = function() { return new Quadtree( new space2d.Point( Math.floor(this._size.x / 2), Math.floor(this._size.y / 2) ), new space2d.Point( this._size.x, this._size.y ), this ); };

JavaScriptWhat they don’t tell you about

Raphael Cruzeirohttp://raphaelcruzeiro.com@rcdeveloper

Wednesday, July 10, 13

http://raphaelcruzeiro.com

http://raphaelcruzeiro.com

What does JavaScript have in common with Java?


What does JavaScript have in common with Java?

The first four letters of its name.


It actually

has a lot more in common with

Python

and other dynamic and functional languages


Originally named

LiveScript


It was created by Netscape to enhance web pages.


It is used today not only in the browser but also to

create desktop widgets and server-side code.


Formalized in ECMAScript.


“The problem with JavaScript is that nobody tries to learn it before writing applications

with it.” - Douglas Crockford


JavaScript

makes it

easy to write terrible code.


var currentId;var lastViewPort;

var precision = Math.pow(10, 4);var maxPointNumber = 100;

var circleOverlays = [];

function didViewPortChange() {

var minLat = lastViewPort.getSouthWest().lat() - (lastViewPort.getNorthEast().lat() - lastViewPort.getSouthWest().lat()); var minLng = lastViewPort.getSouthWest().lng() - (lastViewPort.getNorthEast().lng() - lastViewPort.getSouthWest().lng()); var maxLat = lastViewPort.getNorthEast().lat() + (lastViewPort.getNorthEast().lat() - lastViewPort.getSouthWest().lat()); var maxLng = lastViewPort.getNorthEast().lng() + (lastViewPort.getNorthEast().lng() - lastViewPort.getSouthWest().lng());

if ($.fn.jqMap.getMap().getBounds().getNorthEast().lat() > maxLat || $.fn.jqMap.getMap().getBounds().getNorthEast().lng() > maxLng || $.fn.jqMap.getMap().getBounds().getSouthWest().lat() < minLat || $.fn.jqMap.getMap().getBounds().getSouthWest().lng() < minLng) { return true; } else { return false; }}

Really bad code:


var currentId;var lastViewPort;

var precision = Math.pow(10, 4);var maxPointNumber = 100;

var circleOverlays = [];

function didViewPortChange() {

var minLat = lastViewPort.getSouthWest().lat() - (lastViewPort.getNorthEast().lat() - lastViewPort.getSouthWest().lat()); var minLng = lastViewPort.getSouthWest().lng() - (lastViewPort.getNorthEast().lng() - lastViewPort.getSouthWest().lng()); var maxLat = lastViewPort.getNorthEast().lat() + (lastViewPort.getNorthEast().lat() - lastViewPort.getSouthWest().lat()); var maxLng = lastViewPort.getNorthEast().lng() + (lastViewPort.getNorthEast().lng() - lastViewPort.getSouthWest().lng());

if ($.fn.jqMap.getMap().getBounds().getNorthEast().lat() > maxLat || $.fn.jqMap.getMap().getBounds().getNorthEast().lng() > maxLng || $.fn.jqMap.getMap().getBounds().getSouthWest().lat() < minLat || $.fn.jqMap.getMap().getBounds().getSouthWest().lng() < minLng) { return true; } else { return false; }}

Really bad code:

GUILTY


Global scope polluting


var something = 4;


When declaring variables on the global scope you make

your code more susceptible to name clashes.


In JavaScript a function delimits the scope of

variables


var something = 4;

function foo () { somethingElse = something + 4; return somethingElse;};

foo();

Accidental use of global variables


Dangers of

Hoisting


var something = 4;var somethingElse = 7;

function foo () { console.log(something); console.log(somethingElse); var something = “This is confusing.”; console.log(something);};

foo();


var something = 4;var somethingElse = 7;

function foo () { console.log(something); console.log(somethingElse); var something = “This is confusing.”; console.log(something);};

foo();

Outputs: undefined 7 This is confusing.


Objects

with no

classesWednesday, July 10, 13

Pretty much

everything

is an object in

JavaScript


With a few exceptions:

•Number

•String

•Boolean

•null

•undefined


A side-note about Numbers:

•There is only one type for representing all numbers.

•It is represented in memory as a 64-bit floating point

•IEEE-754

> 0.1 + 0.20.30000000000000004


Creating an object:

var obj = new Object();// Or via the object literalvar obj = {};


Adding attributes:

var obj = {};

obj.a = 15;obj.bark = function() { return “Woof!”;};


Adding attributes:

var obj = { a: 15, bark: function() { return “Woof!”; }};


Constructors:

function Point(x, y) { this.x = x; this.y = y;}

var point = new Point(60, 578);


If you forget the new:

var point = Point(60, 578); point == undefined

x and y are now variables on the global scope


Ensuring

that the constructor can work with

or without

newWednesday, July 10, 13

Constructors:

function Point(x, y) { if (!(this instanceof Point)) { return new Point(x, y); } this.x = x; this.y = y;}


Modularizingcode withclosures


(function() {

/* Everything that is declared here is local to this closure only */

})();


You can use closures to emulate namespaces:var space = (function(){ var Point = function(x, y) { if (!(this instanceof Point)) { return new Point(x, y); } this.x = x; this.y = y; };

return { Point: Point };

})();


You can use closures to emulate namespaces:

var pt = new space.Point(60, 568);


That’s itat least for now...


Technology

What they don't tell you about JavaScript