Starter

  • written JavaScript
  • not related to Java
  • started out at Netscape
  • is an implementation of the ECMAScript standard
  • jQuery ⊆ JavaScript

Variable Declarations

// use double or single quotes
var str = 'foo';

// numbers are double-precision 64-bit format IEEE 754 values
// http://www.ecma-international.org/ecma-262/5.1/#sec-8.5
var num = 4.52;

var boolVal = true;

var regex = /abc/;

var date = new Date();

Functions

function max(a, b) {
  if (a > b) {
    return a;
  } else {
    return b;
  }
};

max(2, 3);
// 3

var min = function(a, b) {
  ...
};

min(2, 3);
// 2

Functions contd.

var increment = function(num) {
  return num + 1;
};

[1, 2, 3].map(increment);
// New array with:
// [2, 3, 4]

Arrays

> var arr = [1, 2];
> arr.push(3);
> arr[1]
2

> arr.length
3

> for (var i = 0; i < arr.length; i++) {
..  console.log(i);
..}
0
1
2

> arr.reduce(function(a, b) { return Math.max(a, b); }, Number.MIN_VALUE);
3

Objects (think Maps)

> var person = {
..  name: 'Sheldon Cooper',
..  occupation: 'Theoretical Physicist',
..  brag: function() {
..    console.log('I am the smartest person on earth!');
..  }
..}

> person.name
'Sheldon Cooper'

> person['occupation']
'Theoretical Physicist'

Objects contd.

> var person = {
..  name: 'Sheldon Cooper',
..  occupation: 'Theoretical Physicist',
..  brag: function() {
..    console.log('I am the smartest person on earth!');
..  }
..}

> person.age = 33
> person.age > 30
true

> person.brag();
I am the smartest person on earth!

Objects contd.

var details = [];
for (property in person) {
  if (person.hasOwnProperty(property)) {
    details.push(person[property]);
  }
}
console.log(details.join(', '));
// Sheldon Cooper, Theoretical Physicist, 33
Object.keys(person)
  .map(function(property) { return person[property]; })
  .join(', ');
// Sheldon Cooper, Theoretical Physicist, 33

Control Structures

var num = 10;
var even = num % 2 === 0;
if (even) {
    console.log('Yep, %d is an even number!', num);
} else if (num > 10) (
    console.log('You cheated, %d is larger than 10 ;-(', num);
} else {
    console.error('WTF!?');
}

Use eqeqeq

> true == '1'
true
> !0 == 1
true
> '5' == 5
true
> true === '1'
false
> !0 === 1
false
> '5' === 5
false

JavaScript is great at Math!

> 9999999999999999999
10000000000000000000

> 0.1 - 0.3
-0.19999999999999998

> Number.MIN_VALUE + 1
1

Though its scoping rules may confuse you

> for (var i = 0; i < 3; i++) {
    setTimeout(function() {
      console.log(i);
    }, 1000 /* millis */);
  }

// 1 second later...
3
3
3

Immediately Invoked Function Expression (IIFE) to the rescue!

> (function() { // this actually creates a new scope
    var b = 2
    console.log(b);
  })();
2

> console.log(b);
ReferenceError: b is not defined
(                  // turn the function declaration into an expression
  function() {}    // define a new function with a new lexical scope
)
();                // call the function

// in short
(function() { /* A new scope, hallelujah */ })();

Setting up a prototype chain

var a = {
  name: 'Leonard Hofstadter'
};
var b = Object.create(a);
var c = Object.create(b);
console.log(c.name);
// 'Leonard Hofstadter'
{                   // c
  __proto__: {      // b
    __proto__: {    // a
      name: 'Leonard Hofstadter'
    }
  }
}

'this' is unreliable

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function() {
  return this.name;
};

var p = new Person('Amy Farrah Fowler');
console.log(p.getName()); // 'Amy Farrah Fowler'

var getter = p.getName;
console.log(getter()); // undefined or '' (when run in a browser)

console.log(getter.call({ name: 'Penny' })); // 'Penny'

https://blog.codecentric.de/en/2012/11/javascript-function-contexts-this-proxy/