Some tricky JavaScript Concepts: An Overview
There are some tricky concepts in JavaScript, if you don’t have Idea on them you might suffer a bit. We will have a brief discussion on some of them.
Truthy and Falsy Values
Let’s start with the keyword false. This keyword itself a falsy value. If we set this as a if statement argument it will return false. Same thing for the number 0. this is also a falsy value. Some more falsy values are undefined, null, NaN. An empty String(‘’) is a falsy value. But a string like this (‘ ’)is not a falsy. Because there is a space in between.
== vs ===
== checks whether the value is equal where === checks the type as well. For example, var1 = 0; var2 =’0’
Here var1==var2 will return true but var1===var3 will return false because one is int type and other is string type.
Null Vs Undefined
Null means an empty or non-existent value. Null is assigned, and explicitly means nothing. While undefined typically means a variable has been declared but not defined yet.
‘this’ keyword
The JavaScript this keyword refers to the object it belongs to. It has different values depending on where it is used: … In a function, this refers to the global object. In a function, in strict mode, this is undefined . In an event, this refers to the element that received the event.
Now we’ll talk about some Array Methods which is very handy while working with arrays and APIs.
array.find()
The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.
Example:
const num = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12
array.map()
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
Example:
const number= [1, 4, 9, 16];
// a funtion to map
const map = array1.map(num => num+2);
console.log(map);
// expected output: Array [2, 8, 18, 32]
array.reduce()
The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
Example:
const number= [1, 2, 3, 4];
const reducer = (total, numValue) => total+ numValue;
// 1 + 2 + 3 + 4
console.log(number.reduce(reducer));
// expected output: 10
Now we’ll discuss some random important topics.
Event Bubble
Event Bubble refers to a upward flow of occurred event from a child element to its grandparent element. For example,
<li><a href=”…”><img src=”…” alt=””></a>
if a click event occurs in the img element, it will not occur only to this but also in the parent a element and grand parent li element.
What is an API?
API stands for Application Programming Interface. To Understand API think about a restaurant. When you visit a restaurant, you call the waiter, he takes orders from you and place it in the food preparing section. When the food is ready he serves the food in front of you. This whole process is done through API.
There are some more tricky things to know about JavaScript, we’;; discuss them in later articles. Thank you.