The lodash forown method

Looping over all keys in an object is something that comes up a whole lot when working on a javScript project. There are a wide range of ways of doing so with arrays, such as the array for each method, or using a while loop. However there is also all kinds of ways of doing so with objects in general also, not just arrays, but array like objects, and various kinds of objects that are collections in the form of named rather than index keys. So then there are ways of creating an array of key names for objects in general, and then looping over the resulting array as a way to do so with such objects.

Sometimes it would be nice to have a method that will only loop over key value pares that are actually part of the object rather than values that are inherited from the prototype of the objects class. One option to do so is the _.forOwn method in lodash that can be used as a way to loop over all the own properties of an object. There is also of course the _.forIn method as well that will loop over the own properties of an object as well as what is in the prototype object of the object on top of that.

However doing so is not so hard with plain old javaScript by itself also, so these methods are not the most compelling reasons to bother with lodash. With that being said I will be looking at some vanilla javaScript solutions for looping over the own properties of an object in addition to using lodash to do so.

Read More

JavaScript NaN (Not a Number) and the isNaN methods.

In JavaScript NaN is an weird number value in javaScript that means Not A Number, but yet the type of the value is Number. So yes if the type of operator is used with a NaN value that type is indeed number. However that is not the last thing that is a little weird about the NaN value in javaScript.

This value has some unique things going on with it aside from the fact that the data type is a Number, yet it is called Not A Number. For one thing it does not equal anything, including itself, which means that special methods must be used to test if a value is NaN or not. On top of that there are problems with the native and user space methods that are used to test for NaN that a javaScript developer needs to look out for. Many of them will return what many will observe as a false positive for certain values other than NaN, such as the undefined value, which in turn further complicating the process of testing for NaN.

The value will come up now and then often as a result of an expression, when something in that expression ends up being undefined or a sting value that can not parse to a number, and thus ends up being the NaN value. So the existence of the NaN value is closely tied with the typeless nature of javaScript when it comes to working out expressions involving numbers and strings. When values such as these are combined with math operators such as Multiplication then the resulting value will be NaN. So there is a need to know how to account for the possibility of JavaScript NaN being a possible value, and how to deal with it when working out some code.

Read More

Using jQuerys core $.each method to loop over objects and Arrays

So the jQuery each method is a simple tool to loop over an object or array. This is not the first post I have written on a tool that does this, I wrote a post on the npm package traverse that is another tool that does basically the same thing. yes there is Array.forEach, the for in loop, and a wide range of other options that come to mind, but for now lets just keep it with an option in jQuery.

Read More

JavaScript Call, Apply, and Bind Function prototype methods

In my travels on the open web I see a lot of posts on the this keyword, and also the JavaScript call, apply, and bind methods of the Function prototype. So writing a post on the this keyword is something that just needs to happen at one point or another when writing, and maintaining a blog on javaScript it would seem. with that said I did cover the this keyword before in a post, but I did not get into call, apply, and bind methods at least not in detail anyway. In any case it strikes me as a good idea to have a post where I am just getting into the use of these function prototype methods, and how they relate to the use of the this keyword.

The call method is simply a Function prototype method that can be called off of any function, and the value of what the this keyword should be inside the body of the function can be set by passing that value as the first argument when calling the call method. So this call method comes in handy often when working with native javaScript methods to help break methods free from their Class prototype object and get them to work with any object to which they might work with. One good example of this would be to get the array for each prototype method to work with an object that is an HTMLCollection object. An HTMLCollection object is not an instance of an array, but it is an example of an object where the own properties of the object are formated like that of an array, thus doing so will work.

So in this post I will be going over some examples of the use of call, as well as apply and the bind method that each do the same thing a little differently. In the process if doing so I should also end up covering all kinds of other varioius subjects on javaScript that might prove to be useful.

Read More

Getting started with jQuery

jQuery seems to be one of those projects that just will not die. Although it is no longer needed, it is still needed. Much of what can be done with jQuery can be easly done in the browser, but this is only true with modern browsers. Lots of popular projects like bootstrap use it, and it also is in use on a ton of web sites. So even if it does not make sense to learn jQuery these days, it does.

Like any other series of posts it is always best to start with some kind of getting started post, so lets get this out of the way. I assume that you are someone that has some knowledge of the basics of getting things done with client side JavaScript.

Read More