Time N/A

Difficulty Beginner
Prerequisites Arrays
Departments Science
Authors Sandra Kuipers
Groupings Individual
Minimum Year Group None




This work is shared under the following license: Creative Commons BY-SA-NC


Learner Outcomes
Students will:
  • ...
Competency Focus
  • ...
Interdisciplinary Connections
  • ...
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • ...
Any CC attribution, thanks, credit, etc.

This page requires you to be logged in to access it. Please login and try again.
Getting Started

Objects are similar to arrays, but rather than having a numeric index, they have named properties.

Thinking in Objects
  • Objects help us think about our code not as separate variables, but as sets of related data.
  • For example, if you had a racing game, you might have variables that look like:
var speed = 10;
var acceleration = 1.5;
var breakingPower = 1;
var turningPower = 1.8;
  • Each of these variables describes a property of the racing car.
  • By putting these variables together, we can create an object:
var raceCar = {
    speed: 10,
    acceleration: 1.5,
    breakingPower: 1,
    turningPower: 1.8,
  • This object contains all the variables of the racing car.
  • Variables inside an object like this are called properties.
  • Notice the difference in syntax.
Creating Objects
  • We can create objects using a specific syntax.
  • Just like arrays are created with [] square brackets, objects are created with {} braces.
  • Creating a new object looks similar to creating a new variable, with a few differences:
var myEmoji = {
    eyes: "sad",
    mouth: "grimmace",
    color: "blue",
    size: 10,
  • Properties are defined with a name followed by a : colon, and then the value of the property.
  • Multiple properties are separated by a comma , similar to separating multiple values in an array.
Modifying Objects
  • Once we've created an object, we can access it's properties using dot notation.
  • This means we use the name of the object, followed by a dot, then the name of the property.
myEmoji.eyes = "happy";
myEmoji.size = 50;
  • Properties can also be accessed with square brackets similar to arrays.
  • Instead of using an integer for the index, you can access an object with a string index.
myEmoji['eyes'] = "angry";
myEmoji['color'] = "red";
  • A property can be used in conditionals, expressions, arrays, and loops just like any other variable.
  • Check out the Mozilla documentation for more info about working with objects.
Advanced Syntax
  • Objects in JavaScript work a bit differently than in other more object-oritented programming languages.
  • Objects can represent a set of properties, but they can also be created and manipulated using a Class.
  • Using a class is a more advanced syntax for objects, and is closer to how other programming languages work.
  • Classes allow objects to contain not only properties, but also functions (which are called methods when they're inside a class).
  • Class methods enable an object to share similar sets of behaviour.
  • For this unit you don't need to learn the full class syntax, but if you're interested, be sure to check out the Mozilla documentation on Classes.
Infinite Variation
  • Objects are great at representing code with a lot of different variations.
  • For example, the same object called Animal could have properties to describe the size and shape of a wide variety of animals.
  • For this unit, your goal is to use objects to create a scene with multiple objects that can mutate.
    • To mutate your objects, you'll need to create them, then change their properties.
    • Your scene could randomly generate your objects at the start.
    • Or, it could use user input such as buttons or mouse clicks to create and mutate the objects.
    • The goal is to display your objects on screen, and use their properties to modify them after creating the object.
  • Feel free to be creative and have fun with what kinds of objects you create and mutate!
  • Create your scene as a p5js sketch and submit it as your evidence of learning in this unit.
There are no records to display.
Powered by Gibbon v27.0.00dev

Founded by Ross Parker at ICHK Secondary | Built by Ross Parker, Sandra Kuipers and the Gibbon community
Copyright © Gibbon Foundation 2010-2024 | Gibbon™ of Gibbon Education Ltd. (Hong Kong)
Created under the GNU GPL | Credits | Translators | Support