DEV Community: chayan999

Top 11 things you should be know about JavaScript

chayan999 — Tue, 11 May 2021 06:43:46 +0000

1.null vs undefined

undefined
undefined means, value of the variable is not defined. JavaScript has a global variable undefined whose value is "undefined" and typeof undefined is also "undefined". Remember, undefined is not a constant or a keyword. undefined is a type with exactly one value: undefined. Assigning a new value to it does not change the value of the type undefined.
8 Ways to get Undefined:

A declared variable without assigning any value to it.
Implicit returns of functions due to missing return statements.
Return statements that do not explicitly return anything.
Lookups of non-existent properties in an object.
Function parameters that have not passed.
Anything that has been set to the value of undefined.
Any expression in the form of void(expression)
The value of the global variable undefined

null

null means empty or non-existent value which is used by programmers to indicate “no value”. null is a primitive value and you can assign null to any variable. null is not an object, it is a primitive value. For example, you cannot add properties to it. Sometimes people wrongly assume that it is an object, because typeof null returns "object".

2.== Vs ===

The simplest way of saying that, == will not check types and === will check whether both sides are of same type. So, == pe to have both in same type and then do the comparison.
=== compares the types and values. Hence, if both sides are not same type, answer is always false. For example, if you are comparing two strings, they must have identical character sets. For other primitives (number, boolean) must share the same value.

Rule for implicit coercion: Comparison by using == does implicit type conversion under the hood. And rules for implicit coercion are as follows-

If both operands are same type use ===
undefined == null
If one operands is string another is number, convert string to number
If one is boolean and another is non-boolean, convert boolean to number and then perform comparison
While comparing a string or number to an object, try to convert the object to a primitive type and then try some to compare

3.True False

now I will discuss about which are true or false

'False' It is true Because, it's a string. Only empty string is false
- ' ' is true Because, it's not an empty string. There is a white space in it.
- {} is true. It's an object. An object without any property is an object will be true.
- []This is also truthy. It's an array object (array is child of object) is truthy.
- '' Only string are also false
- If any variable value Represent undefined value. then this undefine its also false
- All Integer Value will be true but 0 is false.
- If any variable will be undefine by default this value will be false.

4.This

At the time of execution of every function, JavaScript sets a property to the function called this which refer to the current execution context. this is always refer to an object and depends on how function is called. There are different cases where the value of this changing.

In the global context or inside a function this refers to the window object.
While executing a function in the context of an object, the object becomes the value of this
Inside a setTimeout function, the value of this is the window object.
If you use a constructor (by using new keyword) to create an object, the value of this will refer to the newly created object.
You can set the value of this to any arbitrary object by passing the object as the first parameter of bind, call or apply
For dom event handler, value of this would be the element that fired the event

5. Scope

Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code.
In the JavaScript language there are two types of scopes:

Global Scope
Local Scope

6.Global Scope

// the scope is by default global
var name = 'Chayan';

Variables inside the Global scope can be accessed and altered in any other scope.

var name = Chayan;

console.log(name); // logs Chayan

function logName() {
    console.log(name); // 'name' is accessible here and everywhere else
}

logName(); // logs Chayan

7.Local Scope

Variables defined inside a function are in the local scope. And they have a different scope for every call of that function. This means that variables having the same name can be used in different functions. This is because those variables are bound to their respective functions, each having different scopes, and are not accessible in other functions.

8.Block Scope

Block statements like if and switch conditions or for and while loops, unlike functions, don't create a new scope. Variables defined inside of a block statement will remain in the scope they were already in.

if (true) {
    // this 'if' conditional block doesn't create a new scope
    var name = Chayan; // name is still in the global scope
}

console.log(name); // logs Chanyan

9.Difference between bind, call and apply

The major cause of confusion between the call() and apply() methods is how to pass in the additional arguments besides this. And why do we have bind() anyway?
So let’s learn how to easily tell the three apart.
Apply()
apply(this [, [arg1, arg2,...]]): Calls a function with a provided this value. Further arguments are provided as a single array.

Way to remember: “Apply accepts arguments as an Array” or “AA”

Call()
call(this [, arg1, arg2...]): Calls a function with a provided this. Further arguments are provided as a comma separated list

Ways to remember: “Call’s arguments are separated by commas” or “CC”.

Bind()
bind(this): Returns a new function whose this value is bound to the provided value.

Ways to remember: bind() is the only method out of the three that returns a new function altogether. It does not call the function.

10.JavaScript Closure

Closure is one of important concept in JavaScript. It is widely discussed and still confused concept. Let's understand what the closure is.
Closure means that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned. Inner function can access variables and parameters of an outer function. Consider the following example.

function OuterFunction() { 
var outerVariable = 1;
 function InnerFunction() { 
alert(outerVariable); 
} 
InnerFunction();
 }

In the example, InnerFunction() can access outerVariable.
Now, as per the definition above, InnerFunction() can access outerVariable even if it will be executed separately. Consider the following example.

 function OuterFunction() {
 var outerVariable = 100;
 function InnerFunction() {
 alert(outerVariable);
 }
 return InnerFunction;
 }
 var innerFunc = OuterFunction(); 
innerFunc(); // 100

In the above example, return InnerFunction; returns InnerFunction from OuterFunction when you call OuterFunction(). A variable innerFunc reference the InnerFunction() only, not the OuterFunction(). So now, when you call innerFunc(), it can still access outerVariable which is declared in OuterFunction(). This is called Closure.

11.Encapsulation

Encapsulation means information hiding. It’s about hiding as much as possible of the object’s internal parts and exposing a minimal public interface.
The simplest and most elegant way to create encapsulation in JavaScript is using closures. A closure can be created as a function with private state. When creating many closures sharing the same private state, we create an object.

Top tips and tricks about react

chayan999 — Sun, 09 May 2021 19:35:22 +0000

React Hooks

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes.
Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.

When to use a Hooks

If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.
If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.

Rules of Hooks

Hooks are similar to JavaScript functions, but you need to follow these two rules when using them. Hooks rule ensures that all the stateful logic in a component is visible in its source code. These rules are:

Only call Hooks at the top level Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a components renders.
Only call Hooks from React functions You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components. Hooks can also be called from custom Hooks. ##Hooks State Hook state is the new way of declaring a state in React app. Hook uses useState() functional component for setting and retrieving state. Let us understand Hook state with the following example.

import React, { useState } from 'react';  

function CountApp() {  
// Declare a new state variable, which we'll call "count"  
  const [count, setCount] = useState(0);  

  return (  
    <div>  
      <p>You clicked {count} times</p>  
      <button onClick={() => setCount(count + 1)}>  
        Click me  
      </button>  
    </div>  
  );  
}  
export default CountApp;  
import React, { useState } from 'react';  

function CountApp() {  
  // Declare a new state variable, which we'll call "count"  
  const [count, setCount] = useState(0);  

  return (  
    <div>  
      <p>You clicked {count} times</p>  
      <button onClick={() => setCount(count + 1)}>  
        Click me  
      </button>  
    </div>  
  );  
}  
export default CountApp;

Hooks Effect

The Effect Hook allows us to perform side effects (an action) in the function components. It does not use components lifecycle methods which are available in class components. In other words, Effects Hooks are equivalent to componentDidMount(), componentDidUpdate(), and componentWillUnmount() lifecycle methods.
Side effects have common features which the most web applications need to perform, such as:

Updating the DOM,
Fetching and consuming data from a server API,
Setting up a subscription, etc.

JavaScript DOM Nodes

The Document Object Model, or DOM for short, is a platform and language independent model to represent the HTML or XML documents. It defines the logical structure of the documents and the way in which they can be accessed and manipulated by an application program.
In the DOM, all parts of the document, such as elements, attributes, text, etc. are organized in a hierarchical tree-like structure; similar to a family tree in real life that consists of parents and children. In DOM terminology these individual parts of the document are known as nodes.
The Document Object Model that represents HTML document is referred to as HTML DOM. Similarly, the DOM that represents the XML document is referred to as XML DOM.

Tip: The Document Object Model or DOM is, in fact, basically a representation of the various components of the browser and the current Web document (HTML or XML) that can be accessed or manipulated using a scripting language such as JavaScript.

Using Default Props

React supports the notion of defaultProps which you can think of as default function arguments. When you create an element and you did not include a prop with a default then React will substitute that prop with its corresponding value from defaultProps. Flow supports this notion as well. To type default props add a static defaultProps property to your class.

class Button extends React.Component {
  // ...
}

Button.defaultProps = {
  color: 'red'
};
If props.color is not provided, it will be set by default to 'red':
render() {
    return <Button /> ; // props.color will be set to red
  }
If props.color is set to null, it will remain null:
 render() {
    return <Button color={null} /> ; // props.color will remain null
  }

Optimizing Performance

Performance is an important aspect when building webpages and applications. You need to understand how long your users interact with your app, how often they leave, and the response time as well.
The first 10 seconds are vital to determine if a user will leave or continue interacting with your web pages. You must clearly speed up the page, bring value within these 10 seconds, and get the user’s attention to spend more time on your page.
This is where optimizing your page and speeding up the response time becomes important to maintain a good user experience. Node.js is known to produce super-fast performing and scalable web applications. Node.js uses event-driven architecture and non-blocking (asynchronous) tasks that run on a single thread.

now I will highlight some point about optimising performance

Asynchronous
Synchronous
Query Optimization
Caching
Go Session Free
Script Tracing and Logging
Client-side Rendering
Avoid Memory Leaks
Keeping your Code Light and Compact ## State Management One of the biggest and most common problems in is state management. like me are constantly focused on keeping the state object in sync with its view and the DOM representation. Users can interact with the application in many ways and it’s a big task to provide a clean transition from one state to another. State exists in every application, even those made with plain JavaScript. It's not a concept specific to JS libraries; it's necessary to understand for any app you intend to make. Libraries use this concept of state within your applications for your own benefit. ## React’s tree reconciliation Reconciliation is the process through which React updates the DOM. When a component’s state changes, React has to calculate if it is necessary to update the DOM. It does this by creating a virtual DOM and comparing it with the current DOM. In this context, the virtual DOM will contain the new state of the component. Let’s build a simple component that adds two numbers. The numbers will be entered in an input field.

class App extends React.Component {

  state = {
    result: '',
    entry1: '',
    entry2: ''
  }

  handleEntry1 = (event) => {
    this.setState({entry1: event.target.value})
  }

    handleEntry2 = (event) => {
    this.setState({entry2: event.target.value})
  }

  handleAddition = (event) => {
    const firstInt = parseInt(this.state.entry1)
    const secondInt = parseInt(this.state.entry2)
    this.setState({result: firstInt + secondInt })
  }

  render() {
    const { entry1, entry2, result } = this.state
    return(
 <div>  
        <div>
          Result: { result }
        </div>
        <span><input type='text' onChange={this.handleEntry1} /></span>
        <br />
        <br />
        <span><input type='text' onChange={this.handleEntry2} /></span>
        <div>
          <button onClick={this.handleAddition} type='submit'>Add</button>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

First, we’ll need to set up the initial state for the fields, then update the state when a number is entered. The component will look like this:

render() {
    const { entry1, entry2, result } = this.state
    return(
      <div>  
        <div>
          <p>Entry 1: { entry1 }</p>
          <p>Entry 2: { entry2 }</p>
          <p>Result: { result }</p>
        </div>
        <br />
        <div>
          <span>Entry 1: </span>
          <input type='text' onChange={this.handleEntry1} />
        </div>
        <br />
        <div>
          <span>Entry 2: </span>
  <input type='text' onChange={this.handleEntry2} />
        </div>lass App extends React.Component {

  state = {
    result: '',
    entry1: '',
    entry2: ''
  }

  handleEntry1 = (event) => {
    this.setState({entry1: event.target.value})
  }

  handleEntry2 = (event) => {
    this.setState({entry2: event.target.value})
  }

  handleAddition = (event) => {
    const firstInt = parseInt(this.state.entry1)
    const secondInt = parseInt(this.state.entry2)
    this.setState({result: firstInt + secondInt })
  }

        <div>
          <button onClick={this.handleAddition} type='submit'>Add</button>
        </div>
      </div>
    )
  }
}

When an entry is made in the first input field, React creates a new tree. The new tree which is the virtual DOM will contain the new state for entry1. Then, React compares the virtual DOM with the old DOM and, from the comparison, it figures out the difference between both DOMs and makes an update to only the part that is different. A new tree is created each time the state of App component changes — when a value is entered in either of the inputs field, or when the button is clicked.

ReactDOM.render

The render method can be called the primary gateway between React and the DOM.
Let’s say you have defined a React element (), as well as a DOM node to act as a container for that element (div with the ID of “container”). Now, you can use ReactDOM.render to render the element within that container using the syntax given below:
ReactDOM.render(<Calculator />, document.querySelector("#container"))

🔹 Note: If the Calculator component has already been mounted in the div element, calling this again will simply update the DOM based on the difference between the components.

Parameters:

React element
Selected DOM Node
Callback function (optional)

Note: ReactDOM.render requires a React element as the first argument. React elements are generated through React.createElement. Therefore, you may use that syntax or simply invoke a JSX interpretation of the component to get the parameters in the correct format for the arguments. Using React.createElement, our code can be modified to look like this:
ReactDOM.render(React.createElement(Calculator), document.querySelector("#container"))

10 think about JavaScript you should be know

chayan999 — Sat, 08 May 2021 14:18:46 +0000

Hello programmer's today I will discuss about 10 things that are needed in your daily programming. So let's go talked about that.
Error handling
Error is part of programming life. Sometimes we are going to board and upsert for this error.
Now I will share with you how to handle JavaScript errors.
Error handling, "try...catch"
A try / catch block is basically used to handle errors in JavaScript. You use this when you don't want an error in your script to break your code.
While this might look like something you can easily do with an if statement, try/catch gives you a lot of benefits beyond what an if/else statement can do, some of which you will see below.
try{
//... }catch(e){ //... }
A try statement lets you test a block of code for errors.
A catch statement lets you handle that error. For example:
try{ getData() // getData is not defined }catch(error){ alert(error) }
This is basically how a try/catch works. You put your code in the try block, and see if there is an error, JavaScript gives the catch statement control and it just does whatever you say. In this case, it alerts you to the error.
After you coding you get any error, try these things. It will help you.Code quality
Code quality e is an important thing in programming life. You write a code in a project. in the future rewrite the code by other developers. If they do not understand what you are coding . It will be very uncomfortable to them.
Now I will is talked about how to you maintain your code quality.
Block scored declarations
Since the inception of the language, JavaScript developers have used var to declare variables. The keyword var has its quirks, the most problematic of those being the scope of the variables created by using it.
var x = 10 if (true) { var x = 15 // inner declaration overrides declaration in parent scope console.log(x) // prints 15 } console.log(x) // prints 15
Since variables defined with var are not block-scoped, redefining them in a narrower scope affects the value of the outer scope.
Arrow functions
Arrow functions are another very important feature introduced recently to JavaScript. They come bearing many advantages. First and foremost, they make the functional aspects of JavaScript beautiful to look at and simpler to write.

let x = [1, 2, 3, 4] x.map(val => val * 2) // [2, 4, 6, 8] x.filter(val => val % 2 == 0) // [2, 4] x.reduce((acc, val) => acc + val, 0) // 10
In all of the above examples the arrow functions, named after the distinctive arrow =>, replace traditional functions with a concise syntax.
Optional chaining
Imagine a deeply nested data structure like this person object here. Consider you wanted to access the first and last name of this person. You would write this in JavaScript like so:
person = { name: { first: 'Jony', last: 'Day', }, age: 42 } person.name.first // Jony person.name.last // Day
Null-ish coalescing
Before introducing the null-ish coalescing operator, JavaScript developers used the OR operator || to fall back to a default value if the input was absent. This came with a significant caveat that even legitimate but falsy values would result in a fallback to the defaults.
function print(val) { return val ?? 'Missing' }

print(undefined) // 'Missing'
print(null) // 'Missing'

print(0) // 0
print('') // ''
print(false) // false
print(NaN) // NaN
Logical assignment
Let’s say you want to assign a value to a variable if and only if the value is currently null-ish. A logical way to write this would be like so:
if (x === null || x == undefined) { x = y }
If you knew about how short-circuiting works, you might want to replace those 3 lines of code with a more succinct version using the null-ish coalescing operator.
x ?? (x = y) // x = y if x is nullish, else no effect
Coding Style
Naming
Use camelCase for object keys (i.e. "selectors").
Why? We access these keys as properties on the styles object in the component, so it is most convenient to use camelCase.
// bad { 'bangladesh-district': { display: 'none', }, }

// good { bangladeshDistrict: { display: 'none', }, }

Ordering
Define styles after the component.
We use a higher-order component to theme our styles, which is naturally used after the component definition. Passing the styles object directly to this function reduces indirection.

// bad const styles = { container: { display: 'inline-block', }, };

function MyComponent({ styles }) { return ( <div {...css(styles.container)}> Never doubt that a small group of thoughtful, committed citizens can change the world. Indeed, it’s the only thing that ever has. </div> ); }

export default withStyles(() => styles)(MyComponent);

// good function MyComponent({ styles }) { return ( <div {...css(styles.container)}> Never doubt that a small group of thoughtful, committed citizens can change the world. Indeed, it’s the only thing that ever has. </div> ); }

export default withStyles(() => ({ container: { display: 'inline-block', }, }))(MyComponent);

Nesting
Leave a blank line between adjacent blocks at the same indentation level.
// bad
{ bigBang: { display: 'inline-block', '::before': { content: "''", }, }, universe: { border: 'none', }, }

`// good
{
bigBang: {
display: 'inline-block',

'::before': {
  content: "''",

},
},`

universe: { border: 'none', }, }

Inline
Use inline styles for styles that have a high cardinality (e.g. uses the value of a prop) and not for styles that have a low cardinality.
Generating themed stylesheets can be expensive, so they are best for discrete sets of styles.

// bad export default function MyComponent({ spacing }) { return ( <div style={{ display: 'table', margin: spacing }} /> ); }

// good function MyComponent({ styles, spacing }) { return ( <div {...css(styles.periodic, { margin: spacing })} /> ); }
export default withStyles(() => ({ periodic: { display: 'table', }, }))(MyComponent);

Comments
Have you ever written a script or a program in the past only to look at it six months later with no idea what's going on in the code? You probably forgot to do what all programmers tend to forget to do: write comments!
When writing code you may have some complex logic that is confusing, this is a perfect opportunity to include some comments in the code that will explain what is going on. Not only will this help you remember it later on, but if you someone else views your code, they will also be able to understand the code (hopefully)!
Another great thing about comments is the ability for comments to remove bits of code from execution when you are debugging your scripts. This lesson will teach you how to create two types of comments in JavaScript: single line comments and multi-line comments.
creating single line comments

// This is a single line JavaScript comment //document.write("You can't see this!");

creating multi-line comments

Top 10 basic things about JavaScript

chayan999 — Thu, 06 May 2021 15:00:50 +0000

1.Variables
Top 10 basic things about JavaScript
JavaScript is declared using three keywords for variables.
they are let, const, or var.
let/var
The let keyword is used to declare variables in JavaScript. The var keyword can also be used to declare variables, but the key difference between them lies in their scopes. var is function scoped while let is block scoped
Consider the example below:
var
function func() {
// a is known here but not defined.
console.log('value of x here: ', x)
{
var a = 10;
a = a + 5;
}
// a is still known here and has a value.
console.log('value of x after for block: ', x)
}
// a is NOT known here.
func()
let
let apple = "yellow"

if (apple === "yellow"){
let apple = "red"
console.log(apple)
}
console.log(apple)
Using let

apple is declared as "yellow" and redeclared as "blue" . Inside the if block. However, as the output shows, the apple declared inside the if block has scope within that block only. Outside this block, the original apple variable set to "yellow" is available.

Using var
Conversely, in the code that uses var, redeclaration of apple to "bred" inside the if block, also changes the apple declared to "red". This is because variables declared with var are defined globally, regardless of block scope.

2.Operators
+, -, *, / and % In JavaScript this symbol is no is operator. It has a unique Work function. In general this operator work function is similar to general math. In some cases this operator places different roles.
You can use ++ and -- to increment and decrement respectively. These can be used as a prefix or postfix operators.
The + operator also does string concatenation:
'hello' + ' world'; // "hello world"

Multiply two numeric operands. / Divide left operand by right operand. % Modulus operator. Returns remainder of two operands. ++ Increment operator. Increase operand value by one. -- Decrement operator. Decrease value by one.

JavaScript also have Comparison Operators
Example
== Compares the equality of two operands without considering type.
=== compares equality of two operands with type.
!= Compares inequality of two operands.

Checks whether left side value is greater than right side value. If yes then returns true otherwise false.
< hecks whether left operand is less than right operand. If yes then returns true otherwise false.
= Checks whether left operand is greater than or equal to right operand. If yes then returns true otherwise false.
<= Checks whether left operand is less than or equal to right operand. If yes then returns true otherwise false.
3.Objects

Object is a non-primitive data type in JavaScript. It is like any other variable, the only difference is that an object holds multiple values in terms of properties and methods. Properties can hold values of primitive data types and methods are functions.
In JavaScript, an object is a standalone entity because there is no class in JavaScript. However, you can achieve class like functionality using functions. We will learn how to treat a function as a class in the advance JavaScript section.
In JavaScript, an object can be created in two ways:
Object literal
Object constructor

Object literal
The object literal is a simple way of creating an object using { } brackets. You can include key-value pair in { }, where key would be property or method name and value will be value of property of any data type or a function. Use comma (,) to separate multiple key-value pairs.
var persone= { name: ‘rahul, age: 24, class: 11};
Object Constructor
The second way to create an object is with Object Constructor using new keyword. You can attach properties and methods using dot notation. Optionally, you can also create properties using [ ] brackets and specifying property name as string.

var person = new Object(); // Attach properties and methods to person object person.firstName = "Rahul";
person["lastName"] = "Gupta";
person.age = 25;

4.Array
An array is a special type of variable, which can store multiple values using special syntax. Every value is associated with numeric index starting with 0. The following figure illustrates how an array stores values.
An array in JavaScript can be defined and initialized in two ways, array literal and Array constructor syntax.
Array Literal
Array literal syntax is simple. It takes a list of values separated by a comma and enclosed in square brackets.

var = [Abdur, Kamal, Dayal, Here];
Array Constructor
You can initialize an array with Array constructor syntax using new keyword.
The Array constructor has following three forms.
var arrayName = new Array();

var arrayName = new Array(Number length);

var arrayName = new Array(Abdur, Kamal, Dayal, Here);
5.Functions
JavaScript provides functions similar to most of the scripting and programming languages.
In JavaScript, a function allows you to define a block of code, give it a name and then execute it as many times as you want.
A JavaScript function can be defined using function keyword.
The following example shows how to define and call a function in JavaScript.

function ShowMessage() {
alert("Hello World!");
}
ShowMessage();
Function Parameters
A function can have one or more parameters, which will be supplied by the calling code and can be used inside a function. You can pass less or more arguments while calling a function.

8.indexOf in Arrays
The indexOf method takes one argument which is the element. Then it returns the index of the first element it finds in the array which satisfies. This means that even if there are two matches in your array, indexOf will only return one result. The result is the first occurrence in the array.

onst zoo = ['Monkey', 'Horse', 'Dog', 'Bear', 'Fox', 'Dog']; // Skyler just arrived!
const spencersIndex = zoo.indexOf('Dog'); // === 2 same as before

// We start searching after
const skylersIndex = zoo.indexOf('dog', spencersIndex + 1);
// skylersIndex === 5

9.Math floor()
In JavaScript, floor() is a function that is used to return the largest integer value that is less than or equal to a number. In other words, the floor() function rounds a number down and returns an integer value. Because the floor() function is a static function of the Math object, it must be invoked through the placeholder object called Math.
Math.floor(number);
console.log(Math.floor(32.65)); // 32

10.Math ceil()
In JavaScript, ceil() is a function that is used to return the smallest integer value that is greater than or equal to a number. In other words, the ceil() function rounds a number up and returns an integer value. Because the ceil() function is a static function of the Math object, it must be invoked through the placeholder object called Math.
Math.ceil(number);