What is the purpose of +- on a Javascript number?

Question

I came across some code recently that was like this:

const element = document.getElementById("myId")
const rect = element.getBoundingClientRect()

const height = +-(rect.height / 1)

First of all, what is the deal with the division by 1? And second, what does +- do?

I put that logic into a Fiddle and it appears that it flips the sign of whatever is in the parentheses (from positive to negative and from negative to positive). However, if I wanted to flip a sign, why wouldn't I just do -(myvariable)?

Regarding the division by 1, it appears that the type of rect.height is already a number with floating-point precision and the divide operator is also floating-point division so we're not trying to generate an int or anything.

I just need some help trying to understand what that's trying to do.

Edit: The code was found here: Check if element is partially in viewport

Answer 1

Using division / will implicitly convert both operands to numbers:

const str = "10.5"

const division = str / 1;

console.log(division);
console.log(typeof division);

Using a unary minus - will implicitly convert the operand and change its sign:

const str = "10.5";
const minusStr = -str;

console.log(minusStr);
console.log(typeof minusStr);


const negativeNum = -3;
const minusNegativeNum = -negativeNum;

console.log(minusNegativeNum);

Using a unary plus + will convert anything to a number. If supplied with a number, it leaves it as it is:

const str = "10.5";
const plusStr = +str;

console.log(plusStr);
console.log(typeof plusStr);


const negativeNum = -3;
const plusNegativeNum = +negativeNum;

console.log(plusNegativeNum);

The above is also the order of how the expression +-(rect.height / 1) would be evaluated.

So, what does +-(rect.height / 1) do? The same as -rect.height but tacks on two useless operators.

It should be noted, that none of the conversions are really needed - not because a unary minus already does it, but because the height property produces a number anyway:

const element = document.getElementById("myId")
const rect = element.getBoundingClientRect()

console.log(rect.height);
console.log(typeof rect.height);

const height = +-(rect.height / 1);
console.log(height);

#myId {
  width: 400px;
  height: 200px;
  background: red;
}

<div id="myId"></div>

So the whole expression just gets the height and inverts its sign.

Answer 2

Can you provide the link where you found this code? But from what you provided, I would agree with you. The + operator and the dividing by one wouldn't do anything. So I would say that it's a typo, bit of temporary code, or the developer having one too many drinks.

Answer 3

I think it´s a trap. I´m not shure but if you get numbers from document you get strings instead of numbers. this + before a number in a string (example "10") would turn it in type number.

For example

"11" + 1 = "111" 

because javascript concanate this as 2 strings. but

var a = "11"
+a makes it = 11

but the restit sadly out of context i think

Edit:

ah okay.

  Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible

+-(rect.height / 1)) * 100

I think this parts makes this number to a percent value.JS don´t know percent. Everything is value / 100, but to get the right value, you should value / 1.