Cheatsheets / Learn JavaScript

Objects

JavaScript destructuring assignment shorthand syntax

The JavaScript destructuring assignment is a shorthand const rubiksCubeFacts = {

syntax that allows object properties to be extracted
possiblePermutations:
into specific variable values.
It uses a pair of curly braces ( {} ) with property names '43,252,003,274,489,856,000',
on the left-hand side of an assignment to extract values invented: '1974',
from objects. The number of variables can be less than
largestCube: '17x17x17'
the total properties of an object.
};
const {possiblePermutations, invented,
largestCube} = rubiksCubeFacts;
console.log(possiblePermutations); //
'43,252,003,274,489,856,000'
console.log(invented); // '1974'
console.log(largestCube); // '17x17x17'

shorthand property name syntax for object creation

The shorthand property name syntax in JavaScript const activity = 'Surfing';

allows creating objects without explicitly specifying the
const beach = { activity };
property names (ie. explicitly declaring the value after
the key). In this process, an object is created where the console.log(beach); // { activity:
property names of that object match variables which 'Surfing' }
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.
this Keyword

The reserved keyword this refers to a method’s const cat = {

calling object, and it can be used to access properties
name: 'Pipey',
belonging to that object.
Here, using the this keyword inside the object age: 8,
function to refer to the cat object and access its whatName() {
name property. return this.name
}
};

console.log(cat.whatName());
// Output: Pipey

javascript function this

Every JavaScript function or method has a this const restaurant = {

context. For a function defined inside of an object,
numCustomers: 45,
this will refer to that object itself. For a function
defined outside of an object, this will refer to the seatCapacity: 100,
global object ( window in a browser, global in availableSeats() {
Node.js). // this refers to the restaurant
object
// and it's used to access its
properties
return this.seatCapacity -
this.numCustomers;
}
}
JavaScript Arrow Function this Scope

JavaScript arrow functions do not have their own const myObj = {

this context, but use the this of the
data: 'abc',
surrounding lexical context. Thus, they are generally a
poor choice for writing object methods. loggerA: () => {
Consider the example code: console.log(this.data); },
loggerA is a property that uses arrow notation to
loggerB() { console.log(this.data);
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
myObj.loggerA(); // undefined
property is accessed as expected, returning "abc" .
myObj.loggerB(); // 'abc'

getters and setters intercept property access

JavaScript getter and setter methods are helpful in part const myCat = {
because they offer a way to intercept property access
_name: 'Snickers',
and assignment, and allow for additional actions to be
performed before these changes go into effect. 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");
}
}
}
javascript factory functions

A JavaScript function that returns an object is known as // A factory function that accepts
a factory function. Factory functions often accept
'name',
parameters in order to customize the returned object.
// '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 const myCat = {

protected. Since JavaScript objects are passed by
_name: 'Dottie',
reference, there is no way to fully prevent incorrect
interactions with object properties. get name() {
One way to implement more restricted interactions return this._name;
with object properties is to use getter and setter
},
methods.
Typically, the internal value is stored as a property with set name(newName) {
an identifier that matches the getter and setter method this._name = newName;
names, but begins with an underscore ( _ ).
}
};

// Reference invokes the getter

console.log(myCat.name);

// Assignment invokes the setter

myCat.name = 'Yankee';
Restrictions in Naming Properties

JavaScript object key names must adhere to some // Example of invalid key names
restrictions to be valid. Key names must either be
const trainSchedule = {
strings or valid identifier or variable names (i.e. special
characters such as - are not allowed in key names platform num: 10, // Invalid because of
that are not strings). 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.
}

Dot Notation for Accessing Object Properties

Properties of a JavaScript object can be accessed using const apple = {

the dot notation in this manner:
color: 'Green',
object.propertyName . Nested properties of
an object can be accessed by chaining key names in the price: {
correct order. bulk: '$3/kg',
smallQty: '$4/kg'
}
};
console.log(apple.color); // 'Green'
console.log(apple.price.bulk); // '$3/kg'

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.
Accessing non-existent JavaScript properties

When trying to access a JavaScript object property that const classElection = {

has not been defined yet, the value of undefined
date: 'January 12'
will be returned by default.
};

console.log(classElection.place); //
undefined

JavaScript Objects are Mutable

JavaScript objects are mutable, meaning their contents const student = {

can be changed, even when they are declared as
name: 'Sheldon',
const . New properties can be added, and existing
property values can be changed or deleted. score: 100,
It is the reference to the object, bound to the variable, grade: 'A',
that cannot be changed.
}

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.
JavaScript for...in loop

The JavaScript for...in loop can be used to let mobile = {

iterate over the keys of an object. In each iteration, one
brand: 'Samsung',
of the properties from the object is assigned to the
variable of that loop. model: 'Galaxy Note 9'
};

for (let key in mobile) {

console.log(`${key}: ${mobile[key]}`);
}

Properties and values of a JavaScript object

A JavaScript object literal is enclosed with curly braces const classOf2018 = {

{} . Values are mapped to keys in the object with a
students: 38,
colon ( : ), and the key-value pairs are separated by
commas. All the keys are unique, but values are not. year: 2018
Key-value pairs of an object are also referred to as }
properties.
Delete operator

Once an object is created in JavaScript, it is possible to const person = {

remove properties from the object using the
firstName: "Matilda",
delete operator. The delete keyword deletes
both the value of the property and the property itself age: 27,
from the object. The delete operator only works hobby: "knitting",
on properties, not on variables or functions.
goal: "learning JavaScript"
};

delete person.hobby; // or delete

person[hobby];

console.log(person);
/*
{
firstName: "Matilda"
age: 27
goal: "learning JavaScript"
}
*/
javascript passing objects as arguments

When JavaScript objects are passed as arguments to const origNum = 8;

functions or methods, they are passed by reference,
const origObj = {color: 'blue'};
not by value. This means that the object itself (not a
copy) is accessible and mutable (can be changed) inside
that function. const changeItUp = (num, obj) => {
num = 7;
obj.color = 'red';
};

changeItUp(origNum, origObj);

// Will output 8 since integers are

passed by value.
console.log(origNum);

// Will output 'red' since objects are

passed
// by reference and are therefore
mutable.
console.log(origObj.color);
JavaScript Object Methods

JavaScript objects may have property values that are const engine = {
functions. These are referred to as object methods.
// method shorthand, with one argument
Methods may be defined using anonymous arrow
function expressions, or with shorthand method syntax. start(adverb) {
Object methods are invoked with the syntax: console.log(`The engine starts up
objectName.methodName(arguments) .
${adverb}...`);
},
// anonymous arrow function expression
with no arguments
sputter: () => {
console.log('The engine
sputters...');
},
};

engine.start('noisily');
engine.sputter();

/* Console output:
The engine starts up noisily...
The engine sputters...
*/

Print Share