Forem: Phillip Shim

Let's write the most famous JavaScript function together: Array.map

Phillip Shim — Tue, 18 Aug 2020 17:51:28 +0000

The map method is one of the most well-known Array methods in JavaScript. It's a handy way of transforming an array without modifying it to fit your needs. Today, Let's dissect the map method and implement it ourselves to understand what happens under the hood 📚.

Array.prototype.map

We should first talk about what it does first. If you already know what it does, feel free to skip to the next section. I will give my best try to explain the concept.

The map method is a higher-order function (A function that takes in a function as arguments or returns a function) that executes a passed in callback function on each of the items in the invoked array. Upon the completion of the iteration, it returns a newly transformed array that contains the results. Here are 2 examples

const numbersArray = [1, 2, 3, 4, 5]

// example 1
const squaredValues = numbersArray.map((number) => {
  return number * number
}) // => [1, 4, 9, 16, 25]

// example 2: conditional mapping
const squaredEvenIndexValues = numbersArray.map((number, index) => {
  if(index % 2 === 0) {
    return number * number
  }

  return number
}) // => [ 1, 2, 9, 4, 25 ]

Strategy

Essentially there are 2 approaches we can take. We could add make it part of the Array prototype. We could get access to the array using this keyword.

Array.prototype.myMap = function(){
  this
}

But this approach is not ideal because it creates unexpected results where an array could be iterated and its properties can spill out unwarranted. ESlint will complain as well.

Array prototype is read-only, properties should not be added. (no-extend-native)

The better approach is simply creating a regular function that takes in an array as an argument☑. Here is how it would be used.

myMap(['hello', 'my', 'name', 'is', 'phillip'], (item) => {
  return item[0].toUpperCase() + item.slice(1)
}) // => [ 'Hello', 'My', 'Name', 'Is', 'Phillip' ]

The above code capitalizes every word inside an array and returns a new array with it. Let's breakdown what's going on with this snippet.

myMap takes an array as the first argument and a callback function as the second argument.
The callback function is supplemented with each item as the first parameter.
Once an operation is done in the function, the value is returned.
The original array is not mutated. A new array is received with new values.

Armed with this knowledge, let's shake and bake.

Implementation

Let's start out with our boilerplate by creating a skeleton code with a basic setup.

const myMap = (array, fn) => {
  const results = []

  return results
}

We could've used callback instead of fn too. We already know we will be returning a new array so this is included ✌. Then we need to invoke the callback function on every iteration.

const myMap = (array, fn) => {
  const results = []

  for(let i=0; i<array.length; i++) {
    fn()
  }

  return results
}

Remember that we are passing each item to the callback function and replace each value with the modifier!

const myMap = (array, fn) => {
  const results = []

  for(let i=0; i<array.length; i++) {
    const item = array[i]
    results.push(fn(item))
  }

  return results
}

There it is, this is the jist of the map method. However, we are not done yet. I haven't disclosed the full details of the map method. In addition to receiving each item inside the callback function, index and the array itself are passed as the rest of the arguments. So the code would like this now.

const myMap = (array, fn) => {
  const results = []

  for(let i=0; i<array.length; i++) {
    const item = array[i]
    results.push(fn(item, i, array))
  }

  return results
}

🌸 Awesome there it is! That wasn't too bad. The hurdles to get through when you are implementing native functionalities are actually trying to read word by word how you are using them in your actual codes and imagine what's going on underground. How about now you try to go and implement the 'filter' or even more difficult 'reduce' methods now? Doing so will give you aha moments that will strengthen ✊ your JavaScript skills.

Thanks for reading! 🙌.

How to create multi-line

Phillip Shim — Sun, 31 May 2020 14:05:34 +0000

Intro 👋

Recently I found myself exploring around https://www.frontendmentor.io/challenges. This is a website where a set of challenges are presented that prompt users to follow challenge's mockup design files. The users then attempt to replicate pixel perfect copy websites. I decided to take on a challenge called four card feature section targeted for newbies 😎. It seemed pretty easy-cheesy-busy task until I saw the very first thing I wanted to build out: its title!

The challenge 👊

Forget about the gray paragraph and focus on the title. You can see that it spans over two lines instead of traditional one line and the lines have different looks than one another!

Breaking into smaller problems 🔡

Approach No. 1

My naive intuition was to create two <h1> elements, one for each line like this.



<h1>Reliable, efficient delivery</h1>
<h1>Powered by Technology</h1>

It appears as a viable solution because <h1> elements are block level elements and they will take full width of its container and break into a new line. However, that will hurt the site's SEO score. <h1> indicates the most important heading and there should only be one per entire website. If your web browser's crawler sees more than one h1 heading, it will deduct off some SEO points.

Approach No. 2

Maybe we should wrap the entire title within a single <h1> but how can we take care of line break along the lines? Well, there's a HTML just for that represented as <br />. It's literally called break line and is a self-closing tag. So now we can do something like this.



<h1>
Reliable, efficient delivery <br />
Powered by Technology
</h1>

The downside is that we can't really control the height of the gap between the line break but this is sufficient for our needs :)

Approach No. 3

Now the line break is taken care of, let's deal with different stylings per line. What I like to do is create a default style for the h1 heading and create a wrapper element around the 2nd line to apply separate stylings. This begs the question: which wrapper element?
I will use <span>. <span> is a generic HTML element that wraps around inline elements whereas <div> is a generic wrapper for anything other than inline elements. Now, it looks like this.



<h1>
Reliable, efficient delivery <br />
<span class="bold">Powered by Technology</span>
</h1>

Then you could target span inside of h1 to give heavier font weight and a different color.



h1 span {
  font-weight: 700;
  color: hsl(234, 12%, 34%);
}

This solution isn't bad that it does what we expect it to do and it's common to see the use of <span> to achieve similar results elsewhere. But I am not a big fan because span is way too generic hence no semantic meaning associated with it.

Approach No. 4

We already know we are going to make the 2nd line of the title bolder, so why don't we actually utilisize an HTML element that takes care of that? Here comes the <strong> tag. (Technically, we could use <b> tag to see the same result but it has a different semantic meaning).



<h1>
Reliable, efficient delivery <br />
<strong>Powered by Technology</strong>
</h1>

Then in css, you just have to change its color since bold style is already applied by the markup!

Takeaways 💡

There are lots of benefits that come with the use of semantic elements. It helps with the SEO score, gives more clear and easily understandable HTML structure, may save you lines of css, make the site more accessible, etc... I suggest you to learn some semantic elements found in HTML5. https://html5-documentation.now.sh/ <- shameless plug, this was my personal side project!

The Dead Simple Way to Get Weather Information for Your Next JS Project

Phillip Shim — Mon, 18 May 2020 21:17:11 +0000

With the recent announcement of Apple acquiring DarkSky API. DarkSky API has currently closed down any new enrollments. The other compatible alternative I found one was the OpenWeatherMap.

The Challenge

Using APIs raw from their official documentation is cumbersome and cognitively taxing. You need to be mindful of all the different query parameters, filters and many options to build out URLs for different methods. You also need to deal with inconsistent conventions and refer back to the docs frequently get them straight.

For example, take a look at a few ways to get current weather from OpenWeatherMap. 😰

The Solution

How about we abstract from building out the URLs by yourself and let a library to the heavy-lifting for you? Now Introducing

openweathermap-ts 🎉

The library is built with

Typescript - Get all the type checking and IntelliSense goodness out of the box.
Promises - No callbacks FTW! 💪

Now it's as beautiful as

It's declarative, intuitive, and flexible!
Typing in arguments hurt your wrists? Don't worry, just set up the config object once and you are good.

The efficiency is crazy with easy-to-use methods you can easily get up and going. Don't deal with anything other than business logic. Build smart and use the library. 😎

Repo

https://github.com/shimphillip/openweathermap-ts

Thank y'all for taking some time to read the article!

Chuck Norris Says - Random Quote Fetcher

Phillip Shim — Sun, 10 May 2020 18:55:29 +0000

I recently built out an random quote machine to grab some funny Chuck Norris jokes. This was such a fun project, I wanted to share with y'all!

Chuck Norris Say🃏

https://chuck-norris-says.netlify.app/

repo

https://github.com/shimphillip/chuck-norris-says

Contributing

Feel free to contribute via Issues/PRs.

Thanks! Enjoy.

Pokedex: Gotta Search'em All

Phillip Shim — Sun, 26 Apr 2020 21:13:26 +0000

I recently built out an interactive Pokedex to mimic what Pokemon Trainers would use :). This was such a fun project, I wanted to share with y'all!

Gotta Search'em All🔍

https://gotta-search-em-all.netlify.app/

repo

https://github.com/shimphillip/gotta-search-em-all

Contributing

Feel free to contribute via Issues/PRs.

Get daily weather updates through SMS

Phillip Shim — Tue, 14 Apr 2020 19:23:34 +0000

What I built

It's called Weather Me ⚡. It's a text message service where a user can signup and receive weather summary updates daily based on the user's location. The text comes around 8 AM and contains forecast by 3-hour intervals until midnight.

Why did I build it? Check out the first post in the series!

Category Submission

Interesting Integrations

Demo Link❔

Simply visit https://weather-me-54a7d.web.app/

Signup then fill out the form with your zip code and phone number. It's that simple! 💪

Disclaimer
Sending texts do cost money. I'm currently using free credits provided by Twilio through a promotion code. Since this is an experimental app I might delete your account at times without letting you know.

Link to Code 📝

Instructions and details on how to set up the project and what I would do to make the project better.

https://github.com/shimphillip/weather-me

Gotchas and limitations 👻

The 3-hour forecasts don't give information about the current time the API call is made. Therefore, when you receive the text in the morning around 8 AM, it will likely give start from 9 AM or 10 AM.

Notice the demo is only available in U.S. The scheduled to receive texts are in Central Time.

Be patient! These firebase lambdas functions unfortunately take a long time to wake up from hibernation if they haven't been used for a long time. I am talking 5-10 seconds and maybe up to 20 seconds 💩. I haven't implemented spinners or alerts to notify the loading state yet. So I would at least wait 10 seconds when making CRUD operations.

Techstack 📚

Vanilla JS
A snippet of Vuejs
Twilio SMS API
OpenWeather API
Serverless functions from firebase
Firestore - Realtime cloud database
Bootstrap framework - sketchy theme

The Journey 🚩

I started out on Wednesday, April 8th, 2020 and finished today on Tuesday, April 14th, 2020. So it took about 6 days to complete dedicating about 1-2 hours each day. My initial plan had way more features but as it always is, you make some compromise along the way for a side project like this 😂. But I give myself a lot of credit for actually finishing the project 🔥.

I took this project as a learning opportunity to get my hands dirty on some new tech stacks I've never played around with. Thus I stumbled into lots of roadblocks and took some grueling hours and efforts to get unblocked. Here are a few things I learned on this journey.

The lessons 📒

Twilio is legit. I can tell that it's a very software-engineer oriented company with smart individuals. The API documentation is almost flawless and is pleasant to explore. Their blogs are also top-notch with interesting topics and innovative practices to up your dev knowledge. Plus they provide really cool APIs and services and there are lots of them!
Vanilla JS is fun yet could be difficult to organize. I am so used to using JS frameworks such as React and Express that utilize commonJS and import/export modules to easily scaffold your project. Throwing script tags in the index.html and searching files through your project directory could be confusing at times. Maybe I should've gone with Parcel📫 or something similar to provide me some basic template and skeleton.
VueJS gave me flashback when I used to use Angular JS 1.x version. I love the idea of data binding and encapsulating the logic from the model to a view directly. But I disliked learning directives again and whatnot that is framework-specific and not language agnostic.
OpenWeather API is cool! I initially thought about going with DarkSky API but realized that to grab weather info, I need to pass in geolocation with coordinates. Well, I could've asked users to provide that for me😧 or use Google's reverse geo lookup API. But didn't want to do neither so just went with OpenWeather API. The free plan doesn't provide too many options but it served fine for my app.
Bootstrap 4 is great. The earlier versions of the Bootstrap CSS framework had some limitations. I remember it was very difficult to add custom styles to my app that's already wrapped around with Bootstrap. However, the current version is niftier, it gives developers more fine-grained control with utility classes, better responsiveness, etc...
Serverless ☁. I have mixed feelings about this. Having no backend server that I need to manage is awesome but that also means I am giving up a lot on the flexibility on what I can do on the server-side. With that said, firebase is nice that it gives you tools to kick off things with convenience. There are functions you can kick off using HTTP requests and there are also background trigger functions that listen for events that come in handy often. The biggest complaint I have is the firebase cloud functions have insanely high latencies. I understand that if the lambdas haven't been used in a while, they go to sleep. AWS Lambda functions at most probably take less than a second to get up and act but it feels like Google cloud functions that more than 3 seconds most of the time and sometimes up to 10 seconds to serve the incoming request💀. But I still liked that firebase provides one place to control auth, DB, functions, hosting, etc...

In closing... 👋

There is so much you can do within a given deadline time, working solo and a fulltime job with a family. One needs to make plans, strategize, learn how to make tradeoffs and persevere.

Finally, what a fun experience. Gratitude and respect towards for Twilio and Dev.to to collaborate and come up with such a fun hackathon during this perilous time and the lockdown. 안뇽👍.

Get customized weather updates through SMS

Phillip Shim — Wed, 08 Apr 2020 19:26:07 +0000

This is the initial scratch of the project in mind.

The Problem

Looking up weather sounds trivial but most scenarios involve couple steps.

A user navigates through a myriad of apps on the person's phone to find a weather app
Click the app

A user navigates finds a browser in the person's phone or computer
Click to open the app
Type in words like 'weather' or 'forecast'
Click on the resulting links

The solution (MVP)

Provide a web interface where a user can register and setup preferences on how they want to receive weather updates through texts. Think of it as cronjobs😊. For example the user can choose to receive daily weather update each morning at 8AM. Besides the general summary, the user can also customize what kind of information they want such as humidity level, expected windspeed, etc... This will integrate 3rd party service API such as darkSky API.

Expansion

User can text for weather anytime with keywords such as 'current', 'daily, etc..

HTML5 Documentation

Phillip Shim — Tue, 07 Apr 2020 22:04:50 +0000

This was a fun and cute front-end side project I worked on this past weekend. I grabbed the contents of the docs from w3schools.

Feel free to contribute to the project!💯

Live at: https://html5-documentation.now.sh/
Source code: https://github.com/shimphillip/html5-documentation

Tech stacks and libraries💻:

React
Next.js
React-highlight
styled jsx

Feel free to pitch in ideas on how I can make this project matter!

Homebrew: Beginner's guide to installation and usage. Mac OS X

Phillip Shim — Thu, 05 Mar 2020 05:18:06 +0000

Homebrew is brewed for your success. It definitely should be one of the software you should install on your machine as soon as you get your new shiny brand-new computer. Although it's not too late if you have been using it for a while (wink).

According to the official website of Homebrew, it declares 'Homebrew is the missing package manager for OS X and Linux and it installs the stuff you need that Apple (or your Linux system) didn’t.' If you have ever used NPM(Node Package Manager) before, it works in a similar way.

Without you going through hassles of individually downloading installer files, execute them and move them to the application folder. Within the terminal, you can easily issue simple commands to automate downloading and installing software, view the packages that your computer has and maintain them easily.

Without further ado, let's get this started.

Installation Steps

First, open up your terminal by hitting (⌘ + space), then start typing in the word 'terminal'. Hit enter to open up the terminal.
You need to download and install xcode-select: A command-line utility program required to install Homebrew. Follow the command prompt!

xcode-select --install

Download and install Homebrew.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Homebrew gets installed globally and can run from anywhere. Verify Homebrew is correctly installed by running

brew

Which will output a short info page.

Important terms

Formula: A simple ruby script that runs a CLI program meaning any software that runs inside the terminal.

Cask: An extension to brew that allows management of graphical applications through the Cask project. It covers pretty much all desktop apps with exception to CLI apps.

Practical commands

Search

brew search [TEXT|/REGEX/]

Searches for brew formulae. Typing simply brew search lists all the available formulae that's ever published via Homebrew. Passing in an argument as a string or a regex will search a corresponding formula or a cask. If it can't find a perfect match, it will perform an inclusive search and return any results that contain the argument you passed. E.g. Running brew search zs ->

Install

brew install Formula... // homebrew, node, speedtest-cli
brew cask install Cask... // firefox, visual-studio-code, discord

Simple as it sounds! It will install a formula or a cask. What are some useful formulas you can download? A good one is 'speedtest-cli'. The most popular speed test web app out there is https://www.speedtest.net/ by Ookla which displays a few annoying ads. You can bypass all these and simply install a CLI version of the app.

brew install speedtest-cli
speedtest-cli // shows download/upload speed of your connection

Uninstall

brew uninstall Formula...
brew cask uninstall Formula...

Uninstalls installed formulae or Casks.

List

brew list [Formula...]
brew cask list [Cask...]

Without arguments, list installed formulae or Casks.
With arguments, show where the matched apps are installed in the filesystem.

Update/Upgrade

brew update // updates Homebrew
brew upgrade [Formula...] // updates installed Formulae and Casks

Troubleshooting

brew doctor

Scans through installed formulae and Casks to apply any fixes.

After all, Homebrew is so awesome that it makes really convenient for users to download and install pretty much any applications on the terminal. It also provides tools to easily manage the packages through updating, perform automatic troubleshooting and uninstalling. All hail to Homebrew!!

What is one VSCode extension you can't live without and why?

Phillip Shim — Wed, 21 Aug 2019 00:05:42 +0000

I just started my new job not too long ago as a full stack developer. Wanted to get your inputs!

Asynchronous JavaScript Under 5 Minutes

Phillip Shim — Sun, 11 Aug 2019 03:54:06 +0000

JavaScript makes use of callbacks, promises, async and await features to support Asynchronous Programming. We won't dive into too many details with each topic, but this article should be a gentle introduction to get you started. Let's commence!

Example setup

Take a look at this simple example. We have an initial array with pre-filled numbers, 'getNumbers' function which loops over the array and outputs each item in the array and the 'addNumber' function to receive a number and add it to the array.

const numbers = [1, 2];

function getNumbers() {
  numbers.forEach(number => console.log(number))
}

function addNumber(number) {
  numbers.push(number);
}

getNumbers(numbers) // 1, 2
addNumber(3);
getNumbers(numbers) // 1, 2, 3

The problem

Now, let's suppose both of our function calls take some amount of time to execute because we are making requests to a backend server. Let's mimic it by using built-in setTimeout methods and wrap our logic inside them.

const numbers = [1, 2];

function getNumbers() {
  setTimeout(() => {
    numbers.forEach(number => console.log(number))
  }, 1000)
}

function addNumber(number) {
  setTimeout(() => {
  numbers.push(number)
  }, 2000)
}

getNumbers(numbers) // 1, 2
addNumber(3)
getNumbers(numbers) // 1, 2 ... Why?

Take a look at the console now. It's behaving differently than before. This is because the 'addNumber' function takes 2 seconds to run and the 'getNumbers' function takes a second to run. Therefore, 'addNumber' function gets executed after two of our 'getNumbers' get called. 'addNumber(3)' function call won't wait for its previous line to finish.

Callbacks

Invoking asynchronous calls line by line won't work in this case. Is there any other way to make sure a function gets executed only after another function finishes executing? Callbacks can help us! In javascript, functions can get passed around as arguments. Therefore, we could have 'getNumbers' function get passed into addNumber function and execute it once a number has been added.

const numbers = [1, 2];

function getNumbers() {
  setTimeout(() => {
    numbers.forEach(number => console.log(number))
  }, 1000)
}

function addNumber(number, callback) {
  setTimeout(() => {
  numbers.push(number)
  callback();
  }, 2000)
}

getNumbers(numbers) // 1, 2
addNumber(3, getNumbers) // 1, 2, 3

Here is the flow of our codebase. 'getNumbers' is invoked after 1 second. 'addNumbers' is invoked after 2 seconds (1 second after 'getNumbers'). After it pushes the number to the array, it calls 'getNumbers' again, which takes an additional 1 second. The program fully terminates after 3 seconds. To learn more about callbacks, I wrote an article in-depth before.

Promises

Here is the rewrite of the same code. We will no longer use a callback and call it directly so let's modify our 'addNumber' function to not take in the 2nd argument anymore. Instead, it will return a promise using new Promise() keyword immediately. A promise is able to use resolve and reject, given from arguments that you can call after certain actions. If everything goes well, you can call resolve().

const numbers = [1, 2];

function getNumbers() {
  setTimeout(() => {
    numbers.forEach(number => console.log(number))
  }, 1000)
}

function addNumber(number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      numbers.push(number);
      resolve();
    }, 2000)
  });
}

addNumber(3).then(getNumbers) // 1, 2, 3 after 3 seconds

When the promise is actually returned, we can chain it by using then keyword. You can then pass in a function definition to be called after your promise is resolved! Awesome! However, what if there was an error such as a network timeout? We could use the reject keyword and indicate that an action was unsuccessful. Let's manually reject it.

const numbers = [1, 2];

function getNumbers() {
  setTimeout(() => {
    numbers.forEach(number => console.log(number))
  }, 1000)
}

function addNumber(number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      numbers.push(number);
      const isAdded = false;
      if (isAdded) {
        resolve();
      } else {
        reject("There was an error")
      }
    }, 2000)
  });
}

addNumber(3).then(getNumbers).catch((e) => console.log(e)) // There was an error

Notice that we can pass in a string which is caught by using .catch and is available via its first argument. We could do the same thing with the resolve method as well by passing in some data and receive it inside the then() method.

Async & Await

Let's take the same code and use async and await! Here is a spoiler! We will still need to return a promise, but the way we handle it is different. Take a look.

const numbers = [1, 2];

function getNumbers() {
  setTimeout(() => {
    numbers.forEach(number => console.log(number))
  }, 1000)
}

function addNumber(number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      numbers.push(number);
      const isAdded = true;
      if (isAdded) {
        resolve();
      } else {
        reject("There was an error")
      }
    }, 2000)
  });
}

async function initialize() {
  await addNumber(3);
  getNumbers();
}

initialize(); // 1, 2, 3

Instead of chaining then and catch to the addNumber invocation, we created a function called initialize. Using the 'await' keyword requires its wrapper function to have 'async' keyword prepended. Also, the 'await' keyword makes our code more intuitive to reason about because our code reads line by line now even though it's async!

Now, How about error handling?

const numbers = [1, 2];

function getNumbers() {
  setTimeout(() => {
    numbers.forEach(number => console.log(number))
  }, 1000)
}

function addNumber(number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      numbers.push(number);
      const isAdded = false;
      if (isAdded) {
        resolve();
      } else {
        reject("There was an error")
      }
    }, 2000)
  });
}

async function initialize() {
  try {
    await addNumber(3);
    getNumbers();
  } catch (e) {
    console.log(e);
  }
}

initialize(); // There was an error

Let's use try and catch inside our initialize function. If a promise is rejected, our catch block will run.

Summary

We learned a few different ways on how to handle different methods of handling asynchronous JavaScript. As for me, I personally prefer writing async and await at all times of how easy it is to write and think about. But others have their places especially callbacks as some APIs only support them. Thank you for reading and let's write some serious code with our newly acquired knowledge!

This example code was inspired by Brad Traversy's youtube video.

Working with random numbers in JavaScript

Phillip Shim — Mon, 29 Jul 2019 05:09:52 +0000

Unpredictable behavior makes our apps more interesting when done right. For example, imagine card games where you get to keep the same set of cards to play every round instead of shuffling them around at the end of each game to receive new cards! We definitely need some kind of randomization to make our life more fun :)

Math.random()

In JavaScript, we have a built-in method called Math.random(). We won't go into details of how Math.random() is implemented under the hood but let's talk about utilizing Math.random() to generate random numbers we want. Let's first run Math.random() in a console.

Math.random() // 0.34484257625111736

Math.random() returns a floating number(number with decimal) between 0 (inclusive) and 1(exclusive). Knowing this behavior, we can set it up so that it scales to the range we want! Let's suppose we want a random integer(number without decimal) between 1 and 10. Here is how we would do this.

Math.floor(Math.random() * 10) + 1 // 4

We multiply the output of Math.random() by 10, which will always return a floating number between 0 and 9.9999999... Because 0 times 10 is still 0 and 0.9999999... times 10 is 9.9999999... (Math.random() never reaches 1).

Secondly, we use Math.floor() to round it down to the nearest integer. The output now returns an integer between 0 and 9.

Then, we will add 1 to offset our output! Our formula now generates a number between 1 and 10.

A better solution?

We could actually shorten our code a little bit by using Math.ceil() instead of Math.floor().

Math.ceil(Math.random() * 10) // 8

Math.ceil() takes a number and rounds up to the nearest integer, which acts opposite of Math.floor(). It means there is no longer a need for +1 in the end.

Choose whichever you like, although I've seen the first method more frequently.

Reusability for the win!

If you have been reading my articles. You know how much I focus on making codes reusable. Using the above technique we learned, let's make a versatile function that takes in a minimum number and a maximum number to put out a number between the range of 2 arguments. Actually, before I code it up for you. Why don't you give it a try as an exercise?

The steps

Did you get it? Don't worry if you didn't. It's actually pretty hard to wrap your head around it for the first time.

We know Math.random() gives a floating number from 0 to 0.9999999... We also know Math.floor() rounds the number down to the nearest integer. Therefore, Math.floor(Math.random()) always results in 0. Well, what do we do to get more than one integer as a result? The possible number inside Math.floor() needs to be greater than 1!

Recall that multiplying by 10 to Math.random() gives us 10 possibilities. What if we multiply by 5 or 2?

Math.floor(Math.random() * 10) // 0 - 9 (10 possibilities)
Math.floor(Math.random() * 5) // 0 - 4 (5 possibilities)
Math.floor(Math.random() * 2) // 0 - 1 (2 possibilities)

Okay, let's give a scenario and say we want a random integer in the range of 10 and 20. Let's pass in 10 as our min and 20 as our max. That means we need to multiply Math.random() with the difference between the max and the min. Here is what we have so far.

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min))
}

This actually converts to exactly what we had in the beginning for our scenario.

Math.floor(Math.random() * (20 - 10)) // 0 - 9 (10 possibilities)

However, we want a few things to be different. Notice that we are now looking for 11 possibilities instead of 10 possibilities because we want to include 10 and 20 (10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20). So let's add 1 to our formula.

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1))
}

Which in our scenario is

Math.floor(Math.random() * (20 - 10 + 1)) // 0 - 10 (11 possibilities)

At last, we also care about our range along with the number of possibilities. What do we need to bump up from 0 - 10 to 10 - 20? Adding the min at the end. Here is the solution.

The solution

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Our scenario yields

Math.floor(Math.random() * (20 - 10 + 1)) + 10 // 10 - 20 (11 possibilities)

Summary

Math.random() is quite useful and powerful that can be used for many different purposes. From randomly picking a value from a given array to generating a different number on rolling on dice is all done through Math.random(). I hope you get to play with it in near future projects if you haven't had a chance to use it yet. Thanks for reading!