The deep learning of javascript…
By: Towhid Hossain
Tags: Filters, Find, Arrays, Maps, Hooks

Never expect an end of learning a programming language. We couldn’t cover the whole area of a language but essential parts. For example, we even don’t know all things about our mother tongue, we just know what we need in our daily life. Same here for programming language. We need to know the core concepts, understand to apply them in various sectors in an effective and efficient way. For smooth operation of code, we have to practice with advanced concepts after learning the basics.

Among them, javascript has a lot of cool features consisting of advanced methods, functions and so on. Our current topics will be some array methods, their uses, hooks and values. Let’s dive into it.

Array: Array is like a global object which contains elements. Developers used to apply arrays according to the project. We can select a specific element inside of an array, we can get a whole modified array from the previous array, remove an element from the main array as well. More will come about array methods below.

Array.map(): map() method is a time and space consuming method to return a new array with a line of codes. It calls a function iterate on each element of the main array and returns a new array, which doesn't make a change on the main array.

array.map()

2. Array.filter(): Earlier we have used loop method to find data form object property conditionally. Nowadays, the filter() method made it simple and shorter. With es6, it provides cleaner codes than before.

array.filter()

3. Array.find(): Another life easier method of the array, where the specific value that matched the condition, iterates each element of the main array and returns the first element, which fulfilled the condition.

array.find()

Truthy and Falsy Value: Both of the values are boolean operators in javascript. We can find six types of falsy value out there: false, null, empty string(‘’), undefined, NaN, number 0 (+0 or -0). Apart from these expressions, the rest of the values are called truthy.

truthy and falsy.

(==) vs (===): Both operators are using to compare values, data types. Equal operator (==) used to compare only the value of two elements. On the hand, the strict equal operator (===) used to compare both value and data types.

5 == “5”; //true

10 === “10”; // false

Null vs Undefined: If we declare a variable but not initialize it, then it returns an undefined value. When we assign a variable which has no value will return null.

null vs undefined

Implicit Conversion: It helps functions as well as objects to convert any value into the actual type. With this conversion, we can convert a value to a string or to a number. Unary operator (+) used to convert a value to a number, also concat string with a number.

For example, if we write 1+ “2", then it will return 12 (as a string). But if we write 1 + + “2”, it will return 3 (as a number).

Hooks: Earlier in reactjs, the function used less than the class in components because of its limited features. After releasing hooks to react, a function could be applied instead of classes. Hooks are like a chain to link up with components each other, used to give stateful component. Usually, hooks in react start with the use keyword like useState, useEffect, useHistory, useLocation etc.

useState: This state used to return a stateful component, where the value changes dynamically. The useState hook contains a value for state and a function to update the value.

useState hook. source: reactjs.org/docs/hooks-reference.html#usestate

2. useEffect : Rendering a component asynchronously, we used to apply the useEffect hook. It runs the function inside the body and display on screen after rendering.

useEffect hook. source: reactjs.org/docs/hooks-reference.html#useeffect

3. useContext: In react, passing a value from parent component to child component is easy, but if we need to send data from the upper tree component, then useContext hook is here to make it simple. With the help of this hook, we can get data from any component to another component.

So, as a beginner, this is my progress during my learning period. Trying to improve my learning capability. Please give your worth feedback and suggestion, how I can increase my learning range and make it more effective. Thanks for your endurance.