JavaScript Essentials for React Native - #1 Introduction
Basics You Can't Afford to Ignore!
Hi! welcome the first blog of this series.
Overview of JavaScript
JavaScript was initially created to "make web pages alive".
The programs in this language are called scripts. They can be written in a web page's HTML and run automatically as the page loads.
Scripts are provided and executed as plain text. They don't need special preparation or compilation to run.
So, JavaScript is very different from another language called Java.
Today, JavaScript can execute not only in the browser, but also on the server or actually on any device that has a special program called the JavaScript engine.
So, browser has these engines called "JavaScript virtual machine" to run JavaScript code. These engines read JavaScript code, converts it into machine code and then machine code runs.
Node.js is a runtime environment and has a "JavaScript engine" called the V8 JavaScript engine that executes JavaScript code outside a web browser. Meaning Node.JS helps you run JavaScript code on Windows, Linux, Unix, macOS and more.
JavaScript & React Native
JavaScript is the primary development language for React Native logic.
React Native translates JavaScript code into native UI elements through platform-specific rendering engines.
Communication between JavaScript and native modules happens through a bridge (or JSI in the new architecture).
Weakly Typed Nature
What is Weak Typing ?
JavaScript doesn't strictly define data types upfront like other languages ( e.g int, string in C++, Java etc ) and allows data types to change during execution. -
This flexibility offers advantages like no need declare types of variables and functions so results in writing less code, leading to faster initial development.
Cons
This results in runtime errors in cause of type mismatches causing unexpected crashes and debugging difficulties.
Large codebases can become harder to understand and maintain without clear type definitions.
Object Oriented Nature
While JavaScript is not purely object oriented like Java or C++, it does incorporate prototypal inheritance, which provides object oriented like functionalities.
Prototypal Inheritance:
Instead of classes, JavaScript uses prototypes to define object behavior. Each object has a hidden internal property called
[[Prototype]]that links it to another object (its prototype).Properties and methods defined on the prototype are inherited by all objects linked to it.
This allows for creating reusable components with shared functionality.
Variables and Datatypes
I'll provide a comprehensive overview of variables and data types in JavaScript:
Variables:
Containers for storing data values.
Declared using
let, orconstkeywords.Each has different scoping rules:
let: Block-scoped (accessible within the block where it's declared).const: Block-scoped and cannot be reassigned after initial declaration.
Data Types:
Define the kind of data a variable can hold.
JavaScript has two main categories:
Primitive Data Types:
Number: Represents numeric values (e.g., 10, 3.14, -5).
String: text enclosed in quotes (e.g., "Hello, world!").
Boolean: For logical values, either
trueorfalse.Null: intentional absence of a value.
Undefined: For a variable that has been declared but not assigned a value.
BigInt: For large integers.
Symbol: Unique and immutable identifiers.
Non-Primitive Data Types (Objects):
Objects: Collection of key-value pairs, used to store structured data.
Arrays: Ordered lists of values, accessed by numerical indexes.
Functions: Blocks of code that can be executed.
Now let's write a piece of code, in which we will create some variables, initialize them with some values and finally print the output using console.log()
// Code to calculate area of a circle.
const PI = 3.14; // Created a constant named "PI"
// and initialised it's value to 3.14
let shape = "CIRCLE"; // Created another variable named "shape"
// and initialised it's value to string - CIRCLE
let radius = 10;
let area = PI * radius * radius; // Formula to calculate area of a circle
console.log('Area of a circle with radius = ' + radius + ' , area = ' +
area );
Now, printing the datatypes of the above created variables using typeof operator.
// In continuation with above code.
console.log(typeof PI); // number
console.log(typeof shape); // string
console.log(typeof radius); // number
If-else statements
If-else statements are also called conditional statements.
Meaning certain lines of code will only run, if the mentioned condition is true
In our example, we are going to write code to find whether the given number is odd or even.
// code to find odd / even number
let number = 2;
if ( number % 2 == 0 ) { // % means remainder
// if on dividing with 2, if remainder is 0, then it is even else odd
console.log('Even number');
} else {
console.log('Odd number');
}
Ternary Operators
We can re-write the above mentioned conditional statements in a more short / concise way using ternary operators.
Same example, but using ternary operators.
let number = 2;
// is_condition_true ? TRUE_VALUE else FALSE_VALUE
const result = number % 2 == 0 ? "Even number" : "Odd number";
console.log(result);
Conclusion
In this we covered the overview of JavaScript, weakly typed nature, object oriented nature, variables and datatypes, if else-statements and ternary operators.
Thanks for reading! If you have any doubts or feedback feel free to comment!
See you in the next second part of this series.
