Javascript function does not act as expected

JavaScript
1

I have two JS scripts but neither of them does what I want to see.
I tried Firefox, Chrome and Internet Explorer. All the same.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body>
    <p id="demo1">123</p>
    <p id="demo2">456</p>
    <script src="script.js"></script>
</body>
</html>

JS - script 1

function arrEmpty(arr){
    arr.splice(0, arr.length);
    return arr;
}
const arrEle = [1,2,3,4,5];  
const result = arrEmpty(arrEle);
document.getElementById("demo1").innerHTML = arrEle.toString();
document.getElementById("demo2").innerHTML = result.toString();

Expected Result:

[1,2,3,4,5]

Result - Empty arrays in both lines:

JS - script 2

function arrEmpty(arr){
    arr.length = 0;
    return arr;
}
const arrEle = [1,2,3,4,5];  
const result = arrEmpty(arrEle);
document.getElementById("demo1").innerHTML = arrEle.toString();
document.getElementById("demo2").innerHTML = result.toString();

Expected Result:

[1,2,3,4,5]

Result - Empty arrays in both lines:

Why is it that?

It works only if I swap the line before the function.

JS - script Modified:

function arrEmpty(arr){
    arr.length = 0;
    return arr;
}
const arrEle = [1,2,3,4,5];  
document.getElementById("demo1").innerHTML = arrEle.toString();
const result = arrEmpty(arrEle);
document.getElementById("demo2").innerHTML = result.toString();
2

Hi,

JS is a bit special in the way it behaves. But using the debugger I can see that your splice line empties the arrEle array.
Indeed, the splice method the way you use it simply removes every element in the array according to the documentation.

You initially and respectively write 123 and 456 in the demo paragraphs which are indeed erased as both the original array and the result are empty.

What you have to understand is that you pretty much did act on a reference of the array you are passing. This means that any action made with the arr parameter actually reflects on the passed element.

Also setting the size of the array to 0 is pretty much saying you are emptying it. To me the behaviour in both scripts is correct

This is how I changed the code and the result I get

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<body>
    <p>demo 1</p>
    <p id="demo1">123</p>
    <p>demo 2</p>
    <p id="demo2">456</p>
    <p>demo 3</p>
    <p id="demo3">789</p>
    <p>demo 4</p>
    <p id="demo4">012</p>
    <p>demo A</p>
    <p id="demoA">abc</p>
    <p>demo B</p>
    <p id="demoB">def</p>
    <p>demo C</p>
    <p id="demoC">ghi</p>
    <p>demo D</p>
    <p id="demoD">jkl</p>
    <script src="cwm.js"></script>
</body>

</html>

JS

function arrEmpty(arr) {
    arr.splice(0, arr.length);
    return arr;
}

const arrEle1 = [1, 2, 3, 4, 5];
const result1 = arrEmpty(arrEle1);

document.getElementById("demo1").innerHTML = arrEle1.toString();
document.getElementById("demo2").innerHTML = result1.toString();

function arrEmpty2(arr) {
    arr.length = 0;
    return arr;
}

const arrEle2 = [1, 2, 3, 4, 5];
const result2 = arrEmpty2(arrEle2);

document.getElementById("demo3").innerHTML = arrEle2.toString();
document.getElementById("demo4").innerHTML = result2.toString();

function arrEmptyA(arr) {
    let innerArray = [...arr];
    innerArray.splice(0, arr.length);

    return innerArray;
}

const arrEleA = [1, 2, 3, 4, 5];
const resultA = arrEmptyA(arrEleA);

document.getElementById("demoA").innerHTML = arrEleA.toString();
document.getElementById("demoB").innerHTML = resultA.toString();


function arrEmptyB(arr) {
    let innerArray = [...arr];
    innerArray.length = 0;

    return innerArray;
}

const arrEleB = [1, 2, 3, 4, 5];
const resultB = arrEmptyB(arrEleB);

document.getElementById("demoC").innerHTML = arrEleB.toString();
document.getElementById("demoD").innerHTML = resultB.toString();

RESULT
image

Indeed Demo A and Demo C are left untouched.