What does this ${} syntax do?

It is not returning anything and it is not an object but a template for an expression. crewMember is a variable referenceing a key in the crew as we loop through the object. Keys are strings.

ok so let me ask this way, (sorry for my english)
ok we use ${ } for creating dynamic templates referencing to a thing.

when it is a num thing it references back number like if x=1 and references to ${x} output is “references to 1”

when it is a string x = ‘blabla’ out put is “references to blabla”

what if it is an array
what if is an object
what if it is a property of an object (in this case I think)
what happens actually? because the thing referenced back is also a key(property) value(object) pair.

Is it just referencing back the name of key ?

Interpolating an array will give a comma separated list of the items in the array. An object cannot be directly interpolated since all we get is, [Object: object] and we if we interpolate Object.entries(obj) we get a comma separated list of keys, values, which is not very representative of the object.

Probably the best way to interpolate an object is by iteration and then log as, `${key}: ${value}`.

I have found a weird interaction with this kind of syntax and am puzzled why it does not behave as I expect it to.

console.log("Hello ${planet}.");

does print out

Hello ${planet}.

Whereas

console.log(`Hello ${planet}.`)

does in fact print out the desired outcome

Hello earth.

Am I overlooking something important right now or do double quotes not work as usual in this very context?
Any clarification would be most welcome as my muscle memory is already conditioned to the double quotes.

template literals:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

need to be enclosed in back-ticks/grave accent.

Given this feature was added in 2015, introducing a new way to enclose the string prevents any breaking changes.

Thank you so much for the link, this answers all my questions.

This was a tough cookie for sure, I’m racking my brain severely on this one. Anyone figure it out yet?

Welcome to the forums! :slight_smile:

Do you have a specific question?

This has been the toughest exercise. Not a lot of explaining here. Can anybody break down this page for me? even the example doesn’t show the outcome. I feel that would’ve helped.

1 Like

Examples are like that. They exhibit similar patterns, only.

What is it you don’t understand?

I think the issue is that no one can explain what they are actually confused about. The lesson used the template literals without explaining why.

for (let crewRoles in spaceship.crew) {
console.log(${crewRoles}: ${spaceship.crew[crewRoles].name});
}

This is the result for the first part of the lesson. They way it is taught makes the template literals seem mandatory. What I think people are confused about is this lesson made it seem like it has to be used in order to get the right result but that’s not the case. They only used this to make the code look cleaner. At least that’s my understanding. So since we really haven’t used template literals much since we learned it the code looks very confusing to people because they don’t realize its just used to get the format that its logged right but you could use less clean code to get the result.

for (let crewRoles in spaceship.crew) {
console.log(crewRoles + ': '+ spaceship.crew[crewRoles].name)
}

This returns the same result without using the template literals. People are confused because we have mostly logged things this way instead using template literals. Even the people I have seen try to explain this seem to explain it in a confusing way. I had to go watch youtube videos about for…in loops to understand this lesson. None of the videos I watched used template literals at least not in the beginning. They would show it after writing it the original way and then say whatever method is best for you.

I understand why we use template literals but this lesson made them very confusing.

2 Likes

I typed this

for (let member in spaceship.crew) {
  console.log(`${member}: ${member.name}`);
}

The output was like this:
captain: undefined
chief officer: undefined
medic: undefined
translator: undefined

My question is why can’t directly call the name of the variable member using that kind of code? Since variable member was able to display the member of crew object. Is it only work on an object and not its attributes?

the for .. in loops give you a string, so member variable contains a string. which does not have a name property

1 Like

This helped me a lot. thank you

well same for me. I started to wonder with sudden changes that’s new to me. some lessons comes with it. luckily the Forum is very active.

I’m confused on the fact that in instructions 1 & 2 when you put the “.name” at the end of your variable you get two different outputs.

Example 1

let spaceship = { crew: { captain: { name: 'Lily', degree: 'Computer Engineering', cheerTeam() { console.log('You got this!') } }, 'chief officer': { name: 'Dan', degree: 'Aerospace Engineering', agree() { console.log('I agree, captain!') } }, medic: { name: 'Clementine', degree: 'Physics', announce() { console.log(`Jets on!`) } }, translator: { name: 'Shauna', degree: 'Conservation Science', powerFuel() { console.log('The tank is full!') } } } }; // Write your code below for (let crewMember in spaceship.crew) { console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`) };

Here you get the crew title and name

Example 2

let spaceship = { crew: { captain: { name: 'Lily', degree: 'Computer Engineering', cheerTeam() { console.log('You got this!') } }, 'chief officer': { name: 'Dan', degree: 'Aerospace Engineering', agree() { console.log('I agree, captain!') } }, medic: { name: 'Clementine', degree: 'Physics', announce() { console.log(`Jets on!`) } }, translator: { name: 'Shauna', degree: 'Conservation Science', powerFuel() { console.log('The tank is full!') } } } }; // Write your code below for (let crewMember in spaceship.crew) { console.log(`${spaceship.crew[crewMember].name}: ${spaceship.crew[crewMember].degree}`) };

However, the output here is just the name and their degree. Why or how is the crew title excluded here but included in the first one?

in the second code sample, you don’t log ${crewMember}: