JavaScript Essentials for React Native - #2 Loops, Functions

JavaScript Essentials for React Native - #2 Loops, Functions

Enhancing Reusability and Modularity: Loops, Functions, and Arrow Functions

Loops

  • Loops are used wherever there is repetition involved.

  • Imagine a world where sending a Happy New Year! email to 5,000 employees is as tedious as having your HR team do it manually. Let's explore how loops in JavaScript can automate this mundane task.

  • Different loops in JavaScript:

    • for: loops through a block of code a number of times.

    • for/in: loops through properties of an object

    • for/of: loop through values in an iterable object

    • while: loops through a block of code, untill the specified condition is true

    • do/while: same as while loop PLUS This loop always runs at least once.

  • Examples of loops

for (let i=0; i<5; i++) {             // for (begin; condition; step) {
    console.log("Happy new year ", i)              // loop body ...
}                                     // }

let student = {id: 1, name: "Piyush"};     // object of form = {key: value}
for (prop in student) {                      // for (key in object) {
    console.log(prop, ' : ', student[prop]);     // loop body ...
}                                          // }

let students = ["Piyush", "Rahul", "Aditya"]; // students is an array 
for (student of students) {
    console.log(student);
}

let j = 0;
while (j<5) {                         // while (condition) {
    console.log("Happy new year ", j);      // loop body ...
    j++;
}                                     // }

let k = 0;
do {                                  // do {
    console.log("Happy new year ", k);  //   loop body ...
    k++;
} while (k<5)                        // } while(condition)

Functions

  • A function is a type of object ( which has lines of code in it), and when this function is called ( or invoked ) executes/runs those lines of code.

  • A function is like a revolver, where the lines of code act as bullets. Calling this function is like firing a bullet, causing the execution of those lines of code.

  • Now, you can you do anything in these lines of code from Complex calculations, or simple logic, taking in input returning output like math functions etc

  • Example of functions:

function helloWorld() {
    console.log("Hello World!");
}

Arrow Functions

  • These got introduced in ES6.

  • Very simple and concise way to create functions

// let func = (arg1, arg2, ..., argN) => expression;
let sum = (num1, num2) => num1 + num2;

Difference between normal functions and arrow functions

  1. Normal Functions:

    • Normal functions have their own this context, which is dynamically determined at runtime based on how the function is called.

    • The this value in a normal function is determined by the object on which the function is invoked.

    • Normal functions have their own arguments object.

    • The super keyword is allowed in normal functions for calling methods on an object's parent.

  2. Arrow Functions:

    • Arrow functions have a lexical this, meaning they capture the this value from the surrounding scope where the arrow function is defined.

    • The this value in an arrow function is inherited from the enclosing lexical context.

    • Arrow functions do not have their own arguments object; they inherit it from the enclosing scope.

    • Arrow functions do not have a separate super binding, so they cannot be used with the super keyword.

In React Native, since we are going to make components using function syntax and not using class syntax. So, we would be using arrow functions only as they make code more clear and concise and since we also do not require the super, this contexts.

Summary

In conclusion, we've covered various aspects of JavaScript, from loops and functions to the modern simplicity of arrow functions. Each of these concepts plays a crucial role in building efficient and readable code.

Thanks for reading!

Resources