I want to access a class variable.but assign data in a constructor. EX:

class Student {
    constructor(data) {
       this.data = data;
       this.extraVariable = "Value"
    }

    getData() {
       return this.data
    }
}

var s = new Student({name: 'Abcd', subject: 'Javascript'});

s.name = 'Xyz';  // i want to access name using s.name not s.data.name

// i want to get updated data by calling this
s.getData() // it return { name: 'Xyz', subject: 'Javascript' }

in this class assign data in constructor or setData Method but I want to access those data by directly without this.data.variableName. and I want to get only those data, not other class variables when I called getData method

NOTE: the member should not fixed like name and subject. if i want to add more members the i don't want tocreate getName and setName methods because members are not fixed

I want to access a class variable.but assign data in a constructor. EX:

class Student {
    constructor(data) {
       this.data = data;
       this.extraVariable = "Value"
    }

    getData() {
       return this.data
    }
}

var s = new Student({name: 'Abcd', subject: 'Javascript'});

s.name = 'Xyz';  // i want to access name using s.name not s.data.name

// i want to get updated data by calling this
s.getData() // it return { name: 'Xyz', subject: 'Javascript' }

in this class assign data in constructor or setData Method but I want to access those data by directly without this.data.variableName. and I want to get only those data, not other class variables when I called getData method

NOTE: the member should not fixed like name and subject. if i want to add more members the i don't want tocreate getName and setName methods because members are not fixed

• javascript

• 1 but name isn't a member of your class. The only member variable in your class is data (which is an object that holds a key called name in this example) – UnholySheep Commented Mar 12, 2018 at 16:50
• just add this.name = data.name in your constructor – mhodges Commented Mar 12, 2018 at 16:53
• If I understand correctly, you can change your constructor to contructor(data) {this['name']=data['name'];} – Sphinx Commented Mar 12, 2018 at 16:53
• is there any way to create dynamic member of class because i want to access name directly without data(member) – Deep Patel Commented Mar 12, 2018 at 16:53
• @Sphinx thanks for your answer but if i want to get data like in getData method then it return old data. if user update data then i want updated data – Deep Patel Commented Mar 12, 2018 at 16:56

5 Answers 5

As @Hammerbot has already hinted at, you'll can iterate over the object and apply each property to the current instance:

class Student {
  constructor(data) {
    this.data = data;
    this.extraVariable = "Value";
    
    // Assign each property of the object directly to the instance
    Object.keys(data).forEach((key) => {
      this[key] = data[key];
    });
  }

  getData() {
    return this.data
  }
}

var s = new Student({name: 'Abcd', subject: 'Javascript'});

s.name = 'Xyz';

console.log(s.name);

Original answer: creating getters and setters

You can add getters and setters on the class for name. These getters and setters will reference this.data.name, but will provide the interaction you are looking for:

class Student {
  constructor(data) {
    this.data = data;
    this.extraVariable = "Value"
  }

  getData() {
    return this.data
  }

  get name() {
    return this.data.name;
  }

  set name(name) {
    this.data.name = name;
  }
}

var s = new Student({name: 'Abcd', subject: 'Javascript'});

s.name = 'Xyz';

console.log(s.name);

This is the correct object-oriented approach.

class Student {
  constructor(configuration) {
    configuration = configuration || {}
    this.name = configuration.name
    this.subject = configuration.subject
    this.extraVariable = "Value"
  }

  setName(name) { this.name = name }
  getName() { return this.name }
  
  setSubject(subject) { this.subject = subject }
  getSubject() { return  this.subject }

  getData() {
    return {
      name: this.getName(),
      subject: this.getSubject()
    }
  }
}

let student = new Student({
  name: 'Abcd',
  subject: 'Javascript'
})

student.setName('Xyz')

console.log(student.getData())

.as-console-wrapper { top: 0; max-height: 100% important! }

Dynamic version

If you want to dynamically create and get fields, you need to create a delegate field to store the data e.g. this.fields. See the modified code below.

function extend(originalObject, newData) {
  for (var key in newData) {
    originalObject[key] = newData[key]
  }
}
function isFunction(obj) { return obj && typeof obj === 'function'; }

class Student {
  constructor(configuration) {
    this.fields = {
      extraVariable: "Value"
    }
    extend(this.fields, configuration || {})
  }
  
  setField(field, value) { this.fields[field] = value }
  getField(field) { return this.fields[field] }
  
  removeField(field) {
    if (this.fields.hasOwnProperty(field)) {
      delete this.fields[field];
      return true;
    }
    return false;
  }
  
  getData() {
    let fields = this.fields;
    return Object.keys(fields).reduce(function(obj, field) {
      if (!isFunction(fields[field])) {
        obj[field] = fields[field]
      }
      return obj
    }, {})
  }
}

let student = new Student({ name: 'Abcd', subject: 'Javascript' })

student.setField('name', 'Xyz') // Update field
student.removeField('subject')  // Remove Field

console.log(student.getData())

.as-console-wrapper {
  top: 0;
  max-height: 100% important!
}

I'm not sure if i understand your problem correctly, but as far as i do, id say that you could use getters and setters for this manner.

class Student {
    constructor(data) {
       this.data = data;
       this.extraVariable = "Value"
    }

    get name() {
      return this.data.name
    }
    set name(val) {
     this.data.name = val
    }
    get subject() {
      return this.data.name
    }
    set subject(val) {
     this.data.subject = val
    }

    getData() {
       return this.data
    }
}

var s = new Student({name: 'Abcd', subject: 'Javascript'});

s.name = 'Xyz';
s.name // 'Xyz'

Of course the code isn't plete. It would require validation, since the data property could be undefined, and you would get an error.

Although its possible to solve the issue you addressed, i would go another way, by defining these internal properties and set them directly.

EDIT So since there is a demand for dynamic getters i would go this way:

...
getProp(propName) {
    return this.data[propName]
}

setProp(propName, value) {
    this.data[propName] = value
}
...

You could also do something like this but I find it quite hacky and I prefer @KevBot answer:

class Student {
    constructor(data) {
        this.authorized = Object.keys(data)
        this.authorized.forEach(key => {
            this[key] = data[key]
        })
        this.extraVariable = "Value"
    }

    getData() {
        let data = {}
        this.authorized.forEach(key => {
            data[key] = this[key]
        })
        return data
    }
}

If I got what you're trying to do, the following should do the trick :

class Student {
    constructor( data ) {
        this.data = data;
        this.extraVariable = "Value";
    }


    getData() {
        // Updates the modified properties only .
        for( var prop in this) {
            if ( this.hasOwnProperty( prop ) ) {
                if (this.data[prop]) {
                    this.data[prop] = this[prop];
                }
            }
        }

        return this.data;
    }
}

Or you could separate things like this :

class Student {
    constructor( data ) {
        this.data = data;
        this.extraVariable = "Value";
    }

    // Updates the modified properties only .
    updateData() {
        for( var prop in this) {
            if ( this.hasOwnProperty( prop ) ) {
                if (this.data[prop]) {
                    this.data[prop] = this[prop];
                }
            }
        }
    }

    getData() {
        this.updateData();
        return this.data;
    }
}

And that's it, you could pass whatever you like :

var s = new Student({name: 'Abcd', subject: 'Javascript'});
s.name = 'Xyz';
s.getData();

var s2 = new Student({firstname: 'Abcd', class: 'Computer science'});
s2.firstname = 'Xyz';
s2.getData();