DEV Community: menaaziz27

Share your desk setup here! 🖥️👨‍💻

menaaziz27 — Fri, 20 May 2022 16:41:21 +0000

Hello, community!

I'm gonna change my desk setup and planning to get an extra monitor to increase productivity. Could you share with me your desk setup and how you use yours daily in programming stuff? (ex why you prefer two horizontal monitors other than one vertical and one horizontal .. etc).

I use mine for programming web & mobile applications and design as well.

Your help would be appreciated so much.

What the heck is optional chaining in javascript ?

menaaziz27 — Fri, 02 Apr 2021 11:44:01 +0000

So I came up with an interesting javascript feature today and wanted to share it with y'all!

the chaining operator (?.)

this operator provides a way to simplify the referencing to a property of a nested object when it's possible that this property may be undefined or null.

alot of theory ? let's dive into examples ..



let nestedObject = {
    name: 'whatever',
    firstObj: {
        getHere: 'can you reach me ?',
    },
};

let nestedProperty = nestedObject.firstObj && nestedObject.firstObj.getHere;
console.log(nestedProperty);
// expected output: can you reach me ?

Here we're checking of the existence of the property (firstObj) first and if it exists the right hand would be evaluated, hence the nestedProperty would be the value of (getHere) property.
So that was without the chaining operator and it's kinda painful .. let's see what it looks like with our chaining operator.



let nestedObject = {
    name: 'whatever',
    firstObj: {
        getHere: 'can you reach me ?',
    },
};

let nestedProperty = nestedObject?.firstObj?.getHere;
console.log(nestedProperty);
// expected output: can you reach me ?

As you noticed it evaluates the same result .. so you should read the expression from left to write as "is there any object calls nestedObject ? if there's, check please if it has a nested property called firstObj ? and if exists return me the getHire value and if not return me undefined " so with the operator we type a less of code, clean and readable lines .. notice that of there's no nestedObject it will return immediately undefined and the rest of the expression is not gonna be evaluated.

let's see the previous example without the operator



let nestedObject = {
    name: 'whatever',
    firstObj: {
        getHere: 'can you reach me ?',
    },
};

let nestedProperty;
if (nestedObject.firstObj.getHere !== null || nestedObject.firstObj.getHere !== undefined) {
  nestedProperty = nestedObject.firstObj.getHere;
}

this snippet behaves the same as it's previous one .. but here we're typing a lot of code and there's some repetitions.

optional chaining with function calls

If we used the operator with function that is not exists the expression immediately return undefined.



let course = {
    professor: 'Dawn',
    category: {
        name: 'development',
        details: {
            showName: function () {
                console.log(course.category.name);
            },
        },
    },
};
let undefinedValue = course.category?.details?.NotExistingFunction?.();
console.log(undefinedValue);
// expected output: undefined

we're checking the course object if it has category property ? if yes check for the details prop if yes check for the NotExistingFunction and because it's not exist the expression returns undefined.

What if there's a property with the same name of the function ?



let course = {
    professor: 'Dawn',
    category: {
        name: 'development',
        details: {
            showName: "it's a web development course!"
        },
    },
};
let undefinedValue = course.category?.details?.showName?.();
console.log(undefinedValue);
// exprected output: TypeError: course.category?.details?.showName is not a function

In this case a TypeError exception will be raised.

Well, that's it for this article 😄
for more info check MDN

Hoisting in javascript variables

menaaziz27 — Mon, 21 Dec 2020 14:13:33 +0000

Introduction

Whenever you run your code, javascript parses it first before execution .. during the parsing phase the parser reads code line by line to check for any errors and stops execution if there's any, and if there's no errors javascript interpreter begins to move (hoist) all the functions and variables declaration to the top of our code .. so in this way we can use variables and function before declaring it in our code.

So what is hoisting?

It's when javascript interpreter moves all the functions and variables declaration to the top of our code before execution, so regardless of whether their scope is global or local they are all moved to the top (the top of their scope).

Variable hoisting :-

Using var
Using let and const

1️⃣ Using var



language = 'javascript'

console.log(language);

var language;

output



javascript

Before execution javascript's interpreter hoist all variables declaration to the top of our code, and for var variables during compile phase it hoist the variable to the top of the code and initialize it to undefined .. this value lasts undefined untill the javascript interpreter hits the line of the assignment (evaluation) of the variable.

So keep in mind that javascript see the previous code during compile phase like this ..



var language = undefined;

language = 'javascript';

console.log(language);

output



javascript

So let's see another example where javascript comes with unexpected output 😄



console.log(language); 

var language = 'javascript';

output



undefined

In this snippet, during the compilation phase javascript's interpreter hoists the 'language' variable to the top and initializes it with undefined, and before console.log() came before the actual initialization, javascript logs undefined to the console.

So javascript see it like



var language = undefined; // hoisted and auto initialized to undefined

console.log(language); // undefined

language = 'javascript'; // language = 'javascript'

So now if we tried to run the following



console.log(language); 

var language = 'javascript';

console.log(language);

output



undefined
javascript

As you might expect, the second log() function logs the actual value because during the excution, the interpreter hits the actual initialization before it logs the value to the screen.

the following snippet is gonna make it clear a bit



console.log(myAge);

var myAge = 21;

function foo() {

  var myAge = 44;

  console.log(myAge);
}

foo();
console.log(myAge);

output



undefined
44
21

again every variable declaration are getting hoisted to the top of their scope .. so the outer variable is getting hoisted to the top of its scope (global scope) and the inner variable is getting hoisted to the top of its scope (local function scope), so the first log is undefined because it's hoisted and auto initialized to undefined by the interpreter .. now after the execution of foo function the inner variable is getting hoisted to the top of the function scope and initialized to 44 before logging it so it logs 44 to the console.
now the last line logs the value of the variable declared in its scope(in this case global scope) so it prints 21 on the screen.

2️⃣ Using let and const



console.log(age);
let age = 21;



ReferenceError: Cannot access 'age' before initialization :x:

the question here, are let and const variables not hoisted? 👀

the answer is they are getting hoisted too, but not initialized .. so that is the main difference between let and const vs var variables. So keep in mind that all varaibles are hoisted in javascript however var variables is getting initialized to undefined but let and const not initialized at all during compilation.

let and const variables only get initialized when their evaluation during the runtime .. let's see how.



console.log(name);
let name;

Error ❌



ReferenceError: Cannot access 'name' before initialization

this example clarify how javascript behaves during the compilation of let variables, it hoists the variable but never initialize it during the compilation phase, so during the runtime javascript don't recognize the variable and throws an error.

so let's try the reverse ..



let name;
console.log(name);

output



undefined

so now you know that during the compilation phase let is hoisted but never initialized, so in the execution phase the interpreter initializes let variables to undefined (until it's evaluated to its actual assignment in the program).
that's why it logs undefined.
So during the compilation phase it's hoisted but not initialized & during the execution phase let is initialized to undefined if there's no assignment statement reached by the interpreter.

it differs a bit in the case of const

the difference between let and const is during the execution phase .. when let being initialized to undefined however const throws an error and never initialized by the interpreter.



const x;
console.log(x)

Error ❌



Missing initializer in const declaration

Here javascript hoist const variable during compilation, but in the execution phase when the interpreter hits the declaration statement 'const x;' it never initialize it .. that's why it throws an error when we try to log its value.

Ok, that's it for this blog, hopefully I could help 😅
Thank you for reading!