Basic JavaScript Stuff

(Some examples and description taken from Zakas, Nicholas C. (2011-12-20). Professional JavaScript for Web Developers (Kindle Locations 6262-6263). John Wiley and Sons.)

Primitives

Object –  instances of a particular reference types, structures used to group data and functionality together and are often incorrectly called classes.

Array – ordered lists of data , but unlike in other languages, they can hold any type of data in each slot.

Date

RegExp

Primitive Wrappers – The major difference between reference types and primitive wrapper types is the lifetime of the object. When you instantiate a reference type using the new operator , it stays in memory until it goes out of scope, whereas automatically created primitive wrapper objects exist for only one line of code before they are destroyed. This means that properties and methods cannot be added at runtime.

Boolean

Number

String

Math

Global (Singleton) – all variables and functions declared in the global scope become properties on window.

Function – Functions actually are objects. Each function is an instance of the Function type that has properties and methods just like any other reference type. Because functions are objects, function names are simply pointers to function objects and are not necessarily tied to the function itself.

Setting data properties:

var person = {
    _age: 0
};
Object.defineProperty(person, "name", {
    configurable: true/false, // Indicates if the property may be redefined by removing the property via delete, changing the property’s attributes, or changing the property into an accessor property. By default, this is true for all properties defined directly on an object.
    value: "Ishmael", // Contains the actual data value for the property. This is the location from which the property’s value is read and the location to which new values are saved. The default value for this attribute is undefined.
    enumerable: true/false, // Indicates if the property will be returned in a for-in loop. By default, this is true for all properties defined directly on an object.
    writable: true/false // Indicates if the property’s value can be changed. By default, this is true for all properties defined directly on an object.
});

Object.defineProperty(person, "age", {
    get: function() {return this._age;}, // The function to call when the property is read from. The default value is undefined.
    set: function(val) {if(val > 0){this._age = val}} // The function to call when the property is written to. The default value is undefined.
});

// It’s not necessary to assign both a getter and a setter. Assigning just a getter means that the property cannot be written to and attempts to do so will be ignored.

person.age = 99;
person.age = -1;

console.log(person.name) // Ishmael
console.log(person.age) // 99

Probing Primitives

var myObj = new Object() shows up in the Firefox debugger as:

  • __proto__ (Object)
    • __defineGetter__ (Function)
      • __proto__ (Function)
        • apply (Function)
        • arguments (null)
        • bind (Function)
        • call (Function)
        • caller (null)
        • constructor (Function)
        • isGenerator (Function)
        • length (0)
        • name (“”)
        • toSource (Function)
        • toString (Function)
        • __proto__ (Object)
        • <Closure>
    • __defineSetter__(Function)
      • __proto__ (Function)
    • __lookupGetter__ (Function)
      • __proto__ (Function)
    • __lookupSetter__ (Function)
      • __proto__ (Function)
    • constructor (Function)
      • create (Function)
      • defineProperties (Function)
      • defineProperty (Function)
      • freeze (Function)
      • getOwnPropertyDescriptor (Function)
      • getOwnPropertyNames (Function)
      • getPrototypeOf (Function)
      • is (Function)
      • isExtensible (Function)
      • isFrozen (Function)
      • isSealed (Function)
      • keys (Function)
      • length (1)
      • name (“Object”)
      • preventExtensions (Function)
      • prototype (Object)
      • seal (Function)
      • __proto__ (Function)
    • hasOwnProperty (Function)
      • __proto__ (Function)
    • isPrototypeOf (Function)
      • __proto__ (Function)
    • propertyIsEnumerable (Function)
    • toLocaleString (Function)
    • toSource (Function)
    • toString (Function)
    • unwatch (Function)
    • valueOf (Function)
    • watch (Function)

function myFunc(){} shows up in the FF debugger as:

myFunc (Function)

  • arguments – an array -like object that contains all of the arguments that were passed into the function.
    • get (Function)
    • set (Function)
  • caller – contains a reference to the function that called this function or null if the function was called from the global scope.
    • get (Function)
    • set (Function)
  • length (0) – Indicates the number of named arguments that the function expects.
  • name (“myFunc”)
  • prototype (Object) – The prototype is the actual location of all instance methods for reference types, meaning methods such as toString() and valueOf() actually exist on the prototype and are then accessed from the object instances.
    • constructor (Function)
      • All the items from the root call to myFunc plus <Closure>
    • __proto__ (Object)
      • Object as defined by myObj, above
  • __proto__ (Function)
    • apply (Function)
    • arguments (null)
    • bind (Function)
    • call (Function)
    • caller (null)
    • constructor (Function)
    • isGenerator (Function)
    • length (0)
    • name (“”)
    • toSource (Function)
    • toString (Function)
    • __proto__ (Object)
    • <Closure>
  • <Closure>

var myArray = new Array(3) shows up in the Firefox debugger as:

myArray (Array)

  • length (3)
  • __proto__ (Array)
    • length (0)
    • constructor (Function)
    • toSource (Function)
    • toString (Function)
    • toLocaleString (Function)
    • join (Function)
    • reverse (Function)
    • sort (Function)
    • push (Function)
    • pop (Function)
    • shift (Function)
    • unShift (Function)
    • splice (Function)
    • concat (Function)
    • slice (Function)
    • lastIndexOf (Function)
    • indexOf (Function)
    • forEach (Function)
    • map (Function)
    • reduce (Function)
    • reduceRight (function)
    • filter (Function)
    • some (Function)
    • find (Function)
    • @@iterator (Function)
    • entries (Function)
    • keys (Function)
    • __proto__ (Object)
      • Object as defined by myObj, above

 Combination Constructor Pattern

"use strict";

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.freinds = ["Shelby", "Court"];
}

Person.prototype = {
    constructor: Person,
    sayName: function() {
        console.log(this.name);
    }
}

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.freinds.push("Van");

console.log(person1.freinds); // Shelby, Court, Van
console.log(person2.freinds); // Shelby, Court

Probing Person

var person1 = new Person(” Nicholas”, 29, “Software Engineer”) shows up in the Firefox debugger as:

person1 (Object)

    • age (29)
    • freinds (Array)
    • job (“Software Engineer”)
    • name (“Nicholas”)
    • __proto__ (Object)
      • constructor (Function)
        • arguments
        • caller
        • length (3)
        • name (“Person”)
        • prototype (Object)
        • __proto__ (Function)
        • <Closure>
      • sayName (Function)
        • arguments
        • caller
        • length (0)
        • name (“”)
        • prototype (Object)
        • __proto__ (Function)
          • Object as defined by myObj, above
        • <Closure>
      • __proto__ (Function)
        • Object as defined by myObj, above

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: