Today I Learned - Rocky Kev

TIL hoisting based on function declarations & function expressions

POSTED ON:

TAGS: javascript advanced

Function Declaration 

function add (num1, num2) {
	return num1 + num2;
}

tl;dr: You 'declare' it with function.

Function Expression 


let add = function (num1, num2) {
	return num1 + num2;
};

tl;dr: It's expressed as a variable.

Hoisting

When a JavaScript file (or HTML document with JavaScript in it) is loaded, function declarations are hoisted to the top of the code by the browser before any code is executed.

Function Declarations 

/**
 * This works!
 */
function add(num1, num2) {
	return num1 + num2;
}
add(3, 3); // returns 7

/**
 * This does, too!
 */
subtract(7, 4); // returns 3
function subtract(num1, num2) {
	return num1 - num2;
}

Function Expressions 

/**
 * This works!
 */
let add = function(num1, num2) {
	return num1 + num2;
};
add(3, 3); // returns 7


/**
 * This does not =(
 */
substract(7, 4); // returns Uncaught TypeError: subtract is not a function
let subtract = function (num1, num2) {
	return num1 - num2;
};

REFERENCE:
https://gomakethings.com/function-expressions-vs.-function-declarations-revisisted/

Related TILs

Tagged: javascript

TIL what is npm Script

Despite their high usage they are not particularly well optimized and add about 400ms of overhead. In this article we were able to bring that down to ~22ms.

TIL fancy methods to transform Javascript Objects

You can use Object.entries(), Object.keys(), Object.fromEntries()...

TIL how to hide your JS code

ONE THING TO NOTE: Encrypting a script is stronger than obfuscation, both methods are still not adequate to protect secret content. Honestly, I don't think it's worth it on a production site, and instead just go with pure server-side if you want security. But it's fascinating.