Sunday, February 09, 2014

JavaScript the Good Parts @ pluaralsight

JavaScript the Good Parts - Online Training Course for Developers:
"JavaScript has bad parts that many times overshadow it’s good parts. 
Douglas Crockford claims JavaScript has, "some of the best parts of any programming language ever created." 
He explains why in this course, quizzes you on functional programming and covers the monad in the final lecture of the course."
Unearthing the Excellence in JavaScript

JSLint,The JavaScript Code Quality Tool

He starts with "Programming Style and your brain",
and reference to book "Thinking Fast and Slow"
by Nobel laureate Daniel Kahneman
Cover

Optical illusion: squares A and B are exactly same color!


Proof, by Edward H. Adelson @ MIT

Curly Braces, left or right? C, C++, Java, C#: does not matter.
In JavaScript it does!

return // this is a silent error in JavaScript, returns "undefined"
{  // this is due to automatic insertion of semi-column ; feature
   ok: false;
}

return { // this is OK in JavaScript
   ok: true;
}

Switch statement: "fall-trough hazard"; always need a "break"
simple solution: don't use the feature that could cause errors.

Example from literature: use or space, comma, dot, uppercase and lowercase is reducing error rate, and increasing read-ability of the text.
The Elements of Style by William Strunk, Jr.
"Programs must communicate clearly to people"

example "rule":
* no space between function name and (
* one space between any other name and (

function () {  ...
}(); // syntax error in JavaScript, can't immediately invoke function

(function () { ...
})(); // this is OK in JavaScript, can immediately invoke function, but looks ugly

(function () { ...
}()); // this also works in JavaScript, but looks better

never rely on semi-column insertion, always put them in place 

with statement ambiguity;
with (o) { foo = koda; }
1. o.foo = koda;
2. o.foo = o.koda;
3. foo = koda;
4. foo = o.koda;
could be ANY of 4 options, depending on context.
Don't use "with" statement. 

== statement is ambiguous, since it does type conversion first
0 == '' // true
0 == '0'  // true
'' == '0' // false
false == 'false' // false
false == '0' // true
" \t\r\n " == 0 // true
use ===, never == (in listed cases it will all be false)

Don't use \ as last character in line for continuation to next line.
If a space is added after \, this will cause syntax error. 

if (a = b) {...} // this is not good style
a = b; if (a) {...} // this is what happens
if (a === b) {...}  // not this. 

Scope:
in most languages are "block scope", can be nested
in JavaScript it is "function scope"
Problem is that JavaScript has syntax that is same as in block scope languages.
"var" statement is moved to top of the function in JavaScript
and that can cause errors
function foo() { .... var myVar=0; ...}
becomes:
function foo() { var myVar=undefined; ... myVar=0; ... }

conclusion: in JavaScript (that is function scope)
declare all variables at start of the function, 
that is where there are declared anyway by compiler!

Also, declare all functions before you call them.

for (var i ... ) { ... }
// variable i is NOT scoped to the loop in JavaScript, it is to function

Global variable are evil in all languages, 
but they are sometimes unavoidable in JavaScript
Advice: write global variables in UPPERCASE

Constructions functions should be named with InitialCaps
and nothing else should be named the same
to avoid confusion with missing "new" statements

var a = b = 0;
var a =0, var b = 0; // it is NOT doing this
b = 0; var a = b; // instead it is initializing global variable b, and local a 

++ was invented to increment pointers; should not be used
use x += 1 instead; x++ is not ++x

if (a) b(); c(); 
if (a) { b(); c(); } // not the same
if (a) { b(); } c(); // this is what happens, obviously 
Advice: always put curly braces in!

"As processes become more agile, coding must be more resilient" 

"Language Sub-setting"
"only a mad man would use all of C++"

Performance
"Premature optimization is root of all evil" - Donald Knuth
...
The function statement is a short-hand for
a var statement with a function value.
function foo() {}
expands to
var foo = function foo() {};
which further expands to
var foo = undefined;
foo = function foo() {};

Closure ("the most important thing"):
var digit_name = (function () {
  var names = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
  return function (n) { return names[n]; };
}());
alert(digit_name(3)); // 'three'

returned function has access to names[] even when original function is gone. 

Power Constructors
  1. Make an object: Object literal, new, Object.create, call another power constructor
  2. Define some variables and functions.: These become private members.
  3. Augment the object with privileged methods.
  4. Return the object.
function myPowerConstructor(x) {
  var that = otherMaker(x);
  var secret = f(x);
  that.priv = function () {
    ... secret x that ...
  };
  return that;
}

No comments: