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
);
};
JavaScript
What they don’t tell you about
Raphael Cruzeiro
http://raphaelcruzeiro.com
@rcdeveloper
Wednesday, July 10, 13

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() +
var maxLng = lastViewPort.getNorthEast().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() -
var minLng = lastViewPort.getSouthWest().lng() -
var maxLat = lastViewPort.getNorthEast().lat() +
var maxLng = lastViewPort.getNorthEast().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.”;
};
foo();

var something = 4;
var somethingElse = 7;
function foo () {
console.log(somethingElse);
var something = “This is confusing.”;
};
foo();
Outputs:
undefined
7
This is confusing.

Objects
with no
classes

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

Creating an object:
var obj = new Object();
// Or via the object literal
var 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;
}

Modularizing
code with
closures

(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 it
at least for now...

What they don't tell you about JavaScript

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie What they don't tell you about JavaScript

Ähnlich wie What they don't tell you about JavaScript (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

What they don't tell you about JavaScript