The Difference between JS Expressions and Statements

When writing JavaScript and especially when using frameworks like React, it is important to understand the difference between statements and expressions so you can understand the error messages that you can get.
Code from video:
gist.github.co...

[@uchennachukwuba]

Only 29 comments? This channel is the most underrated I’ve ever come across. Clear and concise

[@AhmadJubair]

Thanks for the clear-cut explanation, Steve. I've been working with Reactjs for some time but still had a bit of confusion about the differences between these two. Understood now.

[@alisahi8bp10]

After learning fundamentals of JS & ReactJS from John Smilga (Codding Addict). I was looking for someone who can give a deeper dive into the JS concepts.. And Steve fullfilled everything i was looking forward... All i can say is Thankyou for ur service.

[@AlazTetik]

Yet again, great and useful summary!

[@Kurkov12]

This channel has hands down the best explanations

[@Inclusive_Design]

WOW, I guarantee this will decode makes sense of a lot of concepts when working with JS. BRAVO, the way you explain it

[@bapi6060]

Really great explanations!

[@barungh]

When I come to UA-cam, first thing I search for is your new video 🙂

[@shahinza]

Thank you professor.

[@AjayCoding]

great and simple explanation.

[@mehdi-vl5nn]

like many other topics in the world of programming languages, is heavily dependent on the language designers' interpretation of meanings.
Your example:
const getRectArea = function(width, height) {
return width * height;
};
is actually a Function expression in JavaScript, where functions are objects themselves.
Another example can be found in JavaScript's Promises, which are often equated with Futures in other languages but are actually coroutines.
A funny example from the world of Python is that Tasks are actually Futures.

[@SteveGriffith-Prof3ssorSt3v3]

Dart is a good example. They have Futures instead of Promises.

[@s1gma9000]

killer video, u saved me time!!

[@MutalibGozalov]

Awesome explanation, thanks

[@detaaditya6237]

Hi professor, thanks for the explaination!
I want to ask about this part: let x = function(){}. You explained that this is an statement. Are you referring to the whole line or only the `function(){}` part? Because `function(){}` seems to work differently when it is standalone vs when assigned to a variable or parameter of another function. When standalone, it seems like it behaves like a statement. But when it is assigned, it returns the function value - which makes it behave like an expression. Is this true? Please correct me if I'm wrong sir.
Once again, thanks a lot!

[@SteveGriffith-Prof3ssorSt3v3]

the whole line let x = function () { } is a statement.
function ( ) { } is an expression. It is a value that you could put into a variable. If you wrap it in a set of parentheses and put another set after it then it becomes an IIFE Immediately Invoked Function Expression.
you could place function ( ) { } inside a console.log( ) without an error. That's a good indication that it is an expression.

[@igorr4682]

and you can have an expression inside the statement as well. In summary, expressions produce values, while statements perform actions or control the flow of a code

[@SteveGriffith-Prof3ssorSt3v3]

Yes. A statement can contain an expression but not the other way around.

[@traininfobd]

Sir,
if assigning a value like a number is an expression but why assigning a ternary operator is a statement?
var num=343; //Expression
var alive= isAlive?1:0 / statement
chatGPT says these are expression ,
var x = 5; // assignment expression
var y = x + 3; // arithmetic expression
?

[@SteveGriffith-Prof3ssorSt3v3]

The ternary part is an expression. Once you add the var alive = it becomes a statement

[@apex-lazer]

Thank you again!

[@Kai-007u]

If I write like this:
123 ; // semicolon added
Is it true that it becomes expression statement

[@SteveGriffith-Prof3ssorSt3v3]

@Kai-007u it is an expression. It won't do anything but it is an expression.

[@zidan3948]

Is it safe to say that whatever starts with a keyword is a statement?

[@SteveGriffith-Prof3ssorSt3v3]

Almost. Some keywords are values. Eg true false null this.

[@zidan3948]

@@SteveGriffith-Prof3ssorSt3v3 I think I get it now, thanks a lot!!

[@Strasbourgeois]

let f = function(){} is a statement that doesn't start with the keyword function but has a function definition within it. So it is a function expression. Am I right?
Love your videos very much

[@SteveGriffith-Prof3ssorSt3v3]

Yes. That is correct

[@Denis_Victorious]

Actually thanks for your awesome content, but I got a bit confused at this one. Why has been stuff like "let f = function(){}" called a Function Expression (according to MDN docs for example), whereas turns out it's a statement (according to the video)🤔

[@SteveGriffith-Prof3ssorSt3v3]

Here you go:
function bob( ) {
//this is a function declaration which includes a name and starts with the keyword function
//gets hoisted with its identifier `bob`
}
const bob = function ( ) {
//this is a function expression
//which is part of a statement
//`bob` gets hoisted but not the function
}
( function ( ) {
//this is an IIFE
//immediately invoked function expression
//not hoisted
//but run as soon as it is encountered
})( )

[@Denis_Victorious]

@@SteveGriffith-Prof3ssorSt3v3 I've got it eventually, thanks!
Turns out I had false assumption about hoisting. I didn't realize let/const get hoisted too, only they don't get initialized in advance (in comparison with var/funcDeclarations)
P.S.: I've just noticed your reply (due to my off comments notifications)

[@MarstonH]

🔥

[@ВолодимирДжичко]

Thanks ❤

[@Sonu_Kr95]

Thanks

[@Stoney_Eagle]

So basically all I have to think of is "Can I fit this in a jsx return", basically I now never have to think about it again. neat☺

[@chhavimanichoubey9437]

Interview question no doubt

[@SteveGriffith-Prof3ssorSt3v3]

And valuable info for solving a common problem in React.