Пример рефакторинга «извлечение функции» в коде показа результатов вычислений

Исходный код

var res = document.getElementById("result");
	
var data = eval('(' + result + ')');
var text = data.status;

while (res.firstChild)
    res.removeChild(res.firstChild);

res.appendChild(document.createTextNode(data.status));

for (var i = 0; i < data.result.length; i++)
{
    res.appendChild(document.createElement("br"));
    res.appendChild(document.createTextNode(data.result[i]));
}

Что не так в исходном коде

Самое главное — это, конечно, смешение двух ответственностей: собственно выполнение внешнего кода и показ результатов выполнения.

Второй момент — неясные названия переменных, не очень точно отражающие смысла хранящихся в них значений.

Третий момент, больше субъективный, связан с вёрсткой блоков, в которых выводится результат выполнения. Я бы отвел под статус и результат два разных блока. Также вместо методов удаления и создания узлов можно пользоваться свойствами innerText и innerHTML.

Вариант рефакторинга исходного кода

function showEvalResults(results) {
    document.getElementById('eval-status').innerText = results.status;
    document.getElementById('eval-results').innerHTML = results.result.join
}

var eval_results = eval('(' + expression + ')');
showEvalResults(eval_results);