JavaScript Fundamentals -01
Hello! 👋 I'm a UI/UX Designer and Software Developer with a strong interest in Open Source contributions and DSA Problem Solving. I am also enthusiastic about DevOps practices and AI/ML.
Introduction to JavaScript
JavaScript is a High-Level, Object-Oriented, Multi-Paradigm Programming language.
High-level: No need to worry about complex stuff like type checking and memory management.
Object-Oriented: Based on objects for storing most kinds of data.
Multi-Paradigm: Different styles of programming.
Programming Language: A tool that converts our code to computer-understandable code.
Role of Js in Web Development
JavaScript allows developers to add dynamic and interactive effects to any webpage. We also use Js to manipulate the content and styles, and load data from remote servers and entire applications in the browser which we call web applications.
JavaScript works to provide functionality on a webpage like as a verb works in a sentence.
It is used to develop Frontend web applications with tools like AngularJs, ReactJs and VueJs.
It is used to develop Backend web applications with tools like NodeJs, and Express.
It is used to develop Native mobile applications with tools like Ionic, React-Native and
It is also used to develop native desktop applications with tools like Electron.
“Hello World” in Js
To write Hello World in Js, Open your browser’s developer tools,
To open developer tools hit:
For mac:
Option + ⌘ + JFor Windows:
Shift + CTRL + JFor Linux:
Shift + CTRL + J
Then some code into the console like this👇
alert("Hello World!");
You also can do more like
let js = 'amazing'
if(js==='amazing') alert('JavaSctipt is FUN!')
\Please press enter after each write-line*
Linking of JS file with HTML
- By using
<script>tag inside<head>element in yourHTMLfile (Internal Linking).
<script>
let js="amazing";
if(js==="amazing") alert("JavaScript is Fun!");
console.log(20+60-25+40);
// output: 95
</script>
- By creating separate script files in the project folder and adding write
<script>tag just above the body element(External Linking).
<script src="script.js"></script>
Value and variables
In JavaScript, a variable is a container that holds a value. The value of a variable can be any JavaScript data type, such as a string, number, boolean, object, or function.
To declare a variable in JavaScript, you can use the "let", "const", or "var" keyword, followed by a variable name:
let myVariable;
const myConstant = "Hello";
var myVar;
Keep in mind, In general developers like to write camelCase naming conventions during writing javascript.
Datatypes in Js
Every value can have different types depending on the type of data that we want to hold. A value is either an object or a primitive value.
The 7 Primitive Datatypes
Number: Floating point numbers 👉 Used for decimals and integers
let age = 23;String: Sequence of characters 👉 Used for text
let name = "Rajeev";Boolean: Logical type that can only be true or false 👉 Used for making decisions
let fullAge = true;Undefined: Value taken by a variable that is not yet defined (‘empty value’)
let childName;Null: Also means ‘empty value’
Symbol (ES2015): Value that is unique and cannot be changed [Not useful for now]
BigInt (ES2020): Larger integers than the Number type can hold
☝ JavaScript has dynamic typing: We do not have to manually define the data type of the value stored in a variable. Instead, data types are determined automatically.
To check the type of any variable use typeof operator
let javaScriptIsFun = true;
console. log (typeof javaScriptIsFun)
// output: boolean
javaScriptIsFun = "YES!";
console. log (typeof javaScriptIsFun)
// output: string
let year;
console.log(typeof year, year);
//output: undefined undefined
When we check the type of null
console.log(typeof null);then it shows the object as output which doesn't make any sense at all so it is an error or bug in Javascript. However, this bug was never corrected for legacy reasons but now it's not an object it should show null.
Let const and var
let: It creates a variable that we can reassign the variable value or mutate the value during the execution time.
let age=30;
console.log(age); //30
age=31;
console.log(age); //31
const: It creates a variable that we can not reassign or an immutable variable.
- We can not create empty
constvariables.
const birthYear=2001;
birthYear=2003;
// Now it shows TypeError
var: It is the old way of defining variables prior to ES6.It works pretty much same as let but below the surface there are many difference
var job = 'programmer';
console.log(job); //programmer
job = 'designer';
console.log(job); //designer
By default, always just use
constandletwhen you sured that the value of the variable needs to be change at some point in your code butvarshould be completely avoided.
So stay tuned with Fundamentals of JavaScript-02
