Name Games: JS-1 and the naming of things

[SallyMcGrath]

Which module(s) and week(s) does this change effect?
Module(s): JS Core
Week(s): Week 1 -3

What is the hypothesis?

I've just read through pages and pages of JS-1-W-3 submissions. Students seem to still be quite shaky on the naming of things, even some weeks in to the course. I've written some feedback in the marking guide, but perhaps we can do more to help our students grasp this foundational concept.

Why is this important?

We want our students to be loved by their colleagues. ;)

Supporting Resources

Naming and thinking systematically is a big challenge even for professional developers (and it isn't helped by foo and bar, the most stupid of all teaching ideas), but I think we can be a bit imaginative here. How about some group games we can run in the live lesson? I'm thinking something high energy and high impact -- would not want to spend more than 25 minutes on this in a live lesson!

example (very first draft!)

Game 1: the Outside Context Problem, 25 mins

Split into groups (max 6 including a TA). Each group gets a short function with a clear commented explanation and some random characters as identifiers, eg:

// Add sales tax to base price on clothes and food. Tax is 25% on clothes and 5% on food. Lists are clothes we sell and food we sell. The function expects a product and a price before tax.
const asHTbN = 0.25;
const dhwioP = 0.05;
let dgshainem = ["shirt", "tie", "hijab", "trousers"];
let hduekmk = ["bananas", "bread", "milk", "chocolate"];

function jkwlamn(aywumdkPP_z, lao0_OOas) {
  if (dgshainem.includes(aywumdkPP_z) || hduekmk.includes(aywumdkPP_z)) {
    if (dgshainem.includes(aywumdkPP_z)) {
      return lao0_OOas * (1 + asHTbN);
    } else {
      return lao0_OOas * (1 + dhwioP);
    }
  } else {
    return "We don't sell that!";
  }
}

Spend ten minutes (maximum, set a timer) renaming each nonsense identifier and submit to exercise leader. The TA should feel free to guide the students through the code but understanding how the code works is not the challenge here. The challenge is to name the parts of the code. Stay in the breakout rooms. Example solution:

// Add sales tax to base price on clothes and food and return the total price. Tax is 25% on clothes and 5% on food. Lists are of clothes we sell and food we sell. The function expects a product and a price before tax.
const CLOTHES_SALES_TAX = 0.25;
const FOOD_SALES_TAX = 0.05;
let clothes = ["shirt", "tie", "hijab", "trousers"];
let food = ["bananas", "bread", "milk", "chocolate"];

function getTotalPrice(product, price) {
  if (clothes.includes(product) || food.includes(product)) {
    if (clothes.includes(product)) {
      return price * (1 + CLOTHES_SALES_TAX);
    } else {
      return price * (1 + FOOD_SALES_TAX);
    }
  } else {
    return "We don't sell that!";
  }
}

This part should now be revealed: Leaders, in the main room, quickly make a list of JUST the identifiers and give this list to another group. Each team then gets five minutes (set a countdown timer) to guess what the code is about from the names and nominate someone to say it or paste it in chat. Example list:

CLOTHES_SALES_TAX
FOOD_SALES_TAX
clothes
food
product
price
getTotalPrice

Come back to the main group, go around and share our guesses, now without time pressure. Getting it right or getting it wrong are both great learning opportunities in this exercise. The purpose of the exercise is learning to think about our own code from the perspective of someone who did not write it and does not know what it does.

[Dedekind561]

This is a really lovely exercise!

[SallyMcGrath]

Want to write a bit of code we can nonsensify?

[gregdyke]

Also really like it. (minor note, "identifier", not "string" - or "name"? "variable name"?)

[SallyMcGrath]

Want to write a bit of code we can nonsensify? Could do with probably four resources.

[illicitonion]

Have some random code!

const londonZooAnimals = ["Coati", "Lemurs", "Lions", "Otters", "Tamandua"];
const edinburghZooAnimals = ["Lemurs", "Otters", "Pandas", "Vicuna"];

let commonAnimals = londonZooAnimals.filter(animal => edinburghZooAnimals.includes(animal));
let justLondonAnimals = londonZooAnimals.filter(animal => !commonAnimals.includes(animal));
let justEdinburghAnimals = edinburghZooAnimals.filter(animal => !commonAnimals.includes(animal));

console.log(`Both zoos have: ${commonAnimals.join(", ")}`);
console.log(`Only London Zoo has: ${justLondonAnimals.join(", ")}`);
console.log(`Only Edinburgh Zoo has: ${justEdinburghAnimals.join(", ")}`);

[SallyMcGrath]

const oemdjfk8 = ["Coati", "Lemurs", "Lions", "Otters", "Tamandua"];
const ofmks_PPmek = ["Lemurs", "Otters", "Pandas", "Vicuna"];

let irPemwlsopl = oemdjfk8.filter(lrmdnkrl => ofmks_PPmek.includes(lrmdnkrl));
let mcbdnaloejg = oemdjfk8.filter(ensmdlfkr => !irPemwlsopl.includes(ensmdlfkr));
let inmrldkfmgj = ofmks_PPmek.filter(qormshfvx => !irPemwlsopl.includes(qormshfvx));

console.log(`Both zoos have: ${irPemwlsopl.join(", ")}`);
console.log(`Only London Zoo has: ${mcbdnaloejg.join(", ")}`);
console.log(`Only Edinburgh Zoo has: ${inmrldkfmgj.join(", ")}`);

[40thieves]

Perhaps worth noting that I don't think we cover arrow functions (and implicit return arrow functions) in JS1. In fact, I'm not exactly sure where we cover them at all...

[SallyMcGrath]

Oh I didn't even notice! Hmmmm. We glance over fat arrow in JS1-W3 but it's really fast; basically we say something like 'With this => syntax you can declare a function without the function keyword' in callbacks

(I will do a picture for that at some point; it wants a little more.)

You're right, we should remove as many side problems as possible, so add in explicit returns on this.

[40thieves]

Ah good catch on where arrow functions are introduced. Probably fine to use them - from my experience with the React module, most trainees have picked up arrow functions by then.

But agreed that we should avoid implicit returns (fwiw, I explicitly discourage using implicit returns for React components as I find they cause confusion https://syllabus.codeyourfuture.io/react/week-1/lesson#arrow-functions-for-shorter-syntax)

[40thieves]

First of all, apologies for the super late feedback :/ I love the concept, it's fun and simple.

I think I'm a bit fuzzy on the exact steps of the game, but I'm sure that would be cleared up if we get this written up into the syllabus. Speaking of which, what are the next steps here? Turn this into a ticket on the board?

Have you thought about specifically where in JS1 it would fit in? Based on the code snippets above, we'd probably have to fit it into week 3 (since they use array methods).

And since you're looking for some snippets, how about this:

const programmers = ['Ada Lovelace', 'Grace Hopper', 'Alexandra Elbakyan', 'Barbara Liskov', 'Dorothy Vaughan', 'Verónica Dahl']
const languages = ['JavaScript', 'Haskell', 'Rust', 'Groovy', 'C', 'Ada']

function search(searchString) {
  const foundProgrammer = programmers.find((programmer) => {
    return programmer.includes(searchString)
  })
  const foundLanguage = languages.find((language) => {
    return language.includes(searchString)
  })

  if (foundProgrammer && foundLanguage) {
    return `Programmer: ${foundProgrammer}, Language: ${foundLanguage}`
  } else if (foundProgrammer) {
    return `Programmer: ${foundProgrammer}`
  } else if (foundLanguage) {
    return `Language: ${foundLanguage}`
  }
}

console.log(search('Ada'))
console.log(search('Grace'))
console.log(search('JavaScript'))

[SallyMcGrath]

const vuemrl = ['JavaScript', 'Haskell', 'Rust', 'Groovy', 'C', 'Ada']

function yqnp(llplen) {
  const lrmapwlekt = mklpe.find((lePLqq) => {
    return lePLqq.includes(llplen)
  })
  const LLnmIYe = vuemrl.find((nurlexo) => {
    return nurlexo.includes(llplen)
  })

  if (lrmapwlekt && LLnmIYe) {
    return `Programmer: ${lrmapwlekt}, Language: ${LLnmIYe}`
  } else if (lrmapwlekt) {
    return `Programmer: ${lrmapwlekt}`
  } else if (LLnmIYe) {
    return `Language: ${LLnmIYe}`
  }
}

console.log(yqnp('Ada'))
console.log(yqnp('Grace'))
console.log(yqnp('JavaScript'))

[SallyMcGrath]

1. Yes I agree week 3 seems the best place for it.
2. Yes, a ticket!