JavaScript Tips and Tricks

Run the Code

• Console at Chrome DevTools

IDE

• Atom Editor with packages
  • atom-runner: run javascript, python, go, bash etc directly in atom
  • atom-ternjs: JavaScript code intelligence

Data Structures

var myMap = new Map();
var array = new Array();

Vargs and spread syntax

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

function func(...args) {
  args.forEach(arg => console.log(arg))
}

Check undefined

• How to set defaults values

if (typeof variableA === "undefined") { variableA = defaultValue}
if(typeof variableA !== "undefined") {}

JavaScript Window Location

• window.location.href/pathname/hostname
• window.location.assign loads a new document
• Set location.pathname and location.search together?
  • Just set the location (or location.href): location = "/abc?name=test";
• Get last part of URI
  • var action = window.location.pathname.split("/").slice(-1)[0];

var urlParams = new URLSearchParams(window.location.search);
urlParams.get('page')

iframe

• Access a variable of iframe from parent
  • var variableA = document.getElementById("iframeid").contentWindow.variableA;

• Remove iframe

  var iframeA = document.getElementById("iframeA");
  iframeA.parentNode.removeChild(iframeA);

CDATA in script tag

• when the doc is parsed as xml: like in blogspot editor.

<script type="text/javascript">
//<![CDATA[
  code_here
//]]>
</script>

createElement

Create a TextNode and add new line

var textNode = document.createTextNode("Node on line 1");
element.appendChild(textNode);

var linebreak = document.createElement('br');
element.appendChild(linebreak);

document.createElement(“script”)

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'helper.js';
head.appendChild(script);

document.write

• write new line

  document.write('line1' ,'<br />' ,'line2');

• write script src tag

  document.write('<script type="text/javascript" src="..."><\/script>');

• How to display document.write in a specific div with specific id?

  document.getElementById('id').innerHTML = "something";

JavaScript that executes after page load

• document.addEventListener("DOMContentLoaded", function(){});
• window.addEventListener("load", function(){});

Create/Read/Delete Cookie

Don’t Use window.onload

window.addEventListener?window.addEventListener("load",yourFunction,false) :
window.attachEvent && window.attachEvent("onload",yourFunction);

Timer

setTimeout(function(){window.location.pathname='/p/archives.html' }, 5000);

Misc

• query string of url

window.location.search
var urlParams = new URLSearchParams(window.location.search);

// check whether the request comes from mobile or not
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

Online Tools

• convert HTML code into document.write()