Some new topics for beginner level JavaScript programmer

MD ARIF HOSSAIN
May 1, 2020 · 6 min read
Today’s topics:1. Global Block Bindings2. Best Practices for Block Bindings3. Default Parameter Values in ES64. Rest Parameters5. The Spread Operator6. Block-Level Functions7. Arrow function8. Object Destruction9. Class Declarations10. Accessor Properties

Topic 1: Global Block Bindings

We can use var, let, const as a global variable. But let and const are different from var because of their global scope behavior. When we assign a global scope variable using ‘var’, it creates a new global variable which is a property on the global object. It is not good cause we can accidentally overwrite the variable. But if we use let or const in the global scope, a new binding is created in the global scope but no property is added to the global object. So, we can’t overwrite the global variable. For example:

var name = "Khan";console.log(name);                       // 'Khan'console.log(window.name === name);       // truelet name1 = "Khan1";console.log(name1);                      // 'Khan1'console.log(window.name1 === name1);     // falseconst name2 = "Khan2";console.log(name2);                      // 'Khan2'console.log("name2" in window);          // false

Note: We need to run this in browser console because of ‘window’ work on the browser.

Topic 2: Best Practices for Block Bindings

JavaScript programmer already knows about ECMAScript 6 (ES6). Before ES6, we only use ‘var’ keyword to declare a variable. But after 2015 when we got ES6, we find two more keywords to assign or declare a variable and they are ‘let’ and ‘const’. If we assign a variable, we can overwrite its value anywhere in a program. ‘let’ behave as ‘var’ is this case, but we can’t change the value assigned by ‘const’ keyword. So we can use ‘const’ when we don’t want to change the value of the variable.

However, in ES6, we use ‘const’ by default and use ‘let’ when we need to change the value of a variable. ‘let’ and ‘const’ maintain block bindings and when we declare a variable using this ‘let’ or ‘const’ keyword, it doesn’t hoisted and exist only in it block scope. So we can assign a variable where we need and it is good for programmers.

Topic 3: Default Parameter Values in ES6

If we define a function with two arguments, we need to pass two parameters to call the function before ES6 otherwise it will throw an error. But we can use a default value for arguments to avoid this kind of problem. Let’s see some examples and explanations.

//before es6function add(arg1, arg2) {    arg1 = arg1 || 5    arg2 = arg2 || 6    result = arg1 + arg2    console.log(result)}add(5, 6) // 11add(5)    // 11

Before ES6, we used to like this. If we don’t pass the variable in the time of call the function, we used the logical operator to solve the problem. But now we can use the default value of parameters like this:

//after es6function add(arg1=7, arg2=8) {    result = arg1 + arg2    console.log(result)}add(5, 6) // 11add(5)    // 13

When the function gets two parameters, it will take the passing value. But if the function doesn’t get any value of an argument, it will take the default value.

Topic 4: Rest Parameters

A rest parameter is indicated by three dots (…) preceding a named parameter. That named parameter becomes an Array containing the rest of the parameters passed when the function call. For example:

function nums(num1, ...restNums) {    console.log(num1)            // 1    console.log(restNums)        // [ 2, 3, 4, 5 ]    console.log(restNums[0])     // 2}nums(1,2,3,4,5)

Here we can see, num1 get the first value and rest of value gat restNums which is a rest parameter and type is an Array.

Topic 5: The Spread Operator

The spread operator most closely related to rest parameters. Spread operator similar to rest parameters, also using ( … ), but does quite the opposite. Let’s see an example and try to understand.

Math.max(1, 2, 3, 4, 5, 6)    // 6Math.max([1, 2, 3, 4, 5, 6])  // NaN//solve the problem using spread operatorMath.max(...[1, 2, 3, 4, 5, 6])    // 6

In this example, we used Math.max() method. We can’t use Array to find the max value, so we use the spread operator to solve the problem.

Topic 6: Block-Level Functions

We already know about block scope in the variable. A function can able to use a block. For example, we can use a function in a specific block.

Example:

function funcGlobal() {    function funcLocal() {        console.log("Local Function")    }
console.log("Global Function")
}
funcGlobal() // Global Function
funcLocal() // An error will occur

Topic 7: Arrow function

In this topic, we will learn the arrow function. We find the arrow function in ES6. Let’s see how to use it.

function add(a, b) {    return a + b}console.log( add(1,2) )  //3

This is a normal function. Now we will convert this function as an arrow function.

const add = (a, b) => a + bconsole.log( add(1,2) )  //3

For multiline:

const add = (a, b) => {    const result = a + b    return result}console.log( add(1,2) )  //3

Topic 8: Object Destruction

Let’s try to understand what is object destruction. To get the value of an object we need to write object.property. But we can do this very easily. Let’s see:

const person = {    name: 'Khan',    age: 20,    status: 'student'}//without object destructionconsole.log(person.name)    // Khanconsole.log(person.age)     // 20console.log(person.status)  // student//with object destructionconst {name, age, status} = personconsole.log(name)    // Khanconsole.log(age)     // 20console.log(status)  // student

Here we can see, we don’t need to write an object name every time if we destruct it. We can also default value of property like this:

const {name, age = 21, status} = person

Topic 9: Class Declarations

Most OOP( Object Oriented Program ) languages support class. As an OOP language, JavaScript also has this feature. To declare a class, we use ‘class’ keyword, and the name of the class starts with an upper case letter. Let’s see a simple class declaration:

class PersonClass {    constructor(name) {        this.name = name;    }    // equivalent of PersonType.prototype.sayName    sayName() {        console.log(this.name);    }}const person = new PersonClass("Khan");person.sayName();   // "Khan"
console.log(person instanceof PersonClass); // trueconsole.log(person instanceof Object); // trueconsole.log(typeof PersonClass); // "function"console.log(typeof PersonClass.prototype.sayName); // "function"

Topic 10: Accessor Properties

We can access Object’s Properties by using the dot notation or the bracket notation. These are called accessor properties. ECMAScript 5 introduced Getter and Setters properties. They are functions only which are responsible for getting and setting a value.

To create a getter, we need to use ‘get’ keyword and ‘set’ keyword for the setter. For example:

The Startup

Get smarter at building your thing. Join The Startup’s +799K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store