JavaScript chaining method to function - TypeError: (intermediate value).methodName is not a function

Question

I was following an online lesson for beginners, which used the apply/bind methods to set the 'this' context for a function.

I saw that you can chain the bind method directly to the function block, which was new to me. So it got me thinking why cant I chain other methods, other than bind/call/apply, to affect the returned value.

let obj = {
  name: 'john',
};

let sayHello = function() {
  return 'hello there ' + this.name;
}.apply(obj).toUpperCase();

let sayBonjour = function() {
  return 'Bonjour!';
}.toUpperCase();

console.log(sayHello);
console.log(sayBonjour());

In the example above why can I use the .toUpperCase() method on the sayHello function which uses the apply method, and not on the sayBonjour function which does not. In trying to do so I get the error:

'Uncaught TypeError: (intermediate value).toUpperCase is not a function'.

I realize this is not the way string method (or other methods) is/are intended to be used, for learning purposes, I was hoping someone could explain whats preventing me from using the method in such a way.

Many thanks for your time and help

The reason why you can use bind, call and apply but not toUpperCase is that there is no such method in Function.prototype (that is, there is no Function.prototype.toUpperCase()). Have a look at the list here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. As toUpperCase() is a method present in String.prototype the IIFE in the answer below will work, since the function itself returns a string. — Gerardo Furtado
– Gerardo Furtado, Commented Sep 4, 2018 at 12:03
@GerardoFurtado The key word i was missing was 'call'. I was mistaken regarding the function being called or not, and so I was not applying the method to a returned string but to the function itself. Suddenly I understand the purpose of the call method perfectly now. Thankyou very much for your help! — Sam
– Sam, Commented Sep 4, 2018 at 15:00

Bergi · Accepted Answer · 2018-09-04 12:05:29Z

1

You can, but you tried to use .toUpperCase on function. You can use it on string which will be returned by function expression. You can use IIFE to achieve this.

let obj = {
  name: 'john',
};

let sayHello = function() {
  return 'hello there ' + this.name;
}.apply(obj).toUpperCase();

let sayBonjour = (function() {
  return 'Bonjour!';
})().toUpperCase();

console.log(sayHello);
console.log(sayBonjour);

edited Sep 4, 2018 at 12:05

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

answered Sep 4, 2018 at 11:58

Tomasz Bubała

2,1731 gold badge13 silver badges18 bronze badges

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

1 Comment

Sam Over a year ago

I understand perfectly now regarding the use of an IIFE for this purpose. Thank you very much for your help. As a recap, I thought i was infact using the .toUpperCase() method on the returned string itself, but was mistaken. I have understood better the purpose of the call method which does just that, calls the function which then returned the string I was expecting.

ponury-kostek · Accepted Answer · 2018-09-04 12:29:51Z

1

This example shows what is happening when your code is exacuted.

function print(value) {
	const str = Object.prototype.toString.apply(value);
	console.log("Type: " + str.slice(7, str.length - 1) + "\tValue: " + value);
}

let obj = {
	name: "john"
};
/*
let sayHello = function() {
	return 'hello there ' + this.name;
}.apply(obj).toUpperCase();
*/
// equals to
{
	console.log("sayHello case");
	let step1 = function () {
		return "hello there " + this.name;
	};
	print(step1);
	let step2 = step1.apply(obj);
	print(step2);
	let sayHello = step2.toUpperCase();
	print(sayHello);
}
/*
let sayBonjour = function() {
	return 'Bonjour!';
}.toUpperCase();
*/
// equals to
{
	console.log("sayBonjour case");
	let step1 = function () {
		return "Bonjour!";
	};
	print(step1);
	let sayBonjour = step1.toUpperCase();
	print(sayBonjour);
}

answered Sep 4, 2018 at 12:29

ponury-kostek

8,0835 gold badges27 silver badges33 bronze badges

1 Comment

Sam Over a year ago

This answer was immensely helpful, Thank you very much for help! -- I felt the other answer provided was more succinct in its format, although I wish I could select this as the correct answer as well, as the breakdown of what is happening really helped me understand the concept. Thank you again.

Collectives™ on Stack Overflow

JavaScript chaining method to function - TypeError: (intermediate value).methodName is not a function

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related