Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Styling Elements

= vs == operator

I am having trouble understanding why at the beginning of the function we use the strict "==="

toggleList.addEventListener ('click', () => {
  if ( listDiv.style.display === 'none' ) {

Why does this change later in the function when we use only one = operator

  else {
    toggleList.textContent = 'Show List';
    listDiv.style.display = 'none';

Both are referencing list.div.style.display

A single '=' is used when setting the value of a property or variable.

A '==' or '===' is used as a comparison operator, checking whether a variable or property is equal. In the case of the '===' the test includes a type of value as opposed to a straight comparison of value.


1 Answer

Ollie White
Ollie White
6,537 Points

Hi Karson, In JavaScript we use the single = as an assignment operator to assign variables as seen in the second part of your code where you are assigning "toggleList.textContent" the value "Show List".

On the other hand, === is a comparison operator which is used when comparing values as seen in the first part of your code as you compare the contents of "listDiv.style.display" to the value 'none'.

In short we use comparison operators like === to compare values or variable contents and assignment operators like = to declare or change the content of a variable.

I hope this helps, Ollie.

Thank you so much!