Strings and quotations in arrow function

1

Howcome in this code:

const ratings = watchList.map(property => ({title: property.Title, rating: property.imdbRating}))

Do you not need quotations around title and rating to make them display as a string in the array created from map?

2

Because in JavaScript, an object is defined in string form. So even though you didn’t put it as a string, it will always be in a type of string.

const myobj = {
   obj1: "hello",
   'obj2': "world"
}
3

Hello~!

You are creating an array of objects; title and rating are properties of those objects. As such, you do not need to wrap them in quotation marks. :slight_smile:

1 Like
4

Howcome in this code

const ratings = watchList.map(({ Title: title, imdbRating: rating }) => ({title, rating}));

You don’t have a callback function? Also the code is supposed to return (Title: title) not just (title). So howcome this code works?

Thanks

5

This is called Object Destructuring, it basically just takes the object from the watchList and apply it as it’s name. It’s part of the ES6 curriculum here:

1 Like
6

It does have a callback

({ Title: title, imdbRating: rating }) => ({title, rating})

It is destructuring the properties and renaming them, then returning an object with the properties.

const { Title: title, imdbRating: rating } = watchList[0];

console.log(title); // Inception
console.log(rating); // 8.8
console.log({ title, rating }); // { title: 'Inception', rating: '8.8' }
1 Like
8

Ok, I am going to look into destructuring a little bit more, but off the top of my head I dont understand why

console.log({ title, rating }); // { title: 'Inception', rating: '8.8' } is  = { title: 'Inception', rating: '8.8' }

Because I dont get where the title/string “title” came from. I thought title was just = inception

9

What I am trying to say is how does ({title, rating}) = { title: ‘Inception’, rating: ‘8.8’ }.

Shouldnt ({title, rating}) = {inception, 8.8}

10

A property is always a key/value pair and an object is just a collection of key/value pairs. It is using the identifier as the key and the value as the value.

const user = {
  name: 'John',
};

const { name } = user;
console.log(name); // John

// destructuring the properties and renaming to UserName
const { name: UserName } = user;
console.log(UserName); // John

console.log({ UserName }); // { UserName: 'John' }
console.log({ newUserName: UserName }); // { newUserName: 'John' }

const name = 'John';
console.log({ name }); // { name: 'John' }
11

that’s a thing that can be done with objects, if you have a variable, and want to make from that variable a property with the same name of the variable, and the same value, it is possible using this way:

let a = 27;
console.log({a}); // {a: 27}

write the variable inside the object, and you will have that the variable name will become the property name, and the value to which the variable points to will become the property value

1 Like
13

In this instance

You are calling the value first, so if you call the value first it works also?

For ex.

let a = 27;
console.log({27}); // {a: 27}
14

no, this doesn’t work
open the browser console and try it out yourself, you just get a syntax error

also remember that a variable point to a value, but the value is just a value, it doesn’t point to a variable (you can see if you find useful the Just Javascript course on the relationships between variables and values)

object destructuring, so what happens here in the parameters: ({ Title: title, imdbRating: rating }) => ({title, rating}), or as shown above by @lasjorg, it is a different thing.
Maybe try to consult a few articles on this, it is a tricky thing to understand, but the most important thing is that it is a more cryptic and more short way to do something you already know how to do.

16

Ok, thanks, I so basically:

const { Title: title, imdbRating: rating } = watchList[0]; --> returns

title = inception, and rating = 8.8

Then you return title and rating and you get title: inception and rating 8.8

17

this is not a return statement
this is destructuring, it is taking values from the object and putting those in variables