Skip to content

Commit 2098e2d

Browse files
Mustafa364Mustafa364
authored
Add files via upload
ECMAScript is the standardization of the family of scripting languages that includes JavaScript. New versions of the standard are released every year.
0 parents  commit 2098e2d

File tree

2 files changed

+345
-0
lines changed

2 files changed

+345
-0
lines changed

‎Revision of ES6/app.js

+329
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,329 @@
1+
2+
// REVISION OF ES6
3+
4+
// TEMPLATE LITERALS
5+
6+
// Temmplate literals are literals delimited with backtick (`) characters,
7+
// allowing for multi-line strings, string interpolation with embedded expressions,
8+
// and special constructs called tagged templates.
9+
10+
// EXAMPLES OF TEMPLATE LITERALS
11+
12+
// Template literals allow variables in strings:
13+
14+
// let a = "Apple";
15+
// let b = "Apricot";
16+
// console.log(`Here are the fruits name starting with A ${a} , ${b}`);
17+
18+
//Template literals allow expressions in strings:
19+
20+
// let a = 2;
21+
// let b = 3;
22+
// console.log( `Total sum of a and b is ${(a) + (b)}`)
23+
24+
25+
// SPREAD OPERATORS
26+
27+
// The JavaScript spread operator ( ... ) allows us to
28+
// quickly copy all or part of an existing array
29+
// or object into another array or object.
30+
31+
32+
// EXAMPLES OF SPREAD OPERATORS AND OBJECT DESTRUCRTING :
33+
34+
// let numOne = [1, 2, 3, 4];
35+
// let numTwo = [5, 6, 7, 8];
36+
// let combineNums = [...numOne, ...numTwo];
37+
// console.log(combineNums);
38+
39+
// The spread operator is often used in combination with destructuring.
40+
41+
42+
//Assign the first and second items from numbers to variables and put the rest in an array:
43+
44+
// const numbers = [1, 2, 3, 4, 5];
45+
// const[one, two, three, ...rest] = numbers;
46+
// console.log(numbers);
47+
48+
49+
// We can use the spread operator with the objects too;
50+
51+
// let studentOne = {
52+
// name: "Mustafa",
53+
// id: 2,
54+
// rollnum: 123,
55+
// school: "ABC",
56+
// remarks: "Sharp mind"
57+
// };
58+
// let updatestudentOne = {
59+
// name: "Mustafa",
60+
// id: 2,
61+
// rollnum: 123,
62+
// school: "ABC",
63+
// remarks: "Sharp mind"};
64+
// let students = {...studentOne, ...studentTwo}
65+
// console.log(students)
66+
67+
68+
// We use the spread operator to combine the arrays too;
69+
70+
// let arrOne = [1, 2, 3, 4];
71+
// let arrTwo = ['a','b','c','d'];
72+
// let combinearrs = [...arrOne, ...arrTwo];
73+
// console.log(combinearrs);
74+
75+
76+
// TERNARY OPERATORS
77+
78+
// The conditional (ternary) operator is the only JavaScript operator
79+
// that takes three operands: a condition followed by a question mark ( ? ),
80+
// then an expression to execute if the condition is truthy followed by a colon ( : ),
81+
// and finally the expression to execute if the condition is falsy.
82+
83+
// EXAMPLES OF TERNARY OPERATORS :
84+
85+
// let fruit = "Apple";
86+
// let result = (fruit === "Apple") ? "This is an Apple" : "This is not an Apple";
87+
// console.log(result);
88+
89+
// let name = "Ahmed";
90+
// let a = (name == "Ahmed")? "Ahmed is a good boy" : "Ahmed is not available in the condition";
91+
// console.log(a)
92+
93+
// let name1 = "Ahmed";
94+
// let name2 = "Ali";
95+
// let names = (name1 == "Ahmed" || name2 == "Ali" )? "They are very sharp minded students": "Check the condition";
96+
// console.log(names);
97+
98+
// let name1 = "Ahmed";
99+
// let name2 = "Ali";
100+
// let names = (name1 == "Ahmed" && name2 == "Ali" )? "They are very sharp minded students": "Check the condition";
101+
// console.log(names);
102+
103+
// PROMISE
104+
105+
// A JavaScript Promise object contains both the producing code and calls to the consuming code:
106+
107+
108+
// EXAMPLES OF PROMISE'S :
109+
110+
111+
// let myPromise = new Promise(function(myResolve, myReject) {
112+
113+
// "Producing Code" (May take some time)
114+
115+
// myResolve(); // when successful
116+
// myReject(); // when error
117+
// });
118+
119+
// "Consuming Code" (Must wait for a fulfilled Promise)
120+
121+
// myPromise.then(
122+
// function(value) { /* code if successful */ },
123+
// function(error) { /* code if some error */ }
124+
// );
125+
126+
127+
// let promise = new Promise(function (resolve, reject) {
128+
// let burger = "Available";
129+
// if(burger == "Available"){
130+
// resolve("Yes it was so delicious");
131+
// }else{reject("I still haven't eat the burger")}
132+
// });
133+
// promise.then((resolve) => {
134+
// console.log(resolve);
135+
// }).catch((error) => {
136+
// console.log(error)
137+
// })
138+
139+
// ARROW FUNCTIONS
140+
// Arrow functions were introduced in ES6.
141+
//Arrow functions allow us to write shorter function syntax:
142+
143+
// SIMPLE EXAMPLE OF ARROW FUNCTIONS;
144+
145+
// BEFORE ARROW FUNCTION;
146+
// hello = function() { return "Hello World"; };
147+
148+
// WITH ARROW FUNCTION;
149+
// hello = () { return "Hello World"; }
150+
151+
// Arrow Function With Parameters:
152+
// hello = (val) => "Hello " + val;
153+
154+
// Arrow Function Without Parentheses:
155+
// hello = val => "Hello " + val;
156+
157+
158+
// ARRAY FUNCTIONS;
159+
160+
161+
// First is map()
162+
163+
// Definition and Usage. map() creates a new array from
164+
// calling a function for every array element. map()
165+
// calls a function once for each element in an array.
166+
167+
// EXAMPLES OF ARRAY MAP FUNCTION;
168+
169+
// const players = [
170+
// {firstname : "Babar", lastname: "Azam", age : 25},
171+
// {firstname : "Virat", lastname: "Kholi", age : 30},
172+
// {firstname : "Shahnawaz", lastname: "Dahani", age: 20}
173+
// ];
174+
175+
// let details = players.map( (call) => {
176+
// return [call.firstname, call.lastname, call.age].join(" ")
177+
// });
178+
// console.log(details)
179+
180+
181+
// Second is forEach()
182+
183+
//The forEach() method calls a function for each element in an array.
184+
185+
// The forEach() method is not executed for empty elements.
186+
187+
188+
// EXAMPLES OF ARRAY forEach FUNCTION;
189+
190+
// let numbers = [2, 4, 6];
191+
// numbers.forEach((number) => {
192+
// let multi = 20 * `${number}`
193+
// console.log(multi)
194+
// });
195+
196+
// const employesDeatails = [
197+
// { name: "Mustafa Gabol", age: 20, salary: 4000, currency: "USD" },
198+
// { name: "Ali Ahmed", age: 35, salary: 3000, currency: "USD" },
199+
// { name: "Abu Raza", age: 25, salary: 3700, currency: "USD" },
200+
// { name: "Jason Roy", age: 30, salary: 4200, currency: "USD" }
201+
// ];
202+
203+
// employesDeatails.forEach((staffDetail) => {
204+
// let sentence = `I am ${staffDetail.name} a staff of GM Solutions.`;
205+
// console.log(sentence);
206+
// });
207+
208+
209+
// Third is filter()
210+
211+
// EXAMPLES OF ARRAY FILTERS METHODS
212+
213+
// const ages = [32, 33, 16, 40];
214+
// const result = ages.filter((age) => {
215+
// return age >= 18;
216+
// });
217+
// console.log(result);
218+
219+
// let ages = [31, 14, 37, 20, 45];
220+
// let result = ages.filter((number) => {
221+
// return number >= 40
222+
// });
223+
// console.log(`${result} is greater a number from all other numbers those are written in the code`);
224+
225+
226+
// FOURTH IS FIND AND FIND INDEX OF;
227+
228+
// The method find() is very similar to findIndex() .
229+
// The only difference is that the find method returns
230+
// the element value, but the findIndex method returns the element index.
231+
232+
// EXAMPLES OF FIND AND FIND INDEX OF
233+
234+
// const ages = [3, 10, 18, 20];
235+
236+
// let result = ages.findIndex((age) => {
237+
// return age > 18;
238+
// });
239+
// console.log(`${result} This is shows us that 18 is in three index`);
240+
241+
// let array = [5, 12, 8, 3, 33, 44];
242+
// let isLargeNumber = array.findIndex((age) => {
243+
// return age > 40;
244+
// })
245+
// console.log(`${isLargeNumber} this is also shows us in which index the greater number is`);
246+
247+
248+
249+
// FUNCTIONS OF ES6
250+
251+
// THERE ARE THREE TYPES OF FUNCTIONS OF ES6
252+
// 1, HIGHER ORDER FUNCTIONS
253+
// 2, CALLBACK FUNCTIONS
254+
// 3, CLOSURES FUNCTIONS
255+
256+
257+
// HIGHER ORDER FUNCTIONS
258+
259+
// In Javascript, functions can be assigned to variables
260+
// in the same way that strings or arrays can.
261+
// They can be passed into other functions as parameters or
262+
// returned from them as well. A “higher-order function” is a
263+
// function that accepts functions as parameters and/or returns a function.
264+
265+
266+
// let interview = (name) => {
267+
// if(name == "Ahmed"){
268+
// return function(topic){
269+
// console.log(`Hi ${name}. What is ${topic}? Please explain us.`);
270+
// }
271+
// }if(name == "Ali"){
272+
// return function(topic){
273+
// console.log(`Hi ${name}. What is ${topic}? Please explain us.`);
274+
// }
275+
// }if(name == "Jhon"){
276+
// return function(topic){
277+
// console.log(`Hi ${name}. What is ${topic}? Please explain us.`);
278+
// }
279+
// }else{
280+
// return function() {
281+
// console.log("Welcome to interiew")
282+
// }
283+
// }
284+
// }
285+
// interview("Ahemd")("UI");
286+
// interview("Ali")("UX");
287+
// interview("Jhon")("Full Stack Developer");
288+
289+
// let candidate1 = interview("Ahmed");
290+
// candidate1("UI");
291+
// candidate1("UX");
292+
// candidate1("Full Stack Developer");
293+
// candidate1("Javascript");
294+
295+
296+
// CALLBACK FUNCTIONS
297+
298+
// A callback is a function passed as an argument to another function.
299+
// This technique allows a function to call another function.
300+
// A callback function can run after another function has finished.
301+
302+
// let funB = () => {
303+
// console.log("Welcome to Function(A)") };
304+
// funB()
305+
306+
// let funcA = () => {
307+
// setTimeout(function(){
308+
// console.log("Welcome to function (B)");
309+
// }, 3000);
310+
// }
311+
// funcA()
312+
313+
// CLOSURE FUNCTIONS
314+
315+
// A closure is the combination of a function bundled
316+
//together (enclosed) with references to its surrounding state (the lexical environment).
317+
// In other words, a closure gives you access to an outer function's scope from an inner function.
318+
319+
// let outerFunction = (a) => {
320+
// let b = 10;
321+
// let innerFunction = () => {
322+
// let sum = a + b;
323+
// console.log(`The sum of two numbers is ${sum}.`);
324+
// }
325+
// return innerFunction;
326+
// }
327+
// let inner = outerFunction(5);
328+
// console.log(inner);
329+
// inner();

‎Revision of ES6/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Revision of ES6</title>
8+
</head>
9+
<body>
10+
11+
12+
13+
14+
<script src="app.js"></script>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)