Showing Posts From

Javascript

Harnessing the Power of JavaScript Building Seamless Mobile Apps with React Native

In today’s fast-paced digital landscape, mobile applications are not just a luxury but a necessity for businesses aiming to engage users effectively. As developers seek ways to streamline their app development processes while ensuring high performance, JavaScript has emerged as a game-changing language, especially with frameworks like React Native. In this post, we will explore the benefits of using JavaScript for mobile development and how React Native can help you create seamless applications with ease. Why Choose JavaScript for Mobile Development?JavaScript is a versatile and powerful programming language that has become the backbone of modern web development. Its adoption in mobile development can be attributed to several key factors:Cross-Platform Compatibility: With the rise of frameworks like React Native, developers can write code once and deploy it on both iOS and Android platforms. This not only accelerates the development process but also reduces costs associated with maintaining separate codebases.Rich Ecosystem: The JavaScript ecosystem is vast, with a plethora of libraries and tools available to enhance functionality and simplify tasks. From state management with Redux to navigation with React Navigation, developers have access to resources that can significantly boost productivity.Strong Community Support: JavaScript has a thriving community of developers who are constantly contributing to its growth. This means a wealth of tutorials, forums, and open-source projects are available for newcomers and seasoned developers alike, making it easier to find solutions to common challenges.Building Mobile Apps with React NativeReact Native is a framework developed by Facebook that allows developers to build mobile applications using JavaScript and React. Here are some compelling reasons to consider React Native for your next mobile project: 1. Declarative UIReact Native employs a declarative approach to UI development, enabling developers to describe how the app should look at any given point in time. This leads to more predictable code, making it easier to debug and maintain. 2. Hot ReloadingOne of the standout features of React Native is hot reloading, which allows developers to see the results of the latest change instantly, without losing the state of the application. This significantly speeds up the development process and enhances productivity. 3. Native PerformanceUnlike hybrid frameworks that rely on WebView, React Native components are compiled into native code, providing performance comparable to native applications. This is crucial for apps that require high responsiveness and fluid interactions. 4. Access to Native FeaturesReact Native provides seamless access to native APIs, allowing developers to incorporate device functionalities such as camera, GPS, and push notifications easily. This capability ensures that the applications you build can leverage the full power of the device. Tips for Success with React NativeWhile React Native simplifies mobile development, there are a few best practices to keep in mind:Plan Your App Structure: Before diving into coding, outline your app’s architecture. A well-structured codebase will save you time and frustration in the long run.Optimize Performance: Use tools like the React Native Performance Monitor to identify bottlenecks in your app and optimize accordingly. Keep an eye on component re-renders and avoid unnecessary updates to enhance performance.Leverage Third-Party Libraries: Don’t reinvent the wheel. Take advantage of the rich ecosystem of libraries to speed up development and add functionality without extra effort.Testing is Key: Ensure your app is robust by incorporating testing into your development workflow. Use tools like Jest and Detox for unit and end-to-end testing respectively.ConclusionJavaScript, particularly when paired with React Native, presents a robust solution for mobile app development. By leveraging its cross-platform capabilities, rich ecosystem, and strong community support, developers can create high-quality applications that provide an excellent user experience. Whether you’re a seasoned developer or just starting, embracing JavaScript for mobile development could be the key to unlocking your app’s potential. Start building today, and watch your ideas come to life on mobile devices!

Unlocking the Power of JavaScript A Beginner's Guide to Essential Concepts

IntroductionJavaScript is the backbone of modern web development, powering everything from interactive web applications to dynamic user interfaces. If you're just starting your journey in coding or looking to strengthen your foundational skills, understanding JavaScript basics is your first step toward becoming a proficient developer. In this blog post, we will explore essential concepts that every beginner should know, paving the way for more advanced topics in the future. 1. What is JavaScript?JavaScript is a high-level, interpreted programming language that enables developers to create interactive websites. It is one of the core technologies of the web, alongside HTML and CSS. While HTML structures the content and CSS styles it, JavaScript adds functionality and interactivity, allowing for a dynamic user experience. 2. Setting Up Your EnvironmentBefore diving into coding, you need a suitable environment. Fortunately, you can start with just a web browser and a text editor:Web Browser: Most modern browsers (like Chrome, Firefox, or Edge) come with built-in developer tools that allow you to test your JavaScript code directly. Text Editor: Use any text editor like Visual Studio Code, Sublime Text, or even Notepad to write your JavaScript code.3. Your First JavaScript CodeLet’s start with a simple JavaScript program. Open your text editor and create a file named index.html. Add the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First JavaScript</title> </head> <body> <h1>Hello, JavaScript!</h1> <script> console.log('Hello, World!'); </script> </body> </html>When you open this file in your web browser, you’ll see "Hello, JavaScript!" displayed on the page. If you check the console (right-click and select "Inspect" or "Inspect Element"), you will see "Hello, World!" printed there. This is the simplest way to execute JavaScript code! 4. Variables and Data TypesVariables are fundamental in JavaScript. They store data values. JavaScript has three main ways to declare a variable:var: Function-scoped or globally scoped. let: Block-scoped, introduced in ES6. const: Also block-scoped, but cannot be reassigned.Here’s how you can declare variables: var name = 'Alice'; let age = 25; const country = 'USA';JavaScript also supports different data types, including:String: Textual data, e.g., 'Hello' Number: Numeric values, e.g., 42 Boolean: Logical values, e.g., true or false Array: A collection of items, e.g., [1, 2, 3] Object: Key-value pairs, e.g., { name: 'Alice', age: 25 }5. FunctionsFunctions are reusable blocks of code that perform a specific task. Here’s how to define a simple function: function greet(name) { return `Hello, ${name}!`; }console.log(greet('Alice')); // Output: Hello, Alice!Functions can also be defined using arrow syntax: const greet = (name) => `Hello, ${name}!`; console.log(greet('Bob')); // Output: Hello, Bob!6. Control StructuresControl structures allow you to dictate the flow of your program. The most common ones include:Conditional Statements (if, else if, else)let score = 85; if (score >= 90) { console.log('Grade: A'); } else if (score >= 80) { console.log('Grade: B'); } else { console.log('Grade: C'); }Loops (for, while)for (let i = 0; i < 5; i++) { console.log(`Iteration: ${i}`); }7. ConclusionCongratulations! You've taken the first steps into the world of JavaScript. By understanding these essential concepts—variables, functions, and control structures—you’re well on your way to mastering the language. Remember, practice is key! Experiment with your code, build small projects, and gradually take on more complex challenges. The more you code, the more confident you will become. Stay tuned for our next blog post, where we will delve deeper into JavaScript's advanced features like asynchronous programming and APIs. Happy coding! Call to ActionIf you found this guide helpful, please share it with fellow beginners and leave a comment below with your thoughts or any questions you may have about JavaScript!

Building Real-Time Applications with JavaScript Harnessing the Power of WebSockets

IntroductionIn today's interconnected world, real-time applications are becoming increasingly necessary. From chat applications to live notifications, the ability to transmit data instantaneously is a key feature that enhances user experience. JavaScript, with its non-blocking I/O and event-driven architecture, is a perfect candidate for developing such applications. In this blog post, we'll explore how to build real-time applications using JavaScript, focusing on the powerful WebSocket API. What Are Real-Time Applications?Real-time applications are those that allow data to be sent and received instantly, enabling live interactions between users or systems. Examples include chat applications, collaborative tools like Google Docs, and live data feeds in financial markets. These applications rely on continuous connections to ensure that users receive updates without needing to refresh their browsers. Why Choose WebSockets?While traditional HTTP requests can be used for real-time applications, they fall short due to their request-response model. This model can lead to increased latency and unnecessary server load. WebSockets, on the other hand, provide a persistent connection between the client and server, allowing for two-way communication. This means that both the client and the server can send messages independently, making it ideal for real-time interactions. Getting Started with WebSocketsTo illustrate how to create a real-time application with WebSockets, let's build a simple chat application. We'll use Node.js for the server and plain JavaScript for the client. Step 1: Setting Up the ServerFirst, you'll need to set up a Node.js server. If you haven’t already, install Node.js on your machine. Create a new directory for your project and initialize it: mkdir websocket-chat cd websocket-chat npm init -yNext, install the ws library, which is a simple WebSocket library for Node.js: npm install wsNow create a file named server.js: const WebSocket = require('ws'); const server = new WebSocket.Server({ port: 8080 });server.on('connection', (socket) => { console.log('A user connected'); socket.on('message', (message) => { console.log(`Received: ${message}`); // Broadcast the message to all connected clients server.clients.forEach(client => { if (client.readyState === WebSocket.OPEN) { client.send(message); } }); }); socket.on('close', () => { console.log('A user disconnected'); }); });console.log('WebSocket server is running on ws://localhost:8080');Step 2: Creating the ClientNow let's create a simple HTML file to serve as our chat interface. Create a file named index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebSocket Chat</title> </head> <body> <h1>WebSocket Chat Application</h1> <input id="message" type="text" placeholder="Type a message..."/> <button id="send">Send</button> <ul id="messages"></ul> <script> const socket = new WebSocket('ws://localhost:8080'); socket.onmessage = function(event) { const messages = document.getElementById('messages'); const li = document.createElement('li'); li.textContent = event.data; messages.appendChild(li); }; document.getElementById('send').onclick = function() { const input = document.getElementById('message'); socket.send(input.value); input.value = ''; }; </script> </body> </html>Step 3: Running the ApplicationRun your server: node server.jsOpen multiple instances of your index.html file in different browser tabs. Type a message in one tab and hit send. You should see the message appear in real-time across all other tabs! ConclusionCongratulations! You've successfully built a simple real-time chat application using JavaScript and WebSockets. This foundational knowledge can be expanded to create more complex applications, including collaborative tools, gaming platforms, and live dashboards. As you continue to explore the vast world of real-time applications, remember that the key to success lies in understanding your use case and choosing the right technology stack. Happy coding! Call to ActionIf you found this post helpful, please share it with your fellow developers! Don’t forget to leave your comments or questions below. What real-time applications are you excited to build with JavaScript?

Mastering Responsive Design with JavaScript Techniques for Dynamic User Experiences

IntroductionIn a digital landscape where user expectations continuously evolve, responsive design has become a cornerstone of web development. While CSS frameworks like Bootstrap and Flexbox provide robust solutions for creating fluid layouts, incorporating JavaScript can elevate your responsive design strategy by enabling dynamic adjustments based on user interactions and device characteristics. In this blog post, we'll explore several techniques to harness the power of JavaScript for creating a more responsive and engaging user experience. Understanding Responsive DesignResponsive design is about creating web pages that look great on all devices, from desktops to tablets to smartphones. It ensures that your site adapts its layout and content based on the screen size. While CSS handles many of these adjustments, JavaScript can play a pivotal role in making your site even more responsive. Why Use JavaScript for Responsive Design?Dynamic Content Loading: With JavaScript, you can load content dynamically based on the user's device or screen size. This can help improve performance by serving only the necessary elements, reducing load times.Event Handling: JavaScript allows you to listen for events, such as resizing the window or changing orientation. This means you can trigger specific functions to adjust your layout or content accordingly.Media Queries Enhancement: While CSS media queries are powerful, JavaScript can enhance their functionality. You can create more complex conditions and even respond to changes in real-time.User Interaction: JavaScript can help adapt the user interface based on user behavior, like modifying navigation menus for touch devices or changing layouts based on user preferences.Techniques for Responsive Design with JavaScript1. Using the Resize EventThe resize event in JavaScript can be utilized to respond to changes in the window size. Here’s a simple example: window.addEventListener('resize', () => { const width = window.innerWidth; const content = document.getElementById('content'); if (width < 600) { content.style.fontSize = '14px'; } else { content.style.fontSize = '16px'; } });In this example, the font size of the content adjusts based on the window width, providing a better reading experience on smaller screens. 2. Media Queries with JavaScriptYou can use the window.matchMedia method to listen for media query changes and apply JavaScript accordingly: const mediaQuery = window.matchMedia('(max-width: 600px)');function handleTabletChange(e) { if (e.matches) { // If the media query matches document.body.classList.add('mobile'); } else { document.body.classList.remove('mobile'); } }mediaQuery.addListener(handleTabletChange); handleTabletChange(mediaQuery); // Call on loadThis technique allows you to dynamically apply styles or classes based on the device characteristics, enhancing the overall user experience. 3. Dynamic Content AdjustmentJavaScript can also be used to adjust content layout based on screen size or orientation. For instance, you might want to change the structure of a grid layout: function adjustGrid() { const gridContainer = document.querySelector('.grid-container'); const width = window.innerWidth; if (width < 600) { gridContainer.style.gridTemplateColumns = 'repeat(2, 1fr)'; } else { gridContainer.style.gridTemplateColumns = 'repeat(4, 1fr)'; } }window.addEventListener('resize', adjustGrid); adjustGrid(); // Call on loadThis script modifies the grid layout based on the screen width, ensuring that users have an optimal browsing experience. ConclusionResponsive design is no longer just a trend; it's a necessity in web development. By leveraging JavaScript alongside CSS, you can create a more dynamic and responsive user experience that adapts to various devices and user interactions. Whether you're adjusting layouts based on screen size or optimizing content loading, the techniques discussed in this post will help you enhance your web applications and cater to your audience's needs. Start experimenting with these JavaScript techniques today, and take your responsive design skills to the next level! Feel free to share your thoughts or experiences with responsive design in the comments below!

Empowering Collaboration How JavaScript Communities Drive Open Source Innovation

In the ever-evolving landscape of technology, JavaScript stands out as a dynamic and versatile programming language. With its significant presence in web development, mobile applications, and even server-side programming, it’s no surprise that JavaScript has cultivated a vibrant global community. This community is not just a network of developers; it is a powerhouse of collaboration, innovation, and open-source initiatives that are shaping the future of technology. The Heart of JavaScript: CommunityAt the core of the JavaScript ecosystem are the communities that foster learning, sharing, and collaboration. From local meetups to global conferences like JSConf and NodeConf, JavaScript enthusiasts gather to exchange ideas, showcase projects, and push the boundaries of what’s possible with code. These gatherings are more than just networking events; they are incubators for creativity and innovation. Open Source: A Collaborative SpiritOpen source is the lifeblood of the JavaScript community. Platforms like GitHub and GitLab make it easy for developers to contribute to projects, whether they are fixing bugs, adding features, or creating entirely new libraries. This collaborative spirit allows developers of all levels to participate in meaningful projects, learn from one another, and collectively advance the state of technology. One shining example of this collaboration is the React library, which has transformed the way developers build user interfaces. Originating from Facebook, React has grown into a community-driven project with thousands of contributors. Its open-source nature has led to a vast ecosystem of tools, components, and extensions that continue to evolve based on user feedback and contributions. The Ripple Effect of CollaborationThe impact of community-driven open source initiatives extends beyond individual projects. When developers collaborate on open-source platforms, they create a culture of sharing knowledge and best practices. This culture not only accelerates innovation but also ensures that best practices are disseminated throughout the community. As developers learn from each other, they bring those insights back to their own projects, leading to better quality code and more robust applications. Moreover, open-source projects provide a platform for developers to showcase their skills, which can lead to job opportunities and career advancement. For many, contributing to open source is a pathway into the tech industry, allowing newcomers to gain real-world experience and build a portfolio that stands out to potential employers. The Future of JavaScript and Open SourceAs the JavaScript community continues to grow, the potential for innovation is limitless. Emerging technologies like WebAssembly, serverless architecture, and progressive web apps are opening new doors for developers. With a strong foundation in open-source collaboration, the JavaScript community is well-positioned to explore these frontiers and create solutions that can revolutionize how we interact with technology. Join the MovementWhether you’re an experienced developer or just starting your journey, there’s a place for you in the JavaScript community. Get involved in local meetups, contribute to open-source projects, or start your own initiative. The beauty of this community lies in its inclusivity and openness. By collaborating and sharing, we can continue to push the boundaries of what’s possible in the world of technology. In conclusion, the JavaScript community is a testament to the power of collaboration and open-source innovation. It thrives on the principles of sharing, learning, and community-driven progress. As we look to the future, let’s continue to harness this spirit of collaboration to build a better, more connected digital world. Feel free to share your thoughts or experiences related to JavaScript and open source in the comments below! Let’s keep the conversation going and inspire one another.

JavaScript Confessions The Day I Misunderstood 'this' and Almost Ruined a Project

JavaScript Confessions: The Day I Misunderstood 'this' and Almost Ruined a ProjectAs a JavaScript developer, I have had my fair share of "aha" moments, but none stand out quite like the day I misinterpreted the context of 'this' in JavaScript. It was a blustery Monday morning, and I was knee-deep in a project that was meant to be the crowning achievement of my week. Little did I know, my misunderstanding of a simple keyword would turn that week into a rollercoaster of panic and confusion. The project was a single-page application (SPA) intended to streamline the internal workflow for a small startup. It involved creating a user-friendly interface that fetched and displayed data from a RESTful API. My excitement was palpable as I dove into my code, fueled by copious amounts of coffee and a playlist of motivational tunes. In my enthusiasm, I decided to utilize ES6 classes to organize my code better. I had read about the elegance of using classes and wanted to leverage them for my application. Everything was going smoothly until I began writing a method to handle user input. That’s when my troubles began. In JavaScript, the context of 'this' can be a slippery slope, especially when dealing with callback functions and methods. I had naively assumed that 'this' would always refer to the instance of the class I was working in. However, when I passed my class method as a callback to an event listener, 'this' suddenly pointed to the event target, not my class instance. My once neat and tidy code began to unravel at the seams. I spent hours debugging, staring at my console as error messages flooded in. I felt like a detective in a crime novel, piecing together clues that just didn’t add up. Why was my method not accessing the properties of my class? Why was it behaving erratically? My teammates were beginning to notice my frantic typing and the growing pile of empty coffee cups on my desk. I could feel the pressure mounting. After what felt like an eternity, I finally took a step back. I sat in silence for a moment, reflecting on my approach. It dawned on me that I needed to explicitly bind my method to the class instance. With a simple change — using .bind(this) — my method suddenly regained its context. The clouds parted, and the sun shone down on my code. The errors disappeared, and I could finally see the light at the end of the tunnel. This experience taught me two invaluable lessons: First, the importance of understanding how 'this' works in JavaScript and second, the power of taking a step back to reassess when things go wrong. I emerged from that day not just with a functioning application but also with a deeper appreciation for the intricacies of JavaScript. So, to all my fellow developers out there, the next time you find yourself tangled in a web of confusion, remember my confession. Take a breath, step back, and don't forget to bind your methods! JavaScript may be quirky, but it rewards those who take the time to truly understand its nuances. Happy coding! This blog post combines personal experience with practical advice, making it relatable and informative for JavaScript enthusiasts.

Eric Stanley
06 Sep, 2020

Short circuit in javascript

Short circuit is an interesting concept in JavaScript where we make JavaScript to evaluate a typically unorthodox condition to human eye but make total sense to JavaScript typing engine So what do I mean my unorthodox anyway? Let’s take an if statement for example if (condition) { // do something if true } else { // do something else }If you look at the above statement from a layman perspective, he/she could still understand what the code does just by knowing a little english!! What that also means is that the code you see is as per the books and that’s how anyone teaches to code The above code can also be written using ternary operators like below (condition) ? // do something if true : // do something if falseHowever, the reason why ternary operator code is not traditional is because it does not have any keywords in it. Anyone could still understand the above syntax, but when it’s implemented in actual code like (a === b) ? x = y : x = zIt’s kinda hard for a newbie to understand what the code actually means or how it works. More about ternary operators hereNow, why am I taking about if statements and ternary operators when the heading says Short circuit in JavaScript!It’s because though there is no performance improvement by using ternary operators instead of traditional if else, it’s a little less to write. And if that makes you insane, get ready for obsession Short circuiting in JavaScript is all about how you play around logical operators with falsy and truthy values Before we move any further, let’s understand what falsy and truthy values areAny value that is considered false when expressed in boolean context is falsy. The value that I’m referring here could be anything. It could be a variable, array, object, condition, etc.Ok, so a boolean variable can be assigned a value of false and it becomes falsy. But how can I assign a value of false to an array. An array can be empty or undefined but definitely not false. That would make no sense! Good news is, JavaScript has some predefined values that are considered falsy The falsy values in JavaScript arethe number 0 the BigInt 0n the keyword null the keyword undefined the boolean false the number NaN the empty string "" (equivalent to '')The above values evaluate to false when coerced by JavaScript’s typing engine into a boolean value, but they are not necessarily equal to each other. And what are truthy values then? Everything else except falsy is truthy. Simple ❇️ Fun time!! Let’s start with an example again. Consider the following if statement if (condition) { // do something if true }If we use the ternary expression, the above if statement can be written as condition ? // do something if true : nullIf you notice closely, you might see that there is an unnecessary else condition in the ternary expression which basically does nothing. The problem is you can’t neglect it. A ternary expression should always have something to do for both true and false conditions which makes ternary expression not an optimal choice when there’s only if and no else Now, how can we rewrite this to make it smaller Time to get obsessed (condition) && // do something if trueLike I said, it’s basically how we play around with logical operators Before we dive into how the code works, it’s necessary understand how logical operators work. It works from left to right and short circuits What do I mean by short circuit here? When JavaScript evaluates an AND (&&) expression, if the first operand is false, JavaScript will short circuit and will not even look at what’s next in lineRemember, the logical AND returns true only if all conditions match. In other words, in a given sequence of conditions with logical AND operators will complete its execution successfully only if all conditions are true. The moment any of the condition is false, it just doesn’t matter whether or not the remaining conditions are true. The end result is gonna be falseSimply put, all conditions that comes after the false condition is not gonna affect the result. And if the result is clear even before evaluating all the conditions, it short circuits!It’s the same principle, JavaScript just short circuits once it encounters a false value and just ignores the remaining conditions and returns to the next line of code Before I close let’s just see a real example with logical AND (&&) and logical OR (||) let a, b, xa = 1 // b = undefined x = 'I am the default value'console.log(a && x) // prints 'I am the default value', since a is true console.log(b && x) // prints undefined, since b is false (short circuits and anything after false is not executed)console.log(a || x) // prints 1, since a is true (short circuits and anything after true is not executed) console.log(b || x) // prints 'I am the default value', since b is falseThat’s my best explanation of what short circuit is in JavaScript After all, no one said a bread board logic would NOT be helpful someday in the programming world 🙂

Eric Stanley
30 Dec, 2019

JavaScript: Array Manipulation

JavaScript offers different ways to manipulate arrays. However, there are methods that changes the original array and other methods that don’t. The methods that changes original array is called MUTATION. Let’s take a look at most common methods to manipulate arrays in JavaScript Now, that we know that there are methods that mutates the original array, it’s considered best practice to assign the array to const, if you know that the array that you use is not going to get mutated. It’s wise to use let otherwise. It is not a mandate that you need to use const to declare an array that will not be mutated, however, it’s easy for your colleague to understand that the array which is declared as const is not going to get changed anywhere in the code; which is why it’s considered best practice As usual, if you wanna try the examples in this post, I recommend codepen.io, but you are free to make your own choice. The most common interactions that we usually have with arrays areAdd item to array Remove item from array Update and item in the arrayAll the above mentioned actions can be done by both mutating and non-mutating methods. Instead of explaining each of the methods subjectively, I felt it would be better understood with a table. Here we go! testArray: [a, b, c, d, e, f, g, h, i];Code Original Array Processed Array Returned Val Is Mutated Action MethodtestArray.push('j') [a,b,c,d,e,f,g,h,i] [a,b,c,d,e,f,g,h,i,j] 10 true add push()testArray.unshift('z') [a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j] 11 true add unshift()testArray.concat('k') [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j,k] false add concat()['y', ...testArray, 'l'] [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j] [y,z,a,b,c,d,e,f,g,h,i,j,l] false add ...testArray.pop() [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i] j true remove pop()testArray.shift() [z,a,b,c,d,e,f,g,h,i] [a,b,c,d,e,f,g,h,i] z true remove shift()testArray.splice(0, 2) [a,b,c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [a,b] true remove splice()testArray.filter(a => a!== 'c') [c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [d,e,f,g,h,i] false remove filter()testArray.slice(1, 6) [c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [d,e,f,g,h] false remove slice()testArray.slice(2) [c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [e,f,g,h,i] false remove slice()testArray.splice(2, 1,30, 31) [c,d,e,f,g,h,i] [c,d,30,31,f,g,h,i] [e] true update splice()testArray.map(x => x ==='d' ? 29 : x) [c,d,30,31,f,g,h,i] [c,d,30,31,f,g,h,i] [c,29,30,31,f,g,h,i] false update map()I hope the above table is self-explanatory, however if you need to check the values of the testArray with real code, feel free to visit programmatic output where the exact same table is derived programmatically. Codepen pin link

Higher order functions

I recently started learning JavaScript and I tumbled upon a concept called Higher Order Functions (HOF). There are quite a lot of documents in the internet that explains what an HOF is, and here is my thought. Before explaining what an HOF is, let’s see how a function looks like in JavaScript. Functions in JavaScript is not different from functions in any other programming languages, which means, I assume that you kinda know how a function generally looks like. Below is a function snippet in JavaScript. function myTestFunction() { alert("Thanks for clicking") }Now, that we know how a function looks like in JavaScript, let’s continue on knowing what HOF is and how is it different from a normal function. HOF is a concept in JavaScript where a function (say x) is passed as an argument to another function (say y) OR the calling function (say z) returns a function (say x) after execution Let’s take the above function for example (#1), and pass it into another function document.addEventListener("click", myTestFunction) function myTestFunction() { alert("Thanks for clicking") }Now, document.addEventListener is called whenever an event in the first parameter is triggered in the document, and the second parameter is a function that gets executed whenever the event is triggered In other words, the above function can also be written as document.addEventListener("click", function myTestFunction() { alert("Thanks for clicking") })And this works perfectly fine. So, if this works perfectly fine, why would I need to write another function and call it within the addEventListener instead of writing directly within the listener. The answer is, the function can be reused now, if it’s outside the listener. Kinda makes sense? Let’s take another step and look at another example (#2) which is a little more complex. function createMultiplier(multiplier) { return function(x) { return x * multiplier } }let doubleMe = createMultiplier(2) let tripleMe = createMultiplier(3) let quadrupleMe = createMultiplier(4)document.write(doubleMe(45) + "<br>") document.write(tripleMe(45) + "<br>") document.write(quadrupleMe(45) + "<br>")As you can see, the createMultiplier function returns a function here which can be used in different places. Let’s take a look at how the code looks without HOF function multiply(x, multiplier) { return x * multiplier }let doubleMe = multiply(45, 2) let tripleMe = multiply(45, 3) let quadrupleMe = multiply(45, 4)document.write(doubleMe + "<br>") document.write(tripleMe + "<br>") document.write(quadrupleMe + "<br>")Looks like, the code without HOF is still less number of lines and effective too! Until now, even I was not sure about the use of HOF. But let’s take 1 more step from here. Let’s parameterize the multiplier (#3) With HOF function createMultiplier(multiplier) { return function(x) { return x * multiplier } }let nums = [41, 42, 43, 44, 45, 46]let doubleMe = createMultiplier(2) let tripleMe = createMultiplier(3) let quadrupleMe = createMultiplier(4)for (i = 0; i < nums.length; i++) { document.write(doubleMe(nums[i]) + "<br>") document.write(tripleMe(nums[i]) + "<br>") document.write(quadrupleMe(nums[i]) + "<br>") }Without HOF function multiply(x, multiplier) { return x * multiplier }let nums = [41, 42, 43, 44, 45, 46]for (i = 0; i < nums.length; i++) { let doubleMe = multiply(nums[i], 2) let tripleMe = multiply(nums[i], 3) let quadrupleMe = multiply(nums[i], 4) document.write(doubleMe + "<br>") document.write(tripleMe + "<br>") document.write(quadrupleMe + "<br>") }As you can see, the numbers 2, 3 and 4 are constants and we are not making any changes to those parameters within the loop. However, we cannot move them outside of the for loop since the resultant value is dependent on this constant. Whereas, in the code with HOF, we have moved the constants successfully outside of the loop. Now, why do we do that? Does it impact the performance? The answer in this case is, the code looks a little bit neat and NO it does not affect the performance. Here’s another example of HOF in JavaScript let myColors = ["red", "orange", "yellow", "green"] myColors.forEach(saySomethingNice) function saySomethingNice(color) { document.write("The color " + color + " is a great color. <br>") }The forEach method in the array object automatically loops thro’ every element in the array without using a loop, which means less code to do the same work. The code in example #3 looks like this now! function createMultiplier(multiplier) { return function(x) { return x * multiplier } }let nums = [41, 42, 43, 44, 45, 46]let doubleMe = createMultiplier(2) let tripleMe = createMultiplier(3) let quadrupleMe = createMultiplier(4)nums.forEach(num => { document.write(doubleMe(num) + "<br>") document.write(tripleMe(num) + "<br>") document.write(quadrupleMe(num) + "<br>") })In my personal terms, if you are a novice JS developer and if you copy and paste a code in JavaScript which you feel that it’s hard to understand, but still works the way you wanted it to, you are probably looking into a HOF. That’s my personal view of HOF though! Ending Note: The latest JavaScript ES6 standard, has tackled a lot of limitations that the ES5 standard had, and HOF is one of those.

Eric Stanley
21 Aug, 2019

Ternary Operators

The ternary operator is basically another way to implement the if-else statement. Now, if it’s just another way to implement the if-else statement, why can’t I use the same old if-else? Why would I need to take up something extra which I don’t need right now? As for any new change, the answer to the above question is simple. Kinda hard, but it’s worth it. It’s not absolutely necessary to learn it, as you can do anything and everything without it. However, considering the constant evolution of technology, it’s better to learn new things while we still can! After all, learning new things is always interesting. Let me put this straight. This post is not to blame on the good old if-else statement. If you are not clear on the if-else statement, I would recommend you to google it before you proceed further. Before we get into what a ternary operator is, let’s get a quick bite on what an operator and operand is, and different kinds of operators in general Operator: These are the symbols that we use in our calculations. Ex: + - / = * % Operand: These are the variables or constants the are being used with the operator for calculations There are 3 different types of operatorsOperator DescriptionUnary Operators Requires one operand. Ex: a++Binary Operators Requires two operands. Ex: a+bTernary Operators Ternary Operators: Requires three operands Ex: c ? a : bLet’s start with a simple example as usual. A typical if statement looks like below if (latitude > 0) { return 'summer' } else { return 'winter' }Let’s put the above statement in a function, so that we can see the actual working result function getSeason(latitude) { if (latitude > 0) { return 'summer' } else { return 'winter' } }document.write(getSeason(10))If you want to see how the above code works, I would recommend codepen.io, however if you already know how this works; or, you already are part of another online code editor community, good for you 🙂Moving on, the getSeason function takes one argument which is the latitude and returns a season string based on the latitude. Ternary operators are all about reducing the number of lines of code. So, before implementing the ternary operator, let’s see if we can reduce the number of lines without it. If the if-else statement has only one line of code to be executed, then the {} is actually not necessary. The above code can be written as function getSeason(latitude) { if (latitude > 0) return 'summer' else return 'winter' }document.write(getSeason(10))Not much of code reduction here, but the point is, you can avoid the {} in case of one statement within the if-else block Note: Anything more than one statement within the if-else would require the {} Time to implement ternary operator in our above example. function getSeason(latitude) { return latitude > 0 ? 'summer' : 'winter' }document.write(getSeason(10))Looks like the code is reduced a lot now, but how about nested if statements. Let’s take a look at a little more complex example by adding another variable called month to derive the season, like below function getSeason(latitude, month) { if (latitude > 0) { if (month >= 1 && month <=6) { return 'summer' } else { return 'winter' } } else { if (month >= 1 && month <=6) { return 'winter' } else { return 'summer' } } }document.write(getSeason(10, 5))As you can see, the code is a lot more complicated and the number of lines has significantly increased this time. Good news, is the ternary operator can be nested too. The above example can also be written as function getSeason(latitude, month) { return latitude > 0 ? (month >= 1 && month <=6) ? 'summer' : 'winter' : (month >= 1 && month <=6) ? 'winter' : 'summer' }document.write(getSeason(10, 5))Now, all the code in the nested if-else example can be written just in one single line. On a side note, we can get the current month and current latitude programmatically. The final code now looks like below function getSeason(latitude, month) { return latitude > 0 ? (month >= 1 && month <=6) ? 'summer' : 'winter' : (month >= 1 && month <=6) ? 'winter' : 'summer' }new Promise((res, rej) => navigator.geolocation.getCurrentPosition(res, rej)).then(pos => document.write(getSeason(pos.coords.latitude, (new Date().getMonth()+1))))Make sure to click on Allow when you get the prompt for requesting access to location. Now what is the new statement that I have written to extract the current month and latitude? Well, that is to be discussed in another post! Stay tuned!