JavaScript entry test

Assignment

Martina Hostettler wrote that the volunteers are exporting the catalog from the spreadsheet for you. "You'll have the data next week." From part 1 on you work with this data in JavaScript. Until then you find out which basics are solid and which ones to refresh.

Learning goals

After this chapter you can

• predict the output of short JavaScript code without running it,
• judge which JavaScript basics you have mastered,
• choose the units of the JS workshop to work through before part 1.

The test

Vue assumes modern JavaScript. If you stumble over ??, an arrow function or destructuring while reading Vue code, you have little attention left for Vue itself. So the test checks the basics from WEB1 and a few things that may have come up short there.

The test has thirteen questions and takes about 20 minutes. Every question comes with a short program. Read it without running it and type what it prints to the console. If the program prints several values or several lines, separate them with spaces. Upper and lower case count. "Check" shows you right away whether your answer is correct, and a wrong answer opens the solution. Below the test a list appears with the units of the JS workshop that match the questions you got wrong. Nobody grades the test. It is just for you.

Question 1

Which type does typeof report for null?

q01.mjs

console.log(typeof null)

Solution

typeof null gives object. This is a bug from the first version of JavaScript that was never fixed, because existing code would break. To check whether a value is null, compare directly with value === null. More in the unit Variables, types and operators.

Question 2

A thing has no deposit, the field is 0. What does the program print?

q02.mjs

const deposit = 0
console.log(deposit || 20, deposit ?? 20)

Solution

|| takes the right-hand value as soon as the left one counts as false, and 0 counts as false. ?? takes the right-hand value only if the left one is null or undefined. The output is 20 0. For a deposit that may be 0, ?? is the right choice. More in the unit Variables, types and operators.

Question 3

What is the sum at the end?

q03.mjs

let total = 0
for (const deposit of [20, 50, 30]) {
  if (deposit > 40) continue
  total += deposit
}
console.log(total)

Solution

continue ends the current pass and jumps to the next value. 50 is greater than 40 and gets skipped, which leaves 20 and 30. The sum is 50. More in the unit Control flow.

Question 4

What does the third call of next return?

q04.mjs

function createCounter() {
  let count = 0
  return () => {
    count += 1
    return count
  }
}

const next = createCounter()
next()
next()
console.log(next())

Solution

createCounter returns a function that remembers the variable count, even after createCounter has finished. This is called a closure. All three calls increase the same variable, and the third one returns 3. More in the unit Functions and scope.

Question 5

The parameter has a default value. What comes out for undefined, and what for null?

q05.mjs

function label(name = 'unknown') {
  return name
}

console.log(label(undefined), label(null))

Solution

A default value applies only when an argument is missing or undefined. null is a value someone passes on purpose, so it stays. The output is unknown null. More in the unit Functions and scope.

Question 6

Which deposit does first have at the end?

q06.mjs

const first = { deposit: 20 }
const second = first
second.deposit = 50
console.log(first.deposit)

Solution

const second = first doesn't copy the object but the reference to it. Both variables point to the same object, so the change made through second is visible through first too. More in the unit Objects and arrays.

Question 7

Which two names does the program print?

q07.mjs

const [first, , third] = ['Tent', 'Ladder', 'Projector']
console.log(first, third)

Solution

When you destructure an array, position counts. The empty slot between the two commas skips the second element, and third gets the third one. The output is Tent Projector. More in the unit Objects and arrays.

Question 8

What is left of the text?

q08.mjs

console.log('raclette'.toUpperCase().slice(0, 4))

Solution

toUpperCase returns a new string in capital letters. slice(0, 4) takes the characters at positions 0 to 3, and position 4 is no longer included. More in the unit Strings and template literals.

Question 9

The method is called without an object in front of it. What does the program print?

q09.mjs

const shop = {
  name: 'Lorraine Commons',
  getName() {
    return this.name
  },
}

const getName = shop.getName
try {
  console.log(getName())
} catch (error) {
  console.log(error.name)
}

Solution

Here getName is a function that no longer knows anything about shop. When it is called without an object in front, this is undefined in a module, and this.name throws a TypeError. The catch block prints the name of the error. More in the unit Classes and this.

Question 10

In which order does the output appear?

q10.mjs

try {
  console.log('a')
  throw new Error('b')
} catch (error) {
  console.log(error.message)
} finally {
  console.log('c')
}

Solution

The try block prints a and then throws an error. The program jumps to the catch block, which prints the message b. The finally block always runs, with or without an error, and prints c. The answer is a b c. More in the unit Handling errors.

Question 11

The listener sits on the list, and the click goes to the last entry. What does the page print to the console?

q11.html

<!doctype html>
<ul id="catalog"></ul>
<script>
  const list = document.querySelector('#catalog')
  for (const name of ['Tent', 'Ladder']) {
    const entry = document.createElement('li')
    entry.textContent = name
    list.append(entry)
  }
  list.addEventListener('click', (event) => console.log(event.target.textContent))
  list.lastElementChild.click()
</script>

Solution

A click on an element rises up through the DOM, past the list and up to the document. That's why the listener on the list gets it too. event.target is the element that was clicked, the second entry "Ladder". More in the unit The DOM and events.

Question 12

Which text does JSON.stringify produce?

q12.mjs

console.log(JSON.stringify({ name: 'Tent', note: undefined }))

Solution

JSON has no value undefined, so JSON.stringify leaves out the field note. Keys and strings are in double quotes, and without further arguments there are no spaces. The output is {"name":"Tent"}. More in the unit JSON and data formats.

Question 13

How does Intl.NumberFormat show a deposit of 20 francs?

q13.mjs

const chf = new Intl.NumberFormat('de-CH', { style: 'currency', currency: 'CHF' })
console.log(chf.format(20))

Solution

With style: 'currency', Intl.NumberFormat puts the currency code in front of the amount and shows two decimal places. Swiss amounts of money use a period, not a comma. More in the unit Formatting numbers and dates.

Next steps

If you answered every question correctly, you are ready for part 1. The JS workshop stays available anyway, for looking things up when a chapter assumes a topic.

Plan about half an hour for every unit the test names. Read the explanations, run the examples and solve at least the "Getting started" exercise. Fit the units in before part 1 starts, because there is little time for them in class. If you are still unsure after a unit, ask in class.

Assignment

Martina Hostettler will get in touch as soon as the data is there. Until then, use the competence grid to check whether you are ready for part 1.