The Language of the Web

But...

Don't write code you don't have to

Code you don't write is code you don't have to test or maintain.

• Leverage CSS & the DOM
• Leverage frameworks & libraries

Javascript the weird parts

prototypal inheritance

JavaScript has a class-free object system in which objects inherit properties directly from other objects. - Douglas Crockford

first class functions

						
var func = function () { console.log('yay'); };
func.foo = 'foo'; // it's an object so it can have properties
func.bar = function(msg) { alert(msg); }; // and it can have methods

func();
func.bar('hello');

// func => Function.prototype => Object.prototype
						
					

						
var func = function(func, msg) {
	func(msg);
};
func(window.alert, 'hello');
						
					

						
var func = function() {
	return window.alert;
};
func()('hello');
						
					

equality

						
1 == 1    // true
1 == '1'  // true

1 === 1   // true
1 === '1' // false
						
					

truthy/falsey

						
// all these are falsey
false
null
undefined
0
''
NaN
obj.undefinedProperty

if (person.undefinedProperty) {
	// watch out for if person.undefinedProperty is an integer - it could be 0!
}
						
					

scope

Variable Scope (JavaScript) JavaScript has two scopes: global and local. A variable that is declared outside a function definition is a global variable, and its value is accessible and modifiable throughout your program. A variable that is declared inside a function definition is local. - MSDN

						
var foo = 'foo'; // global
var func = function() {
	var bar = 'bar'; // local
	console.log(foo); // foo
	console.log(bar); // bar
}
func();
console.log(foo); // foo
console.log(bar); // bar is undefined!
						
					

closures

Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created. - MDN

						
function makeFunc() {
  var name = 'jupe';
  function displayName() { // closure - it has access to name
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();
						
					

number, string, and boolean objects

Don't use them!

						
'jupe' == 'jupe';                         // true
new String('jupe') == new String('jupe'); // false

var b = new Boolean(false);
b;         // false
!b;        // also false!
!b == b;   // true!
!b === b;  // false!
!!b == !b  // false!!!
!!b === !b // false!!!
						
					

Tools

• JS Bin
• JSFiddle
• CodePen
• Ember Twiddle
• ArcGIS Javascript API Sandbox
• etc, etc, etc

These are great for:

• prototyping
• reproducing an error in isolation
• demonstrating a bug
• sharing code
• taking a framework for a test drive

ES6/ES2015 (& ES7 & ES8)

Not yet fully implemented in browsers:
kangax.github.io/compat-table/es6/

Welcome to our endless transpilation future!

The babel repl

const/let

template literals & multiline strings

arrows

classes & modules

for-of

parameter defaults

object stuff

number stuff

string stuff

array stuff

spread/rest

destructuring

native promises

Sets, Maps, Symbols.... Lots more!

Keep learning

but try not to get overwhelmed