When I was reverse engineering some JavaScript code, I came across this function:

function fun1() {
    const arr = ["a", "b", "c", "d", "e"];
    fun1 = function () {
        return arr;
    };
    return fun1();
}

To me it looks redundant. The code seems to be:

1. Declare an array arr.
2. Redefine the function inside the function so that it returns arr.
3. Using return fun1() returns the result of the function itself, which is now redefined to return arr, so it appears to return arr.

So I rewrote the function to eliminate all redundant code:

function fun2() {
    const arr = ["a", "b", "c", "d", "e"];
    return arr;
}

However, I was surprised to find that the two functions behaved completely differently.

fun1() appears to return a reference to arr, while fun2() appears to return a copy of arr.

Here is a minimal reproducible runnable example to illustrate the difference:

// This function is redefined inside itself to return arr
function fun1() {
  const arr = ["a", "b", "c", "d", "e"];
  fun1 = function() {
    return arr;
  };
  return fun1();
}

// Why not return arr directly?
function fun2() {
  const arr = ["a", "b", "c", "d", "e"];
  return arr;
}

// But the result is different...
let test_fun_1 = fun1();

test_fun_1.pop();

test_fun_1 = fun1();

console.log("Logging test_fun_1");

console.log(test_fun_1); // ["a", "b", "c", "d"]

let test_fun_2 = fun2();

test_fun_2.pop();

test_fun_2 = fun2();

console.log("Logging test_fun_2");

console.log(test_fun_2); // ["a", "b", "c", "d", "e"]

// What is this magic?

Looks like magic happened...

fun1() and fun2()?