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

Java

Posted by gnomephone
gnomephone
3,399 Points

field.value vs. field - for determining boolean value.

In this example, I'm curious why in the first conditional statement we determine the boolean value of the field variable using field.value

if(!field.value){return true; else{return false}

Then, later access the boolean value of fieldTest without including the .value

if(fieldTest){alert("please provide your information");

?????

As far as I can tell, both field and fieldTest variable declarations are constants. I tired removing the .value from (!field.value) and it definitely broke the code 🙃.

Still a little unclear about booleans and how to access them. This example made it a little more confusing.

THEREFORE, a learning opportunity. Any help SUPER appreciated.

Here's the whole code for reference: 

function isFieldEmpty() {
  const field = document.querySelector('#info');
  if (!field.value) {
    return true;
  } else {
    return false;
  }
}

const fieldTest = isFieldEmpty();

if (fieldTest) {
  alert('Please provide your information.');
}

2 Answers

jb30
jb30
45,415 Points
jb30
jb30
45,415 Points

If field refers to an html input element such as <input id="info" type="text">, then field.value is the text displayed on the webpage inside the input element. If there is text in the input element, field.value will be the text in the input element as a string. If there is no text in the input element, field.value will be an empty string.

In Javascript, a string with any content in it, even white space, is truthy, and a string with no content is falsey, so field.value will be truthy if there is text in the input element and falsey if the input element is empty.

Since field is document.querySelector('#info');, field will be truthy if the html has an element with the id info and falsey if there are no elements with the id info in the html.

fieldTest is a boolean, and is either true or false, depending on the result of isFieldEmpty().

gnomephone
gnomephone
3,399 Points

thanks for hitting me back jb30 ! Appreciate you taking the time.

I think I understand...Up to this point in the learning track, there's only been mention of truthy and falsey–not much depth yet, perhaps more detail in upcoming segments. AS such, the topic is still a bit fuzzy for me.

To further clarify if I'm understanding you correctly, granted some of these statements could be assumptions on my part, I do a bit of reaching at the end, just trying to piece it together:

Essentially, what you're saying is that the field variable isn't inherently a Boolean because its value is dependent on the user input value in the <html> element attached to field, that being id=info. This makes the field variable truthy -or- falsey.

Therefore, we've written a conditional to determine the precise value BUT in order to determine that value we must tell JavaScript to access the .property/attribute (not sure if I'm using the correct term here) attached to field (that being the input of id=info) which is accessed through the DOM.

In contrast, the fieldTest value is set up differently because it is set within the JavaScript file without having to access the HTML doc. ASSUMING both the function and variables are invoked, fieldTest invokes the isFieldEmpty function, when the function runs it triggers field to return a Boolean. AS such the value of fieldTest will be a Boolean.

jb30
jb30
45,415 Points

Neither field nor field.value are inherently booleans. field is an object and field.value is a string, so they are either truthy or falsey. field has other properties that are booleans, such as autofocus, disabled, hidden, and required.

The conditional determines the truthiness of the value property of field.

fieldTest is the boolean returned from isFieldEmpty().

const fieldTest = isFieldEmpty();

if (fieldTest) {
  alert('Please provide your information.');
}

is equivalent to

if (isFieldEmpty()) {
  alert('Please provide your information.');
}

which is either 

if (true) {
  alert('Please provide your information.');
}

or

if (false) {
  alert('Please provide your information.');
}

If instead fieldTest was an object defined as const fieldTest = { value: isFieldEmpty() };, then its property value would be accessed using fieldTest.value.

gnomephone
gnomephone
3,399 Points
gnomephone
gnomephone
3,399 Points

Gotcha, better grasping it now jb30 . Thanks for further clarification.