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.

1 Like

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?

1 Like

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.

7 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.

1 Like

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}:

Thank you! I read many answers and only yours was helpful. I still donā€™t understand why it doesnā€™t work with backtiks, but it works with the plus sign

I wish there was a in between lesson that covers this jump as it really messed me up . haha I donā€™t like to often just jump to the solutions and this was racking me up.

hi. my question is: how do we define variableName here without putting ā€˜=ā€™ after const or let?
(for (let variableName in outerObject.innerObject) ) I know itā€™s syntax but Iā€™m just wondering why. sorry if i posted my question in the wrong place