22 Terms You Need to Know as a JavaScript Developer

22 Terms You Need to Know as a JavaScript Developer

If you’re a beginner then this list has got you covered with the basics like _hoisting_. At the same time less-known or less-understood terms are also included in there.

If you’re a beginner then this list has got you covered with the basics like hoisting. At the same time less-known or less-understood terms are also included in there.

1. Arity

Arity (from Latin) is the term used to refer to the number of arguments or operands in a function or operation respectively. You’re most likely to come across this word in the realm of JavaScript when it is used to mention the number of arguments expected by a JavaScript function.

There is even a property named arity, of the Function object that returns the number of expected arguments in a function. It is now obsolete though and replaced by length.

The following function has an arity of 3.

function getName(first, middle, last){
    return first+' '+ middle +' '+last;
}
2. Anonymous

Anonymous is an adjective. When something or someone is referred to as anonymous it means that thing’s or person’s name is unidentified. Likewise in JavaScript an anonymous function is the one that is not identified by a name.

(function (){
  //body
})();

Above is an IIFE (Immediately Invoked Function Expression). The function in it is anonymous since it doesn’t have a name. Now, take a look at the one below.

var foo = function() {

};

That is also said to be an anonymous function since there is no name after the key word function.

A little bit of doubt rises in the correctness of the use of the word “anonymous”. With IIFE, the function gets called right away, no name involved whereas, to call the latter function the syntax foo() is used.

It’s like we christened a nameless function with the name ‘foo’ and called it using that. Does that count as anonymous? I don’t know, I’ll leave that to the English experts. But, my confusion aside, they both are indeed referred to as anonymous function.

3. Closure

Here’s one of the definitions from oxford dictionary for closure: “A thing that closes or seals something, such as a cap or tie.”

In JavaScript, closure is an inner function, that is accessible outside of its outer function’s scope, with its connection to the outer function’s variables still intact.

To explain things (maybe not accurately but simply enough), consider closure as a waiter in a restaurant. A lot of things happen inside a restaurant kitchen, where we are not allowed to enter or see. But how are we supposed to get our food then?

That is where waiters come in. We call them, order the food, and then they’ll go to the kitchen, inform the chefs of the orders, and bring it to us when the order is ready. This way we’ve not broken any “rules” and can still manage to grab a meal.

The waiter is someone who is able to take our order into the kitchen and return with the food. JavaScript closures are similar to that, they are able to take our parameters and bring back us variables (references to those variables, to be precise) from inside a function that we aren’t allowed in.

function order() {
    var food;   
    function waiter(order) {
        chef(order);
        return food;
    }
    function chef(order) {
        if (order === 'pasta') {
            food = ['pasta', 'gravy', 'seasoning'];
            cook();
        }
    }
    function cook() { food.push('cooked'); }
    return waiter;
}
var myOrder = order();
console.log(myOrder('pasta'));
// Array [ "pasta", "gravy", "seasoning", "cooked" ]

As you can see from the above code, everything apart from waiter and its return value from inside the order function isn’t exposed to the outside world.

4. Currying

The effect, named after Haskell Curry, refers to using multiple functions with single arguments, in place of a single function with multiple arguments. Let’s see the add functions below for example.

function addx(x){
    function addy(y){
        return x+y;
    }
    return addy
}

function add(x,y){
    return(x+y);
}

console.log(addx(3)(4)); \\7
console.log(add(3,4)); \\7

Both of the functions return the same result. The function addx accepts a parameter x while returning addy which in turn accepts the y value, performs the addition with x and returns the sum.

The function add simply takes both x and y at the same time, performs the addition and returns the sum. So far the first function might not seem very useful, until…

var add4 = addx(4);
console.log(add4(8)); //12
console.log(add4(6)); //10
console.log(add4(-74)); //-70

Now, the former function suddenly gets interesting. In currying, you can always fix a step in a sequence of operations like the addition of 4 from the above code, which is helpful when one of the variables used in the operation is always the same.

5. Hoisting

Hoist means to raise something. Hoisting in JavaScript also means the same and what gets raised is the declaration (variable & function declarations).

Declarations are where variables and functions are created with keywords var(not for global) and function.

It doesn’t matter where you type the code to declare a function or variable, during evaluation all the declarations are moved up inside the scope where they reside (except for in strict mode). Hence, it is possible to write a working code with the code for function call placed before function declaration.

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];
}
6. Mutation

Mutation means change or modification. If you ever come across the word mutation in JavaScript it is probably referring to the changes that DOM elements went through.

There is even an API called MutationObserver to keep an eye out for the DOM mutations like addition of child elements or changes to the element’s attributes. (You can read more about MutationObserver in my post.)

7. Pragma

Pragma is short for pragmatic information. In plain English, pragmatic is an adjective that means sensible and practical. In programming, pragma refers to the code that consist of useful information on how a compiler or interpreter or assembler should process the program.

It does not contribute anything to the programming language itself and its syntax may vary. They only affect the compiler behavior. JavaScript also has few pragmas, one of them is strict.

"use strict";

By the above pragma, the JavaScript code will be executed in strict mode. In strict mode, bad syntax is not allowed, hoisting is not done, silent errors are shown, etc. It helps in writing a more secure and optimized JavaScript code.

8. Sentinel

Sentinels are soldiers who stand guard (Remember the ones from X-Men?). In programming, sentinels are values that are used to indicate the end of a loop or process. They can also be called “flags”.

You can use any reasonable value as a sentinel. Here’s an example of sentinels used in JavaScript; the indexOf method which returns -1 (the sentinel value) when the search value is not found in the targeted string. Below is a function that returns the position of an array value and if value is not found, returns -1.

function getPos(ary, val) {
    var i=0, len=ary.length;    
    for(;i<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
9. Vanilla

I think everyone’s first ice cream flavor must’ve been vanilla. I also think that not only in ice cream, but in pretty much every sweet dish vanilla kind of became the standard flavor. I’ve seen quite a few cake recipes where they add at least one drop of it into the mix – just to increase the flavor.

And that’s what vanilla is, a traditional standard flavor. Vanilla JavaScript is referred to the standard JavaScript – no framework. Vanilla in fact is not only used to describe the standard version of JavaScript but also other languages like CSS.

10. Variadic

Variadic is an adjective created by joining “variable” and “adicity”. “Adicity” is from ancient Greek, with a meaning that is the same as the Latin word “arity” (Item 1 in this list). Thus, the term variadic is used to express something that has variable number of arguments.

In JavaScript, a variadic function takes in any number of arguments. It can be created using arguments property, apply method and since ES6, the spread operator. Below is an example using a spread operator.

function test(...a){
  console.log(a);
}
test('a','b','c',8,[56,-89]);
//output is Array [ "a", "b", "c", 8, Array[2] ]
11. Objects

Objects are used to store keyed collections of various data and more complex entities, where you can set properties that hold their own values.
Properties can either be accessed with dot notation (i.e., obj.a), or bracket notation (i.e., obj[“a”]). Dot notation is shorter and generally easier to read. It is thus preferred when possible.

var obj = {
 a: "js",
 b: 2
}

obj.a;             // "js"
obj["b"];          // 2
12. Array

An array is an object that holds values (of any type). Not particularly in named properties/keys, but rather in numerically indexed positions. For example:

var arr = ["js", 2, true];
arr[0];            // "js" 
arr[1];            //  2

arr[2];            //  true
13. Build-In Type Methods

JavaScript provides different data types to hold different types of values. There are two types of data types in JavaScript:

  1. Primitive values
  2. Non-primitive values (object references)

We can have properties and methods on non-primitive value. But how can we use length as property, and toUpperCase() as a method on a primitive value?

const a = "hello world";

a.length;                   // 11
a.toUpperCase();            // "HELLO WORLD"
typeof a;                   // "string"

When you use a primitive value like a as an object, by referencing a property or method (e.g., a.toUpperCase() in the previous snippet), JS automatically “boxes” the value to its object wrapper counterpart (hidden under the covers).

A string value can be wrapped by a string object, a number can be wrapped by a number object, and a boolean can be wrapped by a boolean object.

Boxing is wrapping an object around a primitive value. For instance,
new Number(42) creates a number object for the primitive number 42.

14. Truthy & Falsy

The specific list of falsy values in JavaScript is as follows:

“ ”(empty string)
0, -0, NaN (invalid number)
null, undefined
false

Any value that’s not on this falsy list is truthy. For example: [ ], [1,2,3],
{}, hello, 2, {a: 7}.

15. Equality

There are four equality operators: ==, === (Equality), and !=, !== (inEquality).

The difference between == and === is usually characterized as: == checks for value equality, and === checks for both value and type equality. However, this is inaccurate. The proper way to characterize them is that == checks for value equality with coercion allowed, and === checks for value equality without allowing coercion.

=== is often called strict equality, and == is loose equality for this reason.

16. Coercion

Coercionis the process of converting values from one type to another (such as string to number, object to boolean, and so on). It comes in two forms — explicit and implicit.

Example of explicit coercion:

var a = “42”; 
var b = Number( a );

a;          // “42” 
b;         // 42 — the number!

Example of implicit coercion:

var a = “42”; 
var b = a * 1;     // “42” implicitly coerced to 42 here

a;  // “42” 
b; // 42 — the number!
17. Inequality

The ``, = operators are used for inequality, referred to in the specification as relational comparison.

They will be used with comparable values, like numbers. But JavaScript string values can also be compared for inequality.

var a = 42; 
var b = "foo";
var c = "53";
var d = "boo" ;
a < c       // true or false ?
a < b;      // true or false ? 
a > b;      // true or false ?
a == b;     // true or false ?
b > d;      // true or false ?

What is the answer to the above inequality expression? True or false?

Before finding the solution, let’s see how two strings, or number and string are compared.

If both values in the d, the comparison is made lexicographically (a.k.a alphabetically like a dictionary).

Similar to the equality operator, coercion is applied to the inequality operators as well. If one, or both, is not a string, as it is with a < b, then both values are coerced to be numbers, and a typical numeric comparison occurs.

a < c       // true       convert "53" to 53,  42 < 53
a < b;      // false	  convert "foo to NaN, 42 < Nan
a > b;      // false      convert "foo to NaN, 42 >Nan
a == b;     // false      interpreted as 42 == NaN or "42" == "foo"
b > d;      // true       f come after b in alphabetic order

When converting foo into a number, we get invalid number value (NaN), and NaN is neither greater than, nor less than, any other value.

18. Function Scopes

You use the var keyword to declare a variable that will belong to the current function scope, or the global scope if it is at the top level outside of any function.

We have two more keywords for variable declaration; let and const. They are block scope.

19. Hoisting

When JavaScript compiles all your code, all variable declarations using var are hoisted/lifted to the top of their functional/local scope (if declared inside a function), or to the top of their global scope (if declared outside of a function) — regardless of where the actual declaration has been made. This is what we mean by hoisting.

Functions declarations are also hoisted, but these go to the very top, so will sit above all of the variable declarations.

console.log(myName);    
var myName = ‘Sunil’;

What will be the answer - 
1. Uncaught ReferenceError: myName is not defined
2. Sunil
3. undefined

In the above example, the answer will be, “undefined”.

Why? As we mentioned earlier, variables get moved to the top of their scope when your JavaScript compiles at runtime. So when the JavaScript gets compiled, var myName would get moved to the top of its scope.

The only thing that gets moved to the top are the variable declarations, not the actual value given to the variable.

So that’s why we get undefined, not a ReferenceError, because the variable was declared at the top of the scope.

20. Closure

Closure is one of the most important, and often least understood, concepts in JavaScript. A closure is a function, defined inside another function (called parent function), and has access to the variable which is declared and defined in the parent function scope.

The closure has access to the variable in three scopes:

  • Variable declared in his own scope
  • Variable declared in parent function scope
  • Variable declared in the global namespace
function makeAdder(x) {    
// parameter `x` is an inner variable
// inner function `add()` uses `x`, so   
// it has a "closure" over it    
	function add(y) {        
		return y + x;    
	};
    return add; 
}
var plusTen = makeAdder( 10 );
plusTen( 3 );       // 13 <-- 10 + 3 
plusTen( 13 );      // 23 <-- 10 + 13

When we call makeAdder(10), we get back a reference to its inner add(..) that remembers x as 10. We call this function reference plusTen(..) — it adds its inner y( 3 ) to the remembered by x( 10 ).

21. This Identifier

Another commonly misunderstood concept in JavaScript is the this keyword.

If a function has a this reference inside it, than this reference usually points to an object. But which object it points to depends on how the function was called.

It’s important to realize that this does not refer to the function itself, as is the most common misconception.

function foo() {    
   console.log( this.bar ); 
}
var bar = "global";
var obj1 = {    
  bar: "obj1",    
  foo: foo 
};
var obj2 = {  
  bar: "obj2" 
};
foo();              // global
obj1.foo();         // "obj1" 
foo.call( obj2 );   // "obj2" 
new foo();          // undefined

To understand what this points to, you have to examine how the function in question was called. It will be one of the four ways shown above, and that will then answer what this is.

22. Prototypes

When you reference a property on an object, and if that property doesn’t exist, JavaScript will automatically use that object’s internal prototype reference to find another object to look for the property. You could think of this almost as a fallback if the property is missing.

The internal prototype reference linkage from one object to its fallback, happens at the time the object is created. The simplest way to illustrate it is with a built-in utility called Object.create(..).

var foo = {
    a: 42 
};
// create `bar` and link it to `foo` 
var bar = Object.create( foo );
bar.b = "hello world";
bar.b;      // "hello world" 
bar.a;      // 42 <-- delegated to `foo`
Conclusions

All the terms we’ve discussed are necessary for becoming a good JS developer, and you need to become familiar with these terms

I hope this article is useful to you. Thanks for reading and keep learning!

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Top Node.js Development Companies and Expert NodeJS Developers

Top Node.js Development Companies and Expert NodeJS Developers

A thoroughly researched list of top NodeJS development companies with ratings & reviews to help hire the best Node.JS developers who provide development services and solutions across the world. List of Leading Node.js development Service Providers...

A thoroughly researched list of top NodeJS development companies with ratings & reviews to help hire the best Node.JS developers who provide development services and solutions across the world.
List of Leading Node.js development Service Providers & Developers...