Forem: Sai Chandu

Scope of a Variable in JavaScript

Sai Chandu — Tue, 05 Mar 2024 17:06:09 +0000

Welcome back to another interesting and an exciting concept in JavaScript is Scope of a variable.

The Scope of Variable is defined as the context of a program in which it can be accessed. They are three ways of defining the scope of a variable.

1.Global Scope
2.Local Scope
3.Functional Scope
4.Block Scope
Now, we can see how these types of scopes were used differently in js.

1.Global Scope: Variables declared Globally(means outside function) have Global scope they can be accessed from anywehre in a program. Variables declared with var keyword can have global scope.

2.Local Scope: Variables declared inside a function becomes local to the function. We can access the values of those variables within that function only.

3.Function Scope: JavaScript has a function scope and each function can have their own scope. Variables declared with in the function are not allowed to access outside the function.

4.Block Scope: Earlier JavaScript has only Global Scope and Function Scope, but in ES6 2015 they introduce let and const with them we can have block scope. The variables declared with let and const are been accessed for that particular block.

This is all about the Scope of a variable in JavaScript.

Hope you guys learn about the scope. See you in next lecture🤠

JavaScript: Variables

Sai Chandu — Fri, 01 Mar 2024 17:17:42 +0000

Welcome back to JavaScript programming, today we are going to discuss about the variables.

What is a Varible?
Variables are used to store the values in it.We can use those variables in every where we want and can change the value of that variable.
In JavaScript we can define variables in 3 types:

Using **Var **keyword
Using letkeyword
Using constkeyword Now, we took deeper into these types with some examples: 1.Var: It is used to declare variables in javascript that are function-scoped. The var statement is also used to declare global-scope variables.

Note: Before ES6 introduction, all the keywords in JavaScript were declared with the var keyword.

2.let: JavaScript let keyword is used to declare variables that are block-scoped. Variables defined with the let keyword cannot be redeclared in the same scope and must be declared before use.

Note:let keyword was added in the ES6 or ES2015 version of javascript.

3.const:It was also introduced in ES62015(ES6) the const keyword to define a new variable. Variables declared using const keyword cannot be re-assigned.

Note:Variables specified using const cannot be redeclared and have block-scope.

We can discuss more about the scoping in the next lecture.

See you soon...🤠🤠🤠

An Intro to JavaScript.

Sai Chandu — Wed, 28 Feb 2024 17:30:17 +0000

Hi everyone,Today we will discuss about the World's popular Programming Language to develop Web Applications is JavaScript.

We have HTML,CSS to design Web Applications, but to make an interaction javascript will take care of that.

It is a scripting language that enables to create dynamically updating content, control multimedia, animate images, and everything else.

How To include Javascript in HTML?

We use script tag to include javascript file into the html.

Features of JavaScript:

Client Side: It supplies objects to control a browser with DOM(Document Object Model). To make this easy there are some libraries like ReactJS,Angular JS, Vue JS.

Server Side: It supplies objects relevant to running JavaScript on a server. To make it possible it has framework called Node JS.

Dynamic Type: It means types of the variables are defined based on the stored value.

Platform Independent: It means that you can simply write the script once and run it anywhere and anytime.

Prototype-based Language: It uses prototypes instead of classes or inheritance means we can define an object prototype, and then more objects can be created using object prototype.

This is a brief Introduction to JavaScript, we can learn more in coming days.
See you soon😊😊😊

React: Hooks

Sai Chandu — Tue, 13 Feb 2024 10:25:35 +0000

Welcome all for another topic in React is Hooks.

What are Hooks?
React Hooks are like JavaScript functions that we can use to isolate the reusable part from a functional component.

Hooks can be stateful and can manage side-effects.

Hooks are like different coffee cups that are used for different purposes. Just like different hooks use for differnt purpose in React.

The Different types of Hooks are:

UseState()
UseEffect()
UseReducer()
UseContext()
UseRef()

Now, we will see how these hooks works in different cases.

UseState(): It allows to add state to functional components.

2.UseEffect(): It allows to perform side effects in your components. Side Effects like: fetching data,directly updating the DOM, and timers.

3.UseReducer():It is similar to useState Hook.It is mainly used to handle complex state updates. It means if there are two state updates of similar type with slight change, we can combine them to single state known as useReducer().

4.UseContext: The main reason for using this UseContext is to centralize the state. It avoids props drilling.

5.UseRef: It allows you to access the elements and its inner values mainly for inputs and manipulate them.

Hope you guys enjoy learning about Hooks.
Meet u with more topics🤠

React:(Props)

Sai Chandu — Sat, 10 Feb 2024 13:35:38 +0000

The most important topic today is Props.

What are Props?

Props in react used to transfer data from one component to another component.
Like, we transfer the messages from one place to another place with the help of messenger.

It helps the components to access the customized data, values and the information that input holds.

How to Use Props?

In React there is a way of data transfer i.e. from Parent Component to Child Component and viceversa. The data passed to child can't be modified.

How to Send Prop into Component

We can see how the props are used in Child iComponent that was transferred from Parent TestComponent. The output displays the props value in Child Component.

Meet you seen with more concepts in React🤠🤠🤠

React: UseState()

Sai Chandu — Fri, 09 Feb 2024 17:07:52 +0000

Let's now disucss about the UseState().

UseState() is a Hook which store the intial value and update the value if any change occurs in state.

Real life example:

Let's imagine if you go to a restaurant & order noodles. Somehow you changed your mind to try italian. The waiter gave a chance to swap the noodles with pizza.

UseState() is like a waiter. It provides a function to change the initial value assigned.

Usage

The above figure depicts the usage of useState().

On intial render the useState stores 0 as the value.

When user click a button which triggers a function, Inside this function we can call setCount() to update the initial value.

Meet u soon with more concepts in React🤠

React: Components

Sai Chandu — Thu, 08 Feb 2024 13:12:35 +0000

Introduction to React js

React js is a JavaScript Library for building User Interfaces(UI). React is all about developing Single Page Applications. To describe React, it is all about Components.

What is a Component?

Components are like Cardboard boxes, In one box we can place books, another one we can place utensils. Smiliar to Cardboard box, a single component can be used for the entire application and a single component can be used for particular page.

App Component is the main component for a React Application.

Now let's try to understand Components in detail:

User Profile in Facebook

Some components from above example:

Navbar Component
Chat Component
Address Component
Cover Component

Common Component

1.Navbar Component: Common for every page in the application.

2.Chat Component: Common for both User Feed and Profile Page.

Page Specific Components

1.Address Component:Page Specific to the User Profile Page.

2.Cover Component: Used for User Profile Page.

This is how the components are used in React.

Meet u soon with more concepts in React🤠