User Tools

Site Tools


javascript_objects

Back to Javascript and React

Javascript Objects

From http://clubmate.fi/javascript-manipulating-objects-with-object-keys/

There are no “Hashes” in JavaScript. Instead, JavaScript has Objects.

Properties are the values associated with a JavaScript object.

A JavaScript object is a collection of unordered properties or elements.

Properties can usually be changed, added, and deleted, but some are read only.

Creating an empty object:

var english = {}
or
var english = new Object();

Creating an object with existing key-value pairs:

var english = {
  house: "A building for human habitation",
  tree:"A woody perennial plant",
  street: "A public road in a city or town"
};

Reading a specific entry

alert(english.tree);
or
alert(english["tree"])
or
x="tree"
alert(english[x])

Adding to an existing Javascript Object.

english.house = "A building for human habitation";

Creating an empty object then populating it.

var english = {}
english.house = "A building for human habitation";
english.tree = "A woody perennial plant";
english.street = "A public road in a city or town";

Creating a new object from an existing object, then adding new entries

/* Option 1: Create the British English Object and add in the extra definitions later */
 
/* britishEnglish inherits all the definitions from english */
var britishEnglish  = Object.create(english); 
 
/* add in additional britishEnglish only definitions */
britishEnglish.lift ="Raise to a higher position or level";
britishEnglish.lorrie ="A large, heavy motor vehicle for transporting goods or troops";
 
/* Option 2: Create the British English Object and add in the extra definitions on creation */
var britishEnglish = Object.create(english, {
  lift: "Raise to a higher position or level",
  lorrie: "A large, heavy motor vehicle for transporting goods or troops"
});

Printing contents of an object to a popup

//this prints the keys as an array
alert(Object.keys(english));

//this prints the values as an array
alert(Object.values(english));

//this prints the keys and values as an array
alert(Object.entries(english));

Printing contents of an object to console

console.log(Object.keys(english));

Deleting an element

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
delete person.age;   // or delete person["age"]; 

Iterating through the elements of an object

Object.keys(english).forEach(function(key) {
    console.log(key + ': ' + english[key]);
});

>> house: A building for human habitation
>> tree: A woody perennial plant
>> 12 street: A public road in a city or town
>> jasper: Hello

or

for (x in english) {
    console.log(english[x]);
}

>> A building for human habitation 
>> A woody perennial plant 
>> A public road in a city or town 
>> Hello

the Some function returns true if some of the elements return true

// Test function
function containsTheWordPlant(element) {
    return english[element].includes("plant");
}

// Using the countries array the following condition should return true
if (Object.keys(english).some(containsTheWordPlant)) {
    console.log('Some entries in english contain the world Plant');
}

>> Some entries in english contain the world Plant

Use Every to test if all entries fulfill the condition

// Using the countries array the following condition should return true
if (Object.keys(english).every(containsTheWordPlant)) {
    console.log('Some entries in english contain the world Plant');
}
else
{
    console.log('Not all in english contain the world Plant');
}

>> Not all in english contain the world Plant

Use Filter to show which entries fulfill the condition

results = Object.keys(english).filter(function(key) {
    return containsTheWordPlant(key);
});
console.log(results);

>>["tree"]

Return values instead of keys

var filtered = Object.keys(english).filter(function(element) {
    return containsTheWordPlant(element);
}).map(function(element) {
    return english[element];
});
console.log(filtered);

>>["A woody perennial plant"]

Use Map to create a new array based on the results of a function

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
    return num * 2;
});

>>[2,8,18]

Objects are Mutable

Objects are mutable: They are addressed by reference, not by value.

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

var x = person;
x.age = 10;           // This will change both x.age and person.age

x is not a copy of person. x IS person.

javascript_objects.txt · Last modified: 2018/08/30 18:56 by admin