Accessing an Object’s Keys, Values, and Entries in JavaScript

Let’s dive into objects Photo by Matt Artz on Unsplash Object.keys(obj) → returns an array of a given object’s property names. Object.values(obj) → returns an array of a given object’s own property values. Object.entries(obj) → returns an array of a given object’s own string-keyed property [key, value] pairs. var user = { name : “John”, profession : …

11 Extremely Useful JavaScript Tips

Level up your JavaScript game Image by David Monje from Unsplash 1. Converting to Boolean Using the !! Operator Sometimes, we need to check if a variable exists or if it has a valid value, to consider them as a true value. For this kind of validation, you can use the !! (double-negation operator). A simple !!variable, which will automatically …

Understanding The forEach Method for Arrays in JavaScript

Improve your iteration Photo by Mika Baumeister on Unsplash What is forEach? The forEach method executes the callback function against all element of the array. forEach method in JavaScript Syntax array.forEach(callbackFunction, [, thisArg]); // thisArg is optional arguments for callbackFunction callbackFunction(currentValue, index ,array) { //index, array is optional } The forEach method doesn’t return anything. Let’s start …

You Don’t Need Loops in JavaScript

Learn how to remove loops and use higher-order functions like map, reduce, and filter Image by Lysander Yuen Why Are We Replacing Loops? Using higher-order functions will make your code : More readable. Easy to understand. Easy to debug. 1. To Loop Through All Elements and Get an new modified array Using loop: var names = [“Jack”, “Jecci”, “Ram”, …

Generating Random Numbers in JavaScript

It’s more than Math.random() Image by NeONBRAND The Math.random() will generate a pseudo-random floating number (a number with decimals) between 0 (inclusive) and 1 (exclusive). Here, the random number doesn’t mean that you always get a unique number. It generates the same number only after some interval. The interval here is very long, so you …

Detecting the End of CSS Transition Events in JavaScript

An overview of proper chaining Image by Hello I’m Nik 🇬🇧 Before CSS transition and animation (keyframes), to animate, we needed to code in JavaScript. But once these two properties were introduced, we can achieve complex animations with only CSS. In JavaScript, we can call the callback function once the animation is done. But in CSS, there …

Different Ways to Duplicate Objects in JavaScript

It turns out there are a lot of different ways to duplicate objects Photo by James Orr on Unsplash In JavaScript, a variable can store two types of data: Primitive Reference When we copy primitive values, only the value will be copied. var a = 10; var b = a; console.log(a, b); // 10, 10 b …

Implementing a Stack in JavaScript

They’re like arrays with more structure and rules Image by Brooke Lark from Unsplash Stacks are data structures that follow the Last-In-First-Out (LIFO) principle, meaning the last item inserted into a stack is the first one to be deleted. In other words, a stack is a list of elements that are accessible only from one end of …

Removing jQuery From Your Project With JavaScript: Part 1

Learn to replace the jQuery DOM operation with JavaScript Photo by Sagar Patil on Unsplash The reasons for removing jQuery are: To get native performance To understand what’s happening inside jQuery functions so we can decide whether we go for jQuery or JavaScript Part 1 of this series only focuses on getting elements without using jQuery. …

Design a site like this with WordPress.com
Get started