Search code examples
javascriptfunctionscopevar

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


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?


Solution

  • 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).