Javascript: Ten Common Yet Tricky Concepts

1. Truthy and Falsy

Like Data Type, every value in javascript inherently has a boolean value- truthy or falsy. They are called truthy or falsy because they are inherent values until assigned differently.

The values below are always falsy:

  • false
  • 0 (zero)
  • ‘’ , “” (empty string)
  • undefined
  • null
  • NaN

Everything else other than the values mentioned above is truthy.

let x = null;let y = 4;let z = 8
if(y) {console.log(y + z)} // y contains the inherent boolean value true
if(!x) {console.log(y - z)} // x contains the inherent boolean value "false" !x makes it opposite

2. Null and Undefined

In javascript, null is an assignment value. it can be assigned as a placeholder- a nonexistent reference. To get a value as null, it must be assigned.

On the other hand, undefined means a variable has been declared somewhere that is not either defined or out of scope. A function can return undefined if there is no value explicitly returned from it. undefined can be assigned to a variable explicitly. But doing so is considered a bad practice.

let y;function addNum () {let x = 4let y = 8let z = x + y}const x = undefined // badconsole.log(y) // output: undefinedconsole.log(addNum()) // output: undefinedconst nullValue = nullconsole.log(nullValue) // output: null

3. Single (=) Double (==) and Triple Equal (===)

Single equal is used for assigning a value to a variable. Double equal checks if two values are equal but it does not consider if two values are of the same data types.

const x = 234const y = "234"console.log(x == y) // trueconsole.log(x === y) // flase

4. Scope

Scopes in Javascript works as a boundary for code blocks. We can initiate a scope by putting boundary with curly braces - {} around a code block. The code block written inside the scope is not accessible from the outside- the area that is not surrounded by curly braces- also known as the Global Scope. But the codes written in the outer scope are accessible inside the curly braces with a function declaration- also known as the Local Scope or Function Scope. And if the scope is created by simply putting curly braces around code block without any function declaration- is known as the Block Scope.

const x = 76;function addNums () {// curly braces initiates a scopeconst y = 50;return x + y // x is accessible inside}console.log(addNums()) // output: 126// y is not accessible outsideconsole.log(x + y) // output: ReferenceError: y is not defined

5. Variable Definition and Declaration

The terms Definition and Declaration can often be confusing because they could sometimes almost mean the same thing in plain English.

The variable definition means initializing a variable with a var, let, or const. If there is any value assigned to that variable, that is the variable declaration.

let x; // definitionx = 64; // declarationlet y = 52; // definition and decleration

6. Function Declaration and Function Expression

Function declaration and expression are almost the same things- the written form of code block initiated by function to be called later. The only difference between declaration and expression is the function name. Function declaration involves naming a function. A function with a name is a function expression, also known as an anonymous function.

function addNum () {const x = 20;const y = 28;return x + y} // declerationconst addNums = function () {const x = 20;const y = 28;return x + y} // expression

7. Immediately Invoked Function Expression (IIFE)

Executing a function immediately after creating it by putting parentheses at its end.

(function addNum () { const x = 20; const y = 28; let sum = x + y console.log(sum)})() // output: 48

8. Callback Function

Callback functions are functions that are passed as a parameter of another function. This pattern is usually followed to execute the functions in an orderly manner and getting some prior processing done before executing the function passed as a callback.

function showResult(result) {console.log(result)}function addNums (num1, num2, callback) {const sum = num1 + num2callback(sum)}addNums(28, 45, showResult) // output: 73

9. This

This is one of the most widely used and confusing keywords in javascript. In Javascript, This points to a particular object. Which object this points towards depends on how a function that includes this is being called.

  • If a function that includes this is called from the global scope, then this will point to the global object. In strict mode, the value of this will be undefined in the global scope.
let num = 320;
function addNums () {
let x = 20;let num = 49;console.log(`${x + num}`); // 69console.log(`${x + this.num}`); // 369}addNums();
  • If there is an object of a function created using the new keyword or a function declared inside an object, this inside that function will point towards that particular object.
const obj = {  num: 300,  showThis: function () {  console.log(this.num) }}obj.showThis() // output: 300
  • Calling a function with call() and apply() method, that has this will point towards the particular object that has been passed inside call() or apply() as parameters.
const obj1 = { num: 300,}const obj2 = { num: 100}function viewNum () { console.log(this.num)}viewNum.call(obj1) // output: 300viewNum.apply(obj2) // output: 100
  • The bind() method, when called with a function with this, explicitly points this towards the object passed inside bind()
const obj = {  num: 300,  viewNum: function viewNum () {  let num = 400  console.log(num) }}function showThis (callback) { let num = 100; callback()}showThis(obj.viewNum.bind(obj)) // output: 400

10. Call and Apply

Both call() and apply() lets you write a method that can be used on different objects. The difference is, the apply() method can take arguments inside an array, while the call() method takes arguments separately.

function addNums (num1, num2) { console.log(num1 + num2)}
const obj = {
num1: 349, num2: 345}addNums.call(obj, 23, 48) // output: 71addNums.apply(obj, [234, 654]) // output: 888

--

--

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