David Landup

Dimitrije Stamenic

Juan Hurtado

Jovana Ninkovic

In this guide, we'll be taking a look at how to implement Prim's Algorithm to find the Minimum Spanning Tree of a Graph in Python with both theory and practice.

Graphs in Python: Minimum Spanning Trees - Prim's Algorithm

Joel Olawanle

In this guide, learn how to use the map() method in JavaScript - chain it with filter() and reverse(), conditionally map, learn the optional parameters, how it works - all through practical use cases and examples.

Guide to JavaScript's map() Method

In this hands on guide - learn how to implement the drag and drop functionality in vanilla JavaScript, as well as the Sortable JS library!

Drag and Drop in Vanilla JavaScript

<h2 id="introduction">Introduction</h2>
An object in JavaScript is an unordered collection of key-value pairs (<code>key: value</code>). Each key is known as a property, and is a string representing a property name. If a non-string is given as the key, its stringified representation will be used. A property's value can be of any data type that fits the property conceptually - a string, a number, an array, or even a function.
An array, on the other hand, is a sorted set of values. Each value is referred to as an element, which is identified by a numerical index. An array can include values of almost any type. For example, it can store items like integers, strings, booleans, functions, etc. JavaScript arrays are also not restricted to a single type, meaning a given array can contain multiple different types within it.
When working in JavaScript, you might at a particular point in time need to determine if a key exists in a given object or array.
<blockquote>
In this article, we will see the various methods which we could use to check if a particular key exists in a JavaScript object/array.
</blockquote>
<h2 id="usingtheinoperator">Using the in Operator</h2>
The <code>in</code> operator in JavaScript is used to determine if a certain property exists in an object or its inherited properties (also known as its prototype chain). If the provided property exists, the <code>in</code> operator returns true.
<h3 id="checkinganobject">Checking an Object</h3>
<pre><code class="hljs">let user = {
 name: &#x27;John Doe&#x27;,
 age: 17,
 profession: &#x27;Farmer&#x27;
};
 
// Check if key exists
 
&#x27;name&#x27; in user; // Returns true
&#x27;profession&#x27; in user; // Returns true
&#x27;Daniel&#x27; in user; // Returns false because no key like that exists
&#x27;Farmer&#x27; in user; // Returns false because &#x27;Farmer&#x27; is not a key, but a value
</code></pre>
<h3 id="checkinganarray">Checking an Array</h3>
Since we demonstrated that the JavaScript <code>in</code> operator can be used with objects, you may be asking if it can also be used with arrays. In JavaScript, everything is an instance of the Object type (except for primitives), so arrays also support the <code>in</code> operator.
Let's confirm if it's an instance of the <code>Object</code> type using the <code>instanceof</code> operator:
<pre><code class="hljs">let numbers = [22, 3, 74, 35];
 
numbers instanceof Object // Returns true
</code></pre>
Now, back to using the <code>in</code> operator:
<pre><code class="hljs">let numbers = [12, 33, 14, 45, 6];

// Checking if index 1 is present
1 in numbers; // Returns true
// Checking if index 3 is present
3 in numbers; // Returns true

8 in numbers; // Returns false because the 8 index does exist in the array 
6 in numbers; // Returns false because the 6 index does not exist in the array
</code></pre>
This will also return <code>true</code> for method properties on an array type, of which the number array is an instance.
<pre><code class="hljs">&#x27;map&#x27; in number; // Returns true because &#x27;map&#x27; is a method attribute of the array type
</code></pre>
<h2 id="usingthehasownpropertymethod">Using the hasOwnProperty() Method</h2>
In JavaScript, the <code>hasOwnProperty()</code> function is used to determine whether the object has the supplied property as its own property. This is important for determining if the attribute was inherited by the object rather than being its own.
<h3 id="checkinganobject">Checking an Object</h3>
<pre><code class="hljs">let user = {
 name: &#x27;John Doe&#x27;,
 age: 17,
 profession: &#x27;Farmer&#x27;
};
 
// Check if key exists
let hasKey = user.hasOwnProperty(&#x27;name&#x27;); 
 
if (hasKey) {
 console.log(&#x27;This key exists.&#x27;);
} else {
 console.log(&#x27;This key does not exist.&#x27;);
}
</code></pre>
<h3 id="checkinganarray">Checking an Array</h3>
You might begin to wonder if this would work for arrays. As we established earlier, an array is actually a prototype (instance) of the <code>Object</code> type, therefore it also has this method available to it.
<pre><code class="hljs">let number = [12, 33, 14, 45];

// Check if key exists
number.hasOwnProperty(1); // Returns true
number.hasOwnProperty(0); // Returns true
number.hasOwnProperty(7); // Returns false because 7 is not an existing index on the array
</code></pre>
<h2 id="usingtheobjectkeymethod">Using the Object.key() Method</h2>
The static method <code>Object.key</code> generates and returns an array whose components are strings of the names (keys) of an object's properties. This may be used to loop through the object's keys, which we can then use to verify if any match a certain key in the object.
<h3 id="usingwiththesomemethod">Using with the some() Method</h3>
<code>some()</code> is a JavaScript method that tests a callback function on all the elements of the calling array and returns <code>true</code> if the callback function returns <code>true</code> for any of them.
<h4 id="usingsomeforobjects">Using some() for Objects</h4>
<pre><code class="hljs">let user = {
 name: &#x27;John Doe&#x27;,
 age: 17,
 profession: &#x27;Farmer&#x27;
};
 
// Check if key exists
Object.keys(user).some(key =&gt; key === &#x27;name&#x27;); // Returns true
Object.keys(user).some(key =&gt; key === &#x27;role&#x27;); // Returns false
</code></pre>
We could also customize this into a reusable function:
<pre><code class="hljs">const checkKey = (obj, keyName) =&gt; {
 let keyExist = Object.keys(obj).some(key =&gt; key === keyName);
 console.log(keyExist);
};
 
checkKey(user, &#x27;name&#x27;); // Return true
</code></pre>
<h4 id="usingsomeforanarray">Using some() for an Array</h4>
<pre><code class="hljs">let number = [12, 33, 14, 45];
 
// Check if key exists
number.some(value =&gt; value === 1); // Returns true
number.some(value =&gt; value === 7); // Returns false
</code></pre>
Again, just like with the object, we could also make use of a similar customized reusable function to check a value's existence in an array:
<pre><code class="hljs">const checkVal = (arr, val) =&gt; {
 let valExist = arr.some(value =&gt; value === val);
 console.log(valExist);
};

checkVal(number, 7); // Returns false
checkVal(number, 0); // Returns true
</code></pre>
<h3 id="usingtheindexofmethod">Using the indexOf() Method</h3>
JavaScript's <code>indexOf()</code> method will return the index of the first instance of an element in the array. If the element does not exist then, -1 is returned.
<h4 id="usingindexofforanobject">Using indexOf() for an Object</h4>
The <code>Object</code> type in JavaScript does not actually support the <code>indexOf</code> method, since its properties/keys do not inherently have indexed positions in the object. Instead, we can get the object's keys as an array and then check the existence of a key using the <code>indexOf</code> method:
<pre><code class="hljs">let user = {
 name: &#x27;John Doe&#x27;,
 age: 17,
 profession: &#x27;Farmer&#x27;
};

// Check if key exists
Object.keys(user).indexOf(&#x27;name&#x27;) // Returns 0
Object.keys(user).indexOf(&#x27;role&#x27;) // Returns -1
</code></pre>
Keep in mind that JavaScript objects do not always preserve key order, so the index returned may not be as meaningful as in arrays. In this case, the index should primarily be used to determine just the existence of a key.
Here is an example of using this in a utility function:
<pre><code class="hljs">const checkKey = (obj, keyName) =&gt; {
 if (Object.keys(obj).indexOf(keyName) !== -1) {
 console.log(&#x27;This key exists&#x27;);
 } else {
 console.log(&#x27;This key does not exist&#x27;);
 }
};
 
checkKey(user, &#x27;name&#x27;); // Logs &#x27;This key exists&#x27;
checkKey(user, &#x27;role&#x27;); // Logs &#x27;This key does not exists&#x27;
</code></pre>
<h4 id="usingindexofforanarray">Using indexOf() for an Array</h4>
As we saw in the previous example, arrays do support the <code>indexOf</code> method, unlike objects. To use it, pass the value of the item you're looking for to <code>indexOf</code>, which will then return the position of that value if it exists in the array:
<pre><code class="hljs">let number = [12, 33, 14, 45];
 
// Find position of the item in the array
number.indexOf(14); // Returns 2
number.indexOf(7); // Returns -1
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we have seen all of the possible ways in which we could check if a key or item exists in a JavaScript object/array. We show how to make use of the <code>in</code> operator, <code>hasOwnProperty()</code> method, and <code>some</code> method. We also saw how JS objects and arrays are similar in that arrays inherit from objects, and thus contain many of the same methods.

Scott Robinson

How to Check if Key Exists in JavaScript Object/Array

Graphs in Python: Minimum Spanning Trees - Kruskal's Algorithm

In this hands-on guide, learn how to create a reusable React button component, to scroll to top, bottom or any particular section on a page with JavaScript!

How to Scroll to Top, Bottom or Any Section in React with a Button Component

<h2 id="introduction">Introduction</h2>
Converting text into a uniform case is a good starting point of any type for text processing.
<blockquote>
In this article we'll show you how to convert text to lowercase using one of the Pythons' built-in methods used to manipulate strings - <code>str.lower()</code>.
</blockquote>
From a top-level view, the process is achieved through:
<pre><code class="hljs">exampleString = &quot;AbCdF_1@3$&quot;
lowercaseString = exampleString.lower()
print(lowercaseString) # abcdef_1@3$
</code></pre>
However, and especially if you're new to Python - read on. We'll discuss one alternative approach for converting strings to lowercase, so that you have a comprehensive overview of the subject. After reading the article, you'll be able to convert any string to lowercase, know when to simply use the <code>str.lower()</code> method, and when to choose the alternative approach instead.
<h2 id="howtoconvertstringtolowercaseinpython">How to Convert String to Lowercase in Python</h2>
Converting strings to lowercase is pretty straightforward to perform in Python. <code>str.lower()</code> is the built-in method made specifically for that purpose. It is defined as a method of the <code>String</code> type which is built into the Python namespace.

 <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: Every Python built-in type has a set of methods designed to perform operations on that specific type. For example, the <code>String</code> type has predefined methods for removing leading and trailing whitespaces, finding and replacing substrings, splitting strings into arrays, etc. One of those methods is <code>str.lower()</code>. 
Every method defined for the <code>String</code> type has the <code>str</code> prefix by its name in the documentation. That suggests that all of them are called on string instances.

 </div>
 </div>
 </div>
 The <code>str.lower()</code> method returns a lowercase copy of the string on which it is called. That can be useful when you want to save the original string for later use. Now, let's see how to convert a string to lowercase in Python.
Let's assume that you have some string that you want to convert:
<pre><code class="hljs">exampleString = &quot;AbCdF_1@3$&quot;
</code></pre>
As you can see, this string has both lowercase and uppercase letters, as well as some special characters. Only the letters can be converted into lowercase, so you would expect the lowercase version of this string to be <code>&quot;abcdef_1@3$&quot;</code>:
<pre><code class="hljs">lowercaseString = exampleString.lower()
print(lowercaseString) # abcdef_1@3$
</code></pre>
After calling the <code>str.lower()</code> method on the <code>exampleString</code>, its lowercase copy is stored as a new object, referenced by <code>lowercaseString</code>. Just to make sure that the <code>str.lower()</code> method produces the correct output, let's compare the <code>lowercaseString</code> to the expected lowercase version of the <code>exampleString</code>:
<pre><code class="hljs">if(lowercaseString == &quot;abcdef_1@3$&quot;):
 print(&quot;Lowercase string EQUAL to expected string!&quot;)
else:
 print(&quot;Lowercase string NOT EQUAL to expected string!&quot;)
</code></pre>
This piece of code will output:
<pre><code class="hljs">&quot;Lowercase string EQUAL to expected string!&quot;
</code></pre>
Awesome!

 <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 opposite method to the <code>str.lower()</code> method is the <code>str.upper()</code>. It is used in the same fashion as the <code>str.lower()</code>. Also, you can check if a string is all-lowercase or all-uppercase by using the <code>str.islower()</code> or <code>str.isupper()</code>.

 </div>
 </div>
 </div>
 <h2 id="whyusestrcasefoldinsteadofstrlower">Why Use str.casefold() instead of str.lower()</h2>
The previous method is suitable for most use cases. It does what it is supposed to do by following a few simple rules. Starting with Python 3.0, strings are represented as arrays of Unicode characters which makes it easy for <code>str.lower()</code> to replace every code of a capital letter with the code of the corresponding lowercase letter.
That principle works fine in almost all use-cases, but there are some instances where you should consider using the <code>str.casefold()</code> method instead.
For example, when implementing caseless matching of two strings, the <code>str.casefold()</code> is the way to go. Since Python uses Unicode to represent strings, all rules defined in the Unicode Standard apply to the Python as well. In section 3.13 the Standard states the following:
<blockquote>
A string <code>X</code> is a caseless match for a string <code>Y</code> if and only if:
<pre><code class="hljs">toCasefold(X) = toCasefold(Y)
</code></pre>
</blockquote>
Because the <code>str.casefold()</code> is the Python implementation of the Unicode method <code>toCasefold()</code>, you should use it when implementing case-less matching.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Both <code>X.casefold()</code> and <code>toCasefold(X)</code> methods map each character of the string <code>X</code> into its case-fold correspondent, as defined in the <code>CaseFolding.txt</code> file in the Unicode Character Database.

 </div>
 </div>
 </div>
 To illustrate the difference between <code>str.lower()</code> and <code>str.casefold()</code>, let's take a look at the example of the German letter &quot;ß&quot;, a lowercase letter which is equal to &quot;ss&quot;. That means that the following strings are supposed to be the exact caseless match:
<pre><code class="hljs">A = &quot;ßaBcß&quot;
B = &quot;ssAbCss&quot;
</code></pre>
But if you try to compare them using the <code>str.lower()</code> method, you won't get the expected result:
<pre><code class="hljs">Al = A.lower()
Bl = B.lower()

print(Al == Bl)
# Output: False
</code></pre>
This comparison will produce the <code>False</code> value, meaning that <code>A.lower()</code> is not equal to <code>B.lower()</code>. That is because the &quot;ß&quot; is already a lowercase letter, so the <code>str.lower()</code> method won't change it. Therefore, <code>Al</code> and <code>Bl</code> have the following values:
<pre><code class="hljs">Al = &quot;ßabcß&quot;
Bl = &quot;ssabcss&quot;
</code></pre>
Obviously, <code>Al</code> is not equal to <code>Bl</code>, thus the previous comparison must produce the <code>False</code> value.
To correct this unexpected behavior, you should use the <code>str.casefold()</code> method. It is more aggressive compared to the <code>str.lower()</code> because it will remove absolutely all differences in letter casing in a string. Therefore, the &quot;ß&quot; will be replaced by &quot;ss&quot; and you can caseless match strings <code>A</code> and <code>B</code>:
<pre><code class="hljs">Ac = A.casefold()
# Ac = &quot;ssabcss&quot;

Bc = B.casefold()
# Bc = &quot;ssabcss&quot;
</code></pre>
Now, if you compare case-folded strings <code>A</code> and <code>B</code>, you'll get the expected result, the same as defined in the Unicode Standard:
<pre><code class="hljs">print(Ac == Bc)
# Output: 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">
 Alert: The shown type of caseless matching is called default caseless matching, which is the most basic type of caseless matching defined by the Unicode Standard. 
There are three more types of caseless matching defined in the Unicode Standard - canonical, compatibility, and identifier caseless matching. Each of them implies that one or more steps are added in order to improve the correctness of the matching in more specific use-cases. Those additional steps usually consist of normalizing strings during the matching (which is not performed during the default caseless matching).

 </div>
 </div>
 </div>
 <h2 id="problemswithstrcasefold">Problems with str.casefold()</h2>
Even though <code>str.casefold()</code> is a built-in Python method intended to implement the <code>toCasefold()</code> method from the Unicode Standard, you definitely shouldn't use it carelessly. There are some edge cases where it won't produce the desired result.
For example, the Unicode Standard defines the case-folded (lowercase) version of the capital letter <code>I</code> as <code>i</code>, which is in line with its use in most languages. But that mapping can't work in Turkish. The Turkish language has two variants of the letter <code>I</code> with their own lowercase correspondents:
<ul>
<li>uppercase i - <code>I</code> (similar to the usual uppercase letter i)
<ul>
<li>with its lowercase variant - <code>ı</code></li>
</ul>
</li>
<li>dotted uppercase i - <code>İ</code>
<ul>
<li>with its lowercase variant - <code>i</code> (similar to the usual lowercase letter i)</li>
</ul>
</li>
</ul>
Consequently, the standard Unicode coding wouldn't work in the Turkish language. Because of that, the Unicode Standard defined two different case-folding mappings - for Turkish and non-Turkish languages. The Turkish variant takes into account the count mentioned nuances from the Turkish language and the non-Turkish variant maps the uppercase <code>I</code> to its usual lowercase counterpart <code>i</code>.
On the other hand, the <code>str.casefold()</code> uses only the default (non-Turkish) case-fold mapping, therefore it can't perform caseless matching in Turkish for some words.

 <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: Therefore, it is said that the <code>str.casefold()</code> doesn't pass the Turkish test!

 </div>
 </div>
 </div>
 For example, the following strings are supposed to be a caseless match in Turkish:
<pre><code class="hljs">str1 = &quot;Iabcİ&quot;
str2 = &quot;ıabci&quot;
</code></pre>
But, in practice, the usual comparison will yield the <code>False</code> value:
<pre><code class="hljs">print(str1.casefold() == str2.casefold())
# &quot;iabci&quot; == &quot;ıabci&quot;
# Outputs: False
</code></pre>
Note that the <code>str.casefold()</code> converted both <code>I</code> and <code>İ</code> into the same lowercase character - <code>i</code>, which is according to the standard (non-Turkish) case-fold mapping of the Unicode Standard. That is what caused the undesired result of this caseless matching.
This example illustrates the case when <code>str.casefold()</code> produces the incorrect result of caseless matching in a specific language. Therefore, you should pay attention to the specifics of the language you are working with.
<h2 id="conclusion">Conclusion</h2>
After reading this guide, you will understand what's the most generic way to convert a string to lowercase in Python, as well as what is the alternative approach.
We've shortly covered the <code>str.lower()</code> method in Python and then dove into the details of the <code>str.casefold()</code> method.
We've covered its basic use cases, compared them to the <code>str.lower()</code> method, explained basic concepts and standards surrounding the Python implementation of the case-folding algorithm.
In the end, we've discussed some problematic use-cases so that you can be aware of some of the undesired results that the <code>str.casefold()</code> method can produce.

In this guide, learn how to convert a string to lowercase in Python, with str.lower() and str.casefold(), through practical code examples, and extensive explanations, for beginners.

Convert String to Lowercase in Python

<h2 id="introduction">Introduction</h2>
Dates are a regular part of our everyday lives, and we're generally aware of the day, or at least month we're in at any given point. This proves to be a great reference point for time, and displaying the name of a month or a day can help users figure out when, relative to their current state, something has happened or will happen.
In JavaScript, there's a number of ways we can achieve this.
<blockquote>
In this article, we'll walk you through the most common ways on how to get the name of month and day in Vanilla JavaScript, alongside how this could also be achieved with the Moment.js library.
</blockquote>
It is important to note that if you are working on a small project, it might be frustrating to start installing packages for something rudimentary. Small projects should be implemented using JavaScript's built-in methods, dependencies should only be introduced if the necessity arises.
Getting and displaying a day's or month's name, in JavaScript, can be simplified to:
<pre><code class="hljs">let now = new Date().toLocaleDateString(&#x27;en-us&#x27;, { weekday:&quot;long&quot;, month:&quot;long&quot;, day:&quot;numeric&quot;});
console.log(now)
</code></pre>
This results in:
<pre><code class="hljs">Friday, March 4
</code></pre>
There are a few parameters that we can tweak here for a different result and effect, and it's worth noting how the <code>toLocaleDateString()</code> method works, and what locale's are available. You can additionally extract singular day or month names from the method!
<blockquote>
We'll answer all of these questions in the proceeding sections.
</blockquote>
<h2 id="thedateobjectinjavascript">The Date Object in JavaScript</h2>
The <code>Date</code> object is a built-in datatype, used to work with dates and times. The <code>Date</code> object is created by using the <code>new</code> keyword, i.e. <code>new Date()</code> and provides a number of built-in methods for formatting and managing that data.
By default, a new <code>Date</code> instance without any parameters, creates an object corresponding to the current date and time (i.e. according to the computer's system settings):
<pre><code class="hljs">let dateTime = new Date();
console.log(dateTime); // Mon Mar 07 2022 18:07:01 GMT+0100 (Central European Standard Time)
</code></pre>
Now, let's take a look at how to extract the day and month from this output, and get their names!
<h3 id="getdayfromjavascriptsdateobject">Get Day from JavaScript's Date Object</h3>
There are multiple ways to extract the date from a <code>Date</code> object. We've used <code>toLocaleString()</code> in the introduction - but you can also extract the exact field with <code>getDay()</code>!
<h4 id="usingthegetdaymethod">Using the getDay() Method</h4>
<code>getDay()</code> returns the day of the week (a number to represent the day in a week between 0 and 6) for that <code>Date</code> object:
<pre><code class="hljs">// Get current day
let day = new Date().getDay();
console.log(day); //6

// Get day in the week of a certain date
let day = new Date(&quot;October 14, 2020 09:38:00&quot;).getDay();
console.log(day); //3
</code></pre>
Knowing fully well that there are 7 days in a week, we can simply map the days in a week to an index! However, it's worth noting that the numbering of days in a week starts from Sunday and ends at Saturday:
<pre><code class="hljs">Sunday=0, 
Monday=1, 
Tuesday=2,
...,
Saturday=6.
</code></pre>
Let's create an array of the names of the days in the week, following the expected order, and get the name, given the index (day in the week) returned by <code>getDay()</code>:
<pre><code class="hljs">let daysArray = [&#x27;Sunday&#x27;, &#x27;Monday&#x27;, &#x27;Tuesday&#x27;, &#x27;Wednesday&#x27;, &#x27;Thursday&#x27;, &#x27;Friday&#x27;, &#x27;Saturday&#x27;];
let day = new Date().getDay();
let dayName = daysArray[day];
console.log(dayName); // &quot;Saturday&quot;
</code></pre>
You can also wrap this functionality up in a callable function if you're using the logic on multiple occasions:
<pre><code class="hljs">const getDayName = (dayIndex) =&gt;{
 let daysArray = [&#x27;Sunday&#x27;, &#x27;Monday&#x27;, &#x27;Tuesday&#x27;, &#x27;Wednesday&#x27;, &#x27;Thursday&#x27;, &#x27;Friday&#x27;, &#x27;Saturday&#x27;];
 return daysArray[dayIndex];
}
 
const dayName = getDayName(new Date().getDay());
console.log(dayName); // &quot;Saturday&quot;
</code></pre>
<h3 id="usingthetolocaledatestringmethod">Using the toLocaleDateString() Method</h3>
A much more straightforward method that does the indexing logic for you is <code>toLocaleDateString()</code>! Additionally, it provides formatting options for the locale you've defined, so you can dynamically adapt the format to the user's location.
This method takes in four basic options - <code>weekday</code>, <code>year</code>, <code>month</code> and <code>day</code>, and allows us to set the day's name to be longer or shorter:
<pre><code class="hljs">let dayName = new Date().toLocaleDateString(&#x27;en-us&#x27;, { weekday:&quot;long&quot;})
console.log(dayName); // &quot;Saturday&quot;
 
let dayNameSt = new Date().toLocaleDateString(&#x27;en-us&#x27;, { weekday:&quot;short&quot;})
console.log(dayNameSt); // &quot;Sat&quot;
</code></pre>
<h2 id="getmonthfromjavascriptsdateobject">Get Month from JavaScript's Date Object</h2>
So far we have been able to see how to get the day and I know you are guessing how that of the month will work. To be very sincere, most of you if not all will get it right. We would use the two methods like we did for the day, but just change a little syntax.
<h3 id="usingthegetmonthmethod">Using the <code>getMonth()</code> Method</h3>
The <code>getMonth()</code> method is another <code>Date</code> method, much in the way <code>getDay()</code> returns an integer - returns the index of the month, denoted by the <code>Date</code> instance. The returned month will be between <code>0..11</code>, starting at January and ending at December:
<pre><code class="hljs">let month = new Date().getMonth();
console.log(month); // 2

let month = new Date(&quot;October 14, 2020 09:38:00&quot;).getMonth();
console.log(month); // 9
</code></pre>
Let's define an array of month names, and access the appropriate name based on the returned value:
<pre><code class="hljs">let monthsArray = [&#x27;January&#x27;, &#x27;February&#x27;, &#x27;March&#x27;, &#x27;April&#x27;, &#x27;May&#x27;, &#x27;June&#x27;, &#x27;July&#x27;, &#x27;August&#x27;, &#x27;September&#x27;, &#x27;October&#x27;, &#x27;November&#x27;, &#x27;December&#x27;];
let month = new Date().getMonth();
let monthName = monthsArray[month];
console.log(monthName); // &quot;March&quot;
</code></pre>
We could also decide to make this reusable by creating a function that can easily be called anywhere in your application:
<pre><code class="hljs"> const getMonthName = (monthIndex) =&gt;{
 let monthsArray = [&#x27;January&#x27;, &#x27;February&#x27;, &#x27;March&#x27;, &#x27;April&#x27;, &#x27;May&#x27;, &#x27;June&#x27;, &#x27;July&#x27;, &#x27;August&#x27;, &#x27;September&#x27;, &#x27;October&#x27;, &#x27;November&#x27;, &#x27;December&#x27;];
 return monthsArray[monthIndex];
}
 
const monthName = getMonthName(new Date().getMonth());
console.log(monthName); // &quot;March&quot;
</code></pre>
<h3 id="usingthetolocaledatestringmethod">Using the toLocaleDateString() Method</h3>
Again, the <code>toLocaleDateString()</code> method formats a <code>Date</code> to a string, displaying the field we're interested in, and formatting it according to the configuration object:
<pre><code class="hljs">let monthName = new Date().toLocaleDateString(&#x27;en-us&#x27;, { month:&quot;long&quot;})
console.log(monthName); // &quot;March&quot;
 
let monthNameSt = new Date().toLocaleDateString(&#x27;en-us&#x27;, { month:&quot;short&quot;})
console.log(monthNameSt); // &quot;Mar&quot;
</code></pre>
<h2 id="usingjavascriptlibraries">Using JavaScript Libraries</h2>
It is also expedient to cover how this could be achieved with Moment.js, a popular JavaScript library present in many projects.
<h3 id="momentjs">Moment.js</h3>
Moment.js is widely regarded as the one of the best JavaScript date-time packages, and for good reason. It is really simple to use, extensively documented, and just 20kb in size (minified, Gzipped)!
<h3 id="howtogetnameofdaywithmomentjs">How to Get Name of Day with Moment.js</h3>
Moment.js makes getting the name of the day or month a breeze - we simply <code>format()</code> a date! The <code>'ddd'</code> signifier formats the date name to a short one, while <code>'dddd'</code> formats it to a long one:
<pre><code class="hljs">// Get current date
var date = moment();

var dayName = date.format(&#x27;ddd&#x27;);
console.log(dayName); // &quot;Sat&quot;

var dayName = date.format(&#x27;dddd&#x27;);
console.log(dayName); // &quot;Saturday&quot;
</code></pre>
<h3 id="howtogetnameofmonthwithmomentjs">How to Get Name of Month with Moment.js</h3>
The same logic applies to month names:
<pre><code class="hljs">var date = moment();
var monthName = date.format(&#x27;MMM&#x27;);
console.log(monthName); // &quot;Mar&quot;
 
var monthName = date.format(&#x27;MMMM&#x27;);
console.log(monthName); // &quot;March&quot; 
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this guide, we've covered how to get the name of the day and month of a date in JavaScript, in a human-friendly format.
We've covered the <code>getDay()</code>, <code>getMonth()</code>, <code>toLocaleString()</code> methods, as well as Moment.js, which simplifies and streamlines the process.

In this short guide - learn how to get the name of the day or month of a date in Vanilla JavaScript, with getDay(), getMonth(), toLocaleString() and Moment.js! 

How to Get Name of Month and Day in JavaScript

In this hands on guide - learn how to create a vanilla JavaScript countdown timer, styled beautifully with CSS.
