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

gauravshekhawat

Gaurav-Shekhawat

Posted on August 16, 2021

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";
Enter fullscreen mode Exit fullscreen mode

will be treated as-

var greeter;
console.log(greeter);  //greeter is undefined
greeter = "say hello";
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

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;
}
};
Enter fullscreen mode Exit fullscreen mode

Use the function like:-

console.log(student.studentInfo());
Enter fullscreen mode Exit fullscreen mode

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";
}
Enter fullscreen mode Exit fullscreen mode

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

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);});
Enter fullscreen mode Exit fullscreen mode

and to sort in descending order:-

myArray.sort(function(a,b){return (b-a);});
Enter fullscreen mode Exit fullscreen mode
  1. You can declare an array, also like:-
let myArray = new Array();
Enter fullscreen mode Exit fullscreen mode

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

  1. onclick:-
<button class = "btn-primary" onclick="ageInDays()">Click me</button>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

This is wrong, and the correct way is:-

img.src = "//unsplash.it/200/200";
Enter fullscreen mode Exit fullscreen mode

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
💖 💪 🙅 🚩
gauravshekhawat
Gaurav-Shekhawat

Posted on August 16, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related