I always get a dopamine hit when I discover a short, bite-sized post that teaches me a new CSS or JS trick. Maybe the zapping culture is to blame for this

Therefore you can imagine the joy I've had when I've discovered til.hashrocket.com. Spend a few hours jumping from one tip to another. Twitter style!

Below are some JS things I did not know about and learned from it:

1. In an arrow function, we don't have access to the arguments object link.

() => {console.log(arguments)}
// will opuput arguments is not defined

However, it seems there is a workaround for this.

2. We have a property to get the name of a function in Javascript link.

const a = function myName() {};
console.log(a.name);
// will oputut myName

3. There is a .stack property on the Javascript errors that allows us to log the stack trace link.

A bit like using the console trace

function firstFunction() { secondFunction(); } 
function secondFunction() { thridFunction(); } 
function thridFunction() { console.log(new Error().stack); } 

firstFunction();

//=> Error 
//  at thridFunction (<anonymous>:2:17) 
//  at secondFunction (<anonymous>:5:5) 
//  at firstFunction (<anonymous>:8:5) 
//  at <anonymous>:10:1

4. There is a paste event, that allows us to manipulate the pasted data in an element link.

For example in a textarea.

const textarea = document.querySelector('#my-textarea');
textarea.addEventListener('paste', (event) => {
    // manipulate date in event
});

There are maybe even more Javascript tricks, so if you have time go check them out on til.hashrocket.com.

I hope you have enjoyed this article and if you would like to get more articles about React and frontend development you can always sign up for my email list.

Newsletter subscribe: