Why is the old content of the array deleted?

Question

let sentenceArr = [['Teachers', 'are', 'clever.'], ['Developers', 'are', 'more', 'clever,', 'because', 'of', 'her', 'practice', 'experience.']];

for(let i=0; i<sentenceArr.length;i++){
    console.log('loop: ' + i +1);
    splitPunctuationMarks(sentenceArr[i]);
}


function splitPunctuationMarks(inSentence_As_Arr){
    let punctuationMarks = ['.', '!', '?', ',', ';', ':'];
    let containsPunctuationMark = (-1);
    let splitParts = [];
    let parts = [];

    for(let i=0; i < inSentence_As_Arr.length; i++){
        for(let j=0; j< punctuationMarks.length; j++){
            containsPunctuationMark = inSentence_As_Arr[i].indexOf(punctuationMarks[j]);
            if(containsPunctuationMark >= 0){
                console.log('### splitPunctuationMarks ' + inSentence_As_Arr[i]);
                console.log('parts 1: ');
                console.log(parts);
                parts[0] = i;
                parts[1] = inSentence_As_Arr[i].slice(0, containsPunctuationMark);
                parts[2] = inSentence_As_Arr[i].slice(containsPunctuationMark);
                console.log('parts 2: ');
                console.log(parts);

                console.log('splitParts1: ');
                console.log(splitParts);

                splitParts.push(parts);

                console.log('splitParts2: ');
                    console.log(splitParts);

                containsPunctuationMark = (-1);
                //parts = [];
            }
        }
    }
}

I wrote a function that works in another way than I expect.

I also found a solution, that delivers the result I want. Now I would like to understand, what's wrong with my expectation.

That's my code:

let sentenceArr = ['Teachers are clever.', 'Developers are more clever, because of her practice experience.'];

for(let i=0; i<sentenceArr.length;i++){
    console.log('loop: ' + i +1);
    splitPunctuationMarks(sentenceArr[i]);
}

function splitPunctuationMarks(inSentence_As_Arr){
    let punctuationMarks = ['.', '!', '?', ',', ';', ':'];
    let containsPunctuationMark = (-1);
    let splitParts = [];
    let parts = [];

    for(let i=0; i < inSentence_As_Arr.length; i++){
        for(let j=0; j< punctuationMarks.length; j++){
            containsPunctuationMark = inSentence_As_Arr[i].indexOf(punctuationMarks[j]);

            if(containsPunctuationMark >= 0){
                console.log('### splitPunctuationMarks ' + inSentence_As_Arr[i]);
                console.log('parts 1: ');
                console.log(parts);
                parts[0] = i;
                parts[1] = inSentence_As_Arr[i].slice(0, containsPunctuationMark);
                parts[2] = inSentence_As_Arr[i].slice(containsPunctuationMark);
                console.log('parts 2: ');
                console.log(parts);

                console.log('splitParts1: ');
                console.log(splitParts);

                splitParts.push(parts);

                console.log('splitParts2: ');
                console.log(splitParts);

                containsPunctuationMark = (-1);
                //parts = [];
            }
        }
    }
}

What I have expected:

1st loop:

'### splitPunctuationMarks clever.

parts1: [ ] //because the empty array has not been filled yet.

parts2: [2, 'clever', '.'] //because that are the tracked data from the first sentence.

splitParts1: [ ] //because the empty array has not been filled yet.

splitParts2: [2, 'clever', '.'] //because that are the data from parts

2nd loop:

'### splitPunctuationMarks clever,

parts1: [ ] //because the empty array has not been filled yet.

parts2: [3, 'clever', ','] //because that are the tracked data from the second sentence.

splitParts1: [ ] //because the empty array has not been filled yet.

splitParts2: [3, 'clever', ','] //because that are the data from parts

'### splitPunctuationMarks experience.

parts1: [3, 'clever', ','] //because the array has not been overwritten yet.

parts2: [8, 'experience', '.'] //because that are the tracked data from the second sentence.

splitParts1:

I have expected: [3, 'clever', ','] //because of the first pushed content to the array

But I get: [8, 'experience', '.'] //that's what I don't understand

splitParts2:

I have expected: [[3, 'clever', ','], [8, 'experience', '.']]

But I get: [[8, 'experience', '.'], [8, 'experience', '.']]

Why have I lost the first entry of my 2nd loop?

Answer 1

The way Javascript works defines the behaviour why parts gets overwritten.

Pass by Value

In Javascript, the primitive types(int, boolean, String, null, undefined, Symbol) when passed to a function get passed by value which means a new memory space is created and a copy of them is stored in it.

// demonstrating pass by value
function passByValuePrimitive(x) {
    // a new variable space is allocated in memory which holds the value 5 initially
    x = 6;// here you change the value of x to be 6 which points to the new variable created within this execution context.
    console.log(x)
}

var x = 5;
console.log(x); // value of x gets passed to the function.
passByValuePrimitive(x);
console.log(x); // here again in the global execution context, the value of x will be 5

Pass By Reference

When we consider objects, they get passed by reference, which means the memory address of the object is passed and any change to the value is persistent throughout the execution context of the program.

// demonstrating pass by reference
function passByReference(x) {
    // the reference address of x is known to the function
    x.name = "Caesar";// here you change the value of x.name to be Caesar which points to the same memory address of the object x created in the global execution context.
    console.log(x)
}

var x = { name: "Julius"};
console.log(x); // Here the reference address of the object x in memory is passed to the function
passByReference(x);
console.log(x); // here in the global execution context, the value of x.name will be "Caesar"

Hope it Helps. @SBylemans has given a crisp answer.

Answer 2

It's because you're overriding parts in your loop. You push parts into the splitParts array, but actually a reference to the parts array will be stored there. When you then change the parts array, it will change the content in the splitParts array.

If you make the parts variable local to the inner loop, you'll have the wanted result.