DEV Community: Fahim Zada

Difference Between Error and Exception With Examples

Fahim Zada — Sun, 21 Aug 2022 14:32:00 +0000

Errors occur when something wrong or invalid happens in the code or the program's environment in which it is running. It can be syntax, logical or runtime errors, and from the environment, it can be a lack of resources or version incompatibilities etc.
Exceptions are thrown by a programmer when certain conditions in the code are being met by using the throw keyword. And we can catch the exception by using the try and catch block.

Errors

Serious problems you should not try to catch or handle them
It is not possible to recover from an error.
Errors occur at runtime. That is why they are unknown to a compiler. Hence they are classified as “unchecked exceptions.”
Unknown to a programmer

Exceptions

Known to a programmer and can be guessed
Caused by the application itself
Exceptions can be “checked” or “unchecked.”
The try and catch blocks can handle exceptions and recover the application from them.

//You can copy and paste the code into your console tab
//You can throw a string, object or even error

//Throwing string message
try {
    throw "throwing string"
} catch (ex) {
    console.log(ex);
}

//VM54:4 throwing string

//Throwing an error
try {
    throw new Error("throwing string")
} catch (ex) {
    console.log(ex);
}

/*VM158:4 Error: throwing string
    at <anonymous>:2:11
*/

//As of Echma 2022 we can use the cause with error
try {
    throw new Error("throwing string", {cause: "Just like that"})
} catch (ex) {
    console.log(ex, ex.cause);
}

/*VM342:4 Error: throwing string
    at <anonymous>:2:11 'Just like that'
*/

//throwing object
try {
    throw {msg: "Condition met"}
} catch (ex) {
    console.log(ex);
}

//VM517:4 {msg: 'Condition met'}

//Of course we can use finally too

try {
    throw "With finally"
} catch (ex) {
    console.log(ex);
} finally {
    console.log("I'm going to run no matter what!")
}

/*VM5528:4 With finally
VM5528:6 I'm going to run no matter what!*/

Please comment if you want to discuss it further or if I missed something.

Thanks for reading.

JavaScript addEventListener() Silly Mistake To Avoid

Fahim Zada — Sun, 14 Aug 2022 11:09:00 +0000

Hi there,
Using addEventListener() for handling the event is a better way. You can define the function separately, which you want to execute upon the event that occurred on your desired element.

Now you have the freedom to use that function for other elements of events, ensuring the reusability. However, some beginners tend to make a mistake by invoking it directly and passing it to addEventListener(). Here is an example explaining different ways and scenarios.

const btn = document.querySelector(".btn")

//This way, if these statements are required only for this 
//Particular element event
btn.addEventListener("click", () => {
  console.log("I'm clicked")
})

//Reusable function
const reusable = () => {
  console.log("I'm reusable function for events")
} 

//Here comes the mistake, You called it directly
btn.addEventListener("click", reusable())
//"I'm reusable function for events."
//Function executed without an event occurring
//Nothing will happen on click event

//Multiple Ways to fix it

//Don't call it directly
btn.addEventListener("click", reusable)

//Returning it inside another function
btn.addEventListener("click", ()=>reusable())

//Using bind function
btn.addEventListener("click", reusable.bind(null))

Thanks for reading.

Did You Know JSON.stringify() Eat This Specific Value

Fahim Zada — Sun, 14 Aug 2022 10:17:00 +0000

Hi there,
Have you ever encountered a situation when trying to convert an object containing a function as a value to a string using JSON.stringify()? and noticed by printing the resultant value that the key containing the function value is gone along with its key?

Well, that is because JSON.stringify() marks it null. It can not convert a function value to a string, thus keeping it null. Now your whole object is changed. Here is an example if you don't know how to include it or convert it back to function.

const obj = {
  author: "Fahim Zada",
  love: "0's and 1's",
  eat: () => console.log("Red Apple")
}

console.log(JSON.stringify(obj)) 
//"{'author':'Fahim Zada','love':'0's and 1's'}"
//Let us try to fix it by converting that key to string
obj.eat = obj.eat.toString()
console.log(JSON.stringify(obj))
//"{'author':'Fahim Zada','love':'0's and 1's','eat':'() => console.log(\'Red Apple\')'}"

//Converting back to js object 
const stringify = JSON.stringify(obj)
const convert = JSON.parse(stringify)
//Now you can access primitive values as normal
console.log(convert.author) 
//"Fahim Zada"
//For our function, we will do this with "new" keyword or without
//Invoking the function with ()
//Will return our function and now we can call it
const myFunc = new Function("return " + convert.eat)()
console.log(myFunc())

Thanks for reading.

How To Make compose() and pipe() In Javascript

Fahim Zada — Sun, 14 Aug 2022 06:56:19 +0000

Hi there,
The most encountered situation while building a complex functionality is where we need to pass a value to the function, and the return (result) value is required input for another function . It might sound okay if you have 2 - 3 functions, but when you have more than that, your code becomes messy and non-readable. To solve this issue, here comes the function composition.

It is a mechanism for combining functions, in which the output of each function is passed into the next one, and the output of the last function is the final result. Applicable to every programming language, not just JavaScript.

We can do it in two different ways. However, one thing to keep in mind is that the sequence matter, and it will change your final result.

Compose

Passing your functions in the right to left order for execution. Example (f4,f3,f2,f1 )

//Compose function using reduceRight()
const compose = (...args) => (value) => args.reduceRight((prev, fn) => fn(prev), value);
// Increment the passed value by 2
const increment = (n) => n + 2;
// Triples the passed value
const double = (n) => n * 3;
//Divide it by 2
const divide = (n) => n / 2;
// Using our composition function
console.log(compose(divide, double, increment)(2));  // 6

Pipe

Passing your functions in the left to right order for execution. Example (f1,f2,f3,f4 )

//pipe function using reduce(), default left to right execution
const pipe = (...args) => (value) => args.reduce((prev, fn) => fn(prev), value);
// Increment the passed value by 2
const increment = (n) => n + 2;
// Triples the passed value
const double = (n) => n * 3;
//Divide it by 2
const divide = (n) => n / 2;
// Using our pipe function
console.log(pipe(increment, double, divide)(3));  // 7.5

Tip: As already mentioned, the sequence matters, so you can create only a compose function and use it as a pipe by passing your functions in left to right order.

Thanks for reading.

The Ultimate Guide To JavaScript Dom Manipulation With Practice Project

Fahim Zada — Fri, 12 Aug 2022 16:23:00 +0000

Hi there,
In website development, DOM stands for Document Object Model. DOM manipulation is when you use JavaScript to add, remove, and modify elements of a website. And in this tutorial, you'll learn how to do it. I'll include a GitHub link to a practice project in the end which you should check out.
We will not be covering events, event handlers, and different ways of accessing and manipulating elements. But the recommended and easy way.

Accessing Dom Elements

Same as you select elements through CSS.

// Returns the first element within the document that matches the specified group of selector/selectors. 
//Now you have also access to the element attributes, element.href etc and you can directly change any property element.href = "https://newlink.com"
const element = document.querySelector('.someclass')
// Returns a list of the elements within the document using depth-first pre-order traversal of the document's node. That match the specified group of selector/selectors.
const eleList = document.querySelectorAll('.someclass')
// Getting child nodes
const getIt = document.querySelector('.someclass')
const children = getIt.childNodes
// Getting parent node
const parent = children.parentNode
//A few others you can use
//element.previousSibling
//element.nextSibling
//element.firstChild
//element.lastChild

Creating New DOM Elements

//create h1 element
const heading = document.createElement('h1');
// create a text node for the element
const headingText= document.createTextNode('This is the h1 heading!');
// Attach the text node to the element
heading.appendChild(headingText);
//Append the element to the body or to a specific element
document.body.appendChild(heading)
element.appendChild(heading)

Selecting the element, Adding the content, Replacing and removing elements

//Select the element
const element = document.querySelector('.someclass')
//Get the inner text , innerText or just using the text
const insideText = element.innerText
//Adding more content to element
element.innerText = insideText + "the new value"
//Replacing the value
element.innerText = "New Value"
//Use innerHTML if you want to add HTML along with it
element.innerHTML = "New Heading Value <a href="https://dev.to/itsfz1">Developer</a>"
//Let's remove this element from the dom tree
element.remove()

Inserting HTML at different locations

const element = document.querySelector('.someclass')
// beforebegin - The HTML would be placed immediately before the element, as a sibling.
// afterbegin - The HTML would be placed inside the element, before its first child.
// beforeend - The HTML would be placed inside the element, after its last child.
// afterend - The HTML would be placed immediately after the element, as a sibling.
element.insertAdjacentHTML("afterbegin
", "<div><p>New Grid Item</p></div>");

Add, Remove, Toggle, Check Classes

const element = document.querySelector('.someclass')
// Will remove unwanted if it is a class of element
element.classList.remove("unwanted");
//Will add the class 'anotherClass' if one does not already exist
element.classList.add("anotherclass");
// Add or remove multiple classes
element.classList.add("class1", "class2");
element.classList.remove("c1", "c2");
//If "visible" class is set remove it, otherwise add it
element.classList.toggle("visible");
// will return true if it has class of 'exist' or false if it does not
const flag = element.classList.contains("exist");
flag ? "Yes this class exist" : "Not exist"

Getting, Adding, and removing attributes

const element = document.querySelector('.someclass')
//will return the link
element.getAttribute("href")
//will set class="awsome"
element.setAttribute("class", "awsome")
//Will remove the attribute from element
element.removeAttribute("class")
//Check for attribute existance, it returns a boolean
if (element.hasAttribute("target")) {
    element.setAttribute("style", "color: green; text-decoration: none;");
  }

Here is the link for the practice project.

Bonus

You can assign multiple attributes without using multiple setAttribute functions in one go like this:

const elementInput = document.createElement("input")
 Object.assign(elementInput , {
        className: "textField",
        id: "address",
        name: "address",
        type: "text",
        placeholder: "",
        value: ""
    })
document.body.appendChild(elementInput )

The difference between "innerText" and "textContent" is that innerText returns only visible text without spacing while textContent returns visible and non-visible text including a script with spacing.
Thanks for reading!.