DEV Community: Iftekharul Islam

Truthy and Falsy values in Javascript

Iftekharul Islam — Sat, 08 May 2021 12:19:39 +0000

We are going to discuss an important javascript topic for interviews that can help you also understand a basic of Javascript.

Truthy and Falsy values

In javascript when you declare a variable with some value except 0 Javascript should consider this as a true value and if the value is 0 Javascript will consider this as false.

const score = 20;

if(score){
console.log("It is true")
}
else{
console.log("It is false")
}
// Output : It is true
const duck = 0;

if(duck){
console.log("It is true")
}
else{
console.log("It is false")
}
// Output : It is false

So Javascript will consider 0 as false and other values as true.

If you declare a string with its length < 0 then javascript will consider this as true, otherwise if you declare an empty string it will be considered as false.

const name1 = "Alvee";

if(name1){
console.log("It is true")
}
else{
console.log("It is false")
}
// Output : It is true
const name2 = "";

if(name2){
console.log("It is true")
}
else{
console.log("It is false")
}
// Output : It is false

If you don't define a variable Javascript will consider it as false.

let name;

if(name){
console.log("It is true")
}
else{
console.log("It is false")
}
// Output : It is false

If you define a variable as Null Javascript will consider it as false.

let name = null;

if(name){
console.log("It is true")
}
else{
console.log("It is false")
}
// Output : It is false

If you also define a variable with NaN Javascript will consider it as false.

let value = NaN ;

if(value){
console.log("It is true")
}
else{
console.log("It is false")
}
// Output : It is false

We saw that the empty string was false, but if you declare an empty array or object it will be considered as true value.

const array = [];

if(array){
console.log("It is true")
}
else{
console.log("It is false")
}
// Output : It is true

const object = {};

if(object){
console.log("It is true")
}
else{
console.log("It is false")
}
// Output : It is true

Besides all these, if you declare a value as false, there what can Javascript do!

const value = false;

if(value){
console.log("It is true")
}
else{
console.log("It is false")
}
// Output : It is false

So we can say that if you declare a variable with the value of undefined, null, NaN, 0, "" the output will be false.

The following values are always falsy:

false
0 (zero)
'' or "" (empty string)
null
undefined
NaN

Everything else is truthy. That includes:

'0' (a string containing a single zero)
'false' (a string containing the text “false”)
{} (an empty object)
function(){} (an “empty” function)

you can also check out this article I found informative

Let's talk with React!

Iftekharul Islam — Fri, 07 May 2021 14:20:52 +0000

Hmm! React
React is a JavaScript library for building user interfaces. Don't quarrel about it library or framework.
It is not exactly a “framework”. A framework is a complete solution but react is not a complete solution and you will often need to use more libraries with React to form any solution.

Both frameworks and libraries are code written by someone else that is used to help solve everyone's common problems.
React is also makes our life easier to write a single page application.

React introduced the smart idea of a virtual DOM that can be used to reconcile the actual DOM.
it introduced the smart idea of a virtual DOM that can be used to reconcile the actual DOM.

React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.

you can check the overview of react

Initialization

Create React App is a comfortable environment for learning React and is the best way to start building a new single-page application in React.

The initialization of React is so easy but you’ll need to have Node >= 10.16 and npm >= 5.6 on your machine. To create a project, run:

npx create-react-app my-app
cd my-app
npm start

If you’re interested in playing around with React, you can use an online code playground. Try a Hello World template on CodePen, CodeSandbox, or Stackblitz.

Here are what I consider to be React prerequisites.

Basic knowledge of HTML & CSS.
Familiar with JavaScript and programming.
Basic understanding of the DOM.
Basic knowledge of ES6 syntax and features.
Node.js and npm installed globally.

That's just the beginning you have to go a lot of path with React

I'm giving you a simple example of react code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Components

import React from 'react'

const App = () => {

    return (
      <div>
        <h1>Hello, React!</h1>
      </div>
    )
}


export default App;

you can get the documentation

Got Stuck?
Ask a question, Existing question

You want Community?

There are many online forums for discussion about best practices and application architecture as well as the future of React.
If you have an answerable code-level question, Stack Overflow is usually a better fit.

Each community consists of many thousands of React users.

DEV’s React community
Hashnode’s React community
Reactiflux online chat
Reddit’s React community
Spectrum’s React community

Block Bindings in Javascript(Es6)

Iftekharul Islam — Thu, 06 May 2021 15:03:38 +0000

Block Bindings

Declaration of variable in javascript is different than other languages like mostly c-based languages. You have to declare a variable to use it first, but it doesn't need to declare it before in the case of javascript. ECMAScript 6 makes it easier to control the use of the variable.

Block
You have understood the theory of block in javascript.
Blocks are created when you declare a function, inside the function there created a block. Or { } inside this parenthesis there also created a block.

var Declaration

When you use var in javascript, it declares this variable globally. And you can access this variable outside of the block also.

const function = (condition) => {

    if (condition) {
        var value = "true";

        // other code

        return value;
    } else {

        // value exists here with a value of undefined

        return null;
    }

        // value exists here with a value of undefined
}

It means the variable value still can be accessible from else part or the outside of the block.
Oh, javascript doesn't need to declare the value before using it. But in case if you declare the value before declaring the function the case is similar.

Using let instead of var

The use of let is exactly the same use as var. The work is similar but the scope of let is limited to the block you use, you can't access the variable which is declare using let from outside of the block.

const function = (condition) => {

    if (condition) {
        let value = "true";

        // other code

        return value;
    } else {

        // value doesn't exist here

        return null;
    }

        // value doesn't exist here
}

Re declaration problem

If you declare a variable using var and let in the same block with the same name, it will cause an error, but you can use a variable with a similar name in a different block with let.

var value = 45;

// Syntax error
let value = 70;

On the other hand, it will not cause any error though it's declared using a similar name but in a different block,

var value = 30;

// Does not cause an error
if (condition) {

    let value = 40;

    // more code
}

const declaration

We can also declare variables in ECMAScript 6 with the const declaration syntax. Variables declared using const are considered constants, so their values cannot be changed once set. For this reason, every const variable must be given a value on the declaration, as shown in this example:

// Valid use of constant
const use = 30;

// Syntax error: missing value
const reuse;

const variables are also bonded in blocks like let.

Practise of block-bindings
Before ECMAScript 6 comes with the concept of block bindings and the use of var, let, const it was really a problem for the developer to deal with a global variable like var. But when this update comes, all the developers accepted it cordially and it gained popularity. Developers use const by default and only use let when you know a variable's value needs to change.

The current best practice for block bindings is developers will use const by default and only use let when they know a variable's value needs to change. This ensures a basic level of immutability in code that can help prevent certain types of errors.

you can read more from here : click me

Some basic Javascript string prototype you should know

Iftekharul Islam — Wed, 05 May 2021 15:23:46 +0000

Let's start
We all know that a string is traditionally a sequence of characters, either as a literal constant or as some kind of variable. Strings in JavaScript are sequences of Unicode characters. We are not going to discuss Unicode characters today.

In javascript, we write strings inside of single or double-quotes.
like,

let str1 = "hello"

here, hello inside double quotes are string.

Today we are going to discuss some javascript important string prototypes.

charAt()

If you want to know a character's string by using its location you have to use charAt() prototype.
you have to put the index number as a parameter then boom!
Like,

const str1 = "A good boy"
console.log(str1.charAt(4))

Output : "o"

concat()

The concat() prototype concatenates the string arguments to the calling string and returns a new string. In this new string, you'll see the separate strings are in together.

Like,

const str1 = 'Bill';
const str2 = 'Gates';

console.log(str1.concat(' ', str2));

output: "Bill Gates"

console.log(str2.concat(', ', str1));

output: "Gates, Bill"

includes()

Sometimes we want to know whether a word is in the string or not.
So includes() method performs a case-sensitive search. It determines whether one string may be found within another string, returning true or false as appropriate.

Example,

const order = "Order of Finix"
const word = "of"
console.log(order.includes(word))

Output: true

indexof()

If you want to know the location of a specific word or letter or value inside a string you should use indexOf().

indexOf() helps to return the index within the calling String object of the specified value, starting the search at fromIndex.
It returns -1 if the value is absent or not found.

Example,

const order = "Order of Finix"
const word = "of"
console.log(order.indexOf(word))

Output: 6

endsWith()

By using endsWith() prototype we can determine whether a string ends with the characters of an expected string or not. It returns true or false as appropriate.

Example,

const order = "Order of Finix"
console.log(order.endsWith("Finix"))

Output: true

lastIndexOf()

This lastIndexOf() method returns the index within the String object of the specified value which occurred last, searching backward from fromIndex.
It returns -1 if the value is not found.

Example,

const order = "Order of Finix"
const ind = 'of'
console.log(order.lastIndexOf(ind))

Output: 6

replace()

If you want to replace a specific word or letter or RegExp with a string you have to use replace() prototype. This prototype takes two parameters, the first parameter is which you want to replace and the second parameter is by which word or letter you want to replace.

Example,

const star = "twinkle twinkle little star"
console.log(star.replace('little','big'))

Output: "twinkle twinkle big star"

slice()

The slice() method extracts a section of a string and returns it as a new string. It doesn't modify the original string.

Example,

const star = "twinkle twinkle little star"
console.log(star.slice(7))

Output: " twinkle little star"

console.log(star.slice(7, 14))

Output: " twinkl"

console.log(star.slice(-14))

Output: "le little star"

split()

If you want to divide a String into an ordered list of substrings, put these substrings into an array, and return the array. The division is done by searching for a pattern; where the pattern is provided as the first parameter in the method's call.

Example,

const star = "twinkle twinkle little star"
console.log(star.split(' '))

Output: Array ["twinkle", "twinkle", "little", "star"]

toLowerCase()

The toLowerCase() prototype returns the calling string value converted to lower case.

Example,

const country = "BANGLADESH"
console.log(country .toLowerCase())

Output: "bangladesh"

toUpperCase()

The toUpperCase() prototype returns the calling string value converted to the Upper case.

Example,

const country = "bangladesh"
console.log(country .toUpperCase())

Output: "BANGLADESH"