JavaScript was invented in a two-week flurry in May 1995 by Brendan Eich.
Basic Statement:
Variables -to store data
Function
Control flow - if , if else
Ecmascript ( European Computer Manufacturers Association) - standardized
version of javascript invented in 1997
● Ecmascript 1 - the first standardized version of ECMAScript was released in
1997.
● Ecmascript 2 - No important feature introduced. with minor changes to
modernize language with ISO standard. Released 1998.
● Ecmascript 3 - Released in 1999 it introduce new features including
expression, try/expression handling and more.
Regular Expressions - validate to manipulate the value of text(Text Only)
Try and Catch - a mechanism for handling errors or exceptions that might occur during
the execution of a code block, allowing the program to continue running gracefully
instead of crashing.
● Ecma script 5 - Dec 2009 introduced Json and Strict mode
Strict mode - better security for codes
Json - it store and manipulated data have database
live programming - to see and manipulate error in real time
● Ecmascript 6 - features modern javascript introduced in 2015
Rejected Ecma Script 4 - because of the opposition of stakeholders
DOM(Document Object Model)
MOCHA - javascript 1st name
Livescript September of 95
Sep 2008 - chrome and V8
May 2009 - Node JS
Constant - Cannot be Changed or Fixed
Let,const and var - 1 of the most important update in es6 update
ES6 - ES2019 JavaScript Updates Review
ES6 Updates
1. Block-Scoped Variables (let & const)
● let and const are block-scoped, unlike var which is function-scoped.
● const prevents reassignment; let allows reassignment.
● Best Practices:
○ Use const by default.
○ Use let when reassignment is necessary.
○ Avoid var in ES6+.
2. Arrow Functions (=>)
● Shorter syntax for functions.
● Automatically binds this from the parent scope.
● Example:
const add = (a, b) => a + b;
3. Classes
● Syntactic sugar over prototype-based inheritance.
● Two types: class declaration and class expression.
● Example:
class Person {
constructor(name) {
this.name = name;
}
greet() {
return `Hello, ${this.name}`;
}
}
4. Template Literals
● Uses backticks ( ).
● Supports string interpolation with ${}.
● Example:
const name = "John";
console.log(`Hello, ${name}!`);
5. Other ES6 Features
● Destructuring
● Array Improvements (e.g., Spread & Rest operators)
● Promises (Handles asynchronous operations)
● Default Function Parameters
● Symbols, Generators, Maps, and Sets
ES7 (2016) Updates
1. Array.prototype.includes()
● Checks if an array contains a value.
● Example:
const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
2. Exponentiation Operator ()**
● Shorter syntax for exponents.
● Example:
console.log(2 ** 3); // 8
ES8 (2017) Updates
1. Object.values() and Object.entries()
● Object.values() returns an array of values.
● Object.entries() returns key-value pairs.
● Example:
const obj = { a: 1, b: 2 };
console.log(Object.values(obj)); // [1, 2]
console.log(Object.entries(obj)); // [['a', 1], ['b', 2]]
2. Async & Await
● Simplifies asynchronous code.
● Example:
async function fetchData() {
let data = await fetch('https://api.example.com');
return data.json();
}
3. Other ES8 Features
● String Padding (padStart(), padEnd())
● Shared Memory & Atomics
● Trailing commas in function parameter lists
ES9 (2018) Updates
1. Rest/Spread for Objects
● Allows cloning and spreading objects.
● Example:
const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3 };
console.log(newObj); // { a: 1, b: 2, c: 3 }
2. Asynchronous Iteration
● for-await-of to iterate over async iterables.
● Example:
async function processData(data) {
for await (let item of data) {
console.log(item);
}
}
3. Other ES9 Features
● RegExp improvements
● Promise.prototype.finally()
ES10 (2019) Updates
1. Array.prototype.flat()
● Flattens nested arrays.
● Example:
const arr = [1, [2, [3, 4]]];
console.log(arr.flat(2)); // [1, 2, 3, 4]
2. Object.fromEntries()
● Converts key-value pairs into objects.
● Example:
const entries = [['a', 1], ['b', 2]];
console.log(Object.fromEntries(entries)); // { a: 1, b: 2 }
3. Other ES10 Features
● String.prototype.trimStart()/trimEnd()
● Symbol.prototype.description
● Changes to Array.sort()
● Optional Catch Binding
Summary of Key ES6-ES10 Features
Feature ES ES ES ES ES1
6 7 8 9 0
let & const ✅
Arrow Functions ✅
Classes ✅
Template Literals ✅
Array.includes() ✅
Exponentiation ✅
Object.values()/ ✅
entries()
Async/Await ✅
Object Spread ✅
Async Iteration ✅
Array.flat() ✅
Object.fromEntries() ✅
Final Tips for the Exam:
● Focus on practical usage of ES6+ features.
● Understand how async/await improves promises.
● Practice using spread/rest operators.
● Know how ES updates improved syntax and functionality.
ReactJS - Overview
ReactJS is a JavaScript library used for building reusable UI components. According to
React's official documentation:
React is a library for building composable user interfaces. It encourages the
creation of reusable UI components, which present data that changes over
time. Many people use React as the V in MVC. React abstracts away the
DOM, offering a simpler programming model and better performance. It can
also render on the server using Node and power native apps with React
Native. React implements one-way reactive data flow, reducing boilerplate
and making it easier to reason about than traditional data binding.
React Features
● JSX – JavaScript syntax extension recommended for React development.
● Components – Everything in React is a component, making code modular and
maintainable.
● Unidirectional Data Flow & Flux – One-way data flow simplifies application
state management.
● License – React is licensed under Facebook Inc., and its documentation is
licensed under CC BY 4.0.
React Advantages
● Uses Virtual DOM, improving app performance.
● Works on both client-side and server-side.
● Component-based structure enhances readability and maintainability.
React Limitations
● Covers only the view layer, requiring additional tools for full-stack development.
● JSX syntax might seem unusual for new developers.
ReactJS - Environment Setup
To set up React, install NodeJS first. You can then install React using webpack and
babel or create-react-app.
Installing ReactJS using Webpack and Babel
Step 1 - Create the Root Folder
mkdir reactApp
cd reactApp
npm init -y
Step 2 - Install React and React DOM
npm install react react-dom --save
Step 3 - Install Webpack
npm install webpack webpack-dev-server webpack-cli --save
Step 4 - Install Babel
npm install babel-core babel-loader babel-preset-env babel-
preset-react html-webpack-plugin --save-dev
Step 5 - Create Required Files
type nul > index.html
type nul > App.js
type nul > main.js
type nul > webpack.config.js
type nul > .babelrc
Step 6 - Configure Webpack
Create webpack.config.js and add:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-
react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
};
Step 7 - Modify package.json
Replace the "test" script with:
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
}
Step 8 - Create HTML and React Components
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="app"></div>
<script src='index_bundle.js'></script>
</body>
</html>
App.js
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Step 9 - Run the Server
npm start
Visit http://localhost:8001/ in the browser.
Step 10 - Generate the Bundle
npm run build
Installing ReactJS using create-react-app
Instead of manually setting up Webpack and Babel, use create-react-app for a
simpler setup.
Step 1 - Install create-react-app
npx create-react-app my-app
Step 2 - Clean the src folder
cd my-app/src
del *
Step 3 - Add required files
type nul > index.css
type nul > index.js
Step 4 - Modify index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
Step 5 - Run the Project
npm start
ReactJS - JSX Overview
JSX is a syntax extension for JavaScript that looks similar to HTML. While it is not
required for React development, it offers several advantages:
● Performance Boost: JSX is optimized during compilation, making it faster.
● Type Safety: Errors are often caught at compile time.
● Familiar Syntax: If you know HTML, writing JSX is easy.
Using JSX
JSX closely resembles HTML, making UI creation more intuitive. Below is an example
where JSX is used inside a React component:
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
export default App;
1. Nested Elements in JSX
JSX requires that multiple elements be wrapped inside a single parent container, like
<div>.
Example:
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p>This is the content!!!</p>
</div>
);
export default App;
2. Attributes in JSX
JSX allows both standard HTML attributes and custom attributes prefixed with data-.
Example:
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute="somevalue">This is the
content!!!</p>
</div>
);
export default App;
3. JavaScript Expressions in JSX
You can use JavaScript expressions inside JSX by enclosing them in {}.
Example (renders 2):
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{1 + 1}</h1>
</div>
);
export default App;
4. Conditional Rendering in JSX
JSX does not support if-else statements directly, but you can use ternary
operators.
Example:
import React from 'react';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>{i === 1 ? 'True!' : 'False'}</h1>
</div>
);
export default App;
5. Styling in JSX
React uses inline styles written in camelCase syntax.
Example:
import React from 'react';
class App extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
return (
<div>
<h1 style={myStyle}>Header</h1>
</div>
);
export default App;
6. JSX Comments
JSX comments must be wrapped in {}.
Example:
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
{// Single-line comment}
{/* Multi-line comment */}
</div>
);
export default App;
7. Naming Conventions in JSX
● HTML elements should be written in lowercase (<div>, <p>, <h1>).
● React components should be written in PascalCase (<MyComponent />).
● Use className instead of class and htmlFor instead of for (since JSX is
JavaScript-based).
Example:
<label htmlFor="inputId">Name:</label>
<input id="inputId" className="input-field" type="text" />
