<h2 id="introduction">Introduction</h2>
Among the many tasks you may encounter when manipulating strings in Python, one common requirement is to remove certain characters from a string – in this case, commas. Commas can be found in numerous contexts, like CSV files or number representations, and while they serve a useful purpose, there are instances where they can be inconvenient.
<blockquote>
In this article, we'll explore three effective solutions for removing commas from a string in Python - the <code>replace()</code> method , the combination of <code>translate()</code> and <code>maketrans()</code> methods, and regular expressions. We will walk through code examples for each, discuss their merits, and consider advanced use cases.
</blockquote>
<h2 id="solution1usingthereplacemethod">Solution #1: Using the replace() Method</h2>
Python's built-in string method <code>replace()</code> is an easy-to-use function for removing characters from a string. The <code>replace()</code> method replaces a specified phrase with another specified phrase, and it's a perfect fit for our problem:
<pre><code class="hljs"># Given string
s = &quot;H,e,l,l,o, W,o,r,l,d&quot;
# Removing commas from the string
s = s.replace(&quot;,&quot;, &quot;&quot;)
print(s)
</code></pre>
Which will result in:
<pre><code class="hljs">Hello World
</code></pre>
In the code above, we called the <code>replace()</code> method on the string <code>s</code>. The method takes two arguments - the character to be replaced (a comma in our case) and the character to replace it with (an empty string, as we want to remove the commas).

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The <code>replace()</code> method doesn't change the original string. Instead, it returns a new string. Hence, we reassign the new string to <code>s</code>.

 </div>
 </div>
 </div>
 While the <code>replace()</code> method is a simple and straightforward approach, it works well only when the pattern is known and simple. It doesn't provide much flexibility for complex cases, which we'll cover in the later solutions.
<h2 id="solution2usingthetranslateandmaketransmethods">Solution #2: Using the translate() and maketrans() Methods</h2>
Python's built-in string methods <code>translate()</code> and <code>maketrans()</code> offer another way to remove characters from a string. The <code>maketrans()</code> method returns a translation table that can be used with the <code>translate()</code> method to replace specified characters.
Let's use the same string as before as an illustration:
<pre><code class="hljs"># Given string
s = &quot;H,e,l,l,o, W,o,r,l,d&quot;
</code></pre>
To replace all commas from <code>s</code>, we first need to call the <code>maketrans()</code> method on the string <code>s</code>:
<pre><code class="hljs"># Creating translation table
table = s.maketrans(&quot;,&quot;, &quot;&quot;)
</code></pre>
This method takes two arguments - the list of characters to be replaced and the list of characters to replace them with. Here, we're replacing commas with nothing, hence the empty string as the second argument. The <code>maketrans()</code> method returns a translation table.
Next, we call the <code>translate()</code> method on the string <code>s</code>, passing the translation table as an argument. This method uses the table to replace the specified characters in the string:
<pre><code class="hljs"># Removing commas from the string
s = s.translate(table)
</code></pre>
In the end, our code should look something like this:
<pre><code class="hljs"># Given string
s = &quot;H,e,l,l,o, W,o,r,l,d&quot;
# Creating translation table
table = s.maketrans(&quot;,&quot;, &quot;&quot;)
# Removing commas from the string
s = s.translate(table)
print(s)
</code></pre>
Which will give us:
<pre><code class="hljs">Hello World
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Just like <code>replace()</code>, the <code>translate()</code> method doesn't modify the original string - it returns a new string. Therefore, we reassign the new string to <code>s</code>.

 </div>
 </div>
 </div>
 This method provides more flexibility than <code>replace()</code> as it allows for simultaneous multiple-character translations, which is useful in more complex scenarios. However, for the simple task of removing a single known character, it might be overkill.
<h2 id="solution3usingregularexpressionsremodule">Solution #3: Using Regular Expressions (re Module)</h2>
Python's built-in <code>re</code> module allows for more flexible string manipulation using regular expressions, which are special text strings for describing a search pattern. This flexibility is particularly helpful in more complex scenarios.

 <div class="alert alert-reference">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-link-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Advice: You can find more about Python regular expressions in our <a href="https://stackabuse.com/introduction-to-regular-expressions-in-python/" target="_blank">&quot;Introduction to Regular Expressions in Python&quot;</a>.

 </div>
 </div>
 </div>
 Here's a simple example of how to use the <code>re</code> module to remove commas from a string:
<pre><code class="hljs">import re

# Given string
s = &quot;H,e,l,l,o, W,o,r,l,d&quot;
# Removing commas from the string
s = re.sub(&quot;,&quot;, &quot;&quot;, s)
print(s)
</code></pre>
Output:
<pre><code class="hljs">Hello World
</code></pre>
In the code above, we first import the <code>re</code> module. We then call the <code>re.sub()</code> function, which replaces the occurrences of a particular pattern in a string with a specified replacement. In this case, we're replacing commas with nothing, hence the empty string as the second argument.
Just like <code>replace()</code> and <code>translate()</code>, the <code>re.sub()</code> function doesn't modify the original string; it returns a new string, which we reassign to <code>s</code>.
While regular expressions can handle complex cases and provide a lot of flexibility, they can also be overkill for simple tasks like removing a single character from a string. Additionally, regular expressions can be difficult to read and understand for those unfamiliar with their syntax.
<h2 id="whichsolutiontochoose">Which Solution to Choose</h2>
All three solutions we discussed can effectively remove commas from a string. However, their suitability depends on the complexity of the task at hand and the specific requirements of your use case.
The <code>replace()</code> method is straightforward and easy to use for simple replacements. It's ideal when the pattern you want to replace is known and simple. However, it offers less flexibility when dealing with more complex cases or multiple simultaneous replacements.
On the other hand, the combination of <code>translate()</code> and <code>maketrans()</code> methods provide more flexibility by allowing for simultaneous multiple-character translations. It's useful when you have a set of characters that need to be replaced. However, for simple task of removing a single character, it's smarter to stick to simpler solutions.
Regular Expressions (<code>re</code> module) provide the most flexibility and are capable of handling complex scenarios. They are perfect when the pattern you want to replace is complex. However, they usually demand some prior knowledge to effectively use them.
In terms of performance, for large strings and simple replacements, <code>translate()</code> tends to be faster than <code>replace()</code>, and both are generally faster than regular expressions. However, the difference is often negligible for small strings or single operations.
<h2 id="advancedconsiderations">Advanced Considerations</h2>
While the three methods we've discussed are effective for general cases, you might encounter situations that require more nuanced handling. Let's take a look at a couple of them.
<h3 id="removingcommasfromspecificpartsofastring">Removing Commas from Specific Parts of a String</h3>
There might be cases where you only want to remove commas from certain parts of a string. In these situations, you can combine string slicing with our methods. For instance, you might only remove commas from the first half of a string, leaving the second half untouched:
<pre><code class="hljs"># Given string
s = &quot;H,e,l,l,o, W,o,r,l,d&quot;
# Remove commas from first half of the string only
first_half = s[:len(s)//2].replace(&quot;,&quot;, &quot;&quot;)
second_half = s[len(s)//2:]
s = first_half + second_half
print(s)
</code></pre>
This will result in:
<pre><code class="hljs">Hello W,o,r,l,d
</code></pre>

 <div class="alert alert-reference">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-link-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Advice: You can find a more in-depth overview of the slice notation in our article <a href="https://stackabuse.com/python-slice-notation-on-string/" target="_blank">&quot;Python: Slice Notation on String&quot;</a>.

 </div>
 </div>
 </div>
 <h3 id="handlingstringswithmultipledifferentunwantedcharacters">Handling Strings with Multiple Different Unwanted Characters</h3>
If your string contains multiple different unwanted characters, you might need to remove them all. With <code>replace()</code>, you would need to chain multiple calls, which might not be efficient. In these cases, the <code>translate()</code> function or regular expressions might be more suitable, as they can handle multiple characters at once:
<pre><code class="hljs"># Given string with commas and exclamation marks
s = &quot;H,e,l,l,o, W,o,r,l,d!&quot;
# Remove both commas and exclamation marks using translate() and maketrans()
table = s.maketrans(&quot;,!&quot;, &quot;&quot;)
s = s.translate(table)
print(s)
</code></pre>
These are just a few examples of more complex cases you might encounter. Always consider the specific requirements of your use case when choosing your approach.
<h2 id="conclusion">Conclusion</h2>
Python's powerful string manipulation capabilities provide a variety of methods for removing characters from strings, including the <code>replace()</code> method, the <code>translate()</code> and<code> maketrans()</code> functions, and the regular expressions module. As always, the best choice among these methods depends on the complexity of your use case, the size of your strings, and your personal comfort with the syntax of each method.
For simple replacements in small strings, the <code>replace()</code> method is generally the easiest to use and understand. For more complex replacements or multiple-character translations, the <code>translate()</code> and <code>maketrans()</code> methods offer a balance of power and readability. If you're dealing with complex patterns or need the utmost in flexibility, regular expressions are a powerful tool, albeit with a slightly steeper learning curve.

Scott Robinson

Dimitrije Stamenic

How to Remove Commas from a String in Python

<h2 id="introduction">Introduction</h2>
In the world of data engineering, the unpredictability of task failures is a constant challenge. Amid the multitude of tasks we handle, a few might not go as planned for various reasons. However, it's not the end of the world, thanks to the retry mechanism provided by Apache Airflow. The ability to efficiently manage retries and handle failures can significantly boost the resilience of our workflows.
<h2 id="understandingairflowtaskfailurescommonreasons">Understanding Airflow Task Failures: Common Reasons</h2>
To delve into task failures in Apache Airflow, it's important to understand their roots and potential causes. Failures can occur due to a range of issues, each warranting attention to ensure robust and reliable data pipelines.
<ol>
<li>Database Connection Issues: The task may need to interact with a database, but connection issues can arise. This could be due to network problems, firewall restrictions, or the database server being temporarily unavailable. For instance, the server might be down for maintenance or overloaded with requests.</li>
<li>Data Availability Problems: A task could fail if the data it needs is not available. For example, an ETL job might fail if the expected data file is not found in a specified location, or a data processing task could fail if it receives null values where it expects valid data.</li>
<li>Code Errors: If there are bugs in the code of the tasks or in the functions they call, these can lead to task failures. These might be syntactic errors, type mismatches, or logical errors that cause the task to behave differently than expected.</li>
<li>Resource Constraints: System-level issues, such as insufficient memory or CPU, can cause tasks to fail. For example, a data processing task might require more memory than is available, or there might be too many tasks running concurrently for the CPU to handle.</li>
<li>Third-Party API Failures: If a task relies on a third-party API, any failure of that API can cause the task to fail. The API might be down, or there might be authentication issues.</li>
<li>Configuration Issues: Incorrect configurations or environment variables can lead to task failures. For example, if the path to a crucial file is wrongly configured, or if a necessary environment variable is not set or is incorrectly set, a task could fail.</li>
<li>Task Timeouts: Each task in Airflow has a specific duration within which it should ideally complete. If a task takes longer than this specified duration, it can result in a task failure.</li>
</ol>
For each of these potential issues, there exist strategies for detection, prevention, and resolution. The first step, however, is being aware of these possible causes of task failure. As data engineers, we need to take these factors into consideration when designing and implementing our data workflows, leading to more robust and resilient systems.
<h2 id="retriesinairflowunderstandingandconfiguring">Retries in Airflow: Understanding and Configuring</h2>
Data engineering is fraught with challenges, but its foundation is resiliency. When tasks fail, the principle of retries — simply starting again — can be instrumental in preserving the stability of your data operations. This section explores the concept of retries in Apache Airflow, describing how to configure them and demonstrating their application with code examples.
<h3 id="fundamentalsofretries">Fundamentals of Retries</h3>
In the simplest terms, a retry in Airflow occurs when a task execution fails, and the system attempts to execute the task again. This strategy is powerful for managing transient failures, such as temporary network disruptions or third-party service downtime. Retries are not a solution for addressing errors in the task logic itself; they provide resilience against temporary external issues.
<h3 id="configuringretriesinairflow">Configuring Retries in Airflow</h3>
Airflow's flexibility comes into play when configuring retries. Each task in Airflow can be assigned specific retry parameters, including:
<ol>
<li>
<code>retries</code>: This parameter controls the number of times Airflow will attempt to run the task again after a failure. The value can be set to an integer.
</li>
<li>
<code>retry_delay</code>: This parameter specifies the time delay between retries as a timedelta object. This delay is the period that Airflow will wait after a task fails before it tries to execute it again.
</li>
<li>
<code>retry_exponential_backoff</code>: When set to True, this parameter enables the exponential backoff algorithm for retries. The delay between retries will increase (doubling) after each retry. This can be advantageous if you expect external factors may occasionally cause failures.
</li>
<li>
<code>max_retry_delay</code>: This parameter sets the maximum time delay between retries that the exponential backoff algorithm can reach. It is used in conjunction with <code>retry_exponential_backoff</code>.
</li>
</ol>
Here's how to configure these parameters in a <code>PythonOperator</code> task:
<pre><code class="hljs">from datetime import timedelta
from airflow.operators.python_operator import PythonOperator

default_args = {
 &#x27;retries&#x27;: 5,
 &#x27;retry_delay&#x27;: timedelta(minutes=5),
 &#x27;retry_exponential_backoff&#x27;: True,
 &#x27;max_retry_delay&#x27;: timedelta(minutes=10),
}

transform_data_task = PythonOperator(
 task_id=&#x27;transform_data&#x27;,
 python_callable=transform_data,
 default_args=default_args,
 dag=dag,
)
</code></pre>
In this example, <code>transform_data_task</code> is set to retry five times if it fails, with an initial delay of five minutes between retries. If a task continues to fail, the delay will increase exponentially due to the <code>retry_exponential_backoff</code> parameter, but it will not exceed ten minutes (<code>max_retry_delay</code>).
By carefully tuning these parameters, data engineers can make their Airflow workflows much more resilient and reliable, ensuring smooth and efficient data operations.
<h2 id="handlingtaskfailurestechniquesandpracticalexamples">Handling Task Failures: Techniques and Practical Examples</h2>
In real-world scenarios of data engineering, it's not enough to merely understand task failures. We also need to effectively manage these incidents and ensure the resilience of our data pipelines. Apache Airflow provides us with multiple tools and techniques to handle task failures effectively.
<h3 id="onfailurecallbacks">On Failure Callbacks</h3>
One of the most powerful tools Airflow provides for handling task failures is the <code>on_failure_callback</code> parameter. This parameter allows you to define a function that will be called when a task fails.
The callback function can be used to send notifications about the failure or trigger corrective actions. Here's an example of a <code>PythonOperator</code> task with an <code>on_failure_callback</code>:
<pre><code class="hljs">from airflow.operators.python_operator import PythonOperator
from custom_notifications import send_email_notification

def failure_email(context):
 send_email_notification(context[&#x27;task_instance&#x27;])

extract_data_task = PythonOperator(
 task_id=&#x27;extract_data&#x27;,
 python_callable=extract_from_api,
 on_failure_callback=failure_email,
 dag=dag,
)
</code></pre>
In this example, if <code>extract_data_task</code> fails during execution, the <code>failure_email</code> function will be called with the context dictionary as an argument. The context dictionary contains various details about the failed task, such as its ID, execution date, and state.
<h3 id="managingtaskfailureswithtriggerrules">Managing Task Failures with Trigger Rules</h3>
Another powerful technique for managing task failures in Airflow is the use of trigger rules. By default, a task in Airflow will only run if all its upstream tasks have succeeded. However, you can change this behavior by setting a task's <code>trigger_rule</code> parameter.
The <code>trigger_rule</code> parameter can take several different values, such as 'all_success', 'all_failed', 'one_success', 'one_failed', and 'none_failed', etc. These trigger rules allow you to specify under which conditions a task should be executed, providing flexibility in managing dependencies between tasks.
Here's an example of a <code>PythonOperator</code> task with a custom trigger rule:
<pre><code class="hljs">from airflow.operators.python_operator import PythonOperator

load_data_task = PythonOperator(
 task_id=&#x27;load_data&#x27;,
 python_callable=load_to_db,
 trigger_rule=&#x27;one_failed&#x27;,
 dag=dag,
)
</code></pre>
In this example, <code>load_data_task</code> will execute if at least one of its upstream tasks has failed. This can be useful in scenarios where you want to trigger certain tasks only when something goes wrong in your data pipeline.
Remember, understanding and effectively handling task failures in Airflow can significantly improve the resilience and reliability of your data pipelines. With the appropriate use of callbacks and trigger rules, you can maintain robust data workflows capable of handling the inevitable hiccups that come with managing complex data processes.
<h2 id="conclusion">Conclusion</h2>
In the dynamic realm of data engineering, resilience and agility are crucial. <a href="https://airflow.apache.org/" target="_blank" rel="noopener noreferrer">Apache Airflow</a>, with its built-in capabilities for managing task retries and resolving errors, stands as a solid choice for ensuring robustness in data operations.
Understanding the idea behind these features is just as important as learning the nuts and bolts of how they work. It is about accepting the inevitability of failures in any complex system and developing the mindset to plan for these disruptions rather than simply responding to them.
The concept of retries is essentially a testament to the principle of resilience in the face of adversity. It is about not giving up at the first indication of failure, but persevering through difficulties and giving our tasks a chance to succeed, even after an initial setback.
On the other hand, the ability to successfully handle task failures provides us with the tools we need to maintain control over our data operations even when things go wrong. The <code>on_failure_callback</code> parameter allows us to specify our response to a task failure, such as issuing a notification, documenting the issue, or initiating corrective steps.
Meanwhile, altering task execution behavior with trigger rules allows us to orchestrate complex dependencies and manage unusual situations in our data pipelines.
By using these features effectively, we can create a more robust and efficient Airflow system where jobs are given a fair opportunity to succeed, and potential disruptions are addressed proactively. It's about designing a system that not only survives but thrives in the face of mission failures.
Lastly, understanding retries and failure handling in Airflow can lead us to achieve the highest level of dependability and resilience in our data engineering workflows, enabling us to provide consistent value from our data even when facing challenges and difficulties.

Jakub Dąbkowski

Handling Task Failures in Airflow: A Practical Guide

<h2 id="introduction">Introduction</h2>
Whether you realize it or not, data has become a crucial part of our day-to-day lives. From ordering food online to searching for cat food, we are constantly sending and receiving data. As developers of web applications, it is our responsibility to ensure that user inputs are in the specified format so that the database understands the data correctly, and the application remains robust.
Phone number validation is important because it ensures that data is saved in a consistent format throughout the database. For instance, users might need clarification on whether they should input the country code before their phone number. With proper validation in place, users can easily determine if it is required. Similarly, the user experience improves with a consistent format, as you know what to expect from users and can implement logic accordingly. It would be a poor experience for users if the code breaks at a later stage due to inconsistent data.
Regular expressions are powerful tools for pattern matching. They provide the flexibility to match patterns of various types, depending on your use case. Additionally, regular expressions are language-agnostic, making your validation logic more portable, as you can easily integrate the core validation. Working with regex in JavaScript is a straightforward task.
This article will help you understand how to use the power of regular expressions to validate phone numbers for your application. You will write a simple JavaScript function to validate phone numbers with country codes.
<h2 id="whatisaregularexpression">What Is a Regular Expression?</h2>
In simple terms, a regular expression matches a predefined pattern in a given string. It is widely used in programming languages and primarily employed for validating inputs of a specific format. Furthermore, regular expressions are commonly used for searching, splitting, and substituting specified patterns.
Let's say you want to find an email address in a document. The email address could be any address, not a specific one. Writing a simple expression will help you find the pattern quickly since you already know the structure of an email address.
A regular expression uses special characters to denote different types of patterns. For example:
<ul>
<li><code>.</code> (dot) is a special character that can match any character.</li>
<li><code>*</code> (asterisk) matches the preceding character 0 or more times.</li>
<li><code>+</code> (plus) matches the preceding character one or more times.</li>
<li><code>?</code> (question mark) makes the preceding character optional.</li>
<li><code>[abc]</code> matches any of the characters <code>a</code>, <code>b</code>, or <code>c</code>.</li>
<li><code>(abc)</code> groups characters together.</li>
<li><code>^</code> (caret) matches the start of the line.</li>
<li><code>$</code> (dollar) matches the end of the line.</li>
</ul>
These are just a few. If you want to dive deeper and learn about more patterns, you can refer to <a href="https://learn.microsoft.com/en-us/dotnet/standard/base-types/regular-expression-language-quick-reference" target="_blank" rel="noopener noreferrer">this document from Microsoft</a>.
Let's build a regular expression that checks if a given set of numbers is a five-digit zip code. To begin writing the expression, we'll use the <code>^</code> (caret) sign, as it matches the start of the line. In a regular expression, <code>\d</code> matches any digit, and a number inside curly braces (<code>{}</code>) matches the preceding element exactly the number of times given inside the braces. From the list above, we know that <code>$</code> is used for matching the end of the line.
Combining this information, we get a regular expression like this:
<pre><code class="hljs">/^\d{5}$/
</code></pre>
Now, let's examine the graphic below to better understand the expression.
<img src="https://i.ibb.co/Wt1g5f5/d5.png" alt="Regular expression to match five-digit zip code">
Regular Expression to Match Five-Digit Zip Code
Now that we have a basic understanding of regular expressions and their general construction, it's a good time to explore how these expressions can be implemented in a JavaScript function.
<h2 id="javascriptregularexpressions">JavaScript Regular Expressions</h2>
JavaScript is the <a href="https://survey.stackoverflow.com/2022/#technology-most-popular-technologies" target="_blank" rel="noopener noreferrer">most popular programming language</a> among developers. Since almost all web applications require JavaScript, it is crucial to understand how regular expressions can be used in this language.
In JavaScript, the <code>RegExp</code> object is used for pattern matching. This object can be utilized in two ways:
<ul>
<li>Using literal notation, where a pattern is formatted between two forward slashes</li>
<li>Using constructor notation, where either a string or a <code>RegExp</code> object is passed</li>
</ul>
Literal notation can be used as simply as this:
<pre><code class="hljs">const expr = /^\d{5}$/i;
</code></pre>
On the other hand, with constructor notation, you'll need to use the <code>RegExp</code> constructor to create an instance of it. Here's how it looks:
<pre><code class="hljs">const expr = new RegExp(/^\d{5}$/, &quot;i&quot;);
</code></pre>
You can read more about the RegExp object from the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp" target="_blank" rel="noopener noreferrer">official MDN docs</a>. Now, let's explore the importance of phone number validation and the various components of a phone number.
<h2 id="phonenumbervalidationandcomponents">Phone Number Validation and Components</h2>
Validating phone numbers on the client side is crucial when saving phone numbers in your database. Without proper validation, your code might exhibit unexpected behaviors.
For example, suppose you are using a service that requires the country code along with the phone number, but your users are not including them due to a lack of validation. Now, you only have the number without the country code, and a service that sends SMS text messages might fail because of this. This is just one hypothetical scenario. Other issues can even crash your application. It is crucial to properly handle your data in the frontend, ensuring that you save clean and consistent data across your database.
Generally, a phone number consists of four parts:
<ul>
<li>Country code: The first 1 to 3 digits (depending on the country) define the country of the phone number. This code allows the call to be routed to the correct country. A country code cannot start with a 0.</li>
</ul>
The article you're currently editing is titled &quot;Validate Phone Numbers in JavaScript with Regular Expressions&quot;. The chunk of text to edit:
<ul>
<li>Area code: Also known as the city or dialing code, this part of the number helps route the call to the correct geographical area within the country. In some countries, like the United States, area codes can also indicate a specific set of phone numbers for a particular service. Additionally, in North America, an area code cannot start with a 0 or a 1.</li>
<li>Telephone prefix: This sequence of numbers is assigned to a specific central office or telephone exchange by the telephone company, further narrowing down the specific geographical area or neighborhood.</li>
<li>Line number: This is the unique number assigned to the specific phone line for a household or business within the prefix area. This part of the number usually ensures that each phone number within a country, area, and prefix is unique.</li>
</ul>
Excluding the country code, combining the remaining parts results in a ten-digit phone number where the area code and the telephone prefix are three digits each, and the line number is four digits.
Let's now move into writing a JavaScript function that validates a phone number based on these criteria using regular expressions.
<h2 id="createaregexforphonenumbervalidation">Create a RegEx for Phone Number Validation</h2>
We have already understood the basic structure of a phone number. We have also learned about regular expressions and how they can be used in JavaScript. In this section, we will write a simple JavaScript function that validates phone numbers of the given format:
<pre><code class="hljs">COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER
</code></pre>
For example, a valid phone number for our function will be like this <code>+123-456-789-1234</code>, but not <code>+012-123-456-7890</code> or <code>+12-123-456-789</code>, as these phone numbers do not follow the rules of phone numbers we discussed earlier.
Now, let's jump into writing the regular expression. First, let's check if the country code is 1 to 3 digits long and doesn't start with a zero.
To indicate the start of the regular expression, use a caret (<code>^</code>), then validate that a plus exists at the start. For this purpose, let's use <code>\+</code>, which will match that the plus exists at the start. Now, to ensure that the country code's digits are between one to three digits and the first digit is not zero, we can write something like this: <code>[1-9]{1}[0-9]{0,2}</code>. Here, <code>[1-9]{1}</code> specifies that any digit from 1 to 9 can exist exactly once, and similarly, <code>[0-9]{0,2}</code> indicates that any digit from 0 to 9 can exist zero to two times.
For the separator, we can add a <code>-</code> (hyphen) between the sections of the number. One <code>-</code> can be added after the country code validation. So, at this point, the regex looks like this:
<pre><code class="hljs">^\+[1-9]{1}[0-9]{0,2}-$
</code></pre>
The <code>$</code> at the end specifies the end of the line. Now, for the area code, this will be quite similar. An area code cannot start with a zero or a one. So, the first part will be <code>[2-9]{1}</code>. This matches that the first number is between 2 and 9. This matching occurs one time. Then, for the rest of the code, we can write <code>[0-9]{2}</code>. This will ensure that there are exactly two digits after the first one, and for each digit, the range is between 0 and 9. Again, add the hyphen separator at the end.
Now, the complete regexp will look like this:
<pre><code class="hljs">^\+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|
</code></pre>
Let's again use the same pattern for checking the telephone prefix. Let's assume that the telephone prefix also cannot start with a zero or a one. So, adding <code>[2-9]{1}[0-9]{2}</code> and a hyphen again will make the expression like this:
<pre><code class="hljs">^\+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|
</code></pre>
The only part remaining now is the line number, which can be any digit with a length of exactly four. This is simpler than the other ones. The expression is <code>[0-9]{4}</code>.
The complete expression is as follows:
<pre><code class="hljs">^\+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|-Line-|
</code></pre>
You must have noticed the frequent use of curly braces. They are used to match the instances provided inside the brace. If it's a specific digit, like <code>{1}</code>, it'll match the preceding pattern exactly one time. However, if it's a range, like <code>{0, 2}</code>, it defines the minimum and maximum number of matches. So, in the case of <code>{0, 2}</code>, it'll match the pattern for a minimum of zero times and a maximum of two times.
The pattern is ready. We can now write a simple JavaScript function to check if a phone number is valid using the regular expression. Here's the function:
<pre><code class="hljs">function validatePhoneNumber(phoneNumber) {
 // Define the regular expression pattern using RegExp object
 const pattern = new RegExp(&quot;^\\+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$&quot;);

 // Test the phone number against the pattern
 if (pattern.test(phoneNumber)) {
 console.log(&quot;Phone number is valid&quot;);
 return true;
 } else {
 console.log(&quot;Phone number is not valid&quot;);
 return false;
 }
}

validatePhoneNumber(&quot;+123-456-789-1234&quot;); // true
validatePhoneNumber(&quot;+0-123-456-7890&quot;); // false
validatePhoneNumber(&quot;+12-012-123-1234&quot;); // false
</code></pre>
The function is quite straightforward. It takes a phone number as input. The regular expression pattern is stored inside a variable called <code>pattern</code>. The pattern is instantiated using the RegExp constructor and passing the expression as a parameter to the constructor. Then, we test the phone number using the <code>test</code> method available in the object. Using an if-else statement, we check if the phone number passes the test. If it does, we return true and send a console message stating that the <code>Phone number is valid</code>. Otherwise, it returns false and displays a console message indicating that the phone number is not valid.
With this, we are good to go. Now, you can test your phone numbers to see if they are valid.
<h2 id="summary">Summary</h2>
This article aimed to provide a brief overview of regular expressions, their uses, and how they can be applied to validate phone numbers. We also discussed the various components of a phone number and how each component can be tested.
With a basic understanding of regular expressions, you can now explore additional patterns. You can also use tools like <a href="https://regex101.com/" target="_blank" rel="noopener noreferrer">Regex101</a> for validating your expressions online.

Subha Chanda

Validate Phone Numbers in JavaScript with Regular Expressions

<h2 id="introduction">Introduction</h2>
Machine Learning (ML) is a field of study that focuses on developing algorithms to learn automatically from data, making predictions and inferring patterns without being explicitly told how to do it. It aims to create systems that automatically improve with experience and data.
This can be achieved through supervised learning, where the model is trained using labeled data to make predictions, or through unsupervised learning, where the model seeks to uncover patterns or correlations within the data without specific target outputs to anticipate.
ML has emerged as an indispensable and widely employed tool across various disciplines, including computer science, biology, finance, and marketing. It has proven its utility in diverse applications such as image classification, natural language processing, and fraud detection.
<h2 id="machinelearningtasks">Machine Learning Tasks</h2>
Machine learning can be broadly classified into three main tasks:
<ul>
<li>Supervised learning</li>
<li>Unsupervised learning</li>
<li>Reinforcement learning</li>
</ul>
Here, we will focus on the first two cases.
<img src="https://s3.stackabuse.com/media/articles/supervised-learning-vs-unsupervised-learning-algorithms-1.png" alt="Machine learning">
<h3 id="supervisedlearning">Supervised Learning</h3>
Supervised learning involves training a model on labeled data, where the input data is paired with the corresponding output or target variable. The goal is to learn a function that can map input data to the correct output. Common supervised learning algorithms include linear regression, logistic regression, decision trees, and support vector machines.
Example of supervised learning code using Python:
<pre><code class="hljs">from sklearn.linear_model import LinearRegression

# Create a linear regression model
model = LinearRegression()

# Train the model on the labeled data
model.fit(X_train, y_train)

# Use the trained model to make predictions on new data
predictions = model.predict(X_test)
</code></pre>
In this simple code example, we train the <code>LinearRegression</code> algorithm from scikit-learn on our training data, and then apply it to get predictions for our test data.
<img src="https://s3.stackabuse.com/media/articles/supervised-learning-vs-unsupervised-learning-algorithms-2.png" alt="Linear regression">
One real-world use case of supervised learning is email spam classification. With the exponential growth of email communication, identifying and filtering spam emails has become crucial. By utilizing supervised learning algorithms, it is possible to train a model to distinguish between legitimate emails and spam based on labeled data.
The supervised learning model can be trained on a dataset containing emails labeled as either &quot;spam&quot; or &quot;not spam.&quot; The model learns patterns and features from the labeled data, such as the presence of certain keywords, email structure, or email sender information. Once the model is trained, it can be used to automatically classify incoming emails as spam or non-spam, efficiently filtering unwanted messages.
<h3 id="unsupervisedlearning">Unsupervised Learning</h3>
In unsupervised learning, the input data is unlabeled, and the goal is to discover patterns or structures within the data. Unsupervised learning algorithms aim to find meaningful representations or clusters in the data.
Examples of unsupervised learning algorithms include <a target="_blank" href="https://stackabuse.com/k-means-clustering-with-scikit-learn/">k-means clustering</a>, <a target="_blank" href="https://stackabuse.com/hierarchical-clustering-with-python-and-scikit-learn/">hierarchical clustering</a>, and <a target="_blank" href="https://stackabuse.com/implementing-pca-in-python-with-scikit-learn/">principal component analysis (PCA)</a>.
Example of unsupervised learning code:
<pre><code class="hljs">from sklearn.cluster import KMeans

# Create a k-means clustering model
model = KMeans(n_clusters=3)

# Fit the model to the unlabeled data
model.fit(X)

# Predict the clusters for new data points
predictions = model.predict(X_new)
</code></pre>
In this simple code example, we train the <code>KMeans</code> algorithm from scikit-learn to identify three clusters in our data and then fit new data into those clusters.
<img src="https://s3.stackabuse.com/media/articles/supervised-learning-vs-unsupervised-learning-algorithms-3.png" alt="Clustering">
An example of an unsupervised learning use case is customer segmentation. In various industries, businesses aim to understand their customer base better to tailor their marketing strategies, personalize their offerings, and optimize customer experiences. Unsupervised learning algorithms can be employed to segment customers into distinct groups based on their shared characteristics and behaviors.
By applying unsupervised learning techniques, such as clustering, businesses can uncover meaningful patterns and groups within their customer data. For instance, clustering algorithms can identify groups of customers with similar purchasing habits, demographics, or preferences. This information can be leveraged to create targeted marketing campaigns, optimize product recommendations, and improve customer satisfaction.
<h2 id="mainalgorithmclasses">Main Algorithm Classes</h2>
<h3 id="supervisedlearningalgorithms">Supervised Learning Algorithms</h3>
<ol>
<li>
Linear models: Used for predicting continuous variables based on linear relationships between features and the target variable.
</li>
<li>
Tree-Based Models: Constructed using a series of binary decisions to make predictions or classifications.
</li>
<li>
Ensemble Models: Method that combines multiple models (tree-based or linear) to make more accurate predictions.
</li>
<li>
Neural Network Models: Methods loosely based on the human brain, where multiple functions work as nodes of a network.
</li>
</ol>
<h3 id="unsupervisedlearningalgorithms">Unsupervised Learning Algorithms</h3>
<ol>
<li>
Hierarchical Clustering: Builds a hierarchy of clusters by iteratively merging or splitting them.
</li>
<li>
Non-Hierarchical Clustering: Divides data into distinct clusters based on similarity.
</li>
<li>
Dimensionality Reduction: Reduces the dimensionality of data while preserving the most important information.
</li>
</ol>
<h2 id="modelevaluation">Model Evaluation</h2>
<h3 id="supervisedlearning">Supervised Learning</h3>
To evaluate the performance of supervised learning models, various metrics are used, including accuracy, precision, recall, F1 score, and ROC-AUC. Cross-validation techniques, such as k-fold cross-validation, can help estimate the model's generalization performance.
<h3 id="unsupervisedlearning">Unsupervised Learning</h3>
Evaluating unsupervised learning algorithms is often more challenging since there is no ground truth. Metrics such as silhouette score or inertia can be used to assess the quality of clustering results. Visualization techniques can also provide insights into the structure of clusters.
<h2 id="tipsandtricks">Tips and Tricks</h2>
<h3 id="supervisedlearning">Supervised Learning</h3>
<ul>
<li>Preprocess and normalize input data to improve model performance.</li>
<li>Handle missing values appropriately, either by imputation or removal.</li>
<li>Feature engineering can enhance the model's ability to capture relevant patterns.</li>
</ul>
<h3 id="unsupervisedlearning">Unsupervised Learning</h3>
<ul>
<li>Choose the appropriate number of clusters based on domain knowledge or using techniques like the elbow method.</li>
<li>Consider different distance metrics to measure similarity between data points.</li>
<li>Regularize the clustering process to avoid overfitting.</li>
</ul>
In summary, machine learning involves numerous tasks, techniques, algorithms, model evaluation methods, and helpful hints. By comprehending these aspects, practitioners can efficiently apply machine learning to real-world issues and derive significant insights from data. The given code examples showcase the utilization of supervised and unsupervised learning algorithms, highlighting their practical implementation.

Guest Contributor

Supervised Learning vs. Unsupervised Learning Algorithms

<h2 id="introduction">Introduction</h2>
A dictionary in Python is an essential and robust built-in data structure that allows efficient retrieval of data by establishing a relationship between keys and values. It is an unordered collection of key-value pairs, where the values are stored under a specific key rather than in a particular order.
In this article, we will take a look at different approaches for accessing keys and values in dictionaries. We will review illustrative examples and discuss the appropriate contexts for each approach.
<h2 id="abriefanatomyofadictionary">A Brief Anatomy of a Dictionary</h2>
<h3 id="whatisadictionaryinpython">What Is a Dictionary in Python?</h3>
You can visualize a Python dictionary by thinking about traditional physical dictionaries. The dictionary's <code>key</code> is similar to a word that we would like to search for, and the <code>value</code> is like the corresponding definition of the word in the dictionary. In terms of Python's data structures, dictionaries are containers that can hold other objects. Unlike ordered or indexed sequences (such as lists), dictionaries are mappings that assign a distinct name or <code>key</code> to each element.
<h3 id="buildingblocksofadictionary">Building Blocks of a Dictionary</h3>
A key in a dictionary serves as a unique identifier that allows us to locate specific information. Keys can be of any immutable type (e.g., strings, numbers, tuples). The data associated with each key is called a <code>value</code>, and can be mutable.
Any data type, such as a string, number, list, or even another dictionary, is an acceptable <code>value</code>. The combination of these key-value pairs is represented in the form of tuples, known as dictionary <code>items</code>. Together, these keys, values, and items collectively form the core structure of a dictionary. Let's explore how we can retrieve these elements.
To illustrate this, let's first construct a simple address book dictionary. The keys represent names of individuals, and the corresponding values contain their associated shipping addresses. We can construct it as below:
<pre><code class="hljs">address_book = {
 &quot;Alicia Johnson&quot;: &quot;123 Main Street, Cityville&quot;,
 &quot;Jerry Smith&quot;: &quot;456 Corner Avenue, Townsville&quot;,
 &quot;Michael Jonas&quot;: &quot;789 End Lane, Villageville&quot;
}
</code></pre>
We can visualize the structure of our simple dictionary as below:
<img src="https://s3.stackabuse.com/media/articles/get-keys-and-values-from-a-dictionary-in-python-1.svg" alt="Structure of a dictionary">
<h2 id="getkeysinadictionary">Get Keys in a Dictionary</h2>
<h3 id="keyretrievalusingthekeysmethod">Key Retrieval Using the keys() Method</h3>
The <code>keys()</code> method of a dictionary returns a list-like object containing all the keys of the dictionary. We can call this method on our <code>address_book</code> as below:
<pre><code class="hljs">address_keys = address_book.keys()
print(address_keys)
</code></pre>
This gives us:
<pre><code class="hljs">dict_keys([&#x27;Alicia Johnson&#x27;, &#x27;Jerry Smith&#x27;, &#x27;Michael Jonas&#x27;])
</code></pre>
The output returned above is a <code>dict_keys</code> object containing the keys of the <code>address_book</code> dictionary. The advantage of this method is that we can further iterate over the <code>dict_keys</code> object, convert it into a list, or use it in any other manner to access the individual keys. For example, let's utilize the keys we've extracted to find the first name of each person:
<pre><code class="hljs">for k in address_keys:
 print(k.split()[0]) # Split by space separator and return only the first string
</code></pre>
And we get:
<pre><code class="hljs">Alicia
Jerry
Michael
</code></pre>
<h3 id="keyretrievalusingtheinoperator">Key Retrieval Using the <code>in</code> Operator</h3>
Dictionaries in Python support iteration, which means that we can loop over their elements and test membership using the <code>in</code> operator. This versatile approach returns each key individually, rather than in a list-like object.
Let's use a simple <code>for-loop</code> and the <code>in</code> operator as an alternative way to return the keys of the dictionary:
<pre><code class="hljs">for k in address_book:
 print(k)
</code></pre>
We get a similar output as above:
<pre><code class="hljs">Alicia Johnson
Jerry Smith
Michael Jonas
</code></pre>
Here, the expression <code>k in address_book</code> searches for a key in the dictionary, not an index or a value. Note that dictionaries don't preserve the order of the pairs, so don't rely on item order when looping over dictionaries.
<h2 id="howtogetvaluesinadictionary">How to Get Values in a Dictionary</h2>
Now that we've seen how to retrieve dictionary keys, let's see some of the different approaches to get the corresponding values from our dictionary.
<h3 id="retrievevaluebykeyusingsquarebrackets">Retrieve Value by Key Using Square Brackets</h3>
Values in a dictionary are directly accessible by their respective keys. Since each key relates to exactly one value, we can access values using the square-brackets operator on the dictionary object.
For instance, let's try to find Jerry Smith's address:
<pre><code class="hljs">print(address_book[&#x27;Jerry Smith&#x27;])
</code></pre>
We get their address as below:
<pre><code class="hljs">456 Corner Avenue, Townsville
</code></pre>
<h3 id="retrievevalueusinggetmethod">Retrieve Value Using get() Method</h3>
A major drawback of the square brackets operator we used above is that it returns a <code>KeyError</code> when we try to access an item not present in the dictionary. For example, let's look for the non-existent customer &quot;Brita Philips&quot;:
<pre><code class="hljs">print(address_book[&#x27;Brita Philips&#x27;])
</code></pre>
We receive an error as below:
<pre><code class="hljs">Traceback (most recent call last):
 File &quot;&lt;stdin&gt;&quot;, line 1, in &lt;module&gt;
 print(address_book[&#x27;Brita Philips&#x27;])
KeyError: &#x27;Brita Philips&#x27;
</code></pre>
To avoid this, we can use the <code>get()</code> method, which returns the value if it exists in the dictionary, and a default value otherwise. Let's try:
<pre><code class="hljs">print(address_book.get(&#x27;Brita Philips&#x27;))
</code></pre>
The output is cleaner now, returning <code>None</code> instead of a <code>KeyError</code>:
<pre><code class="hljs">None
</code></pre>
If you'd like to return any other default value instead of <code>None</code>, you can specify your own:
<pre><code class="hljs">print(address_book.get(&#x27;Brita Philips&#x27;, &#x27;Not a person&#x27;))
</code></pre>
And we get:
<pre><code class="hljs">Not a person
</code></pre>
<h3 id="valueretrievalusingthevaluesmethod">Value Retrieval Using the values() Method</h3>
The <code>values()</code> method returns a list-like object which contains the values of the dictionary. For instance:
<pre><code class="hljs">print(address_book.values())
</code></pre>
This gives us:
<pre><code class="hljs">dict_values([&#x27;123 Main Street, Cityville&#x27;, &#x27;456 Corner Avenue, Townsville&#x27;, &#x27;789 End Lane, Villageville&#x27;])
</code></pre>
As you may have already guessed, it is possible to further iterate over the returned <code>dict_values</code> object. You may also have noticed that there is no convenient method for getting the key from a value. This is because it is entirely possible to have duplicate values, whereas keys must be unique within a dictionary.
<h2 id="getkeyvaluepairsfromadictionarysimultaneously">Get Key-Value Pairs from a Dictionary Simultaneously</h2>
We often need to retrieve the complete key-value pair (called <code>item</code>) from a dictionary. There are a few different ways to do so.
<h3 id="keyvalueretrievalusingtheitemsmethod">Key-Value Retrieval Using the items() Method</h3>
The <code>items()</code> method returns a list-like iterable object which yields each key-value pair as a tuple. Each returned item is of the form <code>(key, value)</code>.
In our example, this is as below:
<pre><code class="hljs">print(address_book.items())
</code></pre>
This gives us:
<pre><code class="hljs">dict_items([(&#x27;Alicia Johnson&#x27;, &#x27;123 Main Street, Cityville&#x27;), (&#x27;Jerry Smith&#x27;, &#x27;456 Corner Avenue, Townsville&#x27;), (&#x27;Michael Jonas&#x27;, &#x27;789 End Lane, Villageville&#x27;)])
</code></pre>
<h3 id="usingaforloopwiththeitemsmethod">Using a For Loop with the items() Method</h3>
The <code>items()</code> method gave us a <code>dict_items</code> object in the above example. We can further unpack each pair using a <code>for</code> statement as below:
<pre><code class="hljs">for key, value in address_book.items():
 print(key, &quot;=&gt;&quot;, value)
</code></pre>
This yields:
<pre><code class="hljs">Alicia Johnson =&gt; 123 Main Street, Cityville
Jerry Smith =&gt; 456 Corner Avenue, Townsville
Michael Jonas =&gt; 789 End Lane, Villageville
</code></pre>
<h3 id="listcomprehensionwithtupleunpackingfordictionaryitems">List Comprehension with Tuple Unpacking for Dictionary Items</h3>
Using list comprehension is an efficient way to return both the key and the value together in a single operation without the need to look up the key separately.
For example:
<pre><code class="hljs">addresses = [key + &quot; =&gt; &quot; + value for key, value in address_book.items()]
print(addresses)
</code></pre>
We get:
<pre><code class="hljs">[&#x27;Alicia Johnson =&gt; 123 Main Street, Cityville&#x27;, &#x27;Jerry Smith =&gt; 456 Corner Avenue, Townsville&#x27;, &#x27;Michael Jonas =&gt; 789 End Lane, Villageville&#x27;]
</code></pre>
To learn more about dictionary comprehension, you can read our <a href="https://stackabuse.com/python-dictionary-comprehension-a-fast-and-flexible-way-to-build-dictionaries/" target="_blank">guide to dictionary comprehension in Python</a>.
<pre><code class="hljs">
### Conclusion

Retrieving keys and values from Python dictionaries is a widely-used and fundamental operation in data handling. We have seen that dictionaries are an incredibly efficient and versatile way of checking for key membership. This article has provided an overview of different methods to extract keys, values, and pairs from dictionaries.</code></pre>

Sridevi Madbhavi

Get Keys and Values from a Dictionary in Python

Every webpage today is updated without reloading the page to provide users with a smooth experience. Updating a page without reloading it is only possible with the use of JavaScript, as web browsers exclusively run JavaScript as a programming language.
Similarly, uploading a file without reloading the page is achieved with JavaScript to ensure a seamless user experience. Uploading a file using JavaScript is important for:
<ul>
<li>
Web interaction. Two or more people can engage by sending images, videos, and various file types to one another. For example, you can email images and reply with images on Gmail due to file uploading capabilities provided by JavaScript.
</li>
<li>
Gathering important data from users. Occasionally, you may need to verify a person's identity before allowing them to use your services. You may ask them to upload a photo of themselves holding their identity card, or simply upload a PDF file of their bank statement. Uploading a file with JavaScript makes this possible.
</li>
<li>
Preserve data. Storing important memories or information as files is vital, allowing us to upload a file to the cloud for safekeeping.
</li>
<li>
Process data for content extraction, editing, cleaning, and updating. JavaScript is powerful enough to perform complex processing tasks such as adding filters to images, extracting text from images, and more. Uploading a file for processing can help achieve a specific objective.
</li>
</ul>
Now that you understand what uploading a file with JavaScript involves and its purpose, let's build a simple application to demonstrate the process.
<h2 id="createasimplehtmlformforfileupload">Create a Simple HTML Form for File Upload</h2>
The HTML form below will be used to select a file.
<pre><code class="hljs">&lt;form id=&quot;fileUploadForm&quot;&gt;
 &lt;input type=&quot;text&quot; name=&quot;firstName&quot; value=&quot;John&quot; /&gt;
 File: &lt;input type=&quot;file&quot; name=&quot;upload&quot; /&gt;
 &lt;input type=&quot;submit&quot; id=&quot;btn&quot; /&gt;
&lt;/form&gt;
</code></pre>
Then, in the form, we have an <code>input</code> tag with its <code>type</code> set to <code>file</code> and its <code>name</code> set to <code>upload</code>. This allows uploading various file types, such as images, PDFs, videos, and more.
<h2 id="accesstheformusingjavascript">Access the Form Using JavaScript</h2>
To access a form using JavaScript and obtain user inputs from it, several methods are available. In this example, we use the following code:
<pre><code class="hljs">const form = document.getElementById(&quot;fileUploadForm&quot;);
const submitter = document.getElementById(&quot;btn&quot;);
</code></pre>
We have now accessed the entire form and its submitter using JavaScript. If you run <code>console.log({form, submitter})</code>, you will see the exact form and its submitter from the initial HTML content. When a user selects a file, we want to obtain the chosen file using the <code>FormData</code> constructor.
<h2 id="exploreformdatainjavascript">Explore FormData in JavaScript</h2>
<code>FormData</code> is a constructor that creates an object to store form inputs as key/value pairs. It uses the name property of a given input tag as a key and the entered value as its value. We can then retrieve all user input from the <code>FormData</code> object. It's important to note that developers often use <code>FormData</code> because it encodes file input.
How Does It Work?
The <code>FormData</code> object can be used to collect form inputs in three major ways and handle them individually.
<h3 id="grabinputsfromaspecificformafteranevent">Grab Inputs from a Specific Form After an Event</h3>
<pre><code class="hljs">// const form = document.getElementById(&quot;fileUploadForm&quot;);
form.addEventListener(&quot;submit&quot;, (event) =&gt; { 
 const inputs = new FormData(form); 
});
</code></pre>
Here, we access the form and its submitter, and then use the <code>FormData</code> object to collect all the user inputs from the form after it is submitted.
<h3 id="prepopulateavariablefromaform">Prepopulate a Variable from a Form</h3>
<pre><code class="hljs">// const form = document.getElementById(&quot;fileUploadForm&quot;);
// const submitter = document.getElementById(&quot;btn&quot;);
const inputs = new FormData(form, submitter); 
</code></pre>
By passing both the form and its submitter to the <code>FormData</code> constructor, we automatically obtain any value entered in the form. It's important to note that the code above is only valid if the submitter is a member of the form. Additionally, <code>FormData</code> retrieves input only with a name and without a disabled state.
<h3 id="createanemptyformdata">Create an Empty FormData</h3>
<pre><code class="hljs">const inputs = new FormData();
</code></pre>
The code snippet above constructs an empty <code>FormData</code> object, allowing us to add data when needed.
<pre><code class="hljs">const inputs = new FormData();
inputs.set(&quot;name&quot;, &quot;Ayobami&quot;);
</code></pre>
The empty <code>FormData</code> is useful for structuring form input values when they are not obtained directly from a form. Visit the <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData" target="_blank" rel="noopener noreferrer">FormData Web API</a> to learn more about other <code>FormData</code> methods.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: A <code>FormData</code> object has the same methods whether it is prepopulated, empty, or &quot;post populated&quot;. Now that you've learned how to capture form input values, it's time to explore the Fetch API to send the file to the server.

 </div>
 </div>
 </div>
 <h2 id="whatisthefetchapi">What is the Fetch API?</h2>
The Fetch API enables a webpage to send and receive resources from a server asynchronously, without interrupting the single-threaded execution of the JavaScript engine. The fetch method returns a promise that resolves into a Response object. From this object, the actual data can be extracted by calling methods such as <code>json()</code> or <code>text()</code>.
Here is the syntactic structure of the Fetch API:
<pre><code class="hljs">fetch(resource, options)
</code></pre>
The Fetch API takes two arguments. The first argument is the <code>resource</code>, primarily a URL to a resource to be fetched. The second argument provides the custom options you want to set for your request. To learn how to customize the fetch options in detail, please visit the <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch" target="_blank" rel="noopener noreferrer">Fetch Global Function</a> documentation.
<h2 id="uploadafileusingjavascript">Upload a File Using JavaScript</h2>
Uploading a file using JavaScript is akin to the standard form submission with JavaScript. The attributes of our file input tag specify that we want to upload a file of any type (image, video, or others).
Here's the process:
<pre><code class="hljs">const form = document.getElementById(&quot;fileUploadForm&quot;);
const data = new FormData(form);
form.addEventListener(&quot;submit&quot;, async (event) =&gt; {
 event.preventDefault();

 let response = await fetch(&quot;https://jsonplaceholder.typicode.com/posts&quot;, {
 method: &quot;POST&quot;,
 body: JSON.stringify(data),
 headers: {
 &quot;Content-type&quot;: &quot;application/json; charset=UTF-8&quot;,
 },
 });

 let result = await response.json();
 console.log(result);
});
</code></pre>
In the code above, we obtain the selected input of a form using the <code>FormData</code> constructor and send it as the <code>body</code> of a request to the <code>URL</code> in the <code>Fetch API</code>. We set the request method to <code>POST</code> to transmit the data as the request <code>body</code> and prevent third parties from viewing the content of the request, as it is automatically encrypted by <code>HTTPS</code>. In short, the <code>POST</code> method is used to send new data to the server. Additionally, we set the request headers to indicate that the content is in <code>JSON</code> format and <code>UTF-8</code> encoded.
The <code>async</code> keyword indicates that the function may take some time to execute, and the JavaScript engine should continue to process other parts of the code. Meanwhile, <code>await</code> instructs the engine to wait for a response before proceeding with other parts of the code, as the entire code depends on the response.
You may be curious about how the file-uploading method in this article differs from the traditional approach of uploading solely through HTML forms. The distinction lies in sending well-structured form data asynchronously, as opposed to HTML forms that require a page reload. Moreover, it is effectively managed by the server, similar to HTML forms, because it is an object of HTML form data that can be transmitted in <code>JSON</code> or other formats.
The primary drawback of uploading files with JavaScript rather than an HTML form is that the upload will not function if JavaScript is disabled in the browser.
<code>FormData</code> is supported in all modern web browsers when you don't use its second parameter, i.e <code>FormData(formElement[, submitter])</code>, or follow the method outlined in this article. However, some features of the <code>Fetch API</code> are not supported in all modern browsers, which is why developers often use <a href="https://axios-http.com/" target="_blank" rel="noopener noreferrer">Axios</a> as it is built on the Fetch API and provides a workaround for all major browsers.
Here's what our simple example would look like in your browser, with minor modifications:
<img src="https://s3.stackabuse.com/media/articles/upload-a-file-using-javascript-1.png" alt="">
<h2 id="finalconsiderations">Final Considerations</h2>
Uploading a file using JavaScript significantly enhances user interactions. It also assists in collecting, processing, and preserving data. Many real-world problems necessitate some of the mentioned use cases for uploading a file with JavaScript.
At this point, you should be able to access a form, utilize the <code>FormData</code> constructor, understand the Fetch API, and upload a file with JavaScript in practical projects. While you may still need to learn form validation and encryption using JavaScript, this article offers a solid foundation for uploading files with JavaScript.

Upload a File Using JavaScript

Federico Trotta

Finding Numbers in Various Data Types in Python

<h2 id="introduction">Introduction</h2>
In Python, it's often important to check whether a string is empty or <code>None</code> before performing operations on it. This can prevent unexpected errors and make your code more robust. But what is the most efficient and Pythonic way to do this? And what potential pitfalls should you watch out for?
<blockquote>
In this article, we'll explore these questions, demonstrating how to correctly check if a string is empty or <code>None</code> in Python, as well as discussing some best practices to make your code more reliable and maintainable.
</blockquote>
<h2 id="booleanevaluationinpython">Boolean Evaluation in Python</h2>
In Python, values are considered &quot;truthy&quot; or &quot;falsy&quot; based on whether they evaluate to <code>True</code> or <code>False</code> in a boolean context. This concept plays a crucial role when checking conditions in code.
For strings, an empty string (<code>&quot;&quot;</code>) is considered &quot;falsy&quot; — it evaluates to <code>False</code> in a boolean context. On the other hand, a non-empty string is &quot;truthy&quot; — it evaluates to <code>True</code>. The special value <code>None</code> is also considered &quot;falsy&quot;, as shown in the following code snippet:
<pre><code class="hljs">s1 = &quot;&quot;
s2 = &quot;Hello&quot;
s3 = None

print(bool(s1)) # False
print(bool(s2)) # True
print(bool(s3)) # False
</code></pre>
This property of strings and <code>None</code> is extremely useful when you want to check if a string is empty or <code>None</code>. As we'll see in the next sections, you can use simple if statements to make these checks, leveraging the &quot;falsiness&quot; of an empty string and <code>None</code>.
<h2 id="checkingifastringisempty">Checking if a String is Empty</h2>
When checking if a string is empty in Python, we can take advantage of the fact that an empty string is &quot;falsy&quot;. You can use either the <code>==</code> operator or the <code>not</code> operator to perform this check.
<h3 id="method1usingtheoperator">Method 1: Using the <code>==</code> Operator</h3>
<pre><code class="hljs">s = &quot;&quot;
if s == &quot;&quot;:
 print(&quot;String is empty&quot;)
else:
 print(&quot;String is not empty&quot;)
</code></pre>
<h3 id="method2usingthenotoperator">Method 2: Using the <code>not</code> Operator</h3>
<pre><code class="hljs">s = &quot;&quot;
if not s:
 print(&quot;String is empty&quot;)
else:
 print(&quot;String is not empty&quot;)
</code></pre>
In both of these methods, the <code>if</code> statement will print <code>&quot;String is empty&quot;</code> if the string <code>s</code> is empty. The <code>not</code> operator in the second example negates the &quot;truthiness&quot; or &quot;falsiness&quot; of the string, making the code slightly more concise. This is a common Pythonic way to check for empty strings.
<h2 id="checkingifastringisnone">Checking if a String is <code>None</code></h2>
In Python, to check if a string is <code>None</code>, it's best practice to use the <code>is</code> operator rather than the <code>==</code> operator. This is because <code>is</code> checks if both operands are the same object, not just equivalent.

 <div class="alert alert-reference">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-link-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Advice: Read more about the differences between the <code>is</code> and the <code>==</code> operators in our article <a href="https://stackabuse.com/is-vs-python-object-comparison/" target="_blank">&quot;'is' vs '==' in Python - Object Comparison&quot;</a>.

 </div>
 </div>
 </div>
 Let's take a look at the practical use-case of the <code>is</code> operator for checking if a string is <code>None</code>&quot;:
<pre><code class="hljs">s = None

if s is None:
 print(&quot;String is None&quot;)
else:
 print(&quot;String is not None&quot;)
</code></pre>
As expected, the <code>if</code> statement will print <code>&quot;String is None&quot;</code> if the variable <code>s</code> is <code>None</code>.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Remember, <code>None</code> is a singleton in Python, which means there is only ever one instance of <code>None</code>. Thus, using <code>is</code> is more appropriate and can be more efficient when checking for <code>None</code>.

 </div>
 </div>
 </div>
 <h2 id="checkingifastringisemptyornone">Checking if a String is Empty or <code>None</code></h2>
To check if a string is either empty or <code>None</code> in Python, we'll combine the techniques we discussed in the previous sections. We'll use an <code>or</code> operator to check both conditions at once:
<pre><code class="hljs">s = &quot;&quot; # Try also with s = None

if s is None or s == &quot;&quot;:
 print(&quot;String is empty or None&quot;)
else:
 print(&quot;String is not empty and not None&quot;)
</code></pre>

 <div class="alert alert-reference">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-link-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Advice: Find out more about the <code>or</code> operator in Python by reading our <a href="https://stackabuse.com/guide-to-the-python-or-operator/" target="_blank">&quot;Guide to the Python or Operator&quot;</a>.

 </div>
 </div>
 </div>
 In this example, the <code>if</code> statement checks two conditions: if <code>s</code> is <code>None</code> and if <code>s</code> is an empty string. If either condition is true, it will print <code>&quot;String is empty or None&quot;</code>. If both conditions are false (meaning the string is not <code>None</code> and it's not empty), it will print <code>&quot;String is not empty and not None&quot;</code>.
<h2 id="tipsandadvice">Tips and Advice</h2>
<h3 id="dontuseinsteadofistocheckfornone">Don't use <code>==</code> Instead of <code>is</code> to Check for <code>None</code></h3>
Python has two equality operators, <code>==</code> and <code>is</code>. While they sometimes work the same, they are not identical. The <code>==</code> operator checks for value equality, while <code>is</code> checks for identity, meaning that it checks whether the operands are the same object.
<code>None</code> is a singleton in Python - there's only one instance of <code>None</code>. Therefore, it's more appropriate and slightly more efficient to use <code>is</code> when checking for <code>None</code>.
<pre><code class="hljs">s = None

# Recommended
if s is None:
 print(&quot;s is None&quot;)

# Not recommended
if s == None:
 print(&quot;s is None&quot;)
</code></pre>
<h3 id="takeadvantageofpythonstruthiness">Take Advantage of Python's &quot;Truthiness&quot;</h3>
Python's treatment of different values as &quot;truthy&quot; or &quot;falsy&quot; in boolean contexts can simplify your code. Rather than explicitly comparing a string to an empty string (<code>&quot;&quot;</code>), you can use the <code>not</code> keyword to check if a string is empty:
<pre><code class="hljs">s = &quot;&quot;

# Recommended
if not s:
 print(&quot;String is empty&quot;)

# Not recommended
if s == &quot;&quot;:
 print(&quot;String is empty&quot;)
</code></pre>
<h3 id="handlenonewhenperformingoperationsonstrings">Handle <code>None</code> When Performing Operations on Strings</h3>
If there's any chance a string could be <code>None</code>, always check before performing operations on it. Neglecting to do so can result in a <code>TypeError</code>:
<pre><code class="hljs">s = None

# Results in TypeError: unsupported operand type(s) for +: &#x27;NoneType&#x27; and &#x27;str&#x27;
print(s + &quot; more text&quot;)
</code></pre>
To prevent such errors, you can check if the string is <code>None</code> before performing the operation:
<pre><code class="hljs">if s is not None:
 print(s + &quot; more text&quot;)
else:
 print(&quot;String is None, cannot perform operation&quot;)
</code></pre>
<h2 id="conclusion">Conclusion</h2>
We've seen that Python provides straightforward and efficient ways to perform these checks, leveraging the &quot;truthiness&quot; and &quot;falsiness&quot; of different values in boolean contexts. We've also discussed some potential pitfalls to avoid and best practices to follow when performing these checks, such as using the <code>is</code> operator to check for <code>None</code> and the <code>not</code> operator to check for an empty string.