DEV Community

Saurabh Ranjan
Saurabh Ranjan

Posted on β€’ Edited on

4 2

Scarily similar names in javaScript

1 substr and substring

String.prototype.substr(…) the method extracts a specified number of characters in a string, from a start index (avoided when possible).

   let str = 'commonSourceOfTruth';
   // str.length : 19 

substr MDN takes parameters as (from, ?length).

str.substr(1, 10);  // 'ommonSourc'

substring MDN takes parameters as (start, ?end(exclusive)).

str.substring(1, 10);  // 'ommonSour'

😠 if we start from 0 both behave the same.

str.substr(0, 10);  // 'commonSour'
str.substring(0, 10);  // 'commonSour'

Example : Remove first and last character from a given string ❓

str.substr(1, str.length-2) // ommonSourceOfTrut
str.substring(1, str.length-1) // ommonSourceOfTrut as substring takes indices

πŸ’₯ Your turn now. Comment your output below.

str.substring(0, 2) // ?
str.substring(2, 0) // ?

2 array.splice() and arr.slice()

I found an amazing article on these similar methods, and the article covered all the required parts that one should know.So there is no need to write it again πŸ˜‚

My favorite from the above article is:
Example: Remove/add a string and replace/add with the new string ❓

let content = ['post', 'tweet', 'video', 'talk']
content.splice(1, 0, 'dev', 'ten mile')
// content is ['post', 'dev', 'ten mile', 'tweet', 'video', 'talk']

let content = ['post', 'tweet', 'video', 'talk']
content.splice(1, 1, 'dev', 'ten mile')
// content is ["post", "dev", "ten mile", "video", "talk"]

and


let social = ['twitter', 'instagram', 'facebook', 'myspace']
let sliced = social.slice(1,3);
// content is ["instagram", "facebook"]

let social = ['twitter', 'instagram', 'facebook', 'myspace']
let spliced = social.splice(1,3);
// content is  ["instagram", "facebook", "myspace"]

3 .textContent and .innerHTML

// textContent
<div id="targetNode">This is <span>some </span> text</div>

let targetNodeEl = document.querySelector('#targetNode');
let targetNodeElText = targetNodeEl.textContent;

console.log(targetNodeElText) // This is some  text
  • textContent is not parsed as HTML.
  • as it's not parsed XSS can be prevented
// innerHTML
let targetNodeElHtml = targetNodeEl.innerHTML;
console.log(targetNodeElHtml) // This is <span>some </span> text
  • innerHTML is parsed.
  • it won't return hidden elements.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)