<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

Dimitrije Stamenic

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

Joel Olawanle

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.

JavaScript: Get Min and Max Element of Array

<h2 id="introduction">Introduction</h2>
JavaScript supports a variety of data types such as strings, numbers, floats, etc. A string is a collection of characters such as &quot;John Doe&quot;. Typically, you create them by enclosing characters in double or single quotes. Alternatively, you can make a string by using the <code>new String()</code> constructor:
<pre><code class="hljs">let myString = &#x27;John Doe&#x27;;
let myString2 = new String(&quot;John Doe&quot;);
</code></pre>
<blockquote>
When performing specific operations, you may face a situation that demands you to verify that a specific variable is a string before processing it - lest an error be thrown. We'll cover that situation in this article! First, we'll take a look at how to check if a particular variable is a string in JavaScript and then show you an alternative approach that uses the Lodash library.
</blockquote>
<h2 id="standardsolutionusingtypeofoperator">Standard Solution - Using typeof Operator</h2>
In JavaScript, the <code>typeof</code> operator is the most used method to check the type of any variable. Alternatively, you can use the <code>typeof()</code> method:
<pre><code class="hljs">let myString = &#x27;John Doe&#x27;;

typeof myString; // string
typeof(myString); // string
</code></pre>
If used with a string, the <code>typeof</code> operator returns <code>&quot;string&quot;</code>. Let's create a simple example to confirm this:
<pre><code class="hljs">let myString = &quot;John Doe&quot;;

if (typeof myString === &quot;string&quot;) {
 console.log(&quot;This variable is a string&quot;);
} else {
 console.log(&quot;This variable is not a string&quot;);
}
</code></pre>
Indeed, the <code>myString</code> is a string:
<pre><code class="hljs">This variable is a string
</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: Even if the variable contains a number that is wrapped in single/double quotes, it still would be considered a string.

 </div>
 </div>
 </div>
 One interesting problem with the <code>typeof</code> operator is that it doesn't recognize strings created using the <code>new String()</code> constructor. The <code>new</code> keyword creates a new JavaScript object that is the instance of the <code>String</code> type. Therefore, the <code>typeof</code> operator won't correctly recognize strings created using the <code>new String()</code> constructor:
<pre><code class="hljs">let myString = new String(&#x27;John Doe&#x27;);

console.log(typeof myString); // &quot;object&quot;
</code></pre>
In this case, instead of the <code>typeof</code> operator, we need to use the <code>instanceof</code> operator - it can detect that the object created with the <code>new String()</code> constructor is the instance of the <code>String</code> type:
<pre><code class="hljs">let myString = new String(&quot;John Doe&quot;);

if (myString instanceof String) {
 console.log(&quot;This variable is a string&quot;);
} else {
 console.log(&quot;This variable is not a string&quot;);
}
</code></pre>
Since the <code>myString</code> is a string, this code will produce the following output:
<pre><code class="hljs">This variable is a string
</code></pre>
<h2 id="usinglodashlibrary">Using Lodash Library</h2>
If you're already using the Lodash library in your project, there's no harm in using it for checking whether a variable is a string or not! It's absolutely not necessary to have a dependency if we don't need Lodash for something else, but, if we already have that dependency, we can make use of the <a rel="nofollow noopener noreferrer" target="_blank" href="https://underscorejs.org/#isString"><code>_.isString()</code></a> method, which returns <code>true</code> if the specified value is a string primitive or a <code>String</code> object, making it fit for both explicitly and implicitly created strings:
<pre><code class="hljs">let myString = new String(&quot;John Doe&quot;);

if (_.isString(myString)) {
 console.log(&quot;This variable is a string&quot;);
} else {
 console.log(&quot;This variable is not a string&quot;);
}
</code></pre>
Output:
<pre><code class="hljs">This variable is a string
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we've learned how to check if a variable is a string in JavaScript. Also, we've learned how this works with an external library like Lodash.

In this tutorial, learn how to check whether a variable is a string or not in JavaScript - both for implicitly and explicitly created Strings, with or without the new keyword, as well as with Lodash.

JavaScript: Check if Variable Is a String

<h2 id="introduction">Introduction</h2>
An array is used to store an ordered collection of values. These values could be a combination of either the same data type or numerous data types - integers, floats, strings, boolean, objects, and lots more.
Getting the number of elements in an array with JavaScript is a common operation when consuming data or working with APIs in JavaScript. This can be accomplished either by utilizing the <code>length</code> property or iterating through an array and counting the elements.
<blockquote>
In this article, we will learn how to get the number of elements in an array with JavaScript and much more - how to count unique elements and how to count elements of an array based on certain conditions.
</blockquote>
<h2 id="usingthebuiltinlengthproperty">Using the Built-in length Property</h2>
The standard way to get the total number of elements in an array is to use the built-in <code>length</code> property:
<pre><code class="hljs">let myArray = [99, 101.5, &quot;John Doe&quot;, true, { age: 44 }];
let total = myArray.length;
console.log(total); // Output: 5

// Alternatevly:
let total = [99, 101.5, &quot;John Doe&quot;, true, { age: 44 }].length;
console.log(total); // Output: 5
</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>length</code> refers to a cached value of the length of the array, computed when the array is being created. Therefore, you don't iterate the array by calling <code>length</code> explicitly, nor implicitly. This ensures that <code>length</code> scales up to an arbitrary level and doesn't impact the performance of your application, such as the impact you'd feel when manually looping through.

 </div>
 </div>
 </div>
 <h2 id="usingloopsinjavascript">Using Loops in JavaScript</h2>
JavaScript loops can also be used to count the length of an array by iterating through the array and incrementing the counter variable by one for each element in the array. This is mostly used when you want to perform certain operations on the elements themselves or on a particular element since we are iterating through all the elements in the array.

 <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 harder compared to the previously described <code>length</code> property, though, it's pretty simple in and of itself. It's worth noting that longer arrays take longer to iterate through, while <code>length</code> returns the cached value with a constant lookup time.

 </div>
 </div>
 </div>
 <h3 id="forloop">for Loop</h3>
<pre><code class="hljs">let myArray = [99, 101.5, &quot;John Doe&quot;, true, { age: 44 }];

// Counter variable
let total = 0;

for (let i = 0; i &lt; myArray.length; i++) {
 total++;
}

console.log(total); // Output: 5
</code></pre>
<h3 id="forinloop">for...in Loop</h3>
<pre><code class="hljs">let myArray = [99, 101.5, &quot;John Doe&quot;, true, { age: 44 }];

let total = 0;
for (i in myArray) {
 total++;
}

console.log(total); // Output: 5
</code></pre>
<h2 id="getthenumberofuniqueelementsinanarray">Get the Number of Unique Elements in an Array</h2>
Arrays in JavaScript can have multiple elements of different data types and these elements could include some duplicates. If we want to get the number of unique elements we can use the <code>Set()</code>constructor.
It creates a set out of the array passed as its argument. Therefore it helps us remove duplicates and returns only unique elements (a set is a collection of unique elements). When duplicates are removed, we can use the <code>length</code> property to get the number of unique elements.

 <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">
 Hint: If you want to learn more about how to remove duplicates from an array in JavaScript, you should read <a target="_blank" href="https://stackabuse.com/how-to-remove-duplicates-from-an-array-in-javascript/">How to Remove Duplicates From an Array in JavaScript</a>!

 </div>
 </div>
 </div>
 For example, suppose we have an array of names that has a total of 7 elements, among which 6 are unique. We can get the unique elements first and then make use of the <code>length</code> property to get the length:
<pre><code class="hljs">let names = [&quot;John&quot;, &quot;Dan&quot;, &quot;Jane&quot;, &quot;Sam&quot;, &quot;Alisa&quot;, &quot;John&quot;, &quot;Pete&quot;];
let uniqueNames = [...new Set(names)];
let totalPeople = uniqueNames.length;

console.log(totalPeople); // Output: 6
</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: This can also work with loops. After we get the unique elements stored in a new array, all we have to do is to loop it through and count elements as we've done earlier.

 </div>
 </div>
 </div>
 <h2 id="whatifanarraycontainsotherarraysaselements">What If an Array Contains Other Arrays as Elements?</h2>
As we've stated before, arrays in JavaScript can contain elements of many data types - including an <code>Array</code> data type. This may be a bit confusing at first, but when you get a grasp on how <code>length</code> property counts those subarrays, you are going to be able to handle this situation without any problems.
The first method that probably goes to mind is to use the <code>length</code> property:
<pre><code class="hljs">let myArray = [[&quot;John&quot;, &quot;Pete&quot;], [90, 2], [], [34, 45, 2], [9,4], &quot;John Doe&quot;, true, [19]];
let total = myArray.length;

console.log(total); // Output: 8
</code></pre>
Note how the <code>length</code> property treats each subarray as one element. It doesn't consider the contents of subarrays - no matter if it's empty or it has a large number of elements, it is counted as one element of the original array (in this case, <code>myArray</code>).
<h3 id="getthenumberofelementsinanarraycontainingotherarrays">Get the Number of Elements in an Array Containing Other Arrays</h3>
Let's now learn how to count the number of all elements in an array - including those elements inside subarray elements. We can use a couple of approaches, such as a <code>for</code> loop or a <code>for...in</code>, etc.
We'll first initialize the <code>totalLength</code> to 0, then create a function (<code>myLength()</code>) which will be used to loop through the array and count the number of its elements. First of all, we need to loop through the original array and consider each of its elements. If the element is not an array, we'll just increase the <code>totalLength</code> by 1. On the other hand, if the current element is an array (subarray of the original array), we'll recursively call the <code>myLength</code> method to calculate the number of its elements:
<pre><code class="hljs">let myArray = [[&quot;John&quot;, &quot;Pete&quot;], [90, 2], [], [34, 45, 2], [9,4], &quot;John Doe&quot;, true, [19]];

let totalLength = 0;
const myLength = (array) =&gt; {
 // For each element of the `myArray`
 for (let i in array) {
 // If the element is an array
 // recursively call `myLength` to calculate
 // the length of the current element
 // Otherwise, just increment the `totalLength`
 if (Array.isArray(array[i])) {
 myLength(array[i]);
 } else {
 totalLength++;
 }
 }
};

myLength(myArray);
console.log(totalLength); // Output: 12
</code></pre>
Alternatively, you can simply call the <code>flat()</code> method on <code>myArray</code>, which flattens it by recursively concatenating all of the elements into a 1D array, and then call <code>length</code> on the new array:
<pre><code class="hljs">console.log(myArray.flat().length) // Output: 12
</code></pre>
<h2 id="countbasedonconditions">Count Based on Conditions</h2>
Like we've mentioned earlier, we can also count the number of elements in an array based on certain conditions. For example, suppose we have an array of students which consists of objects, each object containing students name and score:
<pre><code class="hljs">const students = [
 { name: &quot;John Doe&quot;, score: 70 },
 { name: &quot;Jane Doe&quot;, score: 40 },
 { name: &quot;Sarah Jane&quot;, score: 33 },
 { name: &quot;John Tough&quot;, score: 84 },
 { name: &quot;Jabes Tough&quot;, score: 64 }
];
</code></pre>
We can count the total number of students that score above 60, by looping through each element and counting ones that passed the predefined condition:
<pre><code class="hljs">let total = 0;

students.forEach((student) =&gt; {
 if (student.score &gt;= 60) {
 total++;
 }
});

console.log(total); // Output: 3
</code></pre>
This would also work for other iteration methods like the <code>for</code> loop:
<pre><code class="hljs">let total = 0;

for (let i = 0; i &lt; students.length; i++) {
 if (students[i].score &gt;= 60) {
 total++;
 }
}

console.log(total); // Output: 3
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we learned how to get the number of elements in an array and we saw various scenarios that could warrant us getting the length of an array and how we could achieve each of them.

In this tutorial, learn how to get the number of elements in a JavaScript array/list, using the length property, a manual for loop with a counter, how to count elements of nested arrays by flattening arrays and manually counting through, etc. with practical code examples.