How to generate a random integer in JavaScript
Łukasz HoleczekFollow Łukasz Holeczek on GitHubConnect with Łukasz Holeczek on LinkedInFollow Łukasz Holeczek on X (Twitter)Generating random integers is crucial for dice games, array indexing, ID generation, and implementing features like random selection, lottery systems, or procedural content creation in JavaScript applications.With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented random integer generation extensively in components like pagination randomizers, content selectors, and game mechanics where discrete whole numbers are required for proper functionality.From my extensive expertise, the most reliable approach is combiningMath.random() withMath.floor() to convert floating-point numbers to integers within specific ranges.This method provides precise control over the range and ensures truly random distribution of whole numbers.
UseMath.floor() withMath.random() to generate random integers within a specified range.
constrandomInt=Math.floor(Math.random()*10)// Result: 0, 1, 2, 3, 4, 5, 6, 7, 8, or 9constrandomBetween=Math.floor(Math.random()*(10-1+1))+1// Result: 1, 2, 3, 4, 5, 6, 7, 8, 9, or 10TheMath.floor() function rounds down to the nearest integer, converting the decimal result fromMath.random() to a whole number. In the first example,Math.floor(Math.random() * 10) generates integers from 0 to 9 (inclusive). For a range between two values, use the formulaMath.floor(Math.random() * (max - min + 1)) + min. The second example generates integers from 1 to 10 inclusive. The+ 1 ensures the maximum value is included in the possible results.
Best Practice Note:
This is the same approach we use in CoreUI components for generating random IDs, selecting random items from arrays, and implementing game mechanics across our component library.Create a reusable function:const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min. For array index selection, useMath.floor(Math.random() * array.length). Always verify your range calculations to ensure both minimum and maximum values can be generated as expected.
Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.
About the Author
Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 25 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.
With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.
Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.
Learn more about CoreUI’s solutions and see how your business can benefit from working with us.
