Different between a JS method and a JS property

Question

What is the different between a JS method and a JS property

I'm trying to view it as the difference between holding something versus DOING something. Am I correct? For example see this code:

JS FILE

const input = document.querySelector('input.description');

const p = document.querySelector('p.description');

const button = document.querySelector('button.description');


button.addEventListener('click', () => {

    p.textContent = input.value + ':';


});

HTML FILE

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>    

      <button id="toggleList" > Hide list</button>

      <div class="list">

        <p class="description">Things that are purple:</p>

        <input type="text" class="description">

        <button class="description"> Change List description </button>
          <ul>
            <li>grapes</li>
            <li>amethyst</li>
            <li>lavender</li>
            <li>plums</li>
          </ul>
       </div> 


       <input type="text" class="addItemInput">

       <button class="addItemButton"> Add Item </button>
       <button class="removeItemButton"> Remove Item </button>

    <script src="app.js"></script>
  </body>
</html>

Is the textContent property a method since it DOES something? Or can a property do something in the same way that a method (that is, a function) can within a function? I know that JS is ultimately made of properties(which hold values) and methods (which hold functions). I'm just confused on how "value" and "textContent" are properties when they obviously perform a function of changing/returning a value behind the scenes for the user. Why?

Am I simply over thinking this too much?

Answer 1 · 2017-09-27T14:01:34Z

September 27, 2017 2:01pm

Hi there! Wow I like these concept questions! Personally, I think you're thinking about it just enough. You're starting to get to the point in your learning now where object-oriented programming is becoming more important. It can also feel a little abstract at times.

I would say that what you describe tends to be fairly accurate. There are some more advanced topics including calculated properties in other languages that I won't touch on now, but yes, properties tend to hold a value while a method (which is a fancy name for a function on a class) does something.

I whipped up this little JavaScript example which might help explain a bit.

var personOne = {
    firstName: "Jennifer",
    lastName: "Nordell",
    sayHi: function (otherPerson) {
        console.log(`Hi there, ${otherPerson.firstName}`)
    }
}

var personTwo = {
    firstName: "Greg",
    lastName: "Schudel",
    sayHi: function (otherPerson) {
        console.log(`Hi there, ${otherPerson.firstName}`)
    }
}

personOne.sayHi(personTwo);
personTwo.sayHi(personOne);

This example creates two Objects which represent people. One represents myself and the other you. We each have properties of firstName and lastName. Each of us also have a method which allows us to greet another person. The syntax may look a bit different here, but it shouldn't be too horribly far off what you're used to.

In your question you reference the .value and the .textContext. Those are much like the firstName and lastName properties above. They are simply a variable holding a string and we access them through the dot notation. You used some concatenation in your example to set one string equal to another string.

p.textContent = input.value + ':';

This would not be so different from our example if we did this:

fullName = personTwo.firstName + " " + personTwo.lastName ;

The end result would be that fullName would contain "Greg Schudel". So even though it may feel like there's more going on in the background essentially it's just assigning one string to another. I have a feeling this will all get a bit clearer as you delve into object-oriented programming.

I hope this helps somewhat and didn't muddle everything up!

Welcome to the Treehouse Community

Looking to learn something new?

Greg Schudel

Greg Schudel

Different between a JS method and a JS property

1 Answer

Jennifer Nordell

Jennifer Nordell

Greg Schudel

Greg Schudel

Jennifer Nordell

Jennifer Nordell