Working with JavaScript objects for beginners

Last update: 01 - 11 - 2023

What are JavaScript objects?

An object is a grouping of data having common properties that define an entity or element. It can also be defined as a non-primitive data type capable of storing different data abstracted from that element. Don't you understand? Let's look at an example of a common object, a cell phone.

A cell phone has some properties such as a brand, a model, an assigned number (depending on the country), color, battery or operating system; we can say that the properties of an object are the characteristics that define it 🙂.

Now the same example but in code:

let cellPhone = {
  brand:"Zamzun",//They dont pay me ads
  model:"Z-10",
  number:0666123456789,
  color:"black",
battery:"3500 mA",
  os:"Robot 5.3",//...
}

How to create a JavaScript object?

Objects are variables capable of storing other variables. The way these values are stored follows the same rules as a primitive variable except for a few small differences.

  1. The declaration of an object literal and the assignment is the same as a variable.
  2. The properties to be stored in that object are stored inside brackets ( { } )
  3. Properties and values are separated by a colon ( : ) and not by an equals sign ( = )
  4. Each property is separated by a comma sign ( , )
let objectName = {
  property:"Value",
}

Now that we have clear the rules to create an object in JavaScript let's make a Pokémon object to see which methods we can use to modify the properties of an object and because on the cover of this post has a Pokedex. 😆

⭕HERE COMES THE GEEK⭕.

The analogy with a Pokedex is perfect because it works as an encyclopedia where it keeps the information of the creatures (pokemon) that players (or trainers) use to eliminate or capture the region wildlife.

The information of these creatures is displayed on screen by this device where it indicates different characteristics of the captured Pokemon.

Tyranitar
Tyranitar Information

The information we see from this Pokemon can be written as a literal object like this:

let pokemon385 = {
  number:385,
  name:"Tyranitar",
  description:"Armor Pokémon",
  img:"/src/imgs/pokemon-385.jpg",
  type1:"Rock",
  type2:"Dark",
  height:`6´7"`,
  weight:"445.3lbs",
  numberBattled:999,
  info:"Its body can´t be harmed by any sort of attack, so it is very eager to make challenges against enemies.",
}

Using JavaScript objects or classes (which we will see in a later post) is a very useful and dynamic way of displaying information on the screen.

How can we access to a property of a JavaScript object?

The way to see a specific information in a literal object follows a simple rule, using the dot syntax ( . )

If we want a specific property to be displayed, in this case the Tyranitar info, we access it as follows:

console.log(pokemon385.info);

The required information is printed. Also this information can be rendered on screen by manipulating the DOM but to make the examples simple the console functions will be used. 😁

This is all well and good because we know what properties that object has. What if we have to manipulate it without knowing what properties it has? 🤔

How to obtain object properties in JavaScript?

It is possible that as programmers we have to work on projects that are already built and we do not know what is the logic or behavior of X component, our daily dose (I guess 😂), in the case of objects the getOwnPropertyNames function will return an array with the properties of the object.

console.log(Object.getOwnPropertyNames(pokemon385));

JavasCript object methods

Modifying an object property

To do this we must access the property we want to modify and then reassign the desired new value to it.

pokemon385.img = /src/imgs/new-pokemon-385-img.jpg;

Adding a property to an object

The dot syntax ( . ) will be repeated in different methods for JavaScript objects. In this case a new property can be added as follows:

pokemon385.moves = [
  "Earthquake",
  "Dragon Dance",
  "Iron Head",
  "Crunch",
];

Removing properties of an object

To do this we must use the keyword delete before accessing the property we want to remove.

//Removing the info  property

delete pokemon385.info;

Object.freeze

This method does not allow an object to be modified. Even if we manipulate the object code, the result of it will not be shown.

//Freezing object properties

Object.freeze(pokemon385);
pokemon385.type3 = "Sinister";

//Type3 does not show on console

Object.seal

The seal method will allow modifying the values already existing in the object but will not allow adding or removing more parameters.

//Sealing object properties

Object.seal(pokemon385);
pokemon385.description = "Real Badass Pokémon";
console.log(pokemon385);

//Result is true 🤣

Spread operator or rest operator

The Spread Operator allows you to join two objects into one by creating a new object. Let's see an example:

//Creating a new object

let steroids = {
  equipment:"Tyranitarite",
  newName:"Mega Tyranitar",
}

//Joining the new object with pokemon385

let upgradePokemon385 = { ...pokemon385, ...steroids }

console.log(upgradePokemon385);

To use the Rest Operator, place three consecutive dots before the object name followed by the next object to be merged.

How to convert an object to an array?

To do this we use the Object.entries method, this will return an array with the properties of the object we have converted. Once the object is transformed we can use array methods and manipulate them that way.

//Converting an object into an array

let arrayPokemon385 = Object.entries(upgradePokemon385);
console.log(arrayPokemon385[1]);
console.log(arrayPokemon385.length);
console.log(arrayPokemon385.sort);
Back