Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 158ef23

Browse files
objects
1 parent 5626d83 commit 158ef23

File tree

1 file changed

+350
-0
lines changed

1 file changed

+350
-0
lines changed

‎objects.js‎

Lines changed: 350 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,350 @@
1+
2+
/*
3+
*********************************** OBJECTS *************************************
4+
In JavaScript, an object is an unordered collection of key - value pairs.Each key - value pair is called a property.
5+
6+
The key of a property can be a string.And the value of a property can be any value, e.g., a string, a number, an array, and even a function.
7+
8+
JavaScript provides you with many ways to create an object.The most commonly used one is to use the object literal notation.
9+
10+
let person = {
11+
firstName: 'John',
12+
lastName: 'Doe',
13+
'building number': 1234
14+
};
15+
16+
console.log(person.firstName); //accessing property
17+
18+
to access building number you need array like notation
19+
console.log(person['building number']); //array like notation
20+
21+
modify values in object
22+
23+
person.lastName = 'ibrahim';
24+
console.log(person);
25+
26+
add new property
27+
person.age = 25;
28+
console.log('new added value:', person.age);
29+
30+
deleting property
31+
delete person.age;
32+
33+
checking if property exist
34+
console.log('lastName' in person);
35+
36+
accessing all key and value using for in loop
37+
38+
for (let key in person) {
39+
console.log(key + ":" + person[key]);
40+
}
41+
console.log(person);
42+
43+
******************* object using new keyword *********************
44+
45+
The regular {... } syntax allows us to create one object.But often we need to create many similar objects, like multiple users or menu items and so on.
46+
47+
That can be done using constructor functions and the "new" operator.
48+
49+
50+
new keyword
51+
var myDetails = new myDetails();
52+
myDetails.age = 25;
53+
myDetails.firstName = 'aamir';
54+
myDetails.lastName = 'ali';
55+
myDetails.greet = function () {
56+
console.log("welllcome to js");
57+
}
58+
console.log(myDetails);
59+
console.log(myDetails.greet);
60+
61+
************ constructor *********** *
62+
63+
Constructor functions technically are regular functions.There are two conventions though:
64+
65+
They are named with capital letter first.
66+
They should be executed only with "new" operator.
67+
68+
Using constructor functions to create objects gives a great deal of flexibility.The constructor function may have parameters that define how to construct the object, and what to put in it.
69+
70+
For instance:
71+
72+
function User(name) {
73+
this.name = name;
74+
this.isAdmin = false;
75+
}
76+
77+
let user = new User("Jack");
78+
79+
alert(user.name); // Jack
80+
alert(user.isAdmin); // false
81+
82+
When a function is executed with new, it does the following steps:
83+
84+
A new empty object is created and assigned to this.
85+
The function body executes.Usually it modifies this, adds new properties to it.
86+
The value of this is returned.
87+
88+
89+
add method in constructor
90+
91+
Of course, we can add to this not only properties, but methods as well.
92+
93+
function User(name) {
94+
this.name = name;
95+
96+
this.sayHi = function () {
97+
alert("My name is: " + this.name);
98+
};
99+
}
100+
101+
let john = new User("John");
102+
103+
john.sayHi(); // My name is: John
104+
105+
****** objects methos ****** *
106+
an object property that include a function declaration is known as object method
107+
108+
types of object method
109+
1) Object.freez():
110+
111+
changinfg the frozen object is impossible
112+
it prevent the addition and deletion of property
113+
also prevent changes
114+
115+
Object.freeze(john);
116+
117+
2) objet.seal():
118+
you can not add or remove property but you can modify property
119+
120+
Object.seal(john);
121+
122+
A function which is associated with object called method
123+
When a function is a property of an object, it becomes a method.
124+
125+
four ways to associate function to object
126+
let person = {
127+
name: "John",
128+
age: 30,
129+
}
130+
person.sayHello = function () {
131+
console.log("Hi! My Name Is ");
132+
}
133+
person.sayHello();
134+
135+
************ 2 *****************
136+
let person = {
137+
name: "John",
138+
age: 30,
139+
};
140+
function greet() {
141+
console.log("say hello");
142+
}
143+
person.sayHello = greet;
144+
person.sayHello();
145+
146+
************* 3 *************
147+
let person = {
148+
name: "John",
149+
age: 30,
150+
sayHello: function () {
151+
console.log("hello11");
152+
}
153+
};
154+
person.sayHello();
155+
156+
************* 4 ***************
157+
let person = {
158+
name: "John",
159+
age: 30,
160+
sayHello() {
161+
console.log("hello11");
162+
}
163+
};
164+
person.sayHello();
165+
166+
167+
168+
------------------------------------------------------------------------------------------------
169+
********** optional chaining **********
170+
Optional chaining is a feature of javascript that allow you to access the properties of an object and element of an array without having to check the array and object is null or undefine first it is represent by?.operator and used to cociesly access deeply nested property without having to write long chain of if else statement
171+
172+
the optional chaining?.stops the evaluation if the value before?.is undefined or null and returns undefined.
173+
174+
**********example *********
175+
176+
let user = {}; // user has no address
177+
alert(user?.address?.street); // undefined (no error)
178+
179+
The?.[] syntax also works, if we’d like to use brackets[] to access properties instead of dot..Similar to previous cases, it allows to safely read a property from an object that may not exist.
180+
181+
let key = "firstName";
182+
183+
let user1 = {
184+
firstName: "John"
185+
};
186+
187+
let user2 = null;
188+
189+
alert(user1?.[key]); // John
190+
alert(user2?.[key]); // undefined
191+
192+
delete user?.name;
193+
194+
************ object destructuring ***********************
195+
196+
the destructurig assignment syntex is a javascript expression that make it possible to unpack from Array or property from object, into distinct variables.
197+
198+
let obj = {
199+
name: 'ali',
200+
age: 25,
201+
city: {
202+
country: 'USA',
203+
state: 'California'
204+
}
205+
};
206+
207+
let { name, age, city } = obj;
208+
console.log(`name is${name} and age is ${age} city is ${city.state}`);
209+
210+
************************* object properties***************************************************
211+
212+
Object properties have a three special property called flags
213+
214+
1)writable => if true, then value can be change otherwise read only.
215+
2) enumberable => if true, then listed in loops otherwise not listed.
216+
3) configurable => if true, then property can be deleted and its value can be modified.
217+
218+
When we create a property "the usual way", all of them are true.But we also can change them anytime.
219+
220+
The method Object.getOwnPropertyDescriptor allows to query the full information about a property.
221+
222+
The syntax is:=>
223+
224+
let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);
225+
226+
obj => the object to get information from
227+
propertyName => the name of the property.
228+
229+
example=>
230+
let prop1 = {
231+
name: "prop1",
232+
value: 20
233+
};
234+
235+
let descriptor = Object.getOwnPropertyDescriptor(prop1, "name");
236+
console.log(JSON.stringify(descriptor, null, 2));
237+
238+
output => {
239+
"value": "prop1",
240+
"writable": true,
241+
"enumerable": true,
242+
"configurable": true
243+
}
244+
245+
To change the flags, we can use Object.defineProperty.
246+
247+
The syntax is:=>
248+
249+
Object.defineProperty(obj, propertyName, descriptor)
250+
251+
252+
For instance, here a property name is created with all falsy flags:
253+
254+
let user = {};
255+
256+
Object.defineProperty(user, "name", {
257+
value: "John"
258+
});
259+
260+
let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
261+
262+
alert(JSON.stringify(descriptor, null, 2));
263+
264+
{
265+
"value": "John",
266+
"writable": false,
267+
"enumerable": false,
268+
"configurable": false
269+
}
270+
271+
272+
non - writable=>
273+
Let’s make user.name non - writable(can’t be reassigned) by changing writable flag:
274+
275+
let user = {
276+
name: "John"
277+
};
278+
279+
Object.defineProperty(user, "name", {
280+
writable: false
281+
});
282+
283+
user.name = "Pete"; // Error: Cannot assign to read only property 'name'
284+
285+
non - enumbrable=>
286+
we can set enumerable: false.Then toString won’t appear in a for..in loop, just like the built -in one:
287+
288+
let user = {
289+
name: "John",
290+
toString() {
291+
return this.name;
292+
}
293+
};
294+
295+
Object.defineProperty(user, "toString", {
296+
enumerable: false
297+
});
298+
299+
// Now our toString disappears:
300+
for (let key in user) alert(key); // name
301+
302+
303+
non - configurable=>
304+
The non - configurable flag(configurable: false) is sometimes preset for built -in objects and properties.
305+
A non - configurable property can’t be deleted, its attributes can’t be modified.
306+
For instance, Math.PI is non - writable, non - enumerable and non - configurable:
307+
308+
309+
let descriptor = Object.getOwnPropertyDescriptor(Math, 'PI');
310+
alert(JSON.stringify(descriptor, null, 2));
311+
312+
{
313+
"value": 3.141592653589793,
314+
"writable": false,
315+
"enumerable": false,
316+
"configurable": false
317+
}
318+
319+
320+
Please note: configurable: false prevents changes of property flags and its deletion, while allowing to change its value.
321+
322+
323+
Object.defineProperties=>
324+
325+
There’s a method Object.defineProperties(obj, descriptors) that allows to define many properties at once.
326+
327+
The syntax is:=>
328+
329+
Object.defineProperties(obj, {
330+
prop1: descriptor1,
331+
prop2: descriptor2
332+
// ...
333+
});
334+
335+
For instance:=>
336+
337+
Object.defineProperties(user, {
338+
name: { value: "John", writable: false },
339+
surname: { value: "Smith", writable: false },
340+
// ...
341+
});
342+
343+
*/
344+
345+
346+
347+
348+
349+
350+

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /