Well, these were introduced in 2021, according to the Udemy course I am doing.

the “=” sign, assigns values to things

When there’s additional stuff, before the “=”, like “&&”; then some kind of logic has to be fulfilled before anything is assigned.

Two vertical lines, or pipes – “||” are the “OR” operators

Logical AND Assignment (&&=)

This logical assignment operator only assigns the value if the left-hand side is truthy.

In JavaScript, two ampersands (&&) in an assignment operator form a Logical AND assignment operator (&&=). This is a newer addition to JavaScript, introduced in ES2021.

Here’s how it works:

Let’s say we have two variables, a and b.

If we write a &&= b;, it is a shorter way of saying:

“If a is truthy, let’s assign the value of b to a.

If a is falsy, keep a as it is.”

A “truthy” value is a value that is considered true when evaluated in a Boolean context. All values are truthy unless they are defined as falsy—i.e., except for false, 0, -0, 0n, "", null, undefined, and NaN.

So, &&= is checking if the first value is truthy and if so, it assigns the second value to the first one. If the first value is falsy, it remains unchanged.

Screenshot from Geeksforgeeks

Logical OR Assignment (||=)

This logical assignment operator only assigns the value if the left-hand expression is falsy.

This can be useful in cases where we want to keep the existing value if it does not exist, otherwise we want to assign a default to it. 

The Logical OR Assignment (||=) is a shorthand way of performing a logical OR operation and an assignment in one step. This operator was introduced in JavaScript with the ES2021 specification.

Here’s a simple way to understand it:

Let’s say we have two variables, a and b. If we write a ||= b;, it’s a shorter way of saying: “If a is not truthy (meaning it’s false, null, undefined, 0, NaN, or an empty string ”), then assign the value of b to a. If a is truthy (meaning it has any value other than those falsy values), then keep a as it is.”

So, a ||= b; is essentially a shortcut for a = a || b;.

The Logical OR Assignment (||=) operator is a handy tool when you want to assign a default or fallback value to a variable if the initial value of the variable is not truthy.

screenshot source

Logical Nullish Assignment (??=)

I asked Chat GPT to explain the operator to me like I’m 10:

Alright kiddo, let’s have a little chat about this nifty tool in JavaScript called the Nullish Coalescing Assignment Operator, which is represented by ??=. Sounds pretty fancy, huh? Don’t worry, we’ll make it fun!

Imagine you’re playing a game of football with your mates. Now, you always need a ball to play, right? But sometimes, you might forget to bring your own ball to the game. In comes the Nullish Coalescing Assignment operator to save the day.

So, let’s say myBall is the ball you bring, and spareBall is a ball that’s always kept at the ground just in case. Now, you want to check if you’ve brought your ball. If you have, great, we use your ball (myBall) for the game. But, if you forgot your ball (meaning myBall is null or undefined), we then use the spareBall.

In JavaScript, we’d write this check as myBall ??= spareBall;. This means, “If I forgot my ball (myBall), let’s use the spareBall.”

So that’s it, bachgen (that’s ‘boy’ in Welsh)! The Nullish Coalescing Assignment Operator is like your safety net, always making sure you have a ball to kick around!

Screenshot from WisdomGeek

I asked chat GPT to explain the Nullish coalescing operator (??) to me, like I’m 10 years old:

Let’s imagine you have two boxes, one is called ‘boxA’ and the other is ‘boxB’.

Now, you’re told you can take a toy from boxA, but here’s the thing, sometimes boxA can be empty. If boxA is empty, you’re allowed to take a toy from boxB instead.

In JavaScript, this is what the nullish coalescing operator (??) does. If the value on its left side (boxA) is “null” or “undefined” (it’s empty), it’ll give you the value on the right side (boxB).

Let’s look at this in code:

let boxA = null;
let boxB = "Dinosaur Toy";

let myToy = boxA ?? boxB;
console.log(myToy);  // This will print: Dinosaur Toy

In this example, ‘boxA’ is null (it’s empty), so we move to ‘boxB’ and take the “Dinosaur Toy”.

But what if ‘boxA’ does have a toy?

let boxA = "Robot Toy";
let boxB = "Dinosaur Toy";

let myToy = boxA ?? boxB;
console.log(myToy);  // This will print: Robot Toy

Here, ‘boxA’ has a “Robot Toy”, so we take that and ignore what’s in ‘boxB’. It’s just like the rule we set at the start, we only check ‘boxB’ if ‘boxA’ is empty!

I hope that helps explain the nullish coalescing operator!

Notes from this video^

This operator works like the logical “or”, but is more strict

In this scenario, at the start of a game, the user has to provide the level of difficulty they want, and they also have the option of stating/providing at starting cash amount.

In this code, if they don’t provide a starting cash amount, they’ll get “500”

So the default for the “cash” is 500

If the user does provide a cash amount, then that gets used instead of the default.

https://www.udemy.com/course/the-complete-javascript-course/learn/lecture/22648543#learning-tools

I asked Chat GPT to explain the rest pattern and parameters in JS to me, like I was 11, and to add some welsh slang:

“Alright, kiddo, let’s chat about Rest Pattern and Parameters in JavaScript, tidy la?

It’s like when you’re at a sweet shop, and they’ve got all these fab sweets – Choc bars, bonbons, chewy toffees, and so on. But you don’t want to pick ’em all up one by one, do you? That’d take ages, innit? Instead, you want to scoop ’em up all at once, don’t you?

Well, in JavaScript, we’ve got this clever trick called the Rest Pattern. It’s like that sweetie scoop. Instead of grabbing arguments one by one, you can grab all of them at once. You can see this Rest Pattern when you see ‘…’ before a variable, like this: function fun(...args) { }. The ‘args’ here is like our sweetie bag, it’s holding all the arguments that were scooped up.

Now, these Rest Parameters, they’re proper tidy! Because all those arguments are now in one bag (or in an array, as we say in JavaScript), you can do things to the whole lot of them at once – like adding, subtracting, or whatever else you fancy.

So, remember, next time you want to scoop up a load of arguments in one go, the Rest Pattern and Parameters are your best mates, alright? Proper job, bach!”

Here’s some notes from medium and geekforgeeks

The rest parameter, introduced in ES2015 or ES6, provides an enhanced method to handle function parameters. This makes it easier to manage a varying number of inputs as parameters in a function. A rest parameter lets us represent an indefinite number of arguments as an array, meaning a function can be called with any number of arguments, regardless of its original definition.

The syntax looks like this:

// '...' represents the rest parameter
function functionname(...parameters) {
  // function statement;
}

Notice when ‘…’ is at the end of the function parameters, it’s recognized as the rest parameter and stores any number of parameters as an array.

For example, let’s say we have a function without a rest parameter:

function fun(a, b){
    return a + b;
}
console.log(fun(1, 2)); // Outputs: 3
console.log(fun(1, 2, 3, 4, 5)); // Outputs: 3 

In this case, we can pass more arguments than defined parameters without causing errors. However, only the first two arguments are evaluated. The rest parameter changes this by allowing us to collect any number of arguments into an array:

// Example using the rest parameter
function fun(...input){
    let sum = 0;
    for(let i of input){
        sum += i;
    }
    return sum;
}
console.log(fun(1,2)); // Outputs: 3
console.log(fun(1,2,3)); // Outputs: 6
console.log(fun(1,2,3,4,5)); // Outputs: 15 

Now, every argument is included when we call the ‘fun()’ function. The sum of all array elements is calculated using the ‘for..of’ loop.

Remember, the rest parameter must always be the last argument in a function, as it collects all remaining arguments into an array.

Here’s an example where the rest parameter is used with other arguments:

function fun(a,b,...c){
    console.log(`${a} ${b}`);
    console.log(c);
    console.log(c[0]);
    console.log(c.length);
    console.log(c.indexOf('Lionel'));
}
fun('Mukul','Latiyan','Lionel','Messi','Barcelona');

Output:

In this example, the rest parameter is passed as the third parameter. The first two arguments are treated normally, while the rest are collected by the rest parameter. Because the rest parameter produces an array, we can apply array methods provided by JavaScript.

TLDR; – The Spread operator allows you to join strings or arrays together in one longer string or array

Image from Reddit

Good tutorial here

Right, guv’nor! Picture this. You’ve got yourself a box of LEGOs, like? Now in the world of JavaScript, this box is what we’d call an array. It’s a list of things, sorted and lined up all proper like.

Now, suppose you have another bigger box, crammed full of all sorts of knick-knacks. You fancy bunging your LEGOs in there, but not as a separate box. Nah, you want to spread ’em out so each LEGO is jumbled up with the other toys.

This is what the JavaScript spread operator is all about. It’s like taking your box of LEGOs and tipping ’em into the larger toy box.

Here’s a little squiz:

let legos = ['red', 'blue', 'green'];
let otherToys = ['doll', 'car', ...legos, 'ball'];

console.log(otherToys); 
// Output: ['doll', 'car', 'red', 'blue', 'green', 'ball']

In this case, ...legos is using the spread operator. It’s like we’re tipping out all the LEGO pieces (each colour) into the otherToys array. Job’s a good ‘un!

So the spread operator ... in JavaScript is like spilling the beans, it pulls all elements from an array (or all properties from an object), and scatters them into something else.

And remember, this operator doesn’t muck about with the original array (or your LEGO box). It’s like taking the LEGO pieces out for a bit of a lark. The original LEGO box is still there, untouched. Bob’s your uncle, Fanny’s your aunt!

Here are some other notes I’ve robbed from other websites (with references back to um tho)

Programiz.com

Spread Operator

The spread operator ... is used to expand or spread an iterable or an array. For example,

const arrValue = [‘My’, ‘name’, ‘is’, ‘Jack’];

console.log(arrValue); // [“My”, “name”, “is”, “Jack”]
console.log(…arrValue); // My name is Jack

In this case, the code:

console.log(...arrValue)

is equivalent to:

console.log('My', 'name', 'is', 'Jack')

Copy Array Using Spread Operator

You can also use the spread syntax ... to copy the items into a single array. For example,

const arr1 = ['one', 'two'];
const arr2 = [...arr1, 'three', 'four', 'five'];

console.log(arr2); 
//  Output:
//  ["one", "two", "three", "four", "five"]

You can run the code in the programiz code runner thing here

codingsumit