Learn to understand what Javascript is and explain its use in web development.

JavaScript is the third of the major building blocks of a web page. Without it, we wouldn’t have the dynamic content and usability we expect from modern websites. We will now learn what it is (and isn’t) and how it is used, not only on the web but in all of its applications.Overview

In order to understand the JavaScript language, the first step is to understand and be able to use variables and primitive data types.

Overview

In order to understand the JavaScript language, the first step is to understand and be able to use variables and primitive data types.

What is scope in javascript

Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code.

Variables

At the heart of JavaScript are variables. A variable is a way to store the value of something to use later. (A note for those with previous programming knowledge: JavaScript is a loosely-typed language, which means that a variable can be set (and reset) to any type. We do not need to declare its type when initiating the variable.)

var

var is the ES5 way of declaring a variable. This is a generic variable keyword.

let

let is a new ES6 variable keyword. This will assign a variable much like var, but with a little bit different behavior. Most notably, it differs by creating “block level scope”.

const

const is also new in ES6. A const variable is a variable that cannot be changed. It’s short for “constant

Primitive Data Types (String, Number, Boolean)

The term ‘primitive data type’ refers to the fact that these are the most basic data types in the language. All other data types (which we will learn about in later lessons) use these types.

Strings

Strings are blocks of text. They will always be defined with quotation marks around them, either single or double. Any text with quotes around it is a string.

Numbers

Numbers are just that, numbers. Numbers do NOT have quotes around them. They can be negative as well. JavaScript does have a limitation on the size of a number (+/- 9007199254740991), but only very rarely will that limitation come up.

Booleans

Booleans come from low-level computer science. It is a concept that powers binary code and the very core of computers. You may have seen binary code in the past (e.g., 0001 0110…). That is Boolean logic. It essentially means you have two choices, on or off, 0 or 1, true or false. In JavaScript, we use Booleans to mean true or false. This may seem simple at first but can get complicated later on.

Properties

Properties allow us to access data from a data type. There are many different properties on every data type that will give you a bit of information about that specific object.

One we will look at here is the length property of a string. It will give us the length of the string, as in how many characters are in the string (spaces count).

Methods

Methods allow us to manipulate a data type. Methods are different from properties in that they need to have parentheses on the end.

Get Sandeep Rathod’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The method we will look at here is the toString method. It will convert a Number or Boolean to a string.

What is the difference between Call, Apply and Bind

Call: The call() method invokes a function with a given this value and arguments provided one by one

var employee1 = { firstName: "John", lastName: "Rodson" };
var employee2 = { firstName: "Jimmy", lastName: "Baily" };

function invite(greeting1, greeting2) {
  console.log(
    greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2
  );
}

invite.call(employee1, "Hello", "How are you?"); // Hello John Rodson, How are you?
invite.call(employee2, "Hello", "How are you?"); // Hello Jimmy Baily, How are you?

Apply: Invokes the function with a given this value and allows you to pass in arguments as an array

var employee1 = { firstName: "John", lastName: "Rodson" };
var employee2 = { firstName: "Jimmy", lastName: "Baily" };

function invite(greeting1, greeting2) {
  console.log(
    greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2
  );
}

invite.apply(employee1, ["Hello", "How are you?"]); // Hello John Rodson, How are you?
invite.apply(employee2, ["Hello", "How are you?"]); // Hello Jimmy Baily, How are you?

Bind: returns a new function, allowing you to pass any number of arguments

var employee1 = { firstName: "John", lastName: "Rodson" };
var employee2 = { firstName: "Jimmy", lastName: "Baily" };

function invite(greeting1, greeting2) {
  console.log(
    greeting1 + " " + this.firstName + " " + this.lastName + ", " + greeting2
  );
}

var inviteEmployee1 = invite.bind(employee1);
var inviteEmployee2 = invite.bind(employee2);
inviteEmployee1("Hello", "How are you?"); // Hello John Rodson, How are you?
inviteEmployee2("Hello", "How are you?"); // Hello Jimmy Baily, How are you?

What is the difference between == and === operators

JavaScript provides both strict(===, !==) and type-converting(==, !=) equality comparison. The strict operators take type of variable in consideration, while non-strict operators make type correction/conversion based upon values of variables. The strict operators follow the below conditions for different types,

Some of the example which covers the above cases:

0 == false   // true
0 === false  // false
1 == "1"     // true
1 === "1"    // false
null == undefined // true
null === undefined // false
'0' == false // true
'0' === false // false
NaN == NaN or NaN === NaN // false
[]==[] or []===[] //false, refer different objects in memory
{}=={} or {}==={} //false, refer different objects in memory

What is a higher order function

A higher-order function is a function that accepts another function as an argument or returns a function as a return value or both. The syntactic structure of higher order function will be as follows,

const firstOrderFunc = () =>
  console.log("Hello, I am a First order function");
const higherOrder = (ReturnFirstOrderFunc) => ReturnFirstOrderFunc();
higherOrder(firstOrderFunc);

You can also call the function which you are passing to higher order function as callback function.What is Hoisting

What is Hoisting ?

Hoisting is a JavaScript mechanism where variables, function declarations and classes are moved to the top of their scope before code execution. Remember that JavaScript only hoists declarations, not initialisation. Let’s take a simple example of variable hoisting,

console.log(message); //output : undefined
var message = "The variable Has been hoisted";

The above code looks like as below to the interpreter,

var message;
console.log(message);
message = "The variable Has been hoisted";

In the same fashion, function declarations are hoisted too

message("Good morning"); //Good morning

function message(name) {
  console.log(name);
}

What are closures

A closure is the combination of a function bundled(enclosed) together with its lexical environment within which that function was declared. i.e, It is an inner function that has access to the outer or enclosing function’s variables, functions and other data even after the outer function has finished its execution. The closure has three scope chains.

1. Own scope where variables defined between its curly brackets
2. Outer function’s variables
3. Global variables

Let’s take an example of closure concept,

function Welcome(name) {
  var greetingInfo = function (message) {
    console.log(message + " " + name);
  };
  return greetingInfo;
}
var myFunction = Welcome("John");
myFunction("Welcome "); //Output: Welcome John
myFunction("Hello Mr."); //output: Hello Mr. John

What is a promise

A promise is an object that may produce a single value some time in the future with either a resolved value or a reason that it’s not resolved(for example, network error). It will be in one of the 3 possible states: fulfilled, rejected, or pending.

The syntax of Promise creation looks like below,

const promise = new Promise(function (resolve, reject) {
  // promise description
});
const promise = new Promise(
  (resolve) => {
    setTimeout(() => {
      resolve("I'm a Promise!");
    }, 5000);
  },
  (reject) => {}
);

promise.then((value) => console.log(value));

What is a callback function

A callback function is a function passed into another function as an argument. This function is invoked inside the outer function to complete an action. Let’s take a simple example of how to use callback function

function callbackFunction(name) {
  console.log("Hello " + name);
}

function outerFunction(callback) {
  let name = prompt("Please enter your name.");
  callback(name);
}

outerFunction(callbackFunction);  

What is promise chaining

The process of executing a sequence of asynchronous tasks one after another using promises is known as Promise chaining. Let’s take an example of promise chaining for calculating the final result,

new Promise(function (resolve, reject) {
  setTimeout(() => resolve(1), 1000);
})
  .then(function (result) {
    console.log(result); // 1
    return result * 2;
  })
  .then(function (result) {
    console.log(result); // 2
    return result * 3;
  })
  .then(function (result) {
    console.log(result); // 6
    return result * 4;
  });