DEV Community: Swetha

Function Declaration & Function Expression

Swetha — Wed, 18 Jun 2025 16:10:40 +0000

Function Declaration

A function declaration also known as a function statement declares a function with a function keyword. The function declaration must have a function name.
Function declaration does not require a variable assignment as they are standalone constructs and they cannot be nested inside a functional block.
These are executed before any other code.
The function in the function declaration can be accessed before and after the function definition.

function functionName() { // set of statements }

Function Expression

A function Expression is similar to a function declaration without the function name.
Function expressions can be stored in a variable assignment.
Function expressions load and execute only when the program interpreter reaches the line of code.
The function in the function expression can be accessed only after the function definition.

let variableName = function (param1,param2) { // set of statements } console.log(variableName(args1,args2));

Reference Link
https://www.geeksforgeeks.org/javascript/difference-between-function-declaration-and-function-expression-in-javascript/

Hoisting

Swetha — Wed, 18 Jun 2025 15:50:47 +0000

Hoisting refers to the behaviour where JavaScript moves the declarations of variables, functions, and classes to the top of their scope during the compilation phase. This can sometimes lead to surprising results, especially when using var, let, const, or function expressions.

Hoisting applies to variable and function declarations.
Initializations are not hoisted, they are only declarations.
'var' variables are hoisted with undefined, while 'let' and 'const' are hoisted but remain in the Temporal Dead Zone until initialized.

Temporal Dead Zone (TDZ) :

It refers to the period between the entering of a scope (such as a function or block) and the actual initialization of a variable declared with let or const. During this time, any reference to the variable before its initialization will throw a ReferenceError.

Variables declared with let and const are hoisted to the top of their scope, but they are not initialized until their declaration line is reached.
Any attempt to access these variables before their declaration will result in an error.
The TDZ exists only for variables declared using let and const. Variables declared with var do not have this issue, as they are hoisted and initialized to undefined.

var (Function / Global)
var avoids TDZ because it is initialized as undefined during hoisting.
let & const (Block)

let and const are not initialized until their declaration line, so TDZ applies.

Variable Hoisting with var

When you use var to declare a variable, the declaration is hoisted to the top, but its value is not assigned until the code execution reaches the variable’s initialization. This results in the variable being assigned undefined during the hoisting phase.

console.log(a); // undefined var a = 5;

Variable Hoisting with let and const

Unlike var, let and const are also hoisted, but they remain in a Temporal Dead Zone (TDZ) from the start of the block until their declaration is encountered. Accessing them before their declaration will throw a ReferenceError.

console.log(b); // ReferenceError: Cannot access 'b' before initialization let b = 10;

Function Declaration Hoisting

Function declarations are hoisted with both their name and the function body. This means the function can be called before its definition in the code.

greet(); // "Hello, world!" function greet() { console.log("Hello, world!"); }

Function Expression Hoisting

Function expressions are treated like variable declarations. The variable itself is hoisted, but the function expression is not assigned until the line of execution. This means calling the function before its assignment will result in an error.

hello(); // TypeError: hello is not a function var hello = function() { console.log("Hi!"); };

Reference Link
https://www.geeksforgeeks.org/javascript/javascript-hoisting/

React Event

Swetha — Wed, 18 Jun 2025 14:57:30 +0000

In React, events are actions that occur within an application, such as clicking a button, typing in a text field, or moving the mouse. React provides an efficient way to handle these actions using its event system.

React event handling is similar to HTML event handling, but with some key differences. In React, event names are camelCase, and you pass a function as the event handler rather than a string.

onChange
React onChange is an event handler that triggers when there is any change in the input field.

This event captures the changes in an Input Field and executes the handler function. It is fired when the input field is modified and loses focus. It is one of the form events that updates when the input field is modified.

handleChange: It is a function call that includes the code to be executed when an event triggers
event: It is an event object containing information about the event like target element and values

Reference Link
https://www.geeksforgeeks.org/reactjs/react-js-events/
https://www.geeksforgeeks.org/reactjs/react-onchange-event/

Hooks

Swetha — Wed, 18 Jun 2025 14:57:11 +0000

React Hooks are functions that allow functional components in React to manage state, handle side effects, and access other React features without needing class components. They provide a simpler and more efficient way to manage component logic.

Simplifies Code: Hooks provide a simpler and cleaner way to write components by using functions instead of classes.
State and Side Effects: Hooks allow you to use state (useState) and side effects (useEffect) in functional components.
Reusability: Hooks make it easier to share logic across components by creating custom hooks.
Readability: Functional components with hooks tend to be more concise and easier to read than class components.

useState
The useState hook is used to declare state variables in functional components. It allows us to read and update the state within the component. It returns a state variable and a function to update that state.

const [state, setState] = useState(initialState);

state: It is the value of the current state.
setState: It is the function that is used to update the state.
initialState: It is the initial value of the state.

Reference Links:
https://www.geeksforgeeks.org/reactjs-hooks/
https://www.geeksforgeeks.org/reactjs/reactjs-usestate-hook/

.js vs .jsx

Swetha — Fri, 13 Jun 2025 17:29:50 +0000

The .js file is a file that contains standard JavaScript code. These files do not contain the UI related code and are used for writing the logics and the functions.

Used for regular JavaScript code and logic.
Does not include JSX (HTML-like syntax).
Can be used for utility functions, state management, or simple React components.
No extra tools needed to run.

.jsx

JSX (JavaScript XML) is an extension of JavaScript that lets developers write HTML-like code inside JavaScript. Files with the .jsx extension usually contain components written in JSX, which React then converts into JavaScript function calls.

Used for React components with JSX (HTML-like syntax)
Includes JSX to define the UI structure.
Mainly for creating and rendering the user interface.
Requires tools like Babel to convert JSX into JavaScript.

Babel

Babel works through a series of transformations that take your modern JavaScript (including JSX) and convert it into backwards-compatible JavaScript.
Babel is often referred to as a transpiler (A transpiler (short for source-to-source compiler) is a tool that converts code from one version of a language to another, often for compatibility reasons.) rather than a compiler because its primary function is to translate one version of JavaScript into another version of JavaScript.

Transpiling usually refers to the process of translating source code from one version of a language to another version of the same language (e.g., from ES6 to ES5, or JSX to JavaScript).

Reference Link

https://www.geeksforgeeks.org/reactjs/what-is-the-difference-between-a-js-and-jsx-file-in-react/
https://www.geeksforgeeks.org/reactjs/reactjs-babel-introduction/

React

Swetha — Fri, 13 Jun 2025 14:39:16 +0000

React is a JavaScript Library known for front-end development (or user interface). It is popular due to its component-based architecture, Single Page Applications (SPAs), and Virtual DOM for building web applications that are fast, efficient, and scalable.

Virtual DOM
The Virtual DOM (VDOM) is a lightweight, in-memory representation of the real DOM (Document Object Model). It helps React manage UI updates more efficiently by keeping a virtual version of the UI in memory. When changes occur, React updates only the necessary parts of the real DOM, instead of re-rendering everything.

Virtual DOM and Real DOM

Framework
Framework, on the other hand has defined open or unimplemented functions or objects which the user writes to create a custom application. Because a framework is itself an application, it has a wider scope and includes almost everything necessary to make a user application as per his own needs.
Library
A library is a collection of pre-written code, functions, or resources that developers can use to perform common tasks or add specific features to their applications without having to write the code from scratch.

JSX(JavaScript Xml)
JSX combines HTML and JavaScript in a single syntax, allowing you to create UI components in React. It simplifies rendering dynamic content by embedding JavaScript expressions inside HTML-like tags.

npm and npx
npm is a package manager for JavaScript that is used to install, update, and manage packages (libraries and tools) in a Node.js or React project.
npx is a tool that allows you to run Node.js packages directly from the command line without installing them globally on your system.

Component
React components are independent, reusable building blocks in a React application that define what gets displayed on the UI. They accept inputs called props and return React elements describing the UI.
A component is a building block that encapsulates a piece of the user interface (UI). It defines the structure and behavior of the UI, either by managing its own state or by receiving data through props and rendering content accordingly.

Functional Components
Functional components are a core part of building user interfaces. They are simple, lightweight, and powerful tools for rendering UI and handling logic. Functional components can accept props as input and return JSX that describes what the component should render.
ReactJS functional components are JavaScript functions that return a JSX element, which is a template used to define the component's structure. JSX looks similar to HTML, but it has a special syntax that lets it be converted into JavaScript code.

SPA(Single Page Application)
An SPA is a web application that loads a single HTML page and dynamically updates the content as the user interacts with it. This is typically achieved using JavaScript frameworks like React.
When a user navigates within an SPA, the application does not request new HTML pages from the server. Instead, it uses JavaScript to update the view in the browser.

MPA(Multi Page Application)
An MPA is a traditional web application where each interaction or navigation request results in the browser loading a new page from the server.
Each page is a separate HTML document, and when a user navigates, the browser requests a new page from the server.

Reference Link:
https://www.geeksforgeeks.org/reactjs/react/
https://www.geeksforgeeks.org/reactjs/reactjs-virtual-dom/
https://www.geeksforgeeks.org/software-engineering/software-framework-vs-library/
https://www.geeksforgeeks.org/reactjs/reactjs-jsx-introduction/
https://www.geeksforgeeks.org/reactjs/reactjs-components/
https://www.geeksforgeeks.org/reactjs/reactjs-functional-components/

DOM

Swetha — Thu, 29 May 2025 17:46:28 +0000

The JavaScript HTML DOM (Document Object Model) is a powerful tool that represents the structure of an HTML document as a tree of objects. It allows JavaScript to interact with the structure and content of a webpage. By manipulating the DOM, you can update the content, structure, and styling of a page without requiring a page reload.

Why is DOM Required?
Dynamic Content Updates: Without reloading the page, the DOM allows content updates (e.g., form validation, AJAX responses).
User Interaction: It makes your webpage interactive (e.g., responding to button clicks, form submissions).
Flexibility: Developers can add, modify, or remove elements and styles in real-time.
Cross-Platform Compatibility: It provides a standard way for scripts to interact with web documents, ensuring browser compatibility.

Undefined :
A variable that is declared but not initialized will have the value undefined.
let x; // variable declared but not initialized
console.log(x); // Output: undefined
Null :
Null is basically an assignment value given to a variable. The variable which has been assigned as null contains no value.
let noValue = null

Function

Swetha — Wed, 28 May 2025 13:20:50 +0000

A function is a self-contained block of code that performs a specific task and can be reused multiple times by calling it.
Syntax :
function functionName(parameters) {
// code to be executed
}

Variables :
A variable stores data that can be used and manipulated in a program.
Global Variable :
A global variable is declared outside any function or block, and it is accessible anywhere in your code, including inside functions.
Local Variable :
A local variable is declared inside a function or block, and it is accessible only within that function or block.

Event :
An event is an action or occurrence that happens in the browser, which your JavaScript code can detect and respond to.

Events allow your website to be interactive and dynamic. Without events, a web page is just static content.

Event = Action that happens in the browser (like clicking or typing)

Used to = Make web pages interactive

JavaScript

Swetha — Wed, 28 May 2025 12:25:30 +0000

JavaScript is a high-level, interpreted programming language primarily used to create interactive and dynamic content on websites. It is one of the core technologies of the web, along with HTML (for structure) and CSS (for styling).

Internal = script is inside HTML file.

External = script is in separate .js file and linked.

Inline = script is inside element attribute.

Primitive Data Types :

String => Text data
Number => Numeric values (integers, decimals)
Boolean => True or false
undefined => A variable declared but not assigned
null => Represents intentional "no value"
BigInt => Large integers
Symbol => Unique and immutable identifier

Reference (Non-Primitive) Data Types :

Object => Collection of key-value pairs
Array => Ordered list of value
Function => Block of reusable code
Date => Built-in object types

Variable Declarations:

var => Can be redeclared and reassigned
let => Can be reassigned, but not redeclared in the same scope
const => Cannot be reassigned or redeclared