JavaScript Objects Flashcards
What does “JavaScript destructuring assignment shorthand syntax” mean?
The JavaScript destructuring assignment is a shorthand syntax that allows object properties to be extracted into specific variable values.
It uses a pair of curly braces “{ }” with property names on the left-hand side of an assignment to extract values from objects. The number of variables can be less than the total properties of an object.
Example:
const rubiksCubeFacts = {
possiblePermutations: ‘43,252,003,274,489,856,000’,
invented: ‘1974’,
largestCube: ‘17x17x17’
};
const {possiblePermutations, invented, largestCube} = rubiksCubeFacts;
console.log(possiblePermutations); // ‘43,252,003,274,489,856,000’
console.log(invented); // ‘1974’
console.log(largestCube); // ‘17x17x17’
What does “shorthand property name syntax for object creation” mean?
The shorthand property name syntax in JavaScript allows creating objects without explicitly specifying the property names (i.e. explicitly declaring the value after the key). In this process, an object is created where the property names of that object match variables which already exist in that context. Shorthand property names populate an object with a key matching the identifier and a value matching the identifier’s value.
Example:
const activity = ‘Surfing’;
const beach = { activity };
console.log(beach); // { activity: ‘Surfing’ }
What does the “this” keyword mean?
The reserved keyword “this” refers to a method’s calling object, and it can be used to access properties belonging to that object.
Here, using the “this” keyword inside the object function to refer to the “cat” object and access its “name” property.
Example:
const cat = {
name: ‘Pipey’,
age: 8,
whatName() {
return this.name
}
};
console.log(cat.whatName());
// Output: Pipey
What does “JavaScript function this” mean?
Every JavaScript function or method has a “this” context. For a function defined inside of an object, “this” will refer to that object itself. For a function defined outside of an object, “this” will refer to the global object (“window” in a browser, “global” in Node.js).
Example:
const restaurant = {
numCustomers: 45,
seatCapacity: 100,
availableSeats() {
// this refers to the restaurant object
// and it’s used to access its properties
return this.seatCapacity - this.numCustomers;
}
}
JavaScript Arrow Function this Scope: Knowing the difference
JavaScript arrow functions do not have their own “this” context, but use the “this” of the surrounding lexical context. Thus, they are generally a poor choice for writing object methods.
Consider the example code:
“loggerA” is a property that uses ARROW NOTATION to define the function. Since “data” does not exist in the global context, accessing “this.data” returns “undefined”.
“loggerB” uses METHOD SYNTAX. Since “this” refers to the enclosing object, the value of the “data” property is accessed as expected, returning “abc”.
Example:
const myObj = {
data: ‘abc’,
loggerA: () => { console.log(this.data); },
loggerB() { console.log(this.data); },
};
myObj.loggerA(); // undefined
myObj.loggerB(); // ‘abc’
What do the “getters and setters intercept property access? mean?
JavaScript getter and setter methods are helpful in part because they offer a way to intercept property access and assignment, and allow for additional actions to be performed before these changes go into effect.
Example:
const myCat = {
_name: ‘Snickers’,
get name(){
return this._name
},
set name(newName){
//Verify that newName is a non-empty string before setting as name property
if (typeof newName === ‘string’ && newName.length > 0){
this._name = newName;
} else {
console.log(“ERROR: name must be a non-empty string”);
}
}
}
What does a JavaScript Factory Function do?
A JavaScript function that returns an object is known as a “factory function”. Factory functions often accept parameters in order to customize the returned object.
Example:
// A factory function that accepts ‘name’,
// ‘age’, and ‘breed’ parameters to return
// a customized dog object.
const dogFactory = (name, age, breed) => {
return {
name: name,
age: age,
breed: breed,
bark() {
console.log(‘Woof!’);
}
};
};
JavaScript getters and setters restricted
JavaScript object properties are not private or protected. Since JavaScript objects are passed by reference, there is no way to fully prevent incorrect interactions with object properties.
One way to implement more restricted interactions with object properties is to use “getter” and “setter” methods.
Typically, the internal value is stored as a property with an identifier that matches the getter and setter method names, but begins with an underscore (_).
Example:
const myCat = {
_name: ‘Dottie’,
get name() {
return this._name;
},
set name(newName) {
this._name = newName;
}
};
// Reference invokes the getter
console.log(myCat.name);
// Assignment invokes the setter
myCat.name = ‘Yankee’;
What are the Restrictions in Naming Properties?
JavaScript object key names must adhere to some restrictions to be valid. Key names must either be strings or valid identifiers or variable names (i.e. special characters such as “-“ are not allowed in key names that are not strings).
Example:
// Example of invalid key names
const trainSchedule = {
platform num: 10, // Invalid because of the space between words.
40 - 10 + 2: 30, // Expressions cannot be keys.
+compartment: ‘C’ // The use of a + sign is invalid unless it is enclosed in quotations.
}
What is Dot Notation for Accessing Object Properties?
Properties of a JavaScript object can be accessed using the dot notation in this manner: “object.propertyName”. Nested properties of an object can be accessed by chaining key names in the correct order.
Example:
const apple = {
color: ‘Green’,
price: {
bulk: ‘$3/kg’,
smallQty: ‘$4/kg’
}
};
console.log(apple.color); // ‘Green’
console.log(apple.price.bulk); // ‘$3/kg’
What are Objects?
An “object” is a built-in data type for storing key-value pairs. Data inside objects are unordered, and the values can be of any type.
What does Accessing non-existent JavaScript properties mean?
When trying to access a JavaScript object property that has not been defined yet, the value of “undefined” will be returned by default.
Example:
const classElection = {
date: ‘January 12’
};
console.log(classElection.place); // undefined
What does “JavaScript Objects are Mutable” mean?
JavaScript objects are “mutable”, meaning their contents can be changed, even when they are declared as “const”. New properties can be added, and existing property values can be changed or deleted.
It is the “reference” to the object, bound to the variable, that cannot be changed.
Example:
const student = {
name: ‘Sheldon’,
score: 100,
grade: ‘A’,
}
console.log(student)
// { name: ‘Sheldon’, score: 100, grade: ‘A’ }
delete student.score
student.grade = ‘F’
console.log(student)
// { name: ‘Sheldon’, grade: ‘F’ }
student = {}
// TypeError: Assignment to constant variable.
What is a JavaScript “for…in” loop?
The JavaScript “for…in” loop can be used to iterate over the keys of an object. In each iteration, one of the properties from the object is assigned to the variable of that loop.
Example:
let mobile = {
brand: ‘Samsung’,
model: ‘Galaxy Note 9’
};
for (let key in mobile) {
console.log(${key}: ${mobile[key]});
}
What are the Properties and values of a JavaScript object?
A JavaScript object literal is enclosed with curly braces { }. Values are mapped to keys in the object with a colon (:), and the key-value pairs are separated by commas. All the keys are unique, but values are not.
Key-value pairs of an object are also referred to as “properties”.
Example:
const classOf2018 = {
students: 38,
year: 2018
}
