JSFiddle - React, Tailwind, and code Playground

by danmalcolm

JavaScript

// Examples of constructor name inference used by WebKit to display types of object in console

// Section 1 - A few different ways of declaring ctor function

// a. named function expression
function a() {
}

// b. anonymous function assigned to variable
var b = function(){
}

// c. anonymous function assigned to property of object
var container = {
    c: function() {
    }
};

// d. anonymous function created within function
function cr() {
    var dCtor = function(){
    };
    return dCtor;
}
var d = cr();

// All anonymous functions do not have a name
console.log(a.name); // 'a'
console.log(b.name); // ''
console.log(container.c.name); // ''
console.log(d.name); // ''

// Section 2 - Instance types in debugger

var a_instance1 = new a(); // Chrome debugger shows 'a'
var acopy = a;
var a_instance2 = new acopy(); // Chrome debugger shows 'a' - no change if ctor assigned to different variable

var b_instance1 = new b(); // Chrome debugger shows 'b', name of variable to which anonymous function first assigned
var bcopy = b;
var b_instance2 = new bcopy(); // Chrome debugger shows 'b' - no change if ctor assigned to different variable

var c_instance1 = new container.c(); // Chrome debugger shows 'container.c', name of variable and property to which anonymous function first assigned
var ccopy = container.c;
var c_instance2 = new ccopy; // Chrome debugger shows 'container.c' - no change if ctor assigned to different variable

var d_instance = new d(); // Chrome debugger shows 'dCtor', name of variable to which anonymous function first assigned when created

// Force break so that you can see how above variables are displayed in the debugger
debugger;