addEventListener – Introduction to Native JavaScript Event Handlers

JavaScript

JavaScript addEventListenerAll JavaScript libraries and frameworks provide abstraction for event handlers. But it is important to know how how the addEventListener method works and how to use it

In this article, you will learn about the JavaScript addEventListener method. This isn’t an in-depth discussion but a way for you to get started using this method. Continue reading “addEventListener – Introduction to Native JavaScript Event Handlers”

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.

jQuery fadeOut (advanced)

jQuery

fadeoutThe jQuery fadeOut method can take multiple arguments. You can set the duration, easing and also provide a completion callback

Hiding DOM elements is certainly a common task for any front-end
web developer, and the jQuery.fadeOut() method allows you to not only hide an element, but it allows you to animate this action as well. Now, while fading out can elevate the user experience, it would be nice for the web developer to have some control over that. Well, fortunately, the jQuery.fadeOut() method provides just that. With some advanced features that allow you to determine the duration of the animation and the easing effect, it controls the “feel” of that animation. In other words, we don’t just want to move an object from point A to point B; we want that motion to mimic the way objects move in the real world. We can also pass a callback function to the jQuery.fadeOut() method that allows us to act upon the successful completion of the fading out of that DOM element. Now, while you may not always need to take advantage of this feature, it certainly is pretty important to know about it. The thing is, the ability to reliably act upon the successful completion of an animation is a business requirement that comes up more often than many may think.

There is somewhat of a fuzzy line between the jQuery hide, fadeOut and animate methods. At the end of the day, they all leverage jQuery animation. With the fadeOut method, if you pass no arguments, then the matched elements are faded-out with a duration of 800ms(0.8 seconds). But if you want to gradually fade-out the elements, then you can specify a custom duration, the easing and a callback for when the fadeOut method completes.

Try it yourself !

In above example, click the button labeled: “Fade the paragraph out”. You will notice that the paragraph fades out slowly. The second button simply refreshes the page so that the example can easily be run over and over.

Now click the HTML tab. You’ll see an embedded stylesheet (the style element). There we define the .done class which states that any element with that class has a green background and white text. When  you run the example code, you’ll notice that after the animation completes, the button changes to green background with white text.

Now click the JavaScript tab. There is a click event handler for the element: button#fadeOut. When that button is clicked, the jQuery fadeOut method is called on every paragraph element in the page (in this case, there is just one).

Notice how there are three arguments passed to the jQuery fadeOut method . The first argument is the duration property, which is set to: 2000. This means that the fading-out of the paragraph should last 2000 milliseconds, or two seconds. The second argument: “swing”, is for the easing. It makes the animation a bit more lifelike. The third argument is a function. This callback function will be executed when the fade-out completes. Inside of that function, we change the text of the button to “Fade-out complete!”. Also, we add the class “done”.

jQuery fadeIn (advanced)

jQuery

fadeinThe jQuery fadeIn method can take multiple arguments. You can set the duration, easing and also provide a completion callback, which allows you to execute tasks which rely on the completion of your fade-in animation.

There is somewhat of a fuzzy line between the jQuery show, fade-in and animate methods. At the end of the day, they all leverage jQuery animation. With the fadeIn method, if you pass no arguments, then the matched elements are faded-in with a duration of 800ms (0.8 seconds). But if you want to gradually fade-in the elements, then you can specify a custom duration, the easing and a callback for when the fadeIn method completes.

Try it yourself ! – Example # 1

In above example, click the button labeled: “Fade the paragraph in”. You will notice that the paragraph fades in slowly. Now click the HTML tab. The paragraph element has its style attribute set to: “display: none;”. This is the reason that that the paragraph is not visible when the page loads. Now click the JavaScript tab. There is a click event handler for the element: button#fadeIn. When that button is clicked, the jQuery fadeIn method is called on every paragraph element in the page (in this case, there is just one).

PARAGRAPH – A

Try it yourself ! – Example # 2

Notice how there are three arguments passed to the jQuery fadeIn method . The first argument is the duration property, which is set to: 2000. This means that the fading-in of the paragraph should last 2000 milliseconds, or two seconds. The second argument: “swing”, is for the easing. It makes the animation a bit more lifelike. The third argument is a function. This callback function will be executed when the fade-in completes. Inside of that function, we change the text of the paragraph to “Fade-in complete!”. Also, we add the class “done”. If  you click the HTML tab again, you’ll see an embedded stylesheet (the style element). There we define the .done class which states that any element with that class has a green background and white text. When  you run the example code, you’ll notice that after the animation completes, the paragraph changes to green background with white text.

jQuery show (advanced)

jQuery

jqueryshowThe jQuery show method can take an object as an argument. In that argument, you define one or more properties that give jQuery more detail on how you want the matched elements to become shown

There is somewhat of a fuzzy line between the jQuery show, fade-in and animate methods. At the end of the day, they all leverage jQuery animation. With the show method, if you pass no arguments, then the matched elements are immediately shown. But if you want to gradually show the elements, then you can provide an object that gives configuration details.

Try it yourself !

In above example, click the button labeled: “Show the paragraph”. You will notice that the paragraph fades in slowly. Now click the HTML tab. The paragraph element has its style attribute set to: “display: none;”. This is the reason that that the paragraph is not visible when the page loads. Now click the JavaScript tab. There is a click event handler for the element: button#show. When that button is clicked, the jQuery show method is called on every paragraph element in the page (in this case, there is just one).

Notice how there is an object passed to the jQuery show method. That object provides details on how we want the paragraph element to be shown. The duration property is set to: 2000. This means that the showing of the paragraph should last 2000 milliseconds, or two seconds. The complete property is a function. This callback function will be executed when the animation is complete. Inside of that function, we change the text of the button to “Animation complete!”. Also, we add the class “done”. If  you click the HTML tab again, you’ll see an embedded stylesheet (the style element). There we define the .done class which states that any element with that class has a green background and white text. When  you run the example code, you’ll notice that after the animation completes, the button changes to green background with white text.

jQuery.off()

jQuery

jquery offWith the the jQuery off method, you can unbind handlers for one or more events, for each matched element.

Most of the time, front-end web developers are concerned with binding event handlers — that is, defining a JavaScript function that will be executed when an event occurs. An event can be a mouse click, a hover, a scroll, or just about any other action that a user takes on the page. And it goes without saying that jQuery makes event binding easy. But what about when you want to remove an event binding? There may be cases in which, for whatever reason, you no longer want your event handler function to be executed. This does happen.

Well, a typical scenario might be when a user is not authenticated, in which case you may want to prevent the user from taking certain actions. Or, perhaps you have a business requirement that involves displaying an advertisement after the user has advanced a slide-show a certain number of times. Well, part of that requirement might be that the ad has to show for at least 10 seconds, and during those ten seconds, you do not want the user to be able to click the “back” or “next” buttons in the slide show.

The jQuery.off() method allows you to remove an event handler that was bound using the jQuery.on() method. The syntax requires that you pass a string as the first argument, and that string that you pass to the jQuery.off() method specifies the event that you want to unbind. For example, you may have bound event handlers for both the “click” and “dblclick” events and you may only want to unbind the “click” event handler but leave the “dblclick” event handler intact. But just remember: you can only unbind event handlers that are managed with jQuery.

Try It Yourself!

In the above example, there are three paragraph elements. Click each one. When you do, you’ll see the text change to: “I was clicked”. Next, click the “Refresh” button so that the page reloads. Now click any of the paragraphs. You’ll notice that the text no longer changes as you click each one.

Click the JavaScript tab. You’ll see that there is a click-event handler for each paragraph. This changes the text to “I was clicked” when a paragraph is clicked. There is also a click-event handler for the first button. When that button is clicked, the jQuery off method is called against every paragraph in the page. This unbinds every click event handler. Thus, when you click any paragraph, the text no longer changes.

Video Example Code

If you want to download the example code, visit this Github page, and then follow the instructions: bit.ly/FEV-jq-off

Summary

While jQuery makes event binding simple, that is also the case when you need to unbind one. The jQuery.off() method is used to remove an event handler from one or more HTML elements. So, when you pass a string as the first argument, you simply let jQuery know which event you wish to unbind. The one restriction of the jQuery.off() method is that it can only be used with event handlers that are managed with jQuery.

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.