Day 3: 100 days of Code , Javascript Fundamentals, With Some Important Functions

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.

An important guide to object-keys in javascript

see this medium article.

Other short points:-

• Var, let, and const, What's the difference? - freecodecamp . 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);});

1. You can declare an array, also like:-

let myArray = new Array();

Define the array inside the (), if you want to.

1. onclick:-

<button class = "btn-primary" onclick="ageInDays()">Click me</button>

here ageInDays is a javascript functions defined in the js file.

1. 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

Comments

[Marc Ziel]

person[name] will not work

it won't work as expected here. If you do let name = "name" it'll work. In other words, you can use variables with bracket notation.

we cannot add or remove properties in case of "const" object

You can add, remove or change properties of the object. You can't reassign const:

const o = {};
o.prop = 1 // okay
o = {} // error

There's a shortcut for creating methods:

studentInfo: function (){

can be rewritten as:

studentInfo() {

let myArray = new Array();

why would you ever want to create an array like this?

[Gaurav-Shekhawat]

Thanks for your corrections, they mean a lot. These topics are new to me, so I was just skimming through them and believed that I will study them in detail whenever they come handy in my side projects. Thanks again!!