Как правильно проверять переменную на пустоту внутри функции?

Question

[madc0de]

Сейчас при объявлении переменной пишу return с проверкой на пустоту иначе функция дальше выполняться не будет.

var element = document.querySelector('.domElement');
return element === undefined || element === null;

Но очень не удобно, если например много переменных и хочется объявить через запятую:

var n = document.querySelector('.domElement')
,   t = 0
,   l = 1;

Вот в примере, как правильно сделать, чтобы если элемента нету, не вернулась ошибка?

class App{
  constructor() {
     this.initCanvas();
  }
  initCanvas() {
     var element = document.querySelector('.domElement')
     ,   ctx = element.getContext('2d'); //тут будет ошибка, если такой элемента не существует
  }
}

Хотелось бы понять, как красиво, минималистично и правильно делать проверку на существование?

Answer 1

[Tim]

1 вариант. с 2020 года
element?.getContext('2d');
2 вариант использовать тернарный оператор
element ? element.getContext('2d') : null
3 вариант

if(element && element.getContext) {
//code
}

Comments

[madc0de]

1 и 2 вариант не подходит для данного примера, так как если дальше идет ctx.beginPath(), то будет ошибка, так как возвращает null. Но спасибо, про первый вариант не знал, очень удобно.

[Tim]

madc0de, в вашем случае сделайте примерно так

var element = document.querySelector('.domElement')
      if(element) {
             //code
      }

Answer 2

[Stalker_RED]

querySelector, возвращаемое значение:
Ссылка на объект типа Element, являющийся первым элементов в документе, который соответствует указанному набору CSS селекторов, либо null, если совпадений нет

то есть проверку можно упростить до element === null, или даже до !element

пишу return с проверкой на пустоту иначе функция дальше выполняться не будет.

чтоа? Показывайте пример, звучит очень странно.

как правильно сделать, чтобы если элемента нету, не вернулась ошибка?

Можно применить try ... catch например.
Но даже если ошибка не вернется, вы не сможете сделать getContext из пустоты. То есть код все равно не будет работать, даже если вы ошибку "спрячете". Зато потом будет сложнее понять, почему оно не работает.

Comments

[madc0de]

2. if( !element ) return false; // и функция прекращает далее обработку
3. Поэтому я и задал вопрос "как бы вы сделали в данном случае проверку" и привел в конце код?

[Stalker_RED]

madc0de, return что_угодно прекращает работу, потому что у return работа такая

Оператор return завершает выполнение текущей функции и возвращает её значение.

Вы же утверждаете, что

пишу return с проверкой на пустоту иначе функция дальше выполняться не будет

но после return она точно выполнятся не будет.

Я могу вам написать

несколько

var element = document.querySelector('.domElement'),
  ctx = element && element.getContext('2d'); // ошибки нет

console.log(element, ctx) // element=null, ctx=null

вариантов

try {
var element = document.querySelector('.domElement'),
  ctx = element.getContext('2d'); // ошибка внутри try
} catch (err) {
  // console.log(err) // но выводить мы ее не будем
}

console.log(element, ctx) // element=null, ctx=undefined

которые не будут возвращать ошибку. Но когда canvas не найден, рисовать на нем все равно не выйдет. Какой смысл тогда от скрытия ошибки - хз. Только усложните потом отладку.

Хотелось бы понять, как красиво, минималистично и правильно делать проверку на существование?

вот так:

if (element) {
  // ура, он существует
}

Answer 3

[Владимир Проскурин]

Вы не так много экономите символов (в плане ввода, для размеров бандла минификаторы все сами сделают), то почему не писать отдельно?

var element = document.querySelector('.domElement');
var ctx = element.getContext('2d');

На мой взгляд, это лаконичнее, легче поставить точку останова на любой переменой, добавить проверку (как в вашем случае). Да и в большинстве команд, что я работал, всегда стоит eslint правило one-var.

Comments

[madc0de]

То есть в каждой функции писать

var el = document.querySelector('.domElement');
if( !el ) return false;
var ctx = el.getContext('2d');

Не кажется вам грубым решением и нету более лаконичного?

[Владимир Проскурин]

madc0de, нет, не кажется. Отлично видна последовательность действий. Я бы добавил еще фигурные скобки в if.

const el = document.querySelector('.domElement');
if (!el) {
    return false;
}
const ctx = el.getContext('2d');

То есть в каждой функции писать

В каждой функции не надо писать, храните контекст где-то в поле класса (или в методе getCurrentContext). Можно еще выбрасывать исключение.