JavaScript essentials: data types, functions, and conditionals

Today we kept naming the building blocks underneath the code AI writes for you: data types, functions, and the difference between return and console.log. We also met arrow functions, which are just a shorter way to write the same function. The full walkthrough is in the JavaScript essentials slides; below are the few things worth pinning and your to-do list. The one habit to keep: when AI hands you a function you do not recognize, you can read it now. You know the parts.

• Two quick review questions on const and let (answers below).
• Data types: strings, numbers, booleans, objects, arrays, and the two empty values, undefined and null.
• The string-number trap: why '5' + '3' gives '53'.
• Functions: parameters versus arguments, and return versus console.log.
• Arrow functions and callbacks: shorter syntax, same idea.
• A live build of a Celsius-to-Fahrenheit converter, with the JavaScript by hand.
• A first look at conditionals (if / else), which you finish on your own.

All of this is in the slides with full examples. A few things worth keeping close:

Why not just store everything as text? Two reasons. First, the type tells the computer which operations are valid: you can add or multiply numbers, but '5' + '3' joins text into '53' instead of adding. Second, a fixed type lets the computer keep the value in an efficient, fixed-width form instead of as a run of characters. In short, the type lets each value be both used and stored the right way.

1. Form inputs are text, so convert before you calculate. Anything a user types arrives as a string, even if it looks like a number. '5' + '3' gives '53' (joined as text) instead of 8. Wrap the inputs in Number(...) (or parseFloat(...) to keep decimals) before doing math.

2. return is not console.log. console.log only prints a value on screen; the function still hands back undefined. return hands the value back so the rest of your code can use it. Use console.log to peek while debugging, return when you need the result.

3. undefined and null usually mean a bug. Seeing them where you expected real data is the same signal as last class's Cannot read properties of null: something was never set, or the code is not finished.

🤖 AI tip: When a total comes out as "53" instead of 8, paste the line into AI and ask "why is this concatenating instead of adding?" It will point you at the missing Number().

We wrote the JavaScript for a Celsius-to-Fahrenheit converter by hand. The shape is worth reusing for any "read an input, show a result" tool:

function toFahrenheit(celsius) {
  return celsius * 9 / 5 + 32;
}

celsiusInput.addEventListener("input", () => {
  const c = parseFloat(celsiusInput.value);
  if (!isNaN(c)) {
    result.textContent = toFahrenheit(c).toFixed(2);
  }
});

isNaN(...) checks whether the input is not a number, so you do not calculate on garbage (!isNaN(c) reads as "c is a number"), and .toFixed(2) rounds to two decimal places.

• const todos = [] then todos.push('Buy milk'). This works. push changes what is inside the array; it does not reassign todos. const blocks reassigning the variable, not editing the list or object it points to.
• const count = 0 then count = 1. This errors: "Assignment to constant variable." Use let when a value needs to change.

1. Finish MP2. Final version due Sunday, 6/28, deployed on GitHub Pages, repo URL submitted on Canvas, reflection in logs/wk06.md. Add a feature that is your own idea so it is not just what one prompt produced. MP2 Showcase is Monday.
2. Build converter.html in your oim3690 repo root. Ask AI for the HTML form only, then write the JavaScript by hand (Celsius to Fahrenheit). Convert the input with Number() or parseFloat. Then use AI to make it a two-way converter.
3. Build discount.html in your oim3690 repo. By hand, no AI: write a function that takes a cart total and whether the user is a member and returns the discount. Then use AI to build it into a fuller checkout page, and check the logic still matches yours.
4. Read the rest of the conditionals slides and run the examples. The MDN guide to conditionals is a good reference.
5. Update logs/wk06.md with what you built and learned. CP3 is due Sunday, 6/28 and now includes converter.html and discount.html.

Monday we start with arrays and pulling live data from an API, then the MP2 Showcase and the MP3 launch.