.innerHTML() - сравнить два подхода (основы javascript)

Question

Я начинаю изучать JavaScript и использую w3schools в качестве своего ресурса. Будучи новым ребенком на блоке, я хотел бы задать скромный и простой вопрос. С точки зрения непрофессионала - В чем разница между:

этот код

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

и , что код

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

Причина Я спрашиваю:
Я делаю некоторые упражнения, и я правильно получил конечный результат, выполнив этот c ode, но затем, когда я нажал «показать ответ», показан код , код, который отличается от моего.

В дополнение к моему вопросу - какой из них практичен и какой из них лучше всего подходит для какой ситуации?

---

описание товара link.

Answer 1

Они производят тот же результат, но первый получает строковое значение от вызова функции, тогда как второе присваивает значение непосредственно из функции.

Answer 2

Учитывая код вы описали,

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

Если myFunction() были выполнены в другом месте (скажем, прикрепленный к кнопке), он просто возвращает строку «Hello World».

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

Когда myFunction() выполняется, как описано выше, было бы изменить HTML элемента с id="demo".

Полный набор кода, включая четвертую строку каждого, будет делать то же самое, но функция внутри каждого будет обеспечивать совершенно разные функции.

Answer 3

Javascript хорошо известен множеством способов достижения такого же результата. Основываясь на ваших фрагментах кода, очень субъективно сказать, что более практично. Оба они довольно просты, просто для доказательства концепции (у вас нет функции, которая возвращает строку).

Чтобы ответить на ваш комментарий, попробуйте представить себе более практичную ситуацию.

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); 

Выше кода использует подход из первого фрагмента. Некоторые могут сказать, что это более «элегантно», чем использование второго подхода (ниже).

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(); 

Если мы устанавливаем функциональный подход программирования в сторону (с выходит за рамки данной дискуссии) очень трудно утверждать, какой подход лучше.