Learning the Basics – JavaScript and NodeJS (Part 1)

How to run a node program:

  1. Install Node
  2. Navigate to folder containing the file to run
  3. Run application by using node filename.js
node app.js


Object Literals:

Object Literal are name/value pairs separated by commas and surrounded by curly braces. Note that in JavaScript, any function can be added to an object in the form of a property.

 

This is how the output will look like:

$ node app.js

Welcome to Software Testing Trends...
Course available to learn:
1: Javascript
2: NodeJS
3: Python

Function Statement:

When function definitions start with the function keyword and are followed by a name for the function then this way of creating a function is called “a function definition” or “a function declaration” or “a function statement”.

function welcome() {
     console.log('Welcome to STT');
}

welcome();

Function Expression:

In Function expressions syntax, a value that is of type function is assigned to a variable as shown in below example. The function on the right-hand side of the assignment operator is called a “function expression.” Most callbacks in JavaScript are often function expressions.

 var welcomeStudent = function(name) {
       console.log('Hi ' + name+ ', Welcome to STT!');
}

welcomeStudent('Mariam');

Anonymous Function Expressions:

A function expression that doesn’t have a name is called anonymous function expression

var sayHi = function() {
   console.log('Hi, Welcome to STT!');
};

Named Function Expression:

Function expressions that have names are known as a named function expression.

var func = function fibonacci() {
    // This function "fibonacci()" can also be used here to call itself recursively.
};

First Class Functions:

First-class functions are functions that can be treated like any other variable in JavaScript such as:

A Function can be passed as an argument to other functions

A function can be returned by another function

A function can be assigned as a value to a variable.

This is how the output will look like:

$ node app.js

Welcome to STT
Welcome to STT
Hi Mariam, Welcome to STT!
Hello Mariam!

Function Constructors:

In JavaScript, a constructor is used when working with Prototype objects or Object Oriented JavaScript. It can be viewed as a normal function that is used to construct objects. It initializes a value or sets the default values.

Let’s have a look on an example:

Here this that is used in a constructor function is a keyword. The ‘this’ keyword does not have a value. When a new object is created, the value of this will become the new object.

Objects of the same type are created by calling the constructor function with the new keyword:

var employee1 = new Person(“John”, “Mac”, 28, “IT”);
var employee2 = new Person(“Jason”, “Rao”, 48, “Accounts”);

In above example, Person(first, last, age, department) is a Constructor Function.

new Person(“John”, “Mac”, 28, “IT”); is where we are calling the Constructor function with a “new” keyword which creates an object of the constructor i.e. employee1

Similarly employee2 is another Object of Person() constructor.

This is how the output will look like:

$ node app.js

Hi John MacDonald
Welcome to IT department
Hi Jason Rao
Welcome to Accounts department

In JavaScript, it is considered a good practice to name constructor functions with an upper-case first. This is done in order to create more readable code.

Prototypal Inheritance:

JavaScript’s object system is based on prototypes. Each object has a private property which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain. The Object.prototype is on the top of the prototype inheritance chain

When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.

When we want to read a property from an object, and it’s missing, JavaScript automatically takes it from the prototype. This behavior is known as “prototypal inheritance”.

This is how the output will look like:

$ node app.js

Hello, Ambreen Khan
Welcome to the class: JavaScript
Hello, Abdul Khan
Welcome to the class: Python
Person { greet: [Function] }
Person { greet: [Function] }

References:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

https://javascript.info/prototype-inheritance

https://www.w3schools.com/js/js_object_prototypes.asp

 Immediately-invoked Function Expressions:

Immediately-invoked Function Expression or IIFE (pronounced as “iffy”) is a function expression that’s immediately invoked after it’s created.

There are multiple methods to define an IIFE:

Method 1: Using a prefix in-front of the function to make it an expression

See an example below. It shows the alert “Hello from IIFE!” when we run it on the browser

!function() {
   alert("Hello from IIFE!");
}();

It’s a function that died immediately after it came to life. The prefix “!” in-front of the function keyword on line 1 enforces JavaScript to treat whatever that’s coming after “!” as an expression instead of a function statement/definition. We can replace “!” with any unary operator such as “+”, “-”, or even “~”. The first character can also be replaced with void as shown in example below:

void function() {
   alert("Hello from IIFE!");
}();

In above example, void is forcing the function to be treated as an expression.

Method 2: Wrapping the function expression into parenthesis

The other method to make a function behave as an IIFE is to wrap the function into parenthesis.

There are two variations of IIFE when using parenthesis:

Variation 1:

(function () {
    var aName = "Barry";
})();

aName; 
// Variable name ‘aName’ above is not accessible from the outside scope 
//and throws "Uncaught ReferenceError: aName is not defined"

Variation 2:

(function () {
   var aName = "Barry";
} ());

aName;
// Variable name ‘aName’ is not accessible from the outside scope 
// and throws "Uncaught ReferenceError: aName is not defined"

Important IIFE Features:

  1. Any variables or functions declared inside the IIFE are not visible to the outside world.
function IIFE_initEmployee() {

// Private variables that no one has access to outside this IIFE
   var grade;
   var salary;
   
   initProfile();

// Private function that no one has access to outside this IIFE

function initProfile() {
   grade = 10;
   salary = 50000
}
}());
  1. IIFE can return a value that can be assigned to a variable.
var result = (function() {
   return "Value returned from IIFE";
}());

alert(result); // alerts " Value returned from IIFE "
  1. IIFEs can also take arguments while they are invoked
(function welcome(msg) {
   console.log(msg);
}("Welcome to STT!"));

References:

https://developer.mozilla.org/en-US/docs/Glossary/IIFE

https://medium.com/@vvkchandra/essential-javascript-mastering-immediately-invoked-function-expressions-67791338ddc6

Module:

A module is a reusable block of code whose existence doesn’t accidently impact other code.

App.js

welcome.js

 

This is how the output will look like:

$ node app.js

Welcome to STT!

Best Practices:

  1. It’s always recommended to start scripts with “use strict”. The “use strict” directive switches the engine to the “modern” mode, changing the behavior of some built-in features.
  2. It is considered a good practice to name constructor functions with an upper-case first letter.

Learning Resources:

https://javascript.info/

https://developer.mozilla.org/en-US/docs/Web/JavaScript

https://github.com/getify/You-Dont-Know-JS

https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d

Recommended Courses:

Checkout Courses on Udemy by Stephen Grider and Colt Steele

 

 

 

Article written by

  1. Ben Cryer
    Ben Cryer at | | Reply

    Well done. Nice presntation,keep it up.

Please comment with your real name using good manners.

Leave a Reply