<h2 id="introduction">Introduction</h2>
Whether you're reading data from files or writing data to files, understanding file operations is important. In Python, and other languages, we often need to copy files from one directory to another, or even within the same directory. This article will guide you through the process of copying files in Python using various modules and methods.
<h2 id="pythonsfilesystemandfileoperations">Python's Filesystem and File Operations</h2>
Python provides several built-in modules and functions to interact with the filesystem and perform file operations. The two most commonly used modules for file operations are the <code>os</code> and <code>shutil</code> modules.
The <code>os</code> module provides a way of using operating system dependent functionality. It includes functions for interacting with the filesystem, such as <code>os.rename()</code>, <code>os.remove()</code>, <code>os.mkdir()</code>, and so on.
<pre><code class="hljs">import os

# Rename a file
os.rename(&#x27;old_name.txt&#x27;, &#x27;new_name.txt&#x27;)

# Remove a file
os.remove(&#x27;file_to_remove.txt&#x27;)

# Create a directory
os.mkdir(&#x27;new_directory&#x27;)
</code></pre>
The <code>shutil</code> module offers a number of high-level operations on files and collections of files. It comes under Python’s standard utility modules. This module helps in automating process of copying and removal of files and directories.
<pre><code class="hljs">import shutil

# Copy a file
shutil.copy(&#x27;source.txt&#x27;, &#x27;destination.txt&#x27;)

# Remove a directory and all its contents
shutil.rmtree(&#x27;directory_to_remove&#x27;)
</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: While <code>os</code> module functions are efficient for simple file operations, for higher-level file operations such as copying or moving files and directories, <code>shutil</code> module functions are more convenient.

 </div>
 </div>
 </div>
 Now, let's dive deeper into how we can use these modules to copy files in Python.
<h2 id="howtocopyfilesinpython">How to Copy Files in Python</h2>
Python, being a high-level programming language, provides us with several modules to simplify various tasks. One of those tasks is copying files. Whether you want to back up your data or move it to another location, Python makes it easy to copy files and directories. Here we'll take a look at how to copy files using different built-in modules.
<h2 id="usingtheshutilmoduletocopyfiles">Using the shutil Module to Copy Files</h2>
The <code>shutil</code> module has methods that help in operations like copying, moving, or removing files/directories. One of its most used functionalities is the ability to copy files.
To copy a file in Python using the <code>shutil</code> module, we use the <code>shutil.copy()</code> function. This function takes two parameters: the source file path and the destination path.
Let's look at an example:
<pre><code class="hljs">import shutil

source = &quot;/path/to/source/file.txt&quot;
destination = &quot;/path/to/destination/file.txt&quot;

shutil.copy(source, destination)
</code></pre>
In this code snippet, we first import the <code>shutil</code> module. We then define the source and destination file paths. Finally, we call the <code>shutil.copy()</code> function with the source and destination as arguments.

 <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>shutil.copy()</code> function will overwrite the destination file if it already exists. So, be cautious while using it!

 </div>
 </div>
 </div>
 If you want to preserve the metadata (like permissions, modification times) while copying, you can use the <code>shutil.copy2()</code> function. This works the same way as <code>shutil.copy()</code>, but it also copies the metadata.
<pre><code class="hljs">import shutil

source = &quot;/path/to/source/file.txt&quot;
destination = &quot;/path/to/destination/file.txt&quot;

shutil.copy2(source, destination)
</code></pre>
<h2 id="usingtheosmoduletocopyfiles">Using the os Module to Copy Files</h2>
Python's built-in <code>os</code> module is another great tool for interacting with the operating system. Among its many features, and just like <code>shutil</code>, it allows us to copy files. However, it's important to note that the <code>os</code> module doesn't provide a direct method to copy files like <code>shutil</code> does. Instead, we can use the <code>os.system()</code> function to execute shell commands within our Python script.
Here's how you'd use the <code>os.system()</code> function to copy a file:
<pre><code class="hljs">import os

# Define source and destination paths
src = &quot;/path/to/source/file.txt&quot;
dest = &quot;/path/to/destination/file.txt&quot;

# Use os.system to execute the cp shell command
os.system(f&#x27;cp {src} {dest}&#x27;)
</code></pre>
After running this script, you'll find that <code>file.txt</code> has been copied from the source path to the destination path.

 <div class="alert alert-warn">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-exclamation-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Wait! Since the <code>os.system()</code> function can execute any shell command, it can also be a potential security risk if misused, so always be careful when using it.

 </div>
 </div>
 </div>
 This may be a helpful way to copy files if you also need to execute other shell commands or use <code>cp</code> flags that aren't available with <code>shutil</code>'s methods.
<h2 id="copyingfileswithwildcards">Copying Files with Wildcards</h2>
In other use-cases, you might want to copy multiple files at once. Let's say we want to copy all <code>.txt</code> files in a directory. We can achieve this by using wildcards (<code>*</code>) in our file paths. The <code>glob</code> module in Python can be used to find all the pathnames matching a specified pattern according to the rules used by the Unix shell.
Here's is how we'd use the <code>glob</code> module to copy all <code>.txt</code> files from one directory to another:
<pre><code class="hljs">import glob
import shutil

# Define source and destination directories
src_dir = &quot;/path/to/source/directory/*.txt&quot;
dest_dir = &quot;/path/to/destination/directory/&quot;

# Use glob to get all .txt files in the source directory
txt_files = glob.glob(src_dir)

# Loop through the list of .txt files and copy each one
for file in txt_files:
 shutil.copy(file, dest_dir)
</code></pre>
In this code, we use <code>glob</code> to get a list of all text files in our source directory, which we then iterate over and copy each one individually.
After running this script, you'll see that all <code>.txt</code> files from the source directory have been copied to the destination directory.
<h2 id="copyingdirectoriesinpython">Copying Directories in Python</h2>
Copying individual files in Python is quite straightforward, as we've seen. But what if you want to copy an entire directory? While it sounds more complicated, this is actually pretty easy to do with the <code>shutil</code> module. The <code>copytree()</code> function allows you to copy directories, along with all the files and sub-directories within them.
<pre><code class="hljs">import shutil

shutil.copytree(&#x27;/path/to/source_directory&#x27;, &#x27;/path/to/destination_directory&#x27;)
</code></pre>
This will copy the entire directory at the source path to the destination path. If the destination directory doesn't exist, <code>copytree()</code> will create it.

 <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: If the destination directory already exists, <code>copytree()</code> will raise a <code>FileExistsError</code>. To avoid this, make sure the destination directory doesn't exist before you run the function.

 </div>
 </div>
 </div>
 <h2 id="errorhandlingandtypesoferrors">Error Handling and Types of Errors</h2>
When dealing with file operations in Python, it's important to handle potential errors. There are many types of errors you might encounter, with some of the more common ones being <code>FileNotFoundError</code>, <code>PermissionError</code>, and <code>IsADirectoryError</code>.
You can handle these errors using Python's <code>try/except</code> blocks like this:
<pre><code class="hljs">import shutil

try:
 shutil.copy2(&#x27;/path/to/source_file&#x27;, &#x27;/path/to/destination_file&#x27;)
except FileNotFoundError:
 print(&quot;The source or destination file was not found.&quot;)
except PermissionError:
 print(&quot;You don&#x27;t have permission to access the source or destination file.&quot;)
except IsADirectoryError:
 print(&quot;The source or destination path you provided is a directory, not a file.&quot;)
</code></pre>
In this example, we're using the <code>shutil.copy2()</code> function to copy a file. If the source or destination file doesn't exist, a <code>FileNotFoundError</code> is raised. If the user doesn't have the necessary permissions, a <code>PermissionError</code> is raised. If the source or destination path is a directory instead of a file, an <code>IsADirectoryError</code> is raised. Catching each error in this way allows you to handle each case in the appropriate way.
<h2 id="conclusion">Conclusion</h2>
In this article, we have showed different ways to copy files in Python. We saw how the Python's built-in <code>shutil</code> and <code>os</code> modules provide us with simple and powerful tools for file copying. We also showed how to employ wildcards to copy multiple files and how to copy entire directories.
And finally, we looked at a few different types of common errors that might occur during file operations and how to handle them. Understanding these errors can help you debug your code more efficiently and prevent issues, like data loss.

Scott Robinson

How to Copy Files in Python

<h2 id="introduction">Introduction</h2>
React.js uses a number of unique concepts that can initially seem a bit confusing. One such concept is the use of keys, particularly when working with component arrays. Why and how do we use these keys? This article aims to explain the use of unique keys for array children in React.
<h2 id="keysinreact">Keys in React</h2>
In React, a key is a string attribute you need to include when creating lists of elements. Let's take a look at a simple example:
<pre><code class="hljs">const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =&gt;
 &lt;li key={number.toString()}&gt;
 {number}
 &lt;/li&gt;
);
</code></pre>
In this example, we're creating a list of numbers. Each <code>&lt;li&gt;</code> element needs a unique key attribute. Here, we're using the string value of the number as the key.
These keys serve as a hint to React's reconciliation algorithm by giving elements a stable identity. They're not intended to be globally unique; they only need to be unique between components and their siblings.
But why do we need keys in the first place? Well, keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside an array to give the elements a stable identity, and therefore easier access.
It's worth noting that the best way to pick a key is to use a string that uniquely identifies a list item among its siblings. A common way to do that is to use IDs from your data as keys:
<pre><code class="hljs">const todoItems = todos.map((todo) =&gt;
 &lt;li key={todo.id}&gt;
 {todo.text}
 &lt;/li&gt;
);
</code></pre>
Here, we assume that <code>todos</code> is an array of objects with an <code>id</code> and a <code>text</code> attribute. The <code>id</code> of each <code>todo</code> object is unique, so it makes a good candidate for a key.
But what happens if you don't have a unique ID or string to use as a key? In that case, you might be tempted to use the item index as a key:
<pre><code class="hljs">const todoItems = todos.map((todo, index) =&gt;
 // Only do this if items have no stable IDs
 &lt;li key={index}&gt;
 {todo.text}
 &lt;/li&gt;
);
</code></pre>
However, this is generally not recommended. Index as a key is an anti-pattern in React because it can negatively impact performance and may cause issues with component state. It's better to use unique string identifiers if possible.
But why do we need these keys?
In React.js, whenever we create a list or array of elements, each element needs a unique <code>key</code> attribute. This might seem like an unnecessary step at first, but it's actually crucial for React's diffing algorithm, which helps optimize the rendering process.
When a component's state changes, React needs to determine whether to update the existing DOM or create a new one. This is where the diffing algorithm comes into play. It compares the new virtual DOM with the old one and updates only the parts that have changed.
he diffing algorithm increases performance by minimizing the amount of DOM manipulation.
By assigning a unique key to each element in a list, you're giving React a way to identify each element in the array. This allows React to efficiently re-render components or update the DOM. Without unique keys, React has to re-render all elements in the list, which can reduce performance, especially when dealing with large lists.
<h2 id="howtouseuniquekeyswitharraychildren">How to Use Unique Keys with Array Children</h2>
Now that we understand why unique keys are important, let's see how we can use them with array children. The most common scenario where you'll need to use unique keys is when rendering a list of elements based on an array of data.
Let's take a look at our previous example, but more in-depth. Here we have an array of to-do items and we want to render them into a list:
<pre><code class="hljs">const todos = [&#x27;Buy groceries&#x27;, &#x27;Walk the dog&#x27;, &#x27;Write article&#x27;];

return (
 &lt;ul&gt;
 {todos.map((todo, index) =&gt; (
 &lt;li key={index}&gt;{todo}&lt;/li&gt;
 ))}
 &lt;/ul&gt;
);
</code></pre>
In this example, we're using the array index as a key. This is a common practice, but it's not recommended if the order of items in your list can change. This is because the key should be stable between re-renders, and using the index as a key can cause issues if the order of items changes.
Here's how you could do that:
<pre><code class="hljs">const todos = [
 { id: &#x27;1&#x27;, text: &#x27;Buy groceries&#x27; },
 { id: &#x27;2&#x27;, text: &#x27;Walk the dog&#x27; },
 { id: &#x27;3&#x27;, text: &#x27;Write article&#x27; },
];

return (
 &lt;ul&gt;
 {todos.map((todo) =&gt; (
 &lt;li key={todo.id}&gt;{todo.text}&lt;/li&gt;
 ))}
 &lt;/ul&gt;
);
</code></pre>
In this example, each <code>todo</code> item is an object with a unique <code>id</code> and <code>text</code>. We're using the <code>id</code> as a key, which ensures that each element in the list has a unique key that remains stable between re-renders.
<h2 id="howtofixandavoidkeyrelatederrors">How to Fix and Avoid Key Related Errors</h2>
One of the most common errors that developers encounter when working with keys in React is the &quot;Warning: Each child in a list should have a unique 'key' prop&quot; warning. This warning appears when you forget to assign unique keys to your list items.
The simplest example we can show is where we're mapping over an array of numbers and returning a list of elements:
<pre><code class="hljs">const numbers = [1, 2, 3, 4, 5];

return (
 &lt;ul&gt;
 {numbers.map((number) =&gt;
 &lt;li&gt;{number}&lt;/li&gt;
 )}
 &lt;/ul&gt;
);
</code></pre>
You'll notice that we didn't provide a <code>key</code> prop to our list items. Running this code will result in the previous warning.
To fix this, we simply need to assign a unique key to each list item. In this case, we can use the array index as the key:
<pre><code class="hljs">const numbers = [1, 2, 3, 4, 5];

return (
 &lt;ul&gt;
 {numbers.map((number, index) =&gt;
 &lt;li key={index}&gt;{number}&lt;/li&gt;
 )}
 &lt;/ul&gt;
);
</code></pre>
<h2 id="otherkeyrelatederrors">Other Key Related Errors</h2>
Another common key-related issue in React is using keys that are not unique. This can lead to unexpected behavior, as React relies on keys to correctly identify elements.
For instance, consider the following example:
<pre><code class="hljs">const numbers = [1, 2, 3, 4, 5, 5];

return (
 &lt;ul&gt;
 {numbers.map((number) =&gt;
 &lt;li key={number}&gt;{number}&lt;/li&gt;
 )}
 &lt;/ul&gt;
);
</code></pre>
In this case, we have two <code>5</code>s in our array, which means two list items will have the same key. This will result in a new warning: &quot;Encountered two children with the same key&quot;.
To fix this error, you need to ensure that your keys are unique. You could do this by appending the index to the number:
<pre><code class="hljs">const numbers = [1, 2, 3, 4, 5, 5];

return (
 &lt;ul&gt;
 {numbers.map((number, index) =&gt;
 &lt;li key={number + &#x27;-&#x27; + index}&gt;{number}&lt;/li&gt;
 )}
 &lt;/ul&gt;
);
</code></pre>
In this code, even if the numbers are the same, the keys will be unique because the index is part of the key.
Although, as mentioned a few times before, using the array index as a key is not recommended.
<h2 id="conclusion">Conclusion</h2>
In this article, we've taken a look at the concept of unique keys for array children in React.js. Like what keys in React are, why we need unique keys, how to use them with array children, and how to fix and avoid key related errors.
So, the next time you're mapping over an array in React, remember to give each child a unique key. It's a small step that can save you from a lot of potential headaches down the line.

Understanding Unique Keys for Array Children in React.js

<h2 id="introduction">Introduction</h2>
As a web developer, you've likely encountered the need to persist data across different sessions or even tabs in a browser. This is where HTML5's localStorage and sessionStorage come in handy. These two web storage objects allow you to store data right in the user's browser, no server-side code required.
In this article, we'll take a look at what these storage objects are, and how you can utilize them to store your JavaScript objects.
<h2 id="whatislocalstoragesessionstorage">What is localStorage/sessionStorage?</h2>
localStorage and sessionStorage are part of the Web Storage API, which provides consistent ways for browsers to store key/value pairs. These pairs are kept in a web browser with no expiration date in the case of localStorage, and for the duration of the page session in case of sessionStorage.
Here's a simple way to think about it:
<ul>
<li><code>localStorage</code> is like a box in your garage where you store things you might need later. It's just always there. It persists across different sessions and even if you close and reopen your browser.</li>
<li><code>sessionStorage</code>, on the other hand, is like a backpack you carry around. It only lasts as long as your &quot;journey&quot; (or in web terms, your session). If you close the tab or the browser, the data vanishes.</li>
</ul>
Here's a basic example of how to use them:
<pre><code class="hljs">// Storing data
localStorage.setItem(&#x27;key&#x27;, &#x27;value&#x27;);
sessionStorage.setItem(&#x27;key&#x27;, &#x27;value&#x27;);

// Retrieving data
let localValue = localStorage.getItem(&#x27;key&#x27;);
let sessionValue = sessionStorage.getItem(&#x27;key&#x27;);
</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: Both localStorage and sessionStorage are limited to storing string data only. So, if you want to store objects, you'll need to convert them into strings using <code>JSON.stringify()</code>. We'll cover this in later sections.

 </div>
 </div>
 </div>
 While these storage objects are incredibly useful, they shouldn't be used for sensitive data like passwords or credit card information, as the data is not encrypted and can be accessed by any script on your site.
<h2 id="howtostoreobjectsinlocalstorage">How to Store Objects in localStorage</h2>
Now that we have a better understanding of what <code>localStorage</code> is, let's look at how to actually do it. As mentioned earlier, <code>localStorage</code> can only store strings. So, we'll need to convert our object to a string before storing it.
Here's an example of how you might do this:
<pre><code class="hljs">let user = {
 name: &#x27;John Doe&#x27;,
 email: &#x27;john.doe@example.com&#x27;
};

// Convert the user object into a string using JSON.stringify
let userString = JSON.stringify(user);

// Store the stringified user object in localStorage
localStorage.setItem(&#x27;user&#x27;, userString);
</code></pre>
In this code, we first create a <code>user</code> object with <code>name</code> and <code>email</code> properties. We then convert this object into a string using the <code>JSON.stringify</code> method. This method takes an object and returns a string representation of that object.
Finally, we store the stringified object in <code>localStorage</code> using the <code>setItem</code> method. This method takes two arguments: the key to store the data under, and the data itself.
Now, if you open your browser's developer tools and navigate to the Application tab, you should see your stored data under the localStorage section.

 <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>JSON.stringify</code> method can also be used to convert arrays and other complex data types to a string format. This makes it a versatile tool for storing a wide range of data in <code>localStorage</code>.

 </div>
 </div>
 </div>
 <h2 id="howtostoreobjectsinsessionstorage">How to Store Objects in sessionStorage</h2>
Just like localStorage, sessionStorage also provides the ability to store key-value pairs. However, there is a key difference between the two: sessionStorage retains data for only as long as the session is active - that is, until the user closes the tab or browser. This can be useful for storing temporary data like form inputs, or other session-specific information.
Let's see how we can store objects in sessionStorage. Just like with localStorage, we cannot directly store objects as they are. We first need to convert them into a string using <code>JSON.stringify()</code>. Here's an example:
<pre><code class="hljs">let user = {
 name: &#x27;John Doe&#x27;,
 age: 25,
 email: &#x27;johndoe@example.com&#x27;
};

// Convert the user object into a string
let userString = JSON.stringify(user);

// Store the stringified object in sessionStorage
sessionStorage.setItem(&#x27;user&#x27;, userString);
</code></pre>
In the above example, we first define an object <code>user</code> with some properties. We then convert this object into a string using <code>JSON.stringify()</code>, and store it in sessionStorage using <code>sessionStorage.setItem()</code>.
<h2 id="retrievingstoredobjectsfromlocalstoragesessionstorage">Retrieving Stored Objects from localStorage/sessionStorage</h2>
Now that we've stored our objects in localStorage or sessionStorage, we'll likely want to retrieve them at some point. The process for this is fairly straightforward, but does require a couple of steps due to the fact that we've stored our objects as strings.
Here's how we can retrieve our <code>user</code> object from sessionStorage:
<pre><code class="hljs">// Get the stringified object from sessionStorage
let userString = sessionStorage.getItem(&#x27;user&#x27;);

// Parse the string back into an object
let user = JSON.parse(userString);

console.log(user);
</code></pre>
When we run this code, we'll see our original <code>user</code> object logged to the console:
<pre><code class="hljs">{
 name: &#x27;John Doe&#x27;,
 age: 25,
 email: &#x27;johndoe@example.com&#x27;
}
</code></pre>
The process for retrieving objects from localStorage is identical, just replace <code>sessionStorage</code> with <code>localStorage</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">
 Note: Make sure to always use <code>JSON.parse()</code> when retrieving objects from localStorage or sessionStorage. If you forget to do this, you'll be working with a string representation of your object, rather than the object itself.

 </div>
 </div>
 </div>
 <h2 id="conclusion">Conclusion</h2>
In this article, we've covered the basics of how to store, retrieve, and work with objects in HTML5's localStorage and sessionStorage. We've seen how these web storage mechanisms can provide a simple and effective way to persist data across browser sessions, all while maintaining a high level of performance and security.
One common use case for localStorage and sessionStorage is storing user preferences. For example, if a user prefers a dark theme for your website, you could store this preference in localStorage and apply it every time the user visits.
Here's a quick recap of what we covered:
<ul>
<li>localStorage and sessionStorage are web storage mechanisms provided by HTML5.</li>
<li>localStorage persists data across sessions, while sessionStorage only persists data for the duration of the current session.</li>
<li>You can store objects in localStorage or sessionStorage by converting them to a string format using <code>JSON.stringify()</code>.</li>
<li>You can retrieve objects from localStorage or sessionStorage by parsing the stored string back into an object using <code>JSON.parse()</code>.</li>
</ul>

Storing Objects in localStorage/sessionStorage

<h2 id="introduction">Introduction</h2>
JavaScript, although only single-threaded, is an asynchronous language. In the beginning, it only used callbacks for asynchronous tasks, but ES6 introduced the concept of a promise, which made these tasks much easier to work with.
The problem, however, is that many of the early libraries and APIs use callbacks, and there isn't always a straightforward way to convert these to using promises to better work with the rest of your code.
In this article, we'll aim to guide you through the process of converting an existing callback API to promises.
<h2 id="callbacksvspromises">Callbacks vs Promises</h2>
In JavaScript, a callback is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of action. Here's a simple example of a callback:
<pre><code class="hljs">function greeting(name, callback) {
 console.log(&#x27;Hello &#x27; + name);
 callback();
}

greeting(&#x27;John&#x27;, function() {
 console.log(&#x27;The callback was invoked inside of `greeting()`!&#x27;);
});
</code></pre>
In this example, the <code>greeting</code> function takes a name and a callback function as parameters. It first logs a greeting message and then invokes the callback function.
Promises, on the other hand, represent a value that may not be available yet, but will be resolved at some point in the future or rejected altogether. A promise has three states: pending, fulfilled, and rejected. Here's an equivalent promise for the previous callback example:
<pre><code class="hljs">let greeting = new Promise(function(resolve, reject) {
 let name = &#x27;John&#x27;;
 console.log(&#x27;Hello &#x27; + name);
 resolve();
});

greeting.then(function() {
 console.log(&#x27;The promise was fulfilled!&#x27;);
});
</code></pre>
In this case, the <code>greeting</code> promise logs a message and then calls the <code>resolve</code> function. The <code>then</code> method is used to schedule a callback when the promise is fulfilled.
Promises are more powerful than callbacks for a few reasons. They allow better control over the flow of asynchronous operations, provide better error handling, and help avoid the infamous <a target="_blank" href="https://stackabuse.com/avoiding-callback-hell-in-node-js/">callback hell</a>.
While callbacks are straightforward and easy to understand, promises provide more control and flexibility when dealing with asynchronous operations. They also make your code cleaner and easier to read, which is why many developers prefer them over callbacks.
<h2 id="howconvertingcallbacksapistopromises">How Converting Callbacks APIs to Promises</h2>
Converting a callback API to promises involves wrapping the callback function inside a promise. Let's take a look at an example. Suppose we have a function <code>getData</code> that uses a callback to handle asynchronous operations:
<pre><code class="hljs">function getData(callback) {
 // Simulate async operation
 setTimeout(() =&gt; {
 const data = &#x27;Hello, world!&#x27;;
 callback(null, data);
 }, 2000);
}
</code></pre>
To use this function, we would typically pass a callback function to handle the result:
<pre><code class="hljs">getData((err, data) =&gt; {
 if (err) {
 console.error(err);
 } else {
 console.log(data); // Outputs: Hello, world!
 }
});
</code></pre>
To convert this to a promise, we can create a new function that returns a promise:
<pre><code class="hljs">function getDataPromise() {
 return new Promise((resolve, reject) =&gt; {
 getData((err, data) =&gt; {
 if (err) {
 reject(err);
 } else {
 resolve(data);
 }
 });
 });
}
</code></pre>
Now, we can use the <code>then</code> and <code>catch</code> methods of the promise to handle the result:
<pre><code class="hljs">getDataPromise()
 .then(data =&gt; console.log(data)) // Outputs: Hello, world!
 .catch(err =&gt; console.error(err));
</code></pre>
Now the promise-based version of the function is much easier to read and understand, especially when dealing with multiple asynchronous operations.
<h2 id="usingthebluebirdlibrary">Using the Bluebird Library</h2>
Bluebird is a fully-featured Promise library for JavaScript. It's lightweight, robust, and capable of converting existing callback-based APIs into Promise-based ones.
To start using Bluebird, first install it via npm:
<pre><code class="hljs">$ npm install bluebird
</code></pre>
Once installed, you can convert a callback API to a Promise using the <code>Promise.promisifyAll()</code> function. This function takes an object and returns a new object with the same methods, but these methods return Promises instead of taking callbacks.
Here's a basic example:
<pre><code class="hljs">const Promise = require(&#x27;bluebird&#x27;);
const fs = Promise.promisifyAll(require(&#x27;fs&#x27;));

fs.readFileAsync(&quot;example.txt&quot;, &quot;utf8&quot;).then(function(contents) {
 console.log(contents);
}).catch(function(err) {
 console.error(err);
});
</code></pre>
In this code, <code>fs.readFileAsync</code> is a Promise-based version of <code>fs.readFile</code>. When you call it, it returns a Promise that fulfills with the contents of the file.

 <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: You might notice that all the asynchronous methods in the <code>fs</code> module now end with <code>Async</code>. This is a naming convention used by Bluebird to distinguish the Promise-based methods from their callback-based counterparts.

 </div>
 </div>
 </div>
 <h2 id="convertingnestedcallbackstopromises">Converting Nested Callbacks to Promises</h2>
Nested callbacks can be really difficult to deal with. They can make your code hard to read and understand. Fortunately, Promises can help to flatten your code and make it more manageable.
Let's consider the following nested callback scenario:
<pre><code class="hljs">getData(&#x27;data.json&#x27;, function(err, data) {
 if (err) {
 console.error(err);
 } else {
 parseData(data, function(err, parsedData) {
 if (err) {
 console.error(err);
 } else {
 saveData(&#x27;parsedData.json&#x27;, parsedData, function(err) {
 if (err) {
 console.error(err);
 } else {
 console.log(&#x27;Data saved successfully&#x27;);
 }
 });
 }
 });
 }
});
</code></pre>
The above code is a classic example of callback hell. It's hard to read and error-prone. Now, let's convert this to Promises using Bluebird:
<pre><code class="hljs">const Promise = require(&#x27;bluebird&#x27;);
const getDataAsync = Promise.promisify(getData);
const parseDataAsync = Promise.promisify(parseData);
const saveDataAsync = Promise.promisify(saveData);

getDataAsync(&#x27;data.json&#x27;)
 .then(parseDataAsync)
 .then(saveDataAsync)
 .then(() =&gt; console.log(&#x27;Data saved successfully&#x27;))
 .catch(console.error);
</code></pre>
As you can see, the Promise-based version is much easier to read and understand. It's also more robust, as any error that occurs at any stage will be caught by the single <code>.catch()</code> at the end.
<h2 id="conclusion">Conclusion</h2>
In this article, we've looked at how to convert existing callback APIs to promises in Node.js. We have explored the differences between callbacks and promises, and why it can be beneficial to convert callbacks to promises. We've looked at how to perform this conversion, and how the Bluebird library can help simplify this process. We also discussed how to handle nested callbacks and convert them to promises.
The process of converting callbacks to promises can be a bit tricky, especially when dealing with nested callbacks. But with practice and the help of libraries like Bluebird, you can streamline this process and improve your codebase.

Converting Callback APIs to Promises in Node.js

<h2 id="introduction">Introduction</h2>
Even with a &quot;simple&quot; language like Python, it's not immune to performance issues. As your codebase grows, you may start to notice that certain parts of your code are running slower than expected. This is where profiling comes into play. Profiling is an important tool in every developer's toolbox, allowing you to identify bottlenecks in your code and optimize it accordingly.
<h2 id="profilingandwhyyoushoulddoit">Profiling and Why You Should Do It</h2>
Profiling, in the context of programming, is the process of analyzing your code to understand where computational resources are being used. By using a profiler, you can gain insights into which parts of your code are running slower than expected and why. This can be due to a variety of reasons like inefficient algorithms, unnecessary computations, bugs, or memory-intensive operations.

 <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: Profiling and debugging are very different operations. However, profiling can be used in the process of debugging as it can both help you optimize your code and find issues via performance metrics.

 </div>
 </div>
 </div>
 Let's consider an example. Suppose you've written a Python script to analyze a large dataset. The script works fine with a small subset of data, but as you increase the size of the dataset, the script takes an increasingly long time to run. This is a classic sign that your script may need optimization.
Here's a simple Python script that calculates the factorial of a number using recursion:
<pre><code class="hljs">def factorial(n):
 if n == 0:
 return 1
 else:
 return n * factorial(n-1)

print(factorial(5))
</code></pre>
When you run this script, it outputs <code>120</code> which is the factorial of <code>5</code>. However, if you try to calculate the factorial of a very large number, say <code>10000</code>, you'll notice that the script takes a considerable amount of time to run. This is a perfect candidate for profiling and optimization.
<h2 id="overviewofpythonprofilingtools">Overview of Python Profiling Tools</h2>
Profiling is a crucial aspect of software development, particularly in Python where the dynamic nature of the language can sometimes lead to unexpected performance bottlenecks. Fortunately, Python provides a rich ecosystem of profiling tools that can help you identify these bottlenecks and optimize your code accordingly.
The built-in Python profiler is <code>cProfile</code>. It's a module that provides deterministic profiling of Python programs. A profile is a set of statistics that describes how often and for how long various parts of the program executed.

 <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: Deterministic profiling means that every function call, function return, exception, and other CPU-intensive tasks are monitored. This can provide a very detailed view of your application's performance, but it can also slow down your application.

 </div>
 </div>
 </div>
 Another popular Python profiling tool is <code>line_profiler</code>. It is a module for doing line-by-line profiling of functions. Line profiler gives you a line-by-line report of time execution, which can be more helpful than the function-by-function report that cProfile provides.
There are other profiling tools available for Python, such as <code>memory_profiler</code> for profiling memory usage, <code>py-spy</code> for sampling profiler, and <code>Py-Spy</code> for visualizing profiler output. The choice of which tool to use depends on your specific needs and the nature of the performance issues you're facing.
<h2 id="howtoprofileapythonscript">How to Profile a Python Script</h2>
Now that we've covered the available tools, let's move on to how to actually profile a Python script. We'll take a look at both <code>cProfile</code> and <code>line_profiler</code>.
<h3 id="usingcprofile">Using cProfile</h3>
We'll start with the built-in <code>cProfile</code> module. This module can either be used as a command line utility or within your code directly. We'll first look at how to use it in your code.
First, import the <code>cProfile</code> module and run your script within its <code>run</code> function. Here's an example:
<pre><code class="hljs">import cProfile
import re

def test_func():
 re.compile(&quot;test|sample&quot;)

cProfile.run(&#x27;test_func()&#x27;)
</code></pre>
When you run this script, <code>cProfile</code> will output a table with the number of calls to each function, the time spent in each function, and other useful information.
The ouptut might look something like this:
<pre><code class="hljs"> 234 function calls (229 primitive calls) in 0.001 seconds

 Ordered by: standard name

 ncalls tottime percall cumtime percall filename:lineno(function)
 1 0.000 0.000 0.001 0.001 &lt;stdin&gt;:1(test_func)
 1 0.000 0.000 0.001 0.001 &lt;string&gt;:1(&lt;module&gt;)
 1 0.000 0.000 0.001 0.001 re.py:192(compile)
 1 0.000 0.000 0.001 0.001 re.py:230(_compile)
 1 0.000 0.000 0.000 0.000 sre_compile.py:228(_compile_charset)
 1 0.000 0.000 0.000 0.000 sre_compile.py:256(_optimize_charset)
 1 0.000 0.000 0.000 0.000 sre_compile.py:433(_compile_info)
 2 0.000 0.000 0.000 0.000 sre_compile.py:546(isstring)
 1 0.000 0.000 0.000 0.000 sre_compile.py:552(_code)
 1 0.000 0.000 0.001 0.001 sre_compile.py:567(compile)
 3/1 0.000 0.000 0.000 0.000 sre_compile.py:64(_compile)
 5 0.000 0.000 0.000 0.000 sre_parse.py:138(__len__)
 16 0.000 0.000 0.000 0.000 sre_parse.py:142(__getitem__)
 11 0.000 0.000 0.000 0.000 sre_parse.py:150(append)
# ...
</code></pre>
Now let's see how we can use it as a command line utility. Assume we have the following script:
<pre><code class="hljs">def calculate_factorial(n):
 if n == 1:
 return 1
 else:
 return n * calculate_factorial(n-1)

def main():
 print(calculate_factorial(10))

if __name__ == &quot;__main__&quot;:
 main()
</code></pre>
To profile this script, you can use the <code>cProfile</code> module from the command line as follows:
<pre><code class="hljs">$ python -m cProfile script.py
</code></pre>
The output will show how many times each function was called, how much time was spent in each function, and other useful information.
<h3 id="usinglineprofiler">Using Line Profiler</h3>
While <code>cProfile</code> provides useful information, it might not be enough if you need to profile your code line by line. This is where the <code>line_profiler</code> tool comes in handy. It's an external tool that provides line-by-line profiling statistics for your Python programs.
First, you need to install it using pip:
<pre><code class="hljs">$ pip install line_profiler
</code></pre>
Let's use <code>line_profiler</code> to profile the same script we used earlier. To do this, you need to add a decorator to the function you want to profile:
<pre><code class="hljs">from line_profiler import LineProfiler

def profile(func):
 profiler = LineProfiler()
 profiler.add_function(func)
 return profiler(func)

@profile
def calculate_factorial(n):
 if n == 1:
 return 1
 else:
 return n * calculate_factorial(n-1)

def main():
 print(calculate_factorial(10))

if __name__ == &quot;__main__&quot;:
 main()
</code></pre>
Now, if you run your script, <code>line_profiler</code> will output statistics for each line in the <code>calculate_factorial</code> function.
Remember to use the <code>@profile</code> decorator sparingly, as it can significantly slow down your code.
Profiling is an important part of optimizing your Python scripts. It helps you to identify bottlenecks and inefficient parts of your code. With tools like <code>cProfile</code> and <code>line_profiler</code>, you can get detailed statistics about the execution of your code and use this information to optimize it.
<h2 id="interpretingprofilingresults">Interpreting Profiling Results</h2>
After running a profiling tool on your Python script, you'll be presented with a table of results. But what do these numbers mean? How can you make sense of them? Let's break it down.
The results table typically contains columns like <code>ncalls</code> for the number of calls, <code>tottime</code> for the total time spent in the given function excluding calls to sub-functions, <code>percall</code> referring to the quotient of <code>tottime</code> divided by <code>ncalls</code>, <code>cumtime</code> for the cumulative time spent in this and all subfunctions, and <code>filename:lineno(function)</code> providing the respective data of each function.
Here's a sample output from <code>cProfile</code>:
<pre><code class="hljs"> 5 function calls in 0.000 seconds

 Ordered by: standard name

 ncalls tottime percall cumtime percall filename:lineno(function)
 1 0.000 0.000 0.000 0.000 &lt;ipython-input-1-9e8e3c5c3b72&gt;:1(&lt;module&gt;)
 1 0.000 0.000 0.000 0.000 {built-in method builtins.exec}
 1 0.000 0.000 0.000 0.000 {built-in method builtins.len}
 1 0.000 0.000 0.000 0.000 {method &#x27;disable&#x27; of &#x27;_lsprof.Profiler&#x27; objects}
</code></pre>
The <code>tottime</code> and <code>cumtime</code> columns are particularly important as they help identify which parts of your code are consuming the most time.

 <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 output is sorted by the function name, but you can sort it by any other column by passing the <code>sort</code> parameter to the <code>print_stats</code> method. For example, <code>p.print_stats(sort='cumtime')</code> would sort the output by cumulative time.

 </div>
 </div>
 </div>
 <h2 id="optimizationtechniquesbasedonprofilingresults">Optimization Techniques Based on Profiling Results</h2>
Once you've identified the bottlenecks in your code, the next step is to optimize them. Here are some general techniques you can use:
<ul>
<li>
Avoid unnecessary computations: If your profiling results show that a function is called multiple times with the same arguments, consider using memoization techniques to store and reuse the results of expensive function calls.
</li>
<li>
Use built-in functions and libraries: Built-in Python functions and libraries are usually optimized for performance. If you find that your custom code is slow, see if there's a built-in function or library that can do the job faster.
</li>
<li>
Optimize data structures: The choice of data structure can greatly affect performance. For example, if your code spends a lot of time searching for items in a list, consider using a set or a dictionary instead, which can do this much faster.
</li>
</ul>
Let's see an example of how we can optimize a function that calculates the Fibonacci sequence. Here's the original code:
<pre><code class="hljs">def fib(n):
 if n &lt;= 1:
 return n
 else:
 return(fib(n-1) + fib(n-2))
</code></pre>
Running a profiler on this code will show that the <code>fib</code> function is called multiple times with the same arguments. We can optimize this using a technique called memoization, which stores the results of expensive function calls and reuses them when needed:
<pre><code class="hljs">def fib(n, memo={}):
 if n &lt;= 1:
 return n
 else:
 if n not in memo:
 memo[n] = fib(n-1) + fib(n-2)
 return memo[n]
</code></pre>
With these optimizations, the <code>fib</code> function is now significantly faster, and the profiling results will reflect this improvement.
Remember, the key to efficient code is not to optimize everything, but rather focus on the parts where it really counts - the bottlenecks. Profiling helps you identify these bottlenecks, so you can spend your optimization efforts where they'll make the most difference.
<h2 id="conclusion">Conclusion</h2>
After reading this article, you should have a good understanding of how to profile a Python script. We've discussed what profiling is and why it's crucial for optimizing your code. We've also introduced you to a couple of Python profiling tools, namely <code>cProfile</code>, a built-in Python profiler, and Line Profiler, an advanced profiling tool.
We've walked through how to use these tools to profile a Python script and how to interpret the results. Based on these results, you've learned some optimization techniques that can help you improve the performance of your code.
Just remember that profiling is a powerful tool, but it's not a silver bullet. It can help you identify bottlenecks and inefficient code, but it's up to you to come up with the solutions.
In my experience, the time invested in learning and applying profiling techniques has always paid off in the long run. Not only does it lead to more efficient code, but it also helps you become a more proficient and knowledgeable Python programmer.

Guide to Profiling Python Scripts

<h2 id="introduction">Introduction</h2>
In Python, dictionaries are one of the most flexible built-in data types. They are great for structuring data and can help you solve a myriad of problems. But what if I told you there's a more powerful version of dictionaries that you might not have heard of? Yep, I'm talking about the <code>collections.defaultdict</code> type.
In this article, we'll explore what a <code>defaultdict</code> is and how it differs from a regular Python dictionary (or <code>dict</code> for short).
<h2 id="whatisadict">What is a dict?</h2>
A <code>dict</code>, or dictionary, is a built-in Python data type that stores mutable, unordered collections of key-value pairs. Each key-value pair in the dictionary maps the key to its associated value, making it easier to retrieve values for specific keys.
<pre><code class="hljs">student = {
 &quot;name&quot;: &quot;John Doe&quot;,
 &quot;age&quot;: 20,
 &quot;courses&quot;: [&quot;Math&quot;, &quot;Science&quot;]
}

print(student[&quot;name&quot;])
# Output: John Doe
</code></pre>
In this code, the keys are &quot;name&quot;, &quot;age&quot;, and &quot;courses&quot;, and they each have associated values. You can access any value by its key, as we did with <code>student[&quot;name&quot;]</code>.
But what happens when you try to access a key that doesn't exist in the dictionary? Well, Python throws a <code>KeyError</code>:
<pre><code class="hljs">print(student[&quot;grade&quot;])
# Output: KeyError: &#x27;grade&#x27;
</code></pre>
This is one of the limitations of a normal dictionary. It doesn't handle missing keys very well. In real-world applications, this can cause your program to crash if you're not careful. This is where <code>defaultdicts</code> come into play, but we'll get into that later in the article.

 <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: You can avoid <code>KeyError</code> exceptions in normal dictionaries by using the <code>get</code> method, which returns <code>None</code> if the key is not found. However, this isn't always ideal, especially when you want to provide a default value other than <code>None</code>.
<pre><code class="hljs">print(student.get(&quot;grade&quot;))
# Output: None
</code></pre>

 </div>
 </div>
 </div>
 <h2 id="whatisadefaultdict">What is a defaultdict?</h2>
A <code>defaultdict</code> is a specialized dictionary provided by the <code>collections</code> module in Python. It's a subclass of the built-in <code>dict</code> class. So, what makes it so special? Well, it doesn't throw a <code>KeyError</code> when you try to access or modify keys that aren't actually in the dictionary. Instead, it initializes it with an element of the data type that you pass as an argument at the creation of <code>defaultdict</code>. This can be very useful when you're working with large data structures.
Let's take a quick look at how you would initialize a <code>defaultdict</code>:
<pre><code class="hljs">from collections import defaultdict

# Initializing with list as default_factory
dd = defaultdict(list)
</code></pre>
In the example above, if you try to access a key that doesn't exist, Python will return an empty list <code>[]</code> instead of throwing a <code>KeyError</code>.
<pre><code class="hljs">print(dd[&quot;non_existent_key&quot;])
# Output: []
</code></pre>
The argument you pass while initializing <code>defaultdict</code> is called <code>default_factory</code>. It's a function that provides the default value for the dictionary created. If this argument is absent, then the <code>defaultdict</code> essentially behaves like a normal <code>dict</code>.
<h2 id="keydifferences">Key Differences</h2>
Now that we understand what a <code>defaultdict</code> is, let's take a look at the key differences between a <code>defaultdict</code> and a typical Python dictionary.
<ul>
<li>Default Values: The most significant difference, as we've already seen, is that <code>defaultdict</code> automatically assigns a default value to a non-existent key. This is in different than a standard <code>dict</code>, which raises a <code>KeyError</code> when you try to access or modify a non-existent key.</li>
</ul>
<pre><code class="hljs"># Standard dict
d = {}
print(d[&quot;non_existent_key&quot;])
# Output: KeyError: &#x27;non_existent_key&#x27;

# Defaultdict
from collections import defaultdict
dd = defaultdict(int)
print(dd[&quot;non_existent_key&quot;])
# Output: 0
</code></pre>
<ul>
<li>Initialization: While initializing a <code>defaultdict</code>, you need to provide a <code>default_factory</code> function which will decide the default value for the non-existent keys. On the other hand, a standard <code>dict</code> doesn't require or support this.</li>
</ul>
<pre><code class="hljs">d = {} # Standard dict
dd = defaultdict(list) # Defaultdict
</code></pre>
<ul>
<li>Use Cases: <code>defaultdict</code> is more useful when you're dealing with large data sets where you want to avoid handling <code>KeyError</code> exceptions. It's commonly used for grouping, counting, or accumulating operations.</li>
</ul>
<h2 id="whentousedefaultdictvsdict">When to Use defaultdict vs dict</h2>
Of course, the choice between <code>defaultdict</code> and <code>dict</code> depends on your specific needs. If you're dealing with a situation where you want to avoid key errors and you know in advance what kind of default value you'd want for non-existing keys, <code>defaultdict</code> is the way to go.
Let's say you're building a dictionary to count the frequency of words in a text. With a normal dictionary, you'd have to check if a word is already a key in the dictionary before incrementing its count. With <code>defaultdict</code>, you can simply set the default value type as <code>int</code> and increment the count without any checks.
On the other hand, if you want your program to throw an error when a non-existent key is accessed, or if you don't have a clear default value, a regular <code>dict</code> may be more suitable.
<h2 id="howtousedefaultdict">How to Use defaultdict</h2>
Using <code>defaultdict</code> is quite straightforward. You start by importing it from the <code>collections</code> module. Then, when you create a <code>defaultdict</code>, you pass in the default type for the dictionary. This could be <code>int</code>, <code>list</code>, <code>set</code>, <code>dict</code>, or even a user-defined function.
Let's take a look at an example. Suppose we want to create a dictionary to store the grades of students in different subjects. We can use a <code>defaultdict</code> with a list as the default type:
<pre><code class="hljs">from collections import defaultdict

# Create a defaultdict with list as the default type
grades = defaultdict(list)

# Add grades
grades[&#x27;Math&#x27;].append(85)
grades[&#x27;English&#x27;].append(90)

print(grades)
</code></pre>
When you run this code, you'll get the following output:
<pre><code class="hljs">defaultdict(&lt;class &#x27;list&#x27;&gt;, {&#x27;Math&#x27;: [85], &#x27;English&#x27;: [90]})
</code></pre>
As you can see, we didn't have to check if &quot;Math&quot; or &quot;English&quot; were already keys in the dictionary. We were able to directly append the grades. If we try to access the grades for a subject that hasn't been added yet, we'll get an empty list instead of a key error:
<pre><code class="hljs">print(grades[&#x27;Science&#x27;])
</code></pre>
This will output:
<pre><code class="hljs">[]
</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: Remember that the default type you pass to <code>defaultdict</code> is a function, not a value. So, you should pass <code>list</code> instead of <code>[]</code>, or <code>int</code> instead of <code>0</code>.

 </div>
 </div>
 </div>
 <h2 id="howtousedict">How to Use dict</h2>
The Python <code>dict</code> is a built-in data type used to store data in key-value pairs. Here's a simple example of how to use it:
<pre><code class="hljs"># Creating a dictionary
my_dict = {&#x27;name&#x27;: &#x27;John&#x27;, &#x27;age&#x27;: 30}

# Accessing a value
print(my_dict[&#x27;name&#x27;]) # Output: John

# Updating a value
my_dict[&#x27;age&#x27;] = 31
print(my_dict[&#x27;age&#x27;]) # Output: 31

# Adding a new key-value pair
my_dict[&#x27;job&#x27;] = &#x27;Engineer&#x27;
print(my_dict) # Output: {&#x27;name&#x27;: &#x27;John&#x27;, &#x27;age&#x27;: 31, &#x27;job&#x27;: &#x27;Engineer&#x27;}
</code></pre>
One thing to remember when using <code>dict</code> is that it will raise a <code>KeyError</code> if you try to access a key that doesn't exist:
<pre><code class="hljs">print(my_dict[&#x27;hobby&#x27;]) # Raises KeyError: &#x27;hobby&#x27;
</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: To avoid this, you can use the <code>get()</code> method, which returns <code>None</code> or a default value of your choice if the key doesn't exist.

 </div>
 </div>
 </div>
 <pre><code class="hljs">print(my_dict.get(&#x27;hobby&#x27;)) # Output: None
print(my_dict.get(&#x27;hobby&#x27;, &#x27;default&#x27;)) # Output: default
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we've taken a deeper dive into the world of Python dictionaries, focusing specifically on the <code>dict</code> and <code>collections.defaultdict</code> types. We've explored their key differences, like how <code>defaultdict</code> provides a default value for non-existent keys, thus avoiding <code>KeyError</code> exceptions. We've also looked at their use-cases, with <code>dict</code> being better for scenarios where you need to strictly control what keys exist in your dictionary, and <code>defaultdict</code> being more useful when you're dealing with large datasets and need to avoid constant key existence checks.

Differences Between Python's defaultdict and dict

<h2 id="introduction">Introduction</h2>
Dealing with data structures in JavaScript can sometimes be tricky, especially when we encounter things like circular structures. In this article, we'll explore what circular structures are, why they pose challenges when we try to print them in a JSON format, and how we can get this to work for our use-case.
<h2 id="circularstructuresinjavascript">Circular Structures in JavaScript</h2>
In JavaScript, a circular structure is an object that references itself, either directly or indirectly. This means that an object's property refers back to the object, forming a loop or &quot;circle&quot; of references. Here's a simple example:
<pre><code class="hljs">let circularObject = {};
circularObject.myself = circularObject;
</code></pre>
In this example, <code>circularObject</code> is a circular structure because the <code>myself</code> property refers back to <code>circularObject</code> itself.
Circular structures can also be more complex, with nested objects that eventually reference the parent object, or even arrays where an element refers back to the array.
<pre><code class="hljs">let circularObject = {
 child: {
 parent: circularObject
 }
};

let circularArray = [1, 2, 3];
circularArray.push(circularArray);
</code></pre>
In the first example, the <code>parent</code> property of the <code>child</code> object refers back to <code>circularObject</code>. In the second example, we add <code>circularArray</code> as an element of itself.
While circular structures may be useful in certain scenarios, they will cause problems when we want to convert them to a string format like JSON. In the next sections, we'll explore why this is the case and how we can print circular structures in a JSON-like format.
<h2 id="whyjsonstringifyfailswithcircularstructures">Why JSON.stringify() Fails with Circular Structures</h2>
Unfortunately, as you'll see, the <code>JSON.stringify()</code> method isn't able to properly handle circular structures.
When <code>JSON.stringify()</code> encounters such a structure, it throws the error <code>TypeError: Converting circular structure to JSON</code> or <code>TypeError: cyclic object value</code>. This is because the method attempts to access the object's properties recursively, but in the case of a circular structure, this would result in an infinite loop.
<pre><code class="hljs">let circularObject = {};
circularObject.myself = circularObject;

try {
 JSON.stringify(circularObject);
} catch (e) {
 console.error(e.toString());
}
</code></pre>
Running this code will result in the following output:
<pre><code class="hljs">$ node circular.js
TypeError: Converting circular structure to JSON
</code></pre>
The error is thrown because <code>JSON.stringify()</code> is basically trying to access <code>circularObject.myself.myself.myself...</code> (and so on).
<h2 id="printingcircularstructures">Printing Circular Structures</h2>
So, how can we print circular structures in a JSON-like format? Thankfully, there are a few methods we can use to get around the limitations of <code>JSON.stringify()</code>.
One way is to use a custom replacer function with <code>JSON.stringify()</code>. And another way is to use the <code>util</code> package's <code>inspect()</code> function, both of which we'll go into in more detail in the following sections.
<h2 id="usingjsonstringifywithacustomreplacerfunction">Using JSON.stringify() with a Custom Replacer Function</h2>
When dealing with circular structures in JavaScript, the <code>JSON.stringify()</code> method can be a bit tricky. As we've discussed, it throws an error when it encounters a circular reference. However, there's a neat workaround for this using a custom replacer function.
The <code>JSON.stringify()</code> method accepts two additional parameters: a replacer and a space. The replacer can be a function that alters the behavior of the stringification process, or an array of String and Number objects.
In our case, we'll use a function that keeps track of the objects we've already serialized, allowing us to handle circular references.
Here's an example:
<pre><code class="hljs">let cache = [];
let circularObject = {};
circularObject.circularRef = circularObject;

let str = JSON.stringify(circularObject, (key, value) =&gt; {
 if (typeof value === &#x27;object&#x27; &amp;&amp; value !== null) {
 if (cache.includes(value)) {
 // Circular reference found, discard key
 return;
 }
 // Store value in our collection
 cache.push(value);
 }
 return value;
});
cache = null; // Enable garbage collection

console.log(str); // {&quot;circularRef&quot;:{}}
</code></pre>
In this code, we created a circular object and a cache to keep track of the objects we've already visited. Our replacer function checks if the current value is an object and if it's already in our cache. If it is, we found a circular reference and we discard the key. Otherwise, we add the object to our cache and return the value.

 <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: This approach discards the keys associated with circular references, so the resulting JSON won't be a perfect mirror of the original object. However, it does allow us to serialize circular structures without errors.

 </div>
 </div>
 </div>
 <h2 id="usingutilinspect">Using util.inspect()</h2>
If you're working with Node.js, there's an even simpler solution to print circular structures: the <code>util.inspect()</code> method. This method returns a string representation of an object, similar to <code>JSON.stringify()</code>, but it handles circular references gracefully.
Here's an example:
<pre><code class="hljs">const util = require(&#x27;util&#x27;);

let circularObject = {};
circularObject.circularRef = circularObject;

console.log(util.inspect(circularObject));
</code></pre>
When you run this code, you'll see something like this:
<pre><code class="hljs">{ circularRef: [Circular] }
</code></pre>
The <code>[Circular]</code> placeholder indicates a circular reference to the root of the current object.

 <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>util.inspect()</code> method is a Node.js specific feature and it's not available in browser-side JavaScript. It's great for debugging or logging in a Node.js environment, but not suitable for serializing data to be sent over a network.

 </div>
 </div>
 </div>
 One of the great things about <code>util.inspect()</code> is that it also accepts an options object that allows you to customize the output. For instance, you can set the <code>depth</code> option to <code>null</code> to inspect all objects, regardless of depth.
<pre><code class="hljs">console.log(util.inspect(circularObject, { depth: null }));
</code></pre>
This will print the entire object, no matter how deep the circular references go. So be careful with large, complex objects - you may be getting more ouptput than you want.
<h2 id="usingthirdpartylibraries">Using Third-Party Libraries</h2>
While native JavaScript methods can help us handle circular structures to some extent, there are certain scenarios where they might fall short. This is where we look to third-party libraries for help. These libraries are specifically designed to handle circular structures and can make our task significantly easier. Some popular libraries that we can use are <code>circular-json</code> and <code>flatted</code>.
<h2 id="exampleusingthecircularjsonlibrary">Example: Using the circular-json Library</h2>
Let's take a look at how we can use the <a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/circular-json">circular-json</a> library to print circular structures in a JSON-like format. The <code>circular-json</code> library provides a <code>stringify()</code> function, similar to <code>JSON.stringify()</code>, but with the added ability to handle circular structures.
First, we need to install the library. You can do this by running the following command in your terminal:
<pre><code class="hljs">$ npm install circular-json
</code></pre>
Once installed, we can use it in our code like this:
<pre><code class="hljs">const CircularJSON = require(&#x27;circular-json&#x27;);

let circularObject = {};
circularObject.circularRef = circularObject;
let serialized = CircularJSON.stringify(circularObject);

console.log(serialized);
</code></pre>
In the above example, we create a circular structure, where <code>circularObject.circularRef</code> refers back to <code>circularObject</code> itself. When we try to serialize this using <code>CircularJSON.stringify()</code>, it successfully converts the object into a string format without throwing any error. The output will look something like this:
<pre><code class="hljs">{&quot;circularRef&quot;:&quot;~&quot;}
</code></pre>
As you can see, the <code>circular-json</code> library replaces the circular reference with a special character (<code>~</code>), indicating a circular structure.

 <div class="alert alert-warn">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-exclamation-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Heads up: The <code>circular-json</code> library is deprecated and not maintained anymore. However, it still works fine for most use-cases and serves as a good example of how third-party libraries can help us handle circular structures in JavaScript. Just be sure to check if it has any open high-severity vulnerabilities before using it in production code.

 </div>
 </div>
 </div>
 <h2 id="exampleusingtheflattedlibrary">Example: Using the flatted Library</h2>
One of the third-party libraries that can handle circular references in JavaScript is the <a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/flatted">flatted</a> library. This library offers a simple API similar to JSON, with <code>Flatted.stringify()</code> and <code>Flatted.parse()</code> methods. Let's see how we can use it to print a circular structure.
First, you need to install the <code>flatted</code> library. You can do this using npm:
<pre><code class="hljs">$ npm install flatted
</code></pre>
Once installed, you can use it to stringify and parse circular structures. Here's an example:
<pre><code class="hljs">const Flatted = require(&#x27;flatted&#x27;);

let circularObject = {};
circularObject.self = circularObject;

console.log(Flatted.stringify(circularObject));
</code></pre>
This will output a string with a special syntax that represents the circular reference:
<pre><code class="hljs">{&quot;self&quot;:&quot;$&quot;}
</code></pre>
You can then parse this string back into an object with the <code>Flatted.parse()</code> method:
<pre><code class="hljs">let parsedObject = Flatted.parse(Flatted.stringify(circularObject));

console.log(parsedObject === parsedObject.self);
</code></pre>
This will output <code>true</code>, showing that the circular reference has been preserved.

 <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>flatted</code> library uses a special syntax to represent circular references, which may not be compatible with other JSON parsers. Make sure to use the <code>Flatted.parse()</code> method to correctly interpret this syntax.

 </div>
 </div>
 </div>
 <h2 id="conclusion">Conclusion</h2>
Circular structures can pose a challenge when trying to print or serialize them in JavaScript. The built-in <code>JSON.stringify()</code> method fails with circular structures, but we can overcome this limitation by using a custom replacer function, the <code>util.inspect()</code> method, or third-party libraries like <code>circular-json</code> and <code>flatted</code>. These tools provide different ways to handle circular references, allowing us to print or serialize circular structures in a JSON-like format.

Print Circular Structures in JSON Format in JavaScript

<h2 id="introduction">Introduction</h2>
Python, like any other programming language, has its own set of rules and conventions when it comes to naming variables and functions. These conventions aren't just for aesthetics or to make your code look pretty, they serve a much more important role in making your code more readable and maintainable. If you've read many of my articles on StackAbuse, I talk a lot about writing readable code. By following Pythonic best-practices in naming and formatting your code, you'll make it much more readable for others (and yourself).
In this article, we'll explore the different naming conventions used in Python and understand why they matter.
<h2 id="whynamingconventionsmatter">Why Naming Conventions Matter</h2>
Imagine working on a large codebase where variables and functions are named/formatted haphazardly. It would be a nightmare to understand what each variable or function does, let alone debug or add new features. This is one of the reasons why we put so much emphasis on following conventions.
Naming conventions are basically just agreed-upon standards that programmers follow when naming their variables, functions, classes, and other code elements. They provide a level of predictability that makes it easier to understand the purpose of a piece of code. This is especially important when you're working in a team.
Following naming conventions isn't just about making your code understandable to others. It's also about making it easier for your future self. You might understand your code perfectly well now, but you might not remember what everything does six months down the line.
<h2 id="variablenamingconventions">Variable Naming Conventions</h2>
In Python, variable names are more than just placeholders for values - they are a vital part of your code's readability. Python's variable naming convention is based on the principle of &quot;readability counts&quot;, one of the <a rel="nofollow noopener" target="_blank" href="https://en.wikipedia.org/wiki/Zen_of_Python">guiding philosophies of Python</a>.
A variable name in Python should be descriptive and concise, making it easy for anyone reading your code to understand what the variable is used for. It should start with a lowercase letter, and it can include letters, numbers, and underscores. However, it cannot start with a number.
Here are some examples:
<pre><code class="hljs">name = &quot;John Doe&quot;
age = 30
is_student = False
</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: Python is case sensitive, which means <code>age</code>, <code>Age</code>, and <code>AGE</code> are three different variables.

 </div>
 </div>
 </div>
 In Python, we commonly use <code>snake_case</code> for variable names, where each word is separated by an underscore. This is also known as <code>lower_case_with_underscores</code>.
<pre><code class="hljs">student_name = &quot;John Doe&quot;
student_age = 30
is_student = False
</code></pre>
<h2 id="functionnamingconventions">Function Naming Conventions</h2>
Like variable names, function names in Python should be descriptive and concise. The function name should clearly indicate what the function does. Python's naming conventions for functions are similar to its conventions for variables.
In Python, we typically use <code>snake_case</code> for function names. Here's an example:
<pre><code class="hljs">def calculate_sum(a, b):
 return a + b

result = calculate_sum(5, 3)
print(result) # Output: 8
</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: It's a good practice to use verbs in function names since a function typically performs an action.

 </div>
 </div>
 </div>
 In addition to <code>snake_case</code>, Python also uses <code>PascalCase</code> for naming classes, and occassionally <code>camelCase</code>, but we'll focus on those in another section. For now, remember that consistency in your naming convention is important for to writing clean, Pythonic code.
<h2 id="classnamingconventions">Class Naming Conventions</h2>
For naming classes in Python, a different set of conventions applies compared to naming variables or functions. In Python, class names typically use <code>PascalCase</code>, also known as <code>UpperCamelCase</code>. This means that the name starts with an uppercase letter and has no underscores between words. Each word in the name should also start with an uppercase letter.
Here's an example to illustrate the naming convention for classes:
<pre><code class="hljs">class ShoppingCart:
 def __init__(self, items=[]):
 self.items = items
 
 def add_item(self, item):
 self.items.append(item)

my_cart = ShoppingCart()
my_cart.add_item(&quot;apple&quot;)
</code></pre>
In this example, <code>ShoppingCart</code> is a class that adheres to the <code>PascalCase</code> naming convention.

 <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: While function names often use verbs to indicate actions, class names usually employ nouns or noun phrases. This is because a class often represents a thing or a concept rather than an action.

 </div>
 </div>
 </div>
 Sometimes you'll encounter classes that contain acronyms or initialisms. In such cases, it's conventional to keep the entire acronym uppercase:
<pre><code class="hljs">class HTTPResponse:
 def __init__(self, status_code, content):
 self.status_code = status_code
 self.content = content
</code></pre>
Just like with functions, the key to good class naming is to be descriptive and concise. The name should clearly convey the class's purpose or functionality. And as always, maintaining consistency in your naming conventions throughout your codebase is vital for readability and maintainability.
<h2 id="conclusion">Conclusion</h2>
In this article, we've explored the importance of naming conventions in Python, and how they contribute to code readability and maintainability. We've showed the different types of naming conventions for variables, functions, and classes, like <code>PascalCasing</code> and <code>snake_casing</code>.
Python does not enforce these conventions, but adhering to them is considered good practice and can really improve your code's readability, especially when working in teams.

Python Naming Conventions for Variables, Functions, and Classes

<h2 id="introduction">Introduction</h2>
As JavaScript developers, we often need to handle large chunks of text data, which may span across multiple lines. This is where multiline strings come into play. They allow you to maintain the formatting and readability of your code without compromising the string's structure.
In this article, we are going to explore various ways to create multiline strings in JavaScript.
<h2 id="whyusemultilinestrings">Why Use Multiline Strings?</h2>
When dealing with large text data or template literals, it's not uncommon to have strings that span multiple lines. In traditional JavaScript, you would have to use the <code>\n</code> character to create a new line, which can make your code hard to read and maintain.
For instance, let's say you want to create a string for an email template:
<pre><code class="hljs">var emailTemplate = &quot;Dear User,\n\nThank you for signing up for our service.\n\nBest,\nTeam&quot;
</code></pre>
The <code>\n</code> character creates a new line, but it makes the code look cluttered. Multiline strings can solve this problem by allowing you to create strings that span multiple lines in a more readable and maintainable way.

 <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: Multiline strings are not just about aesthetics or readability. They also play an important role in template literals and regular expressions, which we will see later in this article.

 </div>
 </div>
 </div>
 <h2 id="multilinestringsthetraditionalway">Multiline Strings: The Traditional Way</h2>
In the early days of JavaScript, creating multiline strings was a bit cumbersome. If you wanted to create a string that spanned more than one line, you had to use the newline character (<code>\n</code>) to break the line, or concatenate multiple strings using the <code>+</code> operator.
Here's an example:
<pre><code class="hljs">var multilineString = &#x27;This is line 1\n&#x27; +
 &#x27;This is line 2\n&#x27; +
 &#x27;This is line 3&#x27;;
console.log(multilineString);
</code></pre>
The output would be:
<pre><code class="hljs">This is line 1
This is line 2
This is line 3
</code></pre>
As you can see, this method can get quite messy and hard to read when dealing with larger strings.

 <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>\n</code> character is a special character that represents a newline. When used in a string, it causes the string to break and start a new line.

 </div>
 </div>
 </div>
 <h2 id="multilinestringsthees6way">Multiline Strings: The ES6 Way</h2>
With the introduction of ES6 (ES2015), JavaScript got a new feature called template literals. Template literals are a new kind of string literals that are enclosed by backticks (<code>``</code>) instead of single or double quotes.
One of the advantages of template literals is that they can span multiple lines without needing any special characters or concatenation. This makes them a perfect choice for creating multiline strings.
Here's how you can create a multiline string using template literals:
<pre><code class="hljs">let multilineString = `This is line 1
This is line 2
This is line 3`;
console.log(multilineString);
</code></pre>
The output would be:
<pre><code class="hljs">This is line 1
This is line 2
This is line 3
</code></pre>
As you can see, the syntax is much cleaner and easier to read.

 <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: In addition to multiline strings, template literals also support string interpolation, which allows you to embed expressions within the string that will be evaluated and inserted into the string. This can be very useful when you need to include variables or expressions in your string.

 </div>
 </div>
 </div>
 <h2 id="heredocinjavascript">Heredoc in JavaScript</h2>
&quot;Heredoc&quot; is a term borrowed from the Perl programming language. It stands for &quot;Here Document&quot; and is used to create multiline strings in a more readable and manageable way. Unfortunately, JavaScript doesn’t natively support heredoc, but we can emulate it using template literals introduced in ES6.
A heredoc-like multiline string in JavaScript would look like this:
<pre><code class="hljs">let str = `
This is a multiline string
which spans multiple lines.
`;

console.log(str);
</code></pre>
Output:
<pre><code class="hljs">This is a multiline string
which spans multiple lines.
</code></pre>
The backtick (<code>`</code>) character, which is usually located below the escape key on a keyboard, is used to define a template literal in JavaScript. Everything within the backticks is part of the string, including new lines or other special characters.

 <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 backtick (<code>`</code>) is not the same as a single quote (<code>'</code>) or a double quote (<code>&quot;</code>). Make sure you're using the correct character when defining template literals.

 </div>
 </div>
 </div>
 <h2 id="variationsofmultilinestrings">Variations of Multiline Strings</h2>
In addition to the standard way of creating multiline strings in JavaScript, there are several variations that can be used depending on your specific needs.
<h3 id="concatenation">Concatenation</h3>
Before ES6, developers often used concatenation to create multiline strings. This method involves breaking the string into multiple parts and using the plus (+) operator to join them together.
<pre><code class="hljs">let str = &quot;This is a multiline string &quot; +
&quot;which spans multiple lines.&quot;;

console.log(str);
</code></pre>
Output:
<pre><code class="hljs">This is a multiline string which spans multiple lines.
</code></pre>
<h3 id="arrayjoin">Array Join</h3>
Another variation is to use the <code>join()</code> method of an array to create a multiline string. Each element of the array becomes a line in the string.
<pre><code class="hljs">let str = [&quot;This is a multiline string&quot;, &quot;which spans multiple lines.&quot;].join(&quot;\n&quot;);

console.log(str);
</code></pre>
Output:
<pre><code class="hljs">This is a multiline string
which spans multiple lines.
</code></pre>
<h3 id="templateliteralswithvariables">Template Literals with Variables</h3>
Template literals in ES6 also allow for variable interpolation. This means you can include variables within your multiline string, and their values will be included in the final string.
<pre><code class="hljs">let line1 = &quot;This is a multiline string&quot;;
let line2 = &quot;which spans multiple lines.&quot;;

let str = `${line1}
${line2}`;

console.log(str);
</code></pre>
Output:
<pre><code class="hljs">This is a multiline string
which spans multiple lines.
</code></pre>
These variations provide flexibility when working with multiline strings in JavaScript, allowing you to choose the method that best suits your needs.
<h2 id="usecasemultilinestringsintemplateliterals">Use Case: Multiline Strings in Template Literals</h2>
Template literals, introduced in ES6, are a new way to handle strings in JavaScript. They are enclosed by the backtick (<code>`</code>) character instead of double or single quotes. One of the main benefits of template literals is their ability to handle multiline strings effortlessly.
Let's see how we can use multiline strings within template literals.
<pre><code class="hljs">let multilineString = `This is line one
and this is line two
and this is line three`;

console.log(multilineString);
</code></pre>
The output of the above code will be:
<pre><code class="hljs">This is line one
and this is line two
and this is line three
</code></pre>
As you can see, template literals maintain the line breaks and spacing of the text within them, which makes them an excellent choice for working with multiline strings in JavaScript.

 <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: Template literals also support string interpolation, which allows you to embed expressions (variables, functions, etc.) within the string. This is another reason why they are often preferred for handling complex strings.

 </div>
 </div>
 </div>
 <h2 id="usecasemultilinestringsinregularexpressions">Use Case: Multiline Strings in Regular Expressions</h2>
Regular expressions (regex) are a powerful tool for pattern matching and manipulation of strings. In JavaScript, you might come across a situation where you need to use multiline strings in your regex patterns.
For instance, let's say you want to match a pattern that spans multiple lines. Here's how you can do it:
<pre><code class="hljs">let multilineString = `This is line one
and this is line two
and this is line three`;

let regex = /line one\nand this is line two/g;

let result = multilineString.match(regex);

console.log(result);
</code></pre>
The output of the above code will be:
<pre><code class="hljs">[ &#x27;line one\nand this is line two&#x27; ]
</code></pre>
The <code>\n</code> in the regex pattern signifies a newline character, which allows the pattern to span multiple lines.

 <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: When using multiline strings in regex, it's important to remember that JavaScript's regex engine treats the <code>^</code> and <code>$</code> anchors as the start and end of the entire string, not individual lines. If you want to match the start or end of a line within a multiline string, you should use the multiline flag (<code>m</code>).

 </div>
 </div>
 </div>
 <h2 id="potentialissues">Potential Issues</h2>
While multiline strings in JavaScript can really improve readability, and thus maintainability, of your code, there are a few pitfalls that you should be aware of.
First, leading and trailing white spaces can often cause problems. For instance, consider the following code:
<pre><code class="hljs">let str = `Hello,
 World!`;

console.log(str);
</code></pre>
The output would be:
<pre><code class="hljs">Hello,
 World!
</code></pre>
As you can see, the leading white spaces are preserved in the output. To avoid this, you need to move the second line to the beginning of that line:
<pre><code class="hljs">let str = `Hello,
World!`;

console.log(str);
</code></pre>
This would then give you the expected output:
<pre><code class="hljs">Hello,
World!
</code></pre>
The main problem with this is that it forces you to use un-natural indentation, and thus hurts the readability of your code.
Second, if you are using template literals for multiline strings, you should be aware that any JavaScript expression within the <code>${}</code> syntax will be evaluated. This could potentially lead to code injection if the string content comes from an untrusted source.

 <div class="alert alert-warn">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-exclamation-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Wait! Always validate and sanitize input when using template literals with content from an untrusted source to prevent potential code injection.

 </div>
 </div>
 </div>
 Last, multiline strings may not be supported in all environments. While most modern browsers support ES6, older browsers or certain server-side environments may not. In these cases, you will need to transpile your code using a tool like <a href="https://babeljs.io/" rel="nofollow noopener" target="_blank">Babel</a>.
<h2 id="conclusion">Conclusion</h2>
In this article, we've explored how to create multiline strings in JavaScript, both using the traditional method and the ES6 way. We've also looked at how to use heredocs and variations of multiline strings.
We then saw some use cases of multiline strings in template literals and regular expressions, and highlighted potential issues that you might encounter.