Make a Person (question about how JS preceive a variable in object, and more)

[Schermant]

Tell us what’s happening:
So after struggling with the Object.keys(bob).length keep dropping a 7 on me if I use this.fullName, then tried to find a way to juggle the setters and getters to make the constructor works without adding a property, I thought “why don’t I just add a variable? Will it be considered a prop?” And violà.
But I don’t really get why adding a var is the solution here so I bring the code on VSCode, you can’t call the value using bob.fullName, and also fullName is not even listed when console.log(bob) is called:

Person {
  getFullName: [Function (anonymous)],
  getFirstName: [Function (anonymous)],
  getLastName: [Function (anonymous)],
  setFullName: [Function (anonymous)],
  setFirstName: [Function (anonymous)],
  setLastName: [Function (anonymous)]
}

I am concerned that this will somehow make the code vulnerable to some kind of malfunction. So I went to our forum to check, and someone said you can use this._fullName instead. I was under the impression that ._fullName will put it as a private property but after testing, it’s no different than this.fullName. So I checked online, and apparently it doesn’t have any meaning at all.

So, my question is:

1. Is my code okay? As in, acceptable to other programmers?
2. Why didn’t console.log(bob) list the variable fullName I declared inside the constructor but if I use this.fullName it is listed? Is it not an element of the object if I declare it that way?
3. Is there a thing like private properties or variables in an object? If there is, then how do I use it?
4. Is putting a variable inside an object a normal thing to do? I was so used to making objects and constructors that only have properties in them so I’m not sure if this is acceptable.
5. Is there any built-in function or meaning for $ and _ in variable naming at all, at least in JS? I see them being used all the time, but aside from $( ) being used as a shortcut for getElementById( ) there doesn’t seem to be a clear answer, just posts that said they are nothing more than a naming gimmick.

Whoever replies to this, thank you for putting up with my dumb ass trying to learn how to code.

Your code so far

const Person = function(firstAndLast) {
    let fullName = firstAndLast.split(/\s/i);
    this.getFullName = () => {
      return fullName.join(" ");
    }
    this.getFirstName = () => {
      return fullName[0];
    }
    this.getLastName = () => {
      return fullName[1];
    }
    this.setFullName = (firstAndLast) => {
      fullName = firstAndLast.split(/\s/i);
    };
    this.setFirstName = (first) => {
      fullName[0] = first;
    }
    this.setLastName = (last) => {
      fullName[1] = last;
    }
  };
  
  const bob = new Person("Bob Ross");
  console.log(bob.getFullName());
  console.log(bob.getFirstName());
  bob.setFullName("foo bar");
  console.log(bob.getFullName());
  bob.setFirstName("Bob");
  console.log(bob.getFullName());
  bob.setLastName("Ross");
  console.log(bob.getFullName());
  console.log(Object.keys(bob).length)
  

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/110.0

Challenge: Intermediate Algorithm Scripting - Make a Person

Link to the challenge:

freeCodeCamp.org

[DDorf]

@Schermant

Is my code okay? As in, acceptable to other programmers?

I don’t see any problem there.

@Schermant

Why didn’t console.log(bob) list the variable fullName I declared inside the constructor but if I use this.fullName it is listed? Is it not an element of the object if I declare it that way?

The question here is: What does the new keyword do?
You can actually create objects without using the new keyword.

@Schermant

Is there a thing like private properties or variables in an object? If there is, then how do I use it?

I am afraid JS does not support private properties like in other Object Oriented languages.
You can achieve it by other means from learning about the JavaScript scope, modules, and IIHF.

const Person = (function () {
  let privateVar = "";

  function privateMethod() {
    // ...
  }

  return {
    // public interface
    publicMethod1: function () {
      // All private members are accessible here
    },
    publicMethod2: function () {},
  };
})();

@Schermant

Is putting a variable inside an object a normal thing to do? I was so used to making objects and constructors that only have properties in them so I’m not sure if this is acceptable.

I don’t understand this question.

@Schermant

Is there any built-in function or meaning for $ and _ in variable naming at all, at least in JS? I see them being used all the time, but aside from $( ) being used as a shortcut for getElementById( ) there doesn’t seem to be a clear answer, just posts that said they are nothing more than a naming gimmick.

No, there is not.
$ is known for its use by jQuery library. But some people like to use it as a name for an utility function like:

const $ = (selector) => document.querySelector(selector);
const $$ = (selector) => document.querySelectorAll(selector);

_ is a convention to tell the developer: “This is a private property and should not be manipulated directly!”
_ is also from the Underscore.js.

Fun fact: Because the Underscore is so widely used and many people use it as a convention, the core JS developers cannot implement _ in the core JS language, as it would break so many applications .

[JeremyLT]

@Schermant

let fullName = firstAndLast.split(/\s/i);
   

This part uses a closure.

[Schermant]

Thank you very much, your answer is really helpful
For the 4th question, I just wonder if declaring a variable in an object using let or var is not a good thing, since I thought you normally have to use this. to declare anything in an object.

[Schermant]

Thank you for the reply. I saw that when using the debugger in VSCode as well, do you happen to have anything that I should read about it?

[JeremyLT]

This is a bit technical but MDN is my first stop when looking up something about JavaScript:

Closures - JavaScript | MDN