Objects
Time N/A

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

### Blurb

Objects

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

### Outline

 Learner OutcomesStudents will: ... Competency Focus ... Interdisciplinary Connections ... ReflectionWhat was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used? ... CreditsAny CC attribution, thanks, credit, etc. Icon by Ian Kirkland from the Noun Project

Introduction
Getting Started

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

Thinking in Objects
Theory
• 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
Examples
• 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 = {
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
Examples
• 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.
Theory
• 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
Evidence
• 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.