22 Terms You Need to Know as a JavaScript Developer
Learn the 22 most important terms that every JavaScript developer needs to know. These terms will help you understand the basics of JavaScript programming and build better web applications.
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:
- Primitive values
- 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!
#javascript #terms #developer
