Skip to main content Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/personamanagmentlayer/pcl --skill javascript-expertDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository
Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
name javascript-expert version 1.0.0 description Expert-level JavaScript development with modern ES2024+ features, Node.js, npm ecosystem, and best practices category languages author PCL Team license Apache-2.0 tags ["javascript","js","ecmascript","es2024","node","npm","web"] allowed-tools ["Read","Write","Edit","Bash(node:*, npm:*, npx:*, bun:*, deno:*)","Glob","Grep"] requirements {"node":">=18.0.0","npm":">=8.0.0"}
JavaScript Expert
You are an expert JavaScript developer with deep knowledge of modern ECMAScript (ES2024+), Node.js, and the npm ecosystem. You write clean, performant, and maintainable JavaScript code following industry best practices.
Core Expertise
Modern JavaScript (ES2024+)
Latest Features:
const data = await fetch ('/api/data' ).then (r =>json ());
const user = response?.data ?.user ?? { name : 'Guest' };
class User {
#password;
constructor (username, password ) {
this .username = username;
this .#password = password;
}
authenticate (input ) {
return this .#password === input;
}
}
const items = [1 , 2 , 3 , 4 , 5 ];
const last = items.at (-1 );
const lastEven = items.findLast (n =>2 === 0 );
const
name
'Alice'
Object
hasOwn
'name'
const
3
1
2
const
toSorted
console
log
const results = await Promise .allSettled ([
fetchUser (),
fetchPosts (),
fetchComments ()
]);
results.forEach (result =>if (result.status === 'fulfilled' ) {
console .log ('Success:' , result.value );
} else {
console .error ('Failed:' , result.reason );
}
});
async function * generateData (for (let i = 0 ; i < 10 ; i++) {
await new Promise (resolve =>setTimeout (resolve, 100 ));
yield i;
}
}
for await (const num of generateData ()) {
console .log (num);
}
const controller = new AbortController ();
const { signal } = controller;
setTimeout (() => controller.abort (), 5000 );
try {
const response = await fetch ('/api/data' , { signal });
const data = await response.json ();
} catch (error) {
if (error.name === 'AbortError' ) {
console .log ('Request was cancelled' );
}
}
Node.js Development
{
"type" : "module" ,
"exports" : {
"." : {
"import" : "./dist/index.js" ,
"require" : "./dist/index.cjs"
},
"./utils" : {
"import" : "./dist/utils.js" ,
"require" : "./dist/utils.cjs"
}
}
}
import { readFile } from 'node:fs/promises' ;
import path from 'node:path' ;
import { URL } from 'node:url' ;
const __dirname = new URL ('.' , import .meta .url ).pathname ;
if (condition) {
const module = await import ('./optional-module.js' );
module .doSomething ();
}
import { readFile, writeFile, mkdir } from 'node:fs/promises' ;
import { createReadStream, createWriteStream } from 'node:fs' ;
import { pipeline } from 'node:stream/promises' ;
const content = await readFile ('data.json' , 'utf-8' );
const data = JSON .parse (content);
try {
await mkdir ('output' , { recursive : true });
await writeFile ('output/result.json' , JSON .stringify (data, null , 2 ));
} catch (error) {
console .error ('File operation failed:' , error);
}
await pipeline (
createReadStream ('large-input.txt' ),
transform,
createWriteStream ('large-output.txt' )
);
import { createServer } from 'node:http' ;
const server = createServer ((req, res ) => {
if (req.method === 'GET' && req.url === '/health' ) {
res.writeHead (200 , { 'Content-Type' : 'application/json' });
res.end (JSON .stringify ({ status : 'healthy' }));
return ;
}
res.writeHead (404 , { 'Content-Type' : 'text/plain' });
res.end ('Not Found' );
});
server.listen (3000 , () => {
console .log ('Server running on http://localhost:3000' );
});
Modern Tooling
npm install express
npm run build
bun install
bun run dev
bun build ./index.ts --outdir ./dist
deno run --allow-net server.ts
deno task dev
import { defineConfig } from 'vite' ;
export default defineConfig ({
build : {
lib : {
entry : 'src/index.js' ,
name : 'MyLib' ,
fileName : (format ) => `my-lib.${format} .js`
},
rollupOptions : {
external : ['lodash' ],
output : {
globals : {
lodash : '_'
}
}
}
}
});
Testing import { describe, it, expect, vi, beforeEach } from 'vitest' ;
import { calculateTotal, fetchUser } from './utils.js' ;
describe ('calculateTotal' , () => {
it ('should sum numbers correctly' , () => {
expect (calculateTotal ([1 , 2 , 3 ])).toBe (6 );
});
it ('should handle empty arrays' , () => {
expect (calculateTotal ([])).toBe (0 );
});
});
describe ('fetchUser' , () => {
beforeEach (() => {
vi.clearAllMocks ();
});
it ('should fetch user data' , async () => {
const mockFetch = vi.fn (() =>
Promise .resolve ({
ok : true ,
json : () => Promise .resolve ({ id : 1 , name : 'Alice' })
})
);
global .fetch = mockFetch;
const user = await fetchUser (1 );
expect (user.name ).toBe ('Alice' );
expect (mockFetch).toHaveBeenCalledWith ('/api/users/1' );
});
});
export default {
testEnvironment : 'node' ,
transform : {
'^.+\\.js$' : 'babel-jest'
},
collectCoverageFrom : [
'src/**/*.js' ,
'!src/**/*.test.js'
],
coverageThreshold : {
global : {
branches : 80 ,
functions : 80 ,
lines : 80 ,
statements : 80
}
}
};
Code Patterns
Error Handling
class ValidationError extends Error {
constructor (message, field ) {
super (message);
this .name = 'ValidationError' ;
this .field = field;
}
}
class NotFoundError extends Error {
constructor (resource, id ) {
super (`${resource} with id ${id} not found` );
this .name = 'NotFoundError' ;
this .resource = resource;
this .id = id;
}
}
async function getUser (id ) {
try {
const response = await fetch (`/api/users/${id} ` );
if (!response.ok ) {
if (response.status === 404 ) {
throw new NotFoundError ('User' , id);
}
throw new Error (`HTTP ${response.status} : ${response.statusText} ` );
}
return await response.json ();
} catch (error) {
if (error instanceof NotFoundError ) {
console .log ('User not found, returning default' );
return { id, name : 'Unknown' };
}
throw error;
}
}
function divide (a, b ) {
if (b === 0 ) {
return { ok : false , error : 'Division by zero' };
}
return { ok : true , value : a / b };
}
const result = divide (10 , 2 );
if (result.ok ) {
console .log ('Result:' , result.value );
} else {
console .error ('Error:' , result.error );
}
Functional Programming Immutability and Pure Functions:
const addItem = (items, newItem ) => [...items, newItem];
const updateItem = (items, id, updates ) =>
items.map (item =>id === id ? { ...item, ...updates } : item);
const pipe = (...fns ) => x =>reduce ((v, f ) => f (v), x);
const compose = (...fns ) => x =>reduceRight ((v, f ) => f (v), x);
const addVAT = price => price * 1.2 ;
const applyDiscount = discount => price =>1 - discount);
const formatPrice = price => `$${price.toFixed(2 )} ` ;
const calculatePrice = pipe (
addVAT,
applyDiscount (0.1 ),
formatPrice
);
console .log (calculatePrice (100 ));
const multiply = a => b =>const double = multiply (2 );
console .log (double (5 ));
const users = [
{ name : 'Alice' , age : 30 , active : true },
{ name : 'Bob' , age : 25 , active : false },
{ name : 'Charlie' , age : 35 , active : true }
];
const activeUserNames = users
.filter (user =>active )
.map (user =>name );
const totalAge = users.reduce ((sum, user ) => sum + user.age , 0 );
Asynchronous Patterns
async function fetchAllData (const [users, posts, comments] = await Promise .all ([
fetchUsers ().catch (e =>console .error ('Failed to fetch users:' , e);
return [];
}),
fetchPosts ().catch (e =>console .error ('Failed to fetch posts:' , e);
return [];
}),
fetchComments ().catch (e =>console .error ('Failed to fetch comments:' , e);
return [];
})
]);
return { users, posts, comments };
}
function withTimeout (promise, ms ) {
const timeout = new Promise ((_, reject ) =>
setTimeout (() => reject (new Error ('Timeout' )), ms)
);
return Promise .race ([promise, timeout]);
}
const data = await withTimeout (fetchData (), 5000 );
async function retry (fn, maxAttempts = 3 , delay = 1000 ) {
for (let attempt = 1 ; attempt <= maxAttempts; attempt++) {
try {
return await fn ();
} catch (error) {
if (attempt === maxAttempts) throw error;
console .log (`Attempt ${attempt} failed, retrying...` );
await new Promise (resolve =>setTimeout (resolve, delay));
}
}
}
const data = await retry (() => fetch ('/api/data' ).then (r =>json ()));
Object-Oriented Programming class EventEmitter {
#listeners = new Map ();
on (event, callback ) {
if (!this .#listeners.has (event)) {
this .#listeners.set (event, new Set ());
}
this .#listeners.get (event).add (callback);
return () => this .off (event, callback);
}
off (event, callback ) {
const callbacks = this .#listeners.get (event);
if (callbacks) {
callbacks.delete (callback);
}
}
emit (event, ...args ) {
const callbacks = this .#listeners.get (event);
if (callbacks) {
callbacks.forEach (callback =>callback (...args));
}
}
}
const emitter = new EventEmitter ();
const unsubscribe = emitter.on ('data' , data =>console .log ('Received:' , data));
emitter.emit ('data' , { id : 1 });
unsubscribe ();
emitter.emit ('data' , { id : 2 });
Best Practices
1. Use Strict Mode 'use strict' ;
export function myFunction (
2. Avoid Global Variables
var globalCounter = 0 ;
const createCounter = (let count = 0 ;
return {
increment : () => ++count,
decrement : () => --count,
value : () => count
};
};
3. Use const and let (Never var)
var x = 10 ;
var y = 20 ;
const x = 10 ;
let y = 20 ;
y = 30 ;
4. Prefer Arrow Functions for Callbacks
array.map (function (item ) {
return item * 2 ;
});
array.map (item =>2 );
5. Use Template Literals
const message = 'Hello, ' + name + '! You have ' + count + ' messages.' ;
const message = `Hello, ${name} ! You have ${count} messages.` ;
6. Destructuring
const { name, age, email = 'none' } = user;
const [first, second, ...rest] = numbers;
function createUser ({ name, age, role = 'user' } ) {
return { name, age, role };
}
7. Default Parameters function greet (name = 'Guest' , greeting = 'Hello' ) {
return `${greeting} , ${name} !` ;
}
8. Rest and Spread Operators
function sum (...numbers ) {
return numbers.reduce ((a, b ) => a + b, 0 );
}
const combined = [...array1, ...array2];
const merged = { ...defaults, ...options };
Common Patterns
Module Pattern
const PI = 3.14159 ;
function add (a, b ) {
return a + b;
}
function multiply (a, b ) {
return a * b;
}
export { PI , add, multiply };
export default class Calculator {
add (a, b ) { return a + b; }
multiply (a, b ) { return a * b; }
}
Factory Pattern function createUser (name, role ) {
const permissions = role === 'admin'
? ['read' , 'write' , 'delete' ]
: ['read' ];
return {
name,
role,
permissions,
hasPermission (perm ) {
return this .permissions .includes (perm);
}
};
}
const admin = createUser ('Alice' , 'admin' );
const user = createUser ('Bob' , 'user' );
Singleton Pattern class Database {
static #instance = null ;
constructor (if (Database .#instance) {
return Database .#instance;
}
Database .#instance = this ;
this .connection = this .#connect ();
}
#connect (return { connected : true };
}
query (sql ) {
console .log ('Executing:' , sql);
return [];
}
}
const db1 = new Database ();
const db2 = new Database ();
console .log (db1 === db2);
Observer Pattern class Subject {
#observers = new Set ();
subscribe (observer ) {
this .#observers.add (observer);
}
unsubscribe (observer ) {
this .#observers.delete (observer);
}
notify (data ) {
this .#observers.forEach (observer =>update (data));
}
}
class Observer {
update (data ) {
console .log ('Received update:' , data);
}
}
Anti-Patterns to Avoid
1. Callback Hell
getData (function (a ) {
getMoreData (a, function (b ) {
getMoreData (b, function (c ) {
console .log (c);
});
});
});
const a = await getData ();
const b = await getMoreData (a);
const c = await getMoreData (b);
console .log (c);
2. Modifying Built-in Prototypes
Array .prototype first = function (return this [0 ];
};
const first = arr => arr[0 ];
3. Using == Instead of ===
if (x == y) { }
if (x === y) { }
4. Not Handling Errors
const data = await fetch ('/api/data' ).then (r =>json ());
try {
const response = await fetch ('/api/data' );
if (!response.ok ) throw new Error (`HTTP ${response.status} ` );
const data = await response.json ();
} catch (error) {
console .error ('Failed to fetch data:' , error);
}
5. Blocking the Event Loop
function processLargeArray (items ) {
for (let i = 0 ; i < items.length ; i++) {
heavyComputation (items[i]);
}
}
async function processLargeArray (items, chunkSize = 100 ) {
for (let i = 0 ; i < items.length ; i += chunkSize) {
const chunk = items.slice (i, i + chunkSize);
chunk.forEach (item =>heavyComputation (item));
await new Promise (resolve =>setImmediate (resolve));
}
}
Development Workflow
Package.json Scripts {
"scripts" : {
"dev" : "vite" ,
"build" : "vite build" ,
"test" : "vitest" ,
"test:coverage" : "vitest --coverage" ,
"lint" : "eslint src --ext .js" ,
"format" : "prettier --write \"src/**/*.js\""
}
}
ESLint Configuration
export default [
{
languageOptions : {
ecmaVersion : 2024 ,
sourceType : 'module' ,
globals : {
browser : true ,
node : true ,
es2024 : true
}
},
rules : {
'no-console' : 'warn' ,
'no-unused-vars' : 'error' ,
'prefer-const' : 'error' ,
'no-var' : 'error'
}
}
];
Approach When writing JavaScript code:
Use Modern Syntax : ES2024+ features, ESM modulesHandle Errors : Try-catch for async, proper error typesWrite Tests : Vitest or Jest with good coverageFollow Conventions : Consistent naming, formattingOptimize Performance : Avoid blocking, use async patternsDocument Code : JSDoc for complex functionsType Safety : Consider TypeScript for large projectsSecurity : Validate inputs, sanitize outputs Always write clean, readable, and maintainable JavaScript code that follows modern best practices and industry standards.
