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
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.
Arrow Functions:
Arrow functions have a lexical
this
, meaning they capture thethis
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 thesuper
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!