Callback, Method, OOP, null and String in Javascript

JavaScript is a programming language used for the development of web pages and web applications in both the frontend “client-side” and backend “server-side”. In frontend development, JavaScript is known as a scripting language in which instructions are written to bring new functions to the web application. It also uses coding languages such as HTML and CSS to create a specific UI layout structure for the web page or application. In backend development, JavaScript is used to make any UI changes to an existing web page or application.

What is a callback function in JavaScript?

A callback function is a block that performs a specific task when called. It is a function that is passed as an argument to another function that executes the callback based on the result.
Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// function
function greet(name, callback) {
  console.log('Hi,' + ' ' + name);
  callback();
}

// callback function
function callMe() {
  console.log('I am a callback function');,
}
// passing function as an argument
greet('Jane'; call me);

// output:
// Hi Jane
// I am a callback function

In the above syntax, a function named “greet” is created and consists of two arguments: a string value “name” and a function “callback”. In the second code section, a callback function named “callMe” is created. Once that is done, the two arguments “name” and “function” are passed and the callback function will be returned along with the string “Hi Jane”.

Types of callback functions

Synchronous callback function

• Synchronous callback is a function which is executed at the same time the higher-order function is being executed and that high-order function uses the callback function.

• It is executed during the execution of the filter() function in the high-order function.

Asynchronous callback function

• Asynchronous call back function is executed after the execution of the high-order function.

• Asynchronous callback functions consist of operations which are transferred through a queue and event loop.

What is a method in JavaScript?

A method is a property of a value and consists of actions that can be performed on an object. In a method a function is stored as an object property and a method can be accessed by using the dot notation(.).

Syntax: ObjectName.methodkey()

Example2:

1
2
3
4
5
6
7
// Object containing a method
const employee = {
    name: 'Jane',

    greet: function () {
      console.log('hello');
    }

Explanation
Stated below are explanations for code in the above syntax.

• const employee = { : created an object called “employee”.

• name: 'Jane', : “Jane” is the property of the object “employee”.

• greet: function() : “greet” is a method with a “function ()”.

Adding a method to an object

Shown below is a syntax and explanation of how a method is added to an object.
Note: the syntax ObjectName.methodkey() will be used.

Syntax

1
2
3
4
5
6
7
8
9
10
11
//creating an object
let employee = {

  //adding a property
  employee.name = "Jane";
}

//adding a method
employee.greet = function () {
  console.log('hello')
}

An object called “employee” is created and a property named “Jane” is added as a property of the “employee” object. In simple terms, this suggests that there is an employee and the name is Jane. Lastly, a method is created that consists of a function named “greet”.

Below is the breakdown of the “ObjectName.methodkey()” using the added method in the above syntax (employee.greet = function ())

• ObjectName: employee

• dot notation: (.)

• methodkey (): greet

“this” keyword
“this” is used to access a property of an object from a method of the same object, this means “this” keyword can access a property of an object within a method.

“this” keyword use the syntax: this.name:

• this: Identifies an object.

• (.): Used to access a method.

• name: Used to access a property of an object

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const employee = {
  name: 'Jane',
  age: 40,

  //accessing a property
  greet: function () {
    console.log('The name  is ' + ' ' + this.name);
  }
}

person.greet()

// output:
//The name is Jane

An object named “employee” is created and it consists of two properties, name “Jane” and age “40”. The object consists of a method with a “greet function ()”. Then, a property called “name” is accessed within an object using the “this.name”.

Syntax breakdown

• const employee: An object named employee.

• name and age: Properties of an object.

• greet: function(): A method consisting of a greet function.

• this.name: A “this” keyword used to access a property called “name”.

Is JavaScript object-oriented?

JavaScript is a prototype programming language, which means it is an object-oriented programming language. JavaScript uses prototype instead of “class” and uses “object” to represent real world entities in a program.

Object-oriented principles

Stated below are the object-oriented principles used in JavaScript.

Object

• object is a non-primitive data type which stores multiple collections of data.

• An object stores values as strings and numbers.

• Object is a unique entity that consists of a property and a method.

• A property in an object is also known as a characteristic of an object.

• Methods, which are also found in an object, are known as actions.

Example

1
2
3
4
5
//object 
const student = {
  first Name: 'Jane'
  age: 20
};

The above syntax suggests an object named “student”, which consists of two properties, first Name ‘Jane’ and age ‘10’.

Classes

A class is a design or sketch of an object.
In JavaScript, a class is created using a JavaScript constructor function.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// constructor function
function Person() {
  this.name = 'Jane'
  this.age = 23

  // create an object
  const person1 = new person()

  // creating a class
  class Person {
    constructor(name),
      this.name = name;
  }
}

Syntax explanation

In the first section of code, the constructor function named “Person” consists of properties of name ‘Jane’ and age ‘23’. The second code section focuses on creating an object named “Person” and it is set equal to the constructor function; this means all the properties in the constructor function will be inherited by the object. In the last section of code, a class named Person is created and a constructor function is used to inherit and translate all “Person” properties to the class “Person”.

Inheritance

• In JavaScript inheritance is known as prototype inheritance.

• In JavaScript a property is used to add properties and methods to a constructor function.

• Prototype inheritance is a process in which an object uses methods or properties of another object.

• In JavaScript objects inherit properties and methods from a prototype, e.g ObjectName inherits properties or methods from Name.prototype.

Syntax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// constructor function 
function Employee()
this.name = 'Jane'

// creating objects
const employee1 = new Person()
const employee2 = new Person()

// adding a property to a constructor
Employee.prototype.name = 'Jane';

// Property value of Employee

// inheriting the property from prototype 
console.log(employee1.name);
console.log(employee2.name);

// output:
// {name: 'Jane'}
// Jane
// Jane

The syntax above showcases the step by step process of the prototype inheritance. In the first code section, a constructor function named Employee is created and consists of a property named Jane. In the second section of code two objects are created, object1 is named employee1 and object2 is named employee2. In the third code section, a property called name is added to a constructor function and that would lead to creation of a prototype: Employee.prototype.name = 'Jane'. Lastly the second object will use the prototype syntax to inherit a property from the first object and the output will be similar in both objects.

Primitive data types

In JavaScript, a primitive data type is data that is not an object, has no methods, and refers to a single value.

Syntax
var a = 6;

The above syntax suggests that the value of variable “a” is six.

What is null in JavaScript?

Null is a built-in primitive data type, which is not an object and has no method. Null represents an empty or unknown value and is represented by the keyword “null”.

Syntax
var = "null";

The syntax code stated above suggests that the noted variable is empty and may be added later on.

False value:
In JavaScript, null is treated as a false value. This means when “null” encounters a boolean operator it will be returned as a false value.

Example

1
2
3
4
5
6
7
if (null) {
  console.log('null is true');
} else {
  console.log('null is false');

  // Output:
  // null is false

The above syntax indicates that when a “null” encounters a boolean operator, which will be “else”, then the “null” will be returned as a false value.

typeof() operator:

typeof() is an operator used to determine a type of a variable or value. Since “null” is an object, the typeof() operator can be used to verify or check if “null” is an object.

Example

1
2
3
4
5
const a = null;
console.log(typeof) a); // Object

// Output:
// null is an Object

Default values

Default values is a process of using function parameters to receive default values. When a default parameter function receives a “null”, the function recognizes the “null” as a value.

Example

1
2
3
4
5
6
7
8
9
function test(x = 1) {
  console.log(x);
}

//passing undefined
// takes null
test(null); //null
// Output:
// null

What is string JavaScript?

String is a primitive data type which represents a sequence of characters and is an object. A “string” is created when a sequence of characters or text is surrounded by quotes.

Three ways in which a string is created using quotes:

• Single quotes: ‘Welcome’

• Double quotes: “Welcome”

• Backticks: `Welcome`

Single quotes and double quotes are similar to one another and can be used interchangeably. Backticks are used when the variables or expressions are included in a string, and this is done by using {variable or expression}

String characters

String characters are the characters surrounded by quotes to form a string. These characters can be accessed using two ways, namely: charAt() method and as an array.

charAt() method
charAt() method is used to access characters within a string.

Example

1
2
3
4
const a = 'hello';
console.log(a.charAt(1); // "e"
    // output:
    // e

In the syntax above, charAt() is used to access the second character of a string, the output of which is “e”. Note that in JavaScript the numbers start from zero and not one, e.g if there is a string “Hi”, “H” character will be character number [0] and “i” character will be character number [1].

Array

An array is used to represent or treat a string as an array in order to access the characters within the string.

Example

1
2
3
4
5
const a = 'hello';
console.log(a[1]); // "e"

// output:
// e

The syntax above suggests that in order to access a character within a string, the string needs to be represented as an array. “a” is assigned to string ‘hello’ which will be treated as an array, thereafter a[1] suggests that the second character in a string should be accessed and be the output.

In JavaScript strings are immutable. This means any character in a string cannot be changed or manipulated but the variable can be assigned a new string.

Example1

1
2
3
4
5
6
let a = 'jane';
a[0] = 'J'
console.log(a); // "jane"

// output:
// jane

In the syntax shown above “a” is assigned a string “jane”, the second line of code suggests that the character [0], meaning the first letter on the string(j), should be changed to a capital letter “J”. But because characters in a string cannot be changed, the output will be “jane” without changing the first character of a string.

Example2:

1
2
3
4
5
6
let a = 'jane';
a = "Jane"
console.log(a); // "Jane"

// output:
// Jane

The syntax above showcases how a string can be changed. String “jane” is replaced with another string “Jane”.