Pears of Wisdom - All About JavaScript

General JavaScript Info Popup Windows created with:     alert(), confirm(), prompt()       confirm returns true or false based on what the user selects, either OK or Cancel Use console.log(), .warn(), .error(), to troubleshoot, etc. Pure JavaScript string literals are indicated with "" Most things + a string causes concatenation The typeof command will return the object type:     typeof(10 < 2); = boolean       boolean literals are true and false, no "" JavaScript only has one numeric type, the number, which is a floating point value. An unknown thing that conforms to a variable name but is not declared is a typeof undefined A declared variable with no value is null  To check lexical string equality or value equality use ===     Presumably == would check for object equality   Switch Case Statements switch(n) {     case thing1:       statement(arg);       break;     case thing2:       statement(arg);       break;     default:       statement(arg);       break; }  When switching on a string, remember to use toLowerCase or toUpperCase as necessary.   For loops match Java for(i=0; i<10; i++) {     statement(args); } for (var property in object) {     statement(property); }    The Do-While Loop var x = 1 do {     statement(arg);     x++; } while( x < 10 );   OR var x = 1 while( x < 10 ) {     statement(arg);     x++; }   Functions function goodJSName(arg1, arg2) {       statement(arg1);       statement(arg2);       return "Done!"; }   Arrays     var emptyArray = [];     var coolArray = ["cool", "array"];     console.log(coolArray[1]); // = array     coolArray[2] = "stuff";     console.log(coolArray[2]); // = stuff     coolArray.push("kids");     console.log(coolArray[3]); // = kids     console.log(coolArray.length); // = 4   JSON   Literal:     var thing = {       prop1: "string",       prop2: 100,       prop3: ["array", "of", "strings"],       prop4: true,       prop5: {         nestedObjProp1: "string",         nestedObjProp2: false,         nestedObjProp3: "etc."       },       func1: function() {         statement(thing.prop2)       }     };     Accessible via dot notation, e.g., thing.prop5.nestedObjProp3 === "etc." // = true Also accessible like this: thing["prop3"][0] === "array" // = true       This is primarily in case you have a property that isn't a valid identifier and thus can't be called using dot notation. You can dynamically add properties as well:       thing.what = "No really, you can do this."       console.log(thing.what); // = "No really, you can do this." With the bracket notation you can also  use objects as keys       var what = 'what?'       thing[what] = 'wha what?'       console.log(thing[what]); // = wha what?         Benefit is, if you aren't sure the value of an object, you can use the variable to store and retrieve values.   Prototype:     function Thing(prop1, prop2) {       this.prop1 = prop1;       this.prop2 = prop2;     }     var coolThing = new Thing("neat", "stuff");   Object.create     Use of literals and functions as displayed above are just syntactic sugar for:       Object.create(Object.prototype, {JSON: Object})       The {JSON: Object} in this case looks something like this:       {         prop: {           value: "value",           enumerable: true/false,           writeable: true/false,           configurable: true/false         }       }       This itself is an object that is used to define other objects. You can add additional props.       These values are available via Object.getOwnPropertyDiscriptor(obj, 'prop')       You can also set these directly via Object.defineProperty(obj, 'prop', {writable: false})         These settings don't generate errors unless you have 'use strict' set, otherwise they fail silently         Make a property not writable so you can't overwrite it, e.g.,           if you create a toString property that calls a function, you wouldn't want to accidentally overwrite it with a string literal         Make a property that is an object not writable doesn't prevent you from changing properties in that object,           You'll also need to call Object.freeze(obj.prop)         Making a property not enumerable hides it during enumeration as in the for in loop,           It is still available via obj['prop']         Making a property non configurable means you can't change the enumerable, and configurable properties,           You also can't delete the property         You can also use Object.defineProperty to add functions as properties, like this:           Object.defineProperty(obj, 'prop', {             get: function() {               return statement();             }             set: function(value) {               statement(value);             }           }           Then access it like normal: obj.prop or obj.prop = arg   ES6 Object:     Allows you to declare an object like this:     class thing {       constructor(arg) {         this.arg = arg       }       methodName(arg) {         statement(arg);       }     }   Kinds of Objects:     Host Objects: Those defined by the host, e.g., a web browser, like console     Core Object: Those defined by the language, like Math, String, etc.     User Defined Object: Stuff we make   If you create a variable using var at the root level of a .js file, it has global scope.   If you create a variable in a function using var, it has local scope.   If you create a variable in a function without using var, it has global scope.   Scope in general is basically like Java except for this last example.   'use strict'     This makes JavaScript follow EcmaScript standards exactly and disable or error on deprecated methods.   In JavaScript there is a lot of syntactic sugar that makes things faster, e.g.,     var colorArray = ['red', 'green', 'blue'];     is the same as:     var colorArray = new Array('red', 'green', 'blue');     As with the prototype items discussed above, we can add things to Array, e.g.,     Object.defineProperty(Array.prototype, 'last', {get: function() {return this[this.length -1]} })     The above code allows us to add a last method to any array which returns the last element     A function's prototype is the object instance that will become the prototype for all objects created using this function as a constructor.       Accessible via myFunction.prototype     An object's prototype is the object instance from which the object is inherited.       Accessible via myObject.__proto__     Let's create a simple object:       function myObj(prop1, prop2) {         this.prop1 = prop1         this.prop2 = prop2       }     By doing this I have created a prototype instance of an object in memory.     That instance is effectively a blank JSON, like this: myObj{}     If I then type:       myObj.prototype.numProp = 3     I have modified the prototype, like this myObj{numProp: 3}     All subsequent instances created with new myObj, will have the above property     I can override this value like this:       var myObjInstance = new myObj('x', 'y')       myObjInstance.numProp = 5     I can change the value in the prototype instance by writing:       myObj.prototype.numProp = 4       myObjInstance.__proto__.numProp = 4     The immediate above is basically referencing the prototype of the specific object.     However, neither of these will print out 4, if I call: console.log(myObjInstance.numProp), as that value is still overwritten in the instance.     If I make changes to the prototype AFTER instantiation, that creates a new prototype instance from which all new instances inherit.     So the prototypes are dynamic in that sense.     You can use the myObjInstance.hasOwnProperty('numProp') to return a boolean indicating that the instance has its own numProp property.     You can walk up an objects inheritance chain like this:       myObjInst.__proto__.__proto__. ...     This will continue until you get to a null     To allow inheritance you first have to have a chain:       UrObject.prototype.doit = function(value) { return statement(value) }     You can then say:       MyObject.prototype = Object.create(UrObject.prototype)     Finally, in your MyObject constructor, call:       UrObject.call(args)     And set your constructor explicitly:       MyObject.prototype.constructor = MyObject     We can also use Java like constructions       class UrObject {         constructor(arg) {           statement(arg)         }         myFunc(arg) {           otherStatement(arg)         }       }       class MyObject extends UrObject {         constructor(arg) {           super(arg)           diffStatement(arg)         }       }     Important to note that constructor is also a class and properties of classes are not enumerable by deafult. JavaScript Design Patterns Creational       When using the new keyword 4 things happen         1. JS creates a brand new object         2. It links the new object to a prototype         3. It binds 'this' to the new object scope         4. It returns this       Constructor       Module       Factory       Singleton Structural       Decorator       Facade       Flyweight Behavioral       Command       Mediator       Observer