Class parameters and formatting

Question

I have been trying to find a way to have class parameter that can be formatted.

class Animal {
  this.dob: '2019-12-12';
  // Pseudo code
  format: (date, format) => formatDate(date, format);
}

const animal = new Animal();

when calling it: animal.dob I want to see '2019-12-12'

but if I want it formatted, I'd like to have the option to chain:

animal.dob.format('DD.MM) which would return '12-12'

My main reason for doing that is that at the moment I have format(animal.dob, 'DD.MM') littering my code all over the place and I would like to remove these calls as much as possible.

Any idea on how to achieve that?

Thanks in advance

quick question what date format you follow `yyyy/mm/dd` or `yyyy/dd/mm` ? — Code Maniac, Sep 02 '19 at 11:29
does it really matter? My question is more about chaining from one parameter than formatting. Here I give the example of date, but I can also have currency, number, percentage, string formatters. But to answer your question: 'yyyy/mm/dd' — Got The Fever Media, Sep 02 '19 at 11:30
@GotTheFeverMedia yes it does to see what should be the expected output, if you notice `animal.dob` will return a string which doesn't have `format` method attached to it, so you can't chain it like this, Your `animal.dob` should return something which has `format` method — Code Maniac, Sep 02 '19 at 11:38
Have you had a look at object proxies in ES6? Not entirely browser compatible but can be transpiled using Babel. — christopher, Sep 02 '19 at 11:38
Yes @christopher, I tried with Proxies and it works perfectly with Chrome, but IE 11 (which I have to support) is not happy about it. But that was 8 months ago roughly, I might give it another try, with a proper polyfil — Got The Fever Media, Sep 02 '19 at 11:39
So surely you can transpile that down to an IE11 compatible implementation? — christopher, Sep 02 '19 at 11:43
@christopher No, proxies are of no use here, as they cannot wrap primitives — Bergi, Sep 02 '19 at 11:44
I wasn't advocating that they wrap the primitive. I was asking if they tried wrapping the object and check when that field is updated. It's not really desirable to tell you the truth, i'd rather stick a method in the class definition than have some hidden proxy logic. — christopher, Sep 02 '19 at 11:54
I guess what I'm trying to do is a bit like the implementation of jQuery. You can do `$(element)` which will return the node you're looking for, OR, you can keep on chaining: `$(element).doSomething()` — Got The Fever Media, Sep 02 '19 at 11:58

Code Maniac · Answer 1 · 2019-09-02T12:02:24.867

0

You can't chain animal.dob.format like this because your animal.dob returns a string which doesn't have any method called format on it, Instead what you can do is pass the parameter to animal.format() and return values accordingly

class Animal {
  constructor(){
    this.dob = '2019-10-12';
  }
  format(date, format){
    let [YY,MM,DD] = date.split('-')
    let mapper={ YY, MM, DD }
    format = format.replace(/\./g,'-')
    return format.replace(/[^-]+/g,(m)=>mapper[m])
  }
}

const animal = new Animal();

console.log(animal.format(animal.dob, "MM.DD"))
console.log(animal.format(animal.dob, "YY.DD"))
console.log(animal.format(animal.dob, "YY.MM.DD"))
console.log(animal.format(animal.dob, "YY.DD.MM"))

If you don't want to pass date explicitly you can simply use this.dob instead of accepting a parameter date in format function

class Animal {
    constructor(){
      this.dob = '2019-10-12';
    }
    format(date, format){
      let [YY,MM,DD] = this.dob.split('-')
      let mapper={ YY, MM, DD }
      format = format.replace(/\./g,'-')
      return format.replace(/[^-]+/g,(m)=>mapper[m])
   }
}

const animal = new Animal();

console.log(animal.format("MM.DD"))
console.log(animal.format("YY.DD"))
console.log(animal.format("YY.MM.DD"))
console.log(animal.format("YY.DD.MM"))

edited Sep 02 '19 at 12:02

answered Sep 02 '19 at 11:49

Code Maniac

37,143
5
39
60

1

While this doesn't reduce the boilerplate, it is a more sensible place for the code. It's also nice and clear. – christopher Sep 02 '19 at 11:54
But it adds code, and absolutely not answer my question. I would rather have a specific method on the class then `animal.formatBOD()`, than implementing that solution – Got The Fever Media Sep 02 '19 at 11:56
@GotTheFeverMedia well if you don't want to pass the date value explicitly you can simply use `this.dob` inside `format` function, read the last line in the answer isn't it what you're after ? – Code Maniac Sep 02 '19 at 11:59
but still, my question is about chaining potential formatting, not just the date – Got The Fever Media Sep 02 '19 at 12:01
@GotTheFeverMedia with the current type of `this.dob` it doesn't seems possible to me as far as i know, you need to change the structure of `this.dob` ? do you want that ? – Code Maniac Sep 02 '19 at 12:04
yes I can do that, however, if possible, `animal.dob` needs to return a value :D – Got The Fever Media Sep 02 '19 at 12:39
@GotTheFeverMedia [`Look at this`](https://jsbin.com/kefegiq/edit?js,console) you can do something like this, – Code Maniac Sep 02 '19 at 13:14

3limin4t0r · Accepted Answer · 2019-09-03T10:54:02.383

0

You can create an object from the string and add the format method to the instance. The string object can be used as normal string. Check this question for the differences.

class Animal {
  constructor() {
    this.dob = Object("2019-12-12"); // or new String("...")
    this.dob.format = function (format) {
      console.log(this.valueOf(), format);
    };
  }
}

const animal = new Animal();
animal.dob.format("DD.MM");

Object("Hello") + Object("World!") //=> "HelloWorld!"

If you use certain custom methods often consider creating your own class instead, extending from String.

class MyString extends String {
  format(format) {
    console.log(this.valueOf(), format);
  }
}

class Animal {
  constructor() {
    this.dob = new MyString("2019-12-12");
  }
}

const animal = new Animal();
animal.dob.format("DD.MM");

If you want to set dob after creation, considder adding a .setDob method, that accepts a string and converts it to an object with the needed methods. Alternatively you might want to look into setters.

Note: You don't need to call .valueOf() this converts the string object back to a native string. They behave the same. I only use it here because the console output is nicer. "foo" //=> "foo" while Object("foo") //=> { 0: "f", 1: "o", 2: "o" }

edited Sep 03 '19 at 10:54

answered Sep 02 '19 at 12:30

3limin4t0r

19,353
2
31
52

ah. thanks for that, I guess that's going in the right direction. Now calling `animal.dob.valueOf()` is a bit cumbersome but not too problematic. I could now have a getter for these computed values... – Got The Fever Media Sep 02 '19 at 12:42
@GotTheFeverMedia You don't need to, `animal.dob` behaves as a normal string. I only do it here because the `console.log` output is different. eg. `{ 0: "2", 1: "0", 2: "1", ... }` – 3limin4t0r Sep 02 '19 at 12:44
interesting. I tried in the console and yes it works well. Does that work with numbers too? – Got The Fever Media Sep 02 '19 at 12:46
@GotTheFeverMedia yes, see: [`Object()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) - "The `Object` constructor creates an object wrapper." – 3limin4t0r Sep 02 '19 at 12:46
Cool, let me try that in my code, if all goes well you'll be the answer – Got The Fever Media Sep 02 '19 at 12:47

Class parameters and formatting

2 Answers2