Some Critical JavaScript Topics

Functions with Default Parameter Values

In normal Javascript and earlier requires lots of extra code to simulate default parameter value. but Modern Javascript ES6 make it easier to pass default parameter values when the parameter is not formally passed when calling the function. For example:

function add(num1, num2 = 0) {
//here, 0 is default parameter value
return num1 + num2
}
console.log(add(20, 5)) // 25
console.log(add(20)) // 20function add(num1, num2 = 0) {
//here, 0 is default parameter value
return num1 + num2
}
console.log(add(20, 5)) // 25
console.log(add(20)) // 20

Function with Unnamed Parameters

In JavaScript function parameters that are passed without defining are inspect through argument object. Though inspecting arguments works fine in most cases, this object can be a little cumbersome to work with. ES6 introduces the rest parameter to make it easier to work with unnamed parameters. The rest parameter allows any number of arguments as an array.

function add(...args) {
// args is the name for the array
return args.reduce((accumulator, current) => accumulator + current, 0)
}

console.log(add(5)) // 5
console.log(add(5, 3)) // 8
console.log(add(5, 2, 3)) // 10

The Spread Operator

Spread Operator takes in an iterable (array) and expands it to a list of arguments. The … spread operator is useful for many different tasks including the following:

Copying an existing array, Merge or combine arrays, Call function without apply, Use in Math Functions, Use in restructuring, Use an array as arguments, adding to state in React, Convert arguments or NodeList to Array

some of the code example:

// Using in Math
let arr = [6, 10, 21]
console.log(Math.max(...arr)) //21

// Multiple iterable and combine
let arr1 = [25, -10, 31, 44]
let arr2 = [30, 26, 98, 11]
console.log(Math.max(...arr1, ...arr2, 25)) //98

// Combine or merge arrays
let arr3 = [33, 25, 21]
let arr4 = [28, 37, 35]
let combine = [10, ...arr3, 20, ...arr4]
console.log(combine)
// [ 10, 33, 25, 21, 20, 28, 37, 35 ]

Block-Level Functions

In Javascript, ES6 allows block-level functions which are hoisted on top of the function or hoisted into the global scope. For example:

if (true) {
console.log(typeof handleTest) // "function"

function handleTest() {
// some code
}

handleTest()
}

console.log(typeof handleTest) // function

Arrow Functions

In Javascript, ES6 allows an alternative way to write shorter syntax named arrow function compared to traditional function expression. For example:

//have no parameter
const testNumber = () => 81;//have single parameter
const multiplyNum = num => num * 2;// have multiple parameter
const sum = (x, y) => x + y;
console.log(add(90, 10)); // 100

Coding Style

hmm Chintu, you can say it’s the art of programming. It’s not easy to pick a hard task, solve it using programming & also keeping it human-readable & self-explanatory. This is why the idea of “Coding Style” comes in! Large Projects need to be coded in a consistent style. It’s not only helping us to make the code easier but also ensuring that any developer who looks at the code will know what should he expect from the entire application! There are a few coding style guides available on the internet.

Comments

You know what Chintu? Good Comments in Coding is very important when another developer is going to review your code or when you’re working on a team. But don’t overuse the power of comments. Sometimes “that” other coder is your future self. Don’t comment explaining the code. Because good code is self-documenting!

Error Handling

Let’s Learn How we can handle errors in our code like a Pro. It’s easy because ES6 Introduced us to a lot of features. try {} & catch {} are one of them. As you can see, try catch syntaxes are pretty much self-explanatory. Basically what try{} do is → tries to run a block of code and if some error occurs while running that block of code, execution stops in try {} the block and goes into the block. Then catch{}tries to catch the error, which happened when trying to execute code in try{}the block.

an error has an extra parameter that will take the error object. You can name this parameter anything. It will contain what kind of error has happened while trying to execute code in the try block. Note that it won’t catch an error if you’ve done a syntax error in your code. If there’s a runtime error, it will contain that error and then you can do anything with it. There’s also another syntax called finally {}which will execute after try{} & catch{}. It doesn’t matter you have an error or not, finally{}will be executed. When an error occurs in your code, JavaScript will normally stop executing and generate an error message. But you can control your program flow using try catch and finally and continue your program flow.

try { // Block of code to try console.log(“I’m trying to execute this block of code”)} catch(error) { // Block of code to handle errors console.log(“error occurred: “ + error.message)}finally { // Block of code to be executed regardless of the try / catch result console.log(“done”)}

Explicit Binding:

Whereas implicit binding uses method invocation to attach this to a particular object, there is another way to attach this when functions are not stored as methods on an object explicit binding. Explicit binding forces a function call to bind to a particular context object, by using either call, apply, or bind. These are predefined JavaScript method properties inherited by all functions through the Function. prototype.

.call()

immediately invokes the function

the first parameter is the context object

all other parameters are individually listed, separated by commas

.apply()

immediately invokes the function

the first parameter is the context object

all other parameters can be passed in as a single array

.bind()

Does not immediately invoke the function

returns a new function that can be invoked later in the code, while maintaining the desired context binding this is useful for passing functions into other functions, like setTimeout(), which will invoke it later and won’t necessarily bind the invoked function to the correct object without being coerced

.call()

tanjin.call(context, arg1, arg2)

.apply()

const maria = [arg1, arg2, arg3];

maria.apply(context, parma);

.blind()

tanjin.blind(contaxt, arg1, arg2);