<h2 id="introduction">Introduction</h2>
A ternary operator is a three-operand operator that is supported in most programming languages, including JavaScript, Java, C++, C#, and many others. It is also referred to as a conditional operator because it is considered to be a more concise alternative to the conditional (<code>if-else</code>) statement.
<blockquote>
In this guide, we will learn what the ternary operator is and how it works in JavaScript. Also, we'll do a brief comparison with the <code>if-else</code> statement, so we know when to use which one.
</blockquote>
<h2 id="ternaryoperatorinjavascript">Ternary Operator in JavaScript</h2>
As in any other language, ternary operator in JavaScript has three operands:
<pre><code class="hljs">(condition) ? returnExpressionIfTrue : returnExpressionIfFalse;
</code></pre>
We can easily translate this to the corresponding <code>if-else</code> statement:
<pre><code class="hljs">if (condition) {
 returnExpressionIfTrue;
} else {
 returnExpressionIfFalse;
}
</code></pre>
This basically means that the <code>condition</code> and the <code>returnExpressionIfTrue</code> correspond to the <code>if</code> clause of the corresponding <code>if-else</code> statement, and the <code>returnExpressionIfFalse</code> corresponds to the <code>else</code> section of the mentioned statement.
If the <code>condition</code> evaluates as <code>true</code>, the <code>returnExpressionIfTrue</code> expression is executed. On the other hand, if the <code>condition</code> is evaluated as <code>false</code>, the <code>returnExpressionIfFalse</code> is 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: To be more precise, JavaScript checks if the <code>condition</code> evaluates as truthy or as falsy value. Falsy values are all values that JavaScript evaluates as <code>false</code> in a boolean expression - <code>false</code>, <code>none</code>, <code>undefined</code>, <code>NaN</code>, <code>0</code>, <code>-0</code>, <code>0n</code>, and <code>&quot;&quot;</code>. All the other values are evaluated as <code>true</code> in a boolean expression - thus considered truthy.

 </div>
 </div>
 </div>
 <h2 id="howtouseternaryoperator">How to Use Ternary Operator</h2>
A perfect way to explain the ternary operator would be to compare it with the <code>if-else</code> statement. Suppose we have a certain age and we want to check whether a user is younger than that or not:
<pre><code class="hljs">let age = 21;
let result;

if(age &gt;= 20){
 result = &quot;User can view content&quot;;
} else {
 result = &quot;User cannot view content&quot;;
}
console.log(result);
</code></pre>
Let's rewrite this <code>if-else</code> block using ternary operator :
<pre><code class="hljs">let age = 21;
let result = age &gt;= 20 ? &quot;User can view content&quot; : &quot;User cannot view content&quot;;

console.log(result);
</code></pre>
Basically, anything before the question mark (<code>?</code>) is the condition we are checking. The other two operands are expressions, the first one before the semi-colon (<code>:</code>) and the second after. If the condition is <code>true</code>, the value of the <code>result</code> will be <code>&quot;User can view the content&quot;</code>. Otherwise, the value assigned to the <code>result</code> will be <code>&quot;User cannot view the content&quot;</code>.
Let's take a look at another interesting example:
<pre><code class="hljs">let name = &quot;John Doe&quot;;

if (name) {
 console.log(&quot;Hello &quot; + name);
} else {
 console.log(&quot;Hello &quot; + &quot;Guest&quot;);
}
</code></pre>
Since the <code>name</code> is a non-empty string, it is considered to be a truthy value. Therefore, this example will result in logging <code>&quot;Hello John Doe&quot;</code> in the console. If the <code>name</code> were an empty string - the output will be <code>&quot;Hello Guest&quot;</code>. This scenario is easily convertible to the ternary operator:
<pre><code class="hljs">let name = &quot;John Doe&quot;;

name ? console.log(&quot;Hello &quot; + name) : console.log(&quot;Hello &quot; + &quot;Guest&quot;);
</code></pre>
Although maybe above the scope of this guide, another interesting solution is to use the logical <code>or</code> operator instead of the ternary operator. This will yield us with the absolutely the same result as the other two approaches:
<pre><code class="hljs">console.log(&quot;Hello &quot; + (name || &quot;Guest&quot;));
</code></pre>
<h3 id="handlingmultilineexpressionswiththeternaryoperator">Handling Multi-Line Expressions With the Ternary Operator</h3>
Taking a look at the first expression, we will notice that we were able to collapse a five-line <code>if-else</code> block into a single-line ternary statement. Suppose we want to handle multi-line expressions with the ternary operator:
<pre><code class="hljs">const age = 22;
let youth;

if (age &lt;= 30) {
 youth = true;
 console.log(&quot;I am a Youth!&quot;);
} else {
 youth = false;
 console.log(&quot;I am an Adult!&quot;);
}

console.log(youth);
</code></pre>
We would have to place these expressions in brackets and then separate each by a comma:
<pre><code class="hljs">age &lt;= 30
 ? ((youth = true), console.log(&quot;I am a Youth!&quot;))
 : ((youth = false), console.log(&quot;I am an Adult!&quot;));
</code></pre>
Even though the code using ternary operators is shorter, even this two-line expression makes the ternary operator pretty hard to read and understand. That's the reason why it’s best not to use the ternary operator for multi-line expressions - a better alternative is to stick with the <code>if-else</code> block in situations like this.
<h2 id="nestedternaryoperators">Nested Ternary Operators</h2>
A nested ternary operator refers to the ability to place a ternary operator within another. These statements are used when we want to evaluate multiple conditions. For example, with the <code>if-else</code> statement we can use the <code>else if</code> statement to nest multiple conditions together:
<pre><code class="hljs">let studentScore = 65;
let studentGrade;

if (studentScore &gt;= 70) {
 studentGrade = &quot;A&quot;;
} else if (studentScore &gt;= 60) {
 studentGrade = &quot;B&quot;;
} else if (studentScore &gt;= 50) {
 studentGrade = &quot;C&quot;;
} else if (studentScore &gt;= 45) {
 studentGrade = &quot;D&quot;;
} else {
 studentGrade = &quot;E&quot;;
}

console.log(`Your grade is ${studentGrade}`);
</code></pre>
When we implement this with the ternary operator, we will have something like this:
<pre><code class="hljs">let studentScore = 65;

let studentGrade = studentScore &gt;= 70 ? &quot;A&quot; 
 : studentScore &gt;= 60 ? &quot;B&quot; 
 : studentScore &gt;= 50 ? &quot;C&quot; 
 : studentScore &gt;= 45 ? &quot;D&quot; 
 : &quot;E&quot;;

console.log(`Your grade is ${studentGrade}`);
</code></pre>
This can quickly become difficult to read if we don't pay attention and properly understand how the ternary operator works. More importantly - even if you can read this - what about your colleagues? In cases like this, it is recommended we use the <code>if-else</code> or the <code>switch</code> statements rather than writing code that can confuse others.
<h2 id="conclusion">Conclusion</h2>
As we've seen in this guide, ternary operator and <code>if-else</code> statement can be used pretty much interchangeably and it's up to you to decide when to choose one over the other. Generally speaking, the ternary operator is not designed to ultimately replace the <code>if-else</code> statement. Instead, it aims to be a valid alternative in scenarios where <code>if-else</code> just creates unnecessary overhead - when the outcome is so simple that anything besides a simple ternary operator takes too much space in the code.
In this guide, we took a look at what a ternary operator is and how to make use of it in JavaScript. It may seem a bit intimidating in the beginning, but after reading this guide you should understand how it works and what is the difference between a ternary operator and <code>if-else</code>, so you know when to choose one over the other.

Dimitrije Stamenic

Joel Olawanle

In this guide, you'll learn everything you might want to know about ternary operators in JavaScript - the syntax, use cases and best practices!

Guide to the Ternary Operator in JavaScript

<h2 id="introduction">Introduction</h2>
When a developer creates an application, the next step is to share it with friends or the public so that everyone can access it. That process of transferring code from a development environment to a hosting platform where it is served to end users is called deployment.
Hosting used to be pretty inefficient before cloud hosting platforms like Heroku came around. It was mainly done by hosting providers who required uploading all static assets (build files generated by running <code>npm run build</code>) every time we make a change. There was no other way to upload static files other than some sort of FTP interface (either a local one or on the hosting server), which can be pretty stressful and technical.
<blockquote>
In this guide, we'll take a look at how to deploy a React application to Heroku using the CLI (Command Line Interface) via Heroku Git. Also, we will take a look at how to redeploy code when we make some changes to our application.
</blockquote>
<h2 id="whatisherokuandwhyuseit">What Is Heroku and Why Use It?</h2>
Heroku is a container-based cloud platform that enables developers to easily deploy, manage, and scale modern applications. This allows developers to focus on their core job - creating great apps that delight and engage users. In other words, Heroku increases the developer's productivity by making app deployment, scaling, and management as simple as possible.
There are numerous reasons why we should use Heroku:
<ul>
<li>Supports multiple languages - from the ground up, the Heroku platform supports more than eight languages, including Node, Java, and Python.</li>
<li>Supports several databases and data stores - Heroku enables developers to select from a variety of databases and data stores based on the specific requirements of individual applications - <a target="_blank" href="https://stackabuse.com/adding-a-postgresql-database-to-a-node-js-app-on-heroku/">PostgreSQL</a>, MySQL, MongoDB, and so on.</li>
<li>Less expensive - creating and hosting a static website will save us money in the long run.</li>
</ul>
<h2 id="gettingstarted">Getting Started</h2>
In this guide, we will deploy a <a rel="nofollow noopener noreferrer" target="_blank" href="https://github.com/StackAbuse/movies-search-app">movies search app</a>, which is a simple React app that searches an API for movies. Before we begin, you should sign up for Heroku if you do not already have an account, as this is where we will deploy our React application. We can go to <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.heroku.com/">Heroku.com</a> and sign up by clicking the sign-up button in the upper right corner. The signup pipeline is pretty much the standard one, so you shouldn't have any trouble creating an account on Heroku:
<img src="https://s3.stackabuse.com/media/articles/how-to-deploy-a-react-app-to-heroku-1.png" alt="heroku account creation">
When you've created a Heroku account, we can proceed to the actual deployment of our app.

 <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: Previously, there was an option to deploy via GitHub Integration, but that feature has been revoked due to a security breach. The best way to deploy to Heroku as of now is via Heroku Git, which happens in our CLI (Command Line Interface).

 </div>
 </div>
 </div>
 <h2 id="deploymentwithherokugit">Deployment With Heroku Git</h2>
Heroku uses the Git version control system to manage app deployments. It is important to note that we do not need to be Git experts to deploy our React application to Heroku, all we need to know are some fundamentals, which will be covered in this guide.

 <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">
 If you're not confident with Git - don't worry. We'll cover everything you need to know. Otherwise, check out our free course on Git: <a target="_blank" href="https://stackabuse.com/courses/git-essentials-developers-guide-to-git/">Git Essentials: Developer's Guide to Git</a>

 </div>
 </div>
 </div>
 <h3 id="beforewestart">Before We Start</h3>
As the name Heroku Git implies, we will be using Git, which means we need to have Git installed. The same applies to the Heroku CLI. If you don't have those two installed, you can follow the following instructions to guide you through the installation process:
<ul>
<li><a rel="nofollow noopener noreferrer" target="blank" href="https://git-scm.com/book/en/v2/Getting-Started-Installing-Git">Git installation instructions</a></li>
<li><a rel="nofollow noopener noreferrer" target="blank" href="https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli">Heroku CLI installation instructions</a></li>
</ul>
After successfully installing them, we can proceed to create an app on Heroku, to which our React application will be deployed later. We can create an application on Heroku in two ways - via the terminal (CLI command) or manually on our Heroku dashboard.

 <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 common misconception is that Git and GitHub are the same things, but they are not! Git is a version control system used by many apps and services, including but not limited to GitHub. Therefore you don’t need to push your code to GitHub, nor have a GitHub account to use Heroku.

 </div>
 </div>
 </div>
 <h3 id="howtocreateherokuappmanually">How to Create Heroku App Manually</h3>
Let’s first see how we can create an app using the <a rel="nofollow noopener noreferrer" target="_blank" href="https://dashboard.heroku.com/">Heroku dashboard</a>. The first step is to click the create new app button:
<img src="https://s3.stackabuse.com/media/articles/how-to-deploy-a-react-app-to-heroku-2.png" alt="creating an app on heroku">
This would redirect us to a page where we need to fill up the information about the app we want to create:
<img src="https://s3.stackabuse.com/media/articles/how-to-deploy-a-react-app-to-heroku-3.png" alt="filling out app information on heroku">

 <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 you remember the name of the app you created on Heroku because we will be connecting our local repository to this remote repository soon.

 </div>
 </div>
 </div>
 Once this process is completed, we can start deploying our app from a local environment to Heroku. But, before we take a look at how to deploy an app, let's consider an alternative approach to creating a Heroku app - using the Heroku CLI.
<h3 id="howtocreateherokuappviacli">How to Create Heroku App via CLI</h3>
Alternatively, you can create an app on Heroku using the CLI. Heroku made sure this is as straightforward as possible. The only thing you need to do is to run the following command in your terminal of choice (just make sure to replace <code>&lt;app-name&gt;</code> with the actual name of your app):
<pre><code class="hljs">$ heroku create -a &lt;app-name&gt;
</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: If you run this command from the app’s root directory, the empty Heroku Git repository is automatically set as a remote for our local repository.

 </div>
 </div>
 </div>
 <h3 id="howtopushcodetoheroku">How to Push Code to Heroku</h3>
The first step before pushing the code to Heroku will be to position yourself in the root directory of your app (in the terminal). Then use the <code>heroku login</code> command to log into the Heroku dashboard. After that, you need to accept Heroku's terms and conditions and, finally, log in to Heroku using your login credentials:
<img src="https://s3.stackabuse.com/media/articles/how-to-deploy-a-react-app-to-heroku-4.png" alt="logging into heroku via cli">
You will be returned to the terminal afterward, so you can continue the process of deploying to Heroku. Now, you should initialize the repository:
<pre><code class="hljs">$ git init
</code></pre>
And then register the app we created earlier on Heroku as the remote repository for the local one we initialized in the previous step:
<pre><code class="hljs">$ heroku git:remote -a &lt;app-name&gt;
</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: Make sure to replace <code>&lt;app-name&gt;</code> with the name of the app we've created on Heroku earlier (e.g., <code>movies-search-app</code>).

 </div>
 </div>
 </div>
 Now we can proceed to deploy our application. But, since we need to deploy a React application, we first need to add the React buildpack:
<pre><code class="hljs">$ heroku buildpacks:set mars/create-react-app
</code></pre>
Once that is completed, the next step is to actually push our code to the remote repository we've created on Heroku. The first step is to stage our files, commit them, and finally push them to the remote repository:
<pre><code class="hljs">$ git commit -am &quot;my commit&quot;
$ git push heroku main
</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: Suppose we want to switch our branch from <code>main</code> to <code>development</code>. We can run the following command: <code>git checkout -b development</code>.

 </div>
 </div>
 </div>
 Once we have successfully pushed to Heroku, we can open our newly deployed app in our browser:
<pre><code class="hljs">$ heroku open
</code></pre>
<img src="https://s3.stackabuse.com/media/articles/how-to-deploy-a-react-app-to-heroku-5.png" alt="deploy and open heroku application">
<h3 id="howtoupdateourdeployment">How to Update Our Deployment</h3>
The next question you'd probably have is how to redeploy the app after we make changes to it. This works similarly to how it does in any Git-based platform - all we have to do is stage the files, commit, and then push the code to Heroku:
<pre><code class="hljs">$ git commit -am &quot;added changes&quot;
$ git push heroku main
</code></pre>
Heroku automatically picks this change up and applies it to the live application.
<h2 id="conclusion">Conclusion</h2>
Heroku can be a fairly useful tool for deploying your React app. In this article, we've taken a look at how to deploy a React application to Heroku using Heroku Git. Additionally, we've gone over some basic Git commands you would need when working with Heroku Git, and, finally, we've discussed how to redeploy an app after you make changes to it.

In this guide, learn how to deploy a React JavaScript application to Heroku, using the Heroku CLI, GUI and Git CLI, straight from a Git repository.

How to Deploy a React App to Heroku

<h2 id="introduction">Introduction</h2>
Although it may not be a common thing to do in any real-world scenario, reversing strings is a pretty common operation you'll face in a job interview. Especially if you are applying for a job in a programming language that doesn't have built-in methods for reversing strings. By asking you to reverse a string, an interviewer can get a pretty accurate impression of how you approach analyzing the problem and building a solution from scratch.
Also, since there can be plenty of solutions for this problem, this is your chance to shine and show your awareness of the different execution speeds between different algorithms, thus create the best possible solution.
<blockquote>
In this article, we'll take a look at how to reverse a string in Python. We'll consider several possible solutions and compare them, so you can choose the one that best fits your needs.
</blockquote>
Obviously, interviews aren't the only place where you can face the need to reverse a string - for example, there are some regular expression problems that are solved much easier when working with reversed strings.
<h2 id="stringsinpython">Strings in Python</h2>
String in Python is an immutable array of bytes - more specifically a sequence of bytes representing Unicode characters. Actually, a string is written in code as a sequence of characters surrounded by a pair of quotation marks (single or double), but they are internally stored as a sequence of Unicode codes:
<pre><code class="hljs">example_str = &quot;Hello World!&quot;
# The same as:
# example_str = &#x27;Hello World!&#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: The actual object used to deal with strings in Python is called the <code>str</code> object. It essentially represents a string data type.

 </div>
 </div>
 </div>
 One important characteristic of strings in Python is that they are immutable, meaning that they can't be modified after they were created. The only way to modify a string would be to create its modified copy, which complicates many operations on strings. It's no different for the one of our particular interest in this article - the operation of reversing a string.
<h2 id="reversingastringinpython">Reversing a String in Python</h2>
Now that we've covered all the basics, we can look at how to actually reverse a string in Python. As we've stated before, there are several ways you can do that - in this article, we'll cover some of the most used. Each approach has its own strengths and weaknesses, some are more efficient but less readable. On the other hand, some are really readable and easy to understand, but at the cost of being not that efficient.
In the following sections we'll be reversing the string <code>&quot;Hello World!&quot;</code>, which should be reversed to the <code>&quot;!dlroW olleH&quot;</code>:
<pre><code class="hljs">example_str = &quot;Hello World!&quot;
</code></pre>
<h3 id="recommendedsolutionusingtheslicenotation">Recommended Solution: Using the Slice Notation</h3>
Another important property of strings in Python is that they are sliceable. That means a substring can be extracted from the original string - and Python offers a pretty straightforward way to do that using the slice operator.

 <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 you'd like to learn more about slicing strings in Python, you should read the article <a href="https://stackabuse.com/python-slice-notation-on-string/" target="_blank">&quot;Python: Slice Notation on Strings&quot;</a>

 </div>
 </div>
 </div>
 The slicing operator in Python has the following syntax - <code>[start:end:step]</code>. It extracts a substring starting from the <code>start</code> to the <code>end</code>. If the <code>step</code> is a positive number, the <code>start</code> must be less than the <code>end</code>, therefore the slicing operator creates a substring moving forwards. On the other hand, if <code>step</code> is a negative number, the substring is created going backward in the original string. Therefore, if you set the <code>step</code> to <code>-1</code> and leave <code>start</code> and <code>end</code> blank, you will effectively reverse a whole string:
<pre><code class="hljs">example_str = &quot;Hello World!&quot;
reversed_str = example_str[::-1]
print(reversed_str)
</code></pre>
We've used the slicing operator on our <code>example_str</code> in the previously described way, which will yield us the reversed version of our original string:
<pre><code class="hljs">&quot;!dlroW olleH&quot;
</code></pre>
This approach to reversing a string in Python is considered to be the most efficient for the large input strings, but that comes at the cost of poor readability - especially for those who are not familiar with the slicing notation in Python. To improve that, we can wrap the slicing in a function, which will increase the readability of the final code:
<pre><code class="hljs">def reverse_string(s):
 return s[::-1]
</code></pre>
Later, we'd use this function instead of the plain slicing operator to reverse desired string, and the resulting string will be the same as before - <code>&quot;!dlroW olleH&quot;</code>:
<pre><code class="hljs">reversed_str = reverse_string(example_str)
</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">
 Advice: Wrapping each section of a code in a function is generally a good practice! Besides improving the code readability it actually helps you create more modular and reusable code. Therefore, you can wrap each of the following code snippets in the function in the same manner as shown in this section.

 </div>
 </div>
 </div>
 <h3 id="usingjoinandreversed">Using join() and reversed()</h3>
Although the slicing performs the best in terms of speed, the solid alternative in terms of readability is to combine two built-in Python methods - <code>str.join()</code> and <code>reversed()</code>.
First of all, <code>reversed()</code> returns a reversed iterator for the string passed as its argument. That enables us to go over the original string backward and append its characters to the empty string using <code>str.join()</code> function:
<pre><code class="hljs">example_str = &quot;Hello World!&quot;
reversed_str = &#x27;&#x27;.join(reversed(example_str))
print(reversed_str)
</code></pre>
This will create a reversed copy of the original string:
<pre><code class="hljs">&quot;!dlroW olleH&quot;
</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: If you are not familiar with the concept of iterators in Python - you should read <a href="https://stackabuse.com/introduction-to-python-iterators/" target="_blank">&quot;Introduction to Python Iterators&quot;</a>

 </div>
 </div>
 </div>
 <h3 id="usingaforloop">Using a for Loop</h3>
Loops can also be used to reverse a string in Python - the first one we'll consider is the <code>for</code> loop. We can use it to iterate over the original string both ways - forwards and backward. Since we want to reverse a string, the first thing that comes to mind is to iterate over the string from the end to the start and append each character to the new string. For that purpose, we'll use the <code>reversed()</code> function:
<pre><code class="hljs">example_str = &quot;Hello World!&quot;
reversed_str = &quot;&quot;
for i in reversed(example_str):
 reversed_str += i
print(reversed_str)
</code></pre>
We've iterated backward over the original string and appended each character to the <code>resulting_str</code>, which will store the reversed version of the <code>example_str</code> in the end:
<pre><code class="hljs">&quot;!dlroW olleH&quot;
</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: Notice how we've been adding each character to the reversed string, but strings in Python are immutable. We can do that because Python, essentially, creates a modified copy of a string each time we append a character to it, before solidifying the result as an immutable string and returning it.

 </div>
 </div>
 </div>
 An alternative approach is to iterate over the original string forwards, from the start to the end, and create the reversed version of the original string in the loop itself:
<pre><code class="hljs">example_str = &quot;Hello World!&quot;
reversed_str = &quot;&quot;
for i in example_str:
 reversed_str = i + reversed_str
print(reversed_str)
</code></pre>
This will give us the same result as using the reversed iterator in the loop.
<h3 id="usingawhileloop">Using a while Loop</h3>
Another loop we can use to reverse a string is the <code>while</code> loop. This approach is a bit more complicated than others, but can give you a great insight in how reversing string works on a lower level:
<pre><code class="hljs">example_str = &quot;Hello World!&quot;
reversed_str = &quot;&quot;
i = len(example_str) - 1
while i &gt;= 0:
 reversed_str += example_str[i]
 i -= 1
print(reversed_str)
</code></pre>
Which will result in:
<pre><code class="hljs">&quot;!dlroW olleH&quot;
</code></pre>
<h2 id="conclusion">Conclusion</h2>
As we've seen in this article, there are plenty of approaches on how to reverse a string in Python, and each of them has its strengths and weaknesses. Generally speaking, the one way you should choose for the most time is the slicing operator - it is the most efficient and the most Pythonic way to reverse a string. Other approaches are less efficient, therefore, think twice before using them if the execution speed is crucial in your code.

David Landup

In this short guide, learn how to reverse a string in Python, with practical code examples and best practices - using the slice notation with a negative step, a for loop, a while loop, join() and reversed().

How to Reverse String in Python

In this guide, you'll learn how to count the number of single element occurrences as well as all element occurrences in a JavaScript array, using `for-of`, `forEach()`, `for`, `reduce()`, Lodash's `countBy()`, etc.

Count Number of Element Occurrences in JavaScript Array

<h2 id="introduction">Introduction</h2>
VueJS is a progressive JavaScript framework used to create user interfaces and Single-Page Applications (SPAs), and the best way to get started quickly is to create a VueJS project using the Vue CLI (Command-Line Interface).
<blockquote>
In this guide, you will learn how to install the Vue CLI, how to create a Vue project with the Vue CLI, how to serve and build them for production, and how to use the Vue UI. Building a project with the CLI will scaffold out a project, providing us with a pre-configured starting point on which we can build rather than starting from scratch.
</blockquote>
<h3 id="prerequisites">Prerequisites</h3>
<a rel="nofollow noopener noreferrer" target="_blank" href="https://nodejs.org/">Node.js</a> version 8.9 or higher is required to use Vue CLI on our terminal (v10+ is recommended). With <a rel="nofollow noopener noreferrer" target="_blank" href="https://github.com/creationix/nvm">nvm</a>, we can manage multiple versions of Node on the same machine!
<h2 id="whatisvuecli">What is Vue CLI?</h2>
Vue CLI is an NPM package that is installed on a specific device to allow developers/users to access the <code>vue</code> command through their terminal. This CLI, which can be installed globally or in a specific directory on our PC, allows us to quickly scaffold a new project and build an app with a single command.
It gives Vue developers a new experience and allows them to start developing Vue apps without having to deal with complex configuration of tools like webpack. Simultaneously, it can be configured and extended with plugins for more advanced use cases. It is made up of several parts, including the:
<ul>
<li><a rel="nofollow noopener noreferrer" target="_blank" href="https://cli.vuejs.org/guide/cli-service.html">CLI service</a> which provides multiple scripts for working with Vue projects, such as the <code>serve</code>, <code>build</code> and <code>inspect</code> scripts.</li>
<li><a rel="nofollow noopener noreferrer" target="_blank" href="https://cli.vuejs.org/guide/plugins-and-presets.html#plugins">CLI plugins</a> which are NPM packages that provide additional features to our Vue project, some of these plugins include typescript, PWA, VueX, etc.</li>
</ul>
If we don't want to handle everything through our terminal, the Vue CLI allows developers to perform tasks through an easy-to-use interface, which we will explore very soon.
<h3 id="installingvuecli">Installing Vue CLI</h3>
It is always a good idea to check if a package has already been installed on our PC before installing it, and we can do this for Vue CLI by looking at its version:
<pre><code class="hljs">$ vue --version
</code></pre>
<pre><code class="hljs">$ vue -V
</code></pre>
If we see a version, it means that the Vue CLI has already been installed on our computer; otherwise, an error indicates that it has not been installed. We can install the Vue CLI by running the following command:
<pre><code class="hljs">$ npm install -g @vue/cli
// Or
$ yarn global add @vue/cli
</code></pre>
Typically, the CLI is installed globally, rather than locally, so it's accessible throughout the system.

 <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: Even if the CLI is already installed, it's worth updating it in case it's not already updated to the latest version.

 </div>
 </div>
 </div>
 <pre><code class="hljs">$ npm update -g @vue/cli
// Or
$ yarn global upgrade --latest @vue/cli
</code></pre>
After successfully installing Vue CLI on our PC, we should now be able to access the Vue executable in our terminal to display a list of possible commands and their functions. This can be accomplished by running the following command:
<pre><code class="hljs">$ vue
</code></pre>
Which displays the starting page:
<pre><code class="hljs">Usage: vue &lt;command&gt; [options]

Options:
 -V, --version output the version number
 -h, --help display help for command

Commands:
 create [options] &lt;app-name&gt; create a new project powered by vue-cli-service
 add [options] &lt;plugin&gt; [pluginOptions] install a plugin and invoke its generator in an already created project
 invoke [options] &lt;plugin&gt; [pluginOptions] invoke the generator of a plugin in an already created project
 inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service
 serve alias of &quot;npm run serve&quot; in the current project
 build alias of &quot;npm run build&quot; in the current project
 ui [options] start and open the vue-cli ui
 init [options] &lt;template&gt; &lt;app-name&gt; generate a project from a remote template (legacy API, requires
 @vue/cli-init)
 config [options] [value] inspect and modify the config
 outdated [options] (experimental) check for outdated vue cli service / plugins
 upgrade [options] [plugin-name] (experimental) upgrade vue cli service / plugins
 migrate [options] [plugin-name] (experimental) run migrator for an already-installed cli plugin
 info print debugging information about your environment
 help [command] display help for command

 Run vue &lt;command&gt; --help for detailed usage of given command.
</code></pre>
<h2 id="creatingavueprojectwithvuecli">Creating a Vue Project With Vue CLI</h2>
Once the Vue CLI has been successfully installed - let's create a Vue project! Using the tool, we can easily scaffold a project and create a skeleton to go from, including importing all of the necessary dependencies and additional ones you may already know you'll want. The <code>create</code> command, followed by the name of the project is used to create a skeleton project:
<pre><code class="hljs">$ vue create my-cli-project
</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: <code>my-cli-project</code> is the name of the project. Be weary of spaces! Any space will break the name.

 </div>
 </div>
 </div>
 Once you run the command - you'll be prompted with three presets:
<pre><code class="hljs">Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
&gt; Default ([Vue 3] babel, eslint)
 Default ([Vue 2] babel, eslint)
 Manually select features
</code></pre>
In the first two - you get to choose the Vue version, alongside Babel and ESLint. Only these will be packaged. If you want to include other useful dependencies such as the Vue Router, Vuex, and so on, you'll want to select the &quot;Manually select features&quot; preset.
Here, you can traverse the list of available dependencies, pressing Space to select each option you'd like to enable:
<pre><code class="hljs">Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press &lt;space&gt; to select, &lt;a&gt; to toggle all, &lt;i&gt; to invert selection, and
&lt;enter&gt; to proceed)
&gt;(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
</code></pre>
It'll proceed with several configuration questions, starting with the version of Vue:
<pre><code class="hljs">Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
&gt; 3.x
 2.x
</code></pre>
Followed by the questions of each module you've selected that can be configured:
<pre><code class="hljs">Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for the router? (Requires proper server setup for index fallback in production) (Y/n)
</code></pre>
In the end - the CLI will ask you whether you want to save these options as a Preset! If you do, next time you create a new application, you can pick from this preset besides the two default ones:
<pre><code class="hljs">Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for the router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) y
</code></pre>
Once you supply a name for the preset, it'll show up after calling the <code>create</code> command:
<pre><code class="hljs">$ vue create my-app

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
&gt; my-preset ([Vue 3] babel, pwa, router, vuex, eslint)
 Default ([Vue 3] babel, eslint)
 Default ([Vue 2] babel, eslint)
 Manually select features
</code></pre>
Or you can directly call it during the creation:
<pre><code class="hljs">$ vue create --preset my-preset my-app
</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: If we forget to install some built-in plugins while scaffolding our project, we can easily add them using the <code>vue add my-plugin</code> command at any point later.

 </div>
 </div>
 </div>
 Once the creation process is completed, we can run the app in the development server directly from the CLI using the following command:
<pre><code class="hljs">$ cd my-new-app
$ npm run serve
</code></pre>
The directory of the project is easily verified through the file system or a command such as <code>ls</code> (<code>dir</code> for Windows users):
<pre><code class="hljs">$ ls
README.md jsconfig.json package-lock.json public/ vue.config.js
babel.config.js node_modules/ package.json src/
</code></pre>
Then our browser will open up <code>localhost:8080</code> where we will see the app is running:
<img src="https://s3.stackabuse.com/media/articles/getting-started-with-the-vue-cli-1.png" alt="">
Now, the development begins! You can proceed with your standard development pipeline with the directories and files created by the tool. When you're finished development, or are ready to push changes to a production stage, use the following command to create a production bundle:
<pre><code class="hljs">$ npm run build
</code></pre>
This will output everything to a <code>dist</code> folder within our project, which can be deployed on various hosting platforms. Let's take a look at another method for creating a Vue app, but instead use the Graphical User Interface (GUI)!
<h2 id="vueui">Vue UI</h2>
Using the Vue CLI, you can also start up another project - a GUI for creating applications:
<pre><code class="hljs">$ vue ui
</code></pre>
This will start the GUI on <code>http://localhost:8000/</code>:
<img src="https://s3.stackabuse.com/media/articles/getting-started-with-the-vue-cli-2.png" alt="">
We can start a new project by going to the &quot;Create&quot; tab, which will allow you to choose the path for your project:
<img src="https://s3.stackabuse.com/media/articles/getting-started-with-the-vue-cli-3.png" alt="">
Once the location has been chosen for the project, in a new page, you can enter the name and select your preferred package manager:
<img src="https://s3.stackabuse.com/media/articles/getting-started-with-the-vue-cli-4.png" alt="">
The process of creating skeleton projects is much the same, and the same code runs in the background. It's just a matter of taste - whether you prefer the CLI or the UI. In the same vein, we'll be asked to select our preferred preset, but if we click &quot;Manual,&quot; we will be redirected to a page where we can manually select our preferred plugins, as shown below:
<img src="https://s3.stackabuse.com/media/articles/getting-started-with-the-vue-cli-5.png" alt="">
Again, after setting up the configurations for the different dependencies, you can save your selected options as a preset.
Once the creation process is done, we will be taken to the project dashboard, where we can view all of our plugins, add plugins, manage configuration, and assign tasks:
<img src="https://s3.stackabuse.com/media/articles/getting-started-with-the-vue-cli-6.png" alt="">
These tasks include, serving our app on our browser, building it for production, etc.
<h2 id="conclusion">Conclusion</h2>
In this short guide, you've learned how the Vue CLI works, and how to create new skeleton Vue projects with it. We've taken a look at manual setups and saving presets, as well as serving and building projects. Finally, we've taken a look at the UI as an alternative to the CLI.

In this guide, you will learn how to install the Vue CLI, how to create a Vue project with the Vue CLI, how to use and save presets, how to serve and build them for production, and how to use the Vue UI. 

Getting Started With the Vue CLI

Shittu Olumide

In this guide, learn about common string manipulation in Python, with operators, len(), find(), count(), slicing, replace(), startswith(), endswith(), formatting, join(), changing cases, etc.

Common String Manipulation in Python

<h2 id="introduction">Introduction</h2>
When developing mathematical solutions, answering algorithm questions, or attempting to solve a problem, situations may arise that require us to find the square root of specific values in JavaScript.
<blockquote>
In this article, we will learn how to find the square root of a value or element in JavaScript.
</blockquote>
We can use the <code>Math.sqrt()</code> static function in JavaScript to calculate the square root of any number. This function can be used to calculate the square root of a positive number and an array with a single element. Almost all modern browsers support this.
<h2 id="howtofindasquarerootofanumberinjavascript">How to Find a Square Root of a Number in JavaScript</h2>
<code>Math.sqrt()</code> takes in a variable/value and returns its square root, if it's a number. Let's find the square root of 64 and log it into the console to illustrate the syntax of this static function:
<pre><code class="hljs">let num1 = 64;
console.log(Math.sqrt(num1)); // 8
// Or
console.log(Math.sqrt(64)); // 8
</code></pre>
<h2 id="somecommonerrorsandacceptedvalues">Some Common Errors and Accepted Values</h2>
In the following subsections, we'll take a look at some interesting examples which will help us get a grasp on the values that can be passed as an argument of <code>Math.sqrt()</code> and the type of values that will throw errors.
<h3 id="case1squarerootofanarraywithoneelement">Case 1: Square Root of an Array With One Element</h3>
Suppose the passed value is an array with a single element, <code>Math.sqrt()</code> returns the square root of that element:
<pre><code class="hljs">let num1 = [64];
console.log(Math.sqrt(num1)); // 8
// Or
console.log(Math.sqrt([64])); // 8
</code></pre>
<h3 id="case2squarerootofanarraywithmultipleelements">Case 2: Square Root of an Array With Multiple Elements</h3>
Suppose the value or argument passed is an array which has more than one element, then <code>Math.sqrt()</code> returns <code>NaN</code>:
<pre><code class="hljs">let num1 = [64, 4, 16];
console.log(Math.sqrt(num1)); // NaN
// Or
console.log(Math.sqrt([64, 4, 16])); // NaN
</code></pre>
<h3 id="case3squarerootofnonnumbervalue">Case 3: Square Root of Non-number Value</h3>
Suppose the value passed is not a valid number, in this case, <code>Math.sqrt()</code> will return <code>NaN</code>:
<pre><code class="hljs">let myValue = [&quot;John&quot;];
console.log(Math.sqrt(myValue)); // NaN
// Or
console.log(Math.sqrt(&quot;John&quot;)); // NaN
</code></pre>
<h3 id="case4squarerootofanegativenumber">Case 4: Square Root of a Negative Number</h3>
We might accidentally pass a negative number as an argument of the <code>Math.sqrt()</code>, this will always return <code>NaN</code>:
<pre><code class="hljs">let num1 = -64;
console.log(Math.sqrt(num1)); // NaN
// Or
console.log(Math.sqrt(-64)); // NaN
</code></pre>
<h3 id="case5squarerootofanemptyobject">Case 5: Square Root of an Empty Object</h3>
Suppose we pass in an empty object, it will return <code>NaN</code>:
<pre><code class="hljs">let value1 = {};
console.log(Math.sqrt(value1)); // NaN
// Or
console.log(Math.sqrt({})); // NaN
</code></pre>
<h3 id="case6squarerootinjavascriptreturnszero">Case 6: Square Root in JavaScript Returns Zero</h3>
Suppose we pass in either an empty array, an empty string or <code>null</code>, this will always return zero:
<pre><code class="hljs">let value1 = null;
let value2 = &quot;&quot;;
let value3 = [];

console.log(Math.sqrt(value1)); // 0
console.log(Math.sqrt(value2)); // 0
console.log(Math.sqrt(value3)); // 0
</code></pre>
<h3 id="case7squarerootandarithmeticoperations">Case 7: Square Root and Arithmetic Operations</h3>
It's important to know that we can perform appropriate arithmetic operations inside <code>Math.sqrt()</code>. As long as the resulting value is valid, this will return the correct root value:
<pre><code class="hljs">console.log(Math.sqrt(32 + 32)); // 8
console.log(Math.sqrt(-32 + -32)); // NaN

// Or
let x = 32;
console.log(Math.sqrt(32 + x)); // 8
console.log(Math.sqrt(-32 + -x)); // NaN
</code></pre>
<h2 id="cuberootinjavascript">Cube Root in JavaScript</h2>
JavaScript also provides the way of finding a cube root of a number. Say we need to find the cube root of the number 8 - we'll use the <code>Math.cbrt()</code> method:
<pre><code class="hljs">let num1 = 8;
console.log(Math.cbrt(num1)); // 2

// Or

console.log(Math.sqrt(8)); // 2
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we have seen the standard way to get the square root of a valid value with JavaScript, we have also seen possible errors and the values that will be returned. This will help us when writing our program and will make it easy for us to detect bugs.

In this short tutorial, learn how to perform a square and cube root in JavaScript, with the built-in Math object, and take a look at edge cases in which you might receive unexpected results.

Square Root in JavaScript

<h2 id="introduction">Introduction</h2>
Suppose we have boolean values stored in our database as strings and based on those values we want to perform some specific operation on our website/application. In that case, we have to convert those strings into boolean values before using them in logical operations.
<blockquote>
In this article, we'll take a look at several ways of converting string values to boolean (<code>true</code> or <code>false</code>) in JavaScript.
</blockquote>
<h2 id="usingidentityoperator">Using Identity Operator (===)</h2>
The identity operator, also known as a strict equality operator, returns <code>true</code> only if and only if both values being compared are of the same type and have the same value. In other words, it determines whether the value on the left-hand side is equal to the value on the right-hand side - and returns <code>true</code> if they are, and <code>false</code> if they are not.

 <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 you want to learn more about the difference between <code>==</code> (strict equality operator) and <code>===</code> (loose equality operator), you should read our <a href="https://stackabuse.com/javascript-loose-equality-operator-vs-strict-equality-operator/" target="_blank">&quot;JavaScript: == vs === Operator&quot;</a>!

 </div>
 </div>
 </div>
 Essentially, we'll compare our string to the string <code>&quot;true&quot;</code>. Therefore the output will be a boolean <code>true</code> only if our string is actually <code>&quot;true&quot;</code>. Any other string will cause the code to return the <code>false</code> boolean value:
<pre><code class="hljs">let myString = &quot;true&quot;; 
let boolOutput = (myString === &quot;true&quot;); //returns true
</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: We write a string value with quotes - <code>&quot;true&quot;</code>, and the boolean value without quotes - <code>true</code>. We'll use this notation throughout this whole article.

 </div>
 </div>
 </div>
 Additionally, we can convert a string to lowercase first, just to make sure the letter case won't cause any faulty outputs:
<pre><code class="hljs">let myString = &quot;True&quot;; 
let boolOutput = (myString.toLowerCase() === &quot;true&quot;); // returns true
</code></pre>
As we've stated before, the previous code will return <code>false</code> if our string value is not equal to <code>&quot;true&quot;</code>:
<pre><code class="hljs">let myString1 = &quot;Test&quot;;
let boolOutput1 = (myString1 === &quot;true&quot;); //returns false

let myString1 = &quot;Test&quot;;
let boolOutput1 = (myString1.toLowerCase() === &quot;true&quot;); //returns false

let myString = &quot;True&quot;;
let boolOutput2 = (myString2 === &quot;true&quot;); //returns false
</code></pre>
We can also spice things up a little by introducing the ternary operator alongside the equality operator. All we will do is check if our string is equal to <code>&quot;true&quot;</code> and then return either a boolean value of <code>true</code> if there is a match or <code>false</code> if it doesn't:
<pre><code class="hljs">let myString = &quot;true&quot;;
let boolOutput = myString.toLowerCase() == &#x27;true&#x27; ? true : false; // returns true
</code></pre>
<h2 id="usingregularexpressionsregex">Using Regular Expressions (RegEx)</h2>
Regular expressions (RegEx) are patterns for matching and testing string character combinations.

 <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 this article, we'll assume you have at least a basic understanding of regular expressions in general. But if you need help to get a grasp on regular expressions in JavaScript, you should consider reading our <a href="https://stackabuse.com/guide-to-regular-expressions-and-matching-strings-in-javascript/" target="_blank">&quot;Guide to Regular Expressions and Matching Strings in JavaScript&quot;</a>

 </div>
 </div>
 </div>
 For the purpose of this article, we'll use the most basic form of regular expressions in JavaScript - we'll create the simple regex that matches <code>&quot;true&quot;</code> and match it against our string using the <code>test()</code> method:
<pre><code class="hljs">let stringValue = &quot;true&quot;; 
let boolValue = (/true/).test(stringValue); //returns true
</code></pre>
You will notice this is actually case-sensitive, as this will return <code>false</code> if it has slight case inconsistency:
<pre><code class="hljs">let stringValue = &quot;True&quot;; 
let boolValue = (/true/).test(stringValue); //returns false
</code></pre>
To fix this, we can add <code>/i</code> at the end of the regular expression to ensure for case-insensitive match:
<pre><code class="hljs">let stringValue = &quot;True&quot;; 
let boolValue = (/true/i).test(stringValue); //returns true
</code></pre>
<h2 id="usingthebooleanwrapperclass">Using the Boolean Wrapper Class?</h2>
JavaScript has a built-in <code>Boolean</code> object for storing boolean values. It is actually an object wrapper for boolean values - it wraps around other objects thus making them a valid boolean value. This is done by testing the truthy-falsy value of an object. In general - empty objects are evaluated to <code>false</code>, and non-empty objects are evaluated to <code>true</code>.
Any string which isn't the empty string will evaluate to <code>true</code> by using the <code>Boolean</code> wrapper:
<pre><code class="hljs">let myString1 = Boolean(&#x27;true&#x27;); //returns true
let myString2 = Boolean(&#x27;&#x27;); // //returns false
let myString3 = Boolean(&#x27;false&#x27;); //returns true
let myString4 = Boolean(&#x27;True&#x27;); //returns true
</code></pre>
There are two major issues here:
<ul>
<li>The first is that this will return <code>true</code> for an empty string with at least one blank character (space, tab, etc.), that is why we have to be cautious when using this method:</li>
</ul>
<pre><code class="hljs">const myString5 = Boolean(&#x27; &#x27;); //returns true
</code></pre>
<ul>
<li>Secondly, converting a string of <code>&quot;false&quot;</code> to a boolean value of <code>false</code> will fail because any non-empty string converts to <code>true</code>.</li>
</ul>
<h2 id="doublenotoperator">Double NOT Operator - !!</h2>
Using the double NOT operator is equal to using the logical NOT operator (<code>!</code>) twice, which means that it inverts the result of the single NOT operator:
<pre><code class="hljs">let myString1 = !&#x27;test&#x27;; // returns false
let myString2 = !&#x27;&#x27;; // returns true
</code></pre>
When we use the double NOT operator, the values are flipped, meaning we are now performing a pure boolean conversion:
<pre><code class="hljs">let myString1 = !!&#x27;test&#x27;; // returns true
let myString2 = !!&#x27;&#x27;; // returns false
</code></pre>
The double NOT (<code>!!</code>) operator is quite concise but does the same thing as the <code>Boolean</code> wrapper. However, it's a bit harder to read if you're not familiar with the logical NOT (<code>!</code>) operator.
We also have to be cautious when using this method as an empty string with at least one blank character will still return <code>true</code> and when we try to convert a string of <code>&quot;false&quot;</code> to a boolean value of <code>false</code>, this will still not work (just as with <code>Boolean</code> object).
<h2 id="conclusion">Conclusion</h2>
In this article, we've taken a look at four ways to convert a string into a boolean in JavaScript. The simplest way to do so is to use the strict equality operator to compare our string value to the <code>&quot;true&quot;</code> - if the string is (strictly) equal to <code>&quot;true&quot;</code>, the output will be boolean <code>true</code>. Alternatively, you can use the ternary operator alongside the loose equality operator to achieve the same. Also, regular expression matching is a solid approach.
The last two methods, <code>Boolean</code> object and double NOT operator, have a simpler syntax, but their drawback is the way they treat the <code>false</code> value - string &quot;false&quot; will return the boolean value <code>true</code>, which makes them applicable only to a small subset of conversion cases.

In this guide, learn how to convert a string to a boolean in JavaScript, using the identity operator (===), regex, the Boolean wrapper and double not (!!) operator, through practical code with good practices.

Convert String to Boolean in JavaScript

<h2 id="introduction">Introduction</h2>
When working with JavaScript, we oftentimes encounter situations that require us to obtain the minimum and maximum elements of an array - be it for setting boundaries for a slider or displaying the statistics to a user.
<blockquote>
In this article, we'll take a look at how to get the minimum and the maximum element of an array in JavaScript. We'll also look at four different methods and compare their speeds when dealing with large arrays.
</blockquote>
<h2 id="howtogetminandmaxelementsofanarrayusingthemathobject">How to Get Min and Max Elements of an Array Using the Math Object</h2>
<code>Math</code> is JavaScript's built-in global convenience object containing a lot of methods and constants you might need when performing mathematical operations. Two methods that we'll use in this article are <code>Math.min()</code> and <code>Math.max()</code> - both of them accept a list of numbers as arguments. As their names suggest, one returns the element with the lowest value, and the other returns one whose value is the highest:
<pre><code class="hljs">console.log(Math.min(20, 23, 27)); // 20
console.log(Math.max(20, 23, 27)); // 27

console.log(Math.min(-20, -23, -27)); // -27
console.log(Math.max(-20, -23, -27)); // -20
</code></pre>
If at least one of the passed elements is not a number or cannot be converted to a number, both <code>Math.min()</code> and <code>Math.max()</code> returns <code>NaN</code>:
<pre><code class="hljs">console.log(Math.min(&#x27;-20&#x27;, -23, -27)); // -27
console.log(Math.max(&#x27;number&#x27;, -23, -27)); // NaN
</code></pre>
Similarly, if we try to pass an array as an argument of the <code>Math.min()</code> function, we get a <code>NaN</code>, since it's treated as a single element, which can't be converted to a scalar value:
<pre><code class="hljs">const myArray = [2, 3, 1];
console.log(Math.min(myArray)); // NaN
</code></pre>
However, a quick fix for this is to use the spread operator to unwrap the elements:
<pre><code class="hljs">const myArray = [2, 3, 1];
console.log(Math.min(...myArray)); // 1
</code></pre>
<blockquote>
If you'd like to read more about the Spread Operator - read our <a target="_blank" href="https://stackabuse.com/spread-operator-in-javascript/">Guide to the Spread Operator in JavaScript</a>!
</blockquote>
<h3 id="getmaxandminelementwithreduce">Get Max and Min Element with reduce()</h3>
Reduction operations, sometimes known as folding, are some of the most powerful operations from functional programming, with a wide variety of applications. The <code>reduce()</code> function, runs a reducer function (defined in a callback) on each array element and returns a single value in the end.
It's worth covering the method due to how universally it can be applied:
<pre><code class="hljs">const myArray = [20, 23, 27];

let minElement = myArray.reduce((a, b) =&gt; {
 return Math.min(a, b);
});

console.log(minElement); // 20
</code></pre>
<h3 id="findminandmaxelementwithapply">Find Min and Max Element with apply()</h3>
The <code>apply()</code> method is used to invoke a function with a given <code>this</code> value and an array of arguments. This makes it possible for us to enter arrays into the <code>Math.min()</code> static function:
<pre><code class="hljs">const myArray = [20, 23, 27];

let minElement = Math.min.apply(Math, myArray);
console.log(minElement); // 20
// Or
let minElement = Math.min.apply(null, myArray);
console.log(minElement); // 20
</code></pre>
<h2 id="gettingminandmaxelementswithstandardloopsfastestperformance">Getting Min and Max Elements With Standard Loops - Fastest Performance</h2>
Loops are used in JavaScript to perform repeated tasks based on a condition. Conditions return <code>true</code> or <code>false</code>. A loop will continue running until the defined condition returns <code>false</code>. In our case, we will be making use of the <code>for</code> loop - it is commonly used to run code a number of times.
<h3 id="getminimumelement">Get Minimum Element</h3>
First, we'll initialize the minimum element to the first element of an array. Then, we loop through the entire array to see if the value of any other element is less than the current minimum value - if it is, we'll set the new minimum value to the value of the current element:
<pre><code class="hljs">const myArray = [20, 23, 27];

let minElement = myArray[0];
for (let i = 1; i &lt; arrayLength; ++i) {
 if (myArray[i] &lt; minElement) {
 minElement = myArray[i];
 }
}

console.log(minElement); // 20
</code></pre>
<h3 id="getmaximumelement">Get Maximum Element</h3>
We'll first initialize the maximum element to the first element in the array. Then we will loop through the entire array to see if any other element is greater than the initialized element, so it replaces it:
<pre><code class="hljs">const myArray = [20, 23, 27];

let maxElement = myArray[0];
for (let i = 1; i &lt; arrayLength; ++i) {
 if (myArray[i] &gt; maxElement) {
 maxElement = myArray[i];
 }
}

console.log(maxElement); // 27
</code></pre>
<h2 id="performancebenchmark">Performance Benchmark</h2>
Using JS Benchmark - we've run all of these approaches on varying input, from 100 to 1000000 elements in the array. The performance is relative, and depends on the length of the array.
<ul>
<li>For small arrays (100), the <code>reduce()</code> method performed the best, followed by standard loops, the spread operator and then the <code>apply()</code> method. The runner ups are almost equal in performance.</li>
<li>For medium arrays (1000), the standard loops perform the best, followed by <code>reduce()</code>, the spread operator and the <code>apply()</code> method. Standard loops significantly faster than <code>reduce()</code> here, which in turn, is fairly faster than the runner ups.</li>
<li>For really large arrays (1000000), the standard loops outperform all other methods to such a large degree that the case for standard loops is very strong.</li>
</ul>
Standard loops scale really well, and only lose out to the competition when applied to small arrays. If you're dealing with a few items, or smaller arrays, all of the methods will be fairly seamless. The larger the array, the bigger the benefit of using standard loops.

 <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: Don't take benchmarks at face value! They're run on different machines, with likely different browser versions and JS engines. Test these out in your application and choose the scalable, fastest option for your own use case.

 </div>
 </div>
 </div>
 <h2 id="conclusion">Conclusion</h2>
In this guide, we've taken a look at how to get the minimum and maximum elements of an array in JavaScript. We've taken a look at the <code>Math.min()</code> and <code>Math.max()</code> methods, the spread operator, the <code>reduce()</code> method, the <code>apply()</code> method and wrote a custom approach to getting the elements through a <code>for</code> loop.
Finally, we've benchmarked the results, noting that it doesn't really matter which approach you use for small arrays, while you should tend to use standard for loops for larger arrays.

In this guide, learn how to get the largest and smallest (min and max) elements of an array in JavaScript, using `Math.min()` and `Math.max()` methods, the spread operator, the `reduce()` method, the `apply()` method and a `for` loop.