关于js中array[i].charAt(0).toUpperCase()连用问题

var str = 'hOw aRe yOu';
var arr = str.toLowerCase().split(' ');
var result = '';
for(var i = 0; i < arr.length; i++){
	// arr[i].charAt(0) = arr[i].charAt(0).toUpperCase(); // 报错
	console.log(arr[i].charAt(0).toUpperCase()); // H A Y
	// result = arr.join(' ');
};
// console.log(result);

能看出来array[i].charAt(0).toUpperCase()连续使用是有效果的，但是直接赋值就会报错，查了一些资料发现
“JavaScript字符串是不可变的，因此不能通过使用运算符来改变字符串。”

下面是改进的写法，并且用了函数。

function firstUpperCase(str){
	var arr = str.toLowerCase().split(' ');
	for(i = 0; i<arr.length; i++){
		arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1);
	};
	str = arr.join(' ');
	return str;
};
console.log(firstUpperCase('hOw aRe yOu'));
console.log(firstUpperCase('The world needs more heroes.'));

上面这个也用到运算符来改变首字母的大小写，但是却起作用了，我想应该是在第一次代码中arr[i].charAt(0)这个属于字符串，而第二次代码中arr[i]是数组中的一个元素。
这只是我的理解，也不知道这样理解对不对（希望可以有大佬看到讲解一下）。

我还只是一个刚开始学习没多久的人，写的有错误希望指正！感谢！