Skip to content

Commit 52dfc55

Browse files
HansUXdevHansUXdev
committed
minor updates to chapter 1
- declaration function slide added along with code example. - add logo - add recommended extensions for vscode
1 parent 3bb23d9 commit 52dfc55

File tree

10 files changed

+309
-35
lines changed

10 files changed

+309
-35
lines changed

‎.vscode/extensions.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
// See http://go.microsoft.com/fwlink/?LinkId=827846
33
// for the documentation about the extensions.json format
44
"recommendations": [
5+
"HansUXdev.bootstrap5-snippets",
6+
"HansUXdev.javascript-first-snippets",
57
"evilz.vscode-reveal",
68
"formulahendry.code-runner",
79
"statiolake.vscode-markdown-run-snippet",
10+
"hediet.vscode-drawio",
11+
"gitduck.code-streaming",
812
"softwaredotcom.music-time",
9-
"HansUXdev.javascript-first-snippets",
1013
"ritwickdey.LiveServer"
1114
]
1215
}

‎00-Drafts/00-Advanced-Node/readme.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
## Interview Questions
2+
3+
1. Have you ever debugged and fixed memory leaks in Node.js applications?
4+
- https://www.toptal.com/nodejs/debugging-memory-leaks-node-js-applications
5+
6+
- https://marmelab.com/blog/2018/04/03/how-to-track-and-fix-memory-leak-with-nodejs.html
7+
-
8+
2. Have you ever debugged and fixed event loop lags in Node.js applications?
9+
- https://medium.com/comsystoreply/monitoring-node-js-watch-your-event-loop-lag-c5071bc10f02
10+
-
11+
3. Do you know what’s the purpose of having 2 generations in the Node.js garbage collector?
12+
-

‎01-Reteaching-JavaScript/04-TypesOfFunctions/code/declartions&ExpressionsBrowser.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
AAhoisted = "undeclared, hoisted";
2+
var AAA = "declared, not hoisted, var doesn't matter as much, let/const still better";
3+
function functionDeclaration() {
4+
console.log(`\n Is DECLARATION hoisted: ${global.functionEXPRESSION} \n`);
5+
}
6+
var functionEXPRESSION = function () {
7+
console.log(`\n Is EXPRESSION hoisted: ${global.functionEXPRESSION} \n`);
8+
}
9+
// Log the global object
10+
console.log(global)
11+
console.log("function DECLARATION are: ", global.functionDeclaration);
12+
console.log("function EXPRESSION are: ", global.functionEXPRESSION);
13+
14+
// Predict the output code
15+
functionDeclaration();
16+
functionEXPRESSION();

‎01-Reteaching-JavaScript/04-TypesOfFunctions/code/declationFunction.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
function add(param1, param2){
2+
return param1 + param2;
3+
};
4+
add(1, 2)

‎01-Reteaching-JavaScript/04-TypesOfFunctions/slides/01-declaration-function.md

Lines changed: 139 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: "Functions"
3-
# logoImg: "https://raw.githubusercontent.com/HansUXdev/JavaScript-First/2acf5840c15af96602aceb66303ea69c5b75e344/logo.svg"
3+
logoImg: "https://raw.githubusercontent.com/HansUXdev/JavaScript-First/2acf5840c15af96602aceb66303ea69c5b75e344/logo.svg"
44
theme : "night"
55
transition: "slide"
66
highlightTheme: "dracula"
@@ -45,34 +45,47 @@ top: -20%!important;
4545

4646
</style>
4747

48-
### Chapter Overview
48+
<!-- ### Chapter Overview
4949
5050
This chapter should cover the following:
5151
1. Anatomy of functions
5252
2. Catagories of Functions
5353
3. Simple Example of Each function
5454
- Links to subjections for detailed breakdown of each
5555
56-
---
56+
--- -->
5757

5858
### What is Function?
5959

60-
A block of reusable code.
60+
> "A block of reusable code." {.fragment .current-only }
6161
62-
---
62+
:::block {.fragment .current-only }
63+
There are two steps to this:
64+
1. creating the function
65+
2. using it / calling it.
66+
67+
:::
6368

6469

6570

71+
---
6672

6773

74+
### First-class Functions
6875

76+
> "functions are first-class citizens, which means they are treated like any other variable. This is where JavaScript gets it's best features." {.fragment .current-only}
6977
7078

71-
<!-- will be... automatically genrated from code file with a tool -->
79+
:::block {.fragment .current-only }
80+
As a first class citizen, functions can be used as:
81+
1. callbacks in other function,
82+
2. creating asynchronous operations,
83+
3. preform recursion for iterative operations
84+
85+
:::
7286

7387
---
7488

75-
7689
### Function Declaration
7790

7891
What a function declaration looks like:
@@ -87,42 +100,143 @@ Has the following Features:
87100

88101
**Block Syntax**, with `{}` at the begining and the end of the function and usually followed by a `;` {.fragment .current-only data-code-focus=1-3}
89102

90-
91-
:::block
92103
* **Function** keyword
93104
* Name of function, `add`
94105
* Parameters `(param1, param2)`, which act as variables inside the functions definition.
95106
{.fragment .current-only data-code-focus=1-1}
96-
:::
97107

98108
**Return** keyword, ends the function
99109
and the result is returned {.fragment .current-only data-code-focus=2-2}
100110

111+
---
112+
113+
114+
### Using Functions
115+
116+
```JavaScript
117+
add(1, 2) //return a value of 3
118+
```
119+
**Calling** the Function:
120+
121+
We pass *values*, `(1,2)`, into the **arguements**
122+
{.fragment .current-only data-code-focus=1-1}
123+
124+
**Values of arguements** can be any type of variable, and because functions are *treated like variable*, you use can pass them into a **arguement** which is known as a **callback**.
125+
{.fragment .current-only data-code-focus=1-1}
126+
127+
128+
---
129+
130+
### Function Declaration - Node.js
131+
132+
```javascript
133+
AAhoisted = "undeclared, hoisted";
134+
var AAA = "declared, not hoisted, var doesn't matter as much, let/const still better";
135+
function functionDeclaration() {
136+
console.log(`\n Is DECLARATION hoisted: ${global.functionEXPRESSION} \n`);
137+
}
138+
var functionEXPRESSION = function () {
139+
console.log(`\n Is EXPRESSION hoisted: ${global.functionEXPRESSION} \n`);
140+
}
141+
// Log the global object
142+
console.log(global)
143+
console.log("function DECLARATION are: ", global.functionDeclaration);
144+
console.log("function EXPRESSION are: ", global.functionEXPRESSION);
145+
146+
// Predict the output code
147+
functionDeclaration();
148+
functionEXPRESSION();
149+
```
150+
These functions, variables and hoisting work **differently** in the **node.js** runtime environment! {.fragment .current-only data-code-focus=1-8}
151+
152+
Will a function **DECLARATION** be **hoisted** in node and added to the global object?{.fragment data-code-focus=3-5}
101153

102-
:::block
103-
* Calling the Function
154+
Will a function **EXPRESSION** be **hoisted** in node and added to the global object?{.fragment data-code-focus=6-8}
104155

105-
* When the function is called, we pass values into the **arguements** `(1,2)`
106-
{.fragment .current-only data-code-focus=4-4}
156+
Log the global object and find out.{.fragment .current-only data-code-focus=9-12}
107157

108-
* When the function is called, we pass values into the **arguements** `(1,2)`
109-
{.fragment .current-only data-code-focus=1-2}
110158

159+
### Type you guess in chat. {.fragment .current-only}
111160

112-
### Function Declaration
161+
### RUN the code. {.fragment .current-only}
113162

114-
```javascript
163+
### POINTS for correct answers. {.fragment .current-only}
164+
165+
---
166+
167+
### Function Declaration - Browser
168+
169+
```javascript
170+
AAhoisted = "undeclared, hoisted";
171+
var AAA = "declared, hoisted, dontUseVar";
115172
function functionDeclaration(params) {
116-
console.log(`hello ${params} \n`);
173+
console.log(`\n Is Declaration hoisted: ${window.functionDeclaration} \n`);
117174
}
118-
functionDeclaration("hello");
119-
console.log(global) // not hoisted in node.js
120-
// console.log(window.functionDeclaration("hello"))
121-
```
122-
Remember function **declarations** is **hoisted** in the browser but not in node in{.fragment .current-only data-code-focus=5-6}
175+
var functionEXPRESSION = function () {
176+
console.log(`\n Is EXPRESSION hoisted: ${window.functionEXPRESSION} \n`);
177+
}
178+
// Log the global object
179+
console.log(window)
180+
console.log("function DECLARATION are: ", window.functionDeclaration);
181+
console.log("function EXPRESSION are: ", window.functionEXPRESSION);
182+
// Predict the output code
183+
functionDeclaration();
184+
functionEXPRESSION();
185+
```
186+
187+
These functions work **differently** in the **browser** ! {.fragment .current-only data-code-focus=1-8}
123188

124-
This errors out **declarations** is **hoisted** in the browser but not in node in{.fragment .current-only data-code-focus=5-5}
189+
Will a function **DECLARATION** be **hoisted** in *browser* and added to the global object?{.fragment data-code-focus=3-5}
190+
191+
Will a function **EXPRESSION** be **hoisted** in *browser* and added to the global object?{.fragment data-code-focus=6-8}
192+
193+
Log the global object and find out.{.fragment .current-only data-code-focus=9-12}
194+
195+
### Type you guess in chat. {.fragment .current-only}
196+
197+
### RUN the code. {.fragment .current-only}
198+
199+
### POINTS for correct answers. {.fragment .current-only}
125200

126201
---
127202

203+
### Thank You for reading...
204+
205+
Follow me on Social:
206+
207+
208+
`@HansOnCoding`
209+
210+
:::block {.fragment .current-only }
211+
212+
<a href="https://twitter.com/hansOnCoding" class="TWITTER">
213+
<img src="https://img.shields.io/badge/twitter-%2312100E.svg?&style=for-the-badge&logo=twitter&logoColor=white" />
214+
</a>
215+
<a href="https://medium.com/@hansOnConsult" class="MEDIUM">
216+
<img src="https://img.shields.io/badge/medium-%2312100E.svg?&style=for-the-badge&logo=medium&logoColor=white" />
217+
</a>
218+
<a href="https://dev.to/HansOnCoding" class="DEV TO">
219+
<img src="https://img.shields.io/badge/DEV.TO-%230A0A0A.svg?&style=for-the-badge&logo=dev-dot-to&logoColor=white" />
220+
</a>
221+
<br>
222+
<a href="https://www.youtube.com/channel/UCCGfELkPCJg1XHxQfFFz7pw/about" class="YOUTUBE">
223+
<img src="https://img.shields.io/badge/youtube-%23FF0000.svg?&style=for-the-badge&logo=youtube&logoColor=white" />
224+
</a>
225+
<a href="https://www.twitch.tv/hansoncoding" class="Twitch">
226+
<img src="https://img.shields.io/twitch/status/hansoncoding?style=for-the-badge" />
227+
</a>
228+
229+
:::
230+
231+
`@HansUxDev`
232+
233+
:::block {.fragment .current-only }
234+
235+
<a href="https://github.com/sponsors/HansUXdev" class="GITHUB">
236+
<img src="https://img.shields.io/badge/github-%230A0A0A.svg?&style=for-the-badge&logo=github&logoColor=white" />
237+
</a>
238+
239+
240+
:::
241+
128242

‎01-Reteaching-JavaScript/04-TypesOfFunctions/slides/03-Async.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,13 @@ This chapter should cover the following:
4646

4747
---
4848

49+
## Most Helpful meme
50+
51+
<!-- ![](imgs/CallbackMeme.png) -->
52+
![](https://i.imgflip.com/4etnqo.jpg)
53+
54+
---
55+
4956
### What is a Promise?
5057

5158

‎01-Reteaching-JavaScript/04-TypesOfFunctions/slides/00-arrow-functions.md renamed to ‎01-Reteaching-JavaScript/04-TypesOfFunctions/slides/resources.md

File renamed without changes.

‎01-Reteaching-JavaScript/node.md

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,32 @@ Introduction to Node.js
2020

2121
### Overview
2222

23-
1. Node.js
24-
2. NPM
25-
3. Package.json
26-
4. npm install
27-
5. npm audit fix
28-
6. NVM
23+
1. Why Learn JavaScript with Node.js
24+
2. Why learn terminal, git, NVM and docker?
25+
3. What is NPM & NVM ?
26+
4. What is the Package.json?
27+
5. Global Modules vs 3rd Party modules
28+
6. npm install
29+
7. npm audit fix
30+
8. Using NVM
2931

3032
---
3133

34+
### Why Learn JavaScript with Node.js
35+
36+
Node.js made JavaScript a programing language and can be used to learn the fundemental how to build: {.fragment }
37+
38+
* Servers {.fragment }
39+
* Websites {.fragment }
40+
* Mobile Apps {.fragment }
41+
* Hardware {.fragment }
42+
* AI {.fragment }
43+
* Much more {.fragment }
44+
45+
---
46+
47+
48+
3249

3350
### NPM
3451

0 commit comments

Comments
 (0)