JavaScript Essentials for React Native - #1 Introduction

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 usinglet, or const keywords.

  • 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 true or false.

      • 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.

Resources

https://javascript.info/intro

https://en.wikipedia.org/wiki/Node.js

https://nodejs.org/en/docs