We use abbreviations to save few keystrokes. these are so frequent that this has become standard practice while writing JavaScript code.
I was wondering about how many abbreviations we use in JavaScript code basis. So I decided to write about all of them in this article. Let me know how many of these you were able to recollect.
e:
This is a common abbreviation for event, which is often used as a parameter in event handlers. For example:
element.addEventListener('click', function(e) { // do something with the event object });
el:
This is a short name for element, which is often used to refer to DOM elements. For example:
const el = document.getElementById('my-element');
req:
This is a short name for request, which is often used to refer to the request object in an HTTP request. For example:
app.post('/api/endpoint', (req, res) => { // do something with the request object });
res:
This is a short name for response, which is often used to refer to the response object in an HTTP request. For example:
fetch('/api/endpoint') .then(res => res.json()) .then(data => console.log(data));
We see req and res used in most express applications.
cb:
This is a short name for callback, which is often used to refer to functions that are passed as arguments to other functions. For example:
function getData(url, cb) { fetch(url) .then(res => res.json()) .then(data => cb(data)); }
i:
This is a common abbreviation for index, which is often used as a loop variable when iterating over arrays or other collections. Sometimes we use idx as well. For example:
for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
obj:
This is a short name for object, which is often used to refer to objects in JavaScript. For example:
const obj = { name: 'John', age: 30 };
err:
This is a short name for error, which is often used to refer to error objects in JavaScript. Sometimes we represent error by just e. For example:
fs.readFile('/path/to/file', (err, data) => { if (err) { console.error(err); } else { console.log(data); } });
doc:
This is a short name for document, which is often used to refer to the global document object in the browser. For example:
const doc = document;
win:
This is not as much popular. This is a short name for window, which is often used to refer to the global window object in the browser. For example:
const win = window;
val:
This is a short name for value, which is often used to refer to the value of a variable or property. For example:
const val = element.value;
str:
This is a short name for string, which is often used to refer to string values in JavaScript. For example:
const str = 'hello';
num:
This is a short name for number, which is often used to refer to numeric values in JavaScript. For example:
const num = 42;
arr:
This is a short name for array, which is often used to refer to arrays in JavaScript. For example:
const arr = [1, 2, 3];
fn:
This is a short name for function, which is often used to refer to functions in JavaScript. For example:
const fn = function() { console.log('Hello, world!'); };
tmp:
This is a short name for temporary, which is often used to refer to a temporary variable that is used to store a value temporarily. For example:
let tmp = 0; for (let i = 0; i < arr.length; i++) { tmp += arr[i]; }
len:
This is a short name for length, which is often used to refer to the length of an array or string. For example:
const len = str.length;
ctx:
In the context of the HTML5 canvas element, ctx is a common abbreviation for the CanvasRenderingContext2D object, which provides methods for drawing and manipulating graphics on a canvas element.
``` const canvas = document.getElementById('my-canvas'); const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red'; ```
We sometimes use this for audio manipulation.
In the context of audio programming in JavaScript, the term "AudioContext" (often shortened to "audio context" or "ctx") refers to an interface that represents an audio-processing graph built from audio modules linked together. An audio context is created using the AudioContext constructor and is used to create and manipulate audio nodes, which are connected together to form the audio processing graph.
const ctx = new AudioContext();
js:
How can we forget this? Obviously, we mostly use this for JavaScript as an file extension.
Credit
Thanks to Chat GPT3 for helping me remember all of this and generating code example for all of them.
Feel free to add your own in comments below!
Top comments (1)
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍