Monday, August 20, 2018

Javascript code: how does it work?

I recently completed the DevTools ~> http://discover-devtools.codeschool.com/ course and while inspecting the code used I came across some sections which I did not understand:

String.prototype.repeat = function (num) {
  return new Array(num + 1).join(this);
};

used in the displayDate() method thus:

var body = $('body')[0].outerHTML.repeat(10000);

What is the importance of using this code?

Secondly, within displayToday() method, displayDate() method is called with an argument although it is not defined to take an arg. Why is this so?

I am learning JS and couldn't npt wrap my head around these. Any help is welcome.

Solved

String.prototype.repeat = function (num) {
  return new Array(num + 1).join(this);
};

This code creates an array that is num+1 in length, filled with undefined. It is then collapsed into a string using join, separating each undefined value with the context this which is the outerHTML string. When an array is joined into a string, undefined values are just nothing, thus the string generated only contains your separators which appear num times, thereby "repeating" the string.

//let . be "undefined, which when turned into a string, is just nothing
[u,u,u,...,u].join('test');
'(u)test(u)test(u)...(u)test'
'testtest...test'

As for the second question, functions in JS will always take in arguments, even if the function isn't meant to take one. Defining arguments in the function in JS is simply assigning the passed arguments a name. The arguments will always go to the function, and collected in a special array available in functions as the arguments variable.

function fn(){
  console.log(arguments); //['hello','world'];
}

foo('hello','world');

You can pass an argument to a function even if you don't have it listed in the declaration. You can access arguments passed with arguments

function foo () {
  console.log(arguments);
}

foo('bar'); // ['bar']
foo('bar','blerg'); // ['bar','blerg']

It's very simple.

When you alter the prototype of something, in this case the default String class, you make that method available to any instance of that class, in this case to any string.

Now let's look at what the method does.

return new Array(num + 1).join(this);

Because of String.prototype.displayDate = function(num) {, the value of this inside that function is the value of the string. The this reference points to the current object, I guess that makes sense.

Then it's creating an array of num + 1 elements, which will all be initialised with undefined. Array.prototype.join returns the string representation of the array elements separated by the thing you provide as an argument to it.

in this case, you have an array of num +1 undefined values. the string representation of undefined is "", or the empty string. So you end up having num + 1 concatenations of the empty string + the value of this, or num times your string.

Say your string is "test", and you call repeat(2).

It first created a = new Array(undefined, undefined, undefined);// 2 + 1 times.

Then it starts to join the strings, putting "test" in between each pair.

new String(undefined) + new String("test") + new String(undefined); + new String("test") + new String(undefined)

The above becomes:

"" + "test" + "" + "test" + "" = "testtest"// two times the original string.

No comments:

Post a Comment