Почему функция работает именно так?

Question

[VladMokrousov]

Привет, недавно изучаю js и при работе над проектом столкнулся со странностью. Когда задаю переменные глобально, при вызове функции происходит... Перемножение i между циклами? Не знаю, как еще это объяснить. Думал, что дело в области видимости или передаче массива commentsList по ссылке, но не нашел информации, объясняющей это поведение. Вот код, при котором можно наблюдать эффект - вместо трех комментариев в каждый объект записывается 15.

var comment,
commentsList = [];
var getCommentsList = function() {
    
    for (let i = 0; i < 3; i++) {
        comment = "Привет, мир!";
        commentsList.push(comment);
    }
    return commentsList;
};

var testArr = [];
for (let i = 0; i < 5; i++) {
    testArr.push({
        name: "Название объекта",
        sometext: getCommentsList()
    });
}
console.log(testArr);

А вот код, при котором все работает нормально:

var getCommentsList = function() {
    var comment,
    commentsList = [];
    for (let i = 0; i < 3; i++) {
        comment = "Привет, мир!";
        commentsList.push(comment);
    }
    return commentsList;
};

var testArr = [];
for (let i = 0; i < 5; i++) {
    testArr.push({
        name: "Название объекта",
        sometext: getCommentsList()
    });
}
console.log(testArr);

Answer 1

[Rsa97]

Так вы из функции возвращаете ссылку на глобальный массив, в который при каждом вызове функции дописывается три элемента. В результате все sometext ссылаются на один и тот же массив, в котором к концу цикла получается ровно 5*3 = 15 элементов.

Comments

[VladMokrousov]

Понял, а можете еще объяснить, почему во втором случае этого не происходит? Так получается из-за того, что переменные в функции каждый раз как бы создаются заново?

[Rsa97]

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

[VladMokrousov]

Спасибо за помощь)

Answer 2

[Виктор Л]

var comment,
commentsList = [];
var getCommentsList = function() {
    
    for (let i = 0; i < 3; i++) {
        comment = "Привет, мир!";
        commentsList.push(comment);
    }
    return commentsList;
};

var testArr = [];
for (let i = 0; i < 5; i++) {
    testArr.push({
        name: "Название объекта",
        sometext: commentsList
    });
}
getCommentsList()
console.log(testArr);