✨U2LA3.1: Data Type Scavenger Hunt

What are the different types of data used in JavaScript?

Teacher Notes && Overview

NB: Students who come in with a programming background may already be familiar with different data types. In that instance, this lesson could be abbreviated, altered, or skipped.

Students have been working with data of different types all year, but they have not necessarily realized it and there has not be a solid, formal lesson on data types. This is their chance to discuss and explore the types of data being used and their purpose before they start engaging with and creating functions that will return data rather than simply performing actions on the canvas.

Objectives

Students will be able to:

• List common datatypes used in JavaScript

• Test and identify the types of different pieces of data

Suggested Duration

1 Period (~45 minutes)

NYS Standards

9-12.DL.1 Type proficiently on a keyboard.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

Vocabulary

• Data Types

  • String: characters enclosed in “ “, ‘ ‘, or ``.

  • Number: numeric values not enclosed in “ “, ‘ ‘, or . They can be further broken down into integers (positive values, negative values, and zero without decimal places) and floats (values with decimal places), but it is not necessary to make this distinction in JavaScript.

  • Boolean: a data type with only two value options often seen as “true” or “false”

  • Object: a standalone entity, with a type and the option to have many distinct properties. A good example is a sneaker - while it may always follow the same design, it can come in different colors, sizes, types of laces, etc. This would be one object with its own properties.

Planning Notes && Materials

Planning Notes	Materials
This lesson is largely driven by student exploration and it can feel as if it goes by quite quickly - however, while the actual task is brief, it is meant to lead into a discussion to deepen student understanding. Students should be prepared to identify data types and start thinking about when data types are useful by the end of this lesson.	Scavenger Hunt Starter Code && Document (This can and perhaps should all be digital, but consider options if you think you need to print!)

Resources

• Scavenger Hunt Worksheet (Google Doc)

• Scavenger Hunt Starter Code (p5.js editor | repl.it)

• Data Types in JavaScript (Youtube Video)

Assessments

Formative:

• Data Type Scavenger Hunt Worksheet

• Exit Slip

Summative:

• Light Switch Project (upcoming mini project)

• Interactive Drawing Application (upcoming unit final)

Do Now/Warm Up (2-3 minutes)

Display on board: Why won’t this code work?

ellipse(“fifty”, 100, 25)

Discussion & Scavenger Hunt Instructions (~7- 10 minutes)

After allowing students time to think through the do now and write down their responses, ask for some shares - many students will recognize that “fifty” is what breaks the code, despite the fact that we understand “fifty” to be a number.

Use this to launch into a conversation about data types in computer science generally, and JavaScript specifically. Be sure to review the names and definitions of these data types (some of which students may remember):

• Strings

• Numbers (you can discuss floats and ints if students have a background in other languages, or will progress from this class to a class run in another language)

• Booleans

• Objects (object literals, but arrays are also a type of object!)

Explain that there are many other data types, but JavaScript is a lightly typed language, so it is pretty kind about moving between them. Make sure students understand that we are focusing on data types today because they are about to start focusing on functions that pass data rather than conduct an action like drawing a design, and it’s important that they understand the different types of data that they can pass.

Data Type Scavenger Hunt (~10 - 15 minutes)

Distribute and explain the data type scavenger hunt to students based on the worksheet instructions, and then let them begin working. The goal is for them to plug different pieces of data into the code which then tell them the type of data the computer sees it as.

Be sure to circulate, as some students may need assistance to make sure they are removing/adding quotation marks when necessary and recording data types AND the actual data that gets printed in the correct locations.

This activity can be completed individually, in pairs, or in small groups. Best suggestion is to ask students to each complete their own activity, but compare answers within a small group.

Wrap-Up (~5-10 minutes)

Once students have completed their scavenger hunts, gather them to review answers - if not to all the data, to some of the trickier ones. Ask students to explain where possible and fill in any gaps or misconceptions they may have.

Ask:

• What are things you noticed when doing this activity?

• Did any of the answers surprise or confuse you?

• What happened when you tested the data type of variables?

Make sure students understand that EVERY piece of data in their code has a type, and variables simply hold onto a piece of data and take the type of that piece.

You may choose to give a prolonged exit slip where students try to determine data types without computers. Consider leveling the data so you ask questions as follows:

• What is the data type of “Rebecca”? (MILD)

• What is the data type of 4519000? (MILD)

• What is the data type of “Cat” != “Dog”? (MEDIUM)

• What is the data type of [“cs”, “is”, “the”, “best”]? (MEDIUM)

• What is the data type of the variable mouseIsPressed? (SPICY)

For any and all, feel free to ask students for an explanation of how they know. You can choose to have students answer all questions or a mix depending on in-class performance.

Extensions

Ask students to dig more deeply into data. Challenge them to try to create their own pieces of data, predict the type, and then see what comes up.

You may also want students to start understanding that the data type of object represents a whole set - such as an entire array - while each item in that set, or array, still maintains its own type. Consider asking them to save an array (or even an object!) to a variable and try to call individual items to see what comes up.