Javascript the good parts

About Simeon Franklin

• Software Dev for better than a decade
• Desktop C/VB/C++/Delphi, then web Perl/PHP/Javascript/Python
• recently became full-time Python instructor for Marakana.com
• http://simeonfranklin.com / @simeonfranklin

Javascript: Unique!

Javascript is a very odd language. Not like any of the other languages I’ve used: Python, PHP, C, C++, Basic, Delphi…

Javascript is kind of unique! Is that good?

• "love javascript": About 44,800 results
• "hate javascript": About 39,100 results

Javascript: Both Good and Bad

"Most programming languages contain good and bad parts, but JavaScript has more than its share of the bad"

"The World’s Most Misunderstood Programming Language"

http://javascript.crockford.com/javascript.html

Could javascript be a cool little language buried under various misfeatures? And what makes it so unique?

Javascript: The Good (and bad) Parts

Let’s look at a few features to avoid and a few of the features that contribute to Javascript’s uniqueness.

Disclaimers

Much frustration with Javascript comes from incompatible implementations and scripting incompatible browsers with a crappy API. This is not the fault of Javascript as a language.

variables: the good

Javascript is a dynamically, weakly typed language with a usable variety of built in types:

a = 1; // variables do not have to be pre-declared or assigned a type
a = "a string"; // variables can hold different types of values
b = 2;
console.log(a + b); // types are dynamically converted
//  "a string2"
an_array = [1, 2, 3]; // array literals use square brackets
obj = {'lst': an_array}; // object literals use {key: value} known as JSON
console.log(obj.lst);
// [1, 2, 3]

variables: the bad

See http://repl.it/CW0#

a = 1;
function foo(){
  a = 2; // all variables are global by default
}
foo();
console.log(a); // 2

function foo2(){
    var a = 3; // always use "var" to create local variables
}
foo2();
console.log(a); // still 2

// Never use the type coercing equality operators "==", "!="
console.log(0 == '');  // true!
console.log(0 == '0'); // also true!
console.log('' == '0'); // and yet false

flow of control: pretty much what you’d expect

var a = 10;
if(a > 3){ //standard if. JS has switch statement too
   console.log(a);
}

while(a > 0){ //standard while loop
   console.log(a--);
}
for(var i=0;i<3;i++){ // c-style for-loop
   console.log(i);
}
var vals = ['a','b','c'];
for(index in vals){ // odd iterator loop returns indexes, not values
    console.log(vals[index]);
}

functions: pretty much all good!

Javascript is a very functional language. Argument handling is a bit weird:

function args1(){}
args1(1); // no errors raised!
console.log(args1.length); // number of variables function expects

function args2(x){
    console.log(arguments); //magic arguments object
}
args2(2, 'a string'); // also doesn't raise an error

functions: statement or expression?

Functions can be declared two ways:

// function statement, no trailing semicolon, always global
function foo(){
    return 1;
}

// function expression has scope of variable foo2
var foo2 = function(){ //also referred to "anonymous" function
    return 2;
};

foo2(); // call operators () work on variables

Always use the second form!

functions: scope and closures

outer = function(x){
    var inner = function(y){ // function declaration can be nested
        return x + y;  // functions can see enclosing scope
    }
    return inner; // and js remembers scope (closures)
}
// calling inner(); would be undefined as inner is local var to function
adder2 = outer(2);
adder2(4); // cool!

OK: so what’s so weird about Javascript?

Javascript so far:

• a few misfeatures (don’t ever use "with" statement, ==, !=)
• very functional language
• odd scoping rules (defaults to global)
• what about Object Oriented Programming?

javascript: objects

Javascript is OOP without classes.

javascript: objects

Javascript has a "new" operator but we won’t use it. We can make objects simply with object literal notation and Javascript gives us a magic "this" variable to refer to the currently instantiated object.

var obj = {data: [],
           method: function(val){
               this.data.push(val); // this is "obj"
               }
          };
obj.method(3);
obj.method(2);
console.log(obj.data);

Sort of like objects… Methods applying to data that lives in the same namespace as the methods. But what about inheritance?

javascript: prototype

Prototypal inheritance means instead of inheriting from classes, objects inherit from other objects by way of a prototype chain.

But how Javascript does this is confusing:

• the "new" operator applied to a function makes the function a constructor. "this" looks in the object created by calling the function with new
• Additional methods can be created on the prototype property of the constructor function and will exist on `new`ly created objects.
• the prototype can changed and all objects already created will see the modifications

javascript: prototype

var Circle = function(color, radius){
    this.color=color; // this only works if "new" used
    this.radius = radius;
};
Circle.prototype.area = function() {
       return Math.PI*this.radius*this.radius;
        };
c = new Circle('red', 10);
console.log(c.area());
// Changes to prototype
Circle.prototype.color_out = function(){return this.color;};
// can be seen on "instantiated" objects
console.log(c.color_out());

javascript: inheritance

This does not look like classical classes at all. And what about inheritance?

Turns out: you have to roll your own!

Next time…

And that’s where I ran out of steam. Next time: understanding prototype, new, and Object.create to mix and match objects for fun and profit.