JavaScript Course for Beginners – Your First Step to Web Development — Transcript

Full transcript

1. 0:01In this 3-minute introduction, I'm going to answer four frequently asked questions
2. 0:06about JavaScript. What is JavaScript, what can you do with
3. 0:10it, where does JavaScript code run and what is the difference between
4. 0:14JavaScript and ECMAScript. So let's start with the first question. What is
5. 0:19JavaScript? JavaScript is one of the most popular and widely used programming
6. 0:24languages in the world right now. It's growing faster than any other
7. 0:28programming languages and big companies like Netflix, Walmart, and PayPal build
8. 0:34entire applications around JavaScript. And here's the average salary of a
9. 0:38JavaScript developer in the United States. That is $72,000 a year. So
10. 0:44it's a great opportunity to get a good job out of learning JavaScript. You can
11. 0:48work as a front-end developer or a back-end developer or a full stack
12. 0:53developer who knows both the front end and the back end. Now, the second question.
13. 0:57What can you do with JavaScript? For a long time,
14. 1:01javascript was only used in browsers to build interactive web pages some
15. 1:06developers refer to javascript as a toy language but those days are gone because
16. 1:11of huge community support and investments by large companies like
17. 1:15Facebook and Google these days you can build full-blown web or mobile apps as
18. 1:20well as real time networking applications like chats and video
19. 1:24streaming services command-line tools or even games here's an example a third
20. 1:31question where does JavaScript code run javascript was originally designed to
21. 1:36run only in browsers so every browser has what we call a JavaScript engine
22. 1:41that can execute JavaScript code for example the JavaScript engines in
23. 1:46firefox and chrome are SpiderMonkey and v8 in 2009 a very clever engineer called
24. 1:53Ryan Dahl took the open-source JavaScript engine in chrome and embedded
25. 1:59it inside a C++ program he called that program node the node is a C++ program
26. 2:05that includes Google's v8 JavaScript engine now with this we can run
27. 2:12JavaScript code out of a browser so we can pass our
28. 2:15JavaScript code to node for execution and this means with JavaScript we can
29. 2:20build the backend for our web and mobile applications so in a nutshell JavaScript
30. 2:26code can be run inside of a browser or in node browsers and node provide a
31. 2:31runtime environment for our JavaScript code and finally the last question what
32. 2:37is the difference between JavaScript and Eggman script well ECMO script is just a
33. 2:42specification javascript is a programming language that confirms to
34. 2:46this specification so we have this organization called a comma which is
35. 2:51responsible for defining standards they take care of this Eggman script
36. 2:55specification the first version of Eggman script was released in 1997 then
37. 3:01starting from 2015 ACMA has been working on annual releases
38. 3:06of a newest specification so in 2015 they released a kimono script 2015 which
39. 3:12is also called ECMO script version 6 or es6 for short this specification defined
40. 3:18many new features for JavaScript alright enough theory
41. 3:22let's see javascript in action so every browser has a JavaScript engine and we
42. 3:27can easily write JavaScript code here without any additional tools of course
43. 3:31this is not how we build real-world applications but this is just for a
44. 3:35quick demo so open up Chrome right click on an empty area and go to inspect now
45. 3:42this opens up chrome developer tools here select the console tab this is our
46. 3:47JavaScript console and we can write any valid JavaScript code here so type this
47. 3:52console dot log put a single code here and then hello world another single code
48. 4:01to terminate close the parentheses and add a semicolon at the end now as you go
49. 4:08through the course you're going to understand exactly what all this means
50. 4:11for now don't worry about it so now I'll press ENTER and you can see the hello
51. 4:15world message on the console we can also write mathematical expressions here for
52. 4:20example two plus two we get four or we can do something like this alert
53. 4:26practices single coat yo enter and here's an alert in the next lecture I'm
54. 4:33going to talk about setting up your development environment for writing
55. 4:37JavaScript code
56. 4:43in order to write javascript code you need a code editor there are various
57. 4:48code editors out there including Visual Studio code or yes code sublime text
58. 4:53atom and so on out of these my favorite is Visual
59. 4:57Studio code that you can download from code that Visual Studio comm it's a very
60. 5:02simple lightweight cross-platform and powerful editor so if you don't have
61. 5:07Visual Studio code on your machine go ahead and download it the other thing I
62. 5:12wanted to install is note you can download note from nodejs
63. 5:16org now technically you don't necessarily need know to execute
64. 5:21JavaScript because as I explained before you can execute JavaScript code inside
65. 5:25of a browser or EndNote but it's good to have node on your machine because we use
66. 5:30that to install third-party libraries and also later in this section I'm going
67. 5:35to show you a preview of node so pause the video now and download Visual Studio
68. 5:40code as well as note once you're done come back continue watching
69. 5:48to create a new folder call that J s dash basics the name doesn't really
70. 5:55matter we just want to have a folder for writing all the code in this course now
71. 6:00drag and drop this folder into visual studio code okay we've got this folder
72. 6:07open let's add a new file here index dot HTML now you don't really need to know
73. 6:15HTML in order to take this course but if you want to be a front-end developer you
74. 6:19should know your HTML well now in this file I want you to type an exclamation
75. 6:24mark and then press tab this generates some basic HTML boilerplate we don't
76. 6:30really care about any of this code here we're gonna use this as a host for our
77. 6:34JavaScript code you're gonna see that in the next lecture so save the changes now
78. 6:40open the extensions tab here here in this box search for live server
79. 6:49so live server is a very lightweight web server that we're going to use to serve
80. 6:55our web application so install this then you will have to restart Visual Studio
81. 7:01code when you're done go to the Explorer tab right click index.html and select
82. 7:09open with live server
83. 7:13this will open up Chrome or your default browser and point it to this address
84. 7:18that's where our web application is served from now currently we have an
85. 7:23empty page now to make sure that everything is working properly let's go
86. 7:27back to visual studio code here in the body section let's add an h1 press tab
87. 7:34and type hello world now save the changes back in the browser we can see
88. 7:41this page is refreshed automatically and we've got the hello world heading here
89. 7:45in the next lecture you're going to write your first JavaScript code
90. 7:55all right now we're ready to write our first Java Script code in order to write
91. 8:00JavaScript code here we need a script element there are two places where we
92. 8:05can add a script element we can add it here in a head section or in the body
93. 8:11section the best practice is to put the script element at the end of the body
94. 8:17section after all the existing elements so here after h1 I'm gonna type script
95. 8:24and press tab this is our script element now why did I say that as a best
96. 8:30practice you should put this script element here well there are two reasons
97. 8:34for that one reason is that the browser parses this file from top to bottom so
98. 8:40if you put this script element here in the head section you might have a lot of
99. 8:46JavaScript code there so your browser may get busy parsing and executing that
100. 8:51JavaScript code and it won't be able to render the content of the page so this
101. 8:57will create a bad user experience your user looks at your web page it's white
102. 9:01or blank while your browser is busy parsing and executing your JavaScript
103. 9:06code so that's reason 1 the second reason is that almost always the code
104. 9:12that we have in between script elements needs to talk to the elements on this
105. 9:18web page for example we may want to show or hide some elements so by adding the
106. 9:23code here at the end of the body section we'll be confident that all these
107. 9:28elements are rendered by the browser now there are exceptions to this rule
108. 9:33sometimes you're using third-party code that has to be placed in the head
109. 9:37section but these are exceptions as I told you before as a best practice you
110. 9:42should add your JavaScript code at the end of the body section now here we're
111. 9:47gonna write the same code that you wrote in the last lecture console dot log
112. 9:52hello world but we're going to talk about this in a little bit more detail
113. 9:58what we have here is a statement a statement is a piece of code that
114. 10:04expresses an action to be carried out in this case we want to log
115. 10:09a message on the console all statements in JavaScript should be terminated by a
116. 10:15semicolon what we have here in between single codes is called
117. 10:20a string a string is a sequence of characters now in JavaScript we also
118. 10:26have this notation we can add two slashes and this represents a comet so
119. 10:34here we can add some description to our code and this description is ignored by
120. 10:38the JavaScript engine it's not executed it's purely for documenting the code
121. 10:43when you wanna explain to other developers why you have written this
122. 10:47code this way you don't explain what the code does because that should be clear
123. 10:52in the code itself so here I don't want to write something like logging
124. 10:55something on the console that's so obvious in the code right instead we
125. 11:00want to explain why's and a house so for this demo I'm just gonna add a simple
126. 11:05comment this is my first JavaScript code now save the changes back in the browser
127. 11:14we need to bring the console back up so right click somewhere and go to inspect
128. 11:20or alternatively you can use a shortcut that is alt command an eye on Mac or alt
129. 11:27control eye on windows that brings up the console tab if the console tab is
130. 11:32not immediately visible make sure to select it here and here you can see the
131. 11:36hello world message
132. 11:44now while we can easily write javascript code in between the script element in a
133. 11:49real-world application you have thousands or even millions of code we
134. 11:53don't want to write all that code in line here we want to extract and
135. 11:57separate our JavaScript code from our HTML code let me give you a metaphor
136. 12:02think of your house in your bedroom you have your bed and your clothes you don't
137. 12:07store your clothes in the kitchen this is what we call separation of concerns
138. 12:11we have the same principle in programming so we want to separate HTML
139. 12:16which is all about content from JavaScript which is all about behavior
140. 12:20how should your web page behave what should happen when we hover our mouse
141. 12:25over a given element maybe something should pop up maybe something should be
142. 12:29hidden so we use JavaScript to implement behavior so open up the Explorer window
143. 12:35add a new file cut in index the j/s now back in index dot HTML cut all this
144. 12:45JavaScript code here and then paste it in index J s now in this simple
145. 12:52application we have a single file a single javascript file in a real world
146. 12:56application we have hundreds or even thousands of JavaScript files later in
147. 13:00the course you will learn how to combine these files into a bundle and serve that
148. 13:04bundle to the client now save the changes back in index.html now that all
149. 13:11our JavaScript code is in a separate file we need to reference that file here
150. 13:16so let's add an attribute here SRC which is short for source and set it to index
151. 13:24that j/s so this tells the browser that our JavaScript code is now in index that
152. 13:31is save the changes back in the browser you can still see the hello world
153. 13:37message and that confirms that our code is still working in the next lecture we
154. 13:42are going to execute this code in node
155. 13:50so in the last lecture we executed this piece of JavaScript code inside of a
156. 13:55browser in this lecture I'm going to show you how to run the same code in
157. 13:59node so I'm assuming that you have installed node on your machine if not
158. 14:03head over to node.js org and download the latest version of node now if you're
159. 14:09on Windows open up command prompt if you're on Mac open up terminal and head
160. 14:13over to the folder you created earlier now in this folder we run node and pass
161. 14:19the name of our javascript file that is index dot JSON c node is a program that
162. 14:28includes google's v8 JavaScript engine we can give it a piece of JavaScript
163. 14:34code and it will execute that code for us just like how we can execute some
164. 14:38JavaScript code in a browser so node is a runtime environment for executing
165. 14:43JavaScript code now let me show you a tip here in vs code we have an
166. 14:48integrated terminal so you're gonna have to explicitly open up a separate
167. 14:52terminal window so here on the top under the View menu look we have integrated
168. 14:59terminal note the shortcut here that's the shortcut for mac and windows you're
169. 15:04gonna have a different shortcut so select this and here's our integrated
170. 15:09terminal pointing to the same folder where we created our files so you don't
171. 15:14have to explicitly navigate to this folder and here we can run node indexed
172. 15:20at j/s as well now in this course we're not gonna work with node anymore because
173. 15:25node is a complex separate topic in fact I have a comprehensive course about node
174. 15:29with 14 hours of content so once you finish this course if you want to learn
175. 15:34node you can always look at my note course
176. 15:39well hello it's mahshar thank you for watching my javascript tutorial I just
177. 15:44wanted to quickly let you know that this tutorial is part of my complete
178. 15:48JavaScript course where you can learn about all the essential concepts in
179. 15:52JavaScript the course is packed with lots of exercises and solutions and by
180. 15:56the end of watching the course you will also receive a certificate of completion
181. 16:00in case you're interested you can find a link in the video description and if not
182. 16:04that's perfectly fine continue watching as the next section is coming up
183. 16:13let's start this section by a discussion of variables which are one of the most
184. 16:18fundamental concepts in JavaScript and any other programming languages in
185. 16:23programming we use a variable to store data temporarily in a computer's memory
186. 16:28so we store our data somewhere and give that memory location and name and with
187. 16:34this name we can read the data at the given location in the future here is a
188. 16:38metaphor think of the boxes you use to organize your stuff you put your stuff
189. 16:43in various boxes and put a label on each box with this you can easily find your
190. 16:49stuff right a variable is like a box what we put inside the box is the value
191. 16:55that we assign to a variable that's the data and the label that we put on the
192. 16:59box is the name of our variable now let's see this in code so here in index
193. 17:05Jas I'm gonna declare a variable now previously in the old days before es6 we
194. 17:11use the VAR keyword to declare a variable but there are issues with var
195. 17:16as you will find out later in the course so going forward from es6 the best
196. 17:22practice is to use the lead keyword to declare a variable now we need to give
197. 17:27this variable a name or an identifier and this is like the label we put on a
198. 17:32box so I'm gonna call this name and finally we need to terminate this
199. 17:36declaration with a semicolon now let's log this on the console and see what we
200. 17:41get so console that log name once again we
201. 17:46need to terminate this statement with a semicolon save the changes and here in
202. 17:51the console we see undefined so by default variables that we defined in
203. 17:56JavaScript their value is undefined now we can optionally initialize this
204. 18:01variable so I'm gonna set this to a string which is a sequence of characters
205. 18:07like Marsh note that I'm using single quote you can also use double quotes
206. 18:13different developers have different preferences but it's more common to use
207. 18:18single quotes for declaring strings in JavaScript now when we save the changes
208. 18:23instead of one we see Marsh on the console so here in
209. 18:28this example we have declared a variable called name and we have set that to this
210. 18:32value to this string now we have a few rules for naming these variables here
211. 18:39are the rules first is that they cannot be a reserved
212. 18:44keyword so in JavaScript we have reserved keywords let is one of them
213. 18:49you also have if else VAR and so on now you don't have to memorize this list if
214. 18:55you try to use one of these names you're gonna get an error for example if I
215. 18:59change this to if notice red underline this is indicating that this is not a
216. 19:06valid identifier okay so revert it back now the second rule is that they should
217. 19:12be meaningful we want to have meaningful names like meaningful labels I've seen
218. 19:18developers using names like a or PE or a one or I don't know X these variable
219. 19:26names do not give us any clue what is the purpose of these variables what kind
220. 19:30of data are restoring at that memory location so always use meaningful and
221. 19:35descriptive names okay now back to name the third rule is that they cannot start
222. 19:44with a number so we cannot have a variable like one name but again going
223. 19:50back to the second rule why would you want to call it variable one name it's
224. 19:54meaningless right so always use meaningful names the fourth rule is that
225. 20:00they cannot contain a space or - so if you have multiple words you need to put
226. 20:08them together here is an example let's imagine we want to declare a variable
227. 20:12called first name so first name and note that here I'm using camel notation so
228. 20:20the first letter of the first word should be lowercase and the first letter
229. 20:25of every word after should be uppercase this is what we call camel notation
230. 20:30which is the convention we use in JavaScript to name our variables another
231. 20:35thing you need to know about these variable names is
232. 20:38they are case-sensitive so if I declare another variable call it first name but
233. 20:46make the F uppercase these two variables are different but as I told you before
234. 20:52if you stick to camel notation you wouldn't end up with a variable name
235. 20:56like this and finally the last thing you need to know about these variables is
236. 21:01that if you want to declare multiple variables there are two ways to do this
237. 21:06you can declare them on one line and separate them using a comma so first
238. 21:11name and then last name now in this case I have not initialized either of these
239. 21:16variables they're both undefined I can optionally initialize one or both of
240. 21:21them so I can set this to Marsh and I can leave last name undefined or set it
241. 21:26to my last name Hammad on e but the modern best practice is to declare each
242. 21:31variable on a single line so we terminate this first declaration with a
243. 21:38semicolon and declare the second variable on a new line that's the modern
244. 21:42best practice next we're going to look at constants
245. 21:53alright now let's declare a variable called interest rate so let interest
246. 21:59rate and we set this to 0.3 now this is the initial value we can always change
247. 22:06that later so we can set interest rate to let's say 1 now if you log this on
248. 22:12the console of course we're going to see the new value right so save the changes
249. 22:17and here's one on the console however in a real-world application there are
250. 22:22situations that we don't want the value of a variable to change because
251. 22:27otherwise it's going to create all kinds of bugs in our application in those
252. 22:31situations instead of a variable we use a constant so the value of a variable as
253. 22:37the name implies can change but the value of a constant cannot change so
254. 22:43here if we change let to Const now interest rate will be a constant so when
255. 22:51I save the changes you're going to see an error in the console on line 3 where
256. 22:56we reassign interest rate so let's have a look
257. 22:59save the changes and here's the error uncut type error assignment 2 constant
258. 23:06variable we can see this error happen in index dot JSP
259. 23:12but if you click here you can see the line in code where this error occurred
260. 23:17so we cannot reassign a constant all right now back to the console so here's
261. 23:23the best practice if you don't need to reassign constant should be your default
262. 23:28choice otherwise if you need to reassign a variable use let
263. 23:39so you have learned how to declare and initialize a variable now you might be
264. 23:44wondering what are the kind of values that we can assign to a variable well
265. 23:50you have seen strings but we have more types basically in JavaScript we have
266. 23:55two categories of types on one side we have primitives also called value types
267. 24:01and the other types we have reference types in this lecture we're going to
268. 24:06focus on primitives and you're going to learn about reference types later in the
269. 24:10course now in the category of primitives we have strings numbers bully ends
270. 24:17undefined and not let's look at each of these in action so here we have a
271. 24:23variable called name which is set to your string what we have here is what we
272. 24:28call a string literal that's just a fancy name for a string now let's
273. 24:36declare a variable and set it to a number so let H be set back to 30 and by
274. 24:42the way I'm not 30 years old but don't tell anyone okay
275. 24:44so this is what we call a number litora now let's declare a boolean a boolean
276. 24:51can be either true or false so let is a proved to be true this is
277. 24:59what we call a boolean literal and we use this in situations where we want to
278. 25:04have some logic for example if the order is approved then it needs to be shipped
279. 25:10so the value of a boolean variable can be true or false and by the way note
280. 25:17that both true and false are reserved keywords so they cannot be variable
281. 25:22names ok now you have seen undefined before so I can declare another variable
282. 25:28first name if we don't initialize it by default its
283. 25:33value is undefined but we can also explicitly set this to
284. 25:38undefined but that's not very common in contrast we have another keyword that is
285. 25:44not so let me declare another variable and set this to no we use null in
286. 25:51situations where we want to please heed me clear the value of
287. 25:55variable for example you may want to present the user with a list of colors
288. 26:01if the user has no selection you want to set the selected color variable to know
289. 26:09in the future if the user selects a color then we're going to reassign this
290. 26:14variable to a color like red and then if they click red again perhaps we want to
291. 26:20remove the selection so we set this back tool not so we use norm in situations
292. 26:26where we want to clear the value of a variable so these are the examples of
293. 26:31primitives or value types we have strings numbers boolean's undefined and
294. 26:38no now in es6 we have another primitive that is symbol and you're going to learn
295. 26:43about that later in the course
296. 26:50one thing that separates JavaScript from a lot of programming languages is that
297. 26:55javascript is a dynamic language what do they mean by dynamic well we have two
298. 27:01types of programming languages static languages or dynamic languages in
299. 27:06static languages when we declare a variable the type of that variable is
300. 27:11set and it cannot be changed in the future in a dynamic language like
301. 27:16JavaScript the type of a variable can change at runtime let's see this in code
302. 27:21so back in the example from the last lecture we have declared this name
303. 27:25variable and we have set that to your string so the type of name is currently
304. 27:30a string but it can change in the future let's take a look so here in the console
305. 27:35we can execute some JavaScript code we have this type of operator and with that
306. 27:41we can check the type of a variable so after that we add the name of the
307. 27:46variable in this case our name variable so note that the type of name is a
308. 27:51string now if we reassign name to a different value like a number and check
309. 27:59its type look the type is now changed to a number this is what we call a dynamic
310. 28:05language so unlike static languages the type of these variables will be
311. 28:10determined at runtime based on the values that we assigned to them now
312. 28:14let's take a look at a few more examples of the type of operator and by the way
313. 28:19note that type of is another reserved keyword so you cannot have a variable
314. 28:24called type off so we can clear the console by pressing ctrl + L so now
315. 28:32let's take a look at type of age it's a number now if you change age to a
316. 28:38floating-point number and I know it doesn't make sense but let's just stick
317. 28:41to this for this example thirty point one and then look at type of age it's
318. 28:48still a number so in JavaScript unlike other programming languages we don't
319. 28:53have two kinds of numbers we don't have floating-point numbers and integers all
320. 28:58numbers are of type number now let's look at the type of he's approved it's a
321. 29:05boolean as I told you before what about the first name let's have a look type of
322. 29:10first name it's undefined and that's funny because the value of this variable
323. 29:15is undefined but this type is also undefined what
324. 29:20does this mean well earlier I told you that we have two categories of types we
325. 29:25have primitives or value types and reference types in the primitive types
326. 29:30category we have strings numbers boolean undefined and no so undefined is
327. 29:37actually a type but is also a value in this example because we have set
328. 29:44first-name to undefined as a value it's type is also undefined okay now what
329. 29:51about selected color let's have a look so type of selected color the type of
330. 29:59this variable is an object what is an object that's the topic for the next
331. 30:03lecture
332. 30:09so you have seen all the primitive types in JavaScript now let's take a look at
333. 30:14the reference types in the reference types category we have objects arrays
334. 30:19and functions in this lecture we're going to explore objects and you will
335. 30:23learn about arrays and functions later in this section so what is an object an
336. 30:29object in JavaScript and other programming languages is like an object
337. 30:33in real life think of a person a person has name age address and so on these are
338. 30:41the properties of a person you have the same concept in JavaScript so when we're
339. 30:47dealing with multiple related variables we can put these variables inside of an
340. 30:53object for example here we have two variables name and age they're highly
341. 30:59related they are part of the representation of a person so instead of
342. 31:03declaring two variables we can declare a person object and then instead of
343. 31:09referencing these two different variables we can just reference the
344. 31:12person object it makes our code cleaner so let's see
345. 31:17how we can declare a person object we start with let or Const if we don't want
346. 31:22to reassign the person object and set it to an object literal so this syntax we
347. 31:29have here these curly braces is what we call an object literal now between these
348. 31:36curly braces we add one or more key value pairs so the keys are what we call
349. 31:43the properties of this object in this case we want this person object to have
350. 31:47two properties or two keys name and age so we add name here that's the key then
351. 31:55we add a colon and after that we set the value so maash now we add a comma and
352. 32:03add another key value pair age 30 so now we have a person object with two
353. 32:10properties or two key value pairs name and age and with that we don't need
354. 32:16these two variables now this lock person on the console
355. 32:22so that log person save the changes so here's our personal object again note
356. 32:30the object literal syntax so we have curly braces and in between them we have
357. 32:35one or more key value pairs and these are the properties of the personal
358. 32:39object now there are two ways to work with these properties let's say we want
359. 32:45to change the name of this person so we need to access the name property there
360. 32:51are two ways the first way is what we call the dot notation so we add the name
361. 32:57of our object in this case person dot now you can see its properties we have
362. 33:02age and name so we can change the value of name to John now we can use the dot
363. 33:11notation to also read the value of a property so here on line 10 instead of
364. 33:17login the person object we can log its name property save the changes and in
365. 33:24the console we get John the other way to access a property is using bracket
366. 33:30notation so bracket notation so instead of dot we use square brackets and we
367. 33:40pass a string that determines the name of the target property so single or
368. 33:45double quotes but single quotes are more common the
369. 33:49name of the target property is name so we can change that to a same Mary again
370. 33:55when reading that we can use the dot notation or the bracket notation if we
371. 34:00save the changes now we get Mary on the console now you might be asking which
372. 34:05approach is better dot notation or bracket notation well as you can see dot
373. 34:12notation is a bit more concise it's shorter so that should be your default
374. 34:17choice however bracket notation has its own users sometimes you don't know the
375. 34:23name of the target property until the runtime for example in our user
376. 34:27interface the user might be selecting the name of the target property in that
377. 34:33case at the time of writing code we don't know what
378. 34:36property we're going to access that is going to be selected at runtime by the
379. 34:40user so we might have another variable somewhere else like selection that
380. 34:46determines the name of the target property that the user is selecting and
381. 34:50that can change at runtime with this we can access that property using the
382. 34:58bracket notation in a dynamic way so we pass selection here and we get the same
383. 35:05result okay now if this is confusing don't worry you're going to see this
384. 35:10again in the future as you gain more experience with JavaScript for now just
385. 35:14stick to the dot notation because that's cleaner and easier next we're going to
386. 35:19look at arrays
387. 35:27sometimes in your applications you might be dealing with a list of objects for
388. 35:32example the list of products in a shopping cart or the list of colors the
389. 35:37user has selected in situations like that you use an array to store that list
390. 35:42let me show you how so here I'm gonna declare another variable called selected
391. 35:48colors note that I'm using a meaningful name I don't have SC or some other weird
392. 35:55name selected colors now we can initialize this and set it to an empty
393. 36:01array so these square brackets are what we call array literal and they indicate
394. 36:07an empty array now we can initialize this array and add a couple of items
395. 36:13like red and blue let's Lock this on the console so console the log selected
396. 36:22colors save the changes so here's our array with two elements we can expand
397. 36:28that note that each element has an index and that determines the position of that
398. 36:34element in the array so the index of the first element is zero and the index of
399. 36:39the second element is one so if you want to access an element in an array we use
400. 36:45this index here's how for example let's say you want to display the first
401. 36:49element in this array you use the square brackets and then specify the index save
402. 36:56the changes and now we have red now earlier I told you that JavaScript is a
403. 37:01dynamic language so the type of variables can change at runtime the same
404. 37:07principle applies to our arrays so the lengths of arrays as well as the type of
405. 37:12objects we have in an array are dynamic they can change so aligned - we
406. 37:18initialize this array with two elements right now on line 3 we can add another
407. 37:25element to this array so the array will expand so let's say selected colors of 2
408. 37:31that means the third item in this array is going to be green now let's display
409. 37:39this array on the console so we have an array with three elements
410. 37:44so the length is dynamic it can change also the type of objects we have in this
411. 37:50array is dynamic so unlike other programming languages where every item
412. 37:55or every object in the array should have the same type in JavaScript we can store
413. 38:00different types in an array so we can make the last element a number save the
414. 38:06changes now we have two strings and a number so the objects in the array as
415. 38:12well as the size of the array are dynamic now technically an array is an
416. 38:16object so just like the personal object we defined in the last lecture it has a
417. 38:21bunch of key value pairs or properties that we can access using the dot
418. 38:25notation let me prove that to you so here on the console let's look at the
419. 38:29type of selected colors so the type of this array is an object so an array is
420. 38:37an object in JavaScript so here on line 4 we can look at the properties of this
421. 38:43array or this object using the dot notation look these are all the
422. 38:48properties defined in arrays in JavaScript so every time we declare an
423. 38:53array using square brackets that array will automatically receive these
424. 38:58properties we didn't explicitly define them they're just somehow magically
425. 39:03inherited from somewhere else we're going to learn about that later when we
426. 39:07talk about prototypes now in this lecture we're going to look at one of
427. 39:11these properties that is the length property this property returns the
428. 39:16number of items or elements in an array so save the changes you can see we have
429. 39:22three elements in this array now later in the course we have a comprehensive
430. 39:26section about arrays you'll learn about all kinds of operations we can perform
431. 39:30on arrays for now all I want you to take away is that an array is a data
432. 39:36structure that we use to represent a list of items
433. 39:46in the category of reference types you have learned about objects and arrays
434. 39:51now let's take a look at functions functions are one of the fundamental
435. 39:56building blocks in JavaScript a function is basically a set of statements that
436. 40:01performs a task or calculates a value let me show you a couple of examples so
437. 40:07I'm going to declare a function using the function keyword now we need to give
438. 40:11it a name let's call that greet after that we need to add parentheses that's
439. 40:17part of the syntax for declaring functions and then curly braces now what
440. 40:22we have here inside the curly braces is what we refer to as the body of this
441. 40:28function and this is where we add all these statements to define some kind of
442. 40:32logic in our application for example the logic for this function should be to
443. 40:38display a message on the console so here we can add console the log hello world
444. 40:47now note that here we have a statement so we terminated with a semicolon but
445. 40:53when we are declaring a function we don't need to add semicolon at the end
446. 40:57because we are not declaring it like a variable like this okay this is a
447. 41:03function declaration right so now we have a function we can call this
448. 41:09function like this so we add the name of the function and parentheses again and
449. 41:14then semicolon to indicate that this is a statement save the changes now we have
450. 41:21hello world on the console but that's pretty boring what would we do this let
451. 41:25me show you how to make this more interesting our functions can have
452. 41:28inputs and these inputs can change how the function behaves so let's say
453. 41:35instead of displaying hello world we want to display the name of the person
454. 41:39here like hello John so we can add a variable here in between parentheses we
455. 41:48refer to this variable as a parameter so this greet function has one parameter
456. 41:53called name and essentially name is like a variable that is only meaningful
457. 41:59inside dysfunction so inside of this function
458. 42:02we can work with this name variable but it will not be accessible outside of
459. 42:07this function the name is an input to this function so instead of displaying
460. 42:12hello world we can display hello then add a plus here to concatenate two
461. 42:18strings so we can add name after now when calling the great function we need
462. 42:26to pass a value for the name variable or name parameter more accurately so we can
463. 42:32pass John here now we refer to this as an argument so John is an argument to
464. 42:40the greet function a name is a parameter of the greet function it's one of the
465. 42:46things that a lot of programmers don't know they don't know the difference
466. 42:49between a parameter and an argument so a parameter is what we have here at the
467. 42:54time of declaration but the argument is the actual value with supply for that
468. 43:00parameter okay now let's save the changes so we have
469. 43:04hello John now we can reuse this function but with a different input so
470. 43:10we can copy this line here and change on to Mary save the changes now we have two
471. 43:17different messages on the console now a function can have multiple parameters so
472. 43:23here we can separate parameters using a comma so let's add another parameter
473. 43:28like last name now we can change our console not blog add a space here and
474. 43:36then display the last name now when calling this great function we
475. 43:43should pass another argument for the last name right but let's see what
476. 43:46happens if we don't do this so I'm gonna save the changes
477. 43:50see what we got hello John undefined because as I told you before the default
478. 43:57value of variables in JavaScript is undefined so because we did not pass a
479. 44:02value for the last name by default it's undefined so I'm gonna pass another
480. 44:08argument here we separate them using a comma John Smith
481. 44:14and we don't need the second call to the greet function save the changes now we
482. 44:19have hello John Smith
483. 44:28now there is a cleaner way to write this code on line three
484. 44:31all these concatenations are kind of ugly they're getting in the way later in
485. 44:36the course I'll show you how to use template literals to clean up this code
486. 44:40for now don't worry about it let's look at another example of a function so this
487. 44:45function we have here is performing a task so performing a task is task is to
488. 44:52display something on the console but sometimes our functions might calculate
489. 44:56something so here is an example of a function that calculates a value so
490. 45:03again function let's call this function square this function should take a
491. 45:08parameter let's call that number now we need to calculate the square of that
492. 45:13number that is number times number just basic math right now we need to return
493. 45:20this value to whoever is calling this function for that we use the return
494. 45:26keyword that's another reserved keyword so you cannot have a variable called
495. 45:30return okay now instead of calling the greet function let's call the square
496. 45:35function so square we pass two now this returns a value so we can use that value
497. 45:43to initialize a variable for example we can declare another variable called
498. 45:49number and set it to a square of 2 and then we can display that on the console
499. 45:57save the changes so we get 4 now in this particular example we don't necessarily
500. 46:02have to declare a separate variable if all we want to do is to display the
501. 46:08square of 2 on the console we can exclude this variable declaration and
502. 46:13simply pass square of 2 to console.log so when the JavaScript engine execute
503. 46:25this code first is going to call this function it would get a value and then
504. 46:29pass that value to console dot lock let's save the changes and look we still
505. 46:35get 4 now I have a question for you how many function calls do you think we have
506. 46:41in this code we have to function costs square of two is one function call let
507. 46:49me delete this temporarily but consult that lock is also another function call
508. 46:54right because here we have parentheses so recalling the log function which is
509. 46:59defined somewhere and passing an argument we can pass a simple string
510. 47:04like hello or we can pass an expression that expression can be a call to another
511. 47:10function like square of two okay so this is the basics of functions again later
512. 47:17in the course we have a comprehensive section about functions for now all I
513. 47:20want you to take away is that a function is a set of statements that either
514. 47:25performs a task or calculate and returns a value a real world application is
515. 47:32essentially a collection of hundreds or thousands of functions working together
516. 47:36to provide the functionality of that application
517. 47:43hi there it's me mosh again you seem to be very enthusiastic about learning
518. 47:48JavaScript so I want to congratulate you for your determination for learning if
519. 47:52you want to learn more from me I highly encourage you to enroll in my JavaScript
520. 47:56course you can watch this course online or offline as many times as you want at
521. 48:00your own pace the course comes with plenty of exercises and solutions and
522. 48:04you will also receive a certificate of completion by the end of watching the
523. 48:08course in case you're interested the link is in the video description have a
524. 48:12great day and I hope to see you in the course