DEV Community: Edeke Emmanuel

Method js JavaScript core principles

Edeke Emmanuel — Wed, 03 May 2023 16:49:50 +0000

JavaScript Method is a property of an object, that performs certain function or task.

Object Method

It's a function property in an object scope.

// object containing major types of method
const person = {
    name: 'John',

    greet: function() { 
let reply = 'Good morning ' + this.name
console.log(reply); 
},

//short syntax
greetBack() {
  return "How are you " + this.name + " ?"
},

//Compose Method
["reply" + 2]() {
  console.log('I am fine ' + this.name)
},

//Async Method
kate: async function() {
  console.log(this.name + ', Boss want to see you');
},

async boss() {
  let reply = 'Have your seat, ' + this.name
  await console.log(reply);
},

//Generator Method 
increment: function* () {
    let index = 5;
    while (true) {
      yield console.log(index++);
    }
  },

async *decrement () {
    yield console.log(4);
  },

};

person.greet(); //Good morning John
console.log(person.greetBack()); //How are you John ?
person.reply2(); // I am fine John
person.kate(); //John, Boss want to see you
person.boss(); //Have your seat, John 
person.increment().next(); //5
person.decrement().next(); //4

Adding Method to Object

#1
var a = new Object();
a.method = function(){}

#2
var a = new Object();
a.prototype.method = function(){}

#3
function myObject() {
    this.method = function(){}
}
var a = new myObject();

#4
function myObject() {}
myObject.prototype.method = function(){}
var a = new myObject();

#5
var a = {
    method: function(){}
}

Class Method

class Greeting {
  msg = "Good morning friend's";
//Method
  morningGreet() {
    return this.msg;
  }
}

class Person extends Greeting {
  speak() {
    return super.morningGreet();
  }
}

//instance of class
const john = new Person();
console.log(john.speak());

class Person { 

constructor(name) {         
this.name = name;   
} 

getName() {     
    return this.name;
    }

//Static Method
static createAnonymous(gender) {
        let name = gender == "female" ? "John Doe" : "Jane Doe";
        let req = new Person(name);
        return console.log(req);
} 

//Private Method
#occupation = "UI/UX";
#biodata; 

#status() {
  let req = "She is an elegant " + this.#occupation + " by profession and well mannered person."
  return console.log(req)
}

//Private Static Method
static #age() {
  let req = 'Jane Doe is 20 year old beautiful woman.'  
  return console.log(req)
}

//returning request of both private and static method with getProfile()
getProfile() {
  let statusA, statusB;
//calling private and static private method in statusA and statusB
  statusA = Person.#age();
  statusB = this.#status();

  let req = statusA + statusB;
  return console.log(req);
}   

}
Person.createAnonymous('female');

//calling instance of static method
let person = new Person();
person.constructor.createAnonymous('female');

person.getProfile();

person.createAnonymous('female') //Type Error

Note:

you can't call a private method into a static private method but you can call static private method inside private method
If you attempt to call the static method from an instance of the class, you’ll get an error when using new.

Accessing Method

This is a means of getting the method name from the object name.

objectName.methodName()

const client = {
name:  'Jane Doe',
greet() {
return `Good morning Mrs ${client.name}`;
}
}

//Accessing Method
client.greet(); //Good morning Mrs Jane Doe

//Accessing Property
client.name; //Jane Doe

Function js JavaScript advance principles

Edeke Emmanuel — Mon, 17 Apr 2023 22:06:24 +0000

Conditional function

Function can be declare in a conditional statement.

Recursive function

This is a function that call itself. Just for instance, looping with while loop can run code for infinite number of times but when break keyword is applied, it prevent such from happening, likewise recursive function can be infinite.

Using if...else statement ends infinite recursion.

Callback function

This is simply when an arguments is passed as a function call in another function.

with function expression

with more function expression

Array method runs as function

These are some array method like map, reduce, filter, slice ... are use as a function.

const number = [10, 20, 30, 40, 50]; 
//adding 100 to each value in number
const result = number.map( 
(num) => num += 100
) 
console.log(number); // [10, 20, 30, 40, 50]
console.log(result); // [110, 120, 130, 140, 150]

Review my article on all JavaScript method; array methods...

Click now 👆

Arguments in function call

It's when many argument are pass to a function along with a seperator like , ; : - _ using arguments[i]; this simply means array of argument from 0 to any positive number.

It have a similarity in rest parameters. To get the total number of arguments passed use the keyword arguments.length

Rest parameters

This is when a function call many parameter with it parenthesis.

Nested function

Simply refer to as function in a function.

function divide(x) {
  function value(y) {
    return x / y;
  }
  return value;
}
console.log(divide(10)(5)); //2

With two parameter

It also form a closure, meaning the inner function(second function) can only be accessed with in the outer function and can make use of the arguments and variables of the outer function(first function) while outer function can not access variables or define function inside a inner function.

Function closure

These are inner function in a outer function.

without parameter

Function Curry

This is a sequence of function that runs each containing a single parameter and then return many argument.
It's function that return other function with single parameter each.

Function Composition

This is applying more than one function to a function call.
It's shows similarities to mathematical derivations in function.

Function Decorator

This is a function that takes one function as an argument and return that function with variation of argument.
This is refers to as a design pattern, that wraps function in another function.
It can also be use in Class decorator and Class member decorators. It is deep in learning and widely used in TypeScript, for to be use in JavaScript needs some tools like Babel and TypeScript compiler.

unary function

multiple nested function

Function js JavaScript complete guide

Edeke Emmanuel — Mon, 17 Apr 2023 11:56:43 +0000

A function is a set of statement or procedure on how to perform a particular task or calculate the value of a given parameters.

Function Lite

Function contain parenthesis with enclose parameters(or rather a function with an arguments) or none parameter and body of procedures or statements to perform a given task.

A function call runs every program of a given function body.

Princple/basic code of function

//General formular =>
function parenthesis(parameters) {
body of statement or procedure...
return ...
}
//calling a function
parenthesis(parameters);

//Clear example:
function add(number) {
let solution = number + number;
return solution;
}
console.log(add(5)) //10

Declaring or defining a function

These are means of naming a function that run set of program, it can either be Anonymous & Non anonymous.

Anonymous function

It's a function with no defined name or parenthesis.

//Ordinary Function:
(function() { 
console.log(2);
})();

Function can either be an ordinary or arrow, they both have similar objective but different code structure.

The use of (); at every end of a function, it's called invoking a function. This is a function calling itself automatically.

( () => {
console.log('Hello World');
}) ();

Function expression

The step of using the keyword let, const & var to declare a variable, which in return this variable is use to store a function as the value to be executed.

const multiply = function (num) {
return num * num;
}
console.log(multiply(5));//25

Non anonymous

Simply a defined function with parenthesis.

//Ordinary Function:
function add(num) { 
return num + num;
}
console.log(add(5));//10

//Function  expression: 
const operation = function sub(num) {
return num - 1;
}
console.log(operation(5)); //4

Default parameters

A stand-by define parameter use or an assigned value for a given parameter.

function greeting(name, message = 'Good morning') {

const typing = message + name;
return typing;

}
console.log(greeting(' John')); //Good morning John

Return

This gives the value of the body of function executed to a function call. Any code after return will not execute or run within the function scope.

Function scope

This basically talks about the user access to a variable or function inside or outside a scope {}.

Function can access a variable outside it scope {} and also modify it(make changes on it).
Variable declared inside a function or condition statement can not be accessed outside it scope {}
If two variable are defined either inside or outside function scope with the same name, then the function only pick or access the one inside the scope {} of a function.

In hoisting; a variable declared using only var or fuction call before it statement of function or body of code(except using function expression), will be executed or run code without any expected error.

Calling a function

It's accomplished when the body of function is program on the procedure of how a task should be executed, so the expected output must be called, to show result to the user.

It contain the name of the function with defined argument.

function admin(user) {
return user = `${user} is a junior officer`;
}
console.log(admin('John'));

Equivalent in function call

Simple description is...

const clothVendor = function sharonWares(rate) {
return ...;
}

clothVendor() == sharonWares() == arguments.callee()

Arrow function

Arrrow function are always anonymous and the ES6 syntax for function.js.

const person= (name)=> {
return name + ", He is eloquent";
}
console.log(person("John")); //John, He is eloquent

There syntax are always short in expression and does not have its own this, arguments, super, or new.target.

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; //the use of `this` refers to the Person object
  }, 1000);
}

let sequence = new Person();
console.log(sequence);

In ordinary function, this approach is different due to their working principles.

function Person() {
  // define this as a variable 
  const self = this;
  self.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `self` variable as the Person object
    self.age++;
  }, 1000);
}
const incr = new Person();
console.log(incr) //1

The ~~next step~~ doesn't perform the function of this in object js.

function Person() {
  // The Person() constructor defines `this` as itself.
  this.age = 0;

  setInterval(function ageBracket() {
/*In nonstrict mode, the ageBracket() function defines `this` as the global object, which is different from the `this` defined by the Person() constructor, so then this result to zero as defined */
    this.age++;
  }, 1000);
}

const incr = new Person();
console.log(incr) //0

Loop js simplicity

Edeke Emmanuel — Sat, 15 Apr 2023 11:48:20 +0000

JavaScript loop

This is a mechanism or step to execute a piece of code repeatedly.

This usally have starting point and ending point or it could run continuously non stop(which could lead to memory loss). Its mostly occur in an array.
They are different types of loop, which initially perform the same task by repeating an action number of times(0-10000) or continuously.

Generally a loop should contain

Initial expression(more like an initial value of a parameter)
Condition (more like on what bases should you carry out a task)
Increasing or descending order ( more like when the code has perform the first task, then rerun again e.g automating a dice game 100 times)
Statement of execution (more like further adding features or certain conditions )

Types of loop JavaScript js

Loop js iterates a program or code.
Iteration is a single execution of a loop body.

1. do while loop:

This execute a task in an infinite number of times except the condition is false, the execution ends.

_In order to run multiple statement, block ({ }) is use to group them.
_

do{
//statement of task
} while (//condition);

2. while loop:

This is similar to do-while loop. If i++ is not included, it will loop forever, therefore causing storage issue in the browser.

Counter iterators:break & continue

Break:
This terminate loop and switch immediately.

Note: generally if the loop is being executed, it stop running if the condition is false contrary to the condition imply. Also if using prompt; when cancel is click, it end the program.

Continue:
This omit the condition and restore the loop (do while, while, for).
It help restart the loop when another condition is met(more like rerun after a part in a condition is obtained and keep working).

Labelled statement:
This is a statement use to break or continue a loop. It helps to break or continue multiple nested loop at once.
It works two ways or both ways; clear example

3. for loop:

it's execute task fixed number of times.

4. for of loop:

This loops through the values of an iterable object and over iterable data structures such as arrays, strings, maps, nodeLists, and more.
Note: this help returns items with previous item when using increments.

forEach:
This is a method in array that calls a function once for each array element.

5. for in loop:

This loop the properties of an object.

Review articles on function JavaScript

Beginner function
Advance function

Let us connect with each other

connection between two or more parties bring solution to a problem

Clarity on logical operator js

Edeke Emmanuel — Fri, 24 Mar 2023 18:41:40 +0000

Logical Operator JavaScript(LOJ) is very much familiar with logic gate, if you are computer scientist or mathematician, this will be friendly with you. Nevertheless I am not one, so meaning you can understand it too.

The main focus will be on LOJ but let check out brief explanation on logic gate.

Logic gates

logic gate is the principle of any digital system. It used to perform logical operations on single or multiple binary inputs and return(result) one binary output.

This is a basic concept in the studies of electronic and digital service mainly based on the concept of boolean function.

Types of logic gate

Computer is program to understand only boolean function or binary system; which are only 0 (False or No) and 1 (True or Yes).

1. AND gate:

In the result or output, it always return False (0) but if both the input are True (1), then the output is True.

OR gate:

In the output, it always return True (1) but if both the input are False (0), then the output is False.

NOT gate:

The output is always opposite of the input in boolean expression.

combine gate is the joining of many gate together, which are:

NAND gate:

The output is always the opposite of the output of the AND gate.

NOR gate:

The output is always the opposite of the output of the OR gate.

XOR gate:

In the output, it always return True but if both the input are either False or True, then the output is False.

XNOR gate:

In the output, always return False but if both the input are either False or True, then the output is True.

Diagramatic operation of logic gates

Logical operator js

JavaScript Logical operator allows us to compare the expressions/arguments/statements between variables or values.

It can also be used to control a boolean or set termination conditions for loops.

Types of logical operator js

- And operator ( && )

:
The && operator compares two expressions. If the first is express as true value, the result will be the value of the second expression. If the first is express as false value, the result will be the value of the first expression.

This simply means always return false except both condition are true.

Or operator ( || ):

The || operator compares two expressions. If the first is express as false value, the result will be the value of the second expression. If the first is express as true value, the result will be the value of the first expression.

This simply means always return true except both condition are false.

Not operator ( ! ):

The ! operator always return (output) the inverse of the argument of either false or true value.

Nullish coalescing operator ( ?? ):

The ?? operator always return the first argument (that is define), if it is not null or undefined.

The difference between ?? and || is that the ?? returns the first define value while || returns the first true value.

Optional Chaining Operator ( ?. ):

The ?. operator returns undefined, if item or value in object is undefined or null, instead of throwing syntax error.

In precedence And operator && is higher than Or operator ||.

~~Is coding hard ?~~

console.log("coding is easy with support from community and great articles like mine");

Coding is a process, needs time, dedication and continual practices (keep doing projects), then you are at the peak of perfection.

Furthermore explanation on logic gate

Let us connect with each other

connection between two or more parties bring solution to a problem

Data types conversion in JavaScript

Edeke Emmanuel — Sat, 21 May 2022 16:36:21 +0000

Changing value from one data types to another

conversion of the value of the declare variable to a different data types can be done by ensuring that the data type to be converted to, is the one used and begins with a Capital letter. For example:

let year = String(1980); 
console.log(year);  //"1980"

Generally: let x = Data-types(value);

List of Data-types

Number
String
Boolean e.t.c

JavaScript has some in built conversion one can explore without the use of methods:

let result;
//For example =>
// String conversion
result = '3' + 2;  // "32"
result = '10' + true;  //"10true"

//Number conversion
result = '10' - '2'; // 8 
result = '10' - 2; //8

//NaN conversion
result = 'hello' - 'world'; // NaN 
result = '4' - 'hello'; //NaN

//Boolean conversion
result = '8' - true;  // 7 
result = 4 + true; //5

//Null conversion
result = 15 + null;  // 15
result = 4 - null; //4

To check what type of data type, make use of typeof

console.log(typeof(num)); //Number

while with method

***/* convert to number */***

string can be converted to number using Number keyword even other data types such as boolean and null in JavaScript.
for example:
true is known as 1 while false, empty string "" and null is 0 or empty value.
A text, NaN and undefined will return Not a number NaN

***/* method in Number*/***

some specific method can be used to convert one data types to a number. Method like:

1. parseInt()
2. parseFloat()
3. /*unary operator*/ +"" 
4. Math.floor()

example:

***/* convert to string */***

conversion to string is done with String /*or*/ toString(). example:

***/* convert to boolean */***

empty string, 0, undefined, NaN and null return false when passed with boolean but others return true.
example:

Let us connect with each other

connection between two or more parties bring solution to a problem

DEV Community: Edeke Emmanuel

Method js JavaScript core principles

Object Method

Adding Method to Object

Class Method

Accessing Method

Function js JavaScript advance principles

Conditional function

Recursive function

Callback function

with function expression

with more function expression

Array method runs as function

Arguments in function call

Rest parameters

Nested function

With two parameter

Function closure

without parameter

Function Curry

Function Composition

Function Decorator

unary function

multiple nested function

Function js JavaScript complete guide

Function Lite

Princple/basic code of function

Declaring or defining a function

Anonymous function

Non anonymous

Default parameters

Return

Function scope

Calling a function

Arrow function

Loop js simplicity

JavaScript loop

Types of loop JavaScript js

1. do while loop:

2. while loop:

Counter iterators:break & continue

3. for loop:

4. for of loop:

5. for in loop:

Review articles on function JavaScript

Let us connect with each other

Clarity on logical operator js

Logic gates

Types of logic gate

1. AND gate:

OR gate:

NOT gate:

NAND gate:

NOR gate:

XOR gate:

XNOR gate:

Logical operator js

Types of logical operator js

- And operator ( && )

Or operator ( || ):

Not operator ( ! ):

Nullish coalescing operator ( ?? ):

Optional Chaining Operator ( ?. ):

Let us connect with each other

Data types conversion in JavaScript

*Changing value from one data types to another *

Generally: let x = Data-types(value);

/* convert to number */

/* method in Number*/

/* convert to string */

/* convert to boolean */

Let us connect with each other

Changing value from one data types to another

***/* convert to number */***

***/* method in Number*/***

***/* convert to string */***

***/* convert to boolean */***