How to Convert Month Number to Month Name in JavaScript

Converting a month number to a month name in JavaScript is a common requirement in web development, especially when dealing with dates and user interfaces. This guide will walk you through various methods to convert a month number (1-12) into a corresponding month name (e.g., January, February), with detailed explanations and code examples.

function getMonthName(monthNumber) {
    const monthNames = ["January", "February", "March", "April", "May", "June", 
                        "July", "August", "September", "October", "November", "December"];
    return monthNames[monthNumber - 1];
}

let monthName = getMonthName(3);
console.log(monthName); // "March"

To convert a month number to a month name in JavaScript, you can use an array to map the month numbers to their corresponding names:

In many web applications, you might need to display month names based on numeric input, such as in date pickers, reports, or dashboards. JavaScript provides several ways to achieve this, ranging from simple arrays to built-in date methods.

Using an Array to Map Month Numbers

One of the simplest ways to convert a month number to a month name is by using an array where each index corresponds to a month.

Example 1: Simple Array Mapping

function getMonthName(monthNumber) {
    const monthNames = ["January", "February", "March", "April", "May", "June", 
                        "July", "August", "September", "October", "November", "December"];
    return monthNames[monthNumber - 1];
}

let monthName = getMonthName(7);
console.log(monthName); // "July"

Explanation:

• const monthNames = [...]: An array is created with all the month names.
• monthNames[monthNumber - 1]: Since arrays are zero-indexed, subtracting 1 from the month number gives the correct index.

Using JavaScript’s Date Object

JavaScript’s Date object provides methods that can be used to extract the month name from a date.

Example 2: Conversion Using Date Object

function getMonthName(monthNumber) {
    const date = new Date();
    date.setMonth(monthNumber - 1);
    return date.toLocaleString('default', { month: 'long' });
}

let monthName = getMonthName(12);
console.log(monthName); // "December"

Explanation:

• new Date(): Creates a new Date object.
• date.setMonth(monthNumber - 1): Sets the month in the Date object, adjusting for zero-based indexing.
• date.toLocaleString('default', { month: 'long' }): Converts the month to a long month name string.

Using a Switch Statement

A switch statement provides another way to map month numbers to month names, useful if you prefer this style or need more control over the logic.

Example 3: Conversion Using Switch Case

function getMonthName(monthNumber) {
    switch (monthNumber) {
        case 1: return "January";
        case 2: return "February";
        case 3: return "March";
        case 4: return "April";
        case 5: return "May";
        case 6: return "June";
        case 7: return "July";
        case 8: return "August";
        case 9: return "September";
        case 10: return "October";
        case 11: return "November";
        case 12: return "December";
        default: return "Invalid Month";
    }
}

let monthName = getMonthName(5);
console.log(monthName); // "May"

Explanation:

• switch (monthNumber) { ... }: The switch statement checks the monthNumber and returns the corresponding month name.

Custom Function for Reusability

Creating a custom function allows you to encapsulate the logic and reuse it throughout your project.

Example 4: Creating a Reusable Function

function getMonthName(monthNumber) {
    if (monthNumber < 1 || monthNumber > 12) {
        return "Invalid Month";
    }
    const monthNames = ["January", "February", "March", "April", "May", "June", 
                        "July", "August", "September", "October", "November", "December"];
    return monthNames[monthNumber - 1];
}

let monthName = getMonthName(11);
console.log(monthName); // "November"

Explanation:

• The function checks if the monthNumber is within a valid range before attempting to convert it.
• This function is reusable and can be included in utility libraries or directly in scripts.

Conclusion

Converting a month number to a month name in JavaScript can be done in several ways, each with its own advantages. Whether using a simple array, the Date object, a switch statement, or a custom function, understanding these methods will allow you to efficiently handle date-related tasks in your JavaScript projects.