Variables, functions and conditions

React is mostly plain JavaScript. A React component is a JavaScript function, and the logic inside it is plain JavaScript. The better you know a handful of JavaScript features, the less React will feel like magic.

This lesson and the next three cover only the JavaScript you will actually use this week. If you already know a topic, skim the examples and try the challenge to check yourself.

How these sandboxes workCopy Anchor Link

The sandboxes in the JavaScript lessons have a console panel under the preview. console.log(...) prints a value there, which is the quickest way to see what your code is doing.

Each sandbox also has a small App function at the bottom that shows a result on the page. Ignore it for now; you will learn exactly how it works later today.

const and letCopy Anchor Link

A variable is a name that points to a value. Modern JavaScript has two ways to create one:

• const creates a variable you cannot reassign. Use it almost all of the time.
• let creates a variable you can reassign later with =.

Try removing the // at the start of the title = 'Dune' line. The sandbox shows an error, because a const cannot be pointed at a new value. Put the // back to fix it.

In React code you will use const for nearly everything. React has its own way of handling values that change over time, called state, which you will meet on Day 3. You will rarely need let.

Functions and arrow functionsCopy Anchor Link

A function is a reusable piece of code. You give it parameters (inputs), it runs, and it can return a value (output). There are two common ways to write one:

The => is why these are called arrow functions. They are shorter, and you will see them everywhere in React, especially when you pass a small function to something else.

The short form in example 3 is called an implicit return. When the arrow is followed directly by a value instead of {, that value is returned automatically.

Functions can also take a default value for a parameter, used when the caller leaves it out:

function greet(name = 'reader') {
  return 'Hello, ' + name;
}

greet();      // 'Hello, reader'
greet('Ada'); // 'Hello, Ada'

Template literalsCopy Anchor Link

Joining strings with + gets messy fast. A template literal is a string written with backticks instead of quotes. Inside it, you can drop in any JavaScript value with ${...}.

Both lines print the same thing, but the template literal is much easier to read. Anything inside ${ } is evaluated, so you can do maths or call functions there too.

Choosing between values: ternary and &&Copy Anchor Link

User interfaces are full of small decisions: show "Read" or "Unread", show a badge or nothing. JavaScript has two compact tools for this, and React code uses both constantly.

The ternary operator picks one of two values: condition ? valueIfTrue : valueIfFalse.

The && operator is used as "if this is true, then that": condition && value gives you value when the condition is true, and the condition itself (usually false) when it is not.

Both operators work with truthy and falsy values, not only with true and false. The falsy values are false, 0, '' (an empty string), null, undefined and NaN. Everything else counts as truthy.

Change pagesRead to 100 and see how both label and badge change. When isFinished is false, badge becomes false, and React shows nothing at all for false. That is exactly why && is handy in React: "show this, or show nothing".

const describe = (title, author, isDone) =>
  `${title} by ${author} - ${isDone ? 'done' : 'to read'}`;