Range-based For Loops in C++11 – Basics and its usage on STL containers

Trying to understand the power of range-based for loops in C++11.
Range-based for loops is arguably one of the most powerful features of C++11. It introduces a shorter syntax for iterating through the elements of a container (C-arrays, std::vector, std::list, std::map, etc.). This feature was already included for many years in other similar-to-C++ static typed languages, such as, Java and C#, etc. and now it has found its place in C++…. which is great, because C++ programmers were tired of using the (very) old syntax for iterating through the elements of a container.
In this post, I’m going to show you its usage and how it makes the syntax easier to read and makes your code look modern.

Range-based For Loops in C++11 – Basics and its usage on STL containers

Below is its usage on STL containers:

You can compile it with g++ and run the program as follows (assuming the file is saved as main.cpp):

Running the program prints following to the console:

It executes a loop over a range. Here, we are inferring the type of elements in our “number” container (int in this case) using “auto“. Its equivalent in the previous versions of C++ (i.e., C++03) would look like the following:

Or using iterators, it would look like the following:

It can be used to iterate through the elements in C-arrays as well.

The same syntax can be used for similar-to-vector containers like std::list, std::deque, etc.

Changing the values in a container

You can use the reference to change the values in a container:

Using range-based for loop with std::map

You can use range-based for loops with std::map as well.

It is a good practice to make the parameter in the loop a reference for efficiency. You could also consider making it const if you want a read-only view of the values.

How to use lambda expression in std::find_if (C++)

Lambda function / expression is a nice feature of C++11. It enables a programmer — which means you — to define and use a function inline; that is, you don’t need to define your function in outer scope.

This feature greatly reduces the need to redundantly define functions; you can define a function in a place where you want to, in the same scope!

In this post, I will tell you how you can use its amazing power to find elements in an STL container (std::vector, std::list, etc.) according to some rules which would be set through lambda functions. Below is the example of “IsOdd” logic, which is originally found here:

Here, you can see that I’ve used a normal function to define a logic or criteria for finding elements in a container. We will now use lambda expression instead:

Both of the above programs do the same job, however, in the second program, we didn’t have to define a function of such a simple logic outside the main scope, thus shortening our code.

Conclusion

In this tutorial, I have showed you the ways to use lambda expression with std::find_if function for manipulating STL containers.
Do you have any questions regarding this tutorial? Tell me in the comments section! Also like our page on Facebook.

div vs span (HTML) – What’s the difference?

Beginners learning the HTML and web designing / development often ask the difference between these two HTML tags, especially if they are learning by looking at the HTML code, as they both seem to do the same job of defining a section of HTML code as a class or an ID, which can later be styled using CSS (Hint: CSS is used for the presentation of HTML code).

Here, in this tutrorial, I will tell you the differences between them and which is appropriate for different cases.

div vs span (HTML) – What’s the difference?

div – Document Division Element

<div> tag is used for defining a division or a section in an HTML page as a class or an ID, which then can be formatted / styled with CSS. It divides the page into a section! Consider the following example:

Here, we have defined a class “green-section” with <div> tag. The defined class “green-section” was earlier styled within <style> tag to change the text color to green. Thus, you can see that we used <div> tag to define a paragraph as the one with green text.

Through it, we can separate different sections of a website. For instance, you can define left / right widgets section in your blog with <div>, change the size of widgets, etc. It is generally used with block-level content.

Note that <div> creates a line around the section, so you don’t need to use <p> for the text. Following is its default CSS value:

span – Inline Element

It is used for defining an inline element within a section (i.e., <div> enclosed text, etc.) as a class or an ID. It is used for spanning the element!

Continuing from the previous example, we will now add a <span> tag to define a new element within the <div> defined section to change our text color to blue:

Here you can see that I’ve added a <span> tag to define a new class “blue-text” for changing the text color to blue through CSS. <span> doesn’t create a line around the element, so it is suitable for defining a sub-section of a section. It is normally used to change the property of some text in a paragraph to make it prominent. Infolinks script changes the contextual text to ads through span element.

Note that both <div> and <span> should be used in the places where normal tags (<em>, <strong>, etc.) are not enough. Overusing them can result in an ugly and hard-to-manage code.

Following is the stand-alone example of HTML which you can copy / paste into your text editor, save it to index.html and then open the file in your browser to see its usage:

Conclusion

In this tutorial, I have showed you the difference between these two tags and its appropriate use.
If you have any question regarding these tags or HTML, then why not leave comments in the comments section below so that I can make you happy?