Saturday, January 4, 2020

JavaScript Basics

variables and constants:
old syntax: var
es6: let



let name; //create a variable.but value: undefined

let name1 = 'test1',name2 = "test2";

console.log(name); //prints on browser console.

//variable name: no reserve keywords.

const interestRate = 0.3;//constants


Data types:
Dynamic language, no need to mentioned datatype during variable declaration and can be changed at runtime later.


let a1 = "testing";
console.log(typeof a1);

primities/value types:
String,Number,Boolean,undefined,null



let name='Mosh';//String literal

let age= 30;//Number literal

let isApproved = false;//Booean literal

let firstName = undefined;

let selectedCOlor = null;


Reference types:
objects

let person = {

 name: "fname",

 age: 30

};

console.log(person);



//dot notation

person.name = 'fname1';

console.log(person.name);



//bracket notation

person['name'] = "fname2"

console.log(person.name);





//using bracket notation we can access dynamically like below.

let selection = 'name';

person[selection] = 'asdas';

//arrays


let selectedColors = ['red','blue'];

selectedColors[2] = 'green';//added one more element as size is dynamic.

selectedColors[3] = 123

console.log(selectedColors[0]);

typeof selectedColors//array is also an object in javascript


//functions

//function declaration
function fnname(){
  console.log('Hello !!');
}

//function declaration with parameter
function fnname1(name, lastName){
  console.log('Hello '+ name + '!!');
}

fnname(); //calling a function
fnname1('name 1');//passing argument,2nd value will be undefined
fnname1('name 1','name 2');//passing argument

Operators:
-----------

Arithmetic:
---------
addition +
subtraction -
multiplication *
exponent **
division /
reminder %


Assignment:
-----------
assign a value =
post and pre increment ++ and decrement --
++  x++ is equal to x = x + 1
x+=5 --> x = x + 5  similarly for other operators also like addition

Comparison:
----------
returns boolean values.
> , >= , < , <= , === , !==

equality operator ==(loose equality: same value) and ===(Strict equality: same value and type)
'1' == 1 (true)
'1' === 1 (false)

conditional/ternary operator: ?=

Logical

&& -- if both are true then true
|| -- or
! -- not

Bitwise: & , |



break and continue is like c language to stop/goto next iteration of loop.
return keyword to comeout of function or return a value.



let hour = 10;

if(hour>= 6 && hour < 12)
  console.log('Good morning');
else if (hour >= 12 && hour < 18)
  console.log('Good afternoon');
else
  console.log('Good evening');


---

let role = 'guest';
switch (role)
{
  case 'guest':
    console.log('Guest User');
    break;
  case 'moderator':
    console.log('Moderator User');
    break;

  default:
    console.log('Unknown User');
}

if (role === 'guest') console.log('Guest');
else if (role === 'moderator') console.log('Moderator');
else console.log('Unknown User');



//LOOPS
//------
//For

for (let i = 5; i <= 5; i++){
  if(i%2 !== 0) console.log(i);
}

//While

let i = 0;
while( i <= 5){
 if(i%2 !== 0) console.log(i);
 i++;
}

//Do..while

let i = 9;
do{
 if (i % 2 !== 0) console.log(i);
 i++;
}while (i<=5);

//For..in

const person = {name: 'dsas' , age:30};

for (let key in person)
  console.log(key, person[key]);

const colors = ['red','green','blue']
for (let index in colors)
  console.log(index, colors[index]);

//For..of

const colors = ['red','green','blue']
for (let color of colors)
  console.log(color);

Objects are dynamic in JS, we can modify them even after creation.
Primitives are copied by their value and Objects are copied by their reference.


//Ex: mentioned as constant and defined one property.
const circle = {
 radius: 1
}
//we will get error if we try circle = {}; as we defined it as const.But we can add new.
circle.color = 'yellow';
circle.draw = function(){}
delete circle.color;
delete circle.draw;


const circle = {
 radius: 1,
 location: {
  x: 1,
  y: 1
 },
 isVisible: true,
 draw: function(){
 console.log('draw');
}
 };

circle.draw();//Method

//--create multible objects using factory function

//factory function to create objects
function createCircle(radius)
{
 return{
  radius,
  draw(){
 console.log('draw');
}
};
}

const circle1 = createCircle(1);
console.log(circle1);
const circle2 = createCircle(2);
console.log(circle2);


//camel notation: oneTwoThree
//Pascal notation: OneTwoThree

//using constructors to create objects
function Circle(radius){
 this.radius = radius;
 this.draw = function(){
  console.log('draw');
}
}

const circle = new Circle(1);

constructor property:
circle.constructor
Circle.constructor

Enumerating Properties:


Inside {} we can keep $() to expand vars or expressions.


No comments:

Post a Comment