r/learnjavascript • u/hsnice • Jul 19 '21

JavaScript Function Facts

Gallery image

Gallery image

Gallery image

Gallery image

Gallery image

255 Upvotes

95% Upvoted

27 comments sorted by

20

u/[deleted] Jul 19 '21

function declarations aren't the only thing that is hoisted, variable declarations with var are also hoisted.

e.g. the following does not work:

console.log('hello', future());
const future = function() { 
   return ' world'; 
}

1

u/hsnice Jul 20 '21

The following code does not work because it is a function expression, not a function declaration.

8

u/senocular Jul 19 '21

All declarations are hoisted. Function declarations are the only declarations that also host their definition though.

7

u/HashFap Jul 20 '21

All declarations are parsed before the code is executed, but you won't be able to access the values stored in let and const until after the declaration line.

3

u/Claudioub16 Jul 19 '21

I'm new to programming, but I really dislike hoisting. Why would you want to hoist a function?

7

u/toastertop Jul 19 '21

Functions called before they are declared, won't throw a undefined error.

3

u/Claudioub16 Jul 19 '21

Since I'm novice allow me to ask this question: wouldn't be a easy fix to just put the function before the call?

7

u/toastertop Jul 19 '21

There's nothing to "fix" per say, as this is what hoisting is doing for you during the compilation stage of execution. Specifically moving function definitions into memory.

However, I'd say it's best practice to declare functions, before calling as it's easier to reason about the code and reads better in a top down approach. But the JavaScript compiler could care less.

1

u/sateeshsai Jul 21 '21

flexibility. i prefer to keep all relevant functions grouped at one place.

3

u/HashFap Jul 20 '21

This gives you more freedom on how you structure your files. You're not forced to declare functions on the top, and instead can have the most relevant code on the top which can make the code easier to read.

1

u/Trakkasure helpful Jul 20 '21

Hoisting functions allow for functions that call each other to do so without procedural gymnastics.

function a() { if (repeat) c() }
function b() { a() }
function c() { b() }

1

u/[deleted] Jul 19 '21

Does using var have a higher cost than using let? Does hoisting have a cost?

2

u/[deleted] Jul 19 '21

the only difference is, that you can't redeclare a let/const variable and that var variable are hoisted to the top. There is no cost.

2

u/[deleted] Jul 19 '21

You can redeclare let. I thought the only difference was scoping.

4

u/[deleted] Jul 19 '21

Reassign, yes, but not redeclare.

 let assignment = 3;
 assignment = true;

 let declaring = function() {}
 let declaring = false; // here will be a redeclaration error

-5

u/[deleted] Jul 19 '21

We’ll that’s not really redeclaration is it? You’re assigning 2 variables with the same name?

1

u/[deleted] Jul 19 '21

well it is. the first declaring would be of type 'function' while the second declaring would be a boolean. you can do that in var :

 var a = function() {};
 typeof a // "function"

 var a = false;
 typeof a // "boolean"

3

u/[deleted] Jul 19 '21

Interesting. Thanks for bringing this up!

2

u/oculus42 Jul 20 '21

The declaration and the value are separate. When hoisted, this code would read something like this:

var a;
var a;
a = function() {};
typeof a; // "function"
a = false;
typeof a; // "boolean"

The two instances of var a are declarations of the variable a, and have nothing to do with the values assigned. The function and false are assignments.

6

u/[deleted] Jul 19 '21

[removed] — view removed comment

5

u/[deleted] Jul 19 '21

I’ll be honest I thought reassigning was redeclaration.

4

u/[deleted] Jul 20 '21

The first fact has an omitted exception: arrow functions. An arrow function without a return statement or curly braces will return the result of the evaluated inline statement.

For example:

const myFunc = (x) => x+2;
console.log(myFunc(1));
// 3

2

u/pxldgn Jul 20 '21

Why are these guys on the pictures vibrating? Are they sick or smtg?

4

u/mulletarian Jul 20 '21

No, they're stink lines

1

u/kiwiL92 Jul 20 '21

Nice thanks