How to make a variable using keys from literal object, javascript

Question

In an exercise, I have to make a variable called "fullAddress" that contains everything in a given literal object except for the first key.

I found a solution that sort of works, but I feel like there is a better way to do it. Also, I can't figure out how to efficiently put space between the values in the variable.

The exercise says the final result should look something like this:

39 Johnson Ave, Brooklyn, NY, 11206

But mine looks like this:

39 Johnson AveBrooklynNY11206

Literal Object provided in exercise:

const restaurant = {
    name: 'Ichiran Ramen',
    address: `${Math.floor(Math.random() * 100) + 1} Johnson Ave`,
    city: 'Brooklyn',
    state: 'NY',
    zipcode: '11206',
}

My solution:

let fullAddress = restaurant.address + restaurant.city + restaurant.state + restaurant.zipcode;

So what is the issue? Add a space with a string in between. restaurant.address + " " + restaurant.city or use string template literals. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — epascarello
– epascarello, Commented Mar 18, 2021 at 19:18

Alex Coleman · Accepted Answer · 2021-03-18 19:20:14Z

Given an array of strings, you can use values.join(', ') to put commas between the values cleanly. Then you could do e.g. [restaurant.address, restaurant.city, restaurant.state, restaurant.zipcode].join(', ').

If you wanted to do this more generically for any object, you could use Object.values(restaurant).slice(1).join(', ') to dynamically get all values after the first and comma delimit them.

In this case though, I think it makes the most sense to just explicitly append with commas since it's an address format (maybe you don't want a space after the zip code for example), so something like restaurant.address + ', ' + restaurant.city + ...

junvar · Accepted Answer · 2021-03-18 19:23:02Z

Regarding spaces (and commas), you can use a template string as done for restaurant.address.

const restaurant = {
    name: 'Ichiran Ramen',
    address: `${Math.floor(Math.random() * 100) + 1} Johnson Ave`,
    city: 'Brooklyn',
    state: 'NY',
    zipcode: '11206',
};

let fullAddress = `${restaurant.address}, ${restaurant.city}, ${restaurant.state}, ${restaurant.zipcode}`;
console.log(fullAddress); // 39 Johnson Ave, Brooklyn, NY, 11206

Next, notice we're actually joining all the address-parts with the same delimiter: ', '. This means we can use [].join() instead.

const restaurant = {
    name: 'Ichiran Ramen',
    address: `${Math.floor(Math.random() * 100) + 1} Johnson Ave`,
    city: 'Brooklyn',
    state: 'NY',
    zipcode: '11206',
};

let addressParts = [restaurant.address, restaurant.city, restaurant.state, restaurant.zipcode];
let fullAddress = addressParts.join(', ');
console.log(fullAddress); // 39 Johnson Ave, Brooklyn, NY, 11206

Lastly, (if you want to get fancy), note that restaurant. is repeated. This can be avoided with [].map().

const restaurant = {
    name: 'Ichiran Ramen',
    address: `${Math.floor(Math.random() * 100) + 1} Johnson Ave`,
    city: 'Brooklyn',
    state: 'NY',
    zipcode: '11206',
};

let fullAddress = ['address', 'city', 'state', 'zipcode']
    .map(key => restaurant[key])
    .join(', ');
console.log(fullAddress); // 39 Johnson Ave, Brooklyn, NY, 11206

Thanks for laying that all out! I forgot about template literals. I haven't learned about maps yet-- I'll have to look into that.

Abito Prakash · Accepted Answer · 2021-03-18 19:24:35Z

2

You can take out all the values from the restaurant object, remove the first element and then use join to get the desired string

const restaurant = {
   name: 'Ichiran Ramen',
   address: `${Math.floor(Math.random() * 100) + 1} Johnson Ave`,
   city: 'Brooklyn',
   state: 'NY',
   zipcode: '11206',
}

const fullAddress = Object.values(restaurant).slice(1).join(', ');
console.log(fullAddress);

answered Mar 18, 2021 at 19:24

Abito Prakash

4,8002 gold badges16 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to make a variable using keys from literal object, javascript

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related