I asked Chat GPT to explain optional chaining in JavaScript to me like I’m 5:

Alright kiddo, imagine you have a big toy box. Inside this toy box, there are smaller boxes, and inside those, even smaller boxes. Some boxes might be empty, and others might have a toy or another smaller box inside.

Let’s say you want to find a tiny toy car, but you’re not sure which box it’s in. You start with the big toy box, then you open a smaller box inside, and then another one, and so on, until you either find the toy car or reach an empty box.

But there’s a problem. What if you try to open a box and there’s no box inside? You can’t keep looking, right? You’d stop there and say, “Oops! There’s no box here to open.”

In JavaScript, when you want to access something deep inside an object (like our big toy box), you might run into a similar problem. The thing you’re looking for might not be there, and if you try to access it, you’ll get an error.

JavaScript’s optional chaining is like a magic tool that helps with this. Instead of going box by box, and risking an error if something isn’t there, optional chaining lets you say, “Hey, if there’s a box here, open it. If not, that’s okay, just tell me there’s nothing there.”

In code, it looks like this:

let toy = bigToyBox?.smallBox?.tinyBox?.toyCar;

If any of the boxes don’t exist, JavaScript won’t get mad. It’ll just say undefined, meaning “I didn’t find it.” And that’s how optional chaining keeps our toy search safe and error-free!

Being able to use ?. – allows you to optionally chain things.

It will only try to access the nested value, if the first value existed.

if something doesnt’ exist – it will just return “undefined”

The optional chaining is helpful when working with a database and lots of data, so that you don’t have to manage a load of “if statements”

Optional chaining is a convenient way to access values inside of objects, when working with dynamic data its important that you avoid errors and crashing. Optional chaining can help with this!

Rest paramaters are represented by 3 dots and then an array name

It is very similar to the spread operator – using the same symbol – 3 dots.

However, the rest pattern is used within a function’s parameters

Say you have a function called sum, with 2 parameters – a + b

But we add a third argument – the third argument will normally be ignored.

Using the rest parameter, as shown below, you can now store all the arguments, into an array, named “args”

Now rewrite the funcition, with a loop and you can write any amount of arguments and they will be added:

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

Imagine you and your friends are at an ice cream shop. There are lots of flavors to choose from.

Now, think of a JavaScript function as the ice cream shop owner. When you order your ice cream, you might say “I want chocolate, vanilla, and strawberry.” But your friends might order different flavors or a different number of scoops.

To handle this, the shop owner (our JavaScript function) uses a special bucket, called the “rest” parameter. No matter how many flavors you and your friends order, they all go into this same bucket.

In JavaScript, this is like when a function uses “…args” as a parameter. For example:

function orderIceCream(...flavors) { console.log(flavors); }

Here, ‘flavors’ is our special bucket. If you call orderIceCream("chocolate", "vanilla", "strawberry"), the function will print ["chocolate", "vanilla", "strawberry"]. And if your friend calls orderIceCream("mint", "rocky road"), the function will print ["mint", "rocky road"]. No matter how many flavors (or arguments) you give the function, they all get collected into the ‘flavors’ array. That’s the magic of the rest parameter!

One important thing to remember is that the rest parameter (...flavors in our example) should always be the last parameter in your function, because it’s like the shop owner’s “catch-all” bucket for all remaining ice cream flavors you order.

I hope that makes sense! Let me know if you have any other questions about JavaScript.

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