4.1 Objects¶

The Problem¶

Task 1: A teacher wants to create a course on JavaScript. Create a variable that contains the title of this course.

var courseTitle = "JavaScript Course";

Task 2: Refer to task 1; the teacher creates the first section of her course. The section title is "JavaScript Basics". Create a variable that contains the first section title.

var courseTitle = "JavaScript Course";
var firstSectionTitle = "JavaScript Basics";

Task 3: Refer to task 2; the first section has 12 lessons. Save the lessons number in a variable.

var courseTitle = "JavaScript Course";

var firstSectionTitle = "JavaScript Basics";
var firstSectionLessonsNo = 12;

Task 4: Refer to task 3; the teacher also added a description for section 1; which is "Learn the basics of JavaScript in such a simple and easy way". Create a variable that contains the value of section 1 description.

var courseTitle = "JavaScript Course";

var firstSectionTitle = "JavaScript Basics";
var firstSectionDescription = "Learn the basics of JavaScript in such a simple and easy way";
var firstSectionLessonsNo = 12;

Task 5: Refer to task 4; our teacher also added another section to her course. The section title is "JavaScript Functions". Its description is "Introduction to JavaScript functions and closures". She added 5 lessons to this section. Record the section title, description, and lessons number in JavaScript variables.

var courseTitle = "JavaScript Course";

var firstSectionTitle = "JavaScript Basics";
var firstSectionDescription = "Learn the basics of JavaScript in such a simple and easy way.";
var firstSectionLessonsNo = 12;

var secondSectionTitle = "JavaScript Functions";
var secondSectionDescription = "Introduction to JavaScript functions and closures.";
var secondSectionLessonsNo = 5;

Task 6: Refer to task 5; she added a new section to her course. The section title is "JavaScript Arrays". Its description is "Learn about JavaScript arrays and array helpers.". She added 8 lessons to this section. Record the section title, description, and lessons number in JavaScript variables.

var courseTitle = "JavaScript Course";

var firstSectionTitle = "JavaScript Basics";
var firstSectionDescription = "Learn the basics of JavaScript in such a simple and easy way.";
var firstSectionLessonsNo = 12;

var secondSectionTitle = "JavaScript Functions";
var secondSectionDescription = "Introduction to JavaScript functions and closures.";
var secondSectionLessonsNo = 5;

var thirdSectionTitle = "JavaScript Arrays";
var thirdSectionDescription = "Learn about JavaScript arrays and array helpers.";
var thirdSectionLessonsNo = 8;

Do not you think that there is much repetition in task 6 code?!

Task 7: Utilize the function and the array concepts to avoid the repetition in task 6 code.

function createASection(title, description, lessonsNo){
  return [title, description, lessonsNo];
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );

console.log(section1);
console.log(section2);
console.log(section3);

The result is as follows:

Array(3) [ "JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12 ]
Array(3) [ "JavaScript Functions", "Introduction to JavaScript functions and closures.", 5 ]
Array(3) [ "JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 ]

Task 8: Refer to task 7; What is the title of the first section.

function createASection(title, description, lessonsNo){
  return [title, description, lessonsNo];
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );

console.log(section1[0]);

The result is: JavaScript Basics

Task 9: Refer to task 7; What is the description of the second section.

function createASection(title, description, lessonsNo){
  return [title, description, lessonsNo];
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );

console.log(section2[1]);

The result is: Introduction to JavaScript functions and closures.

As you can see, our approach is good so far. However, we have to memorize the position of every section property in the array in order to access it afterward. This introduces a difficulty, in case we have many properties for the section.

Your First Object¶

Task 10: Read the code below, and understand the result.

var section1 = {
  title: "JavaScript Basics",
  description: "Learn the basics of JavaScript in such a simple and easy way.",
  lessonsNo: 12
};

console.log(section1["title"]);
console.log(section1["description"]);
console.log(section1["lessonsNo"]);

The result is as follows:

JavaScript Basics
Learn the basics of JavaScript in such a simple and easy way.
12

A section is an entity that has properties, which are title, description, and lessonsNo. Every property has a key/name and a value. The section entity in task 10 is called an object.

Task 11: Re-do task 10 for section 2.

var section2 = {
  title: "JavaScript Functions",
  description: "Introduction to JavaScript functions and closures.",
  lessonsNo: 5
};

console.log(section2["title"]);
console.log(section2["description"]);
console.log(section2["lessonsNo"]);

The result is as follows:

JavaScript Functions
Introduction to JavaScript functions and closures.
5

Task 12: Re-do task 10 for section 3.

var section3 = {
  title: "JavaScript Arrays",
  description: "Learn about JavaScript arrays and array helpers.",
  lessonsNo: 8
};

console.log(section3["title"]);
console.log(section3["description"]);
console.log(section3["lessonsNo"]);

The result is as follows:

JavaScript Arrays
Learn about JavaScript arrays and array helpers.
8

Factory Function¶

Task 13: Re-do task 7 using the concept introduced in task 10-12.

function createASection(title, description, lessonsNo){
  var newSection = {
    title : title,
    description : description,
    lessonsNo : lessonsNo
  }
  return newSection;
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );

console.log(section1);
console.log(section2);
console.log(section3);

The result is as follows:

Object { title: "JavaScript Basics", description: "Learn the basics of JavaScript in such a simple and easy way.", lessonsNo: 12 }
Object { title: "JavaScript Functions", description: "Introduction to JavaScript functions and closures.", lessonsNo: 5 }
Object { title: "JavaScript Arrays", description: "Learn about JavaScript arrays and array helpers.", lessonsNo: 8 }

Task 14: Refer to task 13; What is the title of the first section?

function createASection(title, description, lessonsNo){
  var newSection = {
    title : title,
    description : description,
    lessonsNo : lessonsNo
  }
  return newSection;
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );

console.log(section1["title"]);

The result is: JavaScript Basics

Task 15: Refer to task 13; What is the description of the second section.

function createASection(title, description, lessonsNo){
  var newSection = {
    title : title,
    description : description,
    lessonsNo : lessonsNo
  }
  return newSection;
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );


console.log(section2["description"]);

The result is: Introduction to JavaScript functions and closures.

Task 16: Refer to task 13; What is the lessons number of the third section.

function createASection(title, description, lessonsNo){
  var newSection = {
    title : title,
    description : description,
    lessonsNo : lessonsNo
  }
  return newSection;
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );


console.log(section3["lessonsNo"]);

The result is: 8

Task 17: Our teacher wants to add every section she creates to the course they are part of. For example, the first three sections are part of "JavaScript Course". Can you add this to the function created in task 13? Note: the course value by default is "JavaScript Course"

function createASection(title, description, lessonsNo, course="JavaScript Course"){
  var newSection = {
    title : title,
    description : description,
    lessonsNo : lessonsNo,
    course:  course
  }
  return newSection;
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );

console.log(section1["course"]);
console.log(section2["course"]);
console.log(section3["course"]);

The result is as follows:

JavaScript Course
JavaScript Course
JavaScript Course

Task 18: Represent a course in JavaScript. Note that a course has two properties; title and description.

var course = {
  title: 'Course title here',
  description: 'Course description goes here'
};

console.log(course);

The result is: Object { title: "Course title here", description: "Course description goes here" }

Task 19: Refer to task 18; What is the course title?

var course = {
  title: 'Course title here',
  description: 'Course description goes here'
};

console.log(course["title"]);

The result is: Course title here

Task 20: Refer to task 18; What is the course description?

var course = {
  title: 'Course title here',
  description: 'Course description goes here'
};

console.log(course["description"]);

The result is: Course description goes here

Task 21: Create a factory function that generates courses on the fly.

function createACourse(title, description){
  var course = {
    title: title,
    description: description
  };

  return course;
}

var course1 = createACourse("JavaScript Course", "Learn JavaScript in such an easy and simple way.");

var course2 = createACourse("WordPress Course", "Learn how to develop WordPress themes and plugins");

console.log(course1);
console.log(course2);

The result is as follows:

Object { title: "JavaScript Course", description: "Learn JavaScript in such an easy and simple way." }
Object { title: "WordPress Course", description: "Learn how to develop WordPress themes and plugins" }

Task 22: Represent a lesson in JavaScript. Note that a lesson has two properties; title and difficulty level.

var lesson = {
  title: "Lesson title is here",
  difficultyLevel: "Easy"
};

console.log(lesson);

The result is: Object { title: "Lesson title is here", difficultyLevel: "Easy" }

Task 23: Refer to task 22; What is the lesson title?

var lesson = {
  title: "Lesson title is here",
  difficultyLevel: "Easy"
};

console.log(lesson["title"]);

The result is: Lesson title is here

Task 24: Refer to task 22; What is the lesson difficulty level?

var lesson = {
  title: "Lesson title is here",
  difficultyLevel: "Easy"
};

console.log(lesson["difficultyLevel"]);

The result is: Easy

Task 25: Create a factory function that generates lessons on the fly.

function createALesson(title, difficultyLevel){
  var lesson = {
    title: title,
    difficultyLevel: difficultyLevel
  };

  return lesson;
}

var lesson1 = createALesson("Array Helpers", "Normal");

var lesson2 = createALesson("Objects", "Easy");

console.log(lesson1);
console.log(lesson2);

The result is as follows:

Object { title: "Array Helpers", difficultyLevel: "Normal" }
Object { title: "Objects", difficultyLevel: "Easy" }