Asignación de JavaScript

Tabla de contenido

Operadores de asignación de JavaScript

Los operadores de asignación asignan valores a variables de JavaScript.

Operator	Example	Same As
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
**=	x **= y	x = x ** y

Operadores de asignación de turnos

Operator	Example	Same As
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y

Operadores de asignación bit a bit

Operator	Example	Same As
&=	x &= y	x = x & y
^=	x ^= y	x = x ^ y
\|=	x \|= y	x = x \| y

Operadores de asignación lógica

Operator	Example	Same As
&&=	x &&= y	x = x && (x = y)
\|\|=	x \|\|= y	x = x \|\| (x = y)
??=	x ??= y	x = x ?? (x = y)

Nota

Los operadores de asignación lógica son ES2020

El=Operador

El Operador de Asignación Simple asigna un valor a una variable.

Ejemplos de tareas simples

let x = 10;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Simple Assignment</h2>
<h3>The = Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

let x = 10 + y;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Simple Assignment</h2>
<h3>The = Operator</h3>

<p id="demo"></p>

<script>
let y = 50
let x = 10 + y;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador +=

El Operador de asignación de suma agrega un valor a una variable.

Ejemplos de asignaciones de suma

let x = 10;
x += 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Addition Assignment</h2>
<h3>The += Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
x += 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

let text = "Hello";
text += " World";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Addition Assignment</h2>
<h3>The += Operator</h3>

<p id="demo"></p>

<script>
let text = "Hello";
text += " World";
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

El operador -=

El Operador de asignación de resta resta un valor de una variable.

Ejemplo de tarea de resta

let x = 10;
x -= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Subtraction Assignment</h2>
<h3>The -= Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
x -= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador *=

El Operador de asignación de multiplicación multiplica una variable.

Ejemplo de tarea de multiplicación

let x = 10;
x *= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Multiplication Assignment</h2>
<h3>The *= Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
x *= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador **=

El Operador de asignación de exponenciación eleva una variable a la potencia del operando.

Ejemplo de asignación de exponenciación

let x = 10;
x **= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Exponentiation Assignment</h2>
<h3>The **= Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
x **= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador /=

El Operador de Asignación de División divide una variable.

Ejemplo de asignación de división

let x = 10;
x /= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Division Assignment</h2>
<h3>The /= Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
x /= 5;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

El operador %=

El Operador de asignación de resto asigna un resto a una variable.

Ejemplo de asignación de resto

let x = 10;
x %= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Remainder Assignment</h2>
<h3>The %= Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
x %= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador <<=

El Operador de asignación de desplazamiento a la izquierda desplaza una variable hacia la izquierda.

Ejemplo de asignación de desplazamiento a la izquierda

let x = -100;
x <<= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Left Shift Assignment</h2>
<h3>The &lt;&lt;= Operator</h3>

<p id="demo"></p>

<script>
let x = -100;
x <<= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador >>=

El Operador de asignación de desplazamiento a la derecha desplaza una variable hacia la derecha (con signo).

Ejemplo de asignación de desplazamiento a la derecha

let x = -100;
x >>= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Right Shift Assignment</h2>
<h3>The &gt;&gt;= Operator</h3>

<p id="demo"></p>

<script>
let x = -100;
x >>= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador >>>=

El Operador de asignación de desplazamiento a la derecha sin firmar desplaza una variable hacia la derecha (sin firmar).

Ejemplo de asignación de desplazamiento a la derecha sin firmar

let x = -100;
x >>>= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Right Shift Assignment</h2>
<h3>The &gt;&gt;&gt;= Operator</h3>

<p id="demo"></p>

<script>
let x = -100;
x >>>= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador &=

El Operador de asignación AND bit a bit realiza una operación AND bit a bit en dos operandos y asigna el resultado a la variable.

Ejemplo de asignación AND bit a bit

let x = 10;
x &= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Bitwise AND Assignment</h2>
<h3>The &amp;= Operator</h3>

<p id="demo"></p>

<script>
let x = 100;
x &= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador |=

El Operador de asignación OR bit a bit realiza una operación OR bit a bit en dos operandos y asigna el resultado a la variable.

Ejemplo de asignación OR bit a bit

let x = 10;
x |= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Bitwise OR Assignment</h2>
<h3>The |= Operator</h3>

<p id="demo"></p>

<script>
let x = 100;
x |= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador ^=

El Operador de asignación XOR bit a bit realiza una operación XOR bit a bit en dos operandos y asigna el resultado a la variable.

Ejemplo de asignación XOR bit a bit

let x = 10;
x ^= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Bitwise XOR Assignment</h2>
<h3>The ^= Operator</h3>

<p id="demo"></p>

<script>
let x = 100;
x ^= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador &&=

El operador de asignación lógico AND se utiliza entre dos valores.

Si el primer valor es verdadero, se asigna el segundo valor.

Ejemplo de asignación lógica Y

let x = 10;
x &&= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &amp;&amp;= Operator</h3>
<p>If the first value is true, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x = 100;
x &&= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador &&= es una característica de ES2020.

El operador ||=

El operador de asignación OR lógico se utiliza entre dos valores.

Si el primer valor es falso, se asigna el segundo valor.

Ejemplo de asignación lógica OR

let x = 10;
x ||= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical OR Assignment</h2>
<h3>The ||= Operator</h3>

<p>If the first value is false, the second value is assigned:</p>
<p id="demo"></p>

<script>
let x = undefined;
x ||= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador ||= es una característica de ES2020.

El operador ??=

El operador de asignación coalescente nulo se utiliza entre dos valores.

Si el primer valor no está definido o es nulo, se asigna el segundo valor.

Ejemplo de asignación de fusión nula

let x;
x ??= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The ??= operator is used between two values. If the first value is undefined or null, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x;
document.getElementById("demo").innerHTML = x ??= 5; 
</script>

</body>
</html>

El operador ??= es una característica de ES2020.