Global Functions in ReactJS tells me 'not a function'

Question

I have a GlobalFunction.js file with this.

function day(day) {
  switch(day) {
    case 0:
      return "Sunday";
    case 1:
      return "Monday";
    case 2:
      return "Tuesday";
    case 3:
      return "Wednesday";
    case 4:
      return "Thursday";
    case 5:
      return "Friday";
    case 6:
      return "Saturday";
  }
}
function month(month) {
  switch(month) {
    case 0:
      return "January";
    case 1:
      return "February";
    case 2:
      return "March";
    case 3:
      return "April";
    case 4:
      return "May";
    case 5:
      return "June";
    case 6:
      return "July";
    case 7:
      return "August";
    case 8:
      return "September";
    case 9:
      return "October";
    case 10:
      return "November";
    case 11:
      return "December";
  }
}
function styleTime(time) {
  time = time[1].split(':');
  // fetch
  var hours = Number(time[0]);
  var minutes = Number(time[1]);
  var seconds = Number(time[2]);
  // calculate
  var timeValue;
  if (hours > 0 && hours <= 12) {
    timeValue= "" + hours;
  } else if (hours > 12) {
    timeValue= "" + (hours - 12);
  } else if (hours == 0) {
    timeValue= "12";
  }

  timeValue += (minutes < 10) ? ":0" + minutes : ":" + minutes;  // get minutes
  timeValue += (hours >= 12) ? " P.M." : " A.M.";  // get AM/PM
  return timeValue;
}
function nth(d) {
  if (d > 3 && d < 21) return 'th';
  switch (d % 10) {
    case 1:  return "st";
    case 2:  return "nd";
    case 3:  return "rd";
    default: return "th";
  }
}
function styleDate(date) {
  var verifyDay = new Date(date[0]);
  var dayOfWeek = day(verifyDay.getDay()); //prints monday, tuesday, wednesday, etc
  var year = verifyDay.getFullYear(); // prints the year
  var month = month(verifyDay.getMonth());
  var day = verifyDay.getDate();
  var date = day + nth(verifyDay.getDate());
  return dayOfWeek + ", " + month + " " + date + " " + year;
}

export function styleDateTime(dateString) {
  var dateTime = dateString.split(" ");
  return styleDate(dateTime) + " at " + styleTime(dateTime);
}

// default export
export default function() {
    return 'default';
}

I import this into a js file like so.

import { styleDateTime } from "../GlobalFunctions"

I use it like so:

{styleDateTime(array.date)}

In the styleDate function, it tells me that day is not a function. why?

Answer 1

It's because your local day variable in styleDate is shadowing the function defined outside of it. Rename it to something else.

If you think it shouldn't be shadowed because it's defined after the first usage, JavaScript applies hoisting which moves all the declarations to the beginning of the function, setting them to undefined until they are later set.

function styleDate(date) {
    ...
    var myDay = verifyDay.getDate(); 
    var date = myDay + nth(verifyDay.getDate());
    ...

Answer 2

Because inside styleDate method you are creating a new variable with same name as day and that's why you are not able to access the day method. Use a different variable name, it will work.

Write it like this:

function styleDate(date) {
  var verifyDay = new Date(date[0]);
  var dayOfWeek = day(verifyDay.getDay()); //prints monday, tuesday, wednesday, etc
  var year = verifyDay.getFullYear(); // prints the year
  var month = month(verifyDay.getMonth());

  // here
  var new_day = verifyDay.getDate();
  var date = new_day + nth(verifyDay.getDate());
  return dayOfWeek + ", " + month + " " + date + " " + year;
}