Angular CLI Installation Basics

Angular

Angular CLI installation basicsBefore you dive into your new application, here are some Angular CLI installation basics. This tool simplifies the process of scaffolding out your base code and new components.

This article provides a high-level introduction to Angular CLI installation basics. The Angular CLI is a powerful tool that can dramatically reduce the amount of time you spend coding, while improving the quality of the code. Continue reading “Angular CLI Installation Basics”

Javascript E164 Phone Number Validation

JavaScript

JavaScript E164 phone number validationWhen you need to ensure that the user inputs an E164 compliant phone number, JavaScript E164 phone number validation helps to minimize errors.

I this article you will learn how to set up a JavaScript E164 phone number validation system for your forms. E.164 is the international telephone numbering plan, and it ensures each device has a unique number. This system allows you to phone or send text messages anywhere in the world. Continue reading “Javascript E164 Phone Number Validation”

jQuery getScript Alternatives

JavaScript

jQuery getScript alternativesjQuery is aweseome, and the getScript even more so. But, consider some jQuery getScript alternatives in case you have to load a script file asynchronously without any help.

Today we’re going to talk about some jQuery getScript alternatives that you can use in your code. The jQuery getScript() allows you to get and execute external JavaScripts utilizing a type of AJAX HTTP GET request. Get requests can get any response, including JavaScripts, XML, and HTML, while getScript is limited to JavaScripts. The getScript method dynamically executes external JavaScript while Get receives data according to parameters.

The jQuery getScript Good

The Jquery getScript alternatives method is an extremely efficient way to load external code into your program at runtime. It allows us to write a piece of code once and use it in an unlimited amount of applications. We can also use code written by others in this way, and there is a vast amount of code snippets already available for you to use. If you are doing something common, like working with a form, you may not need to write any new code at all.

The jQuery getScript Bad

Unfortunately, any time you use external scripts, you will experience a slowdown as the program waits for the information to fetch. If you are using a code with a lot of external scripts, you will experience a reduced execution speed, especially if there are a lot of images loading as well.

You also need to load the jQuery library before you can access the getScript method. This extensive library will also slow down your code slightly, as it requires a download of a little under 250kb, depending on which version you are using.

The jQuery getScript Alternatives

Sometimes the code we are working on is not significant enough to warrant loading the entire jQuery library to access one or two external files, and in that case, we will need an alternative.

Let’s go step-by-step to arrive at a few Javascript getScript alternatives. We have created an object called myData, which has three properties. The properties of myData are FOO, BAR, and BAZ. We have placed this object in an external file at https://bit.ly/get-script-example, along with a console warning that tells us if we have successfully loaded the script. Let’s try to access this object from our code.

Example 1

In Example 1, we are asking the console to print out the properties of the object myData, but since we never tell the console where to find the object, the process fails and returns the error myData is not defined.

Example 2

In Example 2, we show you how we would typically access the myData object in the external file by using a jQuery getScript. You can see in this example that we first tell the code where to find the file.

As the file is downloading, it will come across the javaScript console warning and immediately print it to the screen. When it’s done loading, we use console.log to output the message that it has finished, and we use console.dir to display the properties of the object myData to the screen.

Example 3

In Example 3, we can see how to create a getScript function from scratch and eliminate the need for jQuery. The getScript function that we are creating takes two parameters, scriptUrl and callback.

We enter the scriptUrl directly as https://bit.ly/get-script-example, but our callback is going to be another function called onScriptLoad. The onScriptLoad function takes care of using the console to let us know that the script has loaded and to show us the properties of the myData object we saw in the last example.

Here’s what’s happening:

  • The getScript function creates a new script document element.
  • It assigns scriptUrl https://bit.ly/get-script-example as the source of the script and downloads the contents into the constant named script.
  • When the script named script finishes loading it calls the callback function onScriptLoad.
  • The onScriptLoad function uses console.log to tell us the script is loaded.
  • The onScriptLoad function uses console.dir to tell us the properties of myData.

Example 4

In Example 4, we show you two more ways to do pretty much the same thing we do in Example 3, but in a more precise way.

Example 4a

In the first part of this example, we show we can use an anonymous function as our call back instead of creating a separate named function for the task. This method allows us to embed the anonymous function in the calling statement and use one function and the calling statement instead of two functions and a calling statement. Fewer functions save us a bit of typing, and your code will be a little bit easier to read and follow.

Example 4b

In the second part of the example, we use an arrow function to take the place of the anonymous function and reduce the amount of typing necessary even further. This method is the preferred way to accomplish loading external scripts in most cases that do not use jQuery.

Conclusion

As you can see, you are not limited to using jQuery for loading external scripts into your program. In most cases, jQuery will be the answer because there is so much more you can do with it, and you are likely to take advantage of the library in many ways if you are developing a website or application. If you are doing something small, though, and there is no reason to load the library, you can take advantage of these examples to avoid using the library.

We hope that you have enjoyed reading over these examples and have learned something new. If these examples have improved your understanding and your coding skills, please share these jQuery getScript alternatives on Facebook and Twitter.

Validating a JavaScript Array

JavaScript

validating a JavaScript arrayIf you have a function that takes one more more arrays as arguments, don’t assume arrays are what you will get. Validating a JavaScript array can help prevent unexpected errors in your code.

In this article you will learn how about validating a JavaScript array. There are many times when you only want code to execute on an array that is holding one or more values. To prevent any non-arrays from entering your code, we must implement some validation techniques. Continue reading “Validating a JavaScript Array”

JavaScript Email Address Validation

JavaScript

JavaScript email address validationPrompting a user to input an email address is fine, but you want to implement JavaScript email address validation in order to prevent back-end issues.

In this article, you will learn about JavaScript email address validation. You can check to see whether someone has input a valid email address into a field before sending it to the database using email validation techniques such as this one. Continue reading “JavaScript Email Address Validation”

JavaScript Array.prototype.forEach

Array.prototype

forEachThe JavaScript Array prototype forEach method allows you to iterate over an array without the need to set a variable.

A forEach loop is a powerful tool that can simplify your code and help reduce the number of lines required to complete a task. The JavaScript Array prototype forEach method is like a for loop but is designed especially for use with arrays. A for loop is not tied to an array and is more general purpose.

Example 1

To cycle through every element of an array without the JavaScript Array.prototype.forEach method, we would use a for loop, like Example 1. We need a variable to hold the current iteration number and we usually use the lowercase letter i to store the iteration number. We also use the Length property on the array to get its size and store that value in a variable called arrayLength. Then we can use a for loop to iterate through the array as long as the value of i is less than the value of arrayLength.

The JavaScript Array prototype forEach method removes the need for the extra variables, and you can see by comparing Example 1 with Example 2, that it helps make it easier to read. Let’s look at some examples of how the JavaScript Array prototype forEach method can be helpful, and how to use it.

Example 2

In Example 2, we use the JavaScript Array prototype forEach method and an anonymous function to print the value of every element in an array.

The code records.forEach(); tells the computer to start at the first element in the array named records, and for each iteration, do what it says in parentheses. In this case, it will update the variable (record) and pass that value to an anonymous function.

We call it an anonymous function because it doesn’t have a name. It has only the function itself between the brackets {}. We could name it processRecords or something, but since we aren’t going to use this function elsewhere, it’s unnecessary. The function does the work of printing the value to the screen with the console.log command. Console.log prints the value of record to the screen.

Example 3

In Example 3, we use an arrow function as a shorthand way to write the anonymous function from Example 2. It’s more concise and more comfortable to read, but we still update the value of record and pass it to the anonymous function where console.log prints it on the screen as we do in Example 1.

Example 4

In Example 4, we use a traditional standalone function called processRecord that also passes a variable called record to console.log. It cannot set the value of record, nor iterate through the array. To iterate through the array and set the value of record, we use the arrow function with the JavaScript Array prototype forEach method.

For each iteration in this example, we set the value of record and send it to the processRecords function where it will pass the value to console.log.

We would use this example when we want to access the processRecords function from other places in our code.

Syntax

  • Now that we have taken a look at a few different ways to use the Array.prototype.forEach method, let’s dig a little deeper and look at the syntax to see what else we can do.
    arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);
  • arr = Name of the array that we are iterating. We have been using records.
  • callback = The function we are calling each iteration. We have used anonymous and processRecords.
  • currentValue = The value of the current array element. We have been setting this to record.
  • index = The current element id or number. We will be using index as well in upcoming examples.
  • array = The array we are using the forEach method to iterate through. This variable refers to the entire contents of the array, not the name. We will be setting this to originalArray in upcoming examples.
  • thisArg = The value to use as this when executing a callback. This value is for updating values in the array, among other things.

Now that we have looked over the syntax of a JavaScript Array prototype forEach method let’s look at a few more examples. So far, in our first three examples, we have only passed the current value to the callback function in the form of a variable called record, but we can also pass the index, array, and thisArg values as well.

Optional Values

There is one thing to remember about the optional values of index, array, and thisArg. You must assign the variables in order. To assign a variable to the array value, you must also assign one to index. If you only want to know the value of index, there is no need to assign a variable to array and thisArg.

Example 5

Example 5 is the same as Example 1, but in this example, we have assigned variables to each of the optional values.

The variable record = current value
The variable index = index
The variable originalArray = array
The variable thisArg = thisArg

We send each of these values to the anonymous function on each iteration. In our example, we still have console.log print the value of the record variable to the screen, but you can change it to index, originalArray, or thisArg to see those values.

Example 6

Example 6 is the same as Example 2, but with two of the three additional values included. Notice that like Example 5, we could change console.log to print the values of index or originalArray to the screen, but to have access to the thisArg value, you would need to assign it before the arrow function.

Example 7

Example 7 is the same as Example 4. Once again, we split the function and the forEach method into two parts, and we also add two of the three optional variables to the list of information sent to the function on each iteration. If you want to use the thisArrg value in this situation, you will need to declare it before the arrow function in the forEach method and in the parameters of the processRecord function.

Conclusion

Hopefully, after reading over these examples, you have a better handle on the JavaScript Array prototype forEach method. It can be a helpful tool that makes life easier. There are some downsides, though, and one of the biggest is that you can’t stop it once It starts. So, for instance, if you had an array with several hundred elements, you could not print out ten at a time; you would have to print them all.
If you have learned something new, and this explanation of the JavaScript Array prototype forEach method has been helpful, please share it on Facebook and Twitter.

JavaScript Async Await – An Introduction

JavaScript

Javascript async awaitThe Javascript async await statement provides a way to express asynchronous logic in your code in a sane and readable manner

In this article, you will learn how to master the Javascript async await statement. Before async await came along, the only thing we had was promises and callbacks. The async-await statement syntax is easier to understand, read, and implement in your code.

Continue reading “JavaScript Async Await – An Introduction”

How do I use the jQuery.css() Method?

jQuery

Angular logo - cssThe jQuery CSS method allows you to style one or more DOM elements

Let’s begin with the HTMLElement.style property, which provides the access you need to style any DOM element. As a front-end web developer, you should make it a point to be familiar with this low-level DOM API. But the HTMLElement.style property comes with challenges, the two biggest being:

  1. The syntax is verbose, which leads to repetitive, boilerplate code.
  2. You cannot overwrite the HTMLElement.style property, which means that you cannot arbitrarily assign an object to it.

Now while it may seem like a minor detail that you cannot overwrite the HTMLElement.style property, this limitation does negate the ability to assign a well-crafted object to an HTMLElement’s style property. It also severely minimizes code re-use.

But the jQuery CSS method provides a powerful way to sidestep the quirky limitations of the HTMLElement.style property. It offers the ability to style DOM elements in a way that is considerably more elegant and expressive.

For one thing, the syntax is based on method chaining; you chain the css() method to the result of any jQuery query. So whether your query returns one or many elements, the style property and value that you pass to the css() method will be applied to the element(s) returned by your query. And in addition to a more concise syntax, there is the potential for code reuse. And finally, something that is often overlooked about this method: you are styling the DOM element directly (as opposed to using an external style sheet). As a result, the styles you apply will enjoy a high specificity.

In its most basic form, the jQuery.css() method takes two arguments. Both arguments are strings. The first argument is the name of the CSS property that you want to change. The second property is the new value for that CSS property. When you execute the CSS method against one or more DOM elements, jQuery adds a style attribute to each DOM element. And then, jQuery uses the second argument you provided as the value for that CSS property.

Try it yourself !

In the above example, there are five paragraph elements. Click each paragraph. When you do, you’ll see that each clicked element turns red. Click the JavaScript tab. In the JavaScript code, you’ll see that there is a click-event handler set up for each paragraph element. As a result, when any paragraph is clicked, jQuery executes the CSS method against that paragraph. Two arguments are passed to the CSS method. The first argument is color, which is the CSS property that we want to change. The second argument is red, which is the new value for that CSS property.

So, the approach taken so far is a very simple implementation of the css() method. In this case, we are passing only two strings. These two strings act as key/value pairs for the specified style property. But it is also possible to pass an object to the css() method. Significantly, this approach allows you to style multiple properties of an HTMLElement. This, of course, is an advanced implementation of the css() method, which I’ll cover in another article; for now, it’s just good to be aware of it.

Summary

So once you’ve had a chance to work with the css() method a little, I think you’ll agree that it is arguably one of the most genius features of jQuery. It frees you from two limitations of the HTMLElement.style property, and in addition to the elegant syntax, this method provides a way to re-use well-crafted code, in order to style multiple DOM elements. And if you look into the advanced syntax, you’ll see that multiple styles can also be applied within one call to the css() method.

JavaScript Array.prototype.unshift()

Array.prototype

unshiftThe JavaScript unshift method adds the specified value to the beginning of the array and returns the new length of the array. It is the most efficient way to add an element to the beginning of a JavaScript array.

While some may be tempted to use the Array.prototype.splice() method to add an element to the beginning of a JavaScript array, you can trust me when I say, the Array.prototype.unshift() is the way to go. I will add though, just as an observation, I’ve always felt that the method name “unshift” is clunky and unintuitive. Nevertheless, it is the one that the ECMAScript specification has given us, so we’ll just have to hold our noses : – ) and dive right in.

So, the syntax for the Array.prototype.unshift() method is quite simple. You just chain unshift() onto your array variable name, and pass one argument to that method: the element that you want to add to the beginning of your array. For example: myArray.unshift(“hello”) would add the string “hello” to the beginning of the “myArray” array.

So you can pass any valid JavaScript value as the argument to the unshift() method. This could be a number, an object, another array or even an expression such as an executed function. But it’s important to keep in mind that the unshift() method returns the new length of the array.
So, if an array has five elements, calling the unshift() method will return “6”, because adding one element to that array has increased the length of the array to “6”.

Try it yourself !

In the above example, click the JavaScript tab. You’ll see that we have the foo array, which has three elements. Each time that we call the unshift method, the value that we pass as an argument is added to the beginning of the array. Notice that we show the return value of the unshift method in the console. This allows us to see that shift returns the new length of the array.

Click the Result tab. Notice how we call the unshift method a total of three times. Each time, we show the return of that call to unshift: “4”, “5”, and “6”. We also show that we use the console.dir method to inspect foo. This is so we can see the changes that are happening to the array with each call to unshift.

Video Example Code

If you want to download the example code, visit this page: bit.ly/kcv-array-unshift

Summary

So, big picture: the ECMAScript specification provides a number of methods on the Array.prototype object that are designed for handling mutations to the beginning and end of an array. The Array.prototype.unshift() method, for example, is specifically designed to efficiently add an element to the beginning of an array. The way it works is, the element that you pass as the sole argument is added to the beginning of the array, and the new length of the array is returned. Simple and efficient… that’s what we like, right?

JavaScript String.prototype.split()

String.prototype

XXXThe JavaScript split method turns a string into an array. You simply need to pass one or more characters as the separator.

Some may find it odd that all JavaScript strings have a prototype object. After all, isn’t a string a primitive type? Well, the answer is “yes”: a string is a primitive in JavaScript, but the string primitive has a prototype object “wrapper”. This wrapper prototype object actually wraps the primitive string temporarily, providing a number of properties and methods. Now one of the properties provided is the split() method, which allows you to turn the string into an array whose elements are specific parts of the string. And those parts are determined by the separator character (or characters) that you provide as the first argument.

When you need to convert a string into an array, you first need to decide how to split that string. In other words: what character in the string indicates a new array element? For example, if you determine that any single space is a separator, then every word in the string will become a new array element.

Now this is a fairly typical scenario (and perfectly valid). Another common case is when you have a string of words or phrases separated by commas, and you need to turn each word or phrase into an array element. In this case, the comma is your separator character, and you’ll need to pass it to the split() method. So keep two things in mind: 1) If you do not provide an argument to the split() method, it will return an array with one element: the original string (i.e. the split() method did not understand how to split the array!). 2) If you provide two quotes as the argument to the split() method, it will return an array and every single character in the original string will be an array element (this could potentially be a large array).

Try it yourself !

In above example click the JavaScript tab. There are a series of console.dir statements. We use console.dir because the JavaScript split method returns an array, so we want to inspect that array. We are using the string: “I want to be an array”  for each example.

In the first console.dir statement, we can see that passing no arguments to the split method returns an array where every character in the string is an element (including spaces). In the second console.dir statement we use a single space as the separator character (” “). This returns an array were every word in our string becomes an element. This is a very common approach, and quite useful. The third and fourth console.dir statements show other ways that you can provide a separator. The results are a bit odd, but the main point here is that it is really up to you: you can use any character(s) in that string in order to convert the string to an array.

Summary

So, to recap, every JavaScript string primitive has a temporary object wrapper that provides various properties and methods. That string primitive wrapper prototype includes a split() method, which allows you to convert that string into an array. So, you need to let the split() method know how to “split” the string into the array elements, and that is accomplished by the one or more characters you provide as the first argument.

JavaScript Array.prototype.splice()

Array.prototype

javascript spliceJavaScript’s Array.prototype.splice() method removes one or more elements from any position in the array and returns the removed elements in a new array. It also allows you to add one or more elements to the middle of an array.

JavaScript’s Array.prototype.shift() and Array.prototype.pop() methods allow you to remove elements from the beginning and end of a JavaScript array. These methods are simple to use and require no arguments because there is no potential for ambiguity: the concepts “first element” and “last element” require no further explanation. But when you want to remove one or more elements from the middle of a JavaScript array, there are details required. For example: where in the array do we want to start removing elements? Also, how many elements do we want to remove?

The Array.prototype.splice() method answers that question by removing one or more elements from any position in the array and returning the removed elements in a new array. Initially, this can throw you off because if you want to remove only one element, you would expect just that one element to be returned. But the Array.prototype.splice() method always returns an array. So, just keep in mind that if you plan to remove one element, you’ll need to access the first element in the array that is returned.

The syntax for this is simple: you just pass a minimum of two numbers to the splice() method: the position in the array at which you want to start removing elements, and the number of elements to remove. In this case, you are only removing elements from the array. But you do have the option of adding as many additional parameters as you like. So, beginning with the 3rd parameter, you specify one or more elements to ADD to the array, starting at the position specified with the first parameter. For example: myArray.splice(2, 3) would remove three elements from myArray, starting at index # 2. But, myArray.splice(2, 3, ‘a’, ‘b’, ‘c’) would also add the strings ‘a’, ‘b’, ‘c’ to the array starting at index # 2.

JavaScript’s Array.prototype.unshift() and Array.prototype.push() methods allow you to remove elements from the beginning and end of a JavaScript array. But if you want to remove elements from the middle of an array, the Array.prototype.splice() method is the correct tool. In this case, you provide a zero as the 2nd argument, which means that you are saying: “I do not want to remove any elements from the array”. If you provide any arguments after the 2nd argument, however, then those will be added to the array starting at the position specified in the 1st argument. For example: myArray.splice(2, 0, ‘HELLO’, ‘GOODBYE’). Here, you’d be adding the strings ‘HELLO‘, ‘GOODBYE‘ to the array starting at position # 2. But keep in mind that in this case, the Array.prototype.splice() method will return an empty array, because that method always returns an array. But if you do not remove any elements from the original array, then an empty array is returned.

Try it yourself !

In the above example, click the JavaScript tab. There we call the splice method on an array. In the first case, we take a very simple approach; the first argument is 0 and the second argument is 1: foo.splice(0, 1). This is similar to using the JavaScript shift() method, except that shift() returns the removed element, whereas the splice() method returns the removed element in an array.  This is a very simple example, but the main takeaway is: the first argument is the position to start at, and the second argument is the number of elements to remove.

Later in the examples, we pass no arguments to the splice method. In this case, no elements are removed from the original array and an empty array is removed.

Click the Result tab to see the output for all of the splice method examples.

Starting from the end of the array

In the last example, we provide a negative number for the first argument. A negative number tells the splice method that we want to “start at the end”.  For example:   foo.splice(-4, 3)  tells that splice method that we want to start at the fourth-to-last element in the array, and remove three elements.

Summary

Working with the beginning or the end of a JavaScript array is fairly straightforward, and to make matters even better, the Array.prototype’s push(), pop(), shift() and unshift() methods simplify the process. It’s when you want to remove or add elements to the middle of an array that things can get a bit more complex. Fortunately, though, the Array.prototype.splice() method provides a way to remove one or more elements from or add elements to the middle of a JavaScript array. But the key thing to remember is: this method always returns an array. So, if you are removing elements and you want to access any of the removed elements, you’ll need to iterate the returned array. But if you are adding elements only, then an empty array will be returned.

How do I fetch JSON data with jQuery?

jQuery

jquery-logo jQuery’s ajax method provides a way to make an HTTP request for JSON data and then handle the successful result.

Assuming that you have access to jQuery in your web page, fetching JSON data is very simple. The key to this is the jQuery.ajax method. This method takes an object as its first argument. In this object, you can, at minimum, specify url and success properties. The url property is the web address of the JSON data that you want to fetch. It should start with http:// or https://. If the resource is a relative path, then it could be virtually anything, for example: /data/json/customers. The success property is a method. That is, you assign a function to the success property. This function will receive the fetched JSON data as its first argument. Inside the function, you can process that data.

Try it yourself!

See the Pen jQuery AJAX – Basic Example by Kevin Chisholm (@kevinchisholm) on CodePen.

In the above example, we make a call to $.ajax. We pass an object to this method and that object has two properties. The url property has the web address of the JSON data that we want. Notice that this address ends with: ?sleep=2. This just means that for demonstration purposes, we can force the request to be delayed for two seconds. Go ahead and change that to ?sleep=5. You will see that the request then takes five seconds to complete. If you change it to ?sleep=0, then you will notice that the request completes very quickly. Either way, you can control this request and slow it down in order to see more clearly how things work.

The success property has an anonymous function assigned to it. This function will be executed once the $.ajax requests succeed. The function will take the fetched  data as its first argument. So, inside this function we use the JSONView jQuery plugin to inject the JSON data into the DOM.

Important note: we haven’t specified the HTTP verb that will be used for our request. For example, GET and POST are common HTTP verbs used for sending or receiving JSON data, but PUT and DELETE are fairly common as well. The jQuery.ajax method allows us to specify the HTTP verb that should be used for the request, and we specify this HTTP verb in the object that is passed to the jQuery.ajax method. Note that by default, the jQuery.ajax method will make a GET request, unless we specify a different verb, such as: type=”POST”, for example.

So, in the above example, we specified a success method.
It’s important to note, however, that we did not specify an error method. The reason for this was to make the example code easy to follow. However, it is highly recommended that you always provide an error handler when making any HTTP request. Keep in mind that while you may have full confidence in the requests you are making, HTTP transactions are fragile by nature, and in theory anything can happen. So, whatever you do, don’t overlook this small but important detail.

JavaScript Array.prototype.shift()

Array.prototype

shiftThe JavaScript shift method removes the first element from the array and returns that element.

While it may be tempting to use the Array.prototype.splice() method to remove an element from the beginning of a JavaScript array, believe me, Array.prototype.shift() is the best way to do it. And just as a side note, I’ve always felt that the method name “shift” is a little odd, but that’s what the ECMAScript specification calls for, so we’ll just move along with the good stuff.

So, with the Array.prototype.shift() method, it’s the syntax that’s really important, and the beauty of it is, it’s quite simple. You just chain .shift() onto your array variable name, without passing any arguments. For example: myArray.shift() would remove the first element from the beginning of the “myArray” array. Just keep in mind that the .shift() method returns the element that was removed from the beginning of the array. So, for example, if an array has five elements and the first one is the string “ABC”, calling the .shift() method will return “ABC”, because it has removed that element from the beginning of the array.

Try it yourself !

In the above example, we have the foo array, which has six elements. Each time we call the shift method, the first element of that array is removed. Notice that we show the return value of the shift method in the console. So, we can see that shift returns the element that was returned.

Click the Result tab. Notice how we call the shift method a total of three times. Each time, we show the return of that call to shift: “a”, “b”, and “c”. We also show the length of the foo array each time as well. That length decreases each time we call shift, so the values are 5, 4, and 3. And finally, each time we call shift, we use the console.dir method to inspect foo, so that we can see the changes that are happening to the array with each call to shift.

Video Example Code

If you want to download the example code, visit this page: kcv-array-shift-fiddle

Summary

So, to recap, the ECMAScript specification provides a number of methods on the Array.prototype object that are designed for handling mutations to the beginning and end of an array. But the Array.prototype.shift() method specifically functions to efficiently remove the first element from the beginning of an array. This method takes no arguments and returns the element that was removed from the beginning of the array. Simplicity and efficiency at its best!

How to combine JavaScript arrays

JavaScript

JavaScript logo - concatThe concat method can be used to combine two arrays. This method returns a new array and the original arrays are not changed in any way.

If you’ve never had a need to combine two JavaScript arrays, you can pretty much count on having to, one day. And if you’ve ever entertained thoughts of rolling your own solution to this problem, I’d recommend against it. So now’s a good time to talk about the array.prototype.concat method, which provides a simple way to combine two JavaScript arrays. One thing that’s important to know about the concat method is that it does not change the original arrays. In other words, a new array is created and it will consist of the two specified arrays. But keep in mind that if either array contains one or more objects, those objects are passed by reference in JavaScript. So, even though the original arrays are not changed, if you make a change to any of the objects in the new array, that change will be reflected in the original (source) array.

Try it yourself !

In the above example, click the Result tab. The first call to the concat method is used to combine two arrays: [“a”, “b”, “c”] and [“d”, “e”, “f”]. The result is a new array: [“a”,”b”,”c”,”d”,”e”,”f”]. It is important to note that in both cases, the original array is not changed, which you can see from the second and third console.dir statements. Click the Result tab in order to see the results of each console.dir statement.

We can also pass a single value to the concat method in this way:  myArray1.concat("hello") . When we do that, a new array is returned with the single value we have provided as the last element. The effect is very similar to using the Array push() method. The main difference is that the push() method changes the original array and returns the new length of that array, whereas the concat method does not change the original array and returns a new array . In a similar manner, we can also pass multiple values to the concat method:  myArray1.concat("hello", "goodbye") . This returns a new array with the two values added to the end: [“a”,”b”,”c”,”hello”,”goodbye”].

Summary

So, here you’ve had a look at what a handy tool the array.prototype.concat method is. It not only allows you to combine two JavaScript arrays, it also allows you to add elements to the new array at the same time. But here are two helpful and important things to keep in mind: the original arrays are not changed, and any changes to objects that exist in the new array will be reflected in the original array that it came from.

How do I move DOM elements with jQuery ?

jQuery

jquery-logo - appendToThe jQuery.appendTo method makes it easy to move a DOM element. You won’t need to be concerned with creating or destroying elements and event handlers are preserved.

Moving DOM elements using vanilla JavaScript can be a bit tedious. It’s certainly possible, and it is a good idea to understand the steps, but it does require more code. jQuery provides powerful abstraction for this task, however, and the amount of code needed is minimal.

Whenever possible, I favor using vanilla JavaScript to solve a problem, because leaning on jQuery too much can weaken your overall JavaScript skills. In this case, however, I recommend letting jQuery do all of the work for you. The main issue with vanilla JavaScript when it comes to moving DOM elements is the need to understand the intricacies of the low-level hierarchical DOM API. For example, you’ll need to get ahold of the parent element of the DOM node, after which you’ll want to move your target element. Frankly, I commend anyone who wants to take on this challenge, but in many cases, it just makes sense to leverage jQuery.

Try it yourself !

See the Pen Moving DOM elements with jQuery by Front End Video (@frontendvideo) on CodePen.

In the above example, click the “HTML” tab. There are two DIVs with the IDs: “left-list” and “right-list“. DIV#left-list has an unordered list with the days of the week, and DIV#right-list is empty. Now click the “JS” tab. You’ll see that there is a click-event handler for $('#left-list li'). This means that when any of the list items are clicked, the anonymous function you see will be executed.

Go ahead and click each of the days of the week and you’ll see that it is moved to the DIV#right-list element. After each element is moved, if you click it, nothing happens.

In the anonymous function, we use the JavaScript this keyword to reference the element that was clicked. Actually, we wrap the JavaScript this keyword with jQuery: $(this). We then chain the .appendTo method, and pass it a target element: .appendTo( $('#right-list') ). Here we are telling jQuery: “Move this element to the #right-list element, and make it the last child“. So, we are appending it to DIV#right-list. We then chain this: .unbind('click');. The reason we do that is: the jQuery appendTo method retains any event bindings for elements that are moved. Most of the time, this is probably what you want. But in this case, we do not want the event bindings to travel with the element because once a list item is moved inside of the #right-list element, we no longer want it to have a click-event handler. But that is simply for this example.

Summary

Simply put, moving DOM elements with vanilla JavaScript can be messy business, but the jQuery.appendTo method provides abstraction that simplifies this process. Instead of having to dig into the low-level DOM API, you can simply specify the source and target HTML elements. In other words, you let jQuery know which element you want to move, and which element you want to append it to. In cases such as these, it’s often best to let jQuery do all of the work for you. It will certainly minimize the amount of boilerplate coding you’ll have to do, and will help to keep your JavaScript easier to manage.

JavaScript Array.prototype.join()

Array.prototype

javascript joinThe JavaScript join method converts an array into a string.

Converting an array to a string in JavaScript may seem like an unlikely scenario at first, since they are dissimilar types, but this is not as uncommon as one might think. I’ve found that when I want to build a complex string, organizing the various parts of that string into array elements can be a helpful approach. For example: I have to build many vanilla JavaScript applications that feature custom CSS. The CSS is completely managed by the JavaScript code, but I ultimately inject a new STYLE element into the page, with the custom CSS as the content of that element. In building these custom styles, I organize each CSS rule into a string that is an element of an array. Then, after all of the custom CSS rules are created, I use the join() method to combine all of those array elements into one long string, and make that string the content of the STYLE element that is injected into the page.

At first glance, it may seem a bit odd to use a space, hyphen or forward slash as the separator, but as a developer, you are likely to find yourself in many situations in which the business requirements require you to solve unexpected problems. Converting a number of array elements to a string and separating each element with an odd character will be a challenge you will run into, so be prepared; if it has not happened yet, it will! Fortunately, the Array.prototype.join() provides an elegant solution to this problem.

If you pass no arguments to the JavaScript join method, then there will be no space between the characters of the string. Or, you can pass an argument that determines how to join the elements of the array. Which character(s) you provide is up to you. The most common practice is to use the default, which is a comma (” , “ ), but again, the choice is completely yours.

Try it yourself !

Click the JavaScript tab in the above example. We have an array with six elements: [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’]. When we call the join method on that array in the first console.log statement, it returns the string: “a,b,c,d,e,f”. This is the default behavior. That is to say: when you do not provide a separator argument, the characters in the returned string are separated by a comma  (” , “ ). In the following examples we do provide a separator argument. In each case, you will see that the separator is used to create the returned string.

Video Example Code

If you want to download the example code, visit this Github page, and then follow the instructions: bit.ly/kcv-javascript-array-join-fiddle

Summary

String manipulation in JavaScript can be tedious, as converting an array to a string is a problem that might tempt one to use a for-loop as a solution. But the Array.prototype.join() method was specifically designed to solve this problem, as it negates the need for any kind of for-loop or other iteration patterns. You can simply chain the join() method from your array reference and then pass a character as an argument, which tells the join() method how you want to separate the elements of the array when converting to a string. In the long run, it really is a smooth way to go.

Introduction to the JavaScript Array reduce() method

Array.prototype

JavaScript LogoJavaScript’s Array reduce() method can be a bit confusing. It doesn’t “reduce” any of the array elements, in fact they are not changed. This method “reduces” the array to one value.

An array is essentially a list, and in JavaScript, that list can contain any valid value. Most array-specific tasks involve “doing something” with the array, or you may need to “do something” with every array element. But what if you need to convert the array into one value? In other words, if the array contains a list of values, what one value could represent all of those values? In this article, I’ll explain how the JavaScript Array reduce() method provides a way to solve this problem.

An important concept to think about is how you can translate a list of values into one, that represents all of them. In some languages, all arrays must be “typed”. In other words, every array element must be of the same type. In JavaScript, you’re not limited in this way; a JavaScript array can contain any number of numbers, strings, arrays or any other valid JS value type.

It’s true that Typescript can limit this kind of freedom, but you’re not required to use Typescript and ultimately, Typescript compiles down to JavaScript. So, the reality of dynamic arrays in JavaScript has not changed. Therefore, if you want to reduce all of the values in your array to one, it’s important to consider the type of each element. If all of the elements in your array are of the same type, things are fairly simple. If the types vary, however, that can get complicated. Of course, that discussion is beyond the scope of this article, but I just wanted to point it out.

Using a while-loop – Example # 1

See the Pen Array.prototype.reduce() – Challenge by Kevin Chisholm (@kevinchisholm) on CodePen.

A “while” loop is a valid way to iterate a JavaScript array and that approach has worked for us here. We effectively “reduced” all of the elements of our array to the one value of 79, and we did this by adding each array element to the “getTotal” variable.

When I said that this approach “…has worked for us”, you may notice that I didn’t say that it “…worked well”. This is because the approach we took solved a problem, but created a couple of issues, the main one being boilerplate code. Most of the code in our “while” loop will be repeated if / when we need to solve the same problem elsewhere in our code. In addition to that, we have created an “i” variable to keep track of our counting during our “while” loop. It may seem innocent, but the more variables we create, the more variables we need to manage. Fewer variables is better.

Using the JavaScript Array reduce() method – Example # 2

See the Pen Array.prototype.reduce() – Solution – 1 by Kevin Chisholm (@kevinchisholm) on CodePen.

The Array reduce() method has dramatically simplified things in Example # 2. Notice how, in the getTotal the variable is now an anonymous function. In this function, we add the accumulator and currentValue arguments. Now you may be wondering: “What are the accumulator and currentValue arguments?” Well, take a look at the last line of code: milesPerDay.reduce(getTotal). What’s happening here is, we’re executing the .reduce() method of our “milesPerDay“, passing it the getTotal as an argument. This is the anonymous function that we detailed a few sentences ago.

So, the reduce method iterates the array and provides access to not only the currently iterated value (i.e. the current array element), but also the value that was returned by the previous execution of this function. This allows you to “accumulate” values across the array.

The arguments passed to the JavaScript Array reduce() method –
Example # 3

See the Pen Array.prototype.reduce() – Solution – 2 by Kevin Chisholm (@kevinchisholm) on CodePen.

Example # 3 does not provide any additional value with respect to solving the problem; the solution from Example # 2 is solid. The purpose of Example # 3 is to offer more detail about the arguments that are passed to the function provided to the Array reduce() method.

As demonstrated in the UI, the first argument is the accumulated value that’s being created as you iterate the array (i.e. the value returned by the last execution of this same function). The second argument, “currentValue”, is the value of the current array element. In the third, the index of the current array element is provided, and in the last, we see the array over which you are iterating.

I decided to show the value of the “array” argument to demonstrate that the Array reduce() method does not itself make any changes to the original. You can do that within the function passed to the Array reduce() method, but reduce() itself does not make any such changes. What you choose to do with these arguments is up to you, but just know that they’re helpful in building the logic you need to reduce your array to one final value.

Introduction to the JavaScript Array map() method

Array.prototype

JavaScript LogoJavaScript’s array map() method allows you to “do something” with each element of an array. This has always been possible, but the map() method’s syntax is simple and elegant.

When you have an array, you’ll eventually want to “do something” with it. You may, for example, want to do something with the entire array, such as showing all of its elements in the UI. But what about when you want to “do something” with each element in that array? This poses a bit more of a challenge.

First, you’ll need to iterate the array, which requires some kind of loop. Second, you’ll need to keep track of your iteration process, which requires a counter variable (which requires you to control that variable’s scope). This may seem like no big deal, but it’s work and each time you want to solve the same problem, you’re writing code that’s virtually identical, but not entirely the same, so you start to copy and paste.

This kind of repetitive boilerplate code is tedious, it must be managed, and as repeated code, it becomes a red flag. So, since this kind of coding presents unnecessary problems, what we’ll cover in this article, is how the JavaScript Array map() method solves these issues.

Using a for-loop – Example # 1

See the Pen Array.prototype.map – Challenge – 1 by Kevin Chisholm (@kevinchisholm) on CodePen.

Our first pass at this solution employs a for-loop. As mentioned above, this introduces a few problems. We have the “i” variable, for instance, which in this example is a global. In a real-world situation, however, we would want to put this code in a function so that the “i” variable does not wind up in the global scope. Also, the code in our for-loop is tedious. We need to use the “i” variable to keep track of the currently iterated rawNumbers element. There’s definitely a better way to go about this.

Using the Array map() method – Example # 2

See the Pen JavaScript Array.prototype.find() – Solution 1 by Kevin Chisholm (@kevinchisholm) on CodePen.

In Example # 2, we use the JavaScript Array map() method to solve the problems discussed. We’ve passed an anonymous function to that method, and this anonymous function takes the currently iterated number as its first argument. Inside of our function, we have some simple code that rounds the currently iterated number.

The biggest benefit to using the JavaScript Array map() method is that we no longer have the “i” variable or the for-loop. This is already a major improvement, especially the reduction of code, since it means that it’s simpler and easier to read. These are not minor details, and if this is a task that occurs multiple times in your application, you’ll soon find that the benefit gained by reducing repetitive code will quickly become significant.

Passing a function to the Array map() method – Example # 3

See the Pen Array.prototype.map – Solution – 1 by Kevin Chisholm (@kevinchisholm) on CodePen.

The approach in Example # 3 is similar, but there’s one big difference: instead of passing an anonymous function to the Array map() method, we pass to the Math.round method, which makes our code even easier to read. This is largely because we leave the implementation details to Math.round and eliminate even more code: our anonymous callback function. There are two reasons that we can do this: Math.round takes a number to round as its first argument, just like our anonymous function, and it returns the rounded number, just like our anonymous function. Simplified code is better code and in this case, we have Math.round to thank for that.