How to create methods for javascript class properties?

Question

I might be totally getting the wrong idea of classes but this is what I want to do.

I have a load of different colours each with their own set of shades. Each colour is made up of an array of R,G,B. I want to be able to create new colours and then access different formatted properties, like css rgba.

class Color {
  constructor(dark, light, white, id) {
    this.dark = dark;
    this.light = light;
    this.white = white;
  }
  rgba(shade, opacity = 1) {
    return `rgba(${this[shade].join(", ")}, ${opacity})`;
  }
}

const pink = new Color(
  [226, 155, 166], [240, 214, 219], [250, 245, 246]
);

//get rgba css string for a shade
console.log(pink.rgba("light"));

This works but it would be more initiative to be able to do something like this to access the css rgba string. Is this possible?

const rgba = pink.light.rgba();

You should define a new class, and make the properties instances of this class. — Barmar
– Barmar, Commented Nov 3, 2021 at 15:07
Yes, it is possible, I recommend to you read developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… and some javascript OOP article, I tried to help you but I dont understand your question at all — Ivandez
– Ivandez, Commented Nov 3, 2021 at 15:16
Your really should have a Color class that represents a particular, single color, and a Tone class that comes with three different shades of color. — Bergi
– Bergi, Commented Nov 3, 2021 at 15:45

CertainPerformance · Accepted Answer · 2021-11-03 15:08:33Z

3

Use another class or object, and transform the constructor arguments into that instead of assigning strings to this.dark, etc.

const makeShade = arr => ({
  rgba: (opacity = 1) => `rgba(${arr.join(", ")}, ${opacity})`
});

class Color {
  constructor(dark, light, white, id) {
    this.dark = makeShade(dark);
    this.light = makeShade(light);
    this.white = makeShade(white);
  }
}

const pink = new Color(
  [226, 155, 166], [240, 214, 219], [250, 245, 246]
);

//get rgba css string for a shade
console.log(pink.light.rgba());

answered Nov 3, 2021 at 15:08

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Luke Over a year ago

This so almost what I am looking for! Except I still want to preserve my array for future use. So maybe I can do pink.light.rgba() or pink.light.hsl() or just pink.light for the original.

CertainPerformance Over a year ago

A string cannot have properties. If you want to be able to do pink.light.rgba (as if .light was an object), there isn't any real way to have pink.light reference a string (a primitive). You'll need another property, eg makeShade = arr => ({ arr, rgba: (... and then reference the arr property

Luke Over a year ago

Yeah I think I get that, I will just have pink.light.rgba and pink.light.values etc... thank you very much :)

Collectives™ on Stack Overflow

How to create methods for javascript class properties?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related