-4

I am working through some basic JS stuff on W3 schools and the following code is not making much sense to me:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a computer.</p>

<p id="demo"></p>

<script>
var x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";  
</script>

</body>
</html>

Specifically what I am having trouble with is the 'the value of z is " + z + "."'

Scott Marcus
  • 57,085
  • 6
  • 34
  • 54
preussenfahrer
  • 1
  • 4
    The `+` operator concatenates strings as well as performing the arithmetic addition operation. In this case, it's strings. – Pointy Sep 26 '20 at 18:12
  • 1
    What trouble are you having? Anything in quotes is a *string literal* and will be presented exactly as it appears within the quotes. Anything not in quotes is a variable, which simply stored a value. In your case, the result of the math. When you combine string literals and variable values with the `+` operator, you get the *concatenated* result, which simply puts the values together. – Scott Marcus Sep 26 '20 at 18:15
  • 1
    By the way, stay as far away from W3 Schools as you can! It's well known to have outdated, incomplete, or flat out incorrect examples. In your case, you should not be using `.innerHTML`, which has security and performance implications. Instead, you should be using `.textContent` because there is no HTML in the value that you are setting. Instead, do your research and referencing from [The Mozilla Developer's Network](https://developer.mozilla.org), which is highly regarded as *the* authoritative source for information about most things, web. – Scott Marcus Sep 26 '20 at 18:17
  • I was trying to answer the question. But it got closed. As @Pointy says, the `+` operator is used for arithmetical addition and also for string concatenation. So you need to read the context to see how it is being used. z = "foo" + "bar". Then `z` = "foobar". z = 1 + 1; then `z` = 2. z = 1 + "1"; then `z` = "11" (type: string). – tomacco Sep 26 '20 at 18:19

1 Answers1

0

You can think of the operator + as a function that takes two arguments, say a and b.

Let's replace, for clarity, the + operator with the keyword add. Then, our function signature looks like add(a, b).

If you let a and b be two integers, say a = 1 and b = 2, then you probably expect add(a, b) to perform the arithmetic operation of addition and output number 3.

Perhaps, the confusing part is when a and b are not integers, or more generally of numeric type. It turns out that our add function has what's called an overload. What this means is that our function does different things based on the type of input you provide to it. When a and b are integers, add(a, b) adds a and b up. In your example, it happens that the function arguments are of type string. So, instead of performing addition, the function performs concatenation (e.g., putting two things together, just like putting together words forms sentences).

Now, back to the + operator. This is just syntactic sugar. Same may argue that it feels more natural to write a + b than add(a, b). It definitely is shorter.

In your example, the operator + is used two times.

"The value of z is " + z + "."

Let's break it down:

// A string.
"The value of z is "

// A number.
z

// A string.
"."

By doing "The value of z is " + z the operator is trying to do some work on a string and a number. The default behavior in this case is to type cast z as a string and then perform concatenation. Thus, at the end of this operation the output becomes the string "The value of z is 11". Next, you are using again the + operator, but this times on two strings, namely "The value of z is 11" and ".". So, the default in this case is to just concatenate those two strings. Therefore, your output becomes "The value of z is 11."

Mihai
  • 2,081
  • 3
  • 19
  • 42