Skip to content

Commit 75c79b6

Browse files
bk408bk408
committed
hoisting, scope, callback & arrow functions, etc.
1 parent edcb7f2 commit 75c79b6

File tree

8 files changed

+186
-0
lines changed

8 files changed

+186
-0
lines changed

‎Hoisting, scope & etc/arrowFunction.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// Q12 - Arrow Function VS Regular Function
2+
3+
// ▶ Syntax
4+
5+
function square(num) {
6+
console.log(num * num);
7+
}
8+
9+
const square = (num) => {
10+
return num * num;
11+
};
12+
13+
// ▶ Implicit Return Keyword
14+
15+
const square = (num) => num * num;
16+
17+
// ▶ Arguments
18+
19+
function fn() {
20+
console.log(arguments);
21+
}
22+
23+
fn(1, 2, 4);
24+
25+
const fnArr = () => {
26+
console.log(arguments);
27+
};
28+
29+
// ▶ "this" Keyword
30+
31+
let user = {
32+
username: "Bhavya Khatri",
33+
rc1: () => {
34+
console.log("You can do it" + this.username);
35+
},
36+
rc2: () => {
37+
console.log("You can do it" + this.username);
38+
},
39+
};
40+
41+
user.rc1();
42+
user.rc2();

‎Hoisting, scope & etc/function.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// Function in JavaScript
2+
3+
// Q1 What is Function Declarations?
4+
5+
function square(num) {
6+
return num * num;
7+
}
8+
9+
// This is also called function statement or function defination
10+
11+
/* ------------------------------------------------------------------------------------------------------------------------------------*/
12+
13+
// Q2 What is Function Expression?
14+
// Ans- When we store a function inside of a variable is called function expression
15+
16+
const square1 = function (num) {
17+
return num * num;
18+
};
19+
20+
/* ------------------------------------------------------------------------------------------------------------------------------------*/
21+
22+
// Q3 What is Annonymos Function?
23+
// Ans- Function which has no name.This annonymos function can be passed as callback
24+
25+
const squareNew = function (num) {
26+
return num * num;
27+
};
28+
29+
console.log(squareNew(5));
30+
31+
/* ------------------------------------------------------------------------------------------------------------------------------------*/
32+
33+
// Q4 What are First class Functions?
34+
35+
function square5(num) {
36+
return num * num;
37+
}
38+
39+
function displaySquare(fn) {
40+
console.log("square is" + fn(5));
41+
}
42+
43+
displaySquare(square5)(
44+
/* ------------------------------------------------------------------------------------------------------------------------------------*/
45+
46+
// Q5 What is IIFE?
47+
// Ans IIFE:- Imediately Invoked Function Expression
48+
49+
function square6(nums) {
50+
console.log(nums * nums);
51+
}
52+
)(8)(
53+
/* ------------------------------------------------------------------------------------------------------------------------------------*/
54+
55+
// Q6 IIFE- o/p based questions
56+
57+
function (x) {
58+
return (function (y) {
59+
console.log(x);
60+
})(2);
61+
}
62+
)(1);

‎Hoisting, scope & etc/functionScope.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// Q7 Function Scope - o/p based questions
2+
3+
for (let i = 0; i < 5; i++) {
4+
setTimeout(function () {
5+
console.warn(i);
6+
}, i * 1000);
7+
}

‎Hoisting, scope & etc/hoisting.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Q8 - Function Hoisting
2+
3+
function functionName() {
4+
console.log("Bhavya Khatri");
5+
}
6+
functionName();
7+
8+
// Q9- Function Hoisting - o/p Based Questions
9+
10+
var x = 21;
11+
var fun = function () {
12+
console.log(x);
13+
var x = 20;
14+
};
15+
16+
fun();

‎Hoisting, scope & etc/iife.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// Q5 What is IIFE?
2+
// Ans IIFE:- Imediately Invoked Function Expression
3+
4+
(function square6(nums) {
5+
console.log(nums * nums);
6+
})(8)(
7+
// Q6 IIFE- o/p based questions
8+
9+
function (x) {
10+
return (function (y) {
11+
console.log(x);
12+
})(2);
13+
}
14+
)(1);

‎Hoisting, scope & etc/params.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Q10 Params VS Arguments
2+
3+
function square(num) {
4+
// Params or Parameter
5+
console.log(num * num);
6+
}
7+
8+
square(6); // Arguments
9+
10+
// Q11 Params VS Arguments - O/P Based Questions
11+
12+
const fn = (a, x, y, ...numbers) => {
13+
console.log(x, y, numbers);
14+
};
15+
16+
fn(5, 6, 3, 7, 8, 9, 2);

‎Hoisting, scope & etc/script.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Hoisting,, Scope, callback & Arrow functions etc</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<h1>Hoisting, Scope, callback & Arrow functions etc.</h1>
11+
<script src="function.js"></script>
12+
<script src="iife.js"></script>
13+
<script src="functionScope.js"></script>
14+
<script src="hoisting.js"></script>
15+
<script src="params.js"></script>
16+
<script src="arrowFunction.js"></script>
17+
</body>
18+
</html>

‎Hoisting, scope & etc/style.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
body {
2+
background-color: thistle;
3+
font-family: sans-serif;
4+
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRy2XP0KdpeXiauf0T1eC-YmKHg0RpDt8qSKQ&usqp=CAU");
5+
background-repeat: no-repeat;
6+
}
7+
8+
h1 {
9+
display: flex;
10+
justify-content: center;
11+
}

0 commit comments

Comments
 (0)