JavaScript Jargons: 12 Terms Every JavaScript Developer Needs to Know

JavaScript Jargons_ 12 Terms Every JavaScript Developer Needs to Know

From pragma to closures, JavaScript is full of terms that can sound like they’re straight out of a concert ticket. While you don’t have to understand all the jargon, it helps to be familiar with some of the most common phrases used when writing and discussing JavaScript code.

Jargons like “arity” and “variadic” can be confusing, but once you learn their basic concepts, everything else becomes easier to remember. Even better, mastering JavaScript jargon will help you sound like a rockstar among your peers — no expensive concert tickets are required.

If you’re a beginner, this guide will help you get a handle on some of the most important JavaScript terms and concepts. At the same time, it will provide a refresher for more experienced programmers.

So, let’s get rocking and rolling! Here are twelve JavaScript terms every developer needs to know.

#1. Arity

Arity has Latin roots and simply means the number of arguments a function takes or the number of operands in a function call. Put simply, arity is the number of parameters a function or expression has.

We even have a property name arity. This property is used to get the number of arguments a function has when declared.

It has now become obsolete and discouraged in favour of using the. length property.

Here’s an example of a function declaration with an arity of two:

“`js

function add(a, b) {

    return a + b;

}

“`

Example of a function with an arity of five:

“`js

function multiply(a, b, c, d, e) {

    return a * b * c * d * e;

}

“`

Now let’s make the function return the number of arity without using .length:

“` js

function argNum(a, b, c) {

          // Get the number of arguments passed in

    return arguments.length;  

}

“`

Here’s the length property in action:

“` js

function add(a, b) {

    return a + b;

}

 

console.log(add.length); // 2

“`

Now when we call `argNum()`, it will return 3 since that’s the number of arguments we provided. That’s it for arity — a simple concept but still important nonetheless.

#2. Anonymous Function 

An anonymous function is a function without a name. It’s also sometimes referred to as an “anonymous function expression.” These functions are very useful for passing parameters and returning values in callback functions.

It’s an adjective that describes a function without giving it an identifier or name. Anonymous functions usually make code more readable and concise by avoiding the need to declare a named function.

engage google ppc agency ad

Let’s look at an example of an anonymous function:

“`js

let myFunction = function (a, b) {

    return a + b;

}

console.log(myFunction(1, 2)); //3

“`

The above function is considered anonymous because there’s no name after the word function. We all know a function needs to have a name to define what it does, so why would we want to use an anonymous function?

Well, they make code much more concise and easier to read. That’s because if you have a short block of code that you just need to call once or twice without worrying about maintenance later on, then an anonymous function is the way to go.

Also, since the function isn’t named, it’s usually used as an argument for another function, such as a callback or to perform a task.

For example, we could use our anonymous function to calculate the total cost of concert tickets:

“`js

let ticketPrice = 25; // per ticket

let numTickets = 5; // quantity

let totalCost = calculateTotal(ticketPrice, numTickets, function(price, qty) {

    return price * qty;

});

console.log(totalCost); // 125

“`

In this example, the anonymous function is used as an argument in the calculateTotal() function. That allows us to easily pass our ticket price and quantity as parameters to calculate the total cost of the tickets without having to define a separately named function.

#3. Closure

We’ve all used the term closure before. When someone needs closure in a conversation, they need an opportunity to explain their feelings or thoughts – or just a chance to figure out what’s going on.

Closure also means a thing that closes or seals something.

In JavaScript, closures are a powerful tool for writing code. A closure is created whenever an inner function has access to the variables and parameters of its outer function. That’s possible because the inner functions can access their outer scope even after the outer function has returned.

For example:

 “`js

website design banner

function outerFunc(a) {

    let b = 2;

    function innerFunc() {

        return a + b;

    }

    return innerFunc();

}

let myVar = outerFunc(1);   //3

console.log(myVar);

“`

In the code above, we have an outer function, outerFunc(), and an inner function, innerFunc(). The inner function has access to the variables declared in outerFunc() (in this case, a and b). Even after outerFunc() returns, the inner function still has access to those variables. That’s what we mean by closure.

Closures help write concise code and create private data. By using closures, we can write more readable and maintainable code.

So next time you hear someone discussing needing closure in a conversation, you can smile because you’ll know they mean something totally different in JavaScript.

Here’s a real-life example of how closures can be used: Let’s say you run a restaurant where people can order food and the waitperson can take orders.

With a closure, you can create functions that keep track of what orders have been placed and how long it will take to prepare them. This way, the waitperson can quickly check which customers have ordered what dishes and when they should expect their meals.

Here’s the code for the closure example:

“`js

function restaurantOrderSystem(){

    let orders = {};

    return function(orderName, orderTime){

        orders[orderName] = orderTime;

        console.log(`${orderName} will be ready in ${orderTime} minutes.`);

    }

 

}

let orderSystem = restaurantOrderSystem();

orderSystem(“Cheeseburger”, 10);

orderSystem(“Fried Chicken”, 12);

// Cheeseburger will be ready in 10 minutes.

// Fried Chicken will be ready in 12 minutes.

“` 

In the code, we call the restaurantOrderSystem() and store it in a variable called orderSystem. The orderSystem is now a function that takes two arguments, orderName and orderTime. Whenever we call this function, it will add an item to the orders object with the corresponding order name and time.

#4. Currying

Name after Haskell Curry, the concept of currying is a way to break down a function that takes multiple arguments into functions that take one argument at a time.

Think curry night at your favourite restaurant: you can order chicken, lamb, or veggie curry. Each type of curry has its own unique flavour and ingredients – but they all share a common base of spice, herbs, and rice.

In JavaScript terms, that common base would be the function itself. Our main “curry” function takes several parameters; the types of curry are the individual arguments that can be passed into the main function.

ALSO READ
35 Built-In JavaScript Methods for Numbers and Arrays: With Definition and Examples

To simplify things, we can break down a complex function into smaller functions, each one taking its own argument. That allows us to reuse code and make it easier to work with large numbers of parameters. Here’s an example of currying in action:

“`javascript

function add(x){

return function(y) {

 return x + y;

}

Let addFive = add(5); //addFive is now a function that adds 5 to whatever argument we pass into it.

let result1 = addFive(3); //result1 is 8 

let result2 = addFive(10); // result2 is 15

“`

With currying, we can break down a complex function into smaller functions that are easier to work with. That makes it easy to reuse code, improve readability and maintain large numbers of parameters. So, the next time you get tickets for a concert — don’t forget to thank Haskell Curry.

#5. Hoisting

Hoisting means raising something.

We hoist flags and sails; in JavaScript, we hoist variables and functions.

Hoisting is a JavaScript mechanism that moves declarations to the top of its scope (i.e., global or local). In other words, all variable and function declarations are moved to the top of their respective scope before any code is executed.

var name = ‘John’;

console.log(sayHi(name); // returns “Hi, John”

 

function sayHi(name) {

 console.log(‘Hi, ‘ + name);

}

sayHi(name); // Hi, John

In the example above, the variable declaration for `name` and the function declaration for `sayHi` are hoisted before any code is executed. That means we can call `sayHi()` before it is declared as long as we declare it in the same scope.

Hoisting makes JavaScript more forgiving by allowing us to use variables and functions before they are defined. But be careful — you’ll get an error if you try to use a variable before it’s declared.

So, remember – hoisting can be useful, but don’t forget the basics of good coding practice. Always declare your variables and functions in the right place.

Here’s another example:

var name = ‘Velma’;

 console.log(sayCatchPhrase(name)); /”Jinkies!”

 function sayCatchPhrase(name)

 phrases = {

 ‘Fred Flintstone’: ‘Yabba dabba doo!’,

 ‘Velma’: ‘Jinkies!’,

 ‘Razor’: ‘Bingo!’,

 ‘He-Man’: ‘I Have the Power’

 };

 return phrases[name];

 }

Thanks to hoisting, we can call the `sayCatchPhrase()` function before it is declared. That allows us to be more flexible with our code and make our code easier to read.

#6. Mutation

Mutation means transformation, modification, or alteration. In JavaScript, mutation refers to the changes that DOM elements and object properties undergo.

When an element or property is changed, it is said to be mutated. For example, if you update the text of a DOM element using JavaScript, that element has been mutated. The same goes for object properties – if you change the value of an object property, you have just mutated that property.

Mutation can be a useful tool when making dynamic web pages, but it must be used with care. If you don’t keep track of what elements and properties you’ve changed, your code will become cluttered and hard to read.

Here’s an example of mutation:

let user = { name: ‘John’, age: 25 };

user.name = ‘Chris’; // Mutating the object property ‘name’

console.log(user); // Outputs { name: “Chris”, age: 25 }

In this example, we started with an object called `user` with two properties: `name` and `age.` But then we mutated the object by changing the value of its `name` property. When we log out the user object to the console, it will have a different name than before.

We can also mutate DOM elements:

let el = document.querySelector(‘h1’);

el.innerHTML = ‘Welcome to my page!’; // Mutating the DOM element

When we check out our web page, the `<h1>` element will now say “Welcome to my page!” instead of whatever it said before.

Mutation is a powerful tool – but use it responsibly! Keep your code organized and ensure all mutations are properly documented, so you can keep track of what elements and properties have been changed.

There’s even an API called MutationObserver that lets you keep track of any mutations on your page! With MutationObserver, you can detect when elements are added or removed from the page and when element attributes and contents have been changed.

Using this API, you can create dynamic web pages that respond to real-time changes. You can use it to display current concert ticket prices or a new image every time the user scrolls. The possibilities are endless.

#7. Pragma

Pragma is short for “pragmatic information.” In plain English, pragmatics is an adjective that describes something practical or sensible. It’s pragmatic to put on a coat when it’s cold outside.

In JavaScript, pragma is an instruction to the engine about how a piece of code should be treated. It’s a code that contains helpful information on how a compiler or interpreter should process a file.

For example, `’use strict’;` is a pragma that tells the code to execute in strict mode. That means the code must adhere to certain standards (such as not using undeclared variables) to run properly. Using this instruction, it’s pragmatic because you can control your code better and avoid potential errors.

Pragmas don’t contribute to the code’s functionality but are important for keeping your code organized and well-structured. They can be used in various areas, such as file format conversion, debugging, optimization, etc.

Here’s an example of a pragma in JavaScript:

“`javascript

/* jshint -W097 */

“`

This pragma tells the code to turn off all warnings specified by JSHint. That way, it won’t throw an error message if something doesn’t meet its standards. That can be helpful when debugging since you don’t necessarily need warning messages for the issue you’re trying to fix.

#8. Sentinel

A sentinel is a soldier or guard who is assigned to keep watch over a particular area. In JavaScript, sentinels are values the code uses to mark the end of a sequence in an algorithm.

They’re also called ‘flags.’ They act as markers that indicate when a certain condition has been met or a given task has been completed. They can control loops, detect errors, or indicate when specific actions should be taken.

For example, a for loop in JavaScript may look something like this:

“`javascript

let i = 0;

let sentinel = false;

while (sentinel === false) {

    // do something here

 

    i++;

   

    if (i === 10) {

        sentinel = true;

    }

}

“`

This example sets the sentinel (the flag) as’ false’. The loop will continue to run until the condition in the `if` statement is met and the sentinel is set to `true.`

ALSO READ
Understanding JavaScript SEO: Complete Guide

Sentinels can also be used in functions:

function getPos(ary, val) {

 

 var i=0, len=ary.length;

 for(;i&lt;len;i++){

 if(ary[i]===val) return i+1;

 }

 return -1;

 }

 console.log(getPos([‘r’,’y’,’w’],’y’)); //2

 console.log(getPos([‘r’,’y’,’w’],’g’)); //-1

In this example, the sentinel is set to `-1`. If the value isn’t found in the array, it will return `-1` as an indication that nothing was found.

#9. Polyfill

The internet has brought about many newer technologies in recent years. As new technologies emerge, they may not be supported by older browsers.

A polyfill (also known as a shim) is a piece of code that adds support for features the browser doesn’t have natively. It fills in the gaps where the browser lacks functionality and allows developers to handle incompatibility issues between web browsers better.

For example, you can use a polyfill to add support for features like Promises, which is not supported by older browsers.

Polyfills are incredibly useful when developing for the web, as they allow developers to write code that works across different browsers and platforms. Ultimately, this helps make development smoother and more efficient while giving users access to the latest features.

How to use polyfill in JavaScript?

Using polyfill in JavaScript is a very straightforward process. All you need to do is include the script within your code and then call it when you want to use that feature. A good practice is checking whether the browser natively supports the feature before implementing or using a polyfill. Once implemented, your code should be able to run in all browsers.

Here’s an example:

A method without polyfill:

psg digital marketing

“`javascript

if (window.fetch) {

  fetch(‘example.com/data’)

    .then((response) => console.log(response))

    .catch((err) => console.error(err));

} else {

 // Handle error as the browser doesn’t support fetch api

}

“`

A method with polyfill:

“`javascript

if (!window.fetch) {

    // Include fetch polyfill here

 }

 fetch(‘example.com/data’)

   .then((response) => console.log(response))

   .catch((err) => console.error(err));

“`

By adding a polyfill, we are able to support the fetch API even in older browsers. This ensures our code is cross-browser compatible and ensures that users can access all of the features of our application regardless of their browser or device.

#10. Vanilla

Everyone’s first favourite ice cream flavour, Vanilla, is a term used to describe code no libraries or frameworks have modified or enhanced. Vanilla JavaScript code is often seen as the best way to learn the basics of programming and ensure your code is highly optimized for performance. By writing in Vanilla JavaScript, you can be sure your code will work across all browsers and devices without any issues.

For example, consider the following code snippet:

“`javascript

let myArray = [1,2,3];

for (let i=0; i<myArray.length; i++) {

 console.log(myArray[i]);

}

“`

This code is written in Vanilla JavaScript and can be used to loop through and print the contents of an array without any libraries or frameworks. Vanilla JavaScript code is usually the most lightweight and fastest way to implement functionality, making it an excellent choice for many web developers.

Now, if we were to use a framework or library to implement the same functionality, it might look something like this:

“`javascript

let myArray = [1,2,3];

engaging the top social media agency in singapore

myArray.forEach((value) => console.log(value));

“`

A framework or library here would be helpful as it provides a simpler and more concise way of achieving the same result. However, this comes at the cost of including a library or framework in our codebase, resulting in a larger file size and potentially slower performance.

#11. Variadic Functions

The term variadic comes from “variable” and “adicity.”

While we all know what a variable is, adicity is an ancient Greek term that means the same as the Latin word arity. Arity is defined as the number of arguments a function takes.

A variadic function is a function that takes an indefinite number of arguments. It is useful for functions like `Math.max()` or `console.log()`, which can take any number of parameters and functions that accept a variable number of parameters depending on the scenario.

For example, let’s say you have a function that takes two parameters, the name of an event and the number of tickets you would like to purchase. The function might look something like this:

“`javascript

function purchaseTickets(eventName, numTickets) {

          // Purchase tickets logic here

}

“`

Now let’s say you want also to be able to pass a list of people who will use the purchased tickets. You can do this by making the function variadic like so:

“`javascript

function purchaseTickets(eventName, numTickets, …people) {

          // Purchase tickets logic here

}

“`

Now you can call the function with or without a list of people, and it will still work! Just make sure to include at least two arguments, eventName and numTickets. Variadic functions help keep our code flexible and avoid unnecessary complexity.

Here’s another example:

function test(…a) {

          console.log(a);

}

test(‘a’, ‘b’, ‘c’);

// Outputs: [‘a’, ‘b’, ‘c’]

As you can see, variadic functions are incredibly useful in JavaScript and can help us write better, cleaner code. So don’t forget to use them whenever possible.

#12. OOPs in JavaScript (Class and Functional)

Object Oriented Programming (OOP) is a programming paradigm that allows us to create objects and define their properties and behaviours. In JavaScript, there are two OOPs: Class-based OOP and Functional OOP.

Class-based OOP uses the `class` keyword to define objects with properties and methods that can be reused throughout your code. That’s the most popular way of creating objects in JavaScript and allows us to develop complex applications easily.

On the other hand, Functional OOP uses `functions` as objects, allowing us to define properties inline without declaring them beforehand. That helps us keep our code DRY (don’t repeat yourself) while also providing a more concise syntax for creating objects.

These OOPs have pros and cons, but they are both incredibly powerful when used correctly. So the choice is yours to make. It doesn’t matter which OOP you use. Just remember that mastering them will help you become a better JavaScript developer.

Examples:

Calculating the area of a rectangle using the two OOPs

Class-based:

“`javascript

Class Rectangle {

          constructor(length, width) {

         this.length = length;

         this.width = width;

         }

         area() {

         return this.length * this.width;

         }

}

const rect1 = new Rectangle(3, 4);

console.log(rect1.area()); // 12

“`

Functional-based:

“`javascript

function Rectangle(length, width) {

          return {

                   area() {

                   return length * width;

                   }

​   };

}

const rect2 = Rectangle(3, 4);

console.log(rect2.area()); // 12

“`

About the Author

Tom Koh

Tom is the CEO and Principal Consultant of MediaOne, a leading digital marketing agency. He has consulted for MNCs like Canon, Maybank, Capitaland, SingTel, ST Engineering, WWF, Cambridge University, as well as Government organisations like Enterprise Singapore, Ministry of Law, National Galleries, NTUC, e2i, SingHealth. His articles are published and referenced in CNA, Straits Times, MoneyFM, Financial Times, Yahoo! Finance, Hubspot, Zendesk, CIO Advisor.

Share:

Search Engine Optimisation (SEO)

Search Engine Marketing (SEM)

Is SEO Better Or SEM Better?

I think we can all agree that Google SEO is pretty cool! A lot of people get to enjoy high rankings on Google and other

Social Media

Technology

Branding

Business

Most viewed Articles

Other Similar Articles