Day 3: 100 days of Code , Javascript Fundamentals, With Some Important Functions
Tags: 100daysofcode, javascript, webdev, creatingsummary
Published: 2021-08-16 11:59:18



Today, I will be learning javascript. So, let's begin..

## Javascript
### Hoisting
Hoisting is a javascript mechanism where variables and functions declarations are moved to the top of their scope before code execution. Example: this code :-
```
 console.log (greeter);
 var greeter = "say hello";
```
will be treated as-
```
var greeter;
console.log(greeter);  //greeter is undefined
greeter = "say hello";
```
In this example, `var` variables are hoisted to the top of their scope and initialised with the value of `undefined`.`let` and `const` are hoisted but not initialsed and hence if we try to use them before initialising like the above example, we will get a `Reference Error`.

----

### Some ways to access the values or properties of a object
Let person be an object:-
```
let person: {
name : "John",
class : 10,
good : true
}
```
To access name of person:-
* Method-1:-  `person.name`
* Method-2:-  `person["name"]`. Attention, here you must put the value of the property inside the double or single quotes, `person[name]` will not work.  

> We can change the value of properties of both a "let" and a "const" object, but we cannot add or remove properties in case of "const" object.(for the case of var, we can).Example:- 
```
let student = {
    class: 10,
    name: "John",
    padal: true
}

student.huehue = false; //no errors
console.log(student); // prints {class: 10, name: "John", padal: true, huehue: false}
```

### Defining functions inside of an object
We can define functions inside of an object, the syntax will be:-  
```
let student = {
name : "John",
studentInfo: function (){
   return name;
}
};
```
Use the function like:-
```
console.log(student.studentInfo());
```
### switch statements
The syntax is like:-
```
switch (expression) {
    case 0:
        text = "weekend";
        break;
    case 1:
        text = "not-weekend";
        break;
    case 2:
        text = "weekend";
        break;
    default:
        text = "no_idea";
}
```
Where expression is the expression whose values we are putting in the cases, such as "0", "1" etc.


### Json
JSON stands for javascript object notation. It is basically an array of objects.
Do the below thing to include a JSON file inside your project. 

![SS of youtube](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpf4kxjw0x79y2kb9rrf.png)

### An important guide to object-keys in javascript
see this [medium](https://medium.com/@alifabdullah/never-confuse-json-and-javascript-object-ever-again-7c32f4c071ad) article.  


## Other short points:-
* Var, let, and const, What's the difference? - [freecodecamp](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/) . Read only the last para for summary.

* Some new short topics learnt:-
  1. `getElementById(" ")` 
  2. `innerHTML` :- make sure you write value of Id and 
      innerHTML in double quotes/or single maybe.
  3.  `prompt`
  4. `indexOf(" ")`
  5.  `slice(firstIndex, lastIndex)`:- The first index is included while the last is excluded.
  6. `toUpperCase()`
  7. `toLowerCase()`
  8. `replace("oldsubstring", "newsubstring")` :- Example:-  
  if the string initial is banana, then replace("ban", "123") will give "123ana".
  9. `charAt(index)`
 10. `split("someseperator")` :- if nothing is passed such as `split("")`, then it will split the individual character of the string.
  11 . `toString()`:- can also be used on arrays, in that case all the elements of the array will become seperated by commas, without any space in between.  

### Array common methods
  * `join("somespecifier")` :- make a string out of an array, concatenating elements by putting "somespecifier" between them.
  * `pop` :- removes the last element from the array.
  * `push("newElementInTheArray")` :- appends 
  * `shift()`:- removes first element from the array, very expensive thing to do.
  * `unshift()`:- add first element to the array.
  * `reverse()`:- reverses the order of the array
  * `sort()`:- while sorting numbers, if you do not pass any function with sort, then the numbers will not be sorted. So, to sort in ascending order, you must write  
```
myArray.sort(function(a,b){return (a-b);});
``` 
and to sort in descending order:-
```
myArray.sort(function(a,b){return (b-a);});
```

13. You can declare an array, also like:-
```
let myArray = new Array();
```
Define the array inside the (), if you want to.

14. `onclick`:-   
```
<button class = "btn-primary" onclick="ageInDays()">Click me</button>
```
here ageInDays is a javascript functions defined in the js file. 

15. After creating an html element, using createElement, If you are creating an 'img', then during the source allocation of the img:-
```
image.setAttribute("src","//unsplash.it/200/200"); //wrong
```
This is wrong, and the correct way is:-
```
img.src = "//unsplash.it/200/200";
```



 





## Topics need to improve upon
* functions inside of sort
* JSON



## Other topics that I did but unable to write
* Challenge: your age in days
* Challenge: Cat generator challenge