Как проверить наличие переменной?

Question

[YakovSpb]

Как наиболее короче сделать, чтобы не выдало ошибки при отсутствии у объектов определенного свойства, например ${e.breeds[0].name}

function createPics() {
		getCats();
		let containerCats = '';

		newCats.forEach(e=>{
			let htmlCats = `
			<div class="cat__item">
				<div class="cat__img"><img src="${e.url}" alt="${e.breeds[0].name}"></div>
				<div class="cat__name">${e.breeds[0].name}</div>
				<div class="cat__temperament">${e.breeds[0].temperament}</div>
				<div class="cat__live">${e.breeds[0].life_span}</div>
				<div class="cat__origin">${e.breeds[0].origin}</div>
				<div class="cat__description">${e.breeds[0].description}</div>
				<div class="cat__wikipedia_url">${e.breeds[0].wikipedia_url}</div>
			</div>
			`;
			containerCats +=htmlCats;

		})
		generalDiv.innerHTML = containerCats;
	}

Comments

[WbICHA]

Во-первых, объявить переменные, чтобы вот этим копи-пастом не страдать:
const { name, temperament, ... } = e.breeds[0];
Во-вторых, тут проверок уже и немного получается:
if(e && e.breads && e.breeds[0])

[YakovSpb]

WbICHA, точно

Answer 1

[0xD34F]

Как наиболее короче сделать...

Короче - не проверять, и вообще не обрабатывать элементы, где нет данных:

generalDiv.innerHTML = newCats
  .filter(n => n?.breeds.length)
  .map(({ url, breeds: [ b ] }) => `
    <div class="cat__item">
      <div class="cat__img"><img src="${url}" alt="${b.name}"></div>
      <div class="cat__name">${b.name}</div>
      <div class="cat__temperament">${b.temperament}</div>
      <div class="cat__live">${b.life_span}</div>
      <div class="cat__origin">${b.origin}</div>
      <div class="cat__description">${b.description}</div>
      <div class="cat__wikipedia_url">${b.wikipedia_url}</div>
    </div>
  `)
  .join('');

Comments

[WbICHA]

Хм, это уже полноценно в жс внедрили? А то сидя на тс пропустил как-то...

[G F]

WbICHA, да, летом еще

[Дмитрий Беляев]

WbICHA, и в TS это тоже уже есть, а vscode это даже рефакторить уже умеет средствами language server'а ts

[WbICHA]

Дмитрий Беляев, именно потому, что в тс это давно есть, я и не заметил, что в жс это добавили.)

[Павел Корнилов]

WbICHA, нет пока, не полноценно. Точнее, не во все браузеры. См. список совместимости.

Answer 2

[Александр]

https://developer.mozilla.org/ru/docs/Web/JavaScri...

Comments

[YakovSpb]

эт понятно, а как эт коротко записать?