Animal Noises explainer

Puzzle Explainer
#1

The aim of this puzzle: Print out the number of characters in the sentence.

Walkthrough of the solution: The starter code starts by printing out the whole sentence. It’s a string that is something like, A bear can "growl".

The next line of code prints the number 3. The 3 is coming from dog.length. When .length is attached to a string, it counts the number of characters in that string. It can be used directly on a string, like dog.length. Or it can be used on a string that’s stored in a variable, like sentence.length.

Since we want to know the total number of characters (letters, numbers, spaces, punctuation marks) in the sentence, we can change the 2nd print() into print(sentence.length).

Sample code solution:
(Tap below to reveal)

print(sentence);
print(sentence.length);

JavaScript Concepts: String Properties, .length, If Statements, Comparison Operators, Identifiers

Grasshopper Concepts: print()
Additional Code (hidden code that runs before the puzzle’s code):

let noises = [
  ['antelope', 'snort'],
  ['badger', 'growl'],
  ['bat', 'screech'],
  ['bear', 'growl'],
  ['bee', 'buzz'],
  ['tiger', 'roar'],
  ['lion', 'roar'],
  ['jaguar', 'snarl'],
  ['leopard', 'growl'],
  ['calf', 'moo'],
  ['cat', 'meow'],
  ['chicken', 'cluck'],
  ['rooster', 'crow'],
  ['chinchilla', 'squeak'],
  ['cicada', 'chirp'],
  ['cow', 'moo'],
  ['cricket', 'chirp'],
  ['crow', 'caw'],
  ['deer', 'bleat'],
  ['wolf', 'howl'],
  ['dolphin', 'click'],
  ['donkey', 'bray'],
  ['duck', 'quack'],
  ['eagle', 'screech'],
  ['elephant', 'trumpet'],
  ['elk', 'bugle'],
  ['ferret', 'dook'],
  ['frog', 'croak'],
  ['toad', 'ribbit'],
  ['giraffe', 'bleat'],
  ['geese', 'honk'],
  ['grasshopper', 'chirp'],
  ['guinea pig', 'squeak'],
  ['hamster', 'squeak'],
  ['horse', 'neigh'],
  ['hippopotamus', 'growl'],
  ['hyena', 'laugh'],
  ['magpie', 'chatter'],
  ['mouse', 'squeak'],
  ['monkey', 'scream'],
  ['moose', 'bellow'],
  ['mosquito', 'buzz'],
  ['ox', 'moo'],
  ['owl', 'hoot'],
  ['parrot', 'squawk'],
  ['peacock', 'scream'],
  ['pig', 'oink'],
  ['pigeon', 'coo'],
  ['prairie dog', 'bark'],
  ['rabbit', 'squeak'],
  ['raccoon', 'trill'],
  ['raven', 'caw'],
  ['rhinoceros', 'bellow'],
  ['seal', 'bark'],
  ['sheep', 'baa'],
  ['goat', 'baa'],
  ['lamb', 'baa'],
  ['lark', 'warble'],
  ['wren', 'warble'],
  ['snake', 'hiss'],
  ['swan', 'cry'],
  ['tapir', 'squeak'],
  ['tarantula', 'hiss'],
  ['turkey', 'gobble'],
  ['vulture', 'scream'],
  ['walrus', 'groan'],
  ['whale', 'sing'],
  ['zebras', 'bray'],
];
let animal = pickRandom(noises);
let sentence = `A${animal[0][0] === 'e' ? 'n' : ''} ${animal[0]} can "${animal[1]}".`;
2 Likes
#2

Hi there, I need an explanation of sentence let, I see $, [0], [0] and ===, I want to know what every symbol does and to what it is connected.

I want to understand it.

I know dat [0] refers to the first item of an array, Andy that === checks if it is equal to. The $ sign is new and I lost the connection of the first two.

#3

Hey there, good questions! Get ready for a very long answer, as there are a few concepts in here that will need explaining.

First, let’s just figure out what the hidden code is doing, then we’ll look at how it works. I’m going to shorten the array to save space.

let noises = [
  ['antelope', 'snort'],
  ['badger', 'growl'],
  ['deer', 'bleat'],
  ['wolf', 'howl'],
  ['duck', 'quack'],
  ['eagle', 'screech'],
  ['elephant', 'trumpet'],
  ['elk', 'bugle'],
  ['raven', 'caw'],
  ['rhinoceros', 'bellow'],
  ['whale', 'sing'],
  ['zebras', 'bray'],
];
let animal = pickRandom(noises);
let sentence = `A${animal[0][0] === 'e' ? 'n' : ''} ${animal[0]} can "${animal[1]}".`;

The noises variable is an array containing a whole bunch of arrays. Each nested array contains 2 strings, the name of an animal, and the sound it makes.

The animal variable picks a random item from noises. Since each item in noises is an array, that means animal will be one of those arrays, like ['whale', 'sing'].

The sentence variable creates a string like “A whale can sing” or “An eagle can screech”.

If the animal’s name starts with a vowel, then the sentence should start with “An”, for example, “An eagle”.

If it starts with a consonant, then the sentence should start with “A”, for example, “A whale”.

There’s actually a bug in the code, but I’ll get in to that later.

Anyway, first, let’s talk about the ${}…

You’ve probably seen in other puzzles strings put together like this:

let name = 'Ben'
console.log('My name is ' + name)

This is called string concatenation. It uses the + operator to add 2 strings together.

If one of the values is not a string, it will try to convert it to one, like this:

let numOfCats = 2
console.log('I have ' + numOfCats + ' cats.')

numOfCats is the number 2, but it gets turned into the string '2'

New features get added to JavaScript each year, and in 2015 a whole bunch of cool new features were added. One of those was support for string interpolation in the form of template literals.

A template literal is a really neat way of creating strings that use code. It looks like this:

let name = 'Ben'
console.log(`My name is ${name}`)

Instead of the single-quote '' or double quote "", a template literal uses backticks `` to create a string.

Then, you can write your string as normal, and put code inside of ${}.

The code example above prints the text 'My name is Ben'.

You can write more complicated code inside the ${}. Let’s look at another example:

let numOfCats = 2
console.log(`I have ${numOfCats} cat${numOfCats === 1 ? '' : 's'}`)

If numOfCats is 1, this prints 'I have 1 cat'. Because numOfCats is 2, this prints 'I have 2 cats'.

The code in the 2nd ${} is a ternary statement, which is like an if else statement. We have a lesson on it in Fundamentals II. A ternary works like this:

isThisTrue ? doThisIfTrue : doThisIfFalse

In this case, we want to know if we should print 'cat' or 'cats', so our code is:

`cat${numOfCats === 1 ? '' : 's'}`

If numOfCats equals 1, then the ${} puts an empty string on the end of 'cat'. If it’s not 1, it puts the string 's' on the end, to create the string 'cats'

Ok, last bit of explaining, about the animal[0][0] you see in the code.

animal is an array with 2 strings, like this: ['whale', 'sing'].

Array indexing starts at 0, so 'whale' is at index 0 and 'sing' is at index 1 in the animals array.

animals[0] is 'whale'
animals[1] is 'sing'

Still with me? It’s going to get a little weird.

Strings are also indexed. 'whale'[0] is 'w'. 'whale'[1] is 'h'

Therefore, animals[0][0] is the 'w' in 'whale'

animals[1][0] is the 's' in 'sing'

FINALLY

The code you’re asking about is checking if the animal name starts with an 'e'. If it does, it adds an 'n' to 'A' to create something like 'An eagle'.

That bug I mentioned: whoever wrote it (cough cough @grasshopperFrankie) is just checking for an 'e', but there are other vowels, so this code would print something like 'A otter' even though it should be 'An otter'.

My guess is they probably started off with a shorter array of animals, where none of the animal names started with other vowels. Then, they got creative and added more animals, but forgot to change the code to check for other vowels.

Hope this makes sense! Again, good question. Let me know if you have any more.
Ben

2 Likes
#4

Until “still with me” is 100% clear to me, but after it gets a bit to complicated.

However I will go on and try to understand later after I have learned more.

Thank you for your time and good explanation.

1 Like