JAVASCRIPT | FRAMEWORKS
DATA STRUCTURES AND OPERATORS
DESTRUCTURING ARRAYS
DESTRUCTURING ARRAYS
So basically, we are trying to take
out the data from the array using
destructuring methods. It’s a new
ES6 feature of JavaScript.
How to skip a element? Just leave a gap using the commas.
Swapping variable using array destruction
Destructuring in nested array
How to set default values ?
DESTRUCTURING OBJECTS
Mutating variables in objects
Nested objects
Assigning new names for the variables while
destructuring objects
Automatically destructuring the values while
passing through the function.
How to add default values while passing
through a function in objects destructuring?
Spread operator
Explanation : So basically spread the
operator will take all the elements from
the array and it will put once again
individually in the respected array
where we want the result.
• When we want to rate the elements of an array
individually, we can also spread the operator.
• Spread operator is typically or it is similar to
destructuring arrays but what we should
consider is here we don’t use extra variables to
assign values but we will just write the elements
by separating them with comma.
Two important use cases of spread operator:
• To create shallow copies of array
• To merge two arrays
Spread operator not only works on arrays but also works on all ITERABLES [arrays, strings, maps , sets etc.. but not
objects]
Using spread operator on a string.
Note: We can only use spread operator while passing it through a function or while
creating arrays we cannot use it in other places like we cannot pass into a template
literal or something like that
Using spread operator in a function.
Using spread operator in an object.
Rest Pattern and Parameters
output
Rest patterns : Rest pattern basically collects the elements that are unused in the destructuring assignment.
As per example in the image we have to make sure that
we will use the rest operator at the last of the array and
we should give the space for other variables at first so
that JavaScript knows after what variable the remaining
elements should be considered for the rest operation.
And if you add any other variables after rest operator it will throw in error and we should also
remember that there can there should be only one rest operator used we cannot use multiple rest
operators.
Rest operator in objects
output
Rest operator and functions
Short circuiting (&& and ||)
Earlier we stated that logical operators only return and take Boolean values but now we learn that logical operators can take any data type
and can return any data type. It is also known as short circuiting.
If the first operator is a truthy value then the second operator will not be evaluated and hence the first operator will be returned.
And operator : Short circuits
when the first value is faulty
and then immediately returns
that faulty value without even
evaluating the second
operant.
• If the first operator is a falsy value then the first operator is only
returned but if the first operator is a truthy value and 2nd operator is
also a truthy value then the 2nd operator will be returned. That is if it
finds any false value then it will return that falsy value but if all the
values are truthy values then it will go on to the last element and
returns the last truth value.
NULLISH COALESCING OPERATOR ( ?? )
Problem : So here in the below example as we’re using the short circuiting so
what happens is when the restaurant dot number of guests is zero it is a falsely
value and they answer will be 10 only because zero will not be considered so
we can solve this problem using the nullish COALESCING operator.
Solution : one more thing to notice only null and undefined are
nullish values zero and empty space are not nullish values.
FOR OF LOOP – LOOPING AN ARRAY
How to get the indices of the elements while
using the for of loop.
Enhanced object literals.
• See the coding file to get a better understanding of this topic as it
contains some of the basic and important features which cannot
be shown in an image.
Optional chaining (.?)
So optional chaining is used when we have to access a property from
an object , but sometimes we don’t know whether the property really
exists or not and it may throw an error , so to avoid that error we can
use optional chaining at the point where we want to check if the
property exists or not. If it doesn’t exist, it will directly skip it, and we
will get an undefined output. And we can Skip the error.
Looping objects
SETS
• Sets are kind of a data types which only contain unique
elements so that we cannot add any duplicates into a
set and it sounds similar like the sets we heard in
mathematics in class 12 and 11.
• checking a element is present or not
And we cannot retrieve data from a set using indexes as it will
give us an undefined output. So we cannot retrieve data from
a site and we do not use set to store some data so we should
prefer array if we want to save some data
But one thing to remember
Is we can look through a set
Use case of sets
• We use sets to remove duplicate values from arrays.
SETS take iterables as parameters so we can only put iterables in
sets and it can be a string that an object or an array.
MAPS
in JavaScript a map is a data structure that we can use to map
values to keys so just like in objects data is stored in key value
pairs in maps now the big difference between objects and
maps is that in maps the keys can have any type and this can
be used so in objects the keys are basically always But in maps
we can have any type of key it can even be objects or arrays or
other .
How to add elements in a map : And
one more thing to remember is that we
can map any type of data type in a map
Chaining in maps
This will not work
This will work
Working With Strings
Strings incomplete
FUNCTIONS – A CLOSE LOOK
Default Values in functions