Let’s create a person in javascript. We could use a variable...
const person = "John Doe";To print our person’s name we could do...
const person = "John Doe";
console.log(person)Well a person has more than a name so let’s add an age and eye color. We could use an array...
const person = ["John Doe", 50, "Blue"]To print our person’s name, age, and eye color we could do...
const person = ["John Doe", 150, "Blue"]
console.log(person[0]) // John Doe
console.log(person[1]) // 150
console.log(person[2]) // BlueOk, now lets print a sentence with our person in it like we might do on a webpage, maybe a profile.
const person = ["John Doe", 150, "Blue"]
console.log("The great " + person[0] + ", with striking " + person[2] + " eyes, was a spry " + person[1] + " years old.");There are other qualities we might want to add to describe our person like maybe species, number of legs, and number of arms. We could do…
const person = ["John Doe", 150, "Blue", "Human", 2, 2]Ok, now lets print a sentence with our person in it like we might do on a webpage again.
const person = ["John Doe", 150, "Blue", "Human", 2, 2]
console.log("The great " + person[0] + ", with striking " + person[2] + " eyes, was a spry " + person[1] + " years old. A " + person[3] + "with " + person[4) + "legs and " + person[5] + " arms.");Yikes, that doesn’t look very readable. It seems like we should use an object to organize our data better. Let’s create a person object and we might as well also separate the first and last name too.
const person = {
species: "human",
legs: 2,
arms: 2,
firstName: "John",
lastName: "Doe",
age: 150,
eyeColor: "Blue"
};What if we want two different people. We could do
const person1 = {
species: “human”,
legs: 2,
arms: 2,
firstName: “John”,
lastName: “Doe”,
age: 150,
eyeColor: “Blue”
};
const person2 = {
species: "human",
legs: 2,
arms: 2,
firstName: "Jane",
lastName: "Jackson",
age: 200,
eyeColor: "Green"
};Now when we write our sentence again, it is much easier to read!
const person1 = {
species: "human",
legs: 2,
arms: 2,
firstName: "John",
lastName: "Doe",
age: 150,
eyeColor: "Blue"
};
const person2 = {
species: "human",
legs: 2,
arms: 2,
firstName: "Jane",
lastName: "Jackson",
age: 200,
eyeColor: "Green"
};
console.log("The great " + person1.firstName + " " + person1.lastName + ", with striking " + person1.eyeColor + " eyes, was a spry " + person1.age + " years old. A " + person1.species + "with " + person1.legs + "legs and " + person1.arms + " arms.");That’s ok. But if we wanted to create 10 or 20 people then we are going to be repeating a lot of code. Let’s build an object as a function ...
const Person = function(first, last, years, eye){
this.firstName = first;
this.lastName = last;
this.age = years;
this.eyeColor = eye;
this.species = "Human";
this.legs = 2;
this.arms = 2
}Now our person will always start with the species of human, and have 2 legs and 2 arms but each person can be created with their own first name, last name, age, and eye color. We can create our two people again like this...
const Person = function(first, last, years, eye){
this.firstName = first;
this.lastName = last;
this.age = years;
this.eyeColor = eye;
this.species = "Human";
this.legs = 2;
this.arms = 2
};
const person1 = new Person("John", "Doe", 150, "Blue");
const person2 = new Person("Jane", "Jackson", 200, "Green");Now for 10-20 people we would only need to add 1 new line for each person! That’s going to save us lots of time! A quick note on common practices. We generally will name the parameters that the object accepts the same as the property. It can look confusing at first and it is important to know that they do not have to match which is why I wrote it like that originally. It is better practice, though, to name the parameter the same as the property to make sure there is no confusion about what the parameter is for. To write it like that we could do...
const Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.species = "Human";
this.legs = 2;
this.arms = 2
};
const person1 = new Person("John", "Doe", 150, "Blue");
const person2 = new Person("Jane", "Jackson", 200, "Green");Let’s look at our sentence again.
const Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.species = "Human";
this.legs = 2,
this.arms = 2
};
const person1 = new Person("John", "Doe", 150, "Blue");
const person2 = new Person("Jane", "Jackson", 200, "Green");
console.log("The great " + person1.firstName + " " + person1.lastName + ", with striking " + person1.eyeColor + " eyes, was a spry " + person1.age + " years old. A " + person1.species + "with " + person1.legs + "legs and " + person1.arms + " arms.");We still are only logging our sentence for person1. We could repeat the console.log and change person1 to person2 so that we can print a sentence for both like this
const Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.species = "Human";
this.legs = 2;
this.arms = 2
};
const person1 = new Person("John", "Doe", 150, "Blue");
const person2 = new Person("Jane", "Jackson", 200, "Green");
console.log("The great " + person1.firstName + " " + person1.lastName + ", with striking " + person1.eyeColor + " eyes, was a spry " + person1.age + " years old. A " + person1.species + "with " + person1.legs + "legs and " + person1.arms + " arms.");
console.log("The great " + person2.firstName + " " + person2.lastName + ", with striking " + person2.eyeColor + " eyes, was a spry " + person2.age + " years old. A " + person2.species + "with " + person2.legs + "legs and " + person2.arms + " arms.");Ok this is going to get really repetitive if we add 10-20 people again. We should put all of our people into an array and just loop through the array. In the loop, we can console.log the sentence for each person in the array. It would look like this.
const Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.species = "Human";
this.legs = 2;
this.arms = 2
};
const person1 = new Person("John", "Doe", 150, "Blue");
const person2 = new Person("Jane", "Jackson", 200, "Green");
const people = [person1, person2];
for (let i = 0; i < people.length; i++){
console.log("The great " + people[i].firstName + " " + people[i].lastName + ", with striking " + people[i].eyeColor + " eyes, was a spry " + people[i].age + " years old. A " + people[i].species + "with " + people[i].legs + "legs and " + people[i].arms + " arms.");
}Now we could add 10-20 people and only have to add 1 line for each person like before. This is much easier code to manage!