DEV Community

kaustav karmakar
kaustav karmakar

Posted on

How to learn javascript to become a better developer.

Prepare a bit of basic.

1)Staring with let, const, and var difference. What is a variable in javascript?
let, const is block scope where var is the global scope.
let and var can be reassigned where const can't.const is a signal that the identifier won't be reassigned.let is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm.var variables can be updated and re-declared within its scope.
Variable are of two types :

Local scope- Local variables have Function scope. They can only be accessed from within the function.
Global scope-A global variable has global scope. All scripts and functions on a web page can access it.

2)How to write a function in javascript?
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ()

by using function key word say

function sayHello(){console.log("hi")};sayHello();
Enter fullscreen mode Exit fullscreen mode

by useing fat arrow function also called arrow function like:

const sayHello =()=>{console.log("hi")}; sayHello(); 
Enter fullscreen mode Exit fullscreen mode

What are generators in javascript?
The function* declaration defines a generator function, which returns a Generator object.
like:

function* generatorSum(i){
      yield i;
      yield i+10
};
const gen = generatorSum(10);

console.log(gen.next().value);
// expected output: 10
Enter fullscreen mode Exit fullscreen mode

The Generator object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol.

3)Concept of hoisting in javascript?
Hoisting is a property in which the variable is a move to the top of the current scope. Be careful that only declaration gets hoisted NOT the initializations.

4)Concept of closure in javascript?
A closure is a function having access to the parent scope, even after the parent is closed.

function closureExample(i){
 return function cloureInnerVariable(y){
        return i+y;
 }
}
const value1=closureExample(1);
const value2=value1(2);
console.log("value of closure",value2);
Enter fullscreen mode Exit fullscreen mode

5)What is Curring in javascript?
It is similar to closure.Currying is a transform that makes f(a,b,c) callable as f(a)(b)(c).
like:

function curringExample(w) {
  return function(h) {
    return function(l) {
      return w * h* l;
    }
  }
}

curringExample(4)(6)(3); // 72
Enter fullscreen mode Exit fullscreen mode

6)What are prototypes in javascript?

Ans: When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property that holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. It can be using class or function.
Like :

  function Animal (name, energy) {
    this.name = name
    this.energy = energy
  }

Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
or by using the extent keyword in class.
Enter fullscreen mode Exit fullscreen mode

7)Rest and spread operator in javascript?

A function can be called with any number of arguments, no matter how it is defined. It is called Rest operators.
Like:

function sumAll(...args) { // args is the name for the array
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6
Enter fullscreen mode Exit fullscreen mode

Spread syntax to the rescue! It looks similar to rest parameters, also using ..., but does quite the opposite.

let arr = [3, 5, 1];
When ...arr is used in the function call, it “expands” an iterable object arr into the list of arguments.
let arr = [3, 5, 1];

alert( Math.max(...arr) ); // 5 (spread turns array into a list of arguments)
Enter fullscreen mode Exit fullscreen mode

8)Destructuring in javascript?
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables, such as

Array :
let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]
Object 
const {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5
Enter fullscreen mode Exit fullscreen mode

9)Promise in javascript?
Promises in JavaScript represent processes that are already happening, which can be chained with callback functions.
Basically, promise is just an object, that gives us either success of async operation or failure of async operations
1

var promise = new Promise(function(resolve, reject) {
  // do some long-running async thing…

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

//usage
promise.then(
  function(result) { /* handle a successful result */ },
  function(error) { /* handle an error */ }
);
Enter fullscreen mode Exit fullscreen mode

10)Callback in javascript?
A callback is a function passed as an argument to another function.

function greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);
Enter fullscreen mode Exit fullscreen mode

11) Callbackhell in javascript?
A promise is a returned object from any asynchronous function, to which callback methods can be added based on the previous function's result. Promises use. This is a big issue caused by coding with complex nested callbacks. Here, each and every callback takes an argument that is a result of the previous callbacks. In this manner, The code structure looks like a pyramid, making it difficult to read and maintain. Also, if there is an error in one function, then all other functions get affected.
To avoid callbackhell by using the promise or event queue.
12)Follow a coding standard in javascript:
By using proper documentation such as >https://developers.google.com/apps-script/guides/docs

https://developers.google.com/apps-script/guides/sheets/functions
Name variable with a meaningful name. Use camel case All names start with a letter.
try to use higher-order function instead of a long function.Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them.
Use of local scope and global scope should be taken care of when you are declaring a variable.
Use of proper documentation is important to understand the flow of a developer .Use proper comment in code if are using any function.
Code is the story with lots of operation and information about what you are doing.
It is better you understand the way of logic you are using as a developer.

Thanks for Reading and understanding me to become a better developer.
Kaustav Karmakar

Top comments (3)

Collapse
 
maniflames profile image
Maniflames

Hi Kaustav welcome to DEV!
It might be good to know that you can format code on here to make it a bit more readable. You can do this using this markdown notation. In that case your closure function at point four would look like this:

function closureExample(i) {
    return function cloureInnerVariable(y){
        return i+y;
    }
}

const value1 = closureExample(1);
const value2 = value1(2);
console.log("value of closure", value2);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
kaustavkarmakar2 profile image
kaustav karmakar

Thanks for suggesting...i will do that

Collapse
 
kaustavkarmakar2 profile image
kaustav karmakar

Please add a topic to discuss.