DEV Community: Prashant Sharma

[freeCodeCamp] ES6 - Arrow Function, Rest Parameter, Spread Operator

Prashant Sharma — Sat, 22 Aug 2020 17:27:24 +0000

Heya fellows! Here comes another JavaScript post that covers some amazing ES6 features which are widely used in current JavaScript environment. This is in continuation of my JavaScript learning from freeCodeCamp.

This post is going to be a bookmark for you. So, just start reading.

Anonymous functions

In JavaScript, we don't always need to give a name to a function. A function without a name is called an anonymous function. These are often used when we don't need to reuse them.

One can write an anonymous function as

const myFunc = function() {
  const myVar = "value";
  return myVar;
}

Arrow functions

ES6 provides a cleaner and concise way to write an anonymous function with the help of arrow functions. The above function definition can also be written as

const myFunc = () => {
  const myVar = "value";
  return myVar;
}

Does it look the same? Focus on the => arrow and () before that.

This can further be written into a one-liner, when there is no function body and only a single return value. Arrow function syntax allows omitting the return statement and the brackets surrounding the code, in such cases.

Since the above function only declares a variable and return that variable. The above function can be re-written as

const myFunc = () => "value";

This will return the "value" by default. Isn't it awesome? :)

Arrow functions with parameters

We can also pass arguments to an arrow function, just like any other regular function. The parameters can be placed within the parentheses as

const adder = (num) => num++;

The above method takes an argument num, adds 1 to it and return the updated value. Don't forget, there is an implicit return already.

Tip:- If an arrow function requires a single argument, the parenthesis around the parameter can be removed.

The above can also be written as

const adder = num => num++;

That doesn't mean that you can't pass multiple arguments to an arrow function. You can pass as many arguments as you want.

const multiplier = (a, b) => a * b;

Default parameters

ES6 allows the function to be more flexible with the use of default parameters. The default parameters are used when no arguments are specified i.e. when the parameter's value is undefined.

It'll be easier to understand with an example

const greeting = (name = "Anonymous") => "Hello" + name;

console.log(greeting("Prashant")); // Hello Prashant;
console.log(greeting());  // Hello Anonymous;

You can see, that when I provided the argument "Prashant", the name parameter used that value. However, when I called the function without any argument, the default value is used.

Rest Parameters in function

We can provide the variable number of arguments to the function with the help of rest parameters. The arguments provided, are stored in an array which can be manipulated from inside of the function.

Consider this piece of code, from freeCodeCamp's lesson

function howMany(...args) {
  return "You have passed " + args.length + " arguments.";
}

console.log(howMany(0, 1, 2)); // You have passed 3 arguments.

console.log(howMany("string", null, [1, 2, 3], { })); // You have passed 4 arguments

Rest parameters are defined using the three dots followed by the array variable i.e. ...args is a rest parameter.

Spread Operator

ES6 provides us with the spread operator, which allows us to expand arrays in-place.

Let's understand the benefits of the spread operator and how to use them.

Quest - Finding Maximum of an array

Before anything, let me introduce the Math.max() function. By the looks of it, you can guess that it would return the maximum of the elements provided to the function.

Math.max(1, 2, 3, 4);  // returns 4 as it is the maximum

This works perfectly. However, this function takes comma-separated arguments, not an array. If we were to store elements in an array and then try to use this function

const arr = [1, 2, 3, 4];
Math.max(arr);  // returns NaN

Since this function doesn't recognize arr as a valid argument. The output makes sense.

In ES5, if we were to find the maximum of elements present in an array, we would need to use Math.max.apply() function as

Math.max.apply(null, arr); // returns 4

Now, we can get the maximum number present in an array without explicitly providing each array value as a separate argument to Math.max().

With the use of the spread operator, we can use the array and still don't need to use the apply(), which makes the code more readable and easier to maintain.

const arr = [1, 2, 3, 4];
Math.max(...arr);  // returns 4 now

What exactly happened here? ...arr expanded the arr array in-place i.e. it spreads the element of an array. This is exactly how we use the spread operator to expand an array. Therefore

Math.max(...arr) ≡ Math.max(1, 2, 3, 4)

You might wonder that it looks exactly like the Rest parameter. Yes, it does, syntax-wise. However, when you need to collect values into an array, you use rest parameter(collecting values passed via arguments) and when you need to spread values(reassigning values to an array), you use spread operator. You may see it as different names for different operations.

The values of an array are substituted in place with the help of the spread operator.

Another Example

Let's consider one more example of its use

const ar1 = [1, 2, 3, 4]
const arr2 = [5, 6, 7, 8]

If you would want to merge these two arrays into a single one, you can use the spread operator as

const arr3 = [...arr1, ...arr2];

Here, the values of arr1 and arr2 have been spread in-place. Now, even if you were to change the values of arr1 or arr2, the arr3 would always return the corresponding updated array. Isn't it another awesome feature? :)

Note:- You should know that spread operator works only in-place. For e.g. as an argument to a function or in an array literal. The following piece of code will not work

const spreaded = ...arr3;   // throws an error

Conclusion

This post covered some great ES6 features. The use of arrow function is very common nowadays and its use along with the rest parameter and spread operator makes it something really awesome.

References

Introduction to the ES6 Challenges

I hope this post helped you to understand some other JS awesome features. Well, it's time to say Good Bye! Meet you in the next post. Till then be curious and keep learning.called

[freeCodeCamp] ES6 - var, let and const

Prashant Sharma — Sat, 08 Aug 2020 09:08:31 +0000

Hi there folks! Continuing the JavaScript learning from freeCodeCamp, this time we move ahead from the Basic JavaScript and would start with the ES6. ECMAScript 6 or ES6 is the major JS version which introduced a variety of helpful features, released in 2015. Going with this, we will explore those features and how to use them in upcoming posts as well.

This post mainly covers the caveats regarding the variable declaration and how ES6 changes its behaviour. So, let's start without delaying anything.

Difference between `var` and `let` keywords

The usage of var had some issues, which we'll come across little by little. However, one potential issue is that variables declared with var can be overridden without any errors. For e.g.

var myName = Prashant;
var myName = Akash; 
console.log(myName);  // Akash

As you may see, we've overridden the variable myName, but JavaScript didn't raise any error. With application with larger source code, we may accidentally overwrite a variable, which we don't intend do. This could lead to unexpected behaviours and difficulties in debugging.

To resolve this, ES6 provides the keyword let for variable declaration. If we were to use let instead of var in the above example, the second initialization would lead to an error.

We can also use the "use_strict" to enable the strict mode. This would catch common mistakes and unsafe actions.
For e.g.

"use strict";
x = 3.14; // throws an error because x is not declared

Scope differences between `var` and `let` keywords

If we go back and try to remember the behaviour of the var keyword w.r.t scopes, we know that any variable declared with it is global and if declared within a function, it's scope is limited to that function only.

let behaves in a similar way, but with some extra features. For e.g. when we declare a loop variable using the var keyword, that becomes global. However, declaring the same, using let would result in its scope limited to the block of the loop.

Let's see an example

arr = [1, 2, 3, 4];
for (var i = 0; i < arr.length; i++) {
   arr[i]++;
}
console.log(i);  // returns 4

You may notice that the variable i is accessible outside the loop. If you were to use it again elsewhere, it'd be using the updated value, which might result in unexpected behaviour. However, with let, this doesn't happen i.e. the loop variable i will only be accessible within the loop block and not outside of it.

Let's see another example

function checkScope() {
  'use strict';
  let i = 'function scope';
  if (true) {
    let i = 'block scope';
    console.log('Block scope i is: ', i);
  }
  console.log('Function scope i is: ', i);
  return i;
}

Before we discuss the output of the above code, a doubt may arise to you. You may ask, that let should not allow the re-declaration of the variable i at all. The catch here is that it restricts the same declaration within the same scope. In the above piece of code, the second initialization is within a local scope. Hence let does not raise any error.

Yes, if you would've tried to initialize it outside of the if block, it should have a complaint about that. Now, let's move to the output of the above code.

The output of this function would be

Block scope i is:  block scope
Function scope i is:  function scope

And can you guess which value of i would be returned? Think!

The answer is function scope would be returned, as the variable i within the local scope of if condition is not visible outside of its block. Hence the global i is returned.

What if I change the code slightly to this

function checkScope() {
  'use strict';
  let i = 'function scope';
  if (true) {
    i = 'block scope';
    console.log('Block scope i is: ', i);
  }
  console.log('Function scope i is: ', i);
  return i;
}

What do you think, would be returned now? Before that, did you notice the change? I removed the let keyword from inside of if block. That's it. Now, think!

This time, block scope would be returned. I see you ask why? Well, it's because this time instead of declaring a new variable with the same name in scope, we are instead, overriding the global variable i. Hence, the changes to it are reflected outside of the function.

Variable declaration using the `const` keyword

ES6 not only provides the let keyword to declare a variable but also a const keyword to do so. The difference is that the variables declared with const are read-only. It means that once the variable is declared, it cannot be reassigned. These variable act as a constant value.

It is a common practice to declare constants using the uppercase letters with words separated with underscores.

The use of const helps us to avoid accidentally changing the constants within a program. An example of its use can be seen as

const PI = 3.14;
PI = 2.17; // throws an error

Mutating arrays declared with const

We should know that objects, arrays or functions would be mutable when assigned to a variable using const. It is actually the variable identifier, which cannot be reassigned.

Let's see an example for an array

const s = [4, 5, 6, 7];
s = [1, 2, 3]; // throws an error, as assignment to a const variable
s[4] = 8; // this would work fine
console.log(s);  // [4, 5, 6, 8]

The thing which is to be noticed here is that the values within the array are mutable. Even though we change the array elements, the variable s would still point to the same memory location. Only the value to that memory location has been changed.

Yes, if we would try to point s to some other memory location i.e. some other array or value, it would throw an error.

Preventing object mutation

From the above, we found that const declaration doesn't actually protect the data from mutation. It only prevents the variable identifier to point to some other location instead.

However, if we want to prevent data mutation within an object, JavaScript provides the function Object.freeze.

After the object is frozen, any attempt to add, update or delete the properties would be rejected without any error.

function freezeObj() {
  let MATH_CONSTANTS = {
    PI: 3.14
  };

  Object.freeze(MATH_CONSTANTS);

  MATH_CONSTANTS.PI = 99;  // ignored and mutation won't be allowed
  return MATH_CONSTANTS.PI;
}

The above would still return 3.14. However, if you'd use the strict mode, it will throw an error.

Conclusion

At the end of this post, we found the major differences between var, let and const keywords and where and why of using them. Further, we found that we can also prevent any data mutation using Object.freeze() method which comes in handy at times.

References

Introduction to the ES6 Challenges

We'll meet next time with other ES6 features so that we can improve our JS knowledge further. Till then be curious and keep learning. :)

[freeCodeCamp] Basic JavaScript - Recursion, random numbers, parseInt function

Prashant Sharma — Mon, 27 Jul 2020 08:35:36 +0000

Yo! How are you, people? I hope everyone is doing great. This time, it is another short post covering different concepts in brief. This is in continuation of my JavaScript learning from freeCodeCamp. I am really enjoying it and I am certain you are as well. :)

Let's continue towards the actual content without making any delay.

Recursion

We have recently learned about JavaScript loops. The loops can be replaced by the concept of Recursion.

Recursion implies the concept where a function can be written in terms of itself. For example - when you want to find a factorial of a number, you can write it using the loop as

function factorial(n) {
  var result = 1;
  for(var i = 1; i <= n; i++) {
     result *= i;
  }
}

The result would store the result as 1 * 2 * 3 * 4 * 5 ie 120 if n = 5.

The above works perfectly fine. But as we are trying to grasp the concept of recursion, we aim to write this function in term of itself. Before that, let's understand the factorial concept

5! = 5 * 4 * 3 * 2 * 1
4! = 4 * 3 * 2 * 1
3! = 3 * 2 * 1
2! = 2 * 1
1! = 1

I have written down the factorial expansion of number from 5 to 1. Can you see a pattern in it? I am sure you can, just give it some time.

Can we write the above structure like this

5! = 5 * 4!  // 5 * (5 - 1)!
4! = 4 * 3!  // 4 * (4 - 1)!
3! = 3 * 2!  // 3 * (3 - 1)!
2! = 2 * 1!  // 2 * (2 - 1)!
1! = 1 * 0!  // 1 * (1 - 1)!

Here we have written the n! in terms of (n - 1)!. This pattern is used by recursion. We can rewrite the above function as

function factorial(n) {
  if (n <= 1) {
     return 1;   // as 1! = 1
  } else {
     return n * factorial(n - 1);
  }
}

Here the condition n <= 1 is called a base condition and every recursive function should have a base condition to mark the end of the recursive loop. When the value of n would reach to 1, we get the value of the 1! and then this can be substituted to evaluate the value of 2! and like this, up to n!.

The function calls can be seen as(for n = 5)

factorial(5) -> 5 * factorial(4) -> 5 * 4 * factorial(3) -> 5 * 4 * 3 * factorial(2) -> 5 * 4 * 3 * 2 * factorial(1)

When the function call reaches to factorial(1), the function returns a finite value, instead of another recursive call, as it was doing up till now. This is then, substituted to get the final value.

I hope, I was able to explain the concept in simple words.

Generating random numbers in JavaScript

Generating random fraction

JavaScript has a Math.random() function which generates a random decimal number in the range [0, 1). The brackets imply that it includes 0, but excludes 1. So we may get a 0 as an output from this function, but not 1.

function generateRandomNumber() {
    return Math.random();  // returns a random number -> 0.78379758
}

Generating random whole numbers

We can also generate whole numbers within a range by applying some mathematics. Let's see
  - Using Math.random() to generate a random decimal.
  - Multiplying that with the upper bound of range ie n.
  - Using Math.floor to round the decimal to the nearest whole number.

That's it. With this process, we can get a random whole number between 0 to n -1 as n won't be counted in the initial Math.random() function.

An example to generate the random number between 0 to 20 would be

function generateRandomWholeNumber() {
   return Math.floor(Math.random() * 20);
}

This would generate a random number between [0, 20) for us. :)

Generating random whole numbers within a range

Until now, we could generate the whole number from 0 to n. But what if we also want to use some other minimum value, other than 0. It's quite possible, using another mathematics trick.

Math.floor(Math.random() * (max - min + 1)) + min

This is the formula to generate a random whole number between min and max values.

`parseInt` function in JavaScript

The parseInt function in JavaScript is used to convert a string into an integer. For e.g.

var intValue = parseInt("00321");  // return 321

The above statement showed that the final value is an integer. If a string couldn't be converted to an integer, it returns NaN.

The parseInt method, takes an optional argument radix, which specifies the base of the number provided in the string. It can have values between 2 to 36.

For e.g.

var intValue = parseInt("1011", 2);

The above statement won't return 1011 integer value, but 11. This is because we have provided base 2 which tells that it is a binary number, whose decimal equivalent is 11.

Conclusion

At the end of this post, we got the basic idea about Recursion and how does one can implement it. Apart from it, we also learned about generating random numbers in JavaScript and using parseInt function to convert a value to an integer value.

References

This was a short post, but with this, we have covered the basic JavaScript section of freeCodeCamp. We'll meet next time with another post covering the concepts from the next section. Till then be curious and keep learning. :)

[freeCodeCamp] Basic JavaScript - Loops

Prashant Sharma — Wed, 15 Jul 2020 11:06:05 +0000

Hey fellas! Let's keep continue what we've learned in the previous posts. This is another post in our JavaScript learning via freeCodeCamp. In this post, we are going to cover various loop constructs, JavaScript provides us with. How one uses them and implements them.

Let's start with the post.

Loops

Loops are basically used when we want to run some piece of code multiple times. There are various ways to achieve that. Let's discuss them separately

for loop

The for loop is one of the commonly used loops in any programming language. The for loop has a definite structure which is

for ([initialization]; [condition]; [final-expression])

There are three main components to the for loop which are - initialization, condition, and final-expression. Each of these expressions is optional to be used.

The initialization is executed only once before the loop executes. It is basically the initialization of the loop variable.
The condition is the statement which is executed from the starting to the end of the loop. The loop will keep executing until this condition evaluates to true. Once this condition evaluates to false, the loop will be terminated.
The final-expression is executed at the end of each loop iteration, which changes the loop variable.

Let's see an example

var sum = 0;
for( var i = 0; i < 5; i++){
  sum += i;
}

The above loop will execute 5 times, adding the current value to i to the sum in each iteration.

We initialize the loop variable i with 0.
It'll then check for the condition i < 5.
As the condition evaluates to true, it enters the loop body and adds the value of i to sum by executing sum += i statement.
As soon as the last statement ends, the control goes to the final-expression i.e. i++ which increments i by 1.
After this, the condition is checked again with the updated value of i and the loop keeps on executing until the condition evaluates to false.
In the last iteration, the value of i would be 5. This would fail the condition i < 5 and the control will come out of the loop.

At the end of the loop, the sum will hold the value 0+1+2+3+4 i.e. 10.

while loop

The while loop runs repeatedly as long as a specified condition evaluates to true. Once it returns false, the execution stops. The above example can also be written using the while loop as

var sum = 0;
var i = 0;
while (i < 5) {
  sum += i;
  i++;
}

Let's break it down into smaller steps

We set the variable i = 0, which act as an initialization step just as in for loop.
We run the while loop until the value of i is less than 5. The condition i < 5 can be seen as the condition expression like in for loop.
We define the final-statement i.e. i++ which must be executed so that the loop variable changes and condition evaluates to false at some point in time.

Make sure to update the loop variable within the body of the loop itself. If you don't, the loop condition will never evaluate to false and the loop will be executed infinitely.

do...while loop

Apart from the for and while loops, JavaScript also offers a do...while loop. It is called so because it do the one pass of the loop at least once irrespective of the condition and then keep on executing till the while condition evaluates to true.

Let's re-write the above example as

var sum = 0;
var i = 1;
do{
  sum += i;
  i++;
} while (i < 0);

Here, if you would notice, the condition i < 0 will be false when i = 1. However, the loop will still execute once. The first iteration would execute irrespective of the condition. Once the flow reaches the while condition, the loop terminates.

I hope, you understood the difference between the normal while and do...while loop. The while loop in such case would've aborted the loop without executing at all.

Notice the semicolon(;) after the while condition. You should end a do...while loop like this.

Any of the loop's final statement doesn't always need to increment by 1. It can be i-- or i+=2 etc. i.e. it can be any valid expression. Just make sure that this always leads to the loop condition to evaluate to false at some point in time.

Iterating through an array

Iterating an array is one of the most common and widely used tasks to do, which involves the usage of loops. One can do that using the for loop as

var arr = [10, 9, 8, 7, 6];
for (var i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}

The above piece of code would print each element of the array to the console. Notice the condition i < arr.length, we are not using <= because the last element of the array will have an index length - 1.

Nesting `for` loops

The for loops can be nested to iterate through a multi-dimensional array. Suppose we have an array

var arr = [
  [1,2], [3,4], [5,6]
];

If we want to print each element of the sub-array, The approach would be to first iterate over the outer array using some loop variable, let's say i. Now for each arr[i] which would be an array itself, for e.g. arr[0] = [1, 2], we'll take another loop variable j, which would iterate through the inner arrays.

Let's code it down to understand bit clearly

for (var i = 0; i < arr.length; i++){
  for (var j = 0; j < arr[i].length; j++){
     console.log(arr[i][j]);
  }
}

Did you understand? I am sure the outer loop would not be an issue. While going through the inner loop, we go through the length of each sub-array i.e. arr[i].length and further, we access each individual element of arr using the nested bracket notation.
For e.g. arr[0][0] would be 1. Similarly, arr[0][1] would be 2. Using the same pattern, we print out each element to the console.

Conclusion

In the end, we learned various ways to implement loops in JavaScript and performing iterations through an array. Loops are one of the basic fundamentals of any programming language and are useful in daily programming.

References

Let’s meet next time with another JavaScript post covering some other fundamentals. Till then be curious and keep learning.

[freeCodeCamp] Basic JavaScript - Objects

Prashant Sharma — Fri, 10 Jul 2020 08:24:51 +0000

Howdy folks! Let's continue from the previous posts of the series focused on learning JavaScript. We are learning JavaScript fundamentals from the freeCodeCamp. I am sure, you are enjoying this as well.

This post will cover the basics of Objects in JavaScript. Let's know about them without any delay.

Objects

Objects in JavaScript are used to store data in a structured way. We can see them as an array with the difference being that instead of using indexes to access or modify the data, objects use properties.

Now, you may ask, what are properties? These can be referred to as a key among the key-value pairs that exist in an object. It will be more clear with an example.

var cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
};

Here cat is an object. It contains the key-value pairs separated by a colon(:). The values to the left of the colon are what we call as properties. And values to the right of the colon are its value.

Notice the semicolon at the end of object definition(just after the closing bracket).

As you may notice, the value for the property enemies is an array. This implies that values can be anything. It may even be an object itself.

Now, some quirks about properties:

Although, in the above example, the properties are defined as strings. But it isn't necessary. You may keep an integer value as a property as well.
If the property is a single word string, you can even emit quotes around it, for e.g.

var someObject = {
   user: "Prashant"
}:

Here user is a valid property. This happens because JavaScript will automatically typecast them into strings.

Accessing object properties

We can access an object property using two ways:

Using Dot(.) notation

When we know the name of the property, we can access the value associated with it using the dot notation. Let's consider the above cat object

cat.name; // returns "Whiskers"

Using Bracket([]) notation

Just like arrays, we can access object properties using square brackets, by enclosing the property name. For e.g. the above statement can also be written as

cat["name"];  // returns "Whiskers"

The main use cases for this particular notation are:

When the property name has spaces in it. As we can't use dot notation in that case.
When we want to access the property, which is stored as a value in a variable.
For e.g.
```
var dogs = {
  Fido: "Mutt",  Hunter: "Doberman",  Snoopie: "Beagle"
};
var myDog = "Hunter";
var myBreed = dogs[myDog];
console.log(myBreed); // "Doberman"
```
Here, we stored the property Hunter as a variable and then accessed it using the variable name instead of the property name directly.
This is also useful when the property name is collected dynamically.

Updating Object properties

We can update object properties, by setting it to something else. Yes, it's as simple as that. We know how to update the variable, just like that.

Let's see a small example, for quick understanding

var cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
};
cat.name = "Camper";
cat["name"] = "Camper";
cat.name; // Now it will return "Camper" :)

As you can see, you can set the values by using any of the dot or bracket notations.

Adding properties to an Object

Adding a property to an existing object is exactly similar to how we update an object. We set the property name to value and since the property doesn't exist, JavaScript will create that for us. Isn't that awesome? :)

Let's add a voice property to our cat object

cat.voice = "meww";

Next time, when you'll try to access the voice property, you'd get meww in return.

Deleting properties of an Object

We can also delete a property of an object. This can be achieved using the delete keyword. Let's understand with an example

delete cat.voice;

This would delete the property voice of cat object.

Objects find their usage when the data in the form of a dictionary is to be maintained.

Checking object for a property

We might need to know if some property of an object exists or not. This can be easily done with the .hasOwnProperty(propertyName) method. The method name is itself quite self-described.

We can use this method as

cat.hasOwnProperty("voice"); // returns false as we have deleted it
cat.hasOwnProperty("legs"); // return true

Objects can be used to handle flexible data. An example from freeCodeCamp itself for a complex object can be seen as

var ourMusic = [
  {
    "artist": "Daft Punk",
    "title": "Homework",
    "release_year": 1997,
    "formats": [ 
      "CD", 
      "Cassette", 
      "LP"
    ],
    "gold": true
  }
];

Here ourMusic is an array of objects, currently containing the single object. Further, format property is also an array, which can be seen as a nested array. This is just one example of how objects can be useful to store a structured but flexible data.

Accessing nested array just like above can be achieved by chaining the array bracket and dot notation. For e.g., if we have to get the 2nd format of the 1st musical album, we'd do something like this

var format = ourMusic[0].formats[1]; // returns "Cassette"

Conclusion

With the end of this short post, we have acquired some knowledge about the Objects in JavaScript. They play an important role in daily JavaScript coding. I am sure, it'll be really helpful to anyone learning JavaScript.

References

Let’s meet next time with another JavaScript post covering some other fundamentals. Till then be curious and keep learning.

[freeCodeCamp] Basic JavaScript - Conditional Logic, Logical Operators, switch statement

Prashant Sharma — Sun, 28 Jun 2020 10:06:19 +0000

Hey fellas! Guess what? This time we are going to dive into one of the main concepts in any programming language i.e. implement conditional logic. This is in continuation of my JavaScript learning from freeCodeCamp. We've learned quite a few concepts in the series and going to know more about them.

In the previous post in the series, we learned about Boolean and comparison operators which are used as the entry point for conditional logic.

Let's start without any delay!

Implement Conditional Logic

if statement

We can execute a statement when some condition meets using the if statement. If the condition is met, then the code within the if block would be executed.

The condition will always return either true or false. Let's see an example

function myCondition(condition) {
  if (condition) {
    return "True";
  return "False";
}
myCondition(true);  // returns "True"
myCondition(false);  // returns "False"

As you may see that when the condition is true, the statement return "True" is executed. When we provide the condition as false, the statement outside of if statement is executed.

else statement

An else statement is used to execute some piece of code when the specified condition within the if statement does not hold true. In such cases, we define an else statement along with an if statement.

For e.g.

var num = 5;
if (num < 5) {
  return true;
} else {
  return false:
}

Since the condition num < 5 would return false, the block within the if statement is not executed, but the flow goes within the else block.

else if statement

When we have multiple statements to be checked, we can create an if - else if - else ladder.

The first condition would go with if statement, subsequent conditions can go with multiple else if statements and finally an else statement, which would be executed if none of the conditions is met.

A small example of this can be seen as

if (num > 15) {
  return "Bigger than 15";
} else if (num < 5) {
  return "Smaller than 5";
} else {
  return "Between 5 and 15";
}

Please ensure the order of statements when executing the if- else if- else ladder, the conditions are checked from top to bottom, and once entered in a block, all other conditions won't be checked. They will simply be skipped.

Ternary Operator

JavaScript also provides an operator for a one-liner if-else statement. Its syntax is like

condition ? statement-if-true : statement-if-false;

Let's consider the following example

if (num < 5) {
  return true; 
} else { 
  return false;
}

This can be written using the ternary operator as

return num < 5 ? true : false;

If the condition evaluates to true, the expression after ? is executed otherwise the expression after : is executed.

Logical Operators in JavaScript

When we need to test more than one thing at a time, we can use logical operators instead of using multiple if statements.

AND operator (&&)

The AND operator returns true if both of its operands returns true, false otherwise. It's pretty straightforward. Let's jump to an example.

Suppose we have the following piece of code

var num = 5;
if (num > 1) {
  if (num > 4) {
    return true;
  }
}

The above piece of code can be simplified and can be written in the following way

var num = 5;
if (num > 1 && num > 4) {
  return true;
}

Did you get it now? It will check for the two conditions provided to it and if they individually return true, the whole condition would return true.

OR operator (||)

The OR operator returns true if any of the operands returns true. For e.g.

var num = 5;
if (num > 1 || num < 4) {
   return true;
}

In the above example, the condition num > 1 would return true as 5 is indeed greater than 1. However, the other condition would return false as 5 is not less than 4. But since one of the conditions used with OR operator evaluates to true, the whole condition would return true, and the statement within the if block will be executed.

Switch statement

JavaScript provides a switch statement, which works as if you would use multiple if statements with each condition having a check against strict equality operator ===.

The argument passed to the switch statement can have multiple values with each value would be treated as a case. Let's see an example

switch(lowercaseLetter) {
  case "a":
    console.log("A");
    break;
  case "b":
    console.log("B");
    break;
}

Here lowercaseletter can have multiple case(s), when a case is matched, the statement(s) under that case is executed. Please make sure to write a break statement at the end of each case, which tells JavaScript to stop executing, otherwise, all other cases after the matched case would be executed, until it finds the break statement or the number of cases ends.

If the value of lowercaseletter is "a", then it would go with the first case statement and if it comes out to be "b", then it would go with the second case statement.

Using `default` in the switch statement

At times, we may not be able to decide all cases. In such a situation, we can define a default case that would be executed, if the switch value does not find any matching case. You can think of it as an else statement in an if-else ladder.

default is a keyword in JavaScript, i.e. it has a special meaning. Let's see an example of this

switch(value){
  case option1:
     statement1;
     break;
  case option2:
     statement2;
     break;
  default:
     defaultstatement;
     break;
}

Multiple Identical Options in the Switch statement

It is possible that we have the same set of statements to be executed for multiple cases. If we represent that in an if-else statement, it would be a situation like this

var val;
if (val === 1 || val === 2 || val === 3) {
   console.log("Stop");
} else if (val === 4) {
    console.log("Start");
}

If we have to represent the above if-else statement using the switch-case statements, it would look something like this

switch(val) {
  case 1:
  case 2:
  case 3:
    console.log("Stop");
    break;
  case 4:
    console.log("Start");
}

Here we have used the quirk that in absence of a break statement, the subsequent case(s) are executed until a break statement is found or the number of cases ends.

Returning Boolean from a function

We already know that a function can return value and it can be anything. However, when you want to return a boolean value i.e. either true or false. One way you'd think to do is like this

function isEqual(a, b) {
  if (a === b){
    return true;
  } else {
   return false;
  }
}

And this is perfectly fine and works, which matters the most. However, you can achieve the same with another better approach. Can you think of it? think, think...

Now, stop thinking. Let's see the better way

function isEqual(a, b) {
  return a === b;
}

Tada! We already know that a === b would return a boolean value, which is the only thing we want, don't we? :)

Conclusion

With the end of this a bit long post, we have acquired knowledge about how we can implement the conditional logic using various JavaScript constructs. Apart from it, we found a better way to return a boolean from a function(trust me, you'd do this more often than you think.)

References

Let’s meet next time with another JavaScript post covering other JavaScript concepts. Till then be curious and keep learning!

[freeCodeCamp] Basic JavaScript - Queues, Boolean, Comparison Operators

Prashant Sharma — Wed, 24 Jun 2020 18:41:46 +0000

Howdy fellows! Here is yet another JavaScript post covering the fundamentals. This is in continuation of my JavaScript learning from freeCodeCamp. The last post in the series can be found here, where we have learned about functions in JavaScript.

Let's get started then.

Queues

Queues are the abstract data structure, in which items are kept in a specific order. The items are added from the back to the queue and taken out from the front of the queue.

Queue data structure

The above image describes the queue very well. You can see two terms in it - enqueue and dequeue. Let's know what these are

When an element is pushed to the queue, the operation is known as enqueue.
When an element is popped out of the queue, the operation is known as dequeue.

A queue can also be seen as an array, with some restrictions.

The following example will help you understand it better

var  arr = [1, 2, 3]

Adding a number to the end of an array can be done with push() method. Similarly popping out from the front of an array can be done using shift() method.

arr.push(4);  // enqueue, now array [1, 2, 3, 4]
arr.shift();  // dequeue, now array [2, 3, 4]

Boolean

Boolean is one of the basic data types in JavaScript. Boolean can only have two values which are either true or false.

Remember that true and false are keywords in JavaScript. If you'll put them into the quotes, they'll be treated as normal strings.

Comparison Operators

There are various comparison operators in JavaScript, let's have a look at them

Equality Operator

JavaScript has an equality operator ==. It compares two values and returns either true or false.

To compare two different data types(for e.g. numbers and string), it must convert one type to another. This is known as Type Coercion.

Some examples of equality operator are

1   ==  1   // true
1   ==  2   // false
1   == '1'  // true
"3" ==  3   // true

As you may notice, the last two examples return true irrespective of different data types i.e. this operator does not check for equality of data types.

Strict Equality Operator

Strict Equality operator is represented by ===. This not only checks for the value but also checks for the data type of its two operands. Let's see an example

4 === 4;  // true
"4" === 4; // false

The second comparison returns false because "4" is a string while 4 is a number.

In JavaScript, we can get the type of a value using the typeof operator as

typeof "3"; // returns 'string'
typeof 3;  // returns 'number'

Inequality operator

It is the opposite of the equality operator. It returns true when two values given to it are not equal, false otherwise. Just like the equality operator, it doesn't check for the data type of its operands.

Some examples of it can be seen as

1 !=  2     // true
1 != "1"    // false 
1 != true   // false
0 != false  // false

Strict Inequality Operator

This would be clear by now. Strict inequality operator is represented by !==. This not only checks for the value but also for the data type. It is just the opposite of the strict equality operator. Let's understand its usage with some examples:

3 !==  3   // false
3 !== '3'  // true
4 !==  3   // true

As you may notice, that the second case returns true because the data type for the values is different.

It is highly advisable to use strict equality and strict inequality operator instead of their non-strict options available.

Greater than operator (>)

It compares two values and returns true if the value to the left of it is greater than the value to the right. One thing to note down here is that it converts the data type of the values before comparing, just like the equality operator.

A few examples can be

7   > '3'  // true
2   >  3   // false
'1' >  9   // false

Greater than or equals to operator (>=)

It checks if the value to the left of it is either greater or equal when compared to the value right of it.

7   >= '3'  // true
2   >=  3   // false
'7' >=  9   // false

Less than operator (<)

It is quite obvious now. It checks if the value to the left of it is lesser than the value to the right of it. Returns true if so, false otherwise.

'3' < 7  // true
3 < 2    // false 
'8' < 4  // false

Less than or equals to operator (<=)

Let's directly go with an example for this

5   <= 5  // true
3   <= 2  // false
'8' <= 4  // false

Conclusion

With the end of this short post, we have acquired some knowledge about the Boolean data type and Queue data structure. Apart from it, we found out about type coercion and how they work when used with comparison operators.

References

Let's meet next time with another JavaScript post covering other fundamentals of JavaScript. Till then be curious and keep learning.

[freeCodeCamp] Basic JavaScript - Functions

Prashant Sharma — Sun, 14 Jun 2020 09:19:31 +0000

Hello folks! I am here with another JavaScript post covering my learning and javascript fundamentals. Continuing my journey with freeCodeCamp, this time I have learned about functions in JavaScript. The previous post in the series can be found here.

Now, let's start with functions.

Functions

We can define functions in JavaScript using the keyword function, followed by the function name.

Functions are used to divide the code into reusable parts.

Let's see an example now

function myFunction() {
  console.log("This is inside a function!");
}

We have named our function as myFunction . The body of function starts with the opening curly bracket and ends with the closing curly bracket.

Note: There is no semicolon after the closing curly bracket.

We have also used the console.log() statement within the function's body. We have not encountered this method yet. We'll be knowing about it in future posts, but to give you an idea, this method logs out whatever we pass to it within parentheses.

There is a console in all the browsers which can be accessed using the key combination of Ctrl + Shift + I. This will open a console session, where you could write JavaScript code and the output of it would be provided to you immediately.

Note:- The key combination may differ in other browsers. It does work in Google Chrome and Mozilla Firefox.

Calling a function is as simple as writing the following statement

myFunction();

This would print the line "This is inside a function!" onto the console.

Parameters and Arguments

A lot of times, a function takes a number of inputs to it which are known as parameters, and values for those inputs can be passed at the time of function calling which are known as arguments. Let's say we have a function

function functionWithArgs(a, b) {
  console.log(a - b);
}

functionWithArgs(10, 5);

Here a and b are the parameters which act as placeholders for the values to be passed as arguments. These can be used within the function. The values 10 and 5, which we have passed at the time of function calling are known as arguments.

In the above function, the value will be passed as defined i.e. sequentially. The value of a would be 10 and the value of b would be 5.

Scopes in function

Scope in JavaScript refers to the visibility of a variable within a JavaScript code. There are two types of scopes in general

Global Scope

The variable defined outside of a function has a global scope i.e. it can be used everywhere in the JavaScript code.

Any variable defined without the var keyword, will be treated as global irrespective of where it is defined. This may lead to unwanted results. Therefore we should always use the keyword to define any variable.

Local Scope

A variable defined within the function body and the parameters defined in the function definition both have a local scope which means they are only visible within its body. Trying to access them in the global scope would generate a ReferenceError.

Let's see an example

function myTest() {
  var loc = "foo";
  console.log(loc);
}
myTest(); // logs "foo"
console.log(loc); // loc is not defined

As you may notice, using console.log(loc) would raise the error as it is not visible(accessible) outside of the function.

ReferenceError: loc is not defined

Global Scope vs Local Scope

There can be cases, where a variable is declared in the global scope i.e. outside of any function and another variable with the same name is defined within the function i.e. inside a local scope.

In such cases, the local scope takes precedence over the global scope. Let see an example

var someVar = "Hat";
function myFun() {
  var someVar = "Head";
  console.log(someVar);
} 
myFun(); // prints "Head"
console.log(someVar); // prints "Hat

You can notice, that calling the function prints the variable defined within it i.e. the one in the local scope.

Returning from a function

At times, a function does some processing and returns a value. Returning a value means that a function can send a value whenever called. Later, that value can be stored or used directly.

A function returns the value using the return keyword.

When a function reaches the return statement, the execution of the current function stops and control goes to the calling location.

Let's see an example

function add(num1, num2){
   return num1 + num2;
   console.log("It will never be executed!")
}
var result = add(2, 3);
console.log(result); // prints 5

The variable result stores the value returned by the function add() and later can be used to print. Also, the console.log statement within the function body won't be executed because it comes after the return statement.

It can also be used without explicitly using a variable as

console.log(add(2, 3));  // prints 5

Here console.log uses the value returned by add(2, 3) directly.

When a function doesn't return anything using the return keyword, the default value returned by it is undefined. For e.g.

function mul(num1, num2) {
  sum = num1 + num2;
}
console.log(mul(2, 3));  // prints undefined

Albeit the sum has been modified but the function does not return anything. Therefore it prints out undefined.

Conclusion

With the end of this post, we have acquired some knowledge about functions and how to use them. Functions play an important role in any programming language as they help you to make reusable code and simplify the logic significantly.

References

Let's meet next time with some other JavaScript basics. Till then be curious and keep learning. :)

[freeCodeCamp] Basic JavaScript - Arrays

Prashant Sharma — Sat, 06 Jun 2020 10:19:38 +0000

Hey, y'all! I believe you all are doing excellent. This is in continuation of my previous post on strings and my JavaScript learning from freeCodeCamp. This time, I acquired some knowledge about arrays in JavaScript.

Let's begin without any delay!

Defining JavaScript Arrays

When we want to store multiple related values sequentially, we make use of arrays. Instead of creating multiple variables for each value, we can assign all those values to an array.

An array in JavaScript in enclosed in [] i.e. square brackets with multiple values separated by comma(,). Let's see an example

var myArray = ["butter", "cheese", "milk"]

myArray is now an array. It can contain values of different data types as well.

One can also nest array within other arrays. These are called multi-dimensional arrays. For e.g.

var myArray = [["John", 12], ["Maxwell", 18]]

Here you can see, we have defined multiple arrays within an array. This is what we refer to as nested arrays.

Accessing array elements

We can access array elements in the same way we deal with string i.e. using indexes.

Indexes in JavaScript starts with 0

For e.g.

myArray[0]; // returns the first element of an array

Modifying Array elements

Unlike strings, arrays are mutable i.e. you can change the values that exist within an array. For e.g.

var myArray = [5, 4. 7, 2]; 
myArray[2] = 3; // now the array looks like [5, 4, 3, 2]

Accessing Nested Array elements

Accessing nested array elements can be achieved by using multiple brackets where first pair of brackets refers to the outermost array and subsequent pairs would access the subsequent nested arrays. Let's clear it with an example from freeCodeCamp itself.

var arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9],
  [[10,11,12], 13, 14]
];
arr[3]; // equals [[10,11,12], 13, 14]
arr[3][0]; // equals [10,11,12]
arr[3][0][1]; // equals 11

Manipulating Arrays

push() method

JavaScript provides push() method to append a value to the end of an array. Let see its usage with a short example

var arr = [1, 2];
arr.push(3); // arr is now [1, 2, 3]
arr.push([4, 5]); // arr is now [1, 2, 3, [4, 5]]

pop() method

pop() method works, just as opposed to push() i.e. it pops out or removes the last element of an array and returns that element. When I say, return an element, it means we can store the value returned by pop() in case we want.

Considering the above updated array as an example

arr.pop(); // Returns [4, 5], now array will be [1, 2, 3]
arr.pop(); // Returns 3 as it is the last element of updated array

shift() method

We know that pop() removes the last element of an array. But what if we want the first element to be removed? Well, we can use shift() for that. It removes the first element and returns that.

var arr = [1, 2, 3];
arr.shift(); // Returns 1, now array will be [2, 3]

unshift() method

unshift() works just like push() but instead of adding an element to the end, it adds an element to the starting of array. Let's see an example

var arr = [2, 3];
arr.unshift(1); // arr is now [1, 2, 3]

Conclusion

In this post, we got familiar with the fundamentals of arrays in JavaScript and how to manipulate and access them.

References

I am keeping this post short for easy grasping of concepts. I will be talking about other JavaScript fundamentals in the next post. Till then, be curious and keep learning! :)

[freeCodeCamp] Basic JavaScript - Strings

Prashant Sharma — Tue, 02 Jun 2020 09:58:13 +0000

Howdy fellows!

I hope you all are fine at this time of the pandemic. I am trying to utilize as much of my time as I can. So, I have started learning JavaScript from freeCodeCamp's JavaScript curriculum. This is the second post in the series, which I am writing to keep notes of my learning, which might help someone else. You can find my previous post here.

Let's get started

Strings

In JavaScript, a string can be written using any of the single or double quotes, as long as we start and end the string with the same quotation. For e.g.

var myString = "My name is Prashant";
var anotherString = 'I study in college';

In the above example, both myString and anotherString are valid strings in JavaScript.

Escaping literal quotes in JavaScript

When we need to insert a single or double quote within a string, we escape that character by pre-pending it by \ i.e. a backslash. For e.g.

var myString = "It is a \"double quoted\" string";

would result in

It is a "double quoted" string;

However, you may not need to escape the string if your surrounding quotes are not same as what you want in the string. Let me give you an example

var myString = 'I am a "double quoted" string';

would give the same result as above. As you may notice, here we didn't need to escape the quote as the surrounding quote is a single quote (''), but what we used inside is a double quote.
Vice -versa would be true as well i.e. you may keep the double quotes for surrounding your string and use single quote inside of your string without escaping.

Other escape sequences in String

Apart from using escape sequence for multiple quotes within the same string, escape sequences are also used to type out characters which we may not be able to do otherwise. For e.g. a tab.

Some of the escape sequences present in JavaScript can be listed as

\' for single quotes
\" for double quotes
\\ for backslash, when you want to use backslash as a character in a string
\n for newline
\r for carriage return
\t for tab
\b for word boundary
\f for a form feed

String Concatenation

We can concatenate two strings using the + operator. For e.g.

var myString = "My name is Prashant" + " and I love programming.";

would give result as

"My name is Prashant and I love programming".

Make sure you give spaces where you want. Concatenation doesn't add spaces by itself. You may notice, I've provided a space in the second part of string concatenation.

You can use the shorthand += for concatenation as well. For e.g.

var myString = "My name is Prashant";
myString += " and I love programming";

This would give the same result as above.

We can use variables to store part of strings and then use them for concatenation. For e.g. the above example can also be written as

myName = "Prashant";
myHobby = "programming";

myString = "My name is " + myName + " and I love " + myHobby;

Finding the length of a string

To find the length of a string, we can make use of length property available to String data type as

var myString = "Prashant";
myString.length; // This would give us 8

Look carefully, how I have used the property using the .(dot) with the variable.

You may directly use the string to access its length property instead of storing it to a variable like

"Prashant".length; // This would also give us 8

Accessing individual characters of a string

We can access each character of a string using indexes. In JavaScript, we have indexes start from 0. Indexes are used along with the bracket notation to access the characters as

var myStr = "Example";
myStr[0]; // This would give us the 1st character of myStr i.e. "E"
myStr[1]; // This would give use the 2nd character i.e. "x".

This was easy, wasn't it?

Accessing the last character of a string

When you want to get the last character of the string, you may not know the last index of the string. In such cases, we can make use of the length property, we just discussed above.

We know that length property gives us the length of a string. So can you now think of at what index would the last character of a string be? Yes, it would be the length - 1 as index starts with 0 in JavaScript.

For e.g. in the above example, Example has length 7 but the last index of this string is 6. I hope, now you get it.

myStr[myStr.length - 1];  // This would give you the last character of myStr

Accessing last to Nth character in a string

In a similar fashion as above, if you want to get the nth character from the last, you can access it using myStr.length - n, when n is the nth character from the last.

String Immutability in JavaScript

In JavaScript, strings are immutable i.e. once created you cannot alter the contents of a string. For e.g.

var myStr = "Pan";
myStr[0] = "C";

would result in the following error as we are trying to alter the contents of myStr.

TypeError: Cannot assign to read only property '0' of string 'Pan'

But this doesn't mean that we can't change the value of myStr. You can always reassign it to any other value. It's just that individual characters of a string cannot be changed.

Conclusion

In this post, we got familiar with the fundamentals of a string in JavaScript and how to manipulate and access them.

References

I will be talking about other JavaScript fundamentals in the next post. Till then, be curious and keep learning! :)

[freeCodeCamp] Basic JavaScript – Comments, Variables and Mathematical Operations

Prashant Sharma — Sat, 30 May 2020 09:35:19 +0000

Hello folks!

I have planned to complete the JavaScript curriculum from the freeCodeCamp. I have always wanted to complete a course on JavaScript but couldn't do so due to procrastination, laziness and a lot of other reasons.

But this time, I feel that not only learning but keeping a record of each concept and topic, will keep me motivated to continue the course and complete it until it ends. Another reason to choose the freeCodeCamp was to come across this playlist by Florin pop. He has done an amazing job there.

This will be a series of posts, which would include different topics, involved in the freeCodeCamp's JavaScript curriculum. Now, without any more delay, let's start with topics.

Comments

We can comment JavaScript code using // or /* */. Although both of them are valid comment specifiers. We use // for single-line comments and /* */(start with /* and end with */) for multi-line comments. For eg.

// Single Line or inline comment

/* 
   Multiple
   Line of 
   Comments 
*/

Declaring and Initializing Variables

We know, that variables are used to store data. In JavaScript, we mainly have seven kinds of data types which are

undefined
null
boolean
string
symbol
number
object

JavaScript is also a dynamically typed language i.e. a variable in JavaScript can hold any type of value at any point of time within a program. We use the var keyword to declare variables in JavaScript as

var myName;

Here myName is a variable, which can store any data type from the above list. Also, don't forget to end a JavaScript statement with a semicolon(;).

Variables in JavaScript can contain numbers, letters, $, _ but can't contain spaces and start with numbers.

We can as well assign a value to the variable using assignment = operator as

myName = "Prashant";

You can also initialize a variable at the time of its declaration as

var myNum = 7;
var anotherNum = myNum;

Quirks with uninitialized variables

When you don't initialize a variable, rather just only declare it, they hold the value undefined.
Performing any mathematical operation with undefined will result in NaN which means Not a Number.
Performing concatenation with undefined by adding a string literal to it will result in a string "undefined".

JavaScript is a case-sensitive language. It means variable myvar and myVar are different due to case insensitivity of letter v. In JavaScript, the best practice to define variables is to define them in camelCase.

Mathematical Operations in JavaScript

Number data type is used to represent numeric data. There are various operators in JavaScript.

We can add two numbers in JavaScript using + operator as

var a = 10 + 10; // assigned 20

We can subtract two numbers in JavaScript using - operator as

var b = 15 - 5; // assigned 10

We can multiply two numbers using * operator as

var c = 5 * 10; // assigned 50

We can divide two numbers using / operator as

var d = 80 / 10; // assigned 8

Until now, we have just used some basic mathematical operation which we've seen already in mathematics. However, there are some other helpful mathematical operators like

Increment a number by 1 using ++ operator. Yes, I hear, you say this can easily be done as

var = var + 1;

However, JavaScript provides a shorthand to achieve it without the need of an assignment operator. The above statement is equivalent to

var++;

Decrement a number by 1 using -- operator. Similarly, as the increment operator, we can decrement a numerical value stored in a variable in a concise way as

var--;

Some other operations are

You can create Decimal numbers by just assigning the variable to the floating value. For e.g.

var pi = 3.14;

is a valid decimal number. All other arithmetic operations described above can also be performed with decimal numbers. :)

We have remainder operator i.e. % in JavaScript to find the remainder of a division. For e.g.

var rem = 7 % 3;  // assigned 1

This operation is widely used for finding out even and odd numbers as a number properly divisible by 2 would be called as even, and odd otherwise.

JavaScript provides some shorthand for compound assignments for various mathematical operations like, +=, -=, *=, /= etc. You can use them as

var a = 1;
a += 5;  // a = a + 5

Other shorthand operators work in the same fashion.

Conclusion

In this post, we've got familiar with concepts like comments, variables and various mathematical operations in JavaScript.

References

Let's meet in the next post, covering some other JavaScript fundamentals. Till then, be curious and keep learning! :)

DEV Community: Prashant Sharma

[freeCodeCamp] ES6 - Arrow Function, Rest Parameter, Spread Operator

Anonymous functions

Arrow functions

Arrow functions with parameters

Default parameters

Rest Parameters in function

Spread Operator

Conclusion

References

[freeCodeCamp] ES6 - var, let and const

Difference between var and let keywords

Scope differences between var and let keywords

Variable declaration using the const keyword

Mutating arrays declared with const

Preventing object mutation

Conclusion

References

[freeCodeCamp] Basic JavaScript - Recursion, random numbers, parseInt function

Recursion

Generating random numbers in JavaScript

Generating random fraction

Generating random whole numbers

Generating random whole numbers within a range

parseInt function in JavaScript

Conclusion

References

[freeCodeCamp] Basic JavaScript - Loops

Loops

for loop

while loop

do...while loop

Iterating through an array

Nesting for loops

Conclusion

References

[freeCodeCamp] Basic JavaScript - Objects

Objects

Accessing object properties

Updating Object properties

Adding properties to an Object

Deleting properties of an Object

Checking object for a property

Conclusion

References

[freeCodeCamp] Basic JavaScript - Conditional Logic, Logical Operators, switch statement

Implement Conditional Logic

if statement

else statement

else if statement

Ternary Operator

Logical Operators in JavaScript

AND operator (&&)

OR operator (||)

Switch statement

Using default in the switch statement

Multiple Identical Options in the Switch statement

Returning Boolean from a function

Conclusion

References

[freeCodeCamp] Basic JavaScript - Queues, Boolean, Comparison Operators

Queues

Boolean

Comparison Operators

Equality Operator

Strict Equality Operator

Inequality operator

Strict Inequality Operator

Greater than operator (>)

Greater than or equals to operator (>=)

Less than operator (<)

Less than or equals to operator (<=)

Conclusion

References

[freeCodeCamp] Basic JavaScript - Functions

Functions

Parameters and Arguments

Scopes in function

Global Scope

Local Scope

Difference between `var` and `let` keywords

Scope differences between `var` and `let` keywords

Variable declaration using the `const` keyword

`parseInt` function in JavaScript

`for` loop

`while` loop

`do...while` loop

Nesting `for` loops

`if` statement

`else` statement

`else if` statement

AND operator (`&&`)

OR operator (`||`)

Using `default` in the switch statement

Greater than operator (`>`)

Greater than or equals to operator (`>=`)

Less than operator (`<`)

Less than or equals to operator (`<=`)

`push()` method

`pop()` method

`shift()` method

`unshift()` method