Hi guys ,i was at the end of the js course and learned about the hoisting , and this is the code in one of the exercises =
var foo = function() {
return "I love Codecademy!"
};
function foo() {
return "why put code here"
}
let phrase = foo();
console.log(phrase);
my question is = why I love Codecademy! is getting logged out , and not put code here .
based on the lesson =
a function declaration can be called from anywhere within the scope as long as it is in fact declared in the code.
var variables are hoisted to the top of function blocks, but not other types of blocks
let and const variables are hoisted to the top of their parent block for scope
function expressions will follow the rules of variable hoisting.
so if it doesn’t matter where to declare a function declration , because it wont get it’s place changed in hoisting and var will be teleported (i dont know what other word to use ), why var is overwriting function declration
i even searched for , if there is any priotrization and the results are =
For what it is worth, function declarations have no real advantage over function expressions. What’s more, function expressions can be protected and persistent for the entire session.
const foo = function (faz) {
return faz
}
const bar = baz => baz;
As for var, one suggests forego its use and stick to let for transient variables (mutable/volatile) and const for persistent, non-mutable variables.
Above both function expressions are largely the same but with some distinct differences. The former has strict syntax in that it requires opening and closing curly braces and an explicit return. The latter has no this property and no arguments property, and cannot be used as a constructor, though that is old hat, anyway, now that we have class objects with their own build in constructor.
Bottom line, focus on the ES6 syntax and take the ES5 syntax into consideration only in passing. Use function () { } when writing multiline code blocks, and arrow functions when writing simple, one line lambdas, such as call backs and helper functions.
thanks for the explanation , but i havent got my answer , why when i use console.log(phrase); my output is I love Codecademy! and not why put code here
Could it be because foo, the variable, is hoisted first? What happens when you reverse the order? It also might be where the two are stored. The variable is in the heap, the function is in the stack. More detail than that I cannot give without digging. Have you followed up on the reading posted by @cassian-goode?
Cannot say. More to the point, do we really need to know why? Is it not enough to witness the behavior and accept it? Don’t use function declarations and this will never come into question.
That’s only chasing after one’s tail once the behavior is known. It is what it is. Accept it. We don’t need to know the inner workings of JavaScript to learn and use the language. Use what works, and not what you want to work, but can’t make it.
and also =
when there is both a function declaration and a function expression with the same name within the same scope, the function declaration takes precedence over the function expression. This means that the function declaration will overwrite the function expression.
so in here make sense =
and also, even if you do = (the reverse)
function foo() {
return "why put code here"
};
var foo = function() {
return "I love Codecademy!"
};
let phrase = foo();
console.log(phrase);
you still get the why put code here as the output , becaus as said =
when there is both a function declaration and a function expression with the same name within the same scope, the function declaration takes precedence over the function expression. This means that the function declaration will overwrite the function expression
The above is a screenshot from the article previously posted.
My (very tentative) understanding is as follows (note this may not be correct - I am still fairly new to coding!):
The function declaration (i.e. the function that returns “why put code here”) is hoisted above the function expression (i.e. the code that returns “I love Codecademy!”).
As it runs, the function declaration is reached first, and then overridden by the assignment of the function expression to the variable ‘foo’, which is reached second.
To me, this seems to be similar to the example in the screenshot where the console logs “1”.
Please let me know if either of you think my understanding is incorrect!
As @mtf said earlier, it seems sensible to stick to let/const unless there is a specific reason to use var - to me, it seems difficult to understand/predict how var will work…