JavaScript

30 May 2017

functions
- constructor function
- functions inside object
properties
falsy values
switch statements
comparison operators
[ES6] template literals
[ES6] promises
- returning promise from handler functions
[ES6] shorthand property names
[ES6] arrow functions
[ESNext] field declarations

functions

Every function in JavaScript is a Function object.

methods are functions associated with an object via its properties which are implicitly passed that object when called (class instance is an object too):

var obj = {
  foo: function () {}
};

is equivalent to this using ES6 shorthand syntax:

var obj = {
  foo () {}
};

it’s possible to use only shorthand syntax inside classes.

that is why always use this to get current object property that might happen to be function object and then use parentheses to call that function object.

constructor function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new#Description

functions inside object

https://stackoverflow.com/a/48645842/3632318

ES5:

var myObj = {
  myMethod: function myMethod (params) {
    // ...do something here
  },
};

ES6 (the same as above):

var myObj = {
  myMethod (params) {
    // ...do something here
  },
};

properties

static properties

function Perro () {}
Perro.definition = "The dog is the man's best friend";

in ES6 these are static methods:

class Perro {
  static bark () {}
}

in ES5 bark would be called with global object as this (autoboxing) while in ES6 bark is bound to class instance:

// ES5
let perro = new Perro();
let bark = perro.bark;
bark(); // global object

// ES6
let perro = new Perro();
let bark = perro.bark;
bark(); // undefined

instance properties

function Perro (props) {
  this.color = props.color;
}

prototype properties

function Perro () {}
Perro.prototype.bark = function () {};
Perro.prototype.walk = function () {};

in ES6 these are class methods:

class Perro {
  bark () {}
}

same considerations regarding autoboxing as for static properties apply here as well.

falsy values

https://stackoverflow.com/a/5515349/3632318

null
undefined
NaN
empty string (“”)
0
false

switch statements

switch statement doesn’t return value - it’s used for side effects only.

it’s possible to use either break or return to terminate each case clause.

using break is optional but if it’s omitted program continues execution: it jumps to the next case clause and checks whether it’s matched against switch expression and so on.

return statement returns result from function - it’s okay to use it if there is nothing else after switch statement.

comparison operators

equality (==)

perform type conversion (if operands have different types) before applying strict comparison, objects are equal if they have the same references.
identity/strict equality (===)

returns true if operands are strictly equal without type conversion, objects are equal if they have the same references.

as a rule always prefer strict equality operators except for the case when it’s necessary to test for null or undefined:

// tests both for null and undefined
if (variable == null) {
  ...
}

[ES6] template literals

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals

template literals (formerly known as ‘template strings’) are string literals which allow multiline strings and string interpolation:

`text line 1
text line 2`

`text ${expression} text`

[ES6] promises

the result of a promise chain is always a promise - either resolved or rejected one. this is what allows to chain promises endlessly.

resolved or rejected values (i.e. resolved or rejected promise values) will be passed to corresponding callback functions attached to then().

returning promise from handler functions

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then:

The handler function (onFulfilled or onRejected) gets then called asynchronously (as soon as the stack is empty). After the invocation of the handler function, if the handler function:

returns a value, the promise returned by then gets resolved with the returned value as its value;

throws an error, the promise returned by then gets rejected with the thrown error as its value;

returns an already resolved promise, the promise returned by then gets resolved with that promise’s value as its value;

returns an already rejected promise, the promise returned by then gets rejected with that promise’s value as its value.

[ES6] shorthand property names

> var a = 'foo', b = 42, c = {};
> var o = {a, b, c};
> o.a;
"foo"

[ES6] arrow functions

https://stackoverflow.com/questions/33308121/can-you-bind-arrow-functions

it’s impossible to rebind arrow function - just use normal function if you need to bind it to another context later.

[ESNext] field declarations

https://github.com/tc39/proposal-class-fields#field-declarations

class Counter extends HTMLElement {
  x = 0;
}

is equivalent to:

class Counter extends HTMLElement {
  constructor () {
    super();
    this.x = 0;
  }
}

tap349