30 Seconds of Code

1.2.3 verified Fri May 01 auth: no javascript

Curated collection of useful JavaScript snippets that can be understood in 30 seconds or less. The npm package provides a function library with over 200+ snippets covering array, object, string, utility, and DOM operations. Current stable version is v14.0.0 as of recent releases, with a major infrastructure overhaul. Key differentiators: snippets are small, self-contained, and educational; package is published on npm and CDN; includes both CommonJS and ESM support. The library is maintained by the 30-seconds organization and has a vibrant community with multiple related projects.

Common errors

error Cannot find module '30-seconds-of-code' ↓

cause Package not installed or wrong import path.

fix

Run 'npm install 30-seconds-of-code' and ensure import is correct.

error TypeError: _30s.average is not a function ↓

cause Using default import but calling named function incorrectly.

fix

Use _30s.default.average or import named functions directly.

error Module not found: Error: Can't resolve '30-seconds-of-code' ↓

cause Webpack/bundler cannot resolve package; missing npm install.

fix

Ensure package is in node_modules and bundler is configured correctly.

Warnings

breaking v13.0.0 made articles typeless, which may affect snippet types. ↓

fix Use TypeScript with caution; check snippet documentation for type changes.

gotcha Package includes many small functions; bundling all may increase size. ↓

fix Use named imports to tree-shake in bundlers like Webpack or Rollup.

deprecated Some snippets may not be optimized for production; marked in documentation. ↓

fix Review snippet disclaimers before using in production code.

gotcha ESM import requires Node.js >=12 or bundler; older Node may need CommonJS. ↓

fix Use CommonJS require for Node <12 or transpile with Babel.

Install

npm install 30-seconds-of-code

yarn add 30-seconds-of-code

pnpm add 30-seconds-of-code

Imports

_30s
wrong
```
const _30s = require('30-seconds-of-code')
```
correct
```
import _30s from '30-seconds-of-code'
```
Default export; CJS require still works but ESM is recommended for modern environments.

average

wrong

const average = require('30-seconds-of-code').average

correct

import { average } from '30-seconds-of-code'

Named import is tree-shakeable; CJS destructure also works but less optimal.

all

wrong

import _30s from '30-seconds-of-code'; const all = _30s.all

correct

import { all } from '30-seconds-of-code'

Direct named import preferred; using default then property is extra step.

Quickstart

Shows how to import and use the library via ESM, CommonJS, and CDN with a simple average function.

// Install: npm install 30-seconds-of-code
import _30s from '30-seconds-of-code';
// Example: use the average function
const result = _30s.average(1, 2, 3);
console.log(result); // 2

// Or use ES module with named import
import { average } from '30-seconds-of-code';
console.log(average(1, 2, 3)); // 2

// Using CommonJS
const _30s = require('30-seconds-of-code');
console.log(_30s.average(1, 2, 3)); // 2

// CDN in browser:
// <script src="https://unpkg.com/30-seconds-of-code@1/dist/_30s.es5.min.js"></script>
// <script>_30s.average(1, 2, 3);</script>