Table of contents
- Let vs Var vs Const
- Object.freeze()
- Arrow Functions
- Default Parameters for Functions
- Rest Parameter with Function Parameters
- Use the Spread Operator to Evaluate Arrays In-Place
- Destructuring Assignment to Extract Values from Objects
- Destructuring Assignment to Assign Variables from Nested Objects
- Destructuring Assignment to Assign Variables from Arrays
16/06/2023
Day 2 of Coding
Day 2 of JavaScript
I'm learning JavaScript. Starting from scratch, as I'm new to JS. I'm currently a student studying Computer Science Engineering.
Feel free to discuss any topic I post. Feel free to discuss related projects/code/ideas/interesting concepts related to the topic.
I'm going to keep track of my progress here, mainly to keep track of my progress. I couldn't do much today. Got sidetracked by guests showing up at our house.
Start Date : 12/07/23
Learning from FreeCodeCamp :
Here's a summary of what I learnt today:
Let vs Var vs Const
KEYWORD | SCOPE | REDECLARATION & REASSIGNMENT | HOISTING |
var | Global, Local | yes & yes | yes, with a default value |
let | Global, Local, Block | no & yes | yes, without a default value |
const | Global, Local, Block | no & no | yes, without a default value |
Object.freeze()
To ensure your data doesn't change, JavaScript provides a function
Object.freeze
to prevent data mutation.Any attempt at changing the object will be rejected, with an error thrown if the script is running in strict mode.
Syntax:
Object.freeze(obj);
Arrow Functions
In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else.
Syntax:
const myFunc = () => { const myVar = "value"; return myVar; }
Just like a regular function, you can pass arguments into an arrow function.
It is possible to pass more than one argument into an arrow function.
Default Parameters for Functions
The default parameter is a way to set default values for function parameters. Default value is undefined. In a function, Ii a parameter is not provided, then its value becomes undefined. In this case, the default value that we specify is applied by the compiler.
Rest Parameter with Function Parameters
The rest parameter for function parameters. With the rest parameter, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.
Use the Spread Operator to Evaluate Arrays In-Place
The spread operator, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.
...arr
returns an unpacked array. In other words, it spreads the array. However, the spread operator only works in-place, like in an argument to a function or in an array literal.Destructuring Assignment to Extract Values from Objects
Destructuring assignment is special syntax introduced in ES6, for neatly assigning values taken directly from an object.
Syntax:
const { name, age } = user;
Here, the
name
andage
variables will be created and assigned the values of their respective values from theuser
object.const { name: userName, age: userAge } = user;
You may read it as "get the value of
user.name
and assign it to a new variable nameduserName
" and so on.Destructuring Assignment to Assign Variables from Nested Objects
Destructuring assignment is special syntax introduced in ES6, for neatly assigning values taken directly from an object.
Syntax:
Here's how to extract the values of object properties and assign them to variables with the same name:
const { johnDoe: { age, email }} = user;
And here's how you can assign an object properties' values to variables with different names:
const { johnDoe: { age: userAge, email: userEmail }} = user;
Destructuring Assignment to Assign Variables from Arrays
One key difference between the spread operator and array destructuring is that the spread operator unpacks all contents of an array into a comma-separated list. Consequently, you cannot pick or choose which elements you want to assign to variables.
Destructuring an array lets us do exactly that.
Syntax:
const [a, b] = [1, 2, 3, 4, 5, 6]; console.log(a, b);
The console will display the values of
a
andb
as1, 2
.The variable
a
is assigned the first value of the array, andb
is assigned the second value of the array.We can also access the value at any index in an array with destructuring by using commas to reach the desired index:
const [a, b,,, c] = [1, 2, 3, 4, 5, 6]; console.log(a, b, c);
The console will display the values of
a
,b
, andc
as1, 2, 5
.