1. Introduction

JavaScript is one of the most important programming languages for React Native development.

React Native uses JavaScript and React concepts to build mobile application interfaces for Android and iOS.

Before learning React Native, developers should understand JavaScript fundamentals such as:

• Variables and constants.

• Data types.

• Operators.

• Conditional statements.

• Loops.

• Functions.

• Arrays.

• Objects.

• ES6 features.

• Array methods.

• JavaScript modules.

In this tutorial, we will understand these concepts with practical examples.

2. What Is JavaScript?

JavaScript is a high-level, dynamically typed programming language.

It is commonly used for:

• Web application development.

• Mobile application development.

• Backend development.

• Interactive user interfaces.

• API communication.

• Application logic.

React Native uses JavaScript to manage application logic, user interactions, data, and component behavior.

Example:

const message = "Hello JavaScript!";

console.log(message);

Output:

Hello JavaScript!

The console.log() method displays information in the console.

3. What Are Variables in JavaScript?

Variables are used to store information that can be accessed and used throughout a program.

JavaScript provides three common variable declaration keywords:

• var

• let

• const

A. var

The var keyword declares a function-scoped variable.

var name = "Rahul";

console.log(name);

Output:

Rahul

B. let

The let keyword declares a block-scoped variable whose value can be reassigned.

let age = 22;

age = 25;

console.log(age);

Output:

25

C. const

The const keyword declares a block-scoped binding that cannot be reassigned.

const city = "Raipur";

console.log(city);

Output:

Raipur

You cannot reassign a const variable.

Difference Between var, let and const

var

• Function-scoped.

• Can be redeclared in the same scope.

• Can be reassigned.

let

• Block-scoped.

• Cannot be redeclared in the same scope.

• Can be reassigned.

const

• Block-scoped.

• Cannot be redeclared in the same scope.

• Cannot be reassigned.

Best Practice: Prefer const by default and use let when a variable needs reassignment. Avoid using var in modern JavaScript code.

4. JavaScript Data Types

A data type defines the kind of value stored in a variable.

JavaScript has primitive data types and object types.

A. String

A string stores text.

const studentName = "Amit";

console.log(studentName);

Output:

Amit

B. Number

The Number type stores integer and decimal numeric values.

const age = 21;
const price = 99.50;

console.log(age);
console.log(price);

C. Boolean

A Boolean stores either true or false.

const isLoggedIn = true;

console.log(isLoggedIn);

D. Undefined

A variable declared without an assigned value has the value undefined.

let username;

console.log(username);

Output:

undefined

E. Null

Null represents an intentional absence of a value.

const selectedUser = null;

console.log(selectedUser);

F. Array

An array stores an ordered collection of values.

const fruits = [
  "Apple",
  "Banana",
  "Mango"
];

console.log(fruits);

G. Object

An object stores information using key-value pairs.

const student = {
  name: "Amit",
  age: 21,
  city: "Raipur"
};

console.log(student);

Check Data Types Using typeof

JavaScript provides the typeof operator to inspect the type of a value.

const name = "Amit";
const age = 21;
const isStudent = true;

console.log(typeof name);
console.log(typeof age);
console.log(typeof isStudent);

Output:

string
number
boolean

Note: typeof null returns "object" due to a historical JavaScript behavior. It does not mean null is actually an object.

5. JavaScript Operators

Operators perform operations on values and variables.

A. Arithmetic Operators

let a = 20;
let b = 10;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);

Output:

30
10
200
2
0

Operators:

• + Addition

• - Subtraction

• * Multiplication

• / Division

• % Remainder

B. Assignment Operators

let total = 10;

total += 5;

console.log(total);

Output:

15

Other assignment operators include:

total -= 2;
total *= 3;
total /= 2;

C. Comparison Operators

Comparison operators compare two values and return a Boolean result.

const x = 10;
const y = 20;

console.log(x > y);
console.log(x < y);
console.log(x === y);
console.log(x !== y);

D. Logical Operators

JavaScript provides three common logical operators:

• && AND

• || OR

• ! NOT

Example:

const age = 22;
const hasID = true;

console.log(age >= 18 && hasID);

Output:

true

6. Conditional Statements

Conditional statements allow a program to make decisions.

A. if Statement

const age = 20;

if (age >= 18) {
  console.log("You are eligible to vote.");
}

B. if...else Statement

const marks = 35;

if (marks >= 40) {
  console.log("Pass");
} else {
  console.log("Fail");
}

Output:

Fail

C. else if Statement

const marks = 85;

if (marks >= 90) {
  console.log("Grade A+");
} else if (marks >= 75) {
  console.log("Grade A");
} else if (marks >= 60) {
  console.log("Grade B");
} else {
  console.log("Needs Improvement");
}

D. switch Statement

A switch statement is useful when comparing one expression against several possible values.

const day = 2;

switch (day) {
  case 1:
    console.log("Monday");
    break;

  case 2:
    console.log("Tuesday");
    break;

  case 3:
    console.log("Wednesday");
    break;

  default:
    console.log("Invalid Day");
}

Output:

Tuesday

7. Loops in JavaScript

Loops execute a block of code repeatedly.

A. for Loop

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Output:

1
2
3
4
5

B. while Loop

let i = 1;

while (i <= 5) {
  console.log(i);

  i++;
}

C. for...of Loop

The for...of loop is useful for iterating over arrays.

const fruits = [
  "Apple",
  "Banana",
  "Mango"
];

for (const fruit of fruits) {
  console.log(fruit);
}

D. break and continue

break terminates a loop.

for (let i = 1; i <= 5; i++) {

  if (i === 3) {
    break;
  }

  console.log(i);
}

Output:

1
2

continue skips the current iteration.

for (let i = 1; i <= 5; i++) {

  if (i === 3) {
    continue;
  }

  console.log(i);
}

Output:

1
2
4
5

8. Functions in JavaScript

A function is a reusable block of code that performs a specific task.

A. Function Declaration

function greet() {
  console.log("Welcome to JavaScript");
}

greet();

Output:

Welcome to JavaScript

B. Function with Parameters

Parameters allow us to pass information into a function.

function greetUser(name) {
  console.log("Hello " + name);
}

greetUser("Amit");

Output:

Hello Amit

C. Function with Return Value

The return statement sends a result back to the code that called the function.

function add(a, b) {
  return a + b;
}

const result = add(10, 20);

console.log(result);

Output:

30

D. Arrow Functions

Arrow functions provide a shorter syntax for writing functions.

const multiply = (a, b) => {
  return a * b;
};

console.log(multiply(5, 4));

Output:

20

For a single expression, you can write:

const square = number => number * number;

console.log(square(5));

Output:

25

Arrow functions are frequently used in React Native event handlers and callbacks.

9. Arrays in JavaScript

An array is a collection that stores multiple values in an ordered sequence.

Example:

const students = [
  "Amit",
  "Rahul",
  "Priya",
  "Neha"
];

console.log(students);

A. Access Array Elements

Array indexing starts from zero.

console.log(students[0]);
console.log(students[1]);
console.log(students[2]);

Output:

Amit
Rahul
Priya

B. Add Elements Using push()

students.push("Rohit");

console.log(students);

C. Remove Elements Using pop()

students.pop();

console.log(students);

D. Find Array Length

console.log(students.length);

E. map() Method

The map() method creates a new array by transforming each element.

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(
  number => number * 2
);

console.log(doubled);

Output:

[2, 4, 6, 8]

F. filter() Method

The filter() method creates a new array containing elements that satisfy a condition.

const numbers = [10, 15, 20, 25, 30];

const result = numbers.filter(
  number => number >= 20
);

console.log(result);

Output:

[20, 25, 30]

G. find() Method

The find() method returns the first element that satisfies a condition.

const numbers = [10, 20, 30, 40];

const result = numbers.find(
  number => number > 20
);

console.log(result);

Output:

30

10. Objects in JavaScript

Objects store related information using properties and values.

Example:

const student = {
  name: "Rahul",
  age: 22,
  course: "React Native",
  city: "Raipur"
};

console.log(student);

A. Access Object Properties

Using dot notation:

console.log(student.name);
console.log(student.age);

Using bracket notation:

console.log(student["course"]);

B. Update Object Properties

student.age = 23;

console.log(student.age);

C. Add a New Property

student.email = "rahul@example.com";

console.log(student);

D. Object Methods

An object can also contain functions.

const user = {
  name: "Amit",

  greet: function() {
    return "Hello " + this.name;
  }
};

console.log(user.greet());

Output:

Hello Amit

Objects are very important in React Native because application data and component properties are frequently represented as objects.

11. Important ES6 Features

ES6 introduced several modern JavaScript features that are widely used in React Native development.

A. Template Literals

Template literals allow variables to be inserted directly into strings.

const name = "Amit";
const age = 22;

const message = `My name is ${name} and I am ${age} years old.`;

console.log(message);

B. Destructuring

Destructuring extracts values from arrays or objects.

Array destructuring:

const colors = ["Red", "Green", "Blue"];

const [first, second] = colors;

console.log(first);
console.log(second);

Object destructuring:

const user = {
  name: "Rahul",
  age: 25
};

const { name, age } = user;

console.log(name);
console.log(age);

C. Spread Operator

The spread operator (...) expands elements from an array or properties from an object.

const firstArray = [1, 2, 3];

const secondArray = [...firstArray, 4, 5];

console.log(secondArray);

Output:

[1, 2, 3, 4, 5]

Object example:

const user = {
  name: "Amit",
  age: 22
};

const updatedUser = {
  ...user,
  city: "Raipur"
};

console.log(updatedUser);

Spread syntax is particularly useful for creating updated state values without directly modifying the original array or object.

D. Default Parameters

function greet(name = "Guest") {
  console.log(`Welcome ${name}`);
}

greet();
greet("Amit");

E. Modules: import and export

JavaScript modules allow code to be divided into reusable files.

In math.js:

export const add = (a, b) => {
  return a + b;
};

In app.js:

import { add } from "./math.js";

console.log(add(10, 20));

Modules help organize large React Native projects.

12. Practical Example: Student Management Data

Now let's combine variables, arrays, objects, functions, and array methods in one practical example.

const students = [
  {
    id: 1,
    name: "Amit",
    marks: 85
  },
  {
    id: 2,
    name: "Rahul",
    marks: 35
  },
  {
    id: 3,
    name: "Priya",
    marks: 92
  },
  {
    id: 4,
    name: "Neha",
    marks: 65
  }
];

function getResult(marks) {
  if (marks >= 40) {
    return "Pass";
  }

  return "Fail";
}

const passedStudents = students.filter(
  student => student.marks >= 40
);

const studentResults = students.map(student => ({
  ...student,
  result: getResult(student.marks)
}));

console.log("All Students:");

console.log(studentResults);

console.log("Passed Students:");

console.log(passedStudents);

This example demonstrates:

• Arrays for storing student records.

• Objects for storing individual student information.

• Functions for calculating results.

• Conditions for checking pass or fail.

• filter() for finding passed students.

• map() for creating updated student records.

• Spread syntax for copying object properties.

These same JavaScript concepts are used when displaying student lists, products, users, and API data in React Native applications.

13. How JavaScript Is Used in React Native

JavaScript handles the logic behind a React Native application.

For example:

User Input

JavaScript processes information entered by users.

Button Clicks

Functions execute when users interact with buttons.

Application State

JavaScript and React Hooks manage changing application data.

API Requests

JavaScript communicates with backend servers.

Lists

Array methods help transform and display application data.

Example:

const products = [
  {
    id: 1,
    name: "Laptop",
    price: 50000
  },
  {
    id: 2,
    name: "Mobile",
    price: 20000
  }
];

const affordableProducts = products.filter(
  product => product.price < 30000
);

console.log(affordableProducts);

This type of filtering logic can be used before displaying products in a React Native application.

14. Practical Exercises

Practice these exercises to strengthen your JavaScript fundamentals.

Exercise 1: Create variables for your name, age, and city. Display them using console.log().

Exercise 2: Write a program that checks whether a number is even or odd.

Exercise 3: Create a function that accepts two numbers and returns their sum.

Exercise 4: Create an array containing five student names and display each name using a loop.

Exercise 5: Create an array of numbers and use filter() to display only numbers greater than 50.

Exercise 6: Create a student object containing name, age, and marks.

Exercise 7: Use map() to increase every number in an array by 10.

Exercise 8: Create a function that checks whether a student has passed or failed.

15. Conclusion

JavaScript is the foundation of React Native application development.

In this tutorial, we learned variables, data types, operators, conditional statements, loops, functions, arrays, objects, array methods, and modern ES6 features.

We also combined these concepts in a practical student management example.

A strong understanding of JavaScript will make it easier to learn React Native components, JSX, props, state, hooks, navigation, and API integration.

16. Frequently Asked Questions

Q1. Is JavaScript necessary for React Native?

Yes. JavaScript fundamentals are essential for understanding React Native application logic.

Q2. Should I learn var, let, and const?

Yes. You should understand all three, but modern JavaScript generally prefers const and let.

Q3. What is the difference between an array and an object?

An array stores an ordered collection of values, while an object stores data using key-value pairs.

Q4. What is an arrow function?

An arrow function is a shorter syntax for defining a JavaScript function.

Q5. What is the map() method?

It creates a new array by transforming each element of an existing array.

Q6. What is the filter() method?

It creates a new array containing elements that satisfy a specified condition.

Q7. Why is destructuring useful?

It makes extracting values from arrays and objects easier and improves code readability.

Q8. What is the spread operator?

The spread operator expands array elements or object properties and is useful for creating updated copies.

Q9. What is the difference between == and ===?

== performs equality comparison with type conversion when needed. === compares without performing that type conversion. Prefer === in most application code.

Q10. What should I understand before learning JSX?

You should be comfortable with variables, functions, arrays, objects, arrow functions, destructuring, and import/export syntax.