# Object Literals and String Interpolation

## ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) ES6 - Object Literals and String Interpolation

### Learning Objectives

*After this lesson, you will be able to:*

* Simplify expressions using object literals
* Simplify expressions using template literals
* Define imports without global variables

This is the last bit of ES6 we'll check out before doing an exercise!

## Object literal shorthand

Object literal shorthand is a simple but useful bit of syntactic sugar. If you want to assign a variable as the value of the key of the same name, you don't have to write it twice. *What?*

If we declare a variable, `price`, and set it equal to 100: `const price = 100;`

We then have an object called `item`. Now, `item` also has a variable of how much that item costs, which happens to also be `price`. They are different variables (one is global, and the other is specific to the `item` object); they just happen to share the same name. So our `item` object might be:

```javascript
const item = {
  price: 15,
};
```

Now, let's say that when we initialize `item`, instead of hard-coding a number into the initialization, we want to set `price` to be whatever the global price is. This global price is also stored in a variable called `price`, right?

It looks like this:

```javascript
const price = 100;

const item = {
  price: price
};
```

It's weird looking, but it works.

Well, it turns out that having two different variables with the same name and setting them equal to each other is a pretty common thing to do. ES6 decided to just simplify this by dropping the duplicate and having it mean the same thing. So now we can do:

```javascript
const price = 100;

const item = {
  price
};
```

Less to write, and less to read when you come back to it. A win-win!

## Template literals

Template literals bring us string interpolation in JavaScript. This means we can create dynamic strings with more readable syntax.

Before ES6, we had:

```javascript
const name = 'Mike';
const greeting = 'Hi, ' + name + '.';
```

Now, using template literals, we can make this easier:

```javascript
const name = 'Mike';
const greeting = `Hi, ${name}.`;
```

> Note that now, we can directly refer to the variable using ${} syntax within our string.

In fact, combining an arrow function with a template literal, we can do this:

```javascript
const greeting = name => `Hi, ${name}.`;
```

[Check it out in CodePen!](https://codepen.io/SuperTernary/pen/eRQeOR?editors=001)

## Lastly! Imports and modules

In ES6, you can import modules directly without declaring them as global variables. This makes namespacing your app a non-issue. Before module imports, namespace was often a primary concern in JavaScript.

So, if you want export my `addTwo` function as a module, you can create a file called "addTwo.js":

```javascript
const addTwo = num => num + 2;

export default addTwo;
```

And in another file, say "app.js", i can import it:

```javascript
import addTwo from './addTwo';

addTwo(3); // 5
```

You can also export multiple modules from a file, like so:

```javascript
// in arithmetic.js
export const addTwo = num => num + 2;

export const addThree = num => num + 3;
```

And somewhere else:

```javascript
import { addTwo, addThree } from './arithmetic';
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://romebell.gitbook.io/seirfx-621/react-updated-2019/es6+-esnext/literals.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.