Entiendo que hay otras formas de crear un efecto de escritura, pero parece que no puedo entender la lógica de usar el bucle for anidado.
var changingtext = document.querySelector(".text"); var arr = ["hard","Fun","a Journey","Career", "Countless hours"]; var length; var index = 0; var count=0; var letter = ""; let currentText = ""; window.addEventListener("DOMContentLoaded", function(){ type(); }); function type(){ setTimeout(function(){ for(var i=0; i<arr.length; i++){ length = arr[i].length; for(j=0; j<length;j++){ letter += arr[i].charAt(j); changingtext.textContent = letter; console.log(letter); } } }, 200); }Simplemente debe programar los tiempos de espera en un solo ciclo, incrementando el tiempo de espera:
var changingtext = document.querySelector(".text"); var arr = ["hard","Fun","a Journey","Career", "Countless hours"]; var length; var index = 0; var count=0; var letter = ""; let currentText = ""; window.addEventListener("DOMContentLoaded", function(){ type(); }); function type(){ let timeout = 200; for(var i=0; i<arr.length; i++){ length = arr[i].length; letter += ' '; for(j=0; j<length * 2;j++){ if (j > length - 1) { letter = letter.slice(0, -1) } else { letter += arr[i].charAt(j); } timeout += 200; ((timeout, letter) => { setTimeout(() => { changingtext.textContent = letter; console.log(letter); }, timeout); })(timeout, letter); } } } <div class="text"/>¿O tal vez te refieres a esto?
var changingtext = document.querySelector(".text"); var arr = ["hard","Fun","a Journey","Career", "Countless hours"]; var length; var index = 0; var count=0; var letter = ""; let currentText = ""; window.addEventListener("DOMContentLoaded", function(){ type(); }); function type(){ let timeout = 200; for(var i=0; i<arr.length; i++){ length = arr[i].length; letter = ''; for(j=0; j<length * 2;j++){ if (j > length - 1) { letter = letter.slice(0, -1) } else { letter += arr[i].charAt(j); } timeout += 200; ((timeout, letter, restart) => { setTimeout(() => { changingtext.textContent = letter; console.log(letter); if (restart) type(); }, timeout); })(timeout, letter, i === arr.length - 1 && j === (length * 2) - 1); } } } <div class="text"/>