Skip to content

Commit 6b4b78c

Browse files
piyalidas10piyalidas10
committed
Object array index + replace + dot vs bracket
1 parent 1dc76be commit 6b4b78c

File tree

4 files changed

+107
-12
lines changed

4 files changed

+107
-12
lines changed

β€ŽObject_array_findIndex.htmlβ€Ž

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Replace Object value of matching employee id</title>
5+
</head>
6+
<body>
7+
<h2>Replace Object value of matching employee id</h2>
8+
<script>
9+
let ObjArr = [
10+
{EmpId: 1, EmpName: 'Sam', Dept: 'Engg', Salary: 1000},
11+
{EmpId: 2, EmpName: 'Smith', Dept: 'HR', Salary: 2000},
12+
{EmpId: 3, EmpName: 'Denis', Dept: 'Engg', Salary: 4000},
13+
{EmpId: 4, EmpName: 'Danny', Dept: 'IT', Salary: 3000},
14+
{EmpId: 5, EmpName: 'David', Dept: 'HR', Salary: 4000},
15+
{EmpId: 6, EmpName: 'John', Dept: 'IT', Salary: 2000},
16+
];
17+
18+
// find index whose EmpName is 'David'
19+
const matchingIndex = ObjArr.findIndex(ele => ele.EmpName === 'David');
20+
console.log(matchingIndex);
21+
22+
// Replace value the matching index using newObj
23+
newObj = {EmpId: 5, EmpName: 'David', Dept: 'EC', Salary: 14000};
24+
if (matchingIndex !== -1) {
25+
Object.assign(ObjArr[matchingIndex], newObj);
26+
}
27+
28+
console.table(ObjArr);
29+
</script>
30+
</body>
31+
</html>

β€ŽObject_deep_shallow_clone.htmlβ€Ž

Lines changed: 0 additions & 12 deletions
This file was deleted.

β€ŽObject_dot_notation_vs_brackets.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>Object : dot notation vs. brackets</title>
5+
</head>
6+
<body>
7+
<h2>Object : dot notation vs. brackets</h2>
8+
<script>
9+
let fruits = [
10+
{name: 'Banana', price: 5, count: 5},
11+
{name: 'Apple', price: 12, count: 4},
12+
{name: 'Mango', price: 20, count: 2}
13+
];
14+
15+
// print object values with dot notation.
16+
let nameValues = fruits.map(ele => ele.name);
17+
console.log('Name field values => ', nameValues);
18+
19+
// square bracket notation is useful when dealing with property names which will be dynamic
20+
function displayKeyValues(keyName) {
21+
let values = fruits.map(ele => ele[keyName]);
22+
console.log(keyName + ' values => ', values);
23+
}
24+
displayKeyValues('name');
25+
displayKeyValues('price');
26+
displayKeyValues('count');
27+
28+
/* The property name is assigned to a variable and
29+
you want to access the property value by this variable
30+
*/
31+
let obj = {'firstname': 'Joe', 'lastName': 'Brown', 'age': 30};
32+
let myname = 'firstname';
33+
console.log('firstname with dot notation => ', obj.myname);
34+
console.log('firstname with brackets => ', obj[myname]);
35+
</script>
36+
</body>
37+
</html>

β€ŽObject_with_Dot_vs_Bracket.htmlβ€Ž

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>𝑫𝑢𝑻 𝒗𝒔 𝑩𝑹𝑨π‘ͺ𝑲𝑬𝑻 π’π’π’•π’‚π’•π’Šπ’π’ π’Šπ’ #π’‹π’‚π’—π’‚π’”π’„π’“π’Šπ’‘π’•</title>
5+
</head>
6+
<body>
7+
<h2>𝑫𝑢𝑻 𝒗𝒔 𝑩𝑹𝑨π‘ͺ𝑲𝑬𝑻 π’π’π’•π’‚π’•π’Šπ’π’ π’Šπ’ #π’‹π’‚π’—π’‚π’”π’„π’“π’Šπ’‘π’•</h2>
8+
<pre>
9+
Most of us have learned that we can access the property of an Object using either dot or bracket notation and both are the same.
10+
11+
This is true in most cases, but there are some edge cases in which these two differ.
12+
13+
It's only when we make a mistake, we realize the difference...𝒂𝒏𝒅 𝒕𝒉𝒂𝒕'𝒔 π’•π’π’•π’‚π’π’π’š 𝒂𝒍𝒍 π’“π’Šπ’ˆπ’‰π’•.
14+
15+
I am sharing the learning from my mistake:
16+
17+
If you try to access the property value by providing the property name as a variable in the dot notation, you will get undefined, which is not the case with bracket notation.
18+
19+
Screenshot attached.
20+
</pre>
21+
<pre>
22+
Its because of the way it is processed. While with dot notation it will continue fetching from left to right.
23+
So first it will look for name then inside that next thing specified after dot i.e. printname property and so on if more is there.
24+
25+
But with bracket notation before directly looking for that property, it will first evaluate that bracket part and then fetch it.
26+
So that's why we can give variables and even expressions in bracket notation.
27+
</pre>
28+
<script>
29+
let name = {
30+
'firstname': 'Piyali',
31+
'lastname': 'Das'
32+
};
33+
let printname = 'firstname';
34+
35+
console.log(name.printname);
36+
console.log(name[printname]);
37+
</script>
38+
</body>
39+
</html>

0 commit comments

Comments
Β (0)