DEV Community: frk-ozbk

Javascript Closure

frk-ozbk — Thu, 12 Mar 2020 07:29:13 +0000

In javascript, when a function returns another function, a function that returned can access the variables inside the other function. This is called closure.

function counter(){
  var number = 0;
  return function consoleIt(){
    debugger
    number += 1
    console.log(number)
  }
}

In this example inside the counter function there is a variable named number and this function returns another function. We invoke the counter function and assigned consoleIt function to the increment variable.But there is one more thing. Now consoleIt function can access the number variable. You can see this if you put debugger inside the consoleIt function.
Whenever we invoke increment function, number variable will be increased by one.

What is the benefit of closure?

You can give memory to functions. Whenever function invoked, it can remember variables from past invokes.
For example;

const debounce=(debounceFn,timeout)=>{
  var timeoutId
  return function(...args){
    clearTimeout(timeoutId);
    timeoutId=setTimeout(() => debounceFn(...args),timeout)
  }
}
const debouncedHandleSearch = debounce(handleSearch,300)

Whenever we invoke debouncedHandleSearch function, it will remember timeoutID and clear it.

Thanks for reading it. You can see my other post below.

Understanding This

What is the difference between var and let

What is syntactic sugar

Understanding "This"

frk-ozbk — Mon, 02 Mar 2020 07:02:37 +0000

This keyword is a little bit tricky. In javascript, this keyword refers to an object that executing function.

By default, there is only Global Object. So if you declare a function that logs the This and invoke it, it will log the Global Object.

But things change when you declare an object and invoke the function from that object.

Why did the function log the person object?

Because the object that executes or invokes the "consoleThis" function changed. Now the person object execute the function.So this keyword refers to person object.

So what are the benefits of this keyword?

Well, you can create reusable functions. What does that mean?
Let's look at the example.

We declared two objects: personA and personB
These objects have three keys: name, key and increaseAgeBy function.We invoke increaseAgeBy(1) on personA object.Inside the increaseAgeBy function this will refer to personA object.
personA.age was 22 so now personA's age is 22 + 1 = 23.
Then we invoke increaseAgeBy(10) on personB object.Now this will refer personB object.personB.age is 18 so now personB's age was 18 +10 = 28.

What if I do this?

We declare the same person object. Then we declare the logIt variable outside the object then assign the logName function inside the personA object. But when we invoke it, we don't invoke logIt function from personA object, we invoke from the global object so this keyword will refer global object. There is no variable named "name" inside the global object so the function will log "undefined".

Apply, Bind and Call Function Methods

Call and Apply methods work similarly. Both invoke the function they called and their first parameter is that Object that you want to bind this. The difference is that Apply takes arguments as an array; Call requires the parameters to be listed explicitly.

Bind works differently. It creates a new function when called, has its this keyword set to first parameter.

Why did not sayPersonAName function return 'Lucy' instead of 'Jack'?
Because we bound sayMyName function to PersonA object. This created a new function that has it's this keyword set to PersonA. So whenever we call this function its this will refer to PersonA object.

Thank you for reading. See my other posts below.

What is the difference between var and let

What is syntactic sugar

What is the difference between 'Var' and 'Let' ?

frk-ozbk — Wed, 26 Feb 2020 07:41:52 +0000

First of all, I want to talk about Javascript Scopes.
Scopes determine the accessibility of the variable. You can't access a variable from outside of its scope.

In Javascript, before ES6 there were two types of scope:

Global Scope
Local Scope (Function Scope)

Global Scope

Any variable declared outside of a block or function is inside Global Scope.You can access these variables from everywhere.

Local Scope (Function Scope)

As the name suggests, variables declared inside the Function has Local Scope. They can only be accessed inside the Function.

ES6 introduces Let and Const variables that can be scoped to a block. So now there is one more type of scope.

Block Scope

In Javascript curly brackets creates a block. So if you declare a variable inside the block with Let or Const, you can't access it from outside of that block.

Var

Variables declared with Var has function scope. You can't access this variable from outside the function. However, if you declare variables inside the block with Var you can access it from outside.

Unlike Var, Let has block scope. You can only access these variables from inside the block. So if you try to access from outside it will give you Reference Error.

You can reassign the variable that declared with Var.

But you can't with Let.

Var declarations (var a) whenever they occur, they move up to the top of the file. This is called hoisting.With this, you can do something like this. (You can read more about hoisting if you click here)

With let you can't do this. It will give an error:

Reference

https://developer.mozilla.org/en-US/

What is Syntactic Sugar

frk-ozbk — Fri, 10 Jan 2020 19:49:27 +0000

Today I wanted to talk about syntactic sugar and how it improves you and your team coding life.

In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express.

Let's look at this example. I have an array of items. And I want to check every item is selected or not?

Classic Javascript Loop

Javascript array method - .every()

Which one do you prefer using? I think .every() is cleaner and it explains itself.

Let's look at example two. This time I want to select all items if all items are not selected. If all items are selected, I want to remove all items.

Classic Javascript Loop

Javascript array method - .forEach()

It is not shorter too much. But still, it is shorter and it is self-explanatory.

Conclusions

Syntactic sugar improves your coding life. Believe me every line matters.
If you are using React or Vue you will have many methods and JSX or Templates in a single component. That is for this post.