Nonzero Numbers explainer

Aim of the puzzle: Introduce the concept of Truthy and Falsy
Walk through of solution: The test of an if statement is always either true or false. For example:

let x = 3
if (x === 3) {
    console.log('true!')
}

This code will print 'true!'because x is equal to 3.

However, what if we write it like this?

let x = 3
if (x) {
    console.log('true!')
}

This code will also print 'true!'. Weird!

This code works because every value in JavaScript is either “truthy” or “falsy”.

It seems confusing, but it’s a bit simpler than it sounds.

There are only 6 falsy values in JavaScript. Everything else is truthy. The 6 falsy values are:

  1. false: the boolean value false
  2. 0: the number 0
  3. '': An empty string
  4. NaN: which means “Not a Number”, and is typically caused by math errors
  5. undefined: a variable’s value before it has been assigned a value
  6. null: a blank value that can be assigned to a variable

In this puzzle, a classic for loop is set up with i initially set at 0 - 3 (this is a workaround for most mobile phone keyboards not allowing users to input negative numbers). It will loop as long as i < 4, and i will increment by 1 with each iteration.

Inside the for loop, an if statement tests i. If i has a truthy value, the console.log() will print i. If i has a falsy value, it won’t be printed.

When the code runs, every number from -3 to 3 except 0 will be printed to the console.
Sample code solution:

for (let i = 0 - 3; i < 4; i++) {
    if (i) {
        console.log(i);
    }
}

Javascript Concepts: Truthy and Falsy, If Statements, Booleans, console.log(), For Loops

5 Likes

I need help!!! I dont know what i am doing wrong

1 Like

Happy to help! Post a screenshot of your code and I can take a look.

1 Like

Im so lost

2 Likes

Hey there, try putting an if statement inside the for loop like this:

for (let i = 0 - 3; i < 4; i++) {
  if (i) {
    console.log(i);
  }
}

If statements test if something is true or false. In this puzzle, we’re learning about truthiness and falsiness, and showing that 0 is one of the six falsy values.

Hope this helps! Let me know if you have any questions.
Ben

7 Likes


It says the console.log() statement is outside the if statement, but it’s not.

3 Likes

There are 2 console.log() statements and the first one is outside the if statement’s {} brackets

Your code:

console.log(); <----- (outside)

if ( i ) { console.log( i ) };

The first console.log statement is not needed as it prints out 0 and thats not the aim of the puzzle.
The aim of the puzzle is to exclude 0 by running the if statement. As the first console.log statement is not running through the if statement’s test it prints 0.

So to complete the puzzle, remove the 1st console.log statement

3 Likes

Oh. Thank you so much.

So to my understanding I need to somehow get rid of this bracket that is circle to get this code to work? Because right now the console.log has its own brakets and it needs to be in the if statements

No, remove the console.log statement and put it inside the if statement

1 Like

You know at one point I also was trying to do that, however the app will not let me remove the console.Log statement or edit any if the pre-written code

1 Like

This is probably a stupid question, maybe I’ve forgotten a lesson, but please can you explain to me why zero is still printed if you put console.log outside the if statement?

Don’t worry, there are no stupid questions! It’s all part of learning.

If you put code inside of an if statement, that code will only run if the test of the if statement is true. If code is not in an if statement, it will always run. For example:

let x = 5;
if (x === 5) { // this test is true, because x is 5
    console.log('x is five'); // this line then runs
}
console.log('hello'); // this line will always run,
// because it is not in an if statement

Hope this clears things up! Let me know if you have any additional questions.
Ben

4 Likes

@Grasshopper_Ben I don’t understand why this is a complete statement, there is no test for truth, as far as I understand it.

1 Like

This evaluates as true because 3 is a “truthy” value. Take a look at the explanation written in the puzzle explainer, and let me know if you have any questions.

Ben

2 Likes

Thanks, I’ve re-read the explanation of truthy and falsy. I guess it is just one of these things, to learn that empty curly braces is a test of truthy-ness in JavaScript.

1 Like

In my last post, I said the phrase "evaluates to true", but I didn’t really explain what that means.

Basically, an if statement checks if a certain condition is true or false. For example, 5 > 4 is true, but 'dog' === 'cat' is false.

However, what happens if we write an if statement like this?

if ('dog') {
    console.log('woof')
}

Why does this work? Well, the if statement wants a boolean (true or false), but we haven’t given it one. We’ve given it a single string.

Because of this, it will try to “coerce” (change) 'dog' into true or false. This is called “type coercion”, as it’s changing the data type from string to boolean. Because 'dog' is truthy, the if statement treats it as:

if (true) {
    console.log('woof');
}

If we had given it a falsy value, like 0 or an empty string '', it would treat it like this:

if (false) {
   console.log('oof')
}

Hope that makes sense. Feel free to ask any more questions!
Ben

3 Likes

I think I broke it.

Displays 0 and doesn’t look like the sample.

At this point I think the site is tired of me and just really, really wants me to stop. Reset everything then put in the second, hit Run Code and instant congrats. Didn’t show solution (which has happened a few times on other practices) and gave me a cookie. Tried again, putting in bad lines to clear the Correct! and put it back in, clicked on Run Code, again didn’t show solution and gave me a cookie. So… about that ‘+’. Why’s it okay to leave that value blank? but if I use ‘i < 1’ it tells me not to worry about it because I can’t be zero, but one of the solutions showed ‘i’ printed out as ‘0’. Trying to be really specific.

1 Like

I like the idea that websites can be cranky and get tired of people.

In any case, on most puzzles the completion logic is pretty generous. In this puzzle, the completion logic is checking 3 things:

  1. The setup of the for loop has not been changed.
  2. There is an if statement that checks if (i)
  3. There is a console.log(i) inside the if statement

Your code is still correct, even though you’ve added i++.

Let’s walk through the loop in your code a few times to see what it’s doing:

for (let i = -3; i < 4; i++) {
    if (i) {
        i++
        console.log(i)
    }
}

On the first loop:

  1. i is set to -3, and i < 4 is true, so the for loop runs.
  2. The if statement checks if (-3), which is truthy
  3. The i++ you added sets i to -2
  4. The console.log() prints -2
  5. The for loop runs i++ after every loop, so i is now changed to -1

On the second loop:

  1. i is -1, and i < 4 is still true, so the for loop runs again
  2. The if statement checks if (-1), which is truthy
  3. The i++ you added changes i to 0.
  4. The console.log() prints 0
  5. The for loop’s i++ changes i to 1

On the third loop:

  1. i is 1, which is still less than 4, so the for loop runs
  2. The if statement checks if (1), which is truthy
  3. The i++ changes i to 2
  4. The console.log() prints 2
  5. The for loop changes i to 3

Hope this helps! Let me know if you have any questions.
Ben

1 Like