{"id":5128,"date":"2019-01-15T20:39:55","date_gmt":"2019-01-15T19:39:55","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=5128"},"modified":"2019-01-15T10:42:20","modified_gmt":"2019-01-15T09:42:20","slug":"removing-javascripts-this-keyword-makes-it-a-better-language-heres-why","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2019\/01\/15\/removing-javascripts-this-keyword-makes-it-a-better-language-heres-why\/","title":{"rendered":"Removing JavaScript\u2019s \u201cthis\u201d keyword makes it a better language. Here\u2019s why."},"content":{"rendered":"

\"\"\/<\/a>Removing JavaScript\u2019s \u201cthis\u201d keyword makes it a better language. Here\u2019s why.<\/a><\/em><\/p>\n

<\/p>\n

\n

Removing JavaScript\u2019s \u201cthis\u201d keyword makes it a better language. Here\u2019s why.<\/h1>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
Cristi Salcescu<\/a><\/div>\n
\n
\n

this losing context<\/h3>\n

Methods are functions that are stored in objects. In order for a function to know on which object to work, this<\/code> is used. this<\/code> represents the function\u2019s context.<\/p>\n

this<\/code> loses context in many situations. It loses context inside nested functions, it loses context in callbacks.<\/p>\n

Let\u2019s take the case of a timer object. The timer objects waits for the previous call to finish before making a new call. It implements the recursive setTimeout pattern. In the next example<\/a>, in nested functions and callbacks, this<\/code> loses context:<\/p>\n

class Timer {\n constructor(callback, interval){\n    this.callback = callback;\n    this.interval = interval;\n    this.timerId = 0;\n  }\n  \n executeAndStartTimer(){\n   this<\/strong>.callback().then(function startNewTimer(){\n       this<\/strong>.timerId =  \n       setTimeout(this<\/strong>.executeAndStartTimer, this<\/strong>.interval);\n   });\n }\n    \n start(){\n   if(this.timerId === 0){\n     this.executeAndStartTimer();\n   }\n }<\/pre>\n
 stop(){\n   if(this.timerId !== 0){\n     clearTimeout(this.timerId);\n     this.timerId = 0;\n   }\n }\n}<\/pre>\n
const timer = new Timer(getTodos, 2000);\ntimer.start();<\/pre>\n
function getTodos(){\n  console.log(\"call\");\n  return fetch(\"https:\/\/jsonplaceholder.typicode.com\/todos<\/a>\");\n}<\/pre>\n
this<\/code> loses context when the method is used as an event handler.<\/p>\n
Let\u2019s take the case of a React component that builds a search query. In both methods, used as event handlers, this<\/code> loses context:<\/p>\n
class SearchForm extends React.Component {\n  handleChange(event) {\n    const newQuery = Object.freeze({ text: event.target.value });\n    this<\/strong>.setState(newQuery);\n  }<\/pre>\n
  search() {\n    const newQuery = Object.freeze({ text: this<\/strong>.state.text });\n    if (this<\/strong>.props.onSearch) this<\/strong>.props.onSearch(newQuery);\n  }<\/pre>\n
  render() {\n    return (\n      <form>\n      <input onChange={this.handleChange} value={this.state.text} \/>\n      <button onClick={this.search} type=\"button\">Search<\/button>\n      <\/form>\n    );\n  }\n}<\/pre>\n
There are many solutions for these issues : the bind()<\/code> method, the that\/self pattern, the arrow function.<\/p>\n
For more on how to fix this<\/code> related issue issues, take a look at What to do when \u201cthis\u201d loses context<\/a>.<\/p>\n
this has no encapsulation<\/h3>\n
this<\/code> creates security problems. All members declared on this<\/code> are public.<\/p>\n
class Timer{\n constructor(callback, interval){\n    this.timerId = \"secret\";\n  }\n}<\/pre>\n
const timer = new Timer();\ntimer.timerId; \/\/secret<\/pre>\n
No this, no custom prototypes<\/h3>\n
What if, instead of trying to fix this<\/code> losing context and security problems, we get rid of it all together?<\/p>\n
Removing this<\/code> has a set of implications.<\/p>\n
No this<\/code> basically means no class<\/code>, no function constructor, no new<\/code>, no Object.create()<\/code>.<\/p>\n
Removing this<\/code> means no custom prototypes in general.<\/p>\n
A Better Language<\/h3>\n
JavaScript is both a functional programming language and a prototype-based language. If we get rid of this<\/code>, we are left with JavaScript as a functional programming language. That is even better.<\/p>\n
At the same time, without this<\/code>, JavaScript offers a new, unique way, of doing Object Oriented Programming without classes and inheritance.<\/p>\n
Object Oriented Programming without this<\/h3>\n
The questions is how to build objects without this<\/code>.<\/p>\n
There will be two kind of objects:<\/p>\n