DEV Community: murshedkoli

Most Important Concept in JavaScript

murshedkoli — Sat, 08 May 2021 15:16:28 +0000

For Coding with JavaScript, You must know some concepts from them I descript important 10 here.

True or False Value
String: In JavaScript, we can check value true or false event when value is a string. Every String that has length it's true if there is nothing but there are is white space it's a true value, because of white space its length is 1 and an empty string is false.

Number: In javaScript condition 0 is the value of false, every others value is true even it's negative.
Variable: When a variable value is null or NaN it's false.

Double Equal, Triple Equal When two or three values check with double equal (==) then it checks the value and gives the result true or false.

expamle: if(10 == "10"){
console.log("it's true")
}else{
console.log("it's false")
}

result: it's true,

double equal (==) check only value that's why it logs true.

but when we check with triple equal (===) its log false. because the first 10 is a number and the second "10" is a string their type is not the same triple equal check the value and check the type their value is same but their type is different that's why
It logs false.

expamle: if(10 === "10"){
console.log("it's true")
}else{
console.log("it's false")
}

result: it's false,

Scope there is two scopes in JavaScript, 1. block Scope, 2. Global Scope. when we declare a variable in a function with const or let then the variable is block Scope variable, it's can not be found from outside the function.

when we declare a variable outside of the function that is global scope we can use it In under the function or outside of the function.

if we declare a variable in a function with the word "var" then we can access the variable from outside of the function, that case when starting the javaScript scan the whole page and the variable declared with "var" it converts to global scope that's why we can access.

This Keyword
when we call this keyword in any function then this means the function, this keyword represents this parent.
Asynchronous
JavaScript works synchronize or serial wise, but we can make it asynchronous wise, for that we can use setTimeout.
with setTimeout we can call a function after a certain time. when we use it javaScript is no longer synchronous.

JavaScript with another angle

murshedkoli — Fri, 07 May 2021 15:04:32 +0000

Framework or library First of all, JavaScript is not a Framework it's a library. the library is smaller than a framework. JavaScript Frameworks Example Is Angular, Vue Js.
JSX
JSX is a way to write JavaScript and Html Code at a time, for jSX we can mix javascript and HTML, CSS. without jSX we can't write HTML code in JavaScript and JavaScript code in HTML, It's possible for jSX.
React Data goes Down
Data in react always goes up to down, for example, we can pass data from the parent to child component with props.
How to send data to parent
In react we can pass data from child to parant, but we can't do this with props we can pass function as props and help of the function we can pass data child to parent component.
Conditional Rendering
In react we can easy do conditional rendering, for doing this we can declare a state after that we write our code depense on state. if change state value code render different element.
Components
Component is very helpful for write clean and readable coding, because of component we can write code in a page and named it after that we can use it again and again.
Hooks
React hooks originally is special function, all hooks start with word "use". hooks can use only in function component, we can't use it in class components.
Virtual DOM diffing
when some change is made by user the file is re-filtered and built a new Virtual DOM, now match old and new DOM for find difference. after find difference changes is applied to the actual DOM.
State
When a component need data than state is very useful. after fetch data we can store in state and use the data when need it. we can change state data using function.
keep the state small
for best coding experience and clean code always keep state small.

Advance JavaScript ( new for me)

murshedkoli — Thu, 06 May 2021 15:44:28 +0000

•JavaScript try-catch

1.The try statement allows to the definition of a block code to be tested for errors while it is run, normally it interrupts the full application and shows errors, if run same code with the Try statement it is not happening.

2.The catch statement allows showing if any error occurs in the try block.

•Error handling
We can give a custom error with the throw statement.

•Coding style
Today I learn the right way to write JavaScript Code. When we add one space and when we add two spaces, likes. After for/if/while we add one space.

•Var Declarations and Hoisting
Write a variable name without value it’s called variable declaration and write a variable with the value it’s called variable initialization.
Ex: var a ;
Var a = 10;
When a JavaScript file run it scan whole page and all variable get in the top of the page, that’s why we can use a variable before it has been declared.

•Cross Browser Testing
Cross-browser testing means testing how to perform our site on all of the web browsers, find the bug and fix it. It happens sometimes code not run the same in all of the web browsers, sometime we should add some CSS code to fix the UI.

•Block Level Declarations
For block level declarations variable should be declare with “let” or “const” , this two keyword make a variable block level. This variable can not be accessible outside the block.

•Function with Default Parameter Values

JavaScript Function has one default value "undefined"
when we do multiplay or add or divided if no value provided then the default value would be undefined.
Working with Unnamed Parameters
Unnamed parameter use for less coding, when function parameter passed without necessarily defining each parameter individually, now passed a parameter with … is means rest of all parameter. We see it in creating Private Route using React Router Dom in React.

there ...rest is the parameter.
see it from here. https://reactrouter.com/web/example/auth-workflow

•The Spread Operator
When All elements to need from an array or object then a spread operator used.
Example: const friends= [nazmul, murshed, hridoy, delowar, nadim, emran];

Const friends2 = […frends];

Console.log(friends2); // [nazmul, murshed, hridoy, delowar, nadim, emran];