Different types of if statement syntax

**Normal syntax, arrow syntax, and …? **
I solved the challenge and I can continue but I always take a look at the different types of solutions just to learn something new. This time I can not figure out why does proposed solution work (I guess it is something really simple). Look at the code below.

  **My code that works **

function bouncer(arr) {
let result = [];
for (let i = 0; i < arr.length; i++) {
  if (!!arr[i]) {
    result.push(arr[i]);
  }
}
console.log(result);
return result 
}

bouncer([7, "ate", "", false, 9]);
  **Proposed solution**

function bouncer(arr) {
  let newArray = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i]) newArray.push(arr[i]);
  }
  return newArray;
}

bouncer([7, "ate", "", false, 9]);

First of all, I do not get why there are not any curly brackets around if statement when there is not used syntax with an arrow. Secondly, I do not get where they check if the value is boolean or not. I have read on the internet that for this check I can use either “!!something” or " Boolean(something)". Because of those two points, I am a bit confused.

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Challenge: Falsy Bouncer

Link to the challenge:

Languages with this type of syntax normally allow you to leave off the brackets if the code inside the brackets is a single expression.

if (somethingIsTrue) {
  doSomething();
}

// Same as

if (somethingIsTrue) doSomething();

So you can’t do it here, has to have brackets:

if (somethingIsTrue) {
  doSomething();
  andDoSomethingElse();
}

Not quite sure what you mean here, those are the only two ways to write if statements.

Yes, it’s not clear if you don’t know what it’s doing.

The condition in an if statement has to be a boolean: the value in the brackets has to be true or false.

Boolean(someValue) converts whatever someValue is to true or false.

Note that this depends on whether the value is falsey or not, and that concept is what this challenge is trying to teach, this is important. 0, "", false, undefined, null and NaN are all falsey values: if you convert them to a boolean they will be false. All other values are true.

! flips the boolean value: it means NOT. So !true is “not true”, so it’s false. !false is “not false”, so it’s true.

!! just does this twice. It’s the same as writing Boolean(someValue): the first ! turns someValue into true or false (if it’s falsey it becomes true, otherwise it’s false), the second ! flips it back to its boolean value.

However, this is a bit redundant, because, in an attempt to make sure things don’t break, JS if statements always convert the value in the brackets to a boolean anyway, so it isn’t even really necessary.

Yeah, I never worry about whether the expression in a true boolean for the expression of an if statement. Truthy/falsy is fine.

I do use the !! but only in a place where it must be boolean or if I am storing it into a variable that I would expect to be boolean.

Imagine if we are building an app and we can tell if someone is logged in if there is a valid token.

const token = '12345'; // an example valid token, would be null or something falsy if bad

// works fine without coercing to boolean
if (token) {
  console.log('user logged in');
} else {
  console.log('user not logged in');
}

// works but is overkill, imho. `Boolean(token)` would also be overkill, imho
if (!!token) {
  console.log('user logged in');
} else {
  console.log('user not logged in');
}

// I would coerce it here because I assume that a variable that starts with "is"
// is going to be a boolean.
const isLoggedIn = !!token;
1 Like

Oh thank you, I was just a bit confused about the if statement. I knew that in the end, the result of brackets must be true or false but I did not get how does it come to that conclusion in the end.

So just to be sure, essentially before every if function is executed it automatically runs “Boolean(the content of a function after calculation)” ?

Example: If the result of a computation in brackets is “true” then the function “Boolean(true)” returns true and therefore function executes the commands for true statement and if the result of a computation in brackets is “undefined” then “Boolean(undefined)” is false and therefore function executes the commands for false statement?

I am just curious if the “Boolean(content of brackets)” is used whenever I execute any kind of if function or are there some kind of special rules?

Now to be clear an if is a statement is not a function. A statement is an action of sorts and in the case of an if it is an action that only happens if the condition is true.

Inside the parentheses of an if everything in there will be condensed down into a single true or false, and you can kind of think of that as math, but for logic. It is best to think of anything inside the parentheses as a boolean value.

//it is more or less fine to think of it like
if (Boolean(thingsToBeChecked())) {};
//but understand this is implicit and is the same as
if (thingsToBeChecked()) {};

It is also more than fine to always have brackets even with just one expression if you find this easier to read.

1 Like

What @caryaharper says. If statements are not functions. From the specification (note that this is just a description of how the language should work, it is just grammar, it isn’t a programming language itself):

So however a JavaScript engine is implemented, what it is required to do is that any expression it encounters in an if statement has to be converted to true. If it can’t be converted to that (ie it is false), then the code in the block directly after will not run.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.