JavaScript Constructor Function Methods

Question

I am wondering why I need the PhoneNumberFormatter.prototype.slice method below.

Why can't I just use slice(3,6).join('') inside my other methods without needing to add PhoneNumberFormatter.prototype.slice method? When the interpreter doesn't find the method on the PhoneNumberFormatter object, wouldn't it just look up the prototype chain to find slice and join on the Array prototype?

function PhoneNumberFormatter(numbers) {
    this.numbers = numbers;
}

PhoneNumberFormatter.prototype.render = function() {
    var string = '';
    string += this.parenthesize(this.getAreaCode());
    string += ' ';
    string += this.getExchangeCode();
    string += '-';
    string += this.getLineNumber();
    return string;
};

PhoneNumberFormatter.prototype.getAreaCode = function() {
    return this.slice(0, 3);
};

PhoneNumberFormatter.prototype.getExchangeCode = function() {
    return this.slice(3, 6);
};

PhoneNumberFormatter.prototype.getLineNumber = function() {
    return this.slice(6)
};

PhoneNumberFormatter.prototype.parenthesize = function(string) {
    return '(' + string + ')';
};

// why do I need the following method?
PhoneNumberFormatter.prototype.slice = function(start, end) {
    return this.numbers.slice(start, end).join('');
};

var phoneNumberOne = new PhoneNumberFormatter([6, 5, 0, 8, 3, 5, 9, 1, 7, 2]);

phoneNumberOne.render()

The only thing you are doing here is calling the slice method of the PhoneNumberFormatter and joining the results, it's not like you need it but it really makes your code look a lot cleaner and simpler, namely, you only need to do the joining once and refer to the numbers property in one place, from a do not copy yourself perspective, this is quite a good way to do it, I would say — Icepickle
– Icepickle, Commented Jan 7, 2017 at 22:45
What prototype chain are you thinking of that would lead to Array.prototype? — melpomene
– melpomene, Commented Jan 7, 2017 at 22:46
@melpomene He is rather referring to the PhoneNumberFormatter.prototype.slice method ;) — Icepickle
– Icepickle, Commented Jan 7, 2017 at 22:47

Pierre C. · Accepted Answer · 2017-01-07 23:09:22Z

1

I guess it was created to make the code cleaner and prevents code duplication.

As the use of the slice keyword in two different places seems to confuse you I'll explain briefly the differences.

In your prototype methods (e.g. getAreaCode, getExchangeCode, ...), the keyword this represents a PhoneNumberFormatter object. When you call this.slice() (in the methods), you are calling the slice method of this object hence the one created in your code.

But in your slice method (the one in your code), you are calling this.numbers.slice(). Here you call the slice method on an array (this.numbers). You are using the native array method slice.

You could write your methods like so and remove the slice method created in your code:

PhoneNumberFormatter.prototype.getAreaCode = function() {
    return this.numbers.slice(0, 3).join('');
};

edited Jan 7, 2017 at 23:09

answered Jan 7, 2017 at 22:45

Pierre C.

1,4281 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Icepickle Over a year ago

Personally, I like the original code better, if something needs to be changed, you only need to change it at a single place

Pierre C. Over a year ago

@Icepickle I do like it better too. OP just seemed unsure of the way he could write the methods differently so I cleared that out.

Icepickle Over a year ago

Though I understand your point, I think he means something else (nl: the sentence of the interpreter and the array prototype method), I think you should rather explain how the slice method is found back on this. I think part of the OP's confusion might be that slice name is used, and not, lets say take (just for not confusing the OP)

Icepickle Over a year ago

Nice update of your question :) I think you do a better way of explaining it than me :)

Kyle Over a year ago

Thanks so much for your help. I understand now. Great explanation.

|

Icepickle · Accepted Answer · 2017-01-07 23:05:59Z

I think the main confusion you seem to have is the name of the method slice. This leads you to believe that it is the array method, but in fact it is not.

The slice method mentioned in your code is the slice method of the PhoneNumberFormatter, not the one of the array.

Because of this, the interpreter could never find the slice method in the prototype chain, because the prototype of the PhoneNumberFormatter would be object, and just calling slice would rather throw an error that the method is undefined.

The this.slice method refers to PhoneNumberFormatter.prototype.slice and this one will refer to it's own numbers property and will then call the slice method on the numbers Array.

Maybe it is simply easier to rename the code like:

function PhoneNumberFormatter( numberArr ) {
  this.numbers = numberArr.slice(); // copy numbers
}


PhoneNumberFormatter.prototype.getAreaCode = function() {
    return this.take(0, 3);
};


PhoneNumberFormatter.prototype.take = function() {
  return Array.prototype.splice.apply( this.numbers, arguments ).join('');
};

var formatter = new PhoneNumberFormatter([0,1,2,3,4,5,6,7,8,9]);

console.log(formatter.getAreaCode());

Which maybe makes it more clear to you, that the take method is simply a utility method simplifying your code, cause be honest, why would you want to repeat for 5 different methods the slice and join part, and then take a potential risk of copying an error 5 times, or in case you need to change something, need to make the same change 5 times

Collectives™ on Stack Overflow

JavaScript Constructor Function Methods

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related