Background

I am a Java developer diving into JavaScript using How To Learn JavaScript Properly and the reddit course resource.

I am using the book Professional JavaScript For Web Developers, 3rd Edition, which can be purchased on Amazon and is freely available here. Unless otherwise noted, all page numbers are from this book.

I will be adding tips, tricks, and interesting things from the perspective of a Java developer learning JavaScript. This will be updated regularly.

Week 1 and 2

null vs undefined

(Pg. 33)

var car = null;   //null
var horse;         //undefined
car == horse;   //true
car === horse; //false

---

parsing numbers

(Pg. 40)

use parseInt() and parseFloat() instead of Number().

var num = parseInt("1234blue"); //1234

specify the radix when parsing.

(Pg. 41)

var num1 = parseInt("10", 2);     //2 - parsed as binary
var num2 = parseInt("10", 8);     //8 - parsed as octal
var num3 = parseInt("10", 10);   //10 - parsed as decimal
var num4 = parseInt("10", 16);   //16 - parsed as hexadecimal

---

functions

function declaration

function add(num1, num2) {
     return num1 + num2;
}

and

function expression

var add = function(num1, num2) {
     return num1 + num2;
}

---

codecademy

Codecademy's editor is okay if you know some shortcuts. On OS X, the shortcuts are generally of emacs form.

• cntrl-a - beginning of line.
• cntrl-e - end of line.
• cntrl-k - kill to end of line.
• cntrl-n - down one line.
• cntrl-p - up one line.
• cntrl-d - delete forward one character.
• command-return - run the code.
• option-p - go to next.

---

Week 3 and 4

fun with arrays

arrays are very similar to those in java, but have some additional methods.

var numbers = [1,2,3,4];
var num = numbers[1]; //num = 2

array as stack

numbers.push(5);
numbers.push(5,6,7);
numbers.pop(); 

array as queue

numbers.push(5,6,7);
numbers.shift();

---

apply

function add(num1, num2) {
    return num1 + num2;
}

var numArray = [1,2];

can pass the array directly into the add function using apply

add.apply(this, numArray);

a real example with Math. This is how to get the max of an array.

(Pg. 167)

var values = [1,2,3,4,5,6,7,8];
var max = Math.max.apply(Math, values);

this is the context. The context can be altered to some other object than this. Here we use call, which is the same as apply, but takes arguments directly instead of as an array.

add.call(this, 1,2);

(Pg. 145)

window.color = "red";
var o = { color: "blue" };

function sayColor() {
    alert(this.color);
}

sayColor(); //red

sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue

---

objects

simple object creation

(Pg. 173)

var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function() {
   alert(this.name);
};

simple object creation with object literal notation (preferred pattern)

var person = {
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",

    sayName: function() {
         alert(this.name);
    };

---

OOP

constructor/prototype pattern:

(Pg. 197)

The constructor pattern defines instance properties, whereas the prototype pattern defines methods and shared properties, but they all share references to methods, conserving memory. This pattern allows arguments to be passed into the constructor as well, effectiely combining the best parts of each pattern.

The other patterns, and the advantages of this, are too complex for this context. See Chapter 6 for further details.

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ["Shelby", "Court"];
}

Person.prototype = {
  constructor : Person,
  sayName : function() {
     alert(this.name);
  }
};

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

person1.friends.push("Van");

person1.friends; // "Shelby, Court, Van"
person2.friends; // "Shelby, Court"
person1.friends === person2.friends //false
person1.sayName === person2.sayName //true

inheritance: Combination Inheritance

(Pg. 209)

Combination inheritance (sometimes also called pseudoclassical inheritance) combines prototype chaining and constructor stealing to get the best of each approach. The basic idea is to use prototype chaining to inherit properties and methods on the prototype and to use constructor stealing to inherit instance properties. This allows function reuse by defining methods on the prototype and allows each instance to have its own properties.

function SuperType(name){
  this.name = name;
  this.colors = [“red”, “blue”, “green”];
}

SuperType.prototype.sayName = function(){ 
  alert(this.name);
};

function SubType(name, age){
  //inherit properties SuperType.call(this, name);
  this.age = age; }
  //inherit methods
  SubType.prototype = new SuperType();
  SubType.prototype.sayAge = function(){ alert(this.age);
};

var instance1 = new SubType(“Nicholas”, 29); 
instance1.colors.push(“black”); 
alert(instance1.colors); //”red,blue,green,black”     
instance1.sayName(); //"Nicholas"
instance1.sayAge(); //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors);  //"red, blue, green"
instance2.sayName(); //"Greg"
instance2.sayAge(); //27