A Beginner's Guide to JavaScript: The Basics

Introduction

JavaScript is a high-level, interpreted programming language that is widely used for web development. JavaScript has come a long way since it was first introduced in the 1990s. Today, it's a powerful, modern language that is used by millions of developers around the world. In this post, we'll take a look at the history of JavaScript and how it has evolved over time, as well as its current state and future direction.

JavaScript is a powerful, versatile programming language that is essential for modern web development. In this post, we'll cover the basics of JavaScript and explore some of the key features and capabilities of this popular language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.

Variables

Variables are used to store data values. For example, a variable may be used to store a user’s email address, or their name. In JavaScript, a variable can contain any types of data, such as a string, a true or false boolean, an object, or a number. Before the ES6 specification was released, there was one way to declare a variable in JavaScript: var. The var keyword can be used to declare a variable that is accessible throughout a program, and can be changed.

Var, Let, and Const difference

There are three different keywords used to declare a variable in JavaScript. These are: var, let, and const.

Here is a table that breaks down the differences between these three types of variables:

Keyword Variable Scope Reassign? Redeclare? Hoist? var Function Yes Yes Yes const Block Yes No No let Block No No No The following are general rules of thumb for using these types of variables:

Use const as much as possible, unless you need to redeclare or hoist a variable. Use let if you are working with loops. Only use var if: You are working on legacy code, You need a variable that you can redeclare, or You need a variable accessible everywhere in the program (i.e., globally). If you’re interested in learning more about these variable types, check out our tutorial on how to use the JavaScript let variable here.

Scope

Scope is used to refer to where a variable can be accessed within a program. There are two scopes in JavaScript: global scope, which is where a variable is declared outside a block of code; and local scope, which is where a variable is declared inside a block of code

Hoisting Variables

In JavaScript, a variable can be declared after it has been used, which means that you can use a variable before it has been declared. This behavior is referred to as hoisting.

Object

The Object class represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor

javascript
let o = new Object({ name: "John", age: 20 })

Functions

Optional parameters

Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.

javascript
function multiply(a, b = 1) {
	return a * b
}

console.log(multiply(5, 2)) // expected output: 10

console.log(multiply(5)) // expected output: 5

JavaScript design patterns

A pattern is a reusable solution that can be applied to commonly occurring problems in software design - in our case - in writing JavaScript web applications. Another way of looking at patterns are as templates for how we solve problems - ones which can be used in quite a few different situations.

In order to dive deep into JS Patterns, I highly recommend you to read Learning JavaScript Design Patterns

JavaScript algorithms

algorithms

or here

Software design patterns

Read all about design patterns on Wiki

JavaScript trick questions

You can find it here You can find it here You can find it here

What are decorators and how are they used

Decorators are the way of wrapping one piece of code with another or apply a wrapper around a function in JavaScript. Decorators are the design pattern that allows behavior to be added to an individual object, either statically or dynamically without affecting the behavior of other objects from the same class see more

Closures

According to developer mozilla documentation for closures,

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Lexical scoping

javascript
function init() {
	var name = "Mozilla" // name is a local variable created by init
	function displayName() {
		// displayName() is the inner function, a closure
		alert(name) // use variable declared in the parent function
	}
	displayName()
}
init()

init() creates a local variable called name and a function called displayName(). The displayName() function is an inner function that is defined inside init() and is available only within the body of the init() function. Note that the displayName() function has no local variables of its own. However, since inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().

Run the code using this JSFiddle link and notice that the alert() statement within the displayName() function successfully displays the value of the name variable, which is declared in its parent function. This is an example of lexical scoping, which describes how a parser resolves variable names when functions are nested. The word lexical refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Nested functions have access to variables declared in their outer scope.

Closure

javascript
function makeFunc() {
	var name = "Mozilla"
	function displayName() {
		alert(name)
	}
	return displayName
}

var myFunc = makeFunc()
myFunc()

Running this code has exactly the same effect as the previous example of the init() function above. What's different (and interesting) is that the displayName() inner function is returned from the outer function before being executed.

At first glance, it might seem unintuitive that this code still works. In some programming languages, the local variables within a function exist for just the duration of that function's execution. Once makeFunc() finishes executing, you might expect that the name variable would no longer be accessible. However, because the code still works as expected, this is obviously not the case in JavaScript.

The reason is that functions in JavaScript form closures. A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created. In this case, myFunc is a reference to the instance of the function displayName that is created when makeFunc is run. The instance of displayName maintains a reference to its lexical environment, within which the variable name exists. For this reason, when myFunc is invoked, the variable name remains available for use, and "Mozilla" is passed to alert

REACT INTERVIEW JS

What is the this keyword in JavaScript?

this refers to the context in which a function is executed and can vary depending on how a function is called.