Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Using previousElementSibling and insertBefore

Ian Salmon
PLUS
Ian Salmon
Courses Plus Student 10,687 Points

Operator best practices, '==' or '===' . Does it make a difference here?

Coming off of a Python background, I was bracing myself for lots of errors when accidentally using '==' instead of '===' in JavaScript. However, I've noticed in these videos, Joel is using '==' when comparing tagName, className, etc.

Does it really make a difference? Is there any kind of type coercion happening when comparing strings such as names?

4 Answers

Charles Badger
Charles Badger
18,189 Points

For best practices, you should use ===. == is fine if both operands are the same data type, but can cause problems if they aren't. In the example you provided, both operands are strings and == will do the same thing as ===.

Ruben Ponce
seal-mask
.a{fill-rule:evenodd;}techdegree
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,035 Points

=== is best for ensuring that the value you want to be true is true. == test to convert for equality after it tries to convert the values. for example, open up the console on this website and type 30 ==='30'. You'll get false as a value. But if you type 30 =='30', you'll get a true value. for that reason it's best to use the triple equality bar to ensure you're testing for strict equality.

Charles Badger
Charles Badger
18,189 Points

In simple terms, the === operator is only true if both operands are the same value and the same type. for example, ' ' == 0 is true, while ' ' === 0 is false. Basically, when you use the == operator, there's some math going on behind the scenes that evaluates whether or not the operands are equal and can lead to cases where expressions are evaluated as true when you expect them to be evaluated as false.

Ian Salmon
PLUS
Ian Salmon
Courses Plus Student 10,687 Points

Thank you for your answers everyone, but I'm still a bit confused. Perhaps an example will help. I'm looking for best practices, not necessarily an explanation of the difference between '==' and '==='.

Element.addEventListener('click', (event) => {
if (event.target.tagName == 'BUTTON') {
if (event.target.className == 'remove' {
let li = event.target.parentNode;
let ul = li.parentNode;
ul.removeChild(li);
}

Is it wrong to use '==' instead of '===' when comparing tag and class names? It evaluates the same in this case. But would it be best practice to use '==='? In the lesson videos, the instructor used '==' throughout, but when I look at some of my colleagues' code, they use '===' much more frequently.

In this case, it isn't wrong to use '==' because the tagName and className properties are always going to be a string. Since you are comparing to a string ('BUTTON' or 'remove'), the use of '===' to enforce a strict comparison is unnecessary.