Рассмотрим пример.
На странице есть элемент с классом
.box Код
<div class="box"></div>
Для него заданы некоторые стили:
Код
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 250px;
background-color: olive;
}
Элемент получен со страницы и сохранён в переменную
Код
const box = document.querySelector('.box');
Затем, в двух отдельных переменных мы сохранили значения высоты и ширины, которые будут подставляться в функцию
changeParams в виде передаваемых аргументов:
Код
const newHeight = 100;
const newWidth = 400;
function changeParams(elem, h, w) {
elem.style.height = `${h}px`;
elem.style.width = `${w}px`;
}
changeParams(box, newHeight, newWidth);
Возможна такая ситуация, когда какой-то из параметров не существует, для этого используются параметры по умолчанию, например так, с помощью оператора "или":
Код
function changeParams(elem, h, w) {
elem.style.height = `${h || 200}px`;
elem.style.width = `${w}px`;
}
И теперь, если h существует, то применится его значение, а если нет - применится значение по умолчанию (200).
Если же вместо
h нам нужно будет подставить значение 0, тогда выберется параметр по умолчанию, потому что 0 в логическом контексте будет
false, а оператор "или" выбирает правдивое значение, то есть выберется значение по умолчанию.
Как быть?
Как раз для этого и есть оператор нулевого слияния, он реагирует только на
null и
undefined.
Вот как это работает:
Код
let userName;
console.log(userName ?? "User"); // User
В первой строке мы объявили переменную, но значения ей не присвоили.
Если выводить её в консоль, то в консоли будет
undefined (значение не определено), оператор
Nullish проверяет то, что слева от него и если видит
undefined, выводит то, что справа, то есть строку "
User"
Мы можем использовать это в нашей функции:
Код
function changeParams(elem, h, w) {
elem.style.height = `${h ?? 200}px`;
elem.style.width = `${w ?? 200}px`;
}
Из операторов
Nullish можно выстраивать цепочку для получения первого реального значения:
Код
let userName;
let userKey;
console.log(userName ?? userKey ?? "User"); // User
Операторы "
и" и "
или" с оператором
Nullish не миксуются, то есть код ниже выведет ошибку:
Код
console.log(userName && userKey ?? "User"); // Error
console.log(userName || userKey ?? "User"); // Error
Приоритет оператора Nullish не очень высокий, поэтому нужно быть осторожным, когда вы комбинируете что-то с этим оператором.
Например, код ниже даст совершенно разный результат (допустим, наша функция дополнительно должна рассчитывать площадь прямоугольника):
Код
const box = document.querySelector('.box');
const newHeight = 100;
const newWidth = 400;
function changeParams(elem, h, w) {
elem.style.height = `${h ?? 200}px`;
elem.style.width = `${w ?? 200}px`;
elem.innerHTML = h ?? 200 * w ?? 200;
}
changeParams(box, newHeight, newWidth);
Здесь мы вместо ожидаемой площади в 8-й строке получим просто цифру 100, то есть значение
h.
Почему так?
Сначала по приоритету выполнится умножение, то есть 200 * 400, но потом начинает работу оператор
Nullish, он смотрит значение
h слева от себя, видит, что оно не равно
undefined или
null, и выводит его, то есть цифру 100.
А вот такой код даст нужный расчет:
Код
function changeParams(elem, h, w) {
elem.style.height = `${h ?? 200}px`;
elem.style.width = `${w ?? 200}px`;
elem.innerHTML = (h ?? 200) * (w ?? 200);
}
Всего комментариев: 0