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.

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.

jQuery.filter()

jQuery

jquery-logo jQuery can return one, or multiple HTML elements in the matched set. jQuery.filter() reduces the elements in that matched set, based on a criteria that you provide.

Most front-end web developers understand that jQuery literally queries the DOM, and returns a set of elements that match the CSS-like text string that you pass to the jQuery function (AKA: “$()“). But what if you want to further refine that query? Using jQuery.filter(), you can tell jQuery things such as: “Filter out the ODD elements”, or “Filter out the elements that have the word “automobile” in their text”, and so on.

One of the things that makes the jQuery.filter method so powerful, is that you can not only pass a string to it, but also a function. Passing a function allows you to write code that programmatically tells jQuery exactly how  to reduce the matched set. See Examples # 2 and # 3 below for more information about passing a function to the jQuery.filter method.

Example # 1

See the Pen jQuery.filter Basics – Part 1 by Front End Video (@frontendvideo) on CodePen.

In Example # 1, we have an unordered list that contains the seven days of the week. We want to apply some custom styles to only the even elements returned in the query. So, we use jQuery.filter(). We pass the string “:even” to jQuery.filter, which tells this method to return only the even elements (that is, element # 0, element # 2, element # 4, element # 6, and so on). As a result, only the days Monday, Wednesday, Friday and Sunday have the custom style applied. This is because the jQuery.filter method filtered the matched set down to those elements only, and returned a new set of only those elements. We then chained the .css method to that set, and applied the class “styled“, which adds some padding and the background-color: #FFB347.

Example # 2

See the Pen jQuery.filter Basics – Part 2 by Front End Video (@frontendvideo) on CodePen.

In Example # 2, we pass a function to the jQuery.filter method. In this function, we use the JavaScript modulus operator, telling jQuery that we only want every 5th element in the matched set. As a result, every 5th item in our unordered list has the custom styles applied. Don’t be misled by the simplicity of this example. Passing a function to the jQuery.filter method provides a tremendous amount of power. In this case we simply indicated that we wanted every 5th element, but because we are using a function, the code you write in order to filter out the matched set is limitless.

Example # 3

See the Pen jQuery.filter Basics – Part 3 by Front End Video (@frontendvideo) on CodePen.

In Example # 3, we once again pass a function to the jQuery.filter method. In this case, we tell jQuery that we want to reduce the matched set down to only the elements whose text is less than six characters. As a result, only the word in the list with five characters or less have the custom styles applied. Play with the example code yourself. For example, change this: return $(this).text().length < 6; to THIS: return $(this).text().length < 8;. Notice how the number of list items with custom styles changes. This is because you have changed the criteria passed to the jQuery.filter method by changing the code in the function.

Summary

When you query the DOM, When jQuery returns one, or multiple HTML elements in the matched set, so depending on how you organize your code, you may want to further refine that matched set. The jQuery.filter() method allows you to determine how that matched set is further refined, and what makes the jQuery.filter() method so powerful is the fact that the argument you provide can be as simple as a string, or as complex as a function. Passing a string is surprisingly flexible, and passing a function provides exponential power, as you can programmatically determine the result set that the filter will return.

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.

Introduction to the JavaScript Array find() method

Array.prototype

JavaScript - find methodJavaScript’s Array find() method allows you to find the first element that matches logic provided by you.

When you have an array of values, it’s likely that you might need to find an element in that array. In particular, you might want to know which element in this array meets a certain criterion. Well, the criteria are up to you. For example, if your array contains numbers, you may want to know how many of the elements in that array have a value higher than a certain amount. Well, in this article I’ll demonstrate the JavaScript Array find() method, which provides a straightforward way to confront this problem.

Iterating an array usually requires counting. This makes sense, because in order to “do something” with every element in the array, you have to know how many elements are in there (i.e. the array’s “length”). Then you have to keep track as you count up to (or down from) the length of the array. This approach is perfectly valid, but it comes with problems.

The first problem is that setting up a loop of any kind creates boilerplate code, then you need a counter (i.e. “i” or “j”), and finally, you need logic that uses the value of your counter to determine whether or not your target elements have been found. Just discussing this in a “pseudocode” context is tedious, and writing the actual code is even more so. But the JavaScript Array find() method solves this problem, as it removes the need for tedious boilerplate code.

Using a while-loop – Example # 1

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

The tedious boilerplate code we discussed above is exactly what you find in Example # 1. We’re using a while-loop to iterate over the someNumbers array. On each iteration of the loop, we use the value of “i” to examine the currently iterated array element and determine if it meets the criteria for our search. This code is valid and it works, but it’s less than optimal.

Using the Array find() method – Example # 2

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

In Example # 2, we use the Array find() method to eliminate the problems introduced in the previous example. We’ve passed an anonymous function to the Array find() method, and this method takes the currently iterated element as its first argument. Inside of this anonymous function, we provide some logic that determines the currently iterated array element, then we decide whether or not it meets the criteria for our search. The first big benefit here is that we’ve removed the “while” loop. Also, we no longer have the “i” variable. These may seem like small details, but every variable takes up memory, and has scope.

As we know, JavaScript scope is controlled by functions, or blocks. So, for any variable we use, we need to either create a function to control its scope, or carefully initialize that variable in the right function. So the main benefits of the Array find() method are the simplified syntax in which verbose boilerplate code has been removed, and working with our more elegant JavaScript, which is easier to follow.

Introduction to the JavaScript Array filter() method

Array.prototype

JavaScript array filterWith the Array filter() method, you provide a function that returns an array containing the “filtered” elements. It is within this function that you provide the logic that determines how your original array is filtered.

Sometimes you have an array, but want to reduce the number of elements you work with, based on a certain logic. For example, you may have an array with the days of the week, but you only want to work with the days that start with the letter “T”, which means that you only want the elements “Tuesday” and “Thursday”. Well, JavaScript’s Array filter() method provides a simple and elegant interface by which you can solve this problem. In addition to the straightforward syntax, the Array filter() method eliminates the need for boilerplate code such as a for-loop. To further explain, we’ve demonstrated this in the code examples that follow.

Using a for-loop to filter an Array -Example # 1

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

In Example # 1, we use a “while” loop to iterate the word’s array. “While” loops are perfectly valid in JavaScript, but they always make me nervous, because whenever I’ve started to use a “while” loop, I immediately ask myself: “is there a better way to do this?” The main reason is that with a “while” loop, if you’re not careful and your “while” logic is faulty, the loop could theoretically run forever. This is a bit off-topic, but I just like to point out that it’s important to use “while” loops with care.

Back to Example # 1. Inside of the “while” loop, we use the value of “i” to determine if the current word should be pushed to the “shorter” array or the “longer” array. Once this loop has completed, we update the UI to show the number of “shorter” and “longer” words. Again, perfectly valid code, but kind of verbose and less than optimal.

Using the Array filter() method -Example # 2

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

Example # 2 is a major improvement over the previous code. We leverage the Array filter() method to determine the number of “shorter” and “longer” words. There are a couple of areas of improvement here.

First, we’ve removed the need to manually push words to the “shorter” and “longer” arrays, because of the simple syntax of the Array filter() method. Notice that as we create the “shorter” and “longer” arrays, we assign the value by executing the Array filter() method. We provide an anonymous function to the Array filter() method, and the logic is simple: the sole argument passed to that anonymous function is the iterated word, and inside of the function we simply determine if the word’s length is greater than or less than five.

Second, we’ve removed the “while” loop. This is a major improvement, given the fact that it reduces the amount of code, but also since there is no longer any possibility that our code will run forever because of the use of a “while” loop.

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

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

The winsPrize() function approach of Example # 3 differs a bit. Instead of using an anonymous function when executing the Array filter() method, we pass a function declaration. Also, we’ve chained the Array filter() method off of an array literal (in other words: we create the array and then immediately execute the filter method). This is not necessarily a “more correct” approach, it’s just less verbose. The logic of the winsPrize() function is similar to the code in Example # 2. The main difference is that we pass a function declaration instead of an anonymous function.

JavaScript Template Literals – Basics

JavaScript

JavaScript LogoTemplate Literals introduce a new syntax into JavaScript. The backtick character provides a way to have placeholders as well as multi-line text without special characters.

Working with strings is a daily activity for most JavaScript developers. One of the most common challenges is dealing with multi-line text. This is not an unsolvable problem, but it can certainly be painful. In this article, I’ll demonstrate how Template Literals can be used to make working with multi-line text much easier. Also, I’ll demonstrate how to use placeholders with Template Literals.

Double and single quotation marks are the way that we have always worked with strings in JavaScript. Either approach works fine; you just need to be mindful of some restrictions. For example, with valid JSON, all properties must be in double quotes. Also, backslashes must be used to escape double and single quotes, depending on which one is in use. But now we have Template Literals, which introduce a new character: the backtick. When using the backtick, you can include line breaks in your text and they will be respected when your text is rendered. You can also use the newline character: “\n”. When using the newline character, you can “programmatically” insert a new line in your text without literally doing so.

Using HTML to create new lines – Example # 1

See the Pen YeYmNb by Kevin Chisholm (@kevinchisholm) on CodePen.

For Example # 1, we’ve taken the “old school” approach: we have created text using single quotes, and used the BR HTML element to create new lines in our text. When you look at the UI for Example # 1, you see that the new lines were created just as expected. We also use string concatenation to combine the “firstPart“, “endpart” and “author” variables. This is all fine, and I can say I’ve employed this approach thousands of times. The drawback with this, however, is the need to use the BR HTML element to create new lines in our text. It works as long as we actually render the HTML in our browser, but what about a situation in which the text will be rendered in a non-browser context?

Using Template Literals – Example # 2

See the Pen JavaScript Template literals – Solution by Kevin Chisholm (@kevinchisholm) on CodePen.

Well, you’ll notice a dramatic difference in how we do things in Example # 2. Here, we’ve used Template Literals — specifically, the backtick character, to create our string. In doing so, we were able to include line breaks simply by literally using new lines in our text. You may have noticed that I’ve used a textarea HTML element to display the text, because, if I were to use a paragraph element, you wouldn’t see the line breaks. And this is because the paragraph element would simply render all of the text inside of itself. But by using a textarea HTML element, we can see that the line breaks have been preserved.

Now in Example # 2 you’ll see that there’s another new concept in play: the placeholder. On Line # 21, we create the “allText” variable, which contains the combined text contained in the “firstPart“, “endpart” and “author” variables. But instead of using string concatenation (as we did in the previous example), we use placeholders. The placeholder syntax is simple: you use a dollar sign and curly braces. Inside the curly braces, you can insert any valid JavaScript expression, which will be evaluated. In our example, we use this placeholder syntax to combine the “firstPart“, “endpart” and “author” variables.

Using the New Line Character – Example # 3

See the Pen JavaScript Template literals – Solution 2 by Kevin Chisholm (@kevinchisholm) on CodePen.

Example # 3 is identical to the previous one, with one exception: we use the newline character instead of literal new lines. The output here is exactly the same, but the method for creating the string is different. This is not necessarily a “better” or “more correct” way of doing things; it’s simply an alternative way to create new lines in your string literal. The advantage here, of course, is that the new lines are created programmatically. For example, if you had a function that generated this string, based on some dynamic logic, you might want to include a single line break or double line break, depending on the logic. The newline character makes this kind of task much easier.

JavaScript Object Literal Shorthand Syntax Basics

JavaScript

JavaScript object literal shorthand syntaxJavaScript Object Literal Shorthand Syntax is a feature that provides a path to cleanerJavaScript. Not only does it provide a way to reduce the size of your code, but it will be easier to read and understand.

Many ECMAScript 2015 features provide improved ways to solve problems. Object literal shorthand syntax is a bit unique in that it’s not so much a shiny new tool, but an improved syntax. Now it might be tempting to dismiss this kind of feature as less-than-stellar, but it’s worth working into your routine for a number of reasons. For example, an improved syntax can lead to less code, and not only that, the code you write can be easier to understand. And believe me, those who inherit your code will thank you for this. So, in this article, I’ll explain how to use object literal shorthand syntax when defining properties and methods.

Typical Object Literal Syntax – Example # 1

See the Pen JavaScript Object Literal Shorthand Syntax – Challenge by Kevin Chisholm (@kevinchisholm) on CodePen.

Let’s start with the way we’re used to working with object literals. In Example # 1 we have a getGoods() method that returns an object. The value argument is used on execution to set the value property, and the lowerValue() and raiseValue() methods lower and raise that value property. So this is all fine and everything works exactly as expected. In fact, if you look at the UI, the text that you see shows that our methods set and value property accordingly. Unlike many of the examples in this blog, there is nothing to “fix” here. Our code works fine and follows a typical syntax pattern because, as stated, I mainly wanted to establish that this is the way we normally work with object literals.

Object Literal Shorthand Syntax -Example # 2

See the Pen JavaScript Object Literal Shorthand Syntax – Solution by Kevin Chisholm (@kevinchisholm) on CodePen.

Now, in Example # 2 we do things quite differently. To start, look at Line # 3. When we set the value property, there is no colon; we simply assign the value of the “value” argument that was provided when the function was executed. This syntax is concise, thereby requiring you to write less code. Now it may seem like a very small savings here, but when you have an application with many thousands of lines of code, the savings quickly add up.

Okay, so next, look at where we define the lowerValue() and raiseValue() methods. Here, notice two things are missing: there is no colon, and we don’t need the function keyword. We simply provide the parentheses and the curly braces (as well as the code inside the curly braces). Here, too, the savings may seem small on a per-line basis, but in a large application, the difference will be dramatic. And the additional benefit, especially when defining methods, is that the code is a bit easier to read.