На что влияет написание fetchedUser &&

Question

Пишу приложение на React для вк. Пользуюсь библиотекой vk-ui. Отрывок кода:

const Home = ({ id, go, fetchedUser }) => (
    <Panel id={id}>
        <PanelHeader>Example</PanelHeader>
        {fetchedUser &&
        <Group title="User Data Fetched with VK Bridge">
            <Cell
                before={fetchedUser.photo_200 ? <Avatar src={fetchedUser.photo_200}/> : null}
                description={fetchedUser.city && fetchedUser.city.title ? fetchedUser.city.title : ''}
            >
                {`${fetchedUser.first_name} ${fetchedUser.last_name}`}
            </Cell>
        </Group>}

        <Group title="Navigation Example">
            <Div>
                <Button size="xl" level="2" onClick={go} data-to="persik">
                    Show me the Persik, please
                </Button>
            </Div>
        </Group>
    </Panel>
);

Я никак не могу понять что значит {fetchedUser && на 4-ой строчке.

P.S Без него код перестаёт работать так как он больше не может найти переменную fetchedUser

Answer 1

В JavaScript операторы && || возвращают не булевы значения, а значение своих операндов:

false || 10 // 10
true || 10 // true

true && 20 // 20
false && 20 // false

Это свойство языка используется для реализации логики в выражениях, в которых нельзя напрямую использовать условные конструкции.

В данном случае, если первый операнд оператора && будет вычислен как истинный, результатом всего выражения станет второй операнд, а именно react-элемент

БЛОГ НА HUSL

На что влияет написание fetchedUser &&

Ответы (1 шт):