Why is regex working only if function scoped variable is declared before the local doCount function-CodePudding

I have some sample code at the following link: working sample.

var a = "sd 1234 abc \n";

function removeNewLineCharacter1() {
  doCount(a);

  var _trimNewLineCharsRegExp = /(^[\n\r] )|([\n\r] $)/g;

  function doCount(g) {
    var originalLength = g.length;
    g = g.replace(_trimNewLineCharsRegExp, "");
    console.log("original length :"   originalLength   " and final length : "   g.length);
  }
}

function removeNewLineCharacter2() {
  var _trimNewLineCharsRegExp = /(^[\n\r] )|([\n\r] $)/g;

  doCount(a);

  function doCount(g) {
    var originalLength = g.length;
    g = g.replace(_trimNewLineCharsRegExp, "");
    console.log("original length :"   originalLength   " and final length : "   g.length);
  }
}

<button id="btn1" onclick="removeNewLineCharacter1(); return false;">Remove new line character(s) 1</button>
<button id="btn1" onclick="removeNewLineCharacter2(); return false;">Remove new line character(s) 2</button>

When I click on the the button that says Remove new line character(s) 1 the new line character is not trimmed from the string a. However, when I click on the button that says Remove new line character(s) 2 then the new line character gets removed. Both these buttons are calling different functions when they are clicked, but the difference between these called functions is simply that the regex expression variable _trimNewLineCharsRegExp is declared before doCount local scoped function in the called function that works.

Question

Why is the new line character not being removed by the first button onclick function?

CodePudding user response：

Variables declared with var are hoisted, so it doesn't matter when it is declared.

The key here is when it is assigned a value.

In the first example, it is undefined, then you call the function (passing undefined to g.replace), then you give it a value.

In the second example, you give it a value before calling the function (so you pass /(^[\n\r] )|([\n\r] $)/g to g.replace).

CodePudding user response：

Variables defined with var get hoisted. This means that the declaration is moved a the top of the function. But they get initialized where you assign them a value.

In your case, in one instance you are initializing the variable before calling doCount and in another after.

This means that inside removeNewLineCharacter1 doCount gets executed with a value of undefined for _trimNewLineCharsRegExp. This is where the difference comes from.