JS Objects Flashcards
What is JavaScript Objects?
Object is an unordered collection of key-value pairs. Each key-value pair is called a property
The key of a property can be a string. And the value of a property can be any value.
They are called properties and methods when they are inside objects
How create an object ?
let empty = {};
How create an object and use the object literal??
const person = {
name: [“Bob”, “Smith”],
age: 32,
bio() {
console.log(${this.name[0]} ${this.name[1]} is ${this.age} years old.);
},
introduceSelf() {
console.log(Hi! I'm ${this.name[0]}.);
},
};
How create an object with properties?
To create an object with properties, you use the key:value within the curly braces
let person = {
firstName: ‘John’,
lastName: ‘Doe’
};
How accessing properties to obj ?
To access a property of an object, you use one of two notations:
-the dot notation
- array-like notation.
The dot notation (.)
let person = {
firstName: ‘John’,
lastName: ‘Doe’
};
console.log(person.firstName);
console.log(person.lastName);
Array-like notation ( []) Bracket notation
let person = {
firstName: ‘John’,
lastName: ‘Doe’
};
console.log(person[‘firstName’]);
console.log(person[‘lastName’]);
const myDataName = “height”;
const myDataValue = “1.75m”;
person[myDataName] = myDataValue;
person.height; //1.75m
When a property name contains spaces:
let address = {
‘building no’: 3960,
street: ‘North 1st street’,
state: ‘CA’,
country: ‘USA’
};
address[‘building no’];
Modifying the value of a property
let person = {
firstName: ‘John’,
lastName: ‘Doe’
};
change the value of a property, you use the assignment operator (=)
person.firstName = ‘Jane’;
console.log(person);
{ firstName: ‘Jane’, lastName: ‘Doe’ }
Adding a new property to an object
let person = {
firstName: ‘John’,
lastName: ‘Doe’
};
person.age = 25
{ firstName: ‘John’, lastName: ‘Doe’, age: 23 }
What is objects as object properties
const person = {
name: {
first: “Bob”,
last: “Smith”,
},
};
to call properties :
person.name.first;
Deleting a property of an object
delete person.age
{ firstName: ‘John’, lastName: ‘Doe’ }
Checking if a property exists
let employee = {
firstName: ‘Peter’,
lastName: ‘Doe’,
employeeId: 1
};
console.log(‘ssn’ in employee); //false
console.log(‘employeeId’ in employee); //true
check if a property exists in an object, you use the in operator
console.log(‘ssn’ in employee);
false
console.log(‘employeeId’ in employee);
true
JavaScript objects properties?
JavaScript objects have two types of properties: data properties and accessor properties.
Pass-by-value primitives values?
What is a result?
function square(x) {
x = x * x;
return x;
}
let y = 10;
let result = square(y);
console.log(result);
console.log(y);
In JS, all function arguments are always passed by value.
Any changes that you make to the arguments inside the function do not reflect the passing variables outside of the function
console.log(result); // 100
console.log(y); // 10 – no change
Pass-by-value of reference values? What is a result?
let person = {
name: ‘John’,
age: 25,
};
function increaseAge(obj) {
obj.age += 1;
obj = { name: ‘Jane’, age: 22 };
}
increaseAge(person);
console.log(person);
JavaScript passes an object by reference because the change to the object is reflected outside the function
JavaScript passes all arguments to a function by values.
Function arguments are local variables in JavaScript.
console.log(person); //{ name: ‘John’, age: 26 }
Define methods of an object using the object literal.
JavaScript allows you to define methods of an object using the object literal syntax:
let person = {
firstName: ‘John’,
lastName: ‘Doe’,
greet() {
console.log(‘Hello, World!’);
}
};
person.greet();
How to use “this value” in methods in object?
Inside a method, the this value references the object that invokes the method:
let person = {
firstName: ‘John’,
lastName: ‘Doe’,
greet: function () {
console.log(‘Hello, World!’);
},
getFullName: function () {
return this.firstName + ‘ ‘ + this.lastName;
}
};
console.log(person.getFullName()); //’John Doe’
If you create more than one object, can you use ‘this’ the same method definition for every object you create?
Yes. This is useful for writing out object literals , not for consructors
const person1 = {
name: “Chris”,
introduceSelf() {
console.log(Hi! I'm ${this.name}.);
},
};
const person2 = {
name: “Deepti”,
introduceSelf() {
console.log(Hi! I'm ${this.name}.);
},
};
create function whit ‘this’?
Way to define the “shape” of an object — the set of methods and the properties it can have — and then create as many objects as we like, just updating the values for the properties that are different.
The first version of this is just a function /:
function createPerson(name) {
const obj = {};
obj.name = name;
obj.introduceSelf = function () {
console.log(Hi! I'm ${this.name}.);
};
return obj;
}
This function creates and returns a new object each time we call it. The object will have two members:
a property name
a method introduceSelf().
const salva = createPerson(“Salva”);
salva.name;
salva.introduceSelf();
const frankie = createPerson(“Frankie”);
frankie.name;
frankie.introduceSelf();
Constructors ?
Constructors, by convention, start with a capital letter and are named for the type of object they create.
function Person(name) {
this.name = name;
this.introduceSelf = function () {
console.log(Hi! I'm ${this.name}.);
};
}
const salva = new Person(“Salva”);
salva.name;
salva.introduceSelf();
const frankie = new Person(“Frankie”);
frankie.name;
frankie.introduceSelf();
What is Prototypes?
Prototypes are the mechanism by which JavaScript objects inherit features from one another. Prototype object chains allow objects to inherit features from one another, the prototype property and how it can be used to add methods to constructors
What is standard way to access an object’s prototype?
bject.getPrototypeOf() method
So when we call myObject.toString(), the browser:
looks for toString in myObject
can’t find it there, so looks in the prototype object of myObject for toString
finds it there, and calls it.
What is the prototype for myObject?
This is an object called Object.prototype, and it is the most basic prototype, that all objects have by default. The prototype of Object.prototype is null. The prototype of an object is not always Object.prototype
