Notes on Douglas Crockford's Javascript the Good Parts :rocket:

These are notes on the book Javascript the Good Parts which was published in 2008, before es6. There have not been any revised editions of the book published at the time of writing, see https://www.github.com/dwyl/Javascript-the-Good-Parts-notes/issues/33 for the ongoing conversation on this.

This book calls out the best parts of Javascript and tells you what to avoid (the 'bad parts'). It's about making sure you know the really important parts of the language and create good habits instead of having to break bad ones down the line.

The idea of these notes is to collect the excellent information from an already dense book into note form, translating these ideas into 'plain English' where possible and adding explanations throughout where the book might not make things obvious as it assumes prior knowledge.

You can buy the book or follow Douglas Crockford on Github.

Please don't hesitate to submit PRs to improve these notes wherever you feel something can be clarified, improved on or have an example added to it.

Table of Contents

• Chapter 1 - Good Parts
• Chapter 2 - Grammar
• Chapter 3 - Objects
• Chapter 4 - Functions
• Chapter 5 - Inheritance
• Chapter 6 - Arrays
• Chapter 7 - Regular Expressions
• Chapter 8 - Methods
• Chapter 9 - Style
• Chapter 10 - Beautiful Features
• Appendix A - the Awful Parts
• Appendix B - the Bad Parts
• Appendix C - JSLint

Chapter 1 - Good Parts

Chapter 2 - Grammar

Number methods are discussed in Chapter 8.

Strings

• 16-bit character set and don't have character types.
• Backslashes (\) are used for escaping characters that could cause problems in strings.
• Strings are immutable.

Single quotes are often used to define a String in JavaScript, but if a person's name has an apostrophe (and the developer does not know the difference between an apostrophe and single quote) it is useful to "escape" the apostrophe character:

var name = 'Patrick O\'Brian'; // using a backslash in front of the apostrophe
console.log('name:', name); // name: Patrick O'Brian

further reading: https://webdesignledger.com/common-typography-mistakes-apostrophes-versus-quotation-marks

String methods are discussed in Chapter 8.

Statements

• Inside a function, the var statement creates variables local to that function
• switch, while, for and do statements can have an optional label which can be used with break and continue to provide more precise control over exactly which statement to break or continue. Format: labelname: statement and then continue labelname;
• ES2015 presents two new keywords for declaring variables, let and const. Whereas the var keyword is function scoped (the variables are local to the function), let and const are both block scoped, which means they are local to any statement with {}.
• falsy values:
  • false
  • null
  • undefined
  • Empty string ' '
  • The number 0
  • The number NaN
• All other values are truthy including all objects & the string 'false'
• If no matches are found in case statements, the optional default statement is executed, otherwise the matching case statement is carried out
• When using a for in loop, usually a good idea to use hasOwnProperty(variable) to make sure the property belongs to the object you want and is not instead an inherited property from the prototype chain:

  for (myvariable in object) {
      if (object.hasOwnProperty(myvariable)) {
      ... //statements to be executed
      }
  }

• A do while statement is always executed at least once as the while condition is only checked after the first iteration of the loop
• catch clause in a try statement must create a new variable that will catch the exception object
• Scope of throw statement is the try block it's in, or the try of the function it's in
• If there is no return statement, return===undefined
• break exits the statement and continue forces a new iteration of the loop, both with the optional label mentioned above

Expressions

• For expression ? expression2 : expression3, if expression is truthy, execute expresion2; if it's falsy, execute expression3
• Invocation is (expression1, expression2, etc)
• refinement is either .name or [expression] as used in an array

Literals

• Names or strings used for specifying new objects (object literals) or arrays (array literals)
• Properties of the object are expressions and must be known at compile time

Functions

• A function literal defines a function value
• More details in Chapter 4

Chapter 3 - Objects

var empty_object = {};

var today = {
    day: "Wednesday",
    month: "April",
    year: 2014,

    weather: { //objects can contain nested objects like this one
        morning: "sunny",
        afternoon: "cloudy"
    }
}

More details in Chapter 6

Reflection

• Determining what properties an object has
• Using typeof includes all properties in the prototype chain including functions
• To avoid inherited properties, use hasOwnProperty(type); which returns true if that property exists only in that object itself (not the chain)

  today.hasOwnProperty('number')  //will return true
  today.hasOwnProperty('constructor')   //will return false

Enumeration

• Best way to enumerate all the properties you want is a for loop:

  var i;
  var properties = [
  'day', 'month', 'year'
  ];
  var today = {
  day: '5',
  month: 'September',
  year: '2001'
  };  
  for (i = 0; i < properties.length; i++) {
  document.writeIn(properties[i] + ':' + today[properties[i]]);
  }
  //OUTPUT
  // day:5
  // month:September
  // year:2001

• This ensures you get the properties you want (i.e. not up the prototype chain) and in the order you want, as opposed to a for in loop which achieves neither of these

Delete

• Removes property from object, but also reveals property from further up the prototype chain if it exists
• Format: delete today.month

Global Abatement

• One way to mitigate the risks of global variables is to create a single global variable which then contains your whole application

var MYAPP = {}

MYAPP.today = {
    day: "Wednesday",
    month: "April",
    year: 2014,

    weather: { //objects can contain nested objects like this one
        morning: "sunny",
        afternoon: "cloudy"
    }
}
//Making sure all other variables (like today) are contained within this one global variable (MYAPP) means none of them have global scope and therefore the risk of naming conflicts, etc in your application is reduced

• Closures are also a way of mitigating the risks of global variables
• Note: Most Javascript MVCs these days (2014) will take care of wrapping your app for you

Chapter 4 - Functions

//Format of a function
function name (parameterA, parameterB){
    statements;
}

• When a function is not the property of an object, it is invoked as a function

  var sum = add(3, 4);

• These functions are bound to the global object (a "mistake in the design of the language" according to Douglas Crockford) and consequently so is thiseven in inner functions
• Invoking this within an inner function will therefore refer to its own this and not the one in global scope

Workaround: Artificially create a new this:

myObject.double = function() {
    //in the book, the var here is called `that` but name changed for clarity
    var globalScopeThis = this; //workaround

    var innerFunc = function() {
        globalScopeThis.value = add(globalScopeThis.value, globalScopeThis.value);
    };

    innerFunc(); //invoke innerFunc as function
};

myObject.double();
console.log(myObject.value);

Constructor Invocation Pattern

• When a function is created with new, that function contains a link to the function's prototype
• This means that methods that were created for the prototype function are also available to the function created using new

//create a function Quo that takes a string - Quo will be our prototype function as we will see
var Quo = function (string){
    this.status = string;
}

//Now create a get_status method for Quo - this will be a public method
Quo.prototype.get_status = function () {
    return this.status;
}

//create a new instance of Quo using the prefix NEW
var myQuo = new Quo("happy");

//because of the use of the new prefix, myQuo is an instance of Quo which means it can access the public method get_status from it's prototype
document.writeIn(myQuo.get_status());     //returns 'happy'

• This style of constructor pattern is not recommended, there will be better examples in Chapter 5 - this is noted again in Appendix B
• The first letter of a constructor function (in this case Quo) must always be capitalized

Apply Invocation Pattern

• The apply method lets you choose the value to be bound to this
• It also takes the parameters for a function in an array
• Format: function.apply(valueForThis, arrayOfParamentersForFunction);

var array = [5, 2]    //will be the parameters for our function
var sum = add.apply(null, array);     //value of 'this' is null and value of sum is 7 as the 'apply' method passes 5 and 2 to the 'add' method

Arguments

• Another default parameter of functions is the arguments array which contains all the arguments that were supplied when the function was invoked
• This means you don't have to know the exact number of arguments when you build a function because you can loop through all the arguments provided at invocation with the use of the default arguments array

  //inside the function
  for (i = 0; i < arguments.length; i++) {
  dosomething;  //e.g. sum +=arguments[i]
  }

• arguments lacks all the array methods except .length because of a bug

Return

• When a function gets to a return statement, it returns immediately without carrying out the remaining statements in the function
• A function always returns a value or if unspecified, it returns undefined
• "If the function was invoked with the new prefix (used when creating a new object so it must return an object) and the return value is not an object, then this (the new object) is returned instead."

Exceptions

• A throw statement interrupts the execution of the code is used to handle expected exceptions like an incorrect type of argument (e.g. a string where a number is expected)
• Each throw statement should have an exception object with a name holding the type of exception and a message with an explanation of it + any other properties you like

  //Thinking through what exceptions could happen in an add function, the main function contains the throw statement with the exception object
  var add = function (a,b) {
  if (typeof a !== 'number' || typeof b !== 'number'){
      throw {
          name: 'TypeError';
          message: 'The add function requires numbers';
      }
  }
  return a + b;
  }

• When you write a function to use add(), you include a try block where the exception object from the throw statement in add() will pass control to a single catch clause for all exceptions

//When you use the function later on, add a try block with a catch clause to catch the exception object
var try_it = function () {
    try{
        add("seven");   //will throw an exception as it is not a number
    }
    catch (e) {
        document.writeIn(e.name + ':' + e.message);
    }
}

try_it();    //you could rewrite this function so the argument is passed in here where it is invoked

Augmenting Types

• Adding a method to the prototype of an object Object.prototype (or function, array, string, number, regular expression or boolean), you make it available to all the instances of that object so you don't have to use the prototype property again
• By augmenting the basic types (essentially the root prototypes), we can improve Javascript overall
• For example, adding a method named trim to remove spaces from the end of strings, available to all String instances in your code:

  String.method ('trim', function () {
  return this.replace(/ˆ\s+|\s+$/g, '');     //uses regular expression
  });

• To be on the safe side, create a method conditionally, only when you know the method is missing

//Makes a method available to all functions, ONLY when it definitely does not already exist

Function.prototype.method (methodName, func) {
    if (!this.prototype[methodName]){
        this.prototype[methodName] = func;
        return this;
    }
};

• Remember that for in statements don't work well with prototypes

Recursion

• Used when a task can be divided into simple sub-problems and a function can call itself repeatedly to solve them Takes the format:

var variable = function functionName (parameters){
    //wrap the statements to be executed and the recursive call in a loop statement so it doesn't recurse forever
    //statements to be executed in the function;
    functionName(arguments);
};

functionName (initialArguments); //initial call to the function

• Javascript does not have tail recursion optimization and therefore does not optimize recursive functions - this also means they sometimes fail if they "recurse very deeply"; On a side note, tail call optimization is now supported in ECMA-262

Scope

• A block is a set of statements contained in curly brackets {}
• Javascript does not have block scope but does have function scope
  • All variables declared anywhere within a function are available everywhere in that function - i.e. and inner function will have access to the variables of the outer function in which it is defined
  • A variable can be overwritten with a new value in an inner function and that new value's scope will be just the body of the inner function - as soon as you're back out to the outer function, the value of that variable will revert to what it was before the inner function began its execution
  • All variable should be declared at the top of the function body

Closure

• Inner functions have access to the actual parameters of the outer functions (not copies)
• If an object is created as a result of a function and assigned to myObject, myObject continues to share access to the variables in the functions that created it (actual variables, not copies)
  • It has access to the context in which it was created - this is closure
  • This includes later on, even if the outer function has completed its execution and returned, when the inner function is called, it will still have access to all the variables it had access to at the time it was defined (i.e. the variables that were in context when the inner function was defined)

Callbacks

• A callback function is a function passed to another function as a parameter and executed in this other function
• When making a request to a server, use an asynchronous request as asynchronous functions return immediately, therefore freeing up the client
  • In this example, we pass the callback function to the asynchronous request as a parameter so the callback function will only be called when a response is available

    request = prepare_the_request();
    send_request_asynchronously(request, function(response){     //function being passed in as a parameter
    display(response);
    });

Module

• A module is a function or object whose contents can be used, but its state and implementation are hidden
• It is essentially using function scope and closures keep the variables and functions contained within as private as well as binding them to a non-global object - whilst still being accessible
• Using the module pattern is widely used and good practice as it promotes information hiding (avoiding naming conflicts, etc) and encapsulation
  • This is a good article on how to use the module pattern with examples

• It can also be used to produce secure objects (see durable objects below)

  • Methods contained in the object do not make use of this or that so it becomes impossible to change them from outside of the object except in ways explicitly permitted by the methods (like passing them a parameter)
  • The methods can be replaced but the secrets of how these methods function (like how they generate a number for example) can't be revealed because they are not tied to a global object

    
    var Serial_maker = function() {

  //all variables defined in this object are now fixed and hidden from anything outside this function //see page 42 of book for full example }; //calls to methods passing them parameters are made here

• Note: Whilst Javascript variables are usually lowercase, there is some convention around capitalizing the first letter of a Module

Cascade

• Some methods return nothing, albeit undefined
• If we alter these methods to return this instead of undefined, they return the object which can then be passed to the next method, e.g getElement(myBox).move(350,150) gets the element and then passes is to the move function for the next action
  • This enables cascades, where you call many methods on the same object in sequence because the object is passed from one method to the next (usually separated by . as above)
• Cascades also stop you from trying to do too much in one method and makes your code more descriptive

Curry

• A curry method allows you to partially evaluate an existing function
  • An example is below where the function expects two arguments, but it is first invoked with only one (in this case using curry as in add.curry(10);) and then later passed the second argument
• It can also be explained as transforming a function that takes multiple arguments (add(a,b)) into a chain of functions that take a single argument each (addA = add(A); addA(B); where the two functions are now add() & addA())

//set up a simple function that we will customise with curry
var add = function (a,b){
    return a + b;
}

var addTen = add.curry(10);      //passes 10 as the first argument to the add() function
addTen(20);                     //The use of the curry method in addTen means addTen === add(10, 20);

• Javascript does not have a curry method natively but this can be added to the Function.protoype:

  Function.method('curry', function() {
  var slice = Array.prototype.slice,
      args = slice.apply(arguments),
      that = this;
  return function () {
      return that.apply(null, args.concat(slice.apply(arguments)));
  }
  });

Memoization

• Storing the results of previous operations in objects (such as arrays) allows them to be reused without having to keep recalculating the value - this optimization is called memoization
  • Adding an object to store the results memoizes the function
• Particularly useful when a function is recursive and uses the results of its previous iteration in the current iteration
• A memoizer function can be created to help memoize future functions:

  var memoizer = function (memo, fundamental) {
  var shell = function (n) {
      var result = memo[n];
      if (typeof result !== 'number') {
          result = fundamental(shell, n);
          memo[n] = result;
      }
      return result;
  }
  return shell;
  }

Chapter 5 - Inheritance

var myObject = maker ({      //note curly braces
    first: f,
    last: l,
    state: s,
    city: c
    }
;)

Also useful to pass object specifiers to JSON (see Appendix E notes)

Prototypal

• Zero classes, one object inherits from another
• Create an object literal of a useful object and then make an instance of it using the format var myObject = Object.create(originalObjectName)
• When you then customise the new object (adding properties or methods through the dot notation for example), this is differential inheritance, where you specify the differences from the original object

Functional

• All properties of an object are visible (Javascript has no classes so there is no such thing as a 'private variable' which can only be seen within a class as per other languages)
• When you use a function to create your original object and the same with the object instances, you're essentially utilising Javascript functional scope to create private properties and methods The below is an example of how you would create an original object, the name and saying properties are now completely private and only accessible to the get_name and says method

var mammal = function (spec) {
    var that = {};    //that is a new object which is basically a container of 'secrets' shared to the rest of the inheritance chain

    that.get_name = function () {
        return spec.name;
    };

    that.says = function () {
        return spec.saying || '';  //returns an empty string if no 'saying' argument is passed through the spec object when calling mammal
    };
    return that;     //returns the object that contains the now private properties and methods (under functional scope)
}

var myMammal = mammal({name: 'Herb'});

Creating an object 'cat' can now inherit from the mammal constructor and only pay attention to the differences between it and mammal:

var cat = function (spec) {
    spec.saying = spec.saying || 'meow';   //if spec.saying doesn't already exists, make it 'meow'
    var that = mammal(spec);      //here the object 'container of secrets' is set up inheriting from mammal already

    //functions and property augmentations happen here

    return that;      //as above
}

• Requires less effort and gives better encapsulation and information hiding than the pseudoclassical pattern, as well as access to super methods (see page 54 of book for super method example)
• An object created using the functional pattern and making no use of this or that is a durable object and cannot be compromised by attackers
  • Briefly also discussed in Module section above
• If you do want something to have access to the object's private properties and methods, you pass it the that bundle (i.e. your 'container of secrets')

Parts

• An object can be composed out of a set of parts
  • For example, you can create a function that provides the object it is passed with a number of methods (which are defined in this function), where each method is a part that is added to the object

Chapter 6 - Arrays

Arrays have their own literal format and their own set of methods (Chapter 8 - Methods).

Array Literals

• An array literal is a pair of square brackets surrounding zero or more comma-seperated values [a, b, c, etc]
  • The first value will get the property name '0', the second will be '1' and so on
• Javascript allows an array to contain any mixture of values

Length

• If you add to the array, the length property will increase to contain the new element - it will not give an error
• If you set the .length to a smaller number than the current length of the array, it will delete any properties with a subscript >= the new length
• The push() method is sometimes useful to add an element to the end of an array numbers.push('go') //adds the element 'go' to the end of the numbers array

Delete

• Elements can be deleted from the array object using delete but this leaves a hole in the array
• Use array.splice(keyInArray, howManyElementsToDelete) which changes the keys for the remaining values in the array so there is no hole left
  • May be slow

Enumeration

• A for statement can be used to iterate over all the properties of an array (as it is an object)
• Do not use for in as it does not iterate through the properties in order and sometimes pulls in from further up the prototype chain

Confusion

The rule is simple: when the property names [keys] are small sequential integers, you should use an array. Otherwise, use an object.

• Arrays are most useful when property names are integers but they can also accept strings as property names
• Javascript doesn't have a good way of telling an object from an array as typeof array === object
• To accurately detect arrays, have to define our own function:

  var is_array = function (value) {
  return Object.prototype.toString.apply(value) === '[object Array]';
  //apply(value) binds `value` to `this` & returns true if `this` is an array
  }

Methods

• Array methods are stored in Array.prototype which can be augmented using the format:

  //capital A in Array means this refers to the prototype
  Array.method('reduce', function (parameters){
  //define variables and function
  //return a value
  });

• Remember, every array inherits and can use the methods you add to Array.prototype
• You can also add methods directly to an array because they are objects
  • myArray.total = function () { //statements to execute; } adds a 'total' function to the array myArray
• DO NOT USE: Object.create() will create an object - lacking the length property - not an array.

Dimensions

• Using [] will create an empty array as they are not initialized in JavaScript
• Accessing a missing element will give you undefined
• If you have an algorithm that relies on the array not being empty and not having undefined values, you can write a function that will prep your array to have a certain number of defined values, essentially initializing it with certain values in place
  • An Array.dim function is outlined on page 63 which will allow var myArray = Array.dim(10,0) to make an array with 10 zeroes starting from the first position in the array(0)
• Javascript only has one dimensional arrays but can have array of arrays
• Two dimensional arrays (matrices) will have to be set up by the programmer
  • page 63 gives a method for this and for explicitly setting cell values so as not to have an empty matrix

Chapter 7 - Regular Expressions

Used with regexp.exec, regexp.test, string.match, string.replace, string.search and string.split to interact with string (more in Chapter 8 - Methods)

Quite convoluted and difficult to read as they do not allow comments or whitespace so a JavaScript regular expression must be on a single line

An Example

/ˆ(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([ˆ?#]*))?(?:\?([ˆ#]*))?(?:#(.*))?$/

Breaking it down one portion (factor) at a time:

• Note that the string starts and ends with a slash /

• ˆ indicates the beginning of a string

• (?:([A-Za-z]+):)?

  • (?:...) indicates a noncapturing group, where the '...' is replaced by the group that you wish to match, but not save to anywhere
  • Suffix ? indicates the group is optional, so it could or could not exist in the string - it could even exist more than once
  • () around the ([A-Za-z]+) indicates a capturing group which is therefore captured and placed in the result array
    • They groups are placed in the array in order, so the first will appear in result[1]
    • Noncapturing groups are preferred to capturing groups because capturing groups have a performance penalty (on account of saving to the result array)
    • You can also have capturing groups within noncapturing groups such as (?:Bob says: (\w+))
  • [...] indicates a character class
  • A-Za-z is a character class containing all 26 letters of the alphabet in both upper and lower case
  • Suffix + means character class will be matched one or more times
  • Suffix : is matched literally (so the letters will be followed by a colon in this case)

• (\/{0,3})

  • \/ The backslash \ escapes the forward slash / (which traditionally symbolises the end of the regular expression literal) and together they indicate that the forward slash / should be matched
  • Suffix {0,3} means the slash / will be matched between 0 and 3 times

• ([0-9.\-A-Za-z]+)

  • String made up of one or more (note the + at the end denoting possible multiple occurrences) digits, letters (upper or lower case), full stops (.) or hyphens (-)
    • Note that the hyphen was escaped with a backslash \- as hyphens usually denote a range but in this case is a hyphen within the expression

• (?::(\d+))?

  • \d represents a digit character so this will be a sequence of one or more digit characters (as per the +)
  • The digit characters will be immediately preceded by a colon :
  • (\d+) will be the fourth capturing group in this expression, it is also optional (?) and inside a non-capturing group (?:...)

• (?:\/([ˆ?#]*))?

  • Another optional group (?), beginning with a literal slash / (escaped by the backslash)
  • The ˆ at the beginning of character class [ˆ?#] means it includes all characters except ? and #
    • This actually leaves the regexp open to attack because too many characters are included in the character class
  • The * indicates the character class will appear zero or more times

• (?:\?([ˆ#]*))?

  • We've seen everything here before: An optional capturing group starting with a literal ? (escaped by the backslash) with zero or more characters that are not #

• (?:#(.*))?

  • Final optional group beginning with a #
  • . matches any character except a line ending character

• $ represents the end of a string

• Note: ˆ and $ are important because they anchor the regexp and checks whether the string matched against it contains only what is in the regexp

  • If ˆ and $ weren't present, it would check that the string contained the regexp but wouldn't necessarily be only made up of this
  • Using only ˆ checks the string starts with the regexp
  • Using only $ checks the string ends with the regexp

Another example /ˆ-?\d+(?:\.\d*)?(?:e[+\-]?\d+)?$/i;

Most of this we have seen before but here are the new bits:

• The i at the end means ignore case when matching letters
• -? means the minus sign is optional
• (?:\.\d*) matches a decimal point followed by zero or more digits (123.6834.4442284 does not match)
• Note this expression only uses noncapturing groups

Construction

3 flags exist in regular expressions: i means insensitive - ignore the character case, g means global - to match multiple items and m means multiline - where ˆ and $ can match line-ending characters

Two ways to build a regular expression:

1. Regular Expression literals as per the examples above start and end with a slash /
   • Here the flags are appended after the final slash, for example /i
   • Be careful: RegExp objects made by regular expression literals share a single instance
2. Use RegExp constructor
   • The first parameter is the string to be made into a RegExp object, the second is the flag
   • Useful when all information for creating the regular expression is not available at time of programming
   • Backslashes mean something in the constructor, so these must be doubled and quotes must be escaped

//example creating a regular expression object that matches a JavaScript string

var my_regexp = new RegExp("'(?:\\\\.|[ˆ\\\\\\'])*'", 'g');

Elements

Regexp Choice

| provides a match if any of the sequences provided match.

In "into".match(/in|int/);, the in will be a match so it doesn't even look at the int.

Regexp Sequence

A regexp sequence is made up of one or more regexp factors. If there are no quantifiers after the factor (like ?, * or +), the factor will be matched one time.

Regexp Factor

• The following special characters must all be escaped with a backslash \ to be taken literally, or they will take on an alternative meaning: \ / [ ] ( ) { } ? + * | . ˆ$
• The \ prefix does not make letters or digits literal
• When unescaped:
  • . matches any character except line-ending
  • ˆ matches the beginning of the text when lastIndex property is zero, or matches line-ending character when the m flag is present
  • Having ˆ inside a character class means NOT, so [ˆ0-9] means does not match a digit
  • $ matches the beginning of the text or a line-ending character when the m flag is present

Regexp Escape

As well as escaping special characters in regexp factors, the backslash has additional uses:

• As in strings, \f is the formfeed character, \n is new line, \r is carriage return, \t is tab and \u specifies Unicode as a 16-bit hex. But \b is not a backspace character
• \d === [0-9] and \D is the opposite, NOT (ˆ) a digit, [ˆ0-9]
• \s matches is a partial set of Unicode whitespace characters and \S is the opposite
• \w === [0-9A-Za-z] and \W === [ˆ0-9A-Za-z] but useless for any real world language (because of accents on letters, etc)
• \1 refers to the text captured in group 1 so it is matched again later on in the regexp
  • \2 refers to group 2, \3 to group 3 and so on

*\b is a bad part. It was supposed to be a word-boundary anchor but is useless for multilingual applications

Regexp Group

Four kinds of groups:

• Capturing: (...) where each group is captured into the result array - the first capturing group in the regexp goes into result[1], the second into result[2] and so on
• Noncapturing (?:...) where the text is matched, but not captured and saved anywhere, making is slightly faster than a capturing group (has no bearing on numbering of capturing groups)
• Positive lookahead, a bad part: (?=...) acts like a noncapturing group except after the match is made, it goes back to where text started
• Negative lookahead, a bad part: (?!...) is like a positive lookahead but only matches if there is no match with what is in it

Regexp Class

Chapter 8 - Methods

Chapter 9 - Style

• We should avoid the bad parts of JavaScript, but also the useful parts that can be occasionally dangerous

  the likelihood a program will work [as intended] is significantly enhanced by our ability to read it

• Must be written in a clear, consistent style, including:

  • Good use of whitespace
  • Put at most one statement on a line
  • If you have to break a statement into 2 or more lines, indent the 2nd line onwards (an extra four spaces)
  • Always use blocks (curly braces {}) with structured statements like if and while to avoid confusion on what the statement is actually doing
    • Put the opening brace { on the same (first) line as the statement to avoid JavaScript's semicolon insertion issues - i.e if (a) { ...
  • Use line comments //comment and not block commenting (unless you're commenting out code)
  • Declare all your variables at the beginning of the function, due to JavaScript's functional scope

    I use a single global variable to contain an application or library. Every object has its own namespace, so it is easy to use objects to organize my code. Use of closure provides further information hiding, increasing the strength of my modules.

Chapter 10 - Beautiful Features

Appendix A - the Awful Parts

Semicolon Insertion

//Ensure curly braces open on the first line of a statement
return {
    status: true    //for example
};
//instead of
return
{
    status:true
};

if (my_value && typeof my_value === 'object') {
    //then my value is definitely an object or an array because not only is its 'typeof' an object but it's also truthy (first statement)
}

var isNumber = function isNumber(value) {
    return typeof value === 'number' && isFinite(value);    //isFinite() rejects NaN and Infinity, but is only good for numbers, not strings
}

if (my_value && typeof my_value === 'object' && typeof my_value.length === 'number' &&
    !(my_value.propertyIsEnumerable('length'))) {
        //my_value is definitely an array!
}

Appendix B - the Bad Parts

new operator: Functions that are intended to be used with new (conventionally starting with a capital letter) should be avoided (don't define them) as they can cause all kinds of issues and complex bugs which are difficult to catch.

Appendix C - JSLint

Having read through this appendix (you can read more about JSLint here), I tend more towards JSHint, a fork of JSLint. It allows programmers to customise for themselves which the good parts and bad parts are and define their own subset, although naturally there are a number of pre-defined options. This is a really fantastic article on using JSHint; it's simple and aimed at having you using JSHint in a few minutes as well as providing various sources for pre-defined subsets.

Interesting article on prototypes: https://sporto.github.io/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/