Day 3: 100 days of Code , Javascript Fundamentals, With Some Important Functions
Gaurav-Shekhawat
Posted on August 16, 2021
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:-
-
getElementById(" ")
-
innerHTML
:- make sure you write value of Id and innerHTML in double quotes/or single maybe. -
prompt
indexOf(" ")
-
slice(firstIndex, lastIndex)
:- The first index is included while the last is excluded. toUpperCase()
toLowerCase()
-
replace("oldsubstring", "newsubstring")
:- Example:- if the string initial is banana, then replace("ban", "123") will give "123ana". charAt(index)
-
split("someseperator")
:- if nothing is passed such assplit("")
, 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);});
- You can declare an array, also like:-
let myArray = new Array();
Define the array inside the (), if you want to.
-
onclick
:-
<button class = "btn-primary" onclick="ageInDays()">Click me</button>
here ageInDays is a javascript functions defined in the js file.
- 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
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
August 16, 2021