Get the Name of the Current Month in Vanilla JavaScript

Introduction
How do you get the full name of the current month using vanilla JavaScript?
You can get that information by using the JavaScript Date instance, which exposes two different methods:
  • date.getMonth(): a method that returns the month in a specified date in the form of a zero-based value.
  • date.toLocaleString(): a method that helps you format dates into human-friendly string formats.
In this article, we'll show you how to use both of these methods and provide you with some code samples as well.
Let's get started!
Table of Contents
Method 1 — toLocaleString()
The first method we'll cover is the toLocaleString() method. This is a built-in function that we'll use to convert a Date object into a string that represents the current month.
Here's what the code looks like:
JavaScript
 
const dateObj = new Date()
const monthName = dateObj.toLocaleString("default", { month: "long" })
// monthName = "November"
The first thing we do is create a dateObj variable that holds a Date object for the current date.
Using that dateObj, we can use the toLocaleString() function with two arguments:
  1. A language tag that we set to have a value of "default". This can be updated to match a specific language.
  2. An object with options data in it. In that object, we tell the function to return the month date component in the "long" formated style.
If you logged the monthName variable, the full name of the current month would be displayed.
You can also have the short month format ("Oct", "Nov", "Nov", etc.) returned instead by modifying your toLocaleString() function to use the "short" formatting style:
JavaScript
 
const dateObj = new Date()
const monthName = dateObj.toLocaleString("default", { month: "short" })
// monthName = "Nov"
As you can see, the short version of the month name is returned instead.
In the next section, we'll show you an additional method using the getMonth() function.
Method 2 — getMonth()
The second method is the getMonth() function. This will return the month of a specified date as a zero-based value (where 0 indicates the first month of the year).
Here's what the code looks like to get the zero-based value:
JavaScript
 
const dateObj = new Date()
const monthNumber = dateObj.getMonth()
// monthNumber = 10
The first thing we do is create a new Date object with the new Date() method and store it in a variable named dateObj.
Then, we use the getMonth() function to get the value of the current month.
If you console.log() the monthNumber variable, a digit representing the current month will be returned.
But this is just a number?! How do we get the full name of the month?
To get the full name of the month, we need to create an array of month strings that correspond to the month digit value. Using that array, we can get the full name of the month.
Here's what the updated code looks like:
JavaScript
 
const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
]
 
const dateObj = new Date()
const monthNumber = dateObj.getMonth()
const monthName = monthNames[monthNumber]
// monthName = "November"
We added a monthNames array of strings with each month name in it.
Then, we used the monthNumber as the index number in the monthNames array to get the string value of the current month.
If you console.log() the monthName variable, a full month name will be returned.
Conclusion
In this article, we showed you two different methods to get the full name of the current month using vanilla JavaScript: toLocaleString() and getMonth().
Thanks for reading and happy coding!