Modern JavaScript Tutorial #2 - Syntax Basics & Types

💻 Get the full Modern JavaScript (novice to ninja) course from Udemy. Discount auto applied:
www.thenetninj...
In this modern JavaScript tutorial we'll take a look at the language syntax - comments, semicolons, using variables etc. We'll also discuss some of the types in JavaScript - strings, numbers, null, undefined, & booleans.
----------------------------------------
🐱‍💻 🐱‍💻 Course Links:
+ Course files - github.com/iam...

[@NetNinja]

Get the full Modern JavaScript (novice to ninja) course from Udemy. Discount auto applied: www.udemy.com/modern-javascript-from-novice-to-ninja/?couponCode=NINJAYT

[@jayantsharma2669]

Am unable to take the course bcz i dont have enough money but i want to learn that..... So can u plz help me!

[@younesboukroun3060]

Done

[@saidakhmedagitaev]

@@jayantsharma2669 try FreeCodeCamp at freecodecamp.org, a pretty good platform and self-paced also, there are tons of free courses out there, just explore and search for some happy coding!

[@rebeka1212100]

👏🔥👏

[@mktwatcher]

JavaScript Reserved Keywords List: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords - Mozilla Developer Network Coding Documentation

[@manueljordan317]

An excellent video tutorial for newcomers to the JS world, for the audience the content of this video as follows: Getting Starting with JavaScript: 0:02 JavaScript Data Types: 16:18 Getting starting with strings: 20:38 Common strings methods: 31:02 Getting starting with numbers: 36:16 Template strings: 46:16 Arrays: 52:25 Null & Undefined: 1:01:40 Boolean & Comparison Operators: 1:04:57 Loose && Strict Comparison: 1:14:39 Type Conversion: 1:18:44

[@loveshamie1351]

The way JavaScript is taught here is out of this world. There is no rush, there is no assumption that I know something, everything is explained in detail and no stage is skipped. If only my University taught like this no-one would fail. I am definitely going to do more courses from you on KZbin and on Udemy. Thank you, this is worth all the data and value for money on your paid courses.

[@essangedet9768]

Absolutely

[@crypto_porfolio]

👍

[@jennijenjenful]

Wow, I've been trying to learn Javascript for months and this is the only instructor that teaches you Javascript in a practical way from the start. It's all sinking in now. Thank you! You're amazing!

[@UFO_808]

did you learn it by now?

[@ghuraab]

@envy beats y u asking n?

[@UFO_808]

@@ghuraab just curious

[@halilibrahimyucel1204]

this is the only guy in youtube that makes me watch whole ads.

[@ardeleanion4435]

Ads?? Are you kidding, right?

[@albrtinoaugusto]

Me 2

[@Dexter101x]

Really? Since why? The guy is good

[@GaithTalahmeh]

@@ardeleanion4435 Ads are the biggest source of income for youtubers, so by watching ads, you're supporting them

[@TheGreatFapsby]

wah wah

[@LewisVine]

I'm a developer, and a big believer on mastering the basics. I've learned something everytime I've watched Net Ninja's videos. Even the intro series. Always learning!

[@samueltabe2701]

I want to say a big thank you. Your laravel KZbin course started me on Laravel in 2020, I'm currently a laravel developer and have done some cold projects. I started learning react April this year (2022) via some of your courses, currently I have done some projects with react js, currently working on one with Next js. You are an exceptional teacher, please keep up the great work. Much love and respect. ❤️❤️

[@NetNinja]

Your comment means a lot to me, thank you Samuel :)

[@corv2731]

I'm just now seeing this, 3 years after you published it, and i've got to say, this is one of the best-formatted courses for coding I've ever seen. I am a python programmer who learned on Udemy with Angela Yu's course, but she doesn't have a dedicated JS course. I found yours instead, and many of the things I loved about her course, I'm finding them in your course as well. You explain things very thoroughly; most, like literally 99% of coding courses on KZbin are comprised entirely of just watching someone code, and they don't actually explain in detail what they're doing, what they're using etc. It's just meant for us to follow along, but that isn't real learning. Your course is very well done. Great job!

[@NetNinja]

Thank you so much for the kind words Corv :) happy to hear that you enjoyed it!

[@stangurule1017]

This may sound trivial but it's refreshing to see a dev using something other than a Mac!

[@vincentarlou1599]

windows sucks, unix rules

[@exc3lmazing931]

@@vincentarlou1599 Whats unix?, must be bad since i don't know what it is

[@Mersal-uj5nh]

@@exc3lmazing931 linux

[@aksh102]

Real devs use Linux.

[@mskyba]

@@Mersal-uj5nh MacOS is also Unix

[@BokusFRD]

Oh man…. A friend recommended you for javascript. This is first time ever when i wanna see all tutorials, your explaining style is awesome and we can really understand and learn better. I’m regretting only that i disn’t discovered you early to learn, but as they say… ‘better later than never’. Thank you for your effort and bless you for helping others to learn javascript. Peace ✌🏻

[@jensv8859]

dude your teaching is from another universe. well done. thanks so much!

[@NetNinja]

Thanks for the kind words jensv :)

[@thelexa1392]

After 2 years learing i start working and this chage my life bsc you Thanks!

[@makiet]

I love your course. I bought it on Udemy but still came here because KZbin let me speed up video playback so I could learn faster, thanks to your easy understandable explanation and nice accent.

[@izanagi2648]

I love how you teach step by step without rushing anything. Keep doing what you do and more power to you!

[@NetNinja]

Appreciate that :) thank you!

[@anoniem4022]

Wow, you can explain it clearly but also quickly. I know the basic principles of Js, but through your video it reinforces the basis even more. you really are a good teacher

[@willwill1738]

A really JS beginner course; and the lecturer is so helpful to hold your hands step by step, and explain in details. Absolutely gorgeous!!!

[@mrnobody1321]

I don't usually use semicolons, and I thought they were never needed. But it's important to add them if you're writing a regular expression let a = /hello/; or you'd run into errors. Thanks for the advice.

[@zyrexd7398]

First time I watched whole topic tutorials on youtube.. Just finished NodeJs crash course and gonna finish this topic too. Personal advice to those who already know the basics of Javascript but still want to learn more, just change the playback speed to 1.75x :), you'll save time. Definitely an A+ web dev tutorial channel on youtube!

[@dylanm7638]

this is awesome, I read some books about fundamental, they were strong but quite outdated, but watching these tutorials helps to up to date the knowledge what I have got from those books , thank you so much

[@Fonsecamvp]

Excellent course! Just a kind reminder: if anyone else encounters the same issue I had, where (the console doesn't run the JavaScript,) make sure to link the JavaScript file (sandbox.js) in your index.html like this: .

[@jakobo5521]

This is probably one of the best and well-explained course of JS. Really appreciate your time for creating this. Cheers!

[@bukobro5253]

bro how did he linked the code (2.42)

[@i.mfaisalkhan]

Love the way you defining each topic in-depth in an easiest way. Thanks Man

[@Etheriiss]

It's good reminder for someone who knows the basics, great :D

[@no_one7271]

Thank you so much TheNetNinja. You are a savior, I am actually a first year college student, doing Information Technology Engineering and i have seen so many sources on net, but yours was the best that I came by. Thank You once again, your explanations are beautiful!

[@SwahiliSpicE]

I'm not surprised at all that this channel has blown up! I learned HTML here about 7/8 years ago when this channel first started and once I found NetNinja, I stopped looking (because as they say, when you find the one, you just know! 😌). I'm not a techie (rather an accountant) but do like having a varied skillset which has really helped me in life. And even in accounting, having learned coding has really helped with my excel skills. Unlike my colleagues, I use excel like a programming language and when people see me write formulae to completely automate a workbook, they are super impressed but it's no different to programming. Anywho, I'm back as I've got a side project going on which needs js and boy am I glad there's a plethora of content to get stuck into! Thanks ever so much for your relentless excellence 💟🙂

[@NetNinja]

Thank you for such a lovely comment :)

[@mr_santaclauss2840]

Hi Man, I watched your videos for my Senior project when I was still an IT college student, till now I have a chance to do the frontent job again, and your videos are still super helpful even for career .

[@NetNinja]

That's awesome to hear :) thanks for your support over the years!

[@freddyprotech5099]

Simple and easy to understand. The latest syntax of JavaScript is all here

[@activex7327]

It's BEDMAS, E for exponents. Subtraction, addition is any order they appear, same for division, multiplication.

[@rafatmuizmahmud2698]

It feels like I just completed my graduation when the video is finished.

[@veselinradosavljevic8156]

If a ever became a developer large part it would be because of you and your tutorials ,tnx m8!

[@oviyan404]

Wow! Simple and easy to understand, I learned a lot . Thank you!

[@joeygarner1636]

One of your strengths as an instructor is that you usually explain the "why" in a lot of the details of what you're doing. This is very helpful for beginners. However, in this video there's a lot of things going on and a lot of things I just don't understand the purpose; all these bits of code you're making and how it would be applied in context. In other words, what's the story? If someone was writing these lines of code, what would it be for? For instance, why would a coder want to change a variable they already set? Is it the coder changing the variable or does this allow the user to change the variable...

[@rayankhan12]

This is brilliant as f**k!!! I tried many things such as watching other tutorials and eBooks but couldn't for the life of me understand what was going on. After watching this video for 16 mins, JS seems to be easy and fun! Plus, it's very nice to have such a brilliant teacher and is very kind of you to make it available for free especially for those who can't afford other expensive courses. Thank you so much!!! 😊😉😃

[@0the0ambient0]

This is an excellent overview. I want to check out the Udemy Course.

[@Me-kt3gh]

🎯 Key Takeaways for quick navigation: 00:01 💻 *Setting up VS Code, live server, and adding JavaScript in HTML.* 02:17 📄 *Externalizing JavaScript, enhancing organization.* 04:07 🧊 *Semicolons in JavaScript: Good practice for statement termination.* 05:16 🛠️ *Browser Developer Tools: Overview and console usage.* 07:46 📚 *JavaScript basics: Variables and Constants.* 10:19 🚫 *Avoiding VAR: Prefer let and const in modern JS.* 13:11 🔤 *Naming conventions for variables, emphasizing clarity.* 15:43 📝 *Introduction to comments in JavaScript for documentation.* 16:24 🌐 *Browser compatibility and modern JS features.* 18:12 🧱 *JavaScript data types overview.* 18:23 🧩 *Strings: Properties, methods, and manipulation.* 31:18 🔍 *More String Methods: lastIndexOf, slice, substring.* 36:20 🔢 *Numbers in JavaScript: Variables, constants, and calculations.* 37:27 🧮 *Math Operations: Common operations and examples.* 39:44 📊 *Order of Operations and Shorthand Notation.* 43:59 ❌ *NaN Handling and Concatenation of Numbers with Strings.* 46:24 🖋 *Template Strings: Readability and simplicity.* 50:49 🏗️ *Creating HTML Templates with Template Strings.* 52:36 📊 *Introduction to Arrays: Creation and manipulation.* 55:06 🧾 *Arrays with Mixed Data Types and Properties.* 56:38 📊 *Array Methods: join, indexOf, concat, push, pop.* 01:01:42 📄 *Null and Undefined: Differences and use cases.* 01:05:06 🔒 *Booleans and Comparison Operators.* 01:14:41 🔄 *Loose Equality: Understanding double equals (`==`).* 01:15:24 🔄 *Type Conversion: Loose vs. strict equality.* 01:18:49 🔄 *Type Conversion: Number to String, String to Number.* 01:19:03 🔄 *Type Conversion: Number to Boolean, understanding conversions.* Made with HARPA AI

[@mydev8669]

Very clear basic course, very useful.

[@user-fy1es4fn2e]

Nice

[@jimdart8219]

The best thing about Learning from the Net Ninja is he does not waste my time going over old and/or out dated methods of using JS. So many instructors will spend hours on how to use JS then say but this not how it should be done, and then spend a few minutes showing us the correct way. A little history is important so I recognize old code when I see it. To make a long story short, Shaun I'll spend the next hour going through this tutorial and then I'm pretty sure I'll head over and purchase your full course. Thank you for being different. ps. I use Chrome Dev Tools, but I find Firefox Developer Edition dev tools a lot more helpful.

[@talkingwilliams5363]

😂😂😂

[@lacksinho]

they want to confuse you 😀😀

[@renithanagasri3204]

omg i just love ya man! i'm broke as hell but imma definitely buy this udemy course and btw thank you soooo much for not making it soooo costly!

[@NetNinja]

Thanks for watching and for your support Renitha :) much appreciated!

[@iqaznili]

@23:24 that moment when the name of your favorite author is logged into the console. Epic!

[@yinonb172]

Best JavaScript Tutorial, I bought the full course and it is excellent ! , Arrigato Net Ninja San !

[@CM-hj4rt]

This guys courses are mind blowing.. dude is too good🙌

[@TheNerdyDev]

One package also that is very good for teaching Javascript and visualisation of data in the variables is Quokka.js . Also a must try .

[@henokhailu6625]

Hello Ninja. I am enticed the way you lecture. Would you please video on asynchronous java script?

[@xiaoyuli6008]

Thanks so much for this amazing tutorial.

[@albertoarielarce2982]

I learn a lot with you I am very grateful to be able to see your videos, you are the best

[@csl9495]

Wow this is the best explaination of this I've come across. Others explaination sort of go over my head

[@englishisclearnow4293]

You are the king of Ninjas .

[@michellehowell1569]

Hello Ninja, I have just started learning JS, I have followed everything you have said(great F12), but unable to get the console.log to show the variables. Great work and hoping to sign up on Udemy. keep up the great work, many thanks, so helpfully.

[@hussainalimohammady3086]

You are wonderful, the way you explain, teach and so on. Everything is just amazing. I learn very easily with your course. Thank you

[@NetNinja]

Thank you :)

[@user-fy1es4fn2e]

@@NetNinja Good

[@manueljordan317]

About the slice method, for the second argument mentioned at 33:07 it is "not inclusive" Therefore: [start, end[ , it is shown in the doc at 33:05 (it appears quickly)

[@royalflush13]

Wow. It's no surprise your course is rated a whopping 4.9 on Udemy! The highest I have seen for any course that has more than 100 ratings.

[@NetNinja]

Thanks, personally I think it should be 5 but I can't please everyone, haha! Glad you like it!

[@royalflush13]

@@NetNinja I think the issue is in the way udemy labels the ratings. 5 star is for "above expectations". This should be labeled as "as expected" or something along those lines

[@azurtle]

Just a little confirmation for those new to javascript (in case it wasn't clear): the slice (33:10) method outputs in a way that the first index given is *INCLUSIVE* and second index is *EXCLUSIVE* at (1:13), the reason why lower case is greater than upper case is because lower case has a higher value on the *ASCII* table **this is based off what I know in case it wasn't clear but if I'm wrong feel free to correct me**

[@bukobro5253]

bro how did he linked the code (2.42)

[@azurtle]

@@bukobro5253 are you talking about linking the javascript code to the html? You need to add a script tag (shaun recommends putting it in the body tag) So you'd need , you can find he did it at 3:05

[@charlie4424]

@@azurtle as a 7 brain cell human being that was bugging the absolute shit out of me!, thank you!

[@DeboraWayne]

Thank you so much for this video. You really helped me a lot.

[@ahmadirfan7840]

I already have the JS foundation and it is good material as a refresher.

[@BRplayzz]

why is there a danger eror and says ''The value "" for key "width" is invalid, and has been ignored'' does someone know how to solve this problem.

[@simonbates9454]

Amazing explanations great for new comers.

[@arijitdas490]

One of the best explanations available on this platform.

[@zathegreat14]

You are the best, really really understandable

[@NetNinja]

Thanks Stanley :) much appreciated!

[@TrixyJ]

Absolutely amazing. I learnt a lot. 😎👏

[@dimasmfth]

Not just great at teaching, you are also funny Shaun. I love you Sensei.

[@mktwatcher]

JavaScript Reserved Keywords: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords - Mozillza Developer Network Language Documentation

[@hamidr8391]

Thank you very much. Your toturials are life saving.

[@titustech7219]

this video is giving me the idea to make a password encrypter thing because i have done it with the other languages i have learned why not JavaScript lol

[@ericmomoh7927]

In php it is password = mD5(password )

[@vivinkaarthic2330]

u are a good teacher man

[@musabali226]

When I open the developers console, the code from visual studio isnt showing up. What should i do?

[@anarchyofsweden]

This is so exiting I Love your tutorials!! 🌸🌸🌸 Looking forward to look at the more complex stuff but I’ll start from the begining 😛😛😛 Thanks, I know you have a reason for calling yourselfe ninja, because you are a true ninja!! Helped me of alot 😇😀😛😘🌸🌿

[@Da3dalus1]

Thanks ninja, I will comeback with my comment once I become a developer.

[@tomisinergy4963]

I made 8 pages of notes in my book, 3 breaks and one launch break in 6h of learning in this 124 min video lesson

[@rahultv97]

can you post them online please

[@prateekpanta6983]

One thing, while comparing string value with “” comparison operators I believe it checks the Unicode value of the first letter of the string right? Since Capitol letters comes before lowercase letters in Unicode that’s why “Shaun” < “shaun” is true, right?

[@mikedavies3475]

With respect to the SLICE method, the first parameter is position from and the second parameter is position to. So for the first 5 characters, it is SLICE(0,5). However as the array is zero based, intuitively shouldn't it be SLICE(0,4) for consistency, 4 being the index of the 5th character, not 5 in a zero-based array. I'm sure there's a reason for this, but this threw me a bit at first, so I thought I'd just mention!

[@somnvm37]

49:05 There're two types of keyboards, US and UK keyboard (you can check it in the language panel) For me ` is placed one button left to the 1. It is like ~, but without SHIFT held. So, I have only shitf below my enter key. That is the thing.

[@MrIshumaru]

Love the Sanderson reference.

[@mahmoudalsayed3041]

Idk why I burst into tears when he replaced the "n" with a "w" and it became thewetninja hahahaha

[@kosivickosi3704]

Pls can you also put a $ sign in that likes for example //likes -=5 SO can you add your own $sign if we are to remove the like sir?

[@anitajelic9210]

Hi Ninja, I am interested in the full course on Udemy, is there any possible discount for us in 2022? Thanks !

[@AnNguyen-jf2cj]

Imma obsessed with the background color soon T.T

[@nononnomonohjghdgdshrsrhsjgd]

My console in vs code shows: [Extension Host] Change detected, when I save a console.log(1). I am using Firefox. What is the reason for [Extension Host] Change detected? How can I see the result "1" in console? Thank you for the reply!

[@lukeskinner2027]

Extremely good tutorial.

[@terrywright8114]

Sorry but I cannot see the console output!! I am running Code on linux (Ubuntu) with Live Server installed. I can open index.html with the live server and chrome responds as expected. But despite opening a console using F12. I cannot see any data output to the console! I can invoke alert('Hello') from the console, which works fine, but using console.log(10) does not work! Any helpful clues as to why would help. Thanks

[@terrywright8114]

Found the issue, silly me, the script tag was wrong! I had src='sandbox.js" instead of

[@mohgawsih6958]

great teaching style . . . .

[@DigitalMonsters]

Heard of BODMAS (over) and PEMDAS (parentheses, exponents) but never "BIDMAS" xD

[@hakimled4300]

fff

[@mohammadmursalin6412]

guys buy his udemy course of javascript, it is just awesomeeeeeeee...........................

[@saimasim3802]

I am getting this error Unchecked runtime.lastError: The message port closed before a response was received.

[@qwerty123246]

great work man, thank you!

[@afghanvideos1490]

i just wanna say thank you love you the ninja sir

[@llamad3381]

Note: Start here tomorrow at 44:50

[@3b0x54]

Just bought the course，expecting more excellent courses!

[@skirllexrude8170]

Ninja I had a doubt,I saw some eslint tutorial on that everyone are installed eslint plug-in from vs code extension and then why are they installing it again in npm like npm install eslint.whats the purpose of installing it again if I had already installed it via vscode plug-in

[@dotamovie1033]

learning during pandemic :) js is getting interesting to me.

[@chiranjitdey1430]

same here :)

[@dotamovie1033]

@@chiranjitdey1430 what are you watching now? i'm watching objects.

[@ukaszpospiech3817]

I wish you could use dark background for preview index page and console. It's blinding me each time you switch the view from VSCode (dark background) to white page and console.

[@ancarada2916]

hi, I have a question. If we have the script with only window.alert call at the bottom of body, why any of the HTML elements placed before the script, are not showing while the alert is on screen?

[@khangaroo6504]

You really are a blessing.

[@rajesh51573]

You are amazing shaun!! Thank you

[@JimmyZ0]

I am trying to follow up your tutorials on a iPad Pro, lol

[@ergie23]

it would be great if we had some test at end of video, to test our knowledge and see do if we make progress :)

[@sh1pme2themune9]

"var" defines GLOBAL variables or variables that are accessible throughout the program; "let" allows you to LIMIT THE SCOPE to a block of code for what would otherwise be the same kind of variable as a "var."

[@BaronSamedi77]

No. THE PLACE where you define the variable is actually setting the scope - if you define the variable WITHIN the function, its scope is function. If you set it on the BEGINNING of the page (ok, anywhere where parent element is document, but on the beginning is standard), then it is GLOBAL. VAR is an old form of declaring variables. It's issue was 'leakage' - change of original variable WITHIN the scope of the function. BVB, (";"will put here in declarations, without it is RESULT (instead console.log): var x = 99; x = 99 x = 99 If you would change the variable WITHIN localScale, there would be 'leakage' back to globalScale: var x = 99; x = 100 x = 100 **** Now, that WAS solved with AGAIN DECLARING variable WITHIN localScale: var x = 99 var x = 100 x = 99 As the function is CREATED to be separate system that makes certain function and that function only (good parallel is central heating system - uses water and gas to "return" (pun intended) heat to your house through complex machinery (function "tools"); you DON'T want leakage here), devs needed to fix that. So they developed CONST and LET to prevent/assign possibility to change variable and fixed the function scope so it does not leak anymore. As you can see, var vs const/let does have just SOME touching points with scope, but it is not ABOUT the scope.

[@davidson7838]

Hi Sir, can you make a new series on Reactjs with recent updates? Thank you.

[@tagi8988]

Could you please explain the operation at 38:28??? I did not understand, why it is 1... you divide 10 with 3 and you say "it gives us the remainder"... i did not understand that

[@tagi8988]

got it...

[@Walleons]

Quite resourceful

[@adoptedbybitcoin]

Great Amazing info, THANK YOU! Btw Brave Browser is awesome as well