phuocng / 1loc

What's your favorite JavaScript single LOC (line of code)?

Favorite single line of code

What's your favorite JavaScript single LOC (line of code)? Let me know!

Contributing

Pull requests are welcomed. To submit your favorite JavaScript single line of code, please create a markdown file, and put it in the contents folder.

About

This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.

Be my friend on

• Twitter
• Github

1loc's Issues

Any plan to publish npm package based on this project ?

Like a modern lodash.

Assigning to a new array literal does not empty an array

const empty = arr => arr = [];

This code snippet will not empty the arr argument, as shown below:

[FEAT] Add a search bar to find snippets

Add a search bar to the header section of the website 1loc.dev. So users can search the snippets they need. I don't know how to do it. The snippets are in MD files. Does anyone know how to add the search functionality to it?

Check if an object is empty

Check if an object is empty

Find the index of the last matching item of an array

isEqual is buggy

Hi,

You should alert that

const isEqual1 = (a, b) => JSON.stringify(a) === JSON.stringify(b)

isn't similar to

const isEqual2 = (a, b) => a.length === b.length && a.every((v, i) => v === b[i])

and both are valuable (and similar) only if all array elements are boolean|finite number|string

// buggy if NaN
isEqual1([NaN], [NaN]) // => true
isEqual2([NaN], [NaN]) // => false

// buggy if object
// plain object
isEqual1([{a: 42}], [{a: 42}]) // => true
isEqual2([{a: 42}], [{a: 42}]) // => false
// array
isEqual1([[42]], [[42]]) // => true
isEqual2([[42]], [[42]]) // => false
// Date
isEqual1([new Date('2021-03-30')], [new Date('2021-03-30')]) // => true
isEqual2([new Date('2021-03-30')], [new Date('2021-03-30')]) // => false

And the json comparaison can be dangerous

isEqual1([NaN], [null]) // => true
isEqual1([Number.POSITIVE_INFINITY], [Number.NEGATIVE_INFINITY]) // => true
isEqual1([Number.POSITIVE_INFINITY], [null]) // => true

The only correct way to compare would be to test type of each element then value, in a recurse manner, but it needs a very long line of code ;-) (eg lodash implementation

You can limit to the area where the code is valid with something like

// returns undefined when we can't decide in a such easy way
const isEqual = (a, b) => a.every((v, i) => (['boolean', 'string'].includes(typeof v) || (typeof v === 'number' && !Number.isNaN(v)))) ? a.length === b.length && a.every((v, i) => v === b[i]) : undefined

// or throw (which seems better in real life, because undefined is falsy and previous function can leads to bugs hard to detect)
const isEqual = (a, b) => a.length === b.length && a.every((v, i) => { if (['boolean', 'string'].includes(typeof v) || (typeof v === 'number' && !Number.isNaN(v))) return v === b[i]; throw Error('isEqual can only compare array of boolean|string|number') })

Missing depth parameter to Array.prototype.flat method

In the last flat implementation, the depth parameter is missing. MDN

Convert URL parameters to object

Generate a random IP v4 address

what is the diffrence between <T> and <T, _>

i can't understand

Compare two arrays regardless of order is simply incorrect

https://github.com/1milligram/1loc/blob/cecbfa239c1d6c9d527518c157b9ea20c4140c9b/snippets/array/compare-two-arrays-regardless-of-order.md?plain=1#L10

The Set object lets you store unique values of any type, whether primitive values or object references.

And an array can have duplicate values.

So it fails simplest of tests: isEqual([1], [1, 1]);
Checking for length would be incorrect too, consider such case: isEqual([1, 1, 2], [1, 2, 2]);

Also concerns from #414.

And lastly one should keep in mind that:

const a = {a: 1};
const b = {...a};
a !== b; // true

Maybe it should be documented on equality function page.

Empty an array snippet

Really? If you want, I can create snippet for "empty any variable", see: "var = null", is it OK for you?

I can also create some snippets like "set variable to one", its easy: "a = 1;", are you need for snippets for create variables from one to ten? Its easy too:
a = 1;
a = 2;
a = 3;
a = 4;
a = 5;
a = 6;
a = 7;
a = 8;
a = 9;
a = 10;

Please, add my snippets to your stupid list.

Add disclaimer to isPowerOfTwo

Saw this repo b/c it was in js weekly newsletter. B/c of the way bitwise AND work on numbers in JS (casting down to 32-bit signed integers), the isPowerOfTwo function will return a lot of false positives:

// Any non-integer `< 2 ** 32` will be floored.
// Below, the bitwise operation turns 1.5 into 1.
isPowerOfTwo(1.5); // true

// Only the least-significant 32 bits are saved in bitwise ops.
// Below, the bitwise operation turns number into 1.
isPowerOfTwo(2 ** 40 + 1); // true

though afaik it should work with it's BigInt variant:

const isPowerOfTwo = number => (number & (number - 1n)) === 0n;

isPowerOfTwo(2n ** 40n + 1n); // false 

Maybe add a disclaimer to the function specifying that it only works on positive integers <= 2 ** 32?

About Contribution

I'm sorry, I'm sorry, I'm not very good at GitHub and I seem to be making a mess of commits.

fool questions

This is the first time I submit code in someone else's warehouse. May I pull your code to my computer, and then after I modify it, can I create a new branch for submission? Or how should I put the modified version? Code to you.

Mobile view not responsive

Looking at this on iOS 15.2 Safari on an iPhone 11 Pro, it doesn't render correctly at all.

Screenshot:

Compare two arrays regardless of order

This code doesn't work in some cases:
// Or
const isEqual = (a, b) => a.length === b.length && a.every((v) => b.includes(v));

For example:
isEqual(['a', 'a'], ['b', 'a'])
gives true, but it must be false.

Create an array of numbers in the given range

Should Be
const range1 = (min, max) => Array(max - min + 1).fill(0).map((_, i) => min + i);

Checking for an empty array can be faster

I made a simple performance test and it shows that getting length of array keys is not optimal code. I propose change it to a.filter(Boolean).length > 0. This code can be faster from 4.5 (Firefox) or 5.9 (Chrome) to 26 (Safari) times.

Convert number to excel column

write less, do more

My fav is jQuery. I do not include the license line!

https://code.jquery.com/jquery-3.5.1.min.js

Add a copy of the MIT license to the repository

The repository currently doesn't contain a copy of the MIT license, even though it's specified in package.json. It should probably be added.

Compare two arrays regardless of order has siteeffects

Hi there,

your Sippet for comparing Arrays has an important downside. It sorts the original arrays, which is not the espected behaviour.
I suggest to fix it by cloning the arguments before sorting it or using Sets if number of sam items does not matter.

The current snippet:
// a and b are arrays
const isEqual = (a, b) => JSON.stringify(a.sort()) === JSON.stringify(b.sort());

// Examples
isEqual([1, 2, 3], [1, 2, 3]); // true
isEqual([1, 2, 3], [1, 3, 2]); // true
isEqual([1, 2, 3], [1, '2', 3]); // false

Not working on window machine

When I tried to run npm run dev-server I get this error:

D:\Desktop\1loc>npm run dev-server

> 1loc@ dev-server D:\Desktop\1loc
> npm run copy && npm run data && webpack-dev-server


> 1loc@ copy D:\Desktop\1loc
> rm -rf dist && mkdir dist && cp -rf public/* dist

'rm' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 1loc@ copy: `rm -rf dist && mkdir dist && cp -rf public/* dist`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 1loc@ copy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!   \2020-07-28T14_20_19_677Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 1loc@ dev-server: `npm run copy && npm run data && webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 1loc@ dev-server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!    -debug.log

is it the rm -rf command is not for window?

[CHORE] Add issue and pull request templates

People tend to provide feedback as words come into their head; templates are always a great way of helping people to structure what they need to write, and help you to ask them what you are interested in.

GitHub allows you to create templates for Issues and Pull Requests.

Also, check out this awesome-github-templates GitHub repository that contains info about how to create templates, as well as a couple of examples.

Note: The templates can be changed according to this project

My suggestions for issue & PR templates

• ISSUE_TEMPLATES
• PULL_REQUEST_TEMPLATE

[FEATURE] Pluralise based on length of array.

A simple line of code to pluralise a word based on the length of an array.

const pluralise = (items, singular, plural) => items.length > 1 || items.length === 0 ? plural : singular;

Use Case

For if you have copy text that requires the interchangeability of pluralising based on the amount of items in an array.

let items = [0];
let string = `The ${pluralise(items, "test", "tests")}.`
console.log(string); // 'The item.'
items = [0, 1, 2, 3];
console.log(string); // 'The items'

"npm i" failed

D:\Playground\JS\1loc>node -v
v16.17.0

D:\Playground\JS\1loc>npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: 1loc@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"^11.1.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^12.0.0" from @1milligram/[email protected]
npm ERR! node_modules/@1milligram/design
npm ERR!   dev @1milligram/design@"^0.4.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\pc\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\pc\AppData\Local\npm-cache\_logs\2022-08-27T06_18_59_963Z-debug-0.log

"Check if an array is empty" not working

Fyi, this always evaluates to true 🙂

Codepen demo here:
https://codepen.io/aaronadler/pen/mdPVXJw

Add "eleventy" as a topic on GitHub repo page

Hi,

This would make it easier to find this excellent example of an Eleventy website 🙂

getIntersection doesn't work for arrays with repeated values

Since your check for an element being in the intersection is for it's count in the flattened array of arrays to be equal to the number of total arrays, this doesn't work correctly if one of the arrays has repeated values.

e.g. getIntersection([ 1, 1 ], [ 2, 3 ]) returns [ 1 ]

wrap() is wrong

#489

import { describe, it, expect } from "@jest/globals";
import { wrap } from "./num";

describe("wrap", () => {
  it("works", () => {
    expect(wrap(11, 10, 25)).toEqual(11);
    expect(wrap(10, 10, 25)).toEqual(10);
    expect(wrap(9, 10, 25)).toEqual(25);
    expect(wrap(24, 10, 25)).toEqual(24);
    expect(wrap(25, 10, 25)).toEqual(25);
    expect(wrap(26, 10, 25)).toEqual(10);
  });
});

If you actually run these test you get different values from what is expected.

Local development error.

i was trying to run npm run dev-server but it throws this error, i thinks its trying to find some /data/data.json folder

View logs

$ npm run dev-server

> 1loc@ dev-server D:\CAM Files\Dreamwaver\Javascript\contrib\1loc
> npm run copy && npm run data && webpack-dev-server


> 1loc@ copy D:\CAM Files\Dreamwaver\Javascript\contrib\1loc
> rm -rf dist && mkdir dist && cp -rf public/* dist


> 1loc@ data D:\CAM Files\Dreamwaver\Javascript\contrib\1loc
> node bin/generateData.js

internal/fs/utils.js:230
    throw err;
    ^

Error: ENOENT: no such file or directory, open 'D:\CAM Files\Dreamwaver\Javascript\contrib\1loc\data\data.json'
    at Object.openSync (fs.js:457:3)
    at Object.writeFileSync (fs.js:1282:35)
    at Object.<anonymous> (D:\CAM Files\Dreamwaver\Javascript\contrib\1loc\bin\generateData.js:32:4)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47 {
  errno: -4058,
  syscall: 'open',
  code: 'ENOENT',
  path: 'D:\\CAM Files\\Dreamwaver\\Javascript\\contrib\\1loc\\data\\data.json'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 1loc@ data: `node bin/generateData.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 1loc@ data script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2020-05-04T16_35_33_909Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 1loc@ dev-server: `npm run copy && npm run data && webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 1loc@ dev-server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2020-05-04T16_35_33_953Z-debug.log

"Check if an array is empty" is incorrect

There is a problem with checking that the array is empty. When the parameter is "", the result is true.
"const isEmpty = arr => !Array.isArray(arr) || arr.length === 0" error
"const isEmpty = arr => Array.isArray(arr) && arr.length === 0" right

Shuffling is biased

I don't even use JS, but stumbled onto your site by chance and find it rather nice.

Anyway, the second proposed snipped for shuffling,

const shuffle = arr => arr.sort(() => .5 - Math.random());

is exactly what one should not do for unbiased permutations, see https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#Sorting. (The first should be fine, though.)

JSON.stringify a Object with circular references

even though not a simple single liner, we is a lot of Object/Array comparisons in the provided examples which use the Stringify function, but the default replacer isn't circular reference safe.

the example I made in screenshot is circular reference safe, ( will skip over circular references ).

might be good to include it, but maybe not if we are thinking all of the examples must be single liners.

maybe its just worth mentioning in the single line examples as a comment that isn't circular reference safe, and link to a separe document (that isn't one liners) on how to handle those if they need to.

[DOCS] Add a `CONTRIBUTING.md`

To help your project contributors do good work, you can add a file CONTRIBUTING.md with contribution guidelines to your project repository's root. Click the link to know more About contributing guidelines

No style after startup

npm run watch:eleventy & npm run watch:sass , change into ，npm run watch:eleventy | npm run watch:sass 。

`Check if an array contains a given value` is just an alias

Solution of Check if an array contains a given value is just the call to native includes() method.
I think this should not be termed as 1-liner code, otherwise every native method would satisfy for this list.
https://github.com/phuoc-ng/1loc/blob/master/collections/array/check-if-an-array-contains-a-given-value.md

Add TypeScript variants?

Are you planning to add TypeScript variants with the possibility to switch between both on the website? I'm willing to help adding the types. (...wait, I just realized the site is written in TypeScript 😃)

Questions about submitting code after approval

The pull request I submitted half a month ago has been approved for review.

Convert letter to emoji

'a' to '🇦', 'b' to '🇧', etc.

c => String.fromCodePoint(c.toLowerCase().charCodeAt() + 127365);

Serialize values of form elements