Distinct Array Values in JavaScript

Sometimes when you're working with collections (in any language) you find yourself needing to get just the distinct list of items in the collection. JavaScript has an object called a Set that makes doing this with arrays really, really easy.

Start with an array of primitives:

let arr = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1, 1, 1, 1, 3, 4, 5, 6]

From that array, create a Set: 

let set = new Set(arr)

Convert it back to an array (this step is optional because you may find working with the Set directly meets your needs):

let result = Array.from(set);

That's it. Now you have an array of distinct primitive values. If you have an array of complex objects, you can use this same trick, but it's a little... trickier.

let arr = [{id:1,name:'Frodo',relatives:[{id:2,name:'Bilbo'}]},{id:1,name:'Frodo',relatives:[{id:2,name:'Bilbo'}]}];
let set = new Set(arr.map(JSON.stringify));
let result = Array.from(set);

Setting Up esLint for an Angular 19 Project

The angular-eslint package makes setting up linting in an Angular project pretty easy, but due to some recent changes there are a few new steps I had to work out to get it working so I figured I'd put them here for next time.

1. Install the angular-eslint package: ng add angular-eslint
2. Rename the generated eslint.config.js to eslint.config.mjs
3. Change the 3 require statements at the top of the config file to import statements
1. const eslint = require("@eslint/js"); => import esLint from '@eslint/js';
2. const tseslint = require("typescript-eslint"); => import tsEsLint from 'typescript-eslint';
3. const angular = require("angular-eslint"); => import angular from 'angular-eslint';
4. Change the module.exports to export default
1. module.exports = tseslint.config( => export default tsEsLint.config(
5. In package.json, add a "type" setting with a value of "module"

At this point, esLint should be all setup. It actually works before any of this, but I wanted to use a plugin (more on that in a moment) and that required me to make these changes.

So, about that plugin. esLint made the decision in 8.53 to stop including stylistic rules as part of the linting process. I understand the decision, but I don't like it. Fortunately, there's a plugin for stylistic linting that you can add and it's pretty easy now that the above changes have been implemented.

1. Install @stylistic/eslint-plugin-ts package: npm install @stylistic/eslint-plugin-ts
2. Import the plugin in eslint.config.mjs
1. import stylisticPlugin from '@stylistic/eslint-plugin-ts'
3. In eslint.config.mjs, add a node as a sibling to the "files" node for plugins:
   plugins: {
         stylistic: stylisticPlugin
       },
4.  Add the individual style rules to the rules node of eslint.config.mjs
1. For example, to enfore the 1 true brace style rule, add "stylistic/brace-style": ["error", "1tbs"],
   

That's it! esLint should be all good to go. If you install a live linter extension in your working environment (like the esLint plugin for VS Code) you should see all your lint rules - including stylistic ones - applied.

JavaScript Boolean Object

It has been a looooooong time since I posted. Not because I haven't had a ton to post about, but because at my core I'm super lazy. Anyway, here's a quick hitter on how to check if every property on an object is true using the Boolean function in JavaScript.

return Object.values(this.data.modal.validation).every(Boolean);

You do need to watch out for a couple of things if you want to use this. First, because of type coercion in JavaScript, an object that has pretty much any kind of data on a property will count as true. So if you had an object with a name property that had a value of "Mickey", that's true in this scenario. Second (and related), if you have a property with a value of 0 it will count as false, again due to type coercion.

I'm using this to check an object that only has boolean properties and it works very well.