If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Teaching guide: Intro to JS - Objects

This is a teaching guide for the Intro to JS lesson on Objects.

What the student will learn

  • How to create objects to store various related properties in one variable.
  • How to access or change properties of an object using both “bracket notation” and “dot notation”.
  • How to create arrays where each element is an object.
  • How to iterate through an array of objects using a for loop.

The student will be able to write code like:

Where students struggle

  • Students may mess up the syntax at first - like typing ‘=’ instead of ‘:’ inside the brackets, forgetting commas after properties, or using square instead of curly brackets.
  • Students may not understand the difference between arrays and objects. They are actually quite similar, especially in JS. When they're deciding how to store their data, ask them to think about whether there is a natural sequence to the data they’re storing and if they plan to iterate through the data a lot - if so, an array is often best; if not, an object may be a better fit.
  • Students may not see the point of objects at first, because they can accomplish the same thing using multiple variables. Once their program needs to track a lot of information, however, multiple variables get quite unwieldy. Imagine if they had to store 10 properties about 20 students in the class - that’d be 200 variables without objects, but just 20 variables with objects, and just one variable using an array of objects.

Additional materials: Discussion questions

These are questions that you can ask students individually after they've done the lesson, or lead a group discussion around, if everyone's gotten to the same point.
  • Some JS programmers actually create business cards that describe themselves using a JavaScript object. How would your students describe themselves with an object? Encourage them to store different types of properties, like strings, numbers, arrays, and more objects. Maybe you can even print business cards on cardstock for your students!

Additional materials: Trivia questions

These can be fun to do as a class after everyone’s gotten through the lesson. They can also lead to discussion about which questions are the hardest. Play them on Quizizz.

Want to join the conversation?

  • ohnoes default style avatar for user 1018597
    I do not know alot of coding
    (2 votes)
    Default Khan Academy avatar avatar for user
  • leaf orange style avatar for user Larry Serflaten
    Looping through an array is such a common task, the language provides boilerplate code in the array's forEach method. See documentation for details. Using the forEach method makes iterating through the array a one line command:
    var words = [
    {a: 100, y: 100, label: "CODING"},
    {a: 200, y: 200, label: "FOR"},
    {a: 300, y: 300, label: "FUN"}
    ];

    var drawWord = function(word){
    var x = sin(word.a)*100;
    word.a += 3;
    text(word.label, 200+x, word.y);
    };

    textFont(createFont("impact", 44), 44);
    fill(255, 0, 0);

    draw = function() {
    background(255);
    words.forEach(drawWord);
    };
    (0 votes)
    Default Khan Academy avatar avatar for user