JSFiddle - React, Tailwind, and code Playground

by Ace Tributon

HTML

<p id='demo'>
  This begins Array oriented programming!
</p>
<script>
  /* DIFFERENT WAYS TO WRITE A FUNCTIONS METHODS!

        --------------------------------------------------
        FASTEST PERFORMERS	(within 1% from eachother)
        
        function protoFoo() {}
      	protoFoo.prototype={
          foo:function() { return "foo" },
          bar:function() { return "bar" },
          baz:function() { return "baz" }
      	}
      
        function protoBar() {}
        protoBar.prototype=[
          function() { return "foo" },
          function() { return "bar" },
          function() { return "baz" }
      	]
        
      	function Foobar() {}
        Foobar.prototype.foo = function() { return "foo" }
        Foobar.prototype.bar = function() { return "bar" }
        Foobar.prototype.baz = function() { return "baz" }
        
        function ArrFoo() {}
        ArrFoo.prototype[0] = function() { return "foo" }
        ArrFoo.prototype[1] = function() { return "bar" }
        ArrFoo.prototype[2] = function() { return "baz" }
        
        function proto(host,method, property){
            return host.prototype[method]=property;
        }
        
        function protoFoo(){}
        proto(protoFoo, 'foo' ,function(){return 'foo'});
        proto(protoFoo, 'bar' ,function(){return 'bar'});
        proto(protoFoo, 'baz' ,function(){return 'baz'});
        
        function protoBar(){}
        proto(protoFoo, 0 ,function(){return 'foo'});
        proto(protoFoo, 1 ,function(){return 'bar'});
        proto(protoFoo, 2 ,function(){return 'baz'});
        
        function ESSFoo(){}
        proto(ESSFoo, 'foo' ,() => 'foo');
        proto(ESSFoo, 'bar' ,() => 'bar');
        proto(ESSFoo, 'baz' ,() => 'baz');
        
        function ESSBar(){}
        proto(ESSBar, 0 ,() => 'foo');
        proto(ESSBar, 1 ,() => 'bar');
        proto(ESSBar, 2 ,() => 'baz');
        
        -----------------------------------------------
        RELATIVELY...

JavaScript

/*|  
|*|  MY NOTES ON OBJECTS AND ARRAY STRUCTURES!
|*|	 ->  Objects and Arrays are essentially the same
|*|  ->  Objects are named Indecies while Arrays are Numbered Indecies
|*|  ->  Arrays have a bit more support considering they are an ordered list
|*|  ->  While maintaning less code to type and call the index.
|*|  ->  They can also be useful for ES6 syntax thanks to the Rest Parameter
|*|  ->  To reduce the over usage of this[something] or this[0]
|*|  ->  You cna use return [] or return {}
|*|  ->  "+" is slower than ...parameters in ES6 function notation
|*|  ->  Infinite params makes it easy to create a function that makes infinite array methods
|*/

// Constructor function for Person objects
var
  Person = function(first, last, age, eye) {
    return [first, last, age, eye]
  },
  x = function(...out) {
    return [...out]
  },
  //y=(...out)=>[...out],
  $$ = (...para) => para.join(''),
  $ = (...para) => para,
  $speed = (name, ...funcs) => $$(console.time(name), funcs, console.timeEnd(name)),
  test = (name, ...funcs) => console.time(name) + funcs + console.timeEnd(name);

console.time('Array');
var car = ['Mazda ', 'RX-8 ', function(...out) {
  return `${car[0]} ${car[1]} ${out.join('')}`
}, function() {
  return ['hello world', 'heya worlds!', 'derpy der derp!', function(...out) {
    return `${car[3]()[0]}, ${car[3]()[2]} ${out.join('')}`
  }, function() {
    return ['Derpy McClaus', 'Over rules Santa!', function(...out) {
      return `${car[3]()[4]()[0]}, ${car[3]()[4]()[1]} ${out.join('')}`
    }]
  }]
}];
document.getElementById('demo').innerHTML += $$("<p>", car[2](' |ree| '), car[3]()[3](' |rah| '), car[3]()[4]()[2](' |roo| '), "</p>");
console.timeEnd('Array');

console.time('Object');
var carz = {
  mazda: 'Mazda ',
  rx: 'RX-8 ',
  sportsCar: function(...out) {
    return `${carz.mazda} ${carz.rx} ${out.join('')}`
  },
  nestFirst: function() {
    return {
      hello: 'hello world',
      heya: 'heya worlds!',
      derpy: 'derpy der...