.innerHTML() - compare two approaches (javascript basics)

Question

I am starting to learn JavaScript and have been using w3schools as my resource. As a new kid on the block I would like to ask a humble and simple question. In layman's terms - What is the difference between:

this code

function myFunction() { 
    return "Hello World"
}
document.getElementById('demo').innerHTML = myFunction();

and that code

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World!";
}
myFunction();

Reason I am asking is:
I am doing some exercises and I got the end result correctly by doing this code but then when I clicked "show answer" the code shown is that code which is different from mine.

In addition to my question - which one is practical and which one is best for what situation?

reference exercise link.

In the end they do the same thing. In different context on how/when they would be called might result in different things. — epascarello
– epascarello, Commented Nov 30, 2016 at 18:29
"I am starting to learn JavaScript and have been using w3schools as my resource." I'd strongly recommend using MDN instead. And various books and blogs. Not w3schools, which is quite poor. — T.J. Crowder
– T.J. Crowder, Commented Nov 30, 2016 at 18:31
style wise i'd prefer the first, as the function does one simple thing and can be more easily reused — aw04
– aw04, Commented Nov 30, 2016 at 18:32
Why are you using a function at all? It's pretty useless unless it is executed multiple time. If you do call it multiple times, you'll quickly see how they are different. — Bergi
– Bergi, Commented Nov 30, 2016 at 18:32
In the first example, the function is pure, while the one in the second example has side-effects. — rishat
– rishat, Commented Nov 30, 2016 at 18:46

bob-fornal · Accepted Answer · 2016-11-30 18:36:06Z

1

Given the code you described,

function myFunction() { 
  return "Hello World"
}
document.getElementById('demo').innerHTML = myFunction();

If myFunction() were executed somewhere else (say attached to a button), it would simply return the string "Hello World".

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World!";
}
myFunction();

When myFunction() is executed as described above, it would change the HTML of an element with the id="demo".

The complete set of code, including the fourth line of each would do the same thing, but the function inside each would provide completely different functionality.

answered Nov 30, 2016 at 18:36

bob-fornal

5,1205 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vbguyny · Accepted Answer · 2016-11-30 18:31:33Z

0

They produce the same result however the first one gets the string value from the function call whereas the second assigns the value directly from within the function.

answered Nov 30, 2016 at 18:31

vbguyny

1,1822 gold badges10 silver badges30 bronze badges

Comments

oKonyk · Accepted Answer · 2016-11-30 19:44:37Z

0

Javascript is well known for multitude of ways to accomplish same result. Based on your code snippets it's very subjective to say which is more practical. Both of them are fairly simple, just to proof the concept (you don't have function that only returns string).

To answer your comment lets try to imagine more practical situation.

var isAuth = true; // lets imagine this comes as result of non trivial authentication process
function customGreeting(isAuthenticated) { 
    return isAuthenticated ? "Hello, welcome back" : "Please Sign in to continue";
}
document.getElementById('demo').innerHTML = customGreeting(isAuth);

Above code uses approach from first snippet. Some might say that it more 'elegant' than using second approach (bellow).

var isAuth = true; // lets imagine this comes as result of non trivial authentication process
function customGreeting(isAuthenticated) {
    if(isAuthenticated){
        document.getElementById("demo").innerHTML = "Hello, welcome back";
    }else{
        document.getElementById("demo").innerHTML = "Please Sign in to continue";
    }
}
customGreeting();

If we set functional programming approach aside (with is out of scope for this discussion) it's very hard to argue which approach is better.

answered Nov 30, 2016 at 19:44

oKonyk

1,47611 silver badges16 bronze badges

3 Comments

patrick Over a year ago

I kind of get the explaination here but I have not ventured to codes with variables with the "true" value. I am assuming that I would run into this when I get in forms and inputs? But thanks @oKonyk !

oKonyk Over a year ago

@patric when you get more exposure to coding, you'll see that it we are dealing a lot with all sorts of conditions. We check if this it true do that, if not do something else :) In my example var isAuth = true; is coming from imaginary authentication service (which implementation is not trivial:). Values can come from forms, backend requests etc.

patrick Over a year ago

Thanks a lot! I'm looking forward to get more exposure.

Collectives™ on Stack Overflow

.innerHTML() - compare two approaches (javascript basics)

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related