JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour

00:48:17
https://www.youtube.com/watch?v=W6NZfCO5SIk

概要

TLDRThis video introduces JavaScript by answering four frequently asked questions. JavaScript is one of the most popular programming languages, used for building everything from interactive web pages to full-blown mobile apps. Unlike earlier, when it was considered a "toy language" due to its browser-only execution, JavaScript can now run on servers thanks to Node.js and has become integral for both frontend and backend development in companies like Netflix and PayPal. Additionally, the distinction between JavaScript and ECMAScript is clarified—JavaScript is an implementation of the ECMAScript specification.

収穫

  • ✨ JavaScript is a versatile programming language essential for web development.
  • 📈 It is rapidly growing and highly sought after in the tech industry.
  • 🌐 Initially browser-only, JavaScript now runs server-side via Node.js.
  • 🏢 Used by major companies like Netflix and PayPal for complete applications.
  • 🛠 ECMAScript is the standard that JavaScript builds upon.
  • 📝 A JavaScript developer can expect competitive salaries, making it a lucrative career choice.
  • 🎨 JavaScript can now be used to build not just web pages but also mobile apps, games, and more.
  • 👨‍💻 Besides browsers, JavaScript code can run in Node.js environments effectively.
  • 📚 Learning JavaScript opens opportunities in both frontend and backend development.
  • ⚙️ JavaScript engines like V8 and SpiderMonkey power code execution in browsers.

タイムライン

  • 00:00:00 - 00:05:00

    The introduction begins by posing four common questions about JavaScript: its definition, capabilities, execution environment, and the difference between JavaScript and ECMAScript. JavaScript is highlighted as a popular language, extensively used by big companies like Netflix for app development. The average salary for a JavaScript developer is noted as an attraction for learning the language.

  • 00:05:00 - 00:10:00

    JavaScript is not just a "toy language" but is now capable of building comprehensive web, mobile apps, and tools like real-time networking apps or games. This expansion has been driven by support from large companies such as Facebook and Google. Originally, JavaScript was executed only in browsers, each having its JavaScript engine like SpiderMonkey for Firefox.

  • 00:10:00 - 00:15:00

    The paradigm shifted in 2009 when Ryan Dahl embedded Chrome's V8 engine into a C++ program named Node.js, allowing JavaScript execution outside browsers. This development enables JavaScript to build backends for web and mobile apps. JavaScript can now run in both browsers and Node.js environments, providing greater flexibility to developers.

  • 00:15:00 - 00:20:00

    ECMAScript is explained as a specification that JavaScript follows. Managed by an organization named ECMA, they ensure standards. The document outlines how ECMAScript got its first specification in 1997 and has seen annual updates since 2015, with ECMAScript 2015 (ES6) introducing many new features that are now part of JavaScript.

  • 00:20:00 - 00:25:00

    The tutorial introduces hands-on experimentation with JavaScript in browsers using developer tools but emphasizes that real-world coding is done in editors like Visual Studio Code. Viewers are instructed to download necessary tools to begin coding in an organized environment.

  • 00:25:00 - 00:30:00

    The importance of setting up a coding environment is stressed. Participants are guided through creating folders and files, using HTML for JavaScript demonstrations, and setting up a live server for testing purposes. The setup prepares them to write and test their JavaScript code in a structured manner.

  • 00:30:00 - 00:35:00

    The tutorial delves into JavaScript's script element location in HTML for optimal performance, explaining that placing scripts at the end of the body ensures pages load quickly and correctly. Practical examples show how to separate JavaScript code from HTML to support organized and maintainable code architecture.

  • 00:35:00 - 00:40:00

    The concept of variables and constants in JavaScript is explored. Variables are illustrated as storage for data, with practices for naming conventions shared. Constants are introduced as immutable storage, critical for values that should not change, illustrated with interest rate examples.

  • 00:40:00 - 00:48:17

    The lecture transitions into understanding JavaScript's data types, distinguishing between primitives (strings, numbers, booleans, undefined, null) and reference types (objects, arrays). Special attention is given to the dynamic nature of JavaScript, where variable types can change at runtime, showcasing this through various type assignments and operations.

もっと見る

マインドマップ

Mind Map

よくある質問

  • What is JavaScript?

    JavaScript is a popular and widely-used programming language that powers the web.

  • What can JavaScript be used for?

    JavaScript can be used to create dynamic web pages, mobile apps, games, and real-time applications.

  • Where does JavaScript code run?

    JavaScript runs in web browsers with engines like V8 in Chrome or via Node.js for server-side execution.

  • What is the difference between JavaScript and ECMAScript?

    ECMAScript is the specification that JavaScript implements. JavaScript is a conformance to this spec.

  • How has JavaScript's executing environment evolved?

    It utilizes engines like V8 and can execute JavaScript outside browsers using Node.js.

ビデオをもっと見る

AIを活用したYouTubeの無料動画要約に即アクセス！
字幕
en
オートスクロール:
  • 00:00:01
    In this 3-minute introduction, I'm going to answer four frequently asked questions
  • 00:00:06
    about JavaScript. What is JavaScript, what can you do with
  • 00:00:10
    it, where does JavaScript code run and what is the difference between
  • 00:00:14
    JavaScript and ECMAScript. So let's start with the first question. What is
  • 00:00:19
    JavaScript? JavaScript is one of the most popular and widely used programming
  • 00:00:24
    languages in the world right now. It's growing faster than any other
  • 00:00:28
    programming languages and big companies like Netflix, Walmart, and PayPal build
  • 00:00:34
    entire applications around JavaScript. And here's the average salary of a
  • 00:00:38
    JavaScript developer in the United States. That is $72,000 a year. So
  • 00:00:44
    it's a great opportunity to get a good job out of learning JavaScript. You can
  • 00:00:48
    work as a front-end developer or a back-end developer or a full stack
  • 00:00:53
    developer who knows both the front end and the back end. Now, the second question.
  • 00:00:57
    What can you do with JavaScript? For a long time,
  • 00:01:01
    javascript was only used in browsers to build interactive web pages some
  • 00:01:06
    developers refer to javascript as a toy language but those days are gone because
  • 00:01:11
    of huge community support and investments by large companies like
  • 00:01:15
    Facebook and Google these days you can build full-blown web or mobile apps as
  • 00:01:20
    well as real time networking applications like chats and video
  • 00:01:24
    streaming services command-line tools or even games here's an example a third
  • 00:01:31
    question where does JavaScript code run javascript was originally designed to
  • 00:01:36
    run only in browsers so every browser has what we call a JavaScript engine
  • 00:01:41
    that can execute JavaScript code for example the JavaScript engines in
  • 00:01:46
    firefox and chrome are SpiderMonkey and v8 in 2009 a very clever engineer called
  • 00:01:53
    Ryan Dahl took the open-source JavaScript engine in chrome and embedded
  • 00:01:59
    it inside a C++ program he called that program node the node is a C++ program
  • 00:02:05
    that includes Google's v8 JavaScript engine now with this we can run
  • 00:02:12
    JavaScript code out of a browser so we can pass our
  • 00:02:15
    JavaScript code to node for execution and this means with JavaScript we can
  • 00:02:20
    build the backend for our web and mobile applications so in a nutshell JavaScript
  • 00:02:26
    code can be run inside of a browser or in node browsers and node provide a
  • 00:02:31
    runtime environment for our JavaScript code and finally the last question what
  • 00:02:37
    is the difference between JavaScript and Eggman script well ECMO script is just a
  • 00:02:42
    specification javascript is a programming language that confirms to
  • 00:02:46
    this specification so we have this organization called a comma which is
  • 00:02:51
    responsible for defining standards they take care of this Eggman script
  • 00:02:55
    specification the first version of Eggman script was released in 1997 then
  • 00:03:01
    starting from 2015 ACMA has been working on annual releases
  • 00:03:06
    of a newest specification so in 2015 they released a kimono script 2015 which
  • 00:03:12
    is also called ECMO script version 6 or es6 for short this specification defined
  • 00:03:18
    many new features for JavaScript alright enough theory
  • 00:03:22
    let's see javascript in action so every browser has a JavaScript engine and we
  • 00:03:27
    can easily write JavaScript code here without any additional tools of course
  • 00:03:31
    this is not how we build real-world applications but this is just for a
  • 00:03:35
    quick demo so open up Chrome right click on an empty area and go to inspect now
  • 00:03:42
    this opens up chrome developer tools here select the console tab this is our
  • 00:03:47
    JavaScript console and we can write any valid JavaScript code here so type this
  • 00:03:52
    console dot log put a single code here and then hello world another single code
  • 00:04:01
    to terminate close the parentheses and add a semicolon at the end now as you go
  • 00:04:08
    through the course you're going to understand exactly what all this means
  • 00:04:11
    for now don't worry about it so now I'll press ENTER and you can see the hello
  • 00:04:15
    world message on the console we can also write mathematical expressions here for
  • 00:04:20
    example two plus two we get four or we can do something like this alert
  • 00:04:26
    practices single coat yo enter and here's an alert in the next lecture I'm
  • 00:04:33
    going to talk about setting up your development environment for writing
  • 00:04:37
    JavaScript code
  • 00:04:43
    in order to write javascript code you need a code editor there are various
  • 00:04:48
    code editors out there including Visual Studio code or yes code sublime text
  • 00:04:53
    atom and so on out of these my favorite is Visual
  • 00:04:57
    Studio code that you can download from code that Visual Studio comm it's a very
  • 00:05:02
    simple lightweight cross-platform and powerful editor so if you don't have
  • 00:05:07
    Visual Studio code on your machine go ahead and download it the other thing I
  • 00:05:12
    wanted to install is note you can download note from nodejs
  • 00:05:16
    org now technically you don't necessarily need know to execute
  • 00:05:21
    JavaScript because as I explained before you can execute JavaScript code inside
  • 00:05:25
    of a browser or EndNote but it's good to have node on your machine because we use
  • 00:05:30
    that to install third-party libraries and also later in this section I'm going
  • 00:05:35
    to show you a preview of node so pause the video now and download Visual Studio
  • 00:05:40
    code as well as note once you're done come back continue watching
  • 00:05:48
    to create a new folder call that J s dash basics the name doesn't really
  • 00:05:55
    matter we just want to have a folder for writing all the code in this course now
  • 00:06:00
    drag and drop this folder into visual studio code okay we've got this folder
  • 00:06:07
    open let's add a new file here index dot HTML now you don't really need to know
  • 00:06:15
    HTML in order to take this course but if you want to be a front-end developer you
  • 00:06:19
    should know your HTML well now in this file I want you to type an exclamation
  • 00:06:24
    mark and then press tab this generates some basic HTML boilerplate we don't
  • 00:06:30
    really care about any of this code here we're gonna use this as a host for our
  • 00:06:34
    JavaScript code you're gonna see that in the next lecture so save the changes now
  • 00:06:40
    open the extensions tab here here in this box search for live server
  • 00:06:49
    so live server is a very lightweight web server that we're going to use to serve
  • 00:06:55
    our web application so install this then you will have to restart Visual Studio
  • 00:07:01
    code when you're done go to the Explorer tab right click index.html and select
  • 00:07:09
    open with live server
  • 00:07:13
    this will open up Chrome or your default browser and point it to this address
  • 00:07:18
    that's where our web application is served from now currently we have an
  • 00:07:23
    empty page now to make sure that everything is working properly let's go
  • 00:07:27
    back to visual studio code here in the body section let's add an h1 press tab
  • 00:07:34
    and type hello world now save the changes back in the browser we can see
  • 00:07:41
    this page is refreshed automatically and we've got the hello world heading here
  • 00:07:45
    in the next lecture you're going to write your first JavaScript code
  • 00:07:55
    all right now we're ready to write our first Java Script code in order to write
  • 00:08:00
    JavaScript code here we need a script element there are two places where we
  • 00:08:05
    can add a script element we can add it here in a head section or in the body
  • 00:08:11
    section the best practice is to put the script element at the end of the body
  • 00:08:17
    section after all the existing elements so here after h1 I'm gonna type script
  • 00:08:24
    and press tab this is our script element now why did I say that as a best
  • 00:08:30
    practice you should put this script element here well there are two reasons
  • 00:08:34
    for that one reason is that the browser parses this file from top to bottom so
  • 00:08:40
    if you put this script element here in the head section you might have a lot of
  • 00:08:46
    JavaScript code there so your browser may get busy parsing and executing that
  • 00:08:51
    JavaScript code and it won't be able to render the content of the page so this
  • 00:08:57
    will create a bad user experience your user looks at your web page it's white
  • 00:09:01
    or blank while your browser is busy parsing and executing your JavaScript
  • 00:09:06
    code so that's reason 1 the second reason is that almost always the code
  • 00:09:12
    that we have in between script elements needs to talk to the elements on this
  • 00:09:18
    web page for example we may want to show or hide some elements so by adding the
  • 00:09:23
    code here at the end of the body section we'll be confident that all these
  • 00:09:28
    elements are rendered by the browser now there are exceptions to this rule
  • 00:09:33
    sometimes you're using third-party code that has to be placed in the head
  • 00:09:37
    section but these are exceptions as I told you before as a best practice you
  • 00:09:42
    should add your JavaScript code at the end of the body section now here we're
  • 00:09:47
    gonna write the same code that you wrote in the last lecture console dot log
  • 00:09:52
    hello world but we're going to talk about this in a little bit more detail
  • 00:09:58
    what we have here is a statement a statement is a piece of code that
  • 00:10:04
    expresses an action to be carried out in this case we want to log
  • 00:10:09
    a message on the console all statements in JavaScript should be terminated by a
  • 00:10:15
    semicolon what we have here in between single codes is called
  • 00:10:20
    a string a string is a sequence of characters now in JavaScript we also
  • 00:10:26
    have this notation we can add two slashes and this represents a comet so
  • 00:10:34
    here we can add some description to our code and this description is ignored by
  • 00:10:38
    the JavaScript engine it's not executed it's purely for documenting the code
  • 00:10:43
    when you wanna explain to other developers why you have written this
  • 00:10:47
    code this way you don't explain what the code does because that should be clear
  • 00:10:52
    in the code itself so here I don't want to write something like logging
  • 00:10:55
    something on the console that's so obvious in the code right instead we
  • 00:11:00
    want to explain why's and a house so for this demo I'm just gonna add a simple
  • 00:11:05
    comment this is my first JavaScript code now save the changes back in the browser
  • 00:11:14
    we need to bring the console back up so right click somewhere and go to inspect
  • 00:11:20
    or alternatively you can use a shortcut that is alt command an eye on Mac or alt
  • 00:11:27
    control eye on windows that brings up the console tab if the console tab is
  • 00:11:32
    not immediately visible make sure to select it here and here you can see the
  • 00:11:36
    hello world message
  • 00:11:44
    now while we can easily write javascript code in between the script element in a
  • 00:11:49
    real-world application you have thousands or even millions of code we
  • 00:11:53
    don't want to write all that code in line here we want to extract and
  • 00:11:57
    separate our JavaScript code from our HTML code let me give you a metaphor
  • 00:12:02
    think of your house in your bedroom you have your bed and your clothes you don't
  • 00:12:07
    store your clothes in the kitchen this is what we call separation of concerns
  • 00:12:11
    we have the same principle in programming so we want to separate HTML
  • 00:12:16
    which is all about content from JavaScript which is all about behavior
  • 00:12:20
    how should your web page behave what should happen when we hover our mouse
  • 00:12:25
    over a given element maybe something should pop up maybe something should be
  • 00:12:29
    hidden so we use JavaScript to implement behavior so open up the Explorer window
  • 00:12:35
    add a new file cut in index the j/s now back in index dot HTML cut all this
  • 00:12:45
    JavaScript code here and then paste it in index J s now in this simple
  • 00:12:52
    application we have a single file a single javascript file in a real world
  • 00:12:56
    application we have hundreds or even thousands of JavaScript files later in
  • 00:13:00
    the course you will learn how to combine these files into a bundle and serve that
  • 00:13:04
    bundle to the client now save the changes back in index.html now that all
  • 00:13:11
    our JavaScript code is in a separate file we need to reference that file here
  • 00:13:16
    so let's add an attribute here SRC which is short for source and set it to index
  • 00:13:24
    that j/s so this tells the browser that our JavaScript code is now in index that
  • 00:13:31
    is save the changes back in the browser you can still see the hello world
  • 00:13:37
    message and that confirms that our code is still working in the next lecture we
  • 00:13:42
    are going to execute this code in node
  • 00:13:50
    so in the last lecture we executed this piece of JavaScript code inside of a
  • 00:13:55
    browser in this lecture I'm going to show you how to run the same code in
  • 00:13:59
    node so I'm assuming that you have installed node on your machine if not
  • 00:14:03
    head over to node.js org and download the latest version of node now if you're
  • 00:14:09
    on Windows open up command prompt if you're on Mac open up terminal and head
  • 00:14:13
    over to the folder you created earlier now in this folder we run node and pass
  • 00:14:19
    the name of our javascript file that is index dot JSON c node is a program that
  • 00:14:28
    includes google's v8 JavaScript engine we can give it a piece of JavaScript
  • 00:14:34
    code and it will execute that code for us just like how we can execute some
  • 00:14:38
    JavaScript code in a browser so node is a runtime environment for executing
  • 00:14:43
    JavaScript code now let me show you a tip here in vs code we have an
  • 00:14:48
    integrated terminal so you're gonna have to explicitly open up a separate
  • 00:14:52
    terminal window so here on the top under the View menu look we have integrated
  • 00:14:59
    terminal note the shortcut here that's the shortcut for mac and windows you're
  • 00:15:04
    gonna have a different shortcut so select this and here's our integrated
  • 00:15:09
    terminal pointing to the same folder where we created our files so you don't
  • 00:15:14
    have to explicitly navigate to this folder and here we can run node indexed
  • 00:15:20
    at j/s as well now in this course we're not gonna work with node anymore because
  • 00:15:25
    node is a complex separate topic in fact I have a comprehensive course about node
  • 00:15:29
    with 14 hours of content so once you finish this course if you want to learn
  • 00:15:34
    node you can always look at my note course
  • 00:15:39
    well hello it's mahshar thank you for watching my javascript tutorial I just
  • 00:15:44
    wanted to quickly let you know that this tutorial is part of my complete
  • 00:15:48
    JavaScript course where you can learn about all the essential concepts in
  • 00:15:52
    JavaScript the course is packed with lots of exercises and solutions and by
  • 00:15:56
    the end of watching the course you will also receive a certificate of completion
  • 00:16:00
    in case you're interested you can find a link in the video description and if not
  • 00:16:04
    that's perfectly fine continue watching as the next section is coming up
  • 00:16:13
    let's start this section by a discussion of variables which are one of the most
  • 00:16:18
    fundamental concepts in JavaScript and any other programming languages in
  • 00:16:23
    programming we use a variable to store data temporarily in a computer's memory
  • 00:16:28
    so we store our data somewhere and give that memory location and name and with
  • 00:16:34
    this name we can read the data at the given location in the future here is a
  • 00:16:38
    metaphor think of the boxes you use to organize your stuff you put your stuff
  • 00:16:43
    in various boxes and put a label on each box with this you can easily find your
  • 00:16:49
    stuff right a variable is like a box what we put inside the box is the value
  • 00:16:55
    that we assign to a variable that's the data and the label that we put on the
  • 00:16:59
    box is the name of our variable now let's see this in code so here in index
  • 00:17:05
    Jas I'm gonna declare a variable now previously in the old days before es6 we
  • 00:17:11
    use the VAR keyword to declare a variable but there are issues with var
  • 00:17:16
    as you will find out later in the course so going forward from es6 the best
  • 00:17:22
    practice is to use the lead keyword to declare a variable now we need to give
  • 00:17:27
    this variable a name or an identifier and this is like the label we put on a
  • 00:17:32
    box so I'm gonna call this name and finally we need to terminate this
  • 00:17:36
    declaration with a semicolon now let's log this on the console and see what we
  • 00:17:41
    get so console that log name once again we
  • 00:17:46
    need to terminate this statement with a semicolon save the changes and here in
  • 00:17:51
    the console we see undefined so by default variables that we defined in
  • 00:17:56
    JavaScript their value is undefined now we can optionally initialize this
  • 00:18:01
    variable so I'm gonna set this to a string which is a sequence of characters
  • 00:18:07
    like Marsh note that I'm using single quote you can also use double quotes
  • 00:18:13
    different developers have different preferences but it's more common to use
  • 00:18:18
    single quotes for declaring strings in JavaScript now when we save the changes
  • 00:18:23
    instead of one we see Marsh on the console so here in
  • 00:18:28
    this example we have declared a variable called name and we have set that to this
  • 00:18:32
    value to this string now we have a few rules for naming these variables here
  • 00:18:39
    are the rules first is that they cannot be a reserved
  • 00:18:44
    keyword so in JavaScript we have reserved keywords let is one of them
  • 00:18:49
    you also have if else VAR and so on now you don't have to memorize this list if
  • 00:18:55
    you try to use one of these names you're gonna get an error for example if I
  • 00:18:59
    change this to if notice red underline this is indicating that this is not a
  • 00:19:06
    valid identifier okay so revert it back now the second rule is that they should
  • 00:19:12
    be meaningful we want to have meaningful names like meaningful labels I've seen
  • 00:19:18
    developers using names like a or PE or a one or I don't know X these variable
  • 00:19:26
    names do not give us any clue what is the purpose of these variables what kind
  • 00:19:30
    of data are restoring at that memory location so always use meaningful and
  • 00:19:35
    descriptive names okay now back to name the third rule is that they cannot start
  • 00:19:44
    with a number so we cannot have a variable like one name but again going
  • 00:19:50
    back to the second rule why would you want to call it variable one name it's
  • 00:19:54
    meaningless right so always use meaningful names the fourth rule is that
  • 00:20:00
    they cannot contain a space or - so if you have multiple words you need to put
  • 00:20:08
    them together here is an example let's imagine we want to declare a variable
  • 00:20:12
    called first name so first name and note that here I'm using camel notation so
  • 00:20:20
    the first letter of the first word should be lowercase and the first letter
  • 00:20:25
    of every word after should be uppercase this is what we call camel notation
  • 00:20:30
    which is the convention we use in JavaScript to name our variables another
  • 00:20:35
    thing you need to know about these variable names is
  • 00:20:38
    they are case-sensitive so if I declare another variable call it first name but
  • 00:20:46
    make the F uppercase these two variables are different but as I told you before
  • 00:20:52
    if you stick to camel notation you wouldn't end up with a variable name
  • 00:20:56
    like this and finally the last thing you need to know about these variables is
  • 00:21:01
    that if you want to declare multiple variables there are two ways to do this
  • 00:21:06
    you can declare them on one line and separate them using a comma so first
  • 00:21:11
    name and then last name now in this case I have not initialized either of these
  • 00:21:16
    variables they're both undefined I can optionally initialize one or both of
  • 00:21:21
    them so I can set this to Marsh and I can leave last name undefined or set it
  • 00:21:26
    to my last name Hammad on e but the modern best practice is to declare each
  • 00:21:31
    variable on a single line so we terminate this first declaration with a
  • 00:21:38
    semicolon and declare the second variable on a new line that's the modern
  • 00:21:42
    best practice next we're going to look at constants
  • 00:21:53
    alright now let's declare a variable called interest rate so let interest
  • 00:21:59
    rate and we set this to 0.3 now this is the initial value we can always change
  • 00:22:06
    that later so we can set interest rate to let's say 1 now if you log this on
  • 00:22:12
    the console of course we're going to see the new value right so save the changes
  • 00:22:17
    and here's one on the console however in a real-world application there are
  • 00:22:22
    situations that we don't want the value of a variable to change because
  • 00:22:27
    otherwise it's going to create all kinds of bugs in our application in those
  • 00:22:31
    situations instead of a variable we use a constant so the value of a variable as
  • 00:22:37
    the name implies can change but the value of a constant cannot change so
  • 00:22:43
    here if we change let to Const now interest rate will be a constant so when
  • 00:22:51
    I save the changes you're going to see an error in the console on line 3 where
  • 00:22:56
    we reassign interest rate so let's have a look
  • 00:22:59
    save the changes and here's the error uncut type error assignment 2 constant
  • 00:23:06
    variable we can see this error happen in index dot JSP
  • 00:23:12
    but if you click here you can see the line in code where this error occurred
  • 00:23:17
    so we cannot reassign a constant all right now back to the console so here's
  • 00:23:23
    the best practice if you don't need to reassign constant should be your default
  • 00:23:28
    choice otherwise if you need to reassign a variable use let
  • 00:23:39
    so you have learned how to declare and initialize a variable now you might be
  • 00:23:44
    wondering what are the kind of values that we can assign to a variable well
  • 00:23:50
    you have seen strings but we have more types basically in JavaScript we have
  • 00:23:55
    two categories of types on one side we have primitives also called value types
  • 00:24:01
    and the other types we have reference types in this lecture we're going to
  • 00:24:06
    focus on primitives and you're going to learn about reference types later in the
  • 00:24:10
    course now in the category of primitives we have strings numbers bully ends
  • 00:24:17
    undefined and not let's look at each of these in action so here we have a
  • 00:24:23
    variable called name which is set to your string what we have here is what we
  • 00:24:28
    call a string literal that's just a fancy name for a string now let's
  • 00:24:36
    declare a variable and set it to a number so let H be set back to 30 and by
  • 00:24:42
    the way I'm not 30 years old but don't tell anyone okay
  • 00:24:44
    so this is what we call a number litora now let's declare a boolean a boolean
  • 00:24:51
    can be either true or false so let is a proved to be true this is
  • 00:24:59
    what we call a boolean literal and we use this in situations where we want to
  • 00:25:04
    have some logic for example if the order is approved then it needs to be shipped
  • 00:25:10
    so the value of a boolean variable can be true or false and by the way note
  • 00:25:17
    that both true and false are reserved keywords so they cannot be variable
  • 00:25:22
    names ok now you have seen undefined before so I can declare another variable
  • 00:25:28
    first name if we don't initialize it by default its
  • 00:25:33
    value is undefined but we can also explicitly set this to
  • 00:25:38
    undefined but that's not very common in contrast we have another keyword that is
  • 00:25:44
    not so let me declare another variable and set this to no we use null in
  • 00:25:51
    situations where we want to please heed me clear the value of
  • 00:25:55
    variable for example you may want to present the user with a list of colors
  • 00:26:01
    if the user has no selection you want to set the selected color variable to know
  • 00:26:09
    in the future if the user selects a color then we're going to reassign this
  • 00:26:14
    variable to a color like red and then if they click red again perhaps we want to
  • 00:26:20
    remove the selection so we set this back tool not so we use norm in situations
  • 00:26:26
    where we want to clear the value of a variable so these are the examples of
  • 00:26:31
    primitives or value types we have strings numbers boolean's undefined and
  • 00:26:38
    no now in es6 we have another primitive that is symbol and you're going to learn
  • 00:26:43
    about that later in the course
  • 00:26:50
    one thing that separates JavaScript from a lot of programming languages is that
  • 00:26:55
    javascript is a dynamic language what do they mean by dynamic well we have two
  • 00:27:01
    types of programming languages static languages or dynamic languages in
  • 00:27:06
    static languages when we declare a variable the type of that variable is
  • 00:27:11
    set and it cannot be changed in the future in a dynamic language like
  • 00:27:16
    JavaScript the type of a variable can change at runtime let's see this in code
  • 00:27:21
    so back in the example from the last lecture we have declared this name
  • 00:27:25
    variable and we have set that to your string so the type of name is currently
  • 00:27:30
    a string but it can change in the future let's take a look so here in the console
  • 00:27:35
    we can execute some JavaScript code we have this type of operator and with that
  • 00:27:41
    we can check the type of a variable so after that we add the name of the
  • 00:27:46
    variable in this case our name variable so note that the type of name is a
  • 00:27:51
    string now if we reassign name to a different value like a number and check
  • 00:27:59
    its type look the type is now changed to a number this is what we call a dynamic
  • 00:28:05
    language so unlike static languages the type of these variables will be
  • 00:28:10
    determined at runtime based on the values that we assigned to them now
  • 00:28:14
    let's take a look at a few more examples of the type of operator and by the way
  • 00:28:19
    note that type of is another reserved keyword so you cannot have a variable
  • 00:28:24
    called type off so we can clear the console by pressing ctrl + L so now
  • 00:28:32
    let's take a look at type of age it's a number now if you change age to a
  • 00:28:38
    floating-point number and I know it doesn't make sense but let's just stick
  • 00:28:41
    to this for this example thirty point one and then look at type of age it's
  • 00:28:48
    still a number so in JavaScript unlike other programming languages we don't
  • 00:28:53
    have two kinds of numbers we don't have floating-point numbers and integers all
  • 00:28:58
    numbers are of type number now let's look at the type of he's approved it's a
  • 00:29:05
    boolean as I told you before what about the first name let's have a look type of
  • 00:29:10
    first name it's undefined and that's funny because the value of this variable
  • 00:29:15
    is undefined but this type is also undefined what
  • 00:29:20
    does this mean well earlier I told you that we have two categories of types we
  • 00:29:25
    have primitives or value types and reference types in the primitive types
  • 00:29:30
    category we have strings numbers boolean undefined and no so undefined is
  • 00:29:37
    actually a type but is also a value in this example because we have set
  • 00:29:44
    first-name to undefined as a value it's type is also undefined okay now what
  • 00:29:51
    about selected color let's have a look so type of selected color the type of
  • 00:29:59
    this variable is an object what is an object that's the topic for the next
  • 00:30:03
    lecture
  • 00:30:09
    so you have seen all the primitive types in JavaScript now let's take a look at
  • 00:30:14
    the reference types in the reference types category we have objects arrays
  • 00:30:19
    and functions in this lecture we're going to explore objects and you will
  • 00:30:23
    learn about arrays and functions later in this section so what is an object an
  • 00:30:29
    object in JavaScript and other programming languages is like an object
  • 00:30:33
    in real life think of a person a person has name age address and so on these are
  • 00:30:41
    the properties of a person you have the same concept in JavaScript so when we're
  • 00:30:47
    dealing with multiple related variables we can put these variables inside of an
  • 00:30:53
    object for example here we have two variables name and age they're highly
  • 00:30:59
    related they are part of the representation of a person so instead of
  • 00:31:03
    declaring two variables we can declare a person object and then instead of
  • 00:31:09
    referencing these two different variables we can just reference the
  • 00:31:12
    person object it makes our code cleaner so let's see
  • 00:31:17
    how we can declare a person object we start with let or Const if we don't want
  • 00:31:22
    to reassign the person object and set it to an object literal so this syntax we
  • 00:31:29
    have here these curly braces is what we call an object literal now between these
  • 00:31:36
    curly braces we add one or more key value pairs so the keys are what we call
  • 00:31:43
    the properties of this object in this case we want this person object to have
  • 00:31:47
    two properties or two keys name and age so we add name here that's the key then
  • 00:31:55
    we add a colon and after that we set the value so maash now we add a comma and
  • 00:32:03
    add another key value pair age 30 so now we have a person object with two
  • 00:32:10
    properties or two key value pairs name and age and with that we don't need
  • 00:32:16
    these two variables now this lock person on the console
  • 00:32:22
    so that log person save the changes so here's our personal object again note
  • 00:32:30
    the object literal syntax so we have curly braces and in between them we have
  • 00:32:35
    one or more key value pairs and these are the properties of the personal
  • 00:32:39
    object now there are two ways to work with these properties let's say we want
  • 00:32:45
    to change the name of this person so we need to access the name property there
  • 00:32:51
    are two ways the first way is what we call the dot notation so we add the name
  • 00:32:57
    of our object in this case person dot now you can see its properties we have
  • 00:33:02
    age and name so we can change the value of name to John now we can use the dot
  • 00:33:11
    notation to also read the value of a property so here on line 10 instead of
  • 00:33:17
    login the person object we can log its name property save the changes and in
  • 00:33:24
    the console we get John the other way to access a property is using bracket
  • 00:33:30
    notation so bracket notation so instead of dot we use square brackets and we
  • 00:33:40
    pass a string that determines the name of the target property so single or
  • 00:33:45
    double quotes but single quotes are more common the
  • 00:33:49
    name of the target property is name so we can change that to a same Mary again
  • 00:33:55
    when reading that we can use the dot notation or the bracket notation if we
  • 00:34:00
    save the changes now we get Mary on the console now you might be asking which
  • 00:34:05
    approach is better dot notation or bracket notation well as you can see dot
  • 00:34:12
    notation is a bit more concise it's shorter so that should be your default
  • 00:34:17
    choice however bracket notation has its own users sometimes you don't know the
  • 00:34:23
    name of the target property until the runtime for example in our user
  • 00:34:27
    interface the user might be selecting the name of the target property in that
  • 00:34:33
    case at the time of writing code we don't know what
  • 00:34:36
    property we're going to access that is going to be selected at runtime by the
  • 00:34:40
    user so we might have another variable somewhere else like selection that
  • 00:34:46
    determines the name of the target property that the user is selecting and
  • 00:34:50
    that can change at runtime with this we can access that property using the
  • 00:34:58
    bracket notation in a dynamic way so we pass selection here and we get the same
  • 00:35:05
    result okay now if this is confusing don't worry you're going to see this
  • 00:35:10
    again in the future as you gain more experience with JavaScript for now just
  • 00:35:14
    stick to the dot notation because that's cleaner and easier next we're going to
  • 00:35:19
    look at arrays
  • 00:35:27
    sometimes in your applications you might be dealing with a list of objects for
  • 00:35:32
    example the list of products in a shopping cart or the list of colors the
  • 00:35:37
    user has selected in situations like that you use an array to store that list
  • 00:35:42
    let me show you how so here I'm gonna declare another variable called selected
  • 00:35:48
    colors note that I'm using a meaningful name I don't have SC or some other weird
  • 00:35:55
    name selected colors now we can initialize this and set it to an empty
  • 00:36:01
    array so these square brackets are what we call array literal and they indicate
  • 00:36:07
    an empty array now we can initialize this array and add a couple of items
  • 00:36:13
    like red and blue let's Lock this on the console so console the log selected
  • 00:36:22
    colors save the changes so here's our array with two elements we can expand
  • 00:36:28
    that note that each element has an index and that determines the position of that
  • 00:36:34
    element in the array so the index of the first element is zero and the index of
  • 00:36:39
    the second element is one so if you want to access an element in an array we use
  • 00:36:45
    this index here's how for example let's say you want to display the first
  • 00:36:49
    element in this array you use the square brackets and then specify the index save
  • 00:36:56
    the changes and now we have red now earlier I told you that JavaScript is a
  • 00:37:01
    dynamic language so the type of variables can change at runtime the same
  • 00:37:07
    principle applies to our arrays so the lengths of arrays as well as the type of
  • 00:37:12
    objects we have in an array are dynamic they can change so aligned - we
  • 00:37:18
    initialize this array with two elements right now on line 3 we can add another
  • 00:37:25
    element to this array so the array will expand so let's say selected colors of 2
  • 00:37:31
    that means the third item in this array is going to be green now let's display
  • 00:37:39
    this array on the console so we have an array with three elements
  • 00:37:44
    so the length is dynamic it can change also the type of objects we have in this
  • 00:37:50
    array is dynamic so unlike other programming languages where every item
  • 00:37:55
    or every object in the array should have the same type in JavaScript we can store
  • 00:38:00
    different types in an array so we can make the last element a number save the
  • 00:38:06
    changes now we have two strings and a number so the objects in the array as
  • 00:38:12
    well as the size of the array are dynamic now technically an array is an
  • 00:38:16
    object so just like the personal object we defined in the last lecture it has a
  • 00:38:21
    bunch of key value pairs or properties that we can access using the dot
  • 00:38:25
    notation let me prove that to you so here on the console let's look at the
  • 00:38:29
    type of selected colors so the type of this array is an object so an array is
  • 00:38:37
    an object in JavaScript so here on line 4 we can look at the properties of this
  • 00:38:43
    array or this object using the dot notation look these are all the
  • 00:38:48
    properties defined in arrays in JavaScript so every time we declare an
  • 00:38:53
    array using square brackets that array will automatically receive these
  • 00:38:58
    properties we didn't explicitly define them they're just somehow magically
  • 00:39:03
    inherited from somewhere else we're going to learn about that later when we
  • 00:39:07
    talk about prototypes now in this lecture we're going to look at one of
  • 00:39:11
    these properties that is the length property this property returns the
  • 00:39:16
    number of items or elements in an array so save the changes you can see we have
  • 00:39:22
    three elements in this array now later in the course we have a comprehensive
  • 00:39:26
    section about arrays you'll learn about all kinds of operations we can perform
  • 00:39:30
    on arrays for now all I want you to take away is that an array is a data
  • 00:39:36
    structure that we use to represent a list of items
  • 00:39:46
    in the category of reference types you have learned about objects and arrays
  • 00:39:51
    now let's take a look at functions functions are one of the fundamental
  • 00:39:56
    building blocks in JavaScript a function is basically a set of statements that
  • 00:40:01
    performs a task or calculates a value let me show you a couple of examples so
  • 00:40:07
    I'm going to declare a function using the function keyword now we need to give
  • 00:40:11
    it a name let's call that greet after that we need to add parentheses that's
  • 00:40:17
    part of the syntax for declaring functions and then curly braces now what
  • 00:40:22
    we have here inside the curly braces is what we refer to as the body of this
  • 00:40:28
    function and this is where we add all these statements to define some kind of
  • 00:40:32
    logic in our application for example the logic for this function should be to
  • 00:40:38
    display a message on the console so here we can add console the log hello world
  • 00:40:47
    now note that here we have a statement so we terminated with a semicolon but
  • 00:40:53
    when we are declaring a function we don't need to add semicolon at the end
  • 00:40:57
    because we are not declaring it like a variable like this okay this is a
  • 00:41:03
    function declaration right so now we have a function we can call this
  • 00:41:09
    function like this so we add the name of the function and parentheses again and
  • 00:41:14
    then semicolon to indicate that this is a statement save the changes now we have
  • 00:41:21
    hello world on the console but that's pretty boring what would we do this let
  • 00:41:25
    me show you how to make this more interesting our functions can have
  • 00:41:28
    inputs and these inputs can change how the function behaves so let's say
  • 00:41:35
    instead of displaying hello world we want to display the name of the person
  • 00:41:39
    here like hello John so we can add a variable here in between parentheses we
  • 00:41:48
    refer to this variable as a parameter so this greet function has one parameter
  • 00:41:53
    called name and essentially name is like a variable that is only meaningful
  • 00:41:59
    inside dysfunction so inside of this function
  • 00:42:02
    we can work with this name variable but it will not be accessible outside of
  • 00:42:07
    this function the name is an input to this function so instead of displaying
  • 00:42:12
    hello world we can display hello then add a plus here to concatenate two
  • 00:42:18
    strings so we can add name after now when calling the great function we need
  • 00:42:26
    to pass a value for the name variable or name parameter more accurately so we can
  • 00:42:32
    pass John here now we refer to this as an argument so John is an argument to
  • 00:42:40
    the greet function a name is a parameter of the greet function it's one of the
  • 00:42:46
    things that a lot of programmers don't know they don't know the difference
  • 00:42:49
    between a parameter and an argument so a parameter is what we have here at the
  • 00:42:54
    time of declaration but the argument is the actual value with supply for that
  • 00:43:00
    parameter okay now let's save the changes so we have
  • 00:43:04
    hello John now we can reuse this function but with a different input so
  • 00:43:10
    we can copy this line here and change on to Mary save the changes now we have two
  • 00:43:17
    different messages on the console now a function can have multiple parameters so
  • 00:43:23
    here we can separate parameters using a comma so let's add another parameter
  • 00:43:28
    like last name now we can change our console not blog add a space here and
  • 00:43:36
    then display the last name now when calling this great function we
  • 00:43:43
    should pass another argument for the last name right but let's see what
  • 00:43:46
    happens if we don't do this so I'm gonna save the changes
  • 00:43:50
    see what we got hello John undefined because as I told you before the default
  • 00:43:57
    value of variables in JavaScript is undefined so because we did not pass a
  • 00:44:02
    value for the last name by default it's undefined so I'm gonna pass another
  • 00:44:08
    argument here we separate them using a comma John Smith
  • 00:44:14
    and we don't need the second call to the greet function save the changes now we
  • 00:44:19
    have hello John Smith
  • 00:44:28
    now there is a cleaner way to write this code on line three
  • 00:44:31
    all these concatenations are kind of ugly they're getting in the way later in
  • 00:44:36
    the course I'll show you how to use template literals to clean up this code
  • 00:44:40
    for now don't worry about it let's look at another example of a function so this
  • 00:44:45
    function we have here is performing a task so performing a task is task is to
  • 00:44:52
    display something on the console but sometimes our functions might calculate
  • 00:44:56
    something so here is an example of a function that calculates a value so
  • 00:45:03
    again function let's call this function square this function should take a
  • 00:45:08
    parameter let's call that number now we need to calculate the square of that
  • 00:45:13
    number that is number times number just basic math right now we need to return
  • 00:45:20
    this value to whoever is calling this function for that we use the return
  • 00:45:26
    keyword that's another reserved keyword so you cannot have a variable called
  • 00:45:30
    return okay now instead of calling the greet function let's call the square
  • 00:45:35
    function so square we pass two now this returns a value so we can use that value
  • 00:45:43
    to initialize a variable for example we can declare another variable called
  • 00:45:49
    number and set it to a square of 2 and then we can display that on the console
  • 00:45:57
    save the changes so we get 4 now in this particular example we don't necessarily
  • 00:46:02
    have to declare a separate variable if all we want to do is to display the
  • 00:46:08
    square of 2 on the console we can exclude this variable declaration and
  • 00:46:13
    simply pass square of 2 to console.log so when the JavaScript engine execute
  • 00:46:25
    this code first is going to call this function it would get a value and then
  • 00:46:29
    pass that value to console dot lock let's save the changes and look we still
  • 00:46:35
    get 4 now I have a question for you how many function calls do you think we have
  • 00:46:41
    in this code we have to function costs square of two is one function call let
  • 00:46:49
    me delete this temporarily but consult that lock is also another function call
  • 00:46:54
    right because here we have parentheses so recalling the log function which is
  • 00:46:59
    defined somewhere and passing an argument we can pass a simple string
  • 00:47:04
    like hello or we can pass an expression that expression can be a call to another
  • 00:47:10
    function like square of two okay so this is the basics of functions again later
  • 00:47:17
    in the course we have a comprehensive section about functions for now all I
  • 00:47:20
    want you to take away is that a function is a set of statements that either
  • 00:47:25
    performs a task or calculate and returns a value a real world application is
  • 00:47:32
    essentially a collection of hundreds or thousands of functions working together
  • 00:47:36
    to provide the functionality of that application
  • 00:47:43
    hi there it's me mosh again you seem to be very enthusiastic about learning
  • 00:47:48
    JavaScript so I want to congratulate you for your determination for learning if
  • 00:47:52
    you want to learn more from me I highly encourage you to enroll in my JavaScript
  • 00:47:56
    course you can watch this course online or offline as many times as you want at
  • 00:48:00
    your own pace the course comes with plenty of exercises and solutions and
  • 00:48:04
    you will also receive a certificate of completion by the end of watching the
  • 00:48:08
    course in case you're interested the link is in the video description have a
  • 00:48:12
    great day and I hope to see you in the course
タグ
  • JavaScript
  • ECMAScript
  • Node.js
  • programming
  • web development
  • V8 engine
  • frontend
  • backend
  • full-stack
  • JavaScript engines