JavaScript Intro

jsintro.md

Discipline

Java and C# are great at forcing you to do the right thing. JavaScript is not. It requires discipline.

This means choosing good and informative variable names, creating a clear and understandable architecture, and a flow of code that makes sense.

Global scope

Why this is a terrible, terrible design choice.

Scopes in nested functions

What is this? Where does it come from?

Null? False? Falsy?

undefined vs null

What is true? What is false?

===

ALWAYS.

Semicolons

Are they required? Why do we write them?

Hoisting variables

Where are variables declared? What is the scope? Why is my code nil?

Why does "plain" function declaration work when var x = function ... does not.

Callbacks and threads

What is a thread? What are callbacks? What is asynchronicity?

• setTimeout and setInterval
• jQuery and ajax (what does it look like without jQuery?)

Exceptions

Understanding stack traces, what is a stack? How can we handle errors?

try {
  // some code
} catch (Exception e) {
  // error handling
}  

When you write a try/catch, you need to know what to put in both blocks.

Pass by value, pass by reference

JavaScript vs C#/Java. What is a value? What is a reference?

for (var i = 0; i < 100; i++) {
  console.log(i);
}

for (i = 0; i < 100; i++) {
  setTimeout(function() {
    console.log(i);
  });
}

Foreach loops

Why standard JS foreach is messed up and what to do instead.

Calling functions in JS: bind, call, and apply

JavaScript Bind 101

Object oriented programming

Prototypes, prototypal inheritance. The good, the bad? What is this?

How do I know what "kind" of object something is? typeof instanceof

Functional programming

How it compares to standard OOP, the value of functional.

Comparisons of functional and imperative solutions to simple problems.

// Exercise:
// Capitalize a sentence

var sentence = "Methinks it looks like a weasel.",
    result = "",
    parts = sentence.split(" ");

for (var i = 0; i < parts.length; i++) {
  result += parts[i][0].toUpperCase();
  result += parts[i].slice(1);
  result += " ";
}

// Exercise:
// Capitalize a sentence

var sentence = "Methinks it looks like a weasel.";

var result = $.map(sentence.split(" "), function (word) {
  return word[0].toUpperCase() + word.slice(1);
}).join(" ");

Module pattern

var myModule = (function (window, $) {
  var privateVariable = "awesome";
  
  var printPrivateVariable = function () {
    console.log(privateVariable);
  };
  
  return {
    printPrivateVariable: printPrivateVariable
  };
})(window, jQuery);

console.log(privateVariable); // ReferenceError: privateVariable is not defined
printPrivateVariable(); // ReferenceError: printPrivateVariable is not defined

myModule.printPrivateVariable(); // awesome

Alternative module pattern:

(function (window, $) {
  var privateVariable = "awesome";
  
  var printPrivateVariable = function () {
    console.log(privateVariable);
  };
  
  myModule = myModule || {};
  myModule.printPrivateVariable = printPrivateVariable;
})(window, jQuery);