this
. In a traditional function this
is bound to different values depending on the context it is called. With arrow functions, it is bound to the code that contains the arrow function. Because arrow functions also have syntax benefits, as a general rule, use arrow functions unless you need a more traditional treatment of this
(like in an event listener).+
operator:import
statements to break apart and reassemble your code into consumable chunks.import
statements to load parts of an external library you may need for any given component. The code below will give you an example:window
object or the global namespace should be done carefully. window
object pollution can result in collisions with other scripts. We should wrap our scripts in closures and expose methods and properties to window
with caution.this
is actually window
:i
was not exposed to the window
object.innerHTML
method like so:innerHTML
and methods like it can expose your code to cross-site scripting, also known as XSS — the most common security vulnerability in JavaScript. Because these methods evaluate strings passed to them as HTML, they can execute potentially harmful code. For instance, if someContent
in the above example is <img src="fakeImage" onerror="alert( 'hacked!' )" />
, the JavaScript in the onerror
attribute will be executed.textContent
is safer than using innerHTML
because it does not parse strings as HTML — meaning any malicious code passed to it will not be executed. Refer to MDN's documentation on textContent
for more info.document.createElement
method to create new elements and the Element
API to set attributes and append them to the document. Creating your own elements and attributes will ensure that only those you explicitly define will make their way into the DOM.Element
API is the preferred best practice to safely create and add DOM elements. However, it tends to result in much more verbose code compared to HTML-parsing methods like innerHTML
. This can become painful if you need to dynamically create a large number of new elements. In these cases, the convenience of methods like innerHTML
can be extremely tempting.DOMParser
to parse and sanitize HTML strings before adding the HTML to the DOM with a method like innerHTML
. Parsing HTML strings with a DOMParser
will not automatically make the code any safer, but it will allow you to access the elements from the string and strip potentially unsafe tags and attributes before they have a chance to get executed. Refer to MDN's documentation on DOMParser
for more info.innerHTML
. However, no library is perfect, so be aware that you are relying on the security of the sanitizer you choose. Also, remember to consider the effect on performance when deciding whether to add any large library to your project.<body>
for all our events. Well, we want the event to bubble up the DOM as little as possible for performance reasons. This would also be pretty messy code to write.clone()
, each()
, and extend()
. WordPress core uses this library quite a bit.