JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour

Summary

This video provides a detailed yet approachable 3-minute introduction to JavaScript, answering common questions about what it is, its capabilities, where the code runs, and how it differs from ECMAScript. It explains that JavaScript is widely used for web and app development, outlines key concepts like variables, data types, objects, arrays, and functions, and includes simple code examples to demonstrate basic JavaScript functionality.

Takeaways

• 😀 JavaScript is a popular programming language used by many big companies to build web and mobile apps
• 👨‍💻 Variables allow us to store data in memory and refer to it later by a name
• 📦 Objects bundle together related variables into one unit for cleaner code
• 📋 Arrays let us store lists of data
• 🤖 Functions contain reusable code blocks that can accept inputs and return outputs
• 🔀 JavaScript is a dynamic language where variable types can change at runtime
• 💡 Use meaningful and descriptive names for variables and functions
• ✏️ Separate JavaScript code from HTML markup for cleaner code
• 📚 The JavaScript engine in browsers can execute JavaScript code
• 👍 Node.js lets us execute JavaScript outside of web browsers

Q & A

What is JavaScript and what can you build with it?

JavaScript is a popular programming language used to build interactive web pages, full-blown web or mobile apps, real-time networking apps like chats and video streaming, command-line tools, and even games.

Where does JavaScript code run?

JavaScript code can run inside a browser or in Node.js. Browsers and Node provide a runtime environment for JavaScript code execution.

What is the difference between JavaScript and ECMAScript?

ECMAScript is a specification that defines standards for JavaScript. JavaScript is a programming language that conforms to the ECMAScript specification.

Why should you put JavaScript code at the end of the HTML body section?

Putting JavaScript code at the end allows the browser to render page content first, improving user experience. It also ensures all page elements are loaded so the JavaScript code can reference them.

What are variables in JavaScript?

Variables are containers used to store data temporarily in a computer's memory. We store data in variables, give the locations names, and can reference the data in the future using those names.

What are the rules for naming variables in JavaScript?

Variable names cannot be reserved keywords, should be meaningful, cannot start with a number, cannot contain spaces or dashes, and are case-sensitive.

What are primitives and reference types in JavaScript?

Primitives (strings, numbers, booleans, etc.) are value types stored directly in memory. Reference types like objects are stored in memory and accessed by reference.

How do you access properties of a JavaScript object?

Using dot notation (object.property) or bracket notation (object['property']). Dot notation is preferred for known property names.

What is an array in JavaScript?

An array is a data structure used to represent a list of items. Arrays are dynamic - their lengths and contents (even different data types) can change.

What are the key components of a JavaScript function?

Functions include a name, optional parameters, a body with logic statements, and an optional return value. Functions perform tasks or calculate values.

Outlines

00:00

😀 Intro to JavaScript

The introduction provides an overview of JavaScript, explaining what it is, what you can do with it, where JavaScript code runs, and the difference between JavaScript and ECMAScript. It summarizes that JavaScript is a popular programming language used to build interactive web pages, full applications, networking apps, command-line tools, and games. JavaScript code can run in browsers using the JavaScript engine or in Node.js. ECMAScript is the specification that JavaScript follows.

05:03

😎 Setting up the development environment

This section recommends using Visual Studio Code as the code editor and installing the Live Server extension to serve the web application. It then walks through creating an index.html file to host the JavaScript code and separating the JavaScript code into its own index.js file for clean separation between HTML and JavaScript.

10:04

😊 Writing your first JavaScript code

This paragraph explains how to write a simple console.log statement in JavaScript to print 'Hello World' in the browser's console. It explains some basics like statements, strings, comments, separating concerns between HTML and JS, and running the JavaScript code in Node.js.

15:04

😉 Introducing Variables and Constants

This section provides an introduction to variables for storing data and constants for values that should not change. It covers rules for naming variables, declaring multiple variables, when to use constants vs variables, and shows examples of declaring variables and constants in code.

20:09

🤔 Primitive and Reference Types in JavaScript

This paragraph categorizes data types in JavaScript into primitives (strings, numbers, booleans, undefined, null) and reference types (objects, arrays, functions). It explains that JavaScript is dynamically typed so the type can change at runtime. Examples of checking types using the typeof operator are shown.

25:11

📝 Working with Objects

This section explains what objects are in JavaScript with an analogy to real-world objects. It shows how to declare an object literal, work with properties using dot and bracket notations, and explains when to use one over the other. Accessing and updating properties is demonstrated.

30:14

📋 Introducing Arrays

This paragraph explains that arrays are used to represent lists of items. It shows how to declare an array literal, access elements by index, and adds that arrays are dynamic so we can change their size and types of elements they contain.

35:15

✏️ Functions in JavaScript

This section provides an introduction to functions for performing tasks or calculating values. It covers the syntax for declaring functions, calling them, passing arguments vs parameters, returning values, and that applications are made of many small functions.

40:17

😎 Course promo

This is a promotional paragraph encouraging the viewer to enroll in the full JavaScript course by the instructor Mosh to learn more and gain a deeper understanding.

45:21

🥳 Section Wrap-up

The instructor concludes this section on the fundamentals by summarizing the key topics covered - variables, constants, primitive and reference types, objects, arrays, and functions. He states these are the building blocks of JavaScript.

Keywords

💡JavaScript

JavaScript is a popular programming language used to create interactive web pages and applications. The video introduces JavaScript, discusses its growing popularity and high salaries for JavaScript developers, and gives examples of what you can build with it.

💡variable

A variable is a named storage location that stores data in a computer's memory. Variables are fundamental building blocks in JavaScript and other programming languages. The video explains variables using a metaphor of boxes with labels, and shows how to declare, initialize and use variables in code.

💡function

A function is a reusable block of code that performs a specific task. Functions take input, process it, and return an output. They are key building blocks of JavaScript applications. The video shows how to declare functions, call them, pass arguments, and return values.

💡object

An object represents related data and functionality. The video explains JavaScript objects using the metaphor of real-world objects. It shows how to create object literals, add properties and methods, and access them using dot and bracket notation.

💡array

Arrays allow storing multiple values in a single variable. They are used to represent lists of data. The video explains that arrays are actually objects in JavaScript with some special characteristics like dynamic length and ability to store different data types.

💡primitive types

Primitive types like strings, numbers, booleans etc. are the basic building blocks of data in JavaScript. They are immutable values. The video shows the primitive types in JavaScript and how the typeof operator can be used to check variable types.

💡console.log

console.log is used to print messages to the browser's debugging console. It is used throughout the video to demonstrate sample JavaScript code and display outputs of variables, functions etc. for teaching purposes.

💡dynamic typing

JavaScript uses dynamic typing, meaning variables can hold different data types at different points in time. This makes JavaScript flexible but can also lead to errors if not handled properly. The video shows how a variable can alternate between being a string and a number.

💡statements

Statements are instructions that tell the computer to do something. All JavaScript code consists of statements. The video explains that statements in JavaScript code must end with a semicolon.

💡comments

Comments are notes that people can add in code to explain parts of the code without affecting how it runs. The video shows how to add single and multi-line comments in JavaScript code using // and /* */.

Highlights

JavaScript is one of the most popular and widely used programming languages in the world right now.

You can work as a front-end developer or a back-end developer or a full stack developer who knows both the front end and the back end.

With huge community support and investments by large companies like Facebook and Google these days you can build full-blown web or mobile apps as well as real time networking applications.

In 2009 a very clever engineer called Ryan Dahl took the open-source JavaScript engine in chrome and embedded it inside a C++ program he called that program node.

A variable is like a box - what we put inside the box is the value that we assign to a variable, and the label we put on the box is the name of our variable.

Always use meaningful and descriptive names for variables.

If you don't need to reassign, constants should be your default choice. Otherwise if you need to reassign, use let.

Unlike other programming languages where every item or every object in the array should have the same type, in JavaScript we can store different types in an array.

A function is a set of statements that either performs a task or calculates and returns a value.

A function can have multiple parameters.

The difference between a parameter and an argument - a parameter is what we have at the time of declaration, but the argument is the actual value we supply for that parameter.

An expression can be a call to another function.

A real world application is essentially a collection of hundreds or thousands of functions working together to provide the functionality of that application.

If you want to learn more, I highly encourage you to enroll in my JavaScript course.

The course comes with plenty of exercises and solutions and you will also receive a certificate of completion.

Transcripts

In this 3-minute introduction, I'm going to answer four frequently asked questions

about JavaScript. What is JavaScript, what can you do with

it, where does JavaScript code run and what is the difference between

JavaScript and ECMAScript. So let's start with the first question. What is

JavaScript? JavaScript is one of the most popular and widely used programming

languages in the world right now. It's growing faster than any other

programming languages and big companies like Netflix, Walmart, and PayPal build

entire applications around JavaScript. And here's the average salary of a

JavaScript developer in the United States. That is $72,000 a year. So

it's a great opportunity to get a good job out of learning JavaScript. You can

work as a front-end developer or a back-end developer or a full stack

developer who knows both the front end and the back end. Now, the second question.

What can you do with JavaScript? For a long time,

javascript was only used in browsers to build interactive web pages some

developers refer to javascript as a toy language but those days are gone because

of huge community support and investments by large companies like

Facebook and Google these days you can build full-blown web or mobile apps as

well as real time networking applications like chats and video

streaming services command-line tools or even games here's an example a third

question where does JavaScript code run javascript was originally designed to

run only in browsers so every browser has what we call a JavaScript engine

that can execute JavaScript code for example the JavaScript engines in

firefox and chrome are SpiderMonkey and v8 in 2009 a very clever engineer called

Ryan Dahl took the open-source JavaScript engine in chrome and embedded

it inside a C++ program he called that program node the node is a C++ program

that includes Google's v8 JavaScript engine now with this we can run

JavaScript code out of a browser so we can pass our

JavaScript code to node for execution and this means with JavaScript we can

build the backend for our web and mobile applications so in a nutshell JavaScript

code can be run inside of a browser or in node browsers and node provide a

runtime environment for our JavaScript code and finally the last question what

is the difference between JavaScript and Eggman script well ECMO script is just a

specification javascript is a programming language that confirms to

this specification so we have this organization called a comma which is

responsible for defining standards they take care of this Eggman script

specification the first version of Eggman script was released in 1997 then

starting from 2015 ACMA has been working on annual releases

of a newest specification so in 2015 they released a kimono script 2015 which

is also called ECMO script version 6 or es6 for short this specification defined

many new features for JavaScript alright enough theory

let's see javascript in action so every browser has a JavaScript engine and we

can easily write JavaScript code here without any additional tools of course

this is not how we build real-world applications but this is just for a

quick demo so open up Chrome right click on an empty area and go to inspect now

this opens up chrome developer tools here select the console tab this is our

JavaScript console and we can write any valid JavaScript code here so type this

console dot log put a single code here and then hello world another single code

to terminate close the parentheses and add a semicolon at the end now as you go

through the course you're going to understand exactly what all this means

for now don't worry about it so now I'll press ENTER and you can see the hello

world message on the console we can also write mathematical expressions here for

example two plus two we get four or we can do something like this alert

practices single coat yo enter and here's an alert in the next lecture I'm

going to talk about setting up your development environment for writing

JavaScript code

in order to write javascript code you need a code editor there are various

code editors out there including Visual Studio code or yes code sublime text

atom and so on out of these my favorite is Visual

Studio code that you can download from code that Visual Studio comm it's a very

simple lightweight cross-platform and powerful editor so if you don't have

Visual Studio code on your machine go ahead and download it the other thing I

wanted to install is note you can download note from nodejs

org now technically you don't necessarily need know to execute

JavaScript because as I explained before you can execute JavaScript code inside

of a browser or EndNote but it's good to have node on your machine because we use

that to install third-party libraries and also later in this section I'm going

to show you a preview of node so pause the video now and download Visual Studio

code as well as note once you're done come back continue watching

to create a new folder call that J s dash basics the name doesn't really

matter we just want to have a folder for writing all the code in this course now

drag and drop this folder into visual studio code okay we've got this folder

open let's add a new file here index dot HTML now you don't really need to know

HTML in order to take this course but if you want to be a front-end developer you

should know your HTML well now in this file I want you to type an exclamation

mark and then press tab this generates some basic HTML boilerplate we don't

really care about any of this code here we're gonna use this as a host for our

JavaScript code you're gonna see that in the next lecture so save the changes now

open the extensions tab here here in this box search for live server

so live server is a very lightweight web server that we're going to use to serve

our web application so install this then you will have to restart Visual Studio

code when you're done go to the Explorer tab right click index.html and select

open with live server

this will open up Chrome or your default browser and point it to this address

that's where our web application is served from now currently we have an

empty page now to make sure that everything is working properly let's go

back to visual studio code here in the body section let's add an h1 press tab

and type hello world now save the changes back in the browser we can see

this page is refreshed automatically and we've got the hello world heading here

in the next lecture you're going to write your first JavaScript code

all right now we're ready to write our first Java Script code in order to write

JavaScript code here we need a script element there are two places where we

can add a script element we can add it here in a head section or in the body

section the best practice is to put the script element at the end of the body

section after all the existing elements so here after h1 I'm gonna type script

and press tab this is our script element now why did I say that as a best

practice you should put this script element here well there are two reasons

for that one reason is that the browser parses this file from top to bottom so

if you put this script element here in the head section you might have a lot of

JavaScript code there so your browser may get busy parsing and executing that

JavaScript code and it won't be able to render the content of the page so this

will create a bad user experience your user looks at your web page it's white

or blank while your browser is busy parsing and executing your JavaScript

code so that's reason 1 the second reason is that almost always the code

that we have in between script elements needs to talk to the elements on this

web page for example we may want to show or hide some elements so by adding the

code here at the end of the body section we'll be confident that all these

elements are rendered by the browser now there are exceptions to this rule

sometimes you're using third-party code that has to be placed in the head

section but these are exceptions as I told you before as a best practice you

should add your JavaScript code at the end of the body section now here we're

gonna write the same code that you wrote in the last lecture console dot log

hello world but we're going to talk about this in a little bit more detail

what we have here is a statement a statement is a piece of code that

expresses an action to be carried out in this case we want to log

a message on the console all statements in JavaScript should be terminated by a

semicolon what we have here in between single codes is called

a string a string is a sequence of characters now in JavaScript we also

have this notation we can add two slashes and this represents a comet so

here we can add some description to our code and this description is ignored by

the JavaScript engine it's not executed it's purely for documenting the code

when you wanna explain to other developers why you have written this

code this way you don't explain what the code does because that should be clear

in the code itself so here I don't want to write something like logging

something on the console that's so obvious in the code right instead we

want to explain why's and a house so for this demo I'm just gonna add a simple

comment this is my first JavaScript code now save the changes back in the browser

we need to bring the console back up so right click somewhere and go to inspect

or alternatively you can use a shortcut that is alt command an eye on Mac or alt

control eye on windows that brings up the console tab if the console tab is

not immediately visible make sure to select it here and here you can see the

hello world message

now while we can easily write javascript code in between the script element in a

real-world application you have thousands or even millions of code we

don't want to write all that code in line here we want to extract and

separate our JavaScript code from our HTML code let me give you a metaphor

think of your house in your bedroom you have your bed and your clothes you don't

store your clothes in the kitchen this is what we call separation of concerns

we have the same principle in programming so we want to separate HTML

which is all about content from JavaScript which is all about behavior

how should your web page behave what should happen when we hover our mouse

over a given element maybe something should pop up maybe something should be

hidden so we use JavaScript to implement behavior so open up the Explorer window

add a new file cut in index the j/s now back in index dot HTML cut all this

JavaScript code here and then paste it in index J s now in this simple

application we have a single file a single javascript file in a real world

application we have hundreds or even thousands of JavaScript files later in

the course you will learn how to combine these files into a bundle and serve that

bundle to the client now save the changes back in index.html now that all

our JavaScript code is in a separate file we need to reference that file here

so let's add an attribute here SRC which is short for source and set it to index

that j/s so this tells the browser that our JavaScript code is now in index that

is save the changes back in the browser you can still see the hello world

message and that confirms that our code is still working in the next lecture we

are going to execute this code in node

so in the last lecture we executed this piece of JavaScript code inside of a

browser in this lecture I'm going to show you how to run the same code in

node so I'm assuming that you have installed node on your machine if not

head over to node.js org and download the latest version of node now if you're

on Windows open up command prompt if you're on Mac open up terminal and head

over to the folder you created earlier now in this folder we run node and pass

the name of our javascript file that is index dot JSON c node is a program that

includes google's v8 JavaScript engine we can give it a piece of JavaScript

code and it will execute that code for us just like how we can execute some

JavaScript code in a browser so node is a runtime environment for executing

JavaScript code now let me show you a tip here in vs code we have an

integrated terminal so you're gonna have to explicitly open up a separate

terminal window so here on the top under the View menu look we have integrated

terminal note the shortcut here that's the shortcut for mac and windows you're

gonna have a different shortcut so select this and here's our integrated

terminal pointing to the same folder where we created our files so you don't

have to explicitly navigate to this folder and here we can run node indexed

at j/s as well now in this course we're not gonna work with node anymore because

node is a complex separate topic in fact I have a comprehensive course about node

with 14 hours of content so once you finish this course if you want to learn

node you can always look at my note course

well hello it's mahshar thank you for watching my javascript tutorial I just

wanted to quickly let you know that this tutorial is part of my complete

JavaScript course where you can learn about all the essential concepts in

JavaScript the course is packed with lots of exercises and solutions and by

the end of watching the course you will also receive a certificate of completion

in case you're interested you can find a link in the video description and if not

that's perfectly fine continue watching as the next section is coming up

let's start this section by a discussion of variables which are one of the most

fundamental concepts in JavaScript and any other programming languages in

programming we use a variable to store data temporarily in a computer's memory

so we store our data somewhere and give that memory location and name and with

this name we can read the data at the given location in the future here is a

metaphor think of the boxes you use to organize your stuff you put your stuff

in various boxes and put a label on each box with this you can easily find your

stuff right a variable is like a box what we put inside the box is the value

that we assign to a variable that's the data and the label that we put on the

box is the name of our variable now let's see this in code so here in index

Jas I'm gonna declare a variable now previously in the old days before es6 we

use the VAR keyword to declare a variable but there are issues with var

as you will find out later in the course so going forward from es6 the best

practice is to use the lead keyword to declare a variable now we need to give

this variable a name or an identifier and this is like the label we put on a

box so I'm gonna call this name and finally we need to terminate this

declaration with a semicolon now let's log this on the console and see what we

get so console that log name once again we

need to terminate this statement with a semicolon save the changes and here in

the console we see undefined so by default variables that we defined in

JavaScript their value is undefined now we can optionally initialize this

variable so I'm gonna set this to a string which is a sequence of characters

like Marsh note that I'm using single quote you can also use double quotes

different developers have different preferences but it's more common to use

single quotes for declaring strings in JavaScript now when we save the changes

instead of one we see Marsh on the console so here in

this example we have declared a variable called name and we have set that to this

value to this string now we have a few rules for naming these variables here

are the rules first is that they cannot be a reserved

keyword so in JavaScript we have reserved keywords let is one of them

you also have if else VAR and so on now you don't have to memorize this list if

you try to use one of these names you're gonna get an error for example if I

change this to if notice red underline this is indicating that this is not a

valid identifier okay so revert it back now the second rule is that they should

be meaningful we want to have meaningful names like meaningful labels I've seen

developers using names like a or PE or a one or I don't know X these variable

names do not give us any clue what is the purpose of these variables what kind

of data are restoring at that memory location so always use meaningful and

descriptive names okay now back to name the third rule is that they cannot start

with a number so we cannot have a variable like one name but again going

back to the second rule why would you want to call it variable one name it's

meaningless right so always use meaningful names the fourth rule is that

they cannot contain a space or - so if you have multiple words you need to put

them together here is an example let's imagine we want to declare a variable

called first name so first name and note that here I'm using camel notation so

the first letter of the first word should be lowercase and the first letter

of every word after should be uppercase this is what we call camel notation

which is the convention we use in JavaScript to name our variables another

thing you need to know about these variable names is

they are case-sensitive so if I declare another variable call it first name but

make the F uppercase these two variables are different but as I told you before

if you stick to camel notation you wouldn't end up with a variable name

like this and finally the last thing you need to know about these variables is

that if you want to declare multiple variables there are two ways to do this

you can declare them on one line and separate them using a comma so first

name and then last name now in this case I have not initialized either of these

variables they're both undefined I can optionally initialize one or both of

them so I can set this to Marsh and I can leave last name undefined or set it

to my last name Hammad on e but the modern best practice is to declare each

variable on a single line so we terminate this first declaration with a

semicolon and declare the second variable on a new line that's the modern

best practice next we're going to look at constants

alright now let's declare a variable called interest rate so let interest

rate and we set this to 0.3 now this is the initial value we can always change

that later so we can set interest rate to let's say 1 now if you log this on

the console of course we're going to see the new value right so save the changes

and here's one on the console however in a real-world application there are

situations that we don't want the value of a variable to change because

otherwise it's going to create all kinds of bugs in our application in those

situations instead of a variable we use a constant so the value of a variable as

the name implies can change but the value of a constant cannot change so

here if we change let to Const now interest rate will be a constant so when

I save the changes you're going to see an error in the console on line 3 where

we reassign interest rate so let's have a look

save the changes and here's the error uncut type error assignment 2 constant

variable we can see this error happen in index dot JSP

but if you click here you can see the line in code where this error occurred

so we cannot reassign a constant all right now back to the console so here's

the best practice if you don't need to reassign constant should be your default

choice otherwise if you need to reassign a variable use let

so you have learned how to declare and initialize a variable now you might be

wondering what are the kind of values that we can assign to a variable well

you have seen strings but we have more types basically in JavaScript we have

two categories of types on one side we have primitives also called value types

and the other types we have reference types in this lecture we're going to

focus on primitives and you're going to learn about reference types later in the

course now in the category of primitives we have strings numbers bully ends

undefined and not let's look at each of these in action so here we have a

variable called name which is set to your string what we have here is what we

call a string literal that's just a fancy name for a string now let's

declare a variable and set it to a number so let H be set back to 30 and by

the way I'm not 30 years old but don't tell anyone okay

so this is what we call a number litora now let's declare a boolean a boolean

can be either true or false so let is a proved to be true this is

what we call a boolean literal and we use this in situations where we want to

have some logic for example if the order is approved then it needs to be shipped

so the value of a boolean variable can be true or false and by the way note

that both true and false are reserved keywords so they cannot be variable

names ok now you have seen undefined before so I can declare another variable

first name if we don't initialize it by default its

value is undefined but we can also explicitly set this to

undefined but that's not very common in contrast we have another keyword that is

not so let me declare another variable and set this to no we use null in

situations where we want to please heed me clear the value of

variable for example you may want to present the user with a list of colors

if the user has no selection you want to set the selected color variable to know

in the future if the user selects a color then we're going to reassign this

variable to a color like red and then if they click red again perhaps we want to

remove the selection so we set this back tool not so we use norm in situations

where we want to clear the value of a variable so these are the examples of

primitives or value types we have strings numbers boolean's undefined and

no now in es6 we have another primitive that is symbol and you're going to learn

about that later in the course

one thing that separates JavaScript from a lot of programming languages is that

javascript is a dynamic language what do they mean by dynamic well we have two

types of programming languages static languages or dynamic languages in

static languages when we declare a variable the type of that variable is

set and it cannot be changed in the future in a dynamic language like

JavaScript the type of a variable can change at runtime let's see this in code

so back in the example from the last lecture we have declared this name

variable and we have set that to your string so the type of name is currently

a string but it can change in the future let's take a look so here in the console

we can execute some JavaScript code we have this type of operator and with that

we can check the type of a variable so after that we add the name of the

variable in this case our name variable so note that the type of name is a

string now if we reassign name to a different value like a number and check

its type look the type is now changed to a number this is what we call a dynamic

language so unlike static languages the type of these variables will be

determined at runtime based on the values that we assigned to them now

let's take a look at a few more examples of the type of operator and by the way

note that type of is another reserved keyword so you cannot have a variable

called type off so we can clear the console by pressing ctrl + L so now

let's take a look at type of age it's a number now if you change age to a

floating-point number and I know it doesn't make sense but let's just stick

to this for this example thirty point one and then look at type of age it's

still a number so in JavaScript unlike other programming languages we don't

have two kinds of numbers we don't have floating-point numbers and integers all

numbers are of type number now let's look at the type of he's approved it's a

boolean as I told you before what about the first name let's have a look type of

first name it's undefined and that's funny because the value of this variable

is undefined but this type is also undefined what

does this mean well earlier I told you that we have two categories of types we

have primitives or value types and reference types in the primitive types

category we have strings numbers boolean undefined and no so undefined is

actually a type but is also a value in this example because we have set

first-name to undefined as a value it's type is also undefined okay now what

about selected color let's have a look so type of selected color the type of

this variable is an object what is an object that's the topic for the next

lecture

so you have seen all the primitive types in JavaScript now let's take a look at

the reference types in the reference types category we have objects arrays

and functions in this lecture we're going to explore objects and you will

learn about arrays and functions later in this section so what is an object an

object in JavaScript and other programming languages is like an object

in real life think of a person a person has name age address and so on these are

the properties of a person you have the same concept in JavaScript so when we're

dealing with multiple related variables we can put these variables inside of an

object for example here we have two variables name and age they're highly

related they are part of the representation of a person so instead of

declaring two variables we can declare a person object and then instead of

referencing these two different variables we can just reference the

person object it makes our code cleaner so let's see

how we can declare a person object we start with let or Const if we don't want

to reassign the person object and set it to an object literal so this syntax we

have here these curly braces is what we call an object literal now between these

curly braces we add one or more key value pairs so the keys are what we call

the properties of this object in this case we want this person object to have

two properties or two keys name and age so we add name here that's the key then

we add a colon and after that we set the value so maash now we add a comma and

add another key value pair age 30 so now we have a person object with two

properties or two key value pairs name and age and with that we don't need

these two variables now this lock person on the console

so that log person save the changes so here's our personal object again note

the object literal syntax so we have curly braces and in between them we have

one or more key value pairs and these are the properties of the personal

object now there are two ways to work with these properties let's say we want

to change the name of this person so we need to access the name property there

are two ways the first way is what we call the dot notation so we add the name

of our object in this case person dot now you can see its properties we have

age and name so we can change the value of name to John now we can use the dot

notation to also read the value of a property so here on line 10 instead of

login the person object we can log its name property save the changes and in

the console we get John the other way to access a property is using bracket

notation so bracket notation so instead of dot we use square brackets and we

pass a string that determines the name of the target property so single or

double quotes but single quotes are more common the

name of the target property is name so we can change that to a same Mary again

when reading that we can use the dot notation or the bracket notation if we

save the changes now we get Mary on the console now you might be asking which

approach is better dot notation or bracket notation well as you can see dot

notation is a bit more concise it's shorter so that should be your default

choice however bracket notation has its own users sometimes you don't know the

name of the target property until the runtime for example in our user

interface the user might be selecting the name of the target property in that

case at the time of writing code we don't know what

property we're going to access that is going to be selected at runtime by the

user so we might have another variable somewhere else like selection that

determines the name of the target property that the user is selecting and

that can change at runtime with this we can access that property using the

bracket notation in a dynamic way so we pass selection here and we get the same

result okay now if this is confusing don't worry you're going to see this

again in the future as you gain more experience with JavaScript for now just

stick to the dot notation because that's cleaner and easier next we're going to

look at arrays

sometimes in your applications you might be dealing with a list of objects for

example the list of products in a shopping cart or the list of colors the

user has selected in situations like that you use an array to store that list

let me show you how so here I'm gonna declare another variable called selected

colors note that I'm using a meaningful name I don't have SC or some other weird

name selected colors now we can initialize this and set it to an empty

array so these square brackets are what we call array literal and they indicate

an empty array now we can initialize this array and add a couple of items

like red and blue let's Lock this on the console so console the log selected

colors save the changes so here's our array with two elements we can expand

that note that each element has an index and that determines the position of that

element in the array so the index of the first element is zero and the index of

the second element is one so if you want to access an element in an array we use

this index here's how for example let's say you want to display the first

element in this array you use the square brackets and then specify the index save

the changes and now we have red now earlier I told you that JavaScript is a

dynamic language so the type of variables can change at runtime the same

principle applies to our arrays so the lengths of arrays as well as the type of

objects we have in an array are dynamic they can change so aligned - we

initialize this array with two elements right now on line 3 we can add another

element to this array so the array will expand so let's say selected colors of 2

that means the third item in this array is going to be green now let's display

this array on the console so we have an array with three elements

so the length is dynamic it can change also the type of objects we have in this

array is dynamic so unlike other programming languages where every item

or every object in the array should have the same type in JavaScript we can store

different types in an array so we can make the last element a number save the

changes now we have two strings and a number so the objects in the array as

well as the size of the array are dynamic now technically an array is an

object so just like the personal object we defined in the last lecture it has a

bunch of key value pairs or properties that we can access using the dot

notation let me prove that to you so here on the console let's look at the

type of selected colors so the type of this array is an object so an array is

an object in JavaScript so here on line 4 we can look at the properties of this

array or this object using the dot notation look these are all the

properties defined in arrays in JavaScript so every time we declare an

array using square brackets that array will automatically receive these

properties we didn't explicitly define them they're just somehow magically

inherited from somewhere else we're going to learn about that later when we

talk about prototypes now in this lecture we're going to look at one of

these properties that is the length property this property returns the

number of items or elements in an array so save the changes you can see we have

three elements in this array now later in the course we have a comprehensive

section about arrays you'll learn about all kinds of operations we can perform

on arrays for now all I want you to take away is that an array is a data

structure that we use to represent a list of items

in the category of reference types you have learned about objects and arrays

now let's take a look at functions functions are one of the fundamental

building blocks in JavaScript a function is basically a set of statements that

performs a task or calculates a value let me show you a couple of examples so

I'm going to declare a function using the function keyword now we need to give

it a name let's call that greet after that we need to add parentheses that's

part of the syntax for declaring functions and then curly braces now what

we have here inside the curly braces is what we refer to as the body of this

function and this is where we add all these statements to define some kind of

logic in our application for example the logic for this function should be to

display a message on the console so here we can add console the log hello world

now note that here we have a statement so we terminated with a semicolon but

when we are declaring a function we don't need to add semicolon at the end

because we are not declaring it like a variable like this okay this is a

function declaration right so now we have a function we can call this

function like this so we add the name of the function and parentheses again and

then semicolon to indicate that this is a statement save the changes now we have

hello world on the console but that's pretty boring what would we do this let

me show you how to make this more interesting our functions can have

inputs and these inputs can change how the function behaves so let's say

instead of displaying hello world we want to display the name of the person

here like hello John so we can add a variable here in between parentheses we

refer to this variable as a parameter so this greet function has one parameter

called name and essentially name is like a variable that is only meaningful

inside dysfunction so inside of this function

we can work with this name variable but it will not be accessible outside of

this function the name is an input to this function so instead of displaying

hello world we can display hello then add a plus here to concatenate two

strings so we can add name after now when calling the great function we need

to pass a value for the name variable or name parameter more accurately so we can

pass John here now we refer to this as an argument so John is an argument to

the greet function a name is a parameter of the greet function it's one of the

things that a lot of programmers don't know they don't know the difference

between a parameter and an argument so a parameter is what we have here at the

time of declaration but the argument is the actual value with supply for that

parameter okay now let's save the changes so we have

hello John now we can reuse this function but with a different input so

we can copy this line here and change on to Mary save the changes now we have two

different messages on the console now a function can have multiple parameters so

here we can separate parameters using a comma so let's add another parameter

like last name now we can change our console not blog add a space here and

then display the last name now when calling this great function we

should pass another argument for the last name right but let's see what

happens if we don't do this so I'm gonna save the changes

see what we got hello John undefined because as I told you before the default

value of variables in JavaScript is undefined so because we did not pass a

value for the last name by default it's undefined so I'm gonna pass another

argument here we separate them using a comma John Smith

and we don't need the second call to the greet function save the changes now we

have hello John Smith

now there is a cleaner way to write this code on line three

all these concatenations are kind of ugly they're getting in the way later in

the course I'll show you how to use template literals to clean up this code

for now don't worry about it let's look at another example of a function so this

function we have here is performing a task so performing a task is task is to

display something on the console but sometimes our functions might calculate

something so here is an example of a function that calculates a value so

again function let's call this function square this function should take a

parameter let's call that number now we need to calculate the square of that

number that is number times number just basic math right now we need to return

this value to whoever is calling this function for that we use the return

keyword that's another reserved keyword so you cannot have a variable called

return okay now instead of calling the greet function let's call the square

function so square we pass two now this returns a value so we can use that value

to initialize a variable for example we can declare another variable called

number and set it to a square of 2 and then we can display that on the console

save the changes so we get 4 now in this particular example we don't necessarily

have to declare a separate variable if all we want to do is to display the

square of 2 on the console we can exclude this variable declaration and

simply pass square of 2 to console.log so when the JavaScript engine execute

this code first is going to call this function it would get a value and then

pass that value to console dot lock let's save the changes and look we still

get 4 now I have a question for you how many function calls do you think we have

in this code we have to function costs square of two is one function call let

me delete this temporarily but consult that lock is also another function call

right because here we have parentheses so recalling the log function which is

defined somewhere and passing an argument we can pass a simple string

like hello or we can pass an expression that expression can be a call to another

function like square of two okay so this is the basics of functions again later

in the course we have a comprehensive section about functions for now all I

want you to take away is that a function is a set of statements that either

performs a task or calculate and returns a value a real world application is

essentially a collection of hundreds or thousands of functions working together

to provide the functionality of that application

hi there it's me mosh again you seem to be very enthusiastic about learning

JavaScript so I want to congratulate you for your determination for learning if

you want to learn more from me I highly encourage you to enroll in my JavaScript

course you can watch this course online or offline as many times as you want at

your own pace the course comes with plenty of exercises and solutions and

you will also receive a certificate of completion by the end of watching the

course in case you're interested the link is in the video description have a

great day and I hope to see you in the course