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

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...

What they don't tell you about JavaScript

Technology

Show, Don't Tell!

Song - Don't Tell Them Jesus Loves Them

Don't just tell, compell

Tell Me Something I Don't Know

Show, Don't Tell

Show Don't Tell Workshop Presentation, Malofiej 20

Don't Tell Me That #1

Secrets of show don't tell

"Show, Don't Tell" (2)

Intro to JavaScript. Use the tag to tell the browser you are writing JavaScript

Don't Sell. Tell a story

Customers don't tell, YOU have to ask

Don't Repeat Your Mistakes: JavaScript Unit Testing

Avril Lavigne - Don't Tell Me

Don't tell me

Don't Ask, Don't Tell - The Virtues of Privacy By Design

Don't Ask Don't Tell Injunction

Don't Tell Me That!

English Language - Show & Don't tell

Show Me, Don't Tell Me!