Category: In My Own Words

A quick fix to the RuntimeError: can't modify frozen Array is to run rails c which will give you a better error so you can fix the problem.

I have never seen a self invoking function, and today during my shift as a tech coach at Flatiron School a student asked about it, so I had to do some quick learning. It is rather cool, not quite sure how I would apply it to my code yet, but it is a cool feature to see.

Here is the example from the w3schools closures tutorial (because it uses closure too!):

1
2
3
4
5

var add = (function add () {
    var counter = 0;
    console.log(counter)
    return function () {return counter += 1;}
})();

With this block of code every time I call add() it ups the counter.

add();
add();
add();

// the counter is now 3

At a quick glance one would think that every time add() is called it sets var counter = 0 and then the inner function adds 1, and then when you call it again the counter is reset to 0 and again added 1. But it keeps incrementing without resetting to 0.

If you look closer, this function is wrapped in a (), and then immediately invoked with a (). (function{})() Hence the term self invoking function. When this function is loaded initially it creates the variable of counter and assigns it 0.

Then when we call add() this goes straight to the inner function, since the outer function is self invoked. In a regular JS function it would be like add()(). Therefore add() never touches the var counter = 0 and does not reset the counter and increments the counter through closure .

That self invoked function can only be read once, and the result of the invoked function gets assigned to that variable so var counter = 0 can not be called again (in the same instance) for when we call add it is returning the result of when add was assigned.

Pretty amazing!

So I’ve just seen Array.from() today in a codewars study group I was giving. We wanted to make an array from 0 to x, and this function will do it for us!

So the first parameter, can either be an array, a string, or the length in the form of an object to set long the new Array should be.

Array.from({length: 5}) will give us an Array with a length of 5, all with undefined.

The optional second parameter is a map function,

(v, i) => i)

v is the value, which we will ignore, and instead will pass in a second parameter i which is the index, and if we return i in our map that will fill in each array with the current index, which will give us the range we wanted!

Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

Just to show you if we used the value, instead of the additional parameter index we could get this:

Array.from({length: 5}, v => v); 
// [undefined, undefined, undefined, undefined, undefined]

I am so happy to have learned this! It is sooo useful!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Hey, just learned a new phrase today:  Temporal Dead Zone

So just to put it in my own words, so I can try to remember it going forward:
When we create a variable with var in javascript, this hoists the variable and declares it as undefined at the top of the scope, and then when the line of code is hit it will re-assign the variable with it’s value. So if we call the variable name before that line of code that declares the variable, it will return undefined because the variable was created as undefined as explained above

Const and let do not do this,  and the variable is only created with the value (no hoisting here!). So if we would call the const or let above where it was defined we will get an Uncaught Reference error, the variable is not defined. This area above the declaration of the const or let variable is called the Temporal Dead Zone!

Got it? Hope so 🙂