1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
---
title: Operador de coalescência nula
slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
tags:
- JavaScript
- Operador
- Operadores lógicos
- Referencia
- coalescencia nula
- duas interrogações
- nulidade
translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
original_slug: Web/JavaScript/Reference/Operators/operador_de_coalescencia_nula
---
<p>{{JSSidebar("Operators")}}</p>
<p>O <strong>operador de coalescência nula (<code>??</code>)</strong> é um operador lógico que retorna o seu operando do lado direito quando o seu operador do lado esquerdo é {{jsxref("null")}} ou {{jsxref("undefined")}}. Caso contrário, ele retorna o seu operando do lado esquerdo.</p>
<p>Ao contrário do <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Operadores_Logicos#OR_Lógico_()">operador lógico OR (<code>||</code>)</a>, o operando esquerdo é retornado se houver um valor <em><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Operadores_Logicos#Short-Circuit_Evaluation">falsy</a></em> (falso) que não seja <code>null</code> ou <code>undefined</code>. Em outras palavras, se você usar <code>||</code> para obter algum valor padrão para outra variável <code>foo</code>, você pode enfrentar comportamentos inesperados se você considerar algum valor falseável como utilizável (eg. <code>''</code> ou <code>0</code>). Veja abaixo alguns exemplos:</p>
<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div>
<p class="hidden">O código fonte para este exemplo interativo está armazenado em um repositório do GitHub. Se você gostaria de contribuir para o projeto de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request.<br>
Veja o <a href="https://github.com/mdn/interactive-examples/pull/1482#issuecomment-553841750">PR #1482</a> sobre a adição deste exemplo.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox"><var>exprEsq</var> ?? <var>exprDir</var>
</pre>
<h2 id="Descrição">Descrição</h2>
<p>O operador de coalescência nula retorna os resultados da expressão de seu lado direito se a expressão de seu lado esquerdo for {{jsxref("null")}} ou {{jsxref("undefined")}}.</p>
<h3 id="Endereçando_um_valor_padrão_à_variável">Endereçando um valor padrão à variável</h3>
<p>Inicialmente, quando se deseja endereçar um valor padrão à variável, um padrão comum é utilizar o operador lógico OR (<code><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Operadores_Logicos#OR_Lógico_()">||</a></code>):</p>
<pre class="brush: js">let foo;
// foo nunca é endereçado a nenhum valor, portanto, ainda está indefinido
let someDummyText = foo || 'Hello!';</pre>
<p>Entretanto, devido ao <code>||</code> ser um operador lógico booleano, o operando do lado esquerdo é coagido para um valor booleano para sua avaliação e qualquer valor <em>falseável</em> (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) não é retornado. Este comportamento pode causar consequencias inesperadas se você considerar <code>0</code>, <code>''</code>, ou <code>NaN</code> como valores válidos.</p>
<pre class="brush: js">let count = 0;
let text = "";
let qty = count || 42;
let message = text || "Olá!";
console.log(qty); // 42 e não 0
console.log(message); // "Olá!" e não ""
</pre>
<p>O operador de coalescência nula evita esta cilada pois retorna o segundo operando apenas quando o primeiro é avaliado entre os valores <code>null</code> ou <code>undefined</code> (mas nehum outro valor falseável):</p>
<pre class="brush: js">let myText = ''; // Uma string vazia (que também é um valor falseável)
let notFalsyText = myText || 'Olá mundo';
console.log(notFalsyText); // Olá mundo
let preservingFalsy = myText ?? 'Olá vizinhança';
console.log(preservingFalsy); // '' (Pois myText não é undefined e nem null)
</pre>
<h3 id="Curto-circuito">Curto-circuito</h3>
<p>Assim como os operadores lógicos OR e AND, a expressão do lado direito não é avaliada se o lado esquerdo não for avaliado entre <code>null</code> e nem <code>undefined</code>.</p>
<pre class="brush: js">function A() { console.log('A foi chamado'); return undefined;}
function B() { console.log('B foi chamado'); return false;}
function C() { console.log('C foi chamado'); return "foo";}
console.log( A() ?? C() );
// Imprime "A foi chamado" então "C foi chamado" e por fim "foo"
// Como A() retornou undefined então ambas expressões foram avaliadas
console.log( B() ?? C() );
// Imprime "B foi chamado" então "false"
// Como B() retornou false (e não null ou undefined), a expressão
// do lado direito não foi avaliada.
</pre>
<h3 id="Sem_encadeamento_com_os_operadores_AND_e_OR">Sem encadeamento com os operadores AND e OR</h3>
<p>Não é possível encadear ambos operadores AND (<code>&&</code>) e OR (<code>||</code>) diretamente com o <code>??</code>. Um <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> será disparado nesse tipo de caso.</p>
<pre class="brush: js example-bad">null || undefined ?? "foo"; // Dispara um SyntaxError
true || undefined ?? "foo"; // Dispara um SyntaxError</pre>
<p>Entretanto, explicitar diretamente a precedência por meio de parênteses resulta no comportamento correto:</p>
<pre class="brush: js example-good">(null || undefined) ?? "foo"; // retorna "foo"
</pre>
<h3 id="Relacionamento_com_o_operador_de_encadeamento_opcional_.">Relacionamento com o operador de encadeamento opcional (<code>?.</code>)</h3>
<p>O operador de coalescêcia nula trata <code>undefined</code> e <code>null</code> como valores específicos e então executa o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">operador de encadeamento opcional (<code>?.</code>)</a> o qual é útil para acessar uma propriedade de um objeto, o qual pode ser <code>null</code> ou <code>undefined</code>.</p>
<pre class="brush: js">let foo = { someFooProp: "oi" };
console.log(foo.someFooProp?.toUpperCase()); // "OI"
console.log(foo.someBarProp?.toUpperCase()); // undefined
</pre>
<h2 id="Exemplo">Exemplo</h2>
<p>Neste exemplo, nós iremos prover valores padrão, mas manter valores que não sejam (advinha???) <code>null</code> ou <code>undefined</code>.</p>
<pre class="brush: js">const nullValue = null;
const emptyText = ""; // falseável (falsy)
const someNumber = 42;
const valA = nullValue ?? "padrão para A";
const valB = emptyText ?? "padrão para B";
const valC = someNumber ?? 0;
console.log(valA); // "padrão para A"
console.log(valB); // "" (pois a string vazia não é null ou undefined)
console.log(valC); // 42
</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://tc39.es/proposal-nullish-coalescing/#top">Proposal for the "nullish coalescing" operator</a></td>
<td>Stage 4</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{Compat("javascript.operators.nullish_coalescing")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">The optional chaining operator</a></li>
<li><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Operadores_Logicos#OR_Lógico_()">The logical OR (<code>||</code>) operator</a></li>
<li><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/Parametros_Predefinidos">Default parameters in functions</a></li>
</ul>
|
