Forem: Sachin kumar

"Undefined" in javascript: Amazing Cases.

Sachin kumar — Tue, 18 Apr 2023 16:49:52 +0000

📗 𝐓𝐡𝐞 𝐂𝐮𝐫𝐢𝐨𝐮𝐬 𝐂𝐚𝐬𝐞 𝐨𝐟 "𝐔𝐧𝐝𝐞𝐟𝐢𝐧𝐞𝐝" 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭

👉 In JavaScript, "undefined" is a primitive data type that represents a value that is not assigned to a variable or a property. "undefined" is a property of the global object. That is, it is a variable in global scope.

JavaScript uses the undefined value in the following situations.

✅ 1) 𝐀𝐜𝐜𝐞𝐬𝐬𝐢𝐧𝐠 𝐚𝐧 𝐮𝐧𝐢𝐧𝐢𝐭𝐢𝐚𝐥𝐢𝐳𝐞𝐝 𝐯𝐚𝐫𝐢𝐚𝐛𝐥𝐞
When we declare a variable and don’t initialize it to a value, the variable will have a value of ''undefined''.
For example:

let x;
console.log(x); // Output: undefined

✅ 2) 𝐀𝐜𝐜𝐞𝐬𝐬𝐢𝐧𝐠 𝐚 𝐧𝐨𝐧-𝐞𝐱𝐢𝐬𝐭𝐢𝐧𝐠 𝐩𝐫𝐨𝐩𝐞𝐫𝐭𝐲 𝐨𝐟 𝐚𝐧 𝐨𝐛𝐣𝐞𝐜𝐭
If we access a non-existing property of an object, we’ll get undefined.
For example:

let person = {
name: "Sachin",
};
console.log(person.age); // undefined

In this example, the person object has one property "name". Accessing the "age" property that doesn’t exist on the "person" object returns undefined.

✅ 3) 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧 𝐩𝐚𝐫𝐚𝐦𝐞𝐭𝐞𝐫𝐬
when we call the function and don’t pass all the arguments, the parameters inside the function become undefined.
For example:

const calculation = (a, b ) => {
  return b === 7 ? ${ a } : ${ a} ${ b };
}
calculation(3); // 3 undefined

✅ 4) 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬 𝐫𝐞𝐭𝐮𝐫𝐧 𝐚 𝐯𝐚𝐥𝐮𝐞
A function that doesn’t have a return statement implicitly returns undefined.
For example:

function myFunc() {
// Do something but don't return a value
}
console.log(myFunc()); // Output: undefined

✅ 5) 𝐀𝐜𝐜𝐞𝐬𝐬𝐢𝐧𝐠 𝐨𝐮𝐭-𝐨𝐟-𝐛𝐨𝐮𝐧𝐝𝐬 𝐚𝐫𝐫𝐚𝐲 𝐞𝐥𝐞𝐦𝐞𝐧𝐭𝐬
When we access an array element that is out-of-bounds, we'll get the undefined value.
For example:

const colors = ['red', 'green', 'blue'];
console.log(colors[3]); // undefined`

👉 𝐒𝐮𝐦𝐦𝐚𝐫𝐲
✅ The undefined is a primitive type that has a single value undefined.
✅ Accessing an uninitialized variable returns undefined.
✅ Accessing a non-existing property of an object returns undefined.
✅ Accessing an out-of-bounds array element returns undefined.
✅ A function without a return statement or with a return statement but without an expression returns undefined.

That's all for today 🙂

Thanks for reading it 😊. I hope it was insightful and that we got to learn something new today. If you liked the post, please post likes 👍 and share 🤝 it in your circles. Share your feedback and comment away.

Let's connect on LinkedIn. I'd love to connect :)

Hoisting in JavaScript ( Part -2 ) Practise Question.

Sachin kumar — Sun, 09 Apr 2023 07:10:34 +0000

📗 What is Hoisting in JavaScript?

In JavaScript, hoisting is a behavior where variables and functions can be accessed even before they are initialised. This is because, during the creation phase of the JavaScript execution context, all the variables are allocated memory with an initial value of undefined, and the entire function code is also placed in the execution context.

When we try to access a variable during the code execution phase, it will contain the variable with an undefined value. Similarly, when we invoke a function, the whole code of the function is present, and it will work as expected.

Even let and const variables are hoisted, but they are placed in the Temporal Dead Zone until they are initialized. This means that an error is thrown when we try to access them before they are initialized.

In summary, hoisting is a feature of JavaScript that allows variables and functions to be accessed before they are declared, but it's important to note that let and const variables are hoisted differently, and accessing them before initialization can result in an error.

Question 1.

console.log(y);
y = 1;
--------------------------

console.log(y);
var y = 2;
-------------------------

y = 3;
console.log(y);
var y

// Output: 🤔
// ReferenceError: y is not defined
// undefined
// 3

Explanation: Behind the scene, JavaScript interprets the above code as:

console.log(y); // ReferenceError: y is not defined
y = 1;
-------------------

var y = undefined;
console.log(y); // undefined
y = 2;
-------------------

var y = undefined;
y = 3;
console.log(y); // 3

Question 2:

var a = 1;
console.log(a);

var a = 2;
console.log(a);

// Output: 🤔
// 1
// 2

Explanation: Behind the scene, JavaScript interprets above code as:

var a = undefined;
a = 1;
console.log(a); // 1

a = 2;
console.log(a); // 2

Question 3:

var z = 1;
let z;
console.log(z);

-----------------

console.log(z);
let z = 1;

// Output: 🤔
// Identifier ‘z’ has already been declared Cannot access ‘z’ before initialization

Explanation: Behind the scene, JavaScript interprets above code as:

var z = 1;
let z; //   SyntaxError: Identifier ‘z’ has already been declared
console.log(z);

-----------------

let z;
console.log(z); //  ReferenceError: Cannot access ‘z’ before
                //  initialization
z = 1;

Question 4:

function hoistExample() {
    var a;
    console.log("Before: ", a);
    a = 10;
    console.log("After: ", a);
}
hoistExample();

// Output: 🤔
// Before: Undefined
// After: 10

Explanation: Behind the scene, JavaScript interprets above code as:

function hoistingExample() {
    var a = undefined;
    console.log("Before: ", a);  // undefined
    a = 10;
    console.log("After: ", a); // 10
}
hoistingExample();

Question 5:

function hoistingExample() {
    console.log("Value of a in local scope: ", a);
}
console.log("Value of a in global scope: ", a);
var a = 1;
hoistingExample();

// Output: 🤔
// Value of an in global scope: Undefined Value of an in local scope: 1

Explanation:

When the code runs, it first declares a variable a in the global scope using the var keyword, but it does not assign a value to it yet. Then it calls the hoistingExample() function.

Inside the function, it tries to log the value of an in the local scope, but at this point, a is undefined because it has not been assigned a value yet.

After the function declaration, the code logs the value of an in the global scope, which is still undefined at this point.

Finally, the code assigns the value of 1 to the variable.

So when the hoistingExample() function is called, it logs undefined for the value of an in the local scope, but after the function is called, the value of an in the global scope has been updated to 1.

Question 6:

function hoistingExample() {
    a = 1;
}
hoistingExample();
console.log(a);

----------------------------

function hoistingExample() {
    var a = 1;
}
hoistingExample();
console.log(a);

// Output: 🤔
// 1 ReferenceError: a is not defined

Explanation:

In the first code snippet, the variable a is not declared with the var, let, or const keyword. Therefore, it will be automatically declared in the global scope and assigned the value of 1 inside the hoistingExample() function. When console.log(a) is executed outside of the function, it will output 1 since a is in the global scope and has not been reassigned.

In the second code snippet, the variable a is declared using the var keyword inside the hoistingExample() function. This means that a is only accessible within the function's local scope and cannot be accessed outside of it. Therefore, when console.log(a) is executed outside of the function, it will result in a reference error since a is undefined in the global scope.

Question 7:

function a(){
    console.log("1")
}
a();

function a(){
    console.log("2")
}
a();

// Output: 🤔
// 2
// 2

Explanation: Behind the scene, JavaScript interprets above code as:

function a(){
    console.log("1")
}
function a(){
    console.log("2")
}
a(); // 2
a(); // 2

When two function declarations of the same name are defined in the same scope, the second one will overwrite the first. In this case, the second a() declaration outputs 2 to the console, so when a() is called after the second declaration, it will execute the updated code block and output 2.

Question 8:

var test = 1;
function functionHoisting() {
    test = 10;
    return;
    function test() {}
}
functionHoisting();
console.log(test);

// Output: 🤔
// 1

Explanation:

The reason for this output is that the function declaration of test() inside the functionHoisting() function has no effect due to the return statement that immediately follows it.

When functionHoisting() is called, it sets the value of the global variable test to 10. However, the function declaration of test() inside the function does not change the value of the global test variable. This is because the function declaration is hoisted to the top of the function scope, but it is never actually called or executed.

Therefore, when console.log(test) is executed outside of the function, it outputs the original value of 1 that was set at the beginning of the program, rather than the updated value of 10 that was set inside functionHoisting().

Question 9:

console.log(a());
function a() {
    var b = function () {
        return 3;
    };
    return b();
    var b = function () {
        return 8;
    };
}

-------------------------------------------------------------

console.log(a());
function a() {
    var b = function () {
        return 3;
    };
    return b();
    var b = function () {
        return 8;
    };
}

// Output: 🤔
// 3
// 8

Explanation:

In the first snippet, the function defines a variable b with a function expression that returns 3. This is followed by a return statement that immediately invokes the b function and returns its result.

The second function expression that returns 8 is never executed because it is defined after the return statement. So, the b function that is returned and invoked is the one that returns 3.

Therefore, console.log(a()) will log 3 to the console.

In the second snippet, When a() is called, it returns the value of the function b(). However, the b() function that is returned is the second b() function, which returns the value 8. This is because the second b() function is defined after the first b() function, so it "overrides" the first b() function.

Therefore, when a() is called, it returns the value 8

Question 10:

var temp= 'hi';
function display(){
     console.log(temp);
     var temp = 'bye';
};
display();

// Output:
// undefined

Explanation:

Within the display() function, there is a variable named temp that is declared using the var keyword. When the console.log(temp) statement is executed, the JavaScript interpreter looks for the value of temp within the local scope of the display() function.

However, since the temp variable is declared using var, it is hoisted to the top of the function scope. This means that the variable is technically declared before it is assigned a value. So, when console.log(temp) is called, the temp variable exists within the local scope of display(), but it has not yet been assigned a value.

As a result, the value of temp at this point is undefined.

Thanks for reading it 😊. I hope it was insightful and that we got to learn something new today. If you liked the post, please post likes and share it in your circles. Share your feedback and comment away.

Let's connect on LinkedIn. I'd love to connect :)

Hoisting In Javascript ( Part - 1 ):

Sachin kumar — Sat, 01 Apr 2023 12:57:54 +0000

Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their respective scopes (global or local) before the code is executed. This means that even if a variable or function is declared later in the code, it can be used before its actual declaration.

There are a few important concepts to understand to master hoisting in JavaScript:

Variable Hoisting: In JavaScript, variable declarations are moved to the top of their scope during hoisting, but their assignments are not. This means that if you declare a variable using "var", it will exist in memory with a default value of "undefined" before its actual declaration in the code.

// For example: 

console.log(myVar);  // Output: undefined
var myVar = 5;

This code will log "undefined" to the console, because "myVar" exists in memory with a default value of "undefined" before its declaration on the second line.

Function Hoisting: Function declarations are also hoisted in JavaScript, meaning they can be used before their actual declaration in the code. This is because function declarations are moved to the top of their scope during hoisting, including their entire code block.

// For example:

myFunc();  // 𝐎𝐮𝐭𝐩𝐮𝐭: "Hello World!"
function myFunc() { 
    console.log("Hello World!"); 
}

This code will log "Hello World!" to the console, even though "𝐦𝐲𝐅𝐮𝐧𝐜" is called before its actual declaration in the code.

Block Scoping: In modern JavaScript, "let" and "const" keywords are used for block-scoped variable declaration. Unlike "var", block-scoped variables are not hoisted to the top of their scope, and cannot be accessed before their actual declaration in the code.

// For example:

console.log(myVar); // Output: ReferenceError: Cannot access 'myVar' before initialization
let myVar = 5;

If you try to access the value of a variable declared with let or const before it has been initialized, JavaScript will throw a ReferenceError with the message "Cannot access 'myVar' before initialization".

In summary, hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their respective scopes during the code execution. Understanding variable hoisting, function hoisting and block scoping hoisting is important for mastering hoisting in JavaScript.

In this post, we have learned what is hoisting in Js. In the next post, we will practice some questions for a better grip on Hoisting, so stay tuned 🙂.

Thanks for reading it😊. I hope it was insightful and you got to learn something new today. If you liked the article, please post likes and share it in your circles. Share your feedback and comment away.

Let's connect on LinkedIn. I'd love to connect :)