[Javascript] How should the BUilt-in object name an alias?
Please define the customized function and import it. It is to be difficult to name an alias to the built-in object.
builtin.js
export default class BuiltInDate extends Date { constructor(any) { super(any); } }
index.js
import BuiltInDate from "./builtin"; const date = new BuiltInDate();
Background
There are many built-in objects and functions in Javascript.
Standard built-in objects(MDN)
They are really useful, but it may cause some problems like the following case.
import { format } from "date-fns";
export default function Date({ dateString }) {
return (
<time dateTime={dateString}>
{format(new Date(dateString), "LLLL d, yyyy")}
</time>
);
}
date.js : Nextjs example of CMS Contentful
This represents a component that uses ReactJS to display the date. What is noteworthy here is that the function name is defined as Date, and it tries to call the built-in Date internally. The intent of defining such a function would be to be readable. Since it represents a date, I would like to express it simply as Date. It seems that you want the name to be recognizable to any programmer, not a unique name such as CustomeDate. Giving a name is very difficult and there is a possibility that the intentions may not be conveyed or may change later on. We also don't want to go with a long name - Simple is the best, the old adage shines through here.
However, if you run this, you will get an error as follows.
TypeError: Cannot destructure property `dateString` of 'undefined' or 'null'.
at new Date (/home/cms-contentful-app/.next/server/static/development/pages/index.js:363:14)
at new Date (/home/cms-contentful-app/.next/server/static/development/pages/index.js:374:62)
at Date (/home/cms-contentful-app/.next/server/static/development/pages/index.js:374:62)
at processChild (/home/cms-contentful-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)
at resolve (/home/cms-contentful-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
at ReactDOMServerRenderer.render (/home/cms-contentful-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)
at ReactDOMServerRenderer.read (/home/cms-contentful-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
at renderToString (/home/cms-contentful-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
at render (/home/cms-contentful-app/node_modules/next/dist/next-server/server/render.js:83:16)
at Object.renderPage (/home/cms-contentful-app/node_modules/next/dist/next-server/server/render.js:419:16)
at Function.getInitialProps (/home/cms-contentful-app/.next/server/static/development/pages/_document.js:293:19)
at Object.loadGetInitialProps (/home/cms-contentful-app/node_modules/next/dist/next-server/lib/utils.js:59:29)
at Object.renderToHTML (/home/cms-contentful-app/node_modules/next/dist/next-server/server/render.js:423:36)
at process._tickCallback (internal/process/next_tick.js:68:7)
This happens because you thought you were calling the built-in Date, but you were calling your own defined Date function. Therefore, its own function was recursively called and a type error occurred.
Solution
Please define the customized function and import it.
builtin.js
export default class BuiltInDate extends Date { constructor(any) { super(any); } }
index.js
import { format } from "date-fns"; import BuiltInDate from "./builtin"; export default function Date({ dateString }) { return ( <time dateTime={dateString}> {format(new BuiltInDate(dateString), "LLLL d, yyyy")} </time> ); }
- define a new class by inheriting the built-in Date in builtin.js.
- call the above function in the file you want to use.
This way it works as expected, but unfortunately it adds more files, doesn't it? I wish I could do the following, but I haven't found a way so far.
import { Date as BuiltInDate } from "builtin";
See you!