> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/part-2-javascript-concepts/2.5-interpolation.md).

# 2.5: interpolation

Good React developers are all about writing streamlined code. There is a tendency to do all JSX(HTML), CSS, and JavaScript in the same file. Being streamlined using arrow functions is common, and knowing string interpolation is important as well, especially when writing JSX code. Let's just review a little before forging ahead.

Tools needed for the job:

1. \`
2. $
3. {yourvariable}

Here are some examples:

```javascript
const username = 'Kenn';

console.log(`${username} is the true JS Wizard!`);
```

Here's another examle. This is called a template literals - which breaks things into more than one line, and it's handy with HTML.

```javascript
console.log(`Hey students,
What bugs can
${username}
fix 
for you today`);
```

It's very common to see interpolation with an object in React. Check it out:

```javascript
const person = {
    username: 'Kenn',
    profession: 'Secret Agent'
}

console.log(`${person.username}, ${person.profession}`, 'extraordinaire'); //Kenn, Secret Agent, Extraordinaire
```

Get some practice with interpolation. You will see it a lot in weeks to come.