DEV Community: Hozan

Creating Objects in JavaScript.

Hozan — Sat, 01 May 2021 18:34:55 +0000

Last week I covered primitives values and objects and their differences, this week I will touch upon the topic of how to create objects using different syntaxes and summarise them here, so you can have a rough idea of how they can be created and the benefit of each syntax.

If you are beginner (like me) there is a high a chance that so far when you created objects you used the literal notation (also called Object Initializer), below is an example of an object created with literal notation:

var myCar = {
    carMake: 'Ford',
    carModel: 'Mustang',
    carYear: 1969
};

but in JavaScript there is another way to create objects, using the constructor function. Below is an example of the same object as above created using the constructor functions:

function Car(make, model, year) {
  this.carMake = make;
  this.carModel = model;
  this.carYear = year;
}
var myCar = new Car('Ford', 'Mustang', 1969);

To achieve that we have to do the following steps:

Define the object type, in our case here the type is Car, and we defined it using a constructor function. Also note that there is a strong convention to name constructor functions with an upper-case first letter, hence we used Car and not car.
Add this keyword to every property, when doing so it will assign values to the object's properties based on the values passed to the function.
Create an instance of the object with new operator.

As you can see the advantage of using a constructor functions (with the help of new) is that you can create multiple and even hundreds new instances of the object type. Therefore, you can have multiple different objects with same properties and methods as shown below :

var car1 = new Car('Nissan', '300ZX', 1992);
var car2 = new Car('Mazda', 'Miata', 1990);
etc..

However, when it comes to simple objects it is best to stick with literal notation as it is faster to run and easier to read since we do not need to instantiate it first like we do with constructor functions:

// constructor function:
var myCar = new Car('Ford', 'Mustang', 1969);
console.log(myCar.carMake)    //’Ford’

// literal notation
console.log(myCar.carMake)    //’Ford’

These two syntaxes also have their difference when adding new methods or new properties.

To add a property or a method to a predefined object created with literal notation consider the following object:

var myCar = {
    carMake: 'Ford',
    carModel: 'Mustang',
    carYear: 1969
};

Adding a property:

consider we want to add property color with a value equal to “black”, to achieve that we do the following east step:

myCar.carColor = “black”

Now we have the object modified and it will look like below :

var myCar = {
    carMake: 'Ford',
    carModel: 'Mustang',
    carYear: 1969;
    carColor: ‘black’
};

Adding a method:

To do that, we define a property name (or key) with its value being a function definition:

myCar.carDetalis = function (){
      return this.carMake + “ “ + this.carModel;
}

Note that we used this keyword when defining a method, it refers to the "owner" of the function. So in our case here the “owner” is myCar object, the property name is carDetails and the function definition is function () { return this.carMake + “ “ + this.carModel; }:

console.log(myCar.carDetails()); // ‘Ford Mustang’

To achieve what we did in the above examples when an object is created using constructor functions consider this object:

function Car(make, model, year) {
  this.carMake = make;
  this.carModel = model;
  this.carYear = year;
}

var myCar = new Car('Ford', 'Mustang', 1969);
var car1 = new Car('Nissan', '300ZX', 1992);

Adding a property :

If you want to add a property to myCar then it very simple, it is the same when adding a property to an object created with literal notation.

myCar.carColor = “black” ;
console.log(myCar.carColor);  // ‘black’

However this property will only be added to myCar object, and not any other objects created with the same construcuor function, so if you were to access such a property in car1 you will get undefined.

console.log(car1.carColor) // undefined

To add the new property to all objects created with the same constructor function , you have to add the property to the definition of the Car object type.

function Car(make, model, year, color) {
  this.carMake = make;
  this.carModel = model;
  this.carYear = year;
  this.carColor = color;
}

However, there is another way around this if we want to add the new property which is simpler and quicker, especially if our script is hundred of lines long, we use Function.prototype.property , and this is only available to object's created with the constructor syntax.

Car.prototype.color = 'black';
console.log(car1.color);    // 'black'

Adding a method:

Just like adding a property, it is also has similar approach. So you can either add the method to the constructor function itself or use Function.prototype.property , which will have the method avialbe to all objects created with the same function.

function Car(make, model, year, color) {
  this.carMake = make;
  this.carModel = model;
  this.carYear = year;
  this.carColor = color;
  this.carDetails = function (){
      return this.carMake + “ “ + this.carModel;
}

console.log(myCar.carDetails()) // ‘Ford Mustang’
console.log(car1.carDetails()) // ‘Nissan 300ZX’

Car.prototype.carDetails = function (){
      return this.carMake + “ “ + this.carModel;
}

console.log(myCar.carDetails()) // ‘Ford Mustang’
console.log(car1.carDetails()) // ‘Nissan 300ZX’

If you want to know what the new operator does behind the scenes you can read this amazing article which also explains why we need it to create objects when using constructor functions.

If you have any suggestions or questions, leave them below.

Happy coding :) .

Primitives values and JavaScript Objects

Hozan — Sun, 25 Apr 2021 00:32:28 +0000

“In JavaScript, objects are king. If you understand objects, you understand JavaScript.” (w3schools)

All JavaScript values such as Arrays, Functions, Objects and Regular Expressions are considered to be objects, except primitives values, these are not objects.

Primitives values are values that have no properties or methods, and the following is a list of what is called primitives data types ,which are a type of data that have primitives values :
• string
• number
• boolean
• null
• undefined

So for example, if we have a string that says “I am a string” , the primitive value in this case is “I am a string” and the primitive data type is string.

But you might ask, if primitives values or primitives data types have no properties or methods, then how come the primitive value “I am string” have property length and other methods such as charAt().

Well first we need to know what is a String object.

A String object, is a JavaScript built-in object, this String object also have a property called 'prototype', this property value itself acts as a template object that contains methods and properties we can use and can be inherited.
Hence the reason we have methods such as String.prototype.charAt().

In JavaScript and other programming languages, they have the ability to convert a value from one data type to another (e.g numbers to strings, or a string to an object).

This kind of a conversion is called coercion , and it is done automatically. And to achieve that all we have to do is use a property accessor such the dot or the bracket notation, to coerce the string value “I am a string” to a String object.:

“I am a string”.charAt(3) // “a”

It is also important to know that primitive values are immutable, so what is happening in background is that the string is temporarily converted to a String object.

new String(“I am a string”).chartAt(3) // “a”

in the example above, the String () function is called a “constructor function” since its name starts with a capital letter.
Having the new operator in front of a constructor function, will create a new object.

In our case here, String() is JavaScript built-in constructor (or object).

That’s why you can also use a constructor functions to make objects instead of using object literal as show in the example below:

Object literal :

var myCar = {
    make: 'Ford',
    model: 'Mustang',
    year: 1969
};

Constructor functions:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

var mycar = new Car('Ford', 'Mustang', 1969);// same object as mycar in object literal

Read more about constructor functions here or String object here and if you have any suggestions or feedback, feel free to leave them below.

Things I learned this week.

Hozan — Sat, 17 Apr 2021 17:04:34 +0000

Before we go into the topic I want to first introduce myself as this is my first blog post on here. I am an aspiring web developer, who aims to be a junior developer by the end of the year. I started my coding journey in Autumn last year when I joined a brilliant non-profit organisation called CodeYourFuture, and today I will publish some thoughts and tips I learnt during the week, which I believe can give a little of help to people who are on the same journey as me.

Why Soft skills are important?

Just remember this “Hard skills will get you the interview, but Soft skills will get you the job”, this is one of the things I have learned from the people in the industry and thanks for coming to my Ted talk.

But no seriously, Soft skills are skills that relates to your personal skills such as communications skills, teamwork, leadership, open-mindedness and the list goes on.

Enhancing your Soft skills should take the same effort as your Hard skills (technical skills), because when recruiters wanna hire you as a junior, it is not because of your tech skills (as you do not have the experience yet), it is because they want to hire someone who thinks and behaves like a programmer and this is where you can use your Soft skills to demonstrator this, and I heard this directly myself from the senior developers/managers who work in well known companies.

You might be also surprised that leaderships is among those skills that are deemed important for a junior to possess. Well first let me tell you that you do not need to lead a group of developers and mentor them to be regarded as a leader.

Leadership is about learning from your mistakes and taking the necessary steps to overcome challenges, anything that challenges your inner self for the better good is a sign of leadership, deciding to advocate some time to enhance your skills is a sign of leadership, being honest and confident is a sign of leadership.

There are a lot of skills that are categorised under Soft skills signs, quick online search about them will tell you what they are and how to improve them. This link is a page that explores Soft skills more in depth.

A tip I got on how to get my first dev role.

I got the following advice from a person who works in the recruitment agency,
and what she suggested is to connect with and speak to the right people on LinkedIn.

The best way to utilize this is to speak with people from the internal team, such as “Talent manager", "Head of people", "internal recruiter" "Recruitment manager" "Resourcing advisor".

The method to use is to message/email them directly and make a tailored message for each message/email you send, as it will show them how much interest and effort you are putting in to get a job with them.

Please feel free to share your suggestions or feedback if you wish.