Lyly Sara

Lyly Sara

1578597290

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.

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!

#javascript #terms #developer

What is GEEK

Buddha Community

22 Terms You Need to Know as a JavaScript Developer

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

Ajay Kapoor

1626321063

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company

Ajay Kapoor

1623988261

JS Development Company India | JavaScript Development Services

PixelCrayons’ JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Javascript Web Development Company

#javascript-web-development-services #javascript-development-company #javascript-development-companies #top-javascript-development-company #best-javascript-development-company

Fredy  Larson

Fredy Larson

1595059664

How long does it take to develop/build an app?

With more of us using smartphones, the popularity of mobile applications has exploded. In the digital era, the number of people looking for products and services online is growing rapidly. Smartphone owners look for mobile applications that give them quick access to companies’ products and services. As a result, mobile apps provide customers with a lot of benefits in just one device.

Likewise, companies use mobile apps to increase customer loyalty and improve their services. Mobile Developers are in high demand as companies use apps not only to create brand awareness but also to gather information. For that reason, mobile apps are used as tools to collect valuable data from customers to help companies improve their offer.

There are many types of mobile applications, each with its own advantages. For example, native apps perform better, while web apps don’t need to be customized for the platform or operating system (OS). Likewise, hybrid apps provide users with comfortable user experience. However, you may be wondering how long it takes to develop an app.

To give you an idea of how long the app development process takes, here’s a short guide.

App Idea & Research

app-idea-research

_Average time spent: two to five weeks _

This is the initial stage and a crucial step in setting the project in the right direction. In this stage, you brainstorm ideas and select the best one. Apart from that, you’ll need to do some research to see if your idea is viable. Remember that coming up with an idea is easy; the hard part is to make it a reality.

All your ideas may seem viable, but you still have to run some tests to keep it as real as possible. For that reason, when Web Developers are building a web app, they analyze the available ideas to see which one is the best match for the targeted audience.

Targeting the right audience is crucial when you are developing an app. It saves time when shaping the app in the right direction as you have a clear set of objectives. Likewise, analyzing how the app affects the market is essential. During the research process, App Developers must gather information about potential competitors and threats. This helps the app owners develop strategies to tackle difficulties that come up after the launch.

The research process can take several weeks, but it determines how successful your app can be. For that reason, you must take your time to know all the weaknesses and strengths of the competitors, possible app strategies, and targeted audience.

The outcomes of this stage are app prototypes and the minimum feasible product.

#android app #frontend #ios app #minimum viable product (mvp) #mobile app development #web development #android app development #app development #app development for ios and android #app development process #ios and android app development #ios app development #stages in app development

Lyly Sara

Lyly Sara

1578597290

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.

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!

#javascript #terms #developer