Skip to content

Commit 7b5d0c0

Browse files
piyalidas10piyalidas10
committed
function call + array functions + pbject array grouping
1 parent 3506607 commit 7b5d0c0

File tree

6 files changed

+195
-2
lines changed

6 files changed

+195
-2
lines changed

‎array_functions.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ <h2>Array Functions</h2>
3535

3636
/* Check from user array if name with "Ram" is exist or not using map and includes
3737
includes function always return true/false */
38-
isPresent = userArr.map(ele => ele.name).includes('Ram');
38+
// isPresent = userArr.map(ele => ele.name).includes('Ram');
39+
isPresent = userArr.find(ele => ele.name === 'Ram')
3940
console.log('isPresent => ', isPresent);
4041

4142
// Get user info whose name is 'Ram' using filter. It will return array

‎function_call.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Javascript Function Call Methods</title>
5+
</head>
6+
<body>
7+
<h2>Javascript Function Call Methods</h2>
8+
<h3>These four methods are not applicable to arrow functions</h3>
9+
<script>
10+
function show() {
11+
console.log(this);
12+
return 10;
13+
}
14+
15+
// Method 1
16+
// calling unction as a function is called "Function Invocation Pattern FIP" .
17+
// this - Global object always.
18+
var a = show();
19+
console.log(a);
20+
21+
22+
// Method 2
23+
// constuctor invocation pattern CIP
24+
// this - newly created object
25+
var b = new show();
26+
console.log(b);
27+
28+
29+
// Method 3
30+
// method invocation pattern MIP
31+
// this - object before dot
32+
let dog = {
33+
name: 'abc',
34+
age: 8,
35+
canRun: function() {
36+
console.log(this); // this will print the object
37+
}
38+
}
39+
dog.canRun();
40+
41+
42+
// Method 4
43+
// manually passing value of 'this'
44+
// indirectly call the function, Indirect innovation pattern
45+
// apply, bind, call
46+
let animal = {
47+
country: 'India'
48+
};
49+
50+
let tiger = {
51+
name: 'abc',
52+
age: 8,
53+
canRun: function() {
54+
console.log(this);
55+
}
56+
}
57+
tiger.canRun.call(animal);
58+
tiger.canRun.apply(animal);
59+
60+
let lion = {
61+
name: 'abc',
62+
age: 8,
63+
canRun: function(param) {
64+
console.log(this);
65+
console.log(param);
66+
}
67+
}
68+
69+
lion.canRun.call(animal, 'hi');
70+
lion.canRun.apply(animal, ['how']);
71+
72+
73+
</script>
74+
</body>
75+
</html>

‎function_expression.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Javascript Function Expression</title>
5+
</head>
6+
<body>
7+
<h2>Javascript Function Expression</h2>
8+
<script>
9+
10+
// You will get type erroror calling show function
11+
// console.log(show);
12+
// show();
13+
// let show = function() {
14+
// console.log(this);
15+
// }
16+
17+
// Correct method
18+
let show1 = function() {
19+
console.log(this);
20+
}
21+
show1();
22+
var a = new show1();
23+
console.log(a);
24+
25+
// showing correct method with hoisting. why calling show1 function after function expression is needed
26+
// Hoisting method break it into two statements 1. delaration 2. expression. put expression part at top of the page
27+
28+
// let show1 = undefined;
29+
// show1 = function() {
30+
// console.log(this);
31+
// }
32+
// show1();
33+
34+
35+
</script>
36+
</body>
37+
</html>

‎method_invocation_pattern.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Javascript Method invocation pattern</title>
5+
</head>
6+
<body>
7+
<h2>Javascript Method invocation pattern</h2>
8+
<script>
9+
let dog = {
10+
name: 'abc',
11+
age: 8,
12+
canRun: function() {
13+
console.log(this); // this will print the object
14+
}
15+
}
16+
console.log(dog.canRun());
17+
</script>
18+
</body>
19+
</html>

‎object_array_grouping.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Object Array Grouping</title>
5+
</head>
6+
<body>
7+
<h2>Object Array Grouping</h2>
8+
<div id="result"></div>
9+
<script>
10+
let ObjArr = [
11+
{EmpId: 1, EmpName: 'Sam', Dept: 'Engg', Salary: 1000},
12+
{EmpId: 2, EmpName: 'Smith', Dept: 'HR', Salary: 2000},
13+
{EmpId: 3, EmpName: 'Denis', Dept: 'Engg', Salary: 4000},
14+
{EmpId: 4, EmpName: 'Danny', Dept: 'IT', Salary: 3000},
15+
{EmpId: 5, EmpName: 'David', Dept: 'HR', Salary: 4000},
16+
{EmpId: 6, EmpName: 'John', Dept: 'IT', Salary: 2000},
17+
];
18+
var array_group_by = (records, key) => {
19+
Arr = [];
20+
let keyArr = [...new Set(records.map(ele => ele[key]))];
21+
keyArr.forEach(each => {
22+
const createArr = ObjArr.filter(ele => ele[key] === each);
23+
Arr.push({gorupname : each, goupvalue : createArr});
24+
});
25+
return Arr;
26+
}
27+
28+
// Group by Dept
29+
groupArr = array_group_by(ObjArr, 'Dept');
30+
console.log('Group by Dept -----------------------------');
31+
console.log(groupArr);
32+
33+
resultDiv = document.getElementById('result');
34+
let data = "";
35+
data += "<table border = '1'>";
36+
for(let i = 0; i< groupArr.length; i++) {
37+
data += '<tr><th colspan="4">' + groupArr[i].gorupname + '</th></tr>';
38+
let objKeys = Object.keys(groupArr[i].goupvalue[0]);
39+
data += '<tr>';
40+
for(let k=0; k<objKeys.length; k++) {
41+
data += '<th>' + objKeys[k] + '</th>';
42+
}
43+
data += '</tr>';
44+
for (let j=0; j<groupArr[i].goupvalue.length; j++) {
45+
data += '<tr>';
46+
for(let k=0; k<objKeys.length; k++) {
47+
data += '<td>' + groupArr[i].goupvalue[j][objKeys[k]] + '</td>';
48+
}
49+
data += '</tr>';
50+
}
51+
}
52+
data.innerHTML += '</table>';
53+
resultDiv.innerHTML = data;
54+
</script>
55+
</body>
56+
</html>

‎readme.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,9 @@ Every function in javascript has access these Apply, Call, Bind methods
2626
Funtion.prototype.myunction = function() {
2727
2828
}
29-
```
29+
```
30+
31+
https://medium.com/dailyjs/how-to-remove-array-duplicates-in-es6-5daa8789641c
32+
33+
## ng-India Webinar - Master 5 Most Popular Concepts of JavaScript
34+
https://www.youtube.com/watch?v=F2V7MgehDSY

0 commit comments

Comments
 (0)