DEV Community: Elina425

Functions in Javascript

Elina425 — Wed, 09 Nov 2022 20:59:10 +0000

What is a Function?

Function, generally speaking, is a reusable piece of code that is designed to perform a particular task.

It is composed of a series of statements called function body. Values can be passed to a function and the function can/will return a value.

To create a function we can use a function declaration.

It looks like this:

function showRandomStaff() {
  alert( 'Hello everyone!' );
}

The function keyword goes first, then goes the name of the function, then a list of parameters between the parentheses (comma-separated, empty in the example above, we’ll see examples later) and finally the code of the function, also named “the function body”, between curly braces.

function name(parameter1, parameter2, ... parameterN) {
 // body
}

And if I do like this:

function showRandomStaff() {
  alert( 'Hello everyone!' );
}

showRandomStaff()
showRandomStaff()

The call showRandomStaff() executes the code of the function. Here we will see the message two times.

This example clearly demonstrates one of the main purposes of functions: to avoid code duplication.

If we ever need to change the message or the way it is shown, it’s enough to modify the code in one place: the function which outputs it.

Function that does not take a parameter and doesn’t return anything.

function sayHello () {
  console.log("Hello World!");
}

The above function does not take a parameter and doesn’t return a value;

What do I mean when I say, the above function doesn’t return anything?.

If I try to store the result of calling the function in a variable, it will be undefined.

let greeting = sayHello();
// The below console.log will return undefined as the function 
// doesn't return any value.
console.log (greeting);

A function that takes a parameter and returns a value.

Let’s write a function that takes a number as a parameter and returns the square of the number.

function square(number) {
 return number * number;
}
console.log(square(3));

The output of the above function execution is 9.

When a value is passed as a function parameter, it’s also called an argument.

In other words, to put these terms straight:

A parameter is the variable listed inside the parentheses in the function declaration (it’s a declaration time term).
An argument is the value that is passed to the function when it is called (it’s a call time term). We declare functions listing their parameters, then call them passing arguments.

In the example above, one might say: "the function square() is declared with 1 parameter, then called with 1 argument: number.

Default values
If a function is called, but an argument is not provided, then the corresponding value becomes undefined.

For instance, the aforementioned function square(number) without argument will print undefined.

Differences between Parameters and Arguments

function add(x, y){
    return x + y
}

add(2, 3)

In the above code x and y are parameters while 2 and 3 are the arguments here.

A parameter is one of the variables in a function. And when a method is called, the arguments are the data you pass into the method's parameters.

When the function is called with add(2, 3) the arguments 2 and 3 are assigned to x and y, respectively. This means that in the function, x will be replaced with 2 and y will be replaced with 3.

If the function is called with a different argument, the add function will work the same way. Parameters are like placeholders for function arguments.

The Power of Arguments
We can use arguments more efficiently when we want to make functions more re-useable, or when we want to make calling functions inside another functions more powerful.

Here is an example:

function add(x, y){
    return x + y
}
function substruct(n1,n2){
        return n1 - n2;
}
function multiply(a, b, c){ // a = 1, b = 2, c = 3
    const num1 = add(a, b) // num1 = add(1, 2) = 3
    const num2 = substruct(b, c) // num2 = substruct(2, 3) = -1

    return num1 * num2 // -3
}

multiply(1, 2, 3)
// returns -3

The first function add() has two parameters, x and y and second function substruct() has two parameters, n1 and n2 . The functions returns the addition and substruction of the two parameters.

The second function multiply() has three parameters: inside the function, two variables are declared in it, num1 and num2. num1 will store the value of the result of add(a, b), and num2 will store the value of the result of substruct(b, c). At the end the multiply function will return the value of num1 multiplied by num2.

multiply is called with three arguments which are 1, 2 and 3. add(a, b) will be add(1, 2) which will return 3. substruct(b, c) will be substruct(2, 3) which will return -1.

num1 will have the value of 3 while num2 will be -1. num1 * num2 will return -3.

Arguments are passed in the multiply function which are also used as arguments for the add function and substruct function.

Functions are treated as First-Class in Javascript

Functions are treated as first-class in Javascript because:

We can assign a function to variable
We can store function in array
A function can be passed to another function as argument
A function can be assigned to a property of object But let’s see how to assign the above function into a variable and use it.

const square = function (number) {
  return number * number;
}
console.log(square(3));

The directive return can be in any place of the function. When the execution reaches it, the function stops, and the value is returned to the calling code (assigned square above).

There may be many occurrences of return in a single function. For instance:

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return confirm('Your age is illegal for such activities!!!');
  }
}

let age = prompt('How old are you?', 18);

if ( checkAge(age) ) {
  alert( 'Access granted' );
} else {
  alert( 'Access denied' );
}

Now lets see how can we store function in array:

function sum(num1, num3){
   return num1 + num2
}

let myArray = [10,30,sum]
let result = myArray[2](myArray[0],myArray[1])
console.log(result)//40

10 and 30 are integers and sum is a function. So, I'm passing the first and second elements of myArray to myArray[2] which is basically my function sum(). You should expect this function to print the sum of 10 and 30(which is 40).

Passing function to another function as an argument

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

function returnFunc(name){
 return name;
}

function outer(myFunc, name){
    myFunc(name)
    return returnFunc(name)
}

let returnVal = outer(inner, "Bob")
console.log(returnVal)

In this case function inner() will become the first argument of function outer().

*Assigning function to a property of object *

let employee = {
name:"James",
printMessage:function (){
    console.log("Welcome dear " + this.name)
}
employee.printMessage;

Here we are assigning function to printMessage, so when we are writing employee.printMessage, it's basically calling the function and printing the message that we have written there.

Understand Function Scope and Block Scope

Function scope
This scope means that the variables are only accessible in the function in which they are declared.

Consider the code below:

function fun()
{
    var temp ="temp is defined in function scope";
    console.log(temp); 
}

fun();
console.log(temp);

When we run the above code, we can see that the console.log(temp) statement outside of function throws an error because the temp variable is not accessible outside the function it is declared in.

Block scope
The block scope of a variable means that the variable is accessible within the block that is between the curly braces.

Consider the code below:

if(true)
{
  let v1 =10;
  let v2=20;
  console.log(v1);
  console.log(v2); 
}

console.log(v1);
console.log(v2);

Here we defined some variables in the if block and printed them to the console.
When you run the above code, you can see that an error occurs while printing the variables v1 and v2. As let variables are block-scope based, v1 and v2 will not be accessible outside the if block.

Remember if you wanna your programming skills work or function nicely you should know how to use functions as there are gonna be at least 80% of your every code!!!

Variables in Javascript

Elina425 — Sun, 06 Nov 2022 18:39:54 +0000

What is Variable ?

If you wanna become a programmer, then variables will become inseparable part of your code and maybe your best friend. But what are variables? You can imagine them as a box or a bottle in which we can store different types of data, we can add different numbers, text, etc. In order to be more specific, variables act like a container for storing String, Number, Boolean, and complex data structure(Arrays, Objects) and even the entire function.

Types

JS is a dynamically typed language, so we generally don’t have to worry about assigning the type of data that is being stored in that variable. However, knowing the types makes debugging a lot easier. So, JS is smart enough to figure out what you have assigned to it and when you make changes it adapts accordingly(cool!!!). In most of the famous and older languages like java, c++ you have to specify what data type(Numbers, Strings, Float, Double, etc) a variable will contain.
JavaScript defines seven built-in types:

String ===> var name = “Jessy”
Number ===> var age = 18
Boolean ===> var isActive = true
Array ===> var colors = [“blue”,”red”,"orange"]
Objects ===> var person = { name: “jenny”, age: 25, gender:"female" }
Undefined
Null

*Note: All of these types except object are called “primitives”. * Actually, you'll need to remember more primitive types in case of switching to another programming language(DON'T YOU DARE!).
Also, remember that in JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods.

Now let’s see how we define a variable in Javascript.

There are 3 ways of declaring a Variable:

Using Var Keyword
Using Let Keyword
Using Const Keyword

Declaring a Variable

var age;
let name;

To declare a variable use let or var keyword before your variable name. When we declare a variable, it is stored in the memory by Javascript engine with the default value of undefined ( if we don’t assign any value at the time of declaration). In this case, as we are only declaring them, at this moment they don’t contain any value and if you console their values, it will return undefined.

You can also declare multiple variables at the same time.

var age, name;

** Assigning a value to the Variable**
After declaring the variable, you can assign a value to it using the = operator

var age, name;
age = 18;
name = "Jenny";

Most of the time it's more comfortable to declare and assign a value at the same time

var age = 18;

The value of a above variable age can be accessed by simply calling it by its name.

console.log(age) //18

But make sure that the variable you're calling exist, because if not it'll throw an error.

console.log(ankap) // Uncaught ReferenceError: ankap is not defined

Naming Variables in Javascript:
Naming variables properly is very essential as firstly you can't name variable however you want. It's better when the name of your variable is simple and describes the object, array, string, etc or in short what information it stores. When you declare variables, there’s a bunch of different options. The style is up to you, but just to keep it simple you can start from Camel Casing.
boolean isEven = true
Besides, there exist certain rules, which you can't neglect, but rather have to learn:
1) Don’t use reserved keywords of Javascript (like class, var, etc).

2) Variables are case sensitive, isActive variable is different from isactive

3) A variable name cannot begin with a number, underscore, symbols.

4) Variable Name can contain a mix of uppercase strings, lowercase strings, and numbers.

5) A variable name should always start with lowercase.

var vs const vs let

As previously was said you can declare variable in 3 different ways:var, let, const

var

Oldest way of defining a variable in JS. It was king of the block for a long time, until it’s much more specific brothers came long.

can be changed
scoped globally or locally to an entire function regardless of block scope.

Var variables can be accessed before their declaration. Javascript moves all the var variables to the top of the function or global context. This is known as var hoisting.

REDECLARATION OF VAR VARIABLES:
var variables can be redeclared in the same scope. It will override the existing variable. Avoid using var as you might accidentally redeclare the same variable again and that will make your program behave differently as it will not show any errors if the variable name is already used.

var num1 = 8;
if(num1 % 2 == 0){
   var num1 = 9;//no error
   console.log(num1);//9
}

In the above example, we redeclare the num1 variable in the if block and it will override the existing num1 variable. This is because var variables have function scope and are available throughout the function as we discussed earlier.

let

can be changed.
scoped to the block.
let variables are not initialized until their definition is evaluated. If you try to access it before declaration then you will get an error.

console.log(num); //Uncaught ReferenceError: num is not defined
let num;

REDECLARATION OF LET VARIABLE:
Variables declared using let keyword cannot be redeclared within the same scope, it will give an error.

function printNums(){
   let number = 60;
    if(number > 0){
      let number =40;//no error because it has different scope
      console.log(number);//40
}

let number = 90;//Uncaught SyntaxError: Identifier 'number' has already been declared
console.log(number);//90
}

let variables cannot be redeclared in the same scope
The number variable inside the if block will not give any error because let variable creates a new scope inside any pair of curly braces. The number variable outside the if block gives an error because of the same scope.
const

cannot be changed after instantiation.
scoped to the block.

const pi = 3.14;

Declare those variables as a constant which you don't want to change in the entire program

Remember that constant variable must be initialized with some value otherwise it will give a syntax error.
const job; //Uncaught SyntaxError: Missing initializer in const declaration

But, this is not in the case of Objects. We can change the properties of an Object although we declare it as constant.

const person = {
  name:"Tom",
  age:13
}
person.name =  "Bob"// change the existing name property

But you cannot change the entire object that is declared constant. If you do, it will give an error.
person = {gender: male}//Uncaught TypeError:Assignment to constant variable
REDECLARATION OF CONSTANT:
Constants cannot change through re-assignment and cannot be re-declared in the same scope.

when to use let vs const

There are two camps about how to approach when to use what.

I don’t trust anyone
This method says, use const first for every variable. If the need comes along that you need to change a variable after it's been declared, change it to let.

I trust myself
This method says, use let for everything. If the need comes along that you need to make sure a variable can't be changed, change it to const.

Do’s and Dont’s

Prefer let over var to define variables as let will keep our variables in the right scope and make our code more manageable.
Use const to define those values which you don’t want to change in your entire application

Summary

Use let and var to define variables and const to define constants.
let and const has block scope whereas var has function scope.
var variables are added to the global object and can be accessed using the window object but let variables are only limited to their block and cannot be accessed via a window object.
Unlike var, let variables are not hoisted
The properties of Constant Object can be changed

I hope, I've mentioned all the essential parts regarding variables, if not feel free to extend your knowledge more!!!

Binary numbers

Elina425 — Thu, 15 Sep 2022 18:57:10 +0000

Have you ever wandered what are binary numbers? I'm quit sure that probably not once you have seen those cool pictures full of 1s and 0s, which are somehow connected with computers.

Just as we have the decimal system for counting numbers in everyday life, the same way computers use binary system for calculations. So, it's just another system of counting. With binary numbers we can represent numbers from 0 up to 255(yehhh..., they are better than base 10 system). In case of a decimal system computer would have to work harder and longer in order to process things. Fortunately, binary occupies less space and is much more simpler. We can think of binary as a light switch(When the light is on we have 1 and when off 0). Sounds pretty easy, but wait!!!

You need to know how to convert decimal numbers to binary as well the reverse process. Of course you can use automatic converters but it's better to know how to do it ourselves. Here are the steps for decimal to binary convertion:
Step 1: Divide the given decimal number by “2” where it gives the result along with the remainder.

Step 2: If the given decimal number is even, then the result will be whole and it gives the remainder “0”

Step 3: If the given decimal number is odd, then the result is not divided properly and it gives the remainder “1”.

Step 4: By placing all the remainders in order in such a way, the Least Significant Bit (LSB) at the top and Most Significant Bit (MSB) at the bottom, the required binary number will be obtained.

Also, watch this video:https://youtu.be/rsxT4FfRBaM
The process of converting binary to decimal is even simpler, so just watch the video: https://youtu.be/VLflTjd3lWA and you will understand that for example 11100=2^4+2^3+2^2=28

Ok, let's now pass to more complicated topics like binary operations. Basically, it's very similar to decimal operations.

Having the above table in mind you can do addition confidently like this.

Note: Remember that 1+1+1=11 or we can say that the sum is 1 and we have 1 carry.

Now let's learn a more complicated operations like multiplication. It's very much similar to decimal multiplication. The only difference is that we use 1s and 0s. For multiplication you should remember these 'rules':
There are four rules of binary multiplication which are:

0 × 0 = 0
0 × 1 = 0
1 × 0 = 0
1 × 1 = 1

After knowing these super simple rules you only need to multiply each digit of one binary number to each digit of another binary number. And then add them all together to get the final result.

Ok, I don't wanna disappoint you but it's also essential to know binary subtraction, but don't worry as after doing a couple of exercises it'll surely become easy. Generally, we apply these rules for subtraction:

0 - 0 = 0
1 - 0 = 1
1 - 1 = 0
0 - 1 = 1 with a borrow of 1

Actually, when you borrow 1 the O becomes 10 or 2 and 2-1=1 that's why 0 - 1 = 1

Knowing this much it pretty much enough!!! You can also have some fundamental understanding of binary division, but there is no need to dive too much into it. The main rules of the binary division include:

1÷1 = 1
1÷0 = Meaningless
0÷1 = 0
0÷0 = Meaningless

Just to have a practice let's divide 18 by 3 which gives 6 :

That's it!!!Now you know how to do basic operations with binary numbers, hence you understand ''computer language'' better. Hope you enjoyed reading this post!