Hjertnes.blog

#

October 27, 2017

Not enough coffee or not enough sleep this week.

#

October 27, 2017

My dogs. Luna is the big “Obama dog”, and the little one is Tara.

For-of

October 27, 2017

For of is one of a few recent additions to the for loop in Javascript. It makes it possible to do what is basically a foreach in most other programming languages, like for example C#. for(var item of array){} is more or less the same as foreach(var item in array){} in C#. Why not just use .map or .forEach? Well, I usually do, but to do that can be a little bit cumbersome when you are dealing with async methods and async await, because then the arrow function in the .map also needs to be async etc. And it is nice to have an fast way to just loop through an array without having use a old school for loops. They are useful sometimes, and you should know how they work, but it is nice to have a quick and easy way to just loop thorugh an array.

Old School For loops

October 26, 2017

I assume most of you are either using for of or map instead of the old school for loops these days, right? It is easier. But I think the old school for loop is a work of art. I’m talking about the C style for loop; not the foreach.

The way it works, is that the for loop has three elements

<li>

  The Initializer(starting point)

</li>

<li>

  The condition(continue to run until it becomes false)

</li>

<li>

  Increment(do this after each iteration)

</li>

It is very easy to reversing it, without reversing the actual array:

And then you have the &#8216;break&#8217; and &#8216;continue&#8217; keywords, the former will exit the loop, while continue will go on to the next iteration. It might be easier to use other styles of loops, but I have never found anything I could not do with a classic C style for loop; there are probably some, but I can&#8217;t think of any.

#

October 26, 2017

Hello World

What is ‘this’

October 25, 2017

All object oreiented programming languages have some kind of variant of ‘this’. It’s called this in C#, and self in Python, Swift and Objective-C.

This in Javascript and C# is not exactly the same thing. But I think it makes it a little bit easier to understand. In C# this is the "magic" variable you use if you want to access an class variable.

It is a little bit more complicated, but not really, in JavaScript. It simply refers to the current scope. By default this refers to the window object. And each function will per default have their own scope – their own this. Unless you bind a different scope to it, or use call / apply to execute the method with a different scope.

If you for example use the DOM to fetch a node, and run some function like a event handler on that node, you can safely expect &#8216;this&#8217; in that context to be that node.

You have a few different options to how to deal with &#8216;this&#8217;. Some projects are doing something like &#8216;var that = this&#8217; or &#8216;var self = this&#8217;. While the correct way to do it is to bind the current context into the method using &#8216;.bind&#8217;.

Neither way is good, the that hack drives me nuts because it&#8217;s a horrible hack. And the problem with binding is that it is <strong>so fucking slow</strong>.

In 2017 I say, bind if you have to, use arrow functions if they solve the problem for you, and always try to use .call or .apply instead of .bind when possible.

Arrow Functions

October 24, 2017

We use them all over, not just because they are shorter to write, but also because they look cool, and you don’t need to bind this for them to work with this. I’m going to write about ‘this’ some other time. The biggest difference between a regular function and a arrow function is that the former has it’s own ‘this’, which means that you need to bind to ‘this’, if it needs access to it, while an arrow function on the other hand shares it with it’s parent. You can write an arrow function in three different forms: expression, statements and object litteral.

A object literal is a way to use the simple form of the expression to make an arrow function return a object. It is this way because the object syntax {} would not work in an expression because that&#8217;s the syntax of using a full arrow function.

What to use where?

I use what ever variant that end up with the code that is the easiest to understand. I try really hard to use expression where ever I can. And to use Object Litterals when I need to return objects and to only to use a full function when it is the only way.

Value and reference types

October 23, 2017

In my previous post about the .forEach method I said that you can mutate the values of the entities of the array you are running it on. This is only kind of true. You will be able to mutate reference types but not value types. A reference type is: functions, objects and arrays. Values types are: numbers, strings bool etc. The difference is that, when you pass a object to a function you can actually mutate the object, while a number would be passed as a value, and not be mutated. Look at the two examples below: By reference:

<strong>By value:</strong>

Review

October 22, 2017

This have been a tool in my belt for a very long time. <a href="http://fluidapp.com/">Fluid App</a> is the fastest and easiest way to turn a Web Site into a App on OS X.

Why would you do that?

Well, I personally prefer to have som web apps as a separate window outside my browser, because I don’t want it to disappear between all of the way too many tabs I have open, and because some of them are in use all of the time.

It’s only five bucks. And is well worth the money.

I use Fluid, even though I cloud fire up Xcode and do the same thing there. But why would I spend like an hour or something to get it to work right, when I could spend a few minutes doing it in fluid?

Understanding ForEach

October 20, 2017

ForEach is the second of two different methods that exists in the Array prototype for looping over a array. The difference between the two is that map does not mutate the original array, while forEach does. Let’s take a look at the example below:

It looks and works <em>kind of</em> the same. The big difference is that forEach will <em>mutate</em> the orignal array, but it will not return a new array. This means that it will <em>change</em> it according to the code you write, but it will replace it with undefined if you try to do something like <code>myList = myList.forEach(...)</code> </div>