how to define a value in an object with previous values from the same object

user_19713053 0
Viewed 55

I am coding an object. I want that the object contains the first name the last name and combined with this two values a full name. In the code below I tried to implement but only the object as such will logged into the console.

const user = {
    firstName(firstName) {
        return firstName; 
    }, 
    lastName(lastName) {
        return lastName;
    },
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

console.log(`${user.firstName("Andrew")} ${user.lastName("Tate")}`);
console.log(user.fullName);
javascript
3 Answers

It's because this.firstName and this.lastName don't exist. I've modified your firstName and lastName methods to set those values:

const user = {
    firstName(firstName) {
        this.firstName = firstName;
        return this.firstName;
    }, 
    lastName(lastName) {
        this.lastName = lastName;
        return this.lastName;
    },
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

console.log(`${user.firstName("Andrew")} ${user.lastName("Tate")}`);
console.log(user.fullName);

user_5354800

Replaces the "property" methods with separate getters and setters for these properties, which are then used in the computed property fullName. Note that you cannot use this.firstName to store the value of the property. From MDN:

It is not possible to simultaneously have a setter on a property that holds an actual value.

const user = {
    set firstName(firstName) {
        this.first_name = firstName; 
    }, 
    get firstName() {
        return this.first_name; 
    }, 
    set lastName(lastName) {
        this.last_name = lastName;
    },
    get lastName() {
        return this.last_name; 
    }, 
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

user.firstName = "Andrew"
user.lastName = "Tate"

console.log(user.fullName);
console.log(`user.first_name === user.firstName: ${user.first_name === user.firstName}`);

As shown at the end of the above snippet, the properties that hold the actual value of the first and last name are visible (and modifiable) from outside the object. You can prevent this by using an IIFE to create a private namespace and store the values there:

user = (function () {
  let private = {}
  const user = {
    set firstName(firstName) {
        private.firstName = firstName; 
    }, 
    get firstName() {
        return private.firstName; 
    }, 
    set lastName(lastName) {
        private.lastName= lastName;
    },
    get lastName() {
        return private.lastName; 
    }, 
    get fullName() {
        return `${private.firstName} ${private.lastName}`;
    }
  }
  return user
})()

user.firstName = "Andrew"
user.lastName = "Tate"

console.log(user.fullName);
console.log(user.firstName);
console.log(user.lastName);
console.log(user.private);

(Or just create User as a class and use private variables)

user_24875170

Demonstration of why you need to use get and set in order to create dynamic properties.

const user = {
    firstName(firstName) {
        this.firstName = firstName;
        return this.firstName;
    }, 
    lastName(lastName) {
        this.lastName = lastName;
        return this.lastName;
    },
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

console.log(user.firstName) // this method defined above will literally be logged here.
user.firstName("Andrew")    // [Side Effect!] this uses the method to set the "first name", but the side effect is to actually replace the method with the string
console.log(user.firstName) // this will be "Andrew"
user.firstName()            // this will throw an error because "Andrew" is not a method.
console.log(user.firstName)
user.firstName = "Andrew"
console.log(user.firstName)

user_24875170
Related