DEV Community: cyrusCodes

Type Conversion In Modern Javascript - Part I

cyrusCodes — Sat, 24 Apr 2021 08:57:42 +0000

Type conversions in javascript refer to the ability to convert from one data type to another. For example, we can convert numbers to strings as follows;

console.log(typeof(30 + 'years'));//string

If javascript fails to perform a meaningful type conversion i.e tries to make an impossible conversion, for example, a string to a number, the result is NaN.

console.log(Number(30 + 'years')); //NaN

You should note that when two numbers presented as stings are added together, the result is a string. Example;

console.log(typeof('2' + '3')); //string

This is because javascript doesn’t actually perform the typical addition functionality that is represented by the + operator but instead performs string concatenation. This means it treats the two numbers just like any other string, and when two strings are combined, the result is a string type.

console.log('2' + '3'); //23

On the other hand, if we were to perform a different operation example multiplication, division, or subtraction, then javascript would automatically convert the strings into a number and perform the actual arithmetic operation. Examples;

console.log('2' * '3'); //6
console.log(typeof('2' * '3')); //number

console.log('2' - '3'); //-1
console.log(typeof('2' - '3')); //number

console.log('6' / '3'); //2
console.log(typeof('6' / '3')); //number

console.log('6' % '3'); //0
console.log(typeof('6' % '3')); //number

You can share this article on your social media to bookmark it for future reference or give access to your friends also working or interested in javascript language. You can follow me on Twitter , where I share countless resources and articles related to javascript and we can become lifetime friends and javascript lovers.

Finally,** THANK YOU** so much for taking your time to read this article. If you are feeling more generous I'll not stop you from buying me a cup of coffee.

Until the next article, KEEP CODING & SHARING.

Modern Javascript Basics - Part IV

cyrusCodes — Wed, 10 Mar 2021 07:21:19 +0000

A string is considered of primitive type in javascript. this means it's immutable or can't be changed. I admit the first I read and researched this, it was difficult to understand the difference between primitive (immutable/ unchangeable) and reference/object types that I ended up writing about the differences between the two in this article..

This post is the fourth part of a blog series that focuses on modern javascript basics. if you haven't had a chance to read the previous parts here's a list and their links;

Modern javascript basics PART I - Type Coercion - Visit Post.
Modern javascript basics PART II - Javascript rules - Visit Post.
Modern javascript basics PART III - Null vs Undefined - Visit Post.

Since strings are built by a sequence of characters, most people assume that they can operate like arrays and are changeable or can be adjusted. We are going to dive deep into this datatype in javascript. To begin, it’s important to know that even though a string is built of a combination of characters, it still remains of primitive type - meaning it cannot be changed.

This should not be confused with changing a string value as follows;

let userName = 'cyrus';
console.log(userName); //cyrus
userName = 'codes';
console.log(userName);//codes

The example above in no way demonstrates a string mutability. It just demonstrates that it's possible to change the value of a string variable. When we talk about a string being immutable we refer to its inability to adjust or change the original string. For example, let's try to change the userName to uppercase.

let userName = 'cyrus';
userName.toUpperCase();
console.log(userName); //cyrus

Javascript does not allow this. What actually happens is that by trying to change the string to uppercase, it returns a whole new string value in uppercase but the original string remains in lowercase. To prove it, we could try and find the returned string as follows;

let userName = 'cyrus'; // starts as lowercase
console.log(userName.toUpperCase()); //returns CYRUS but doesn’t alter userName
console.log(userName);// Original string is still in lowercase

This also applies when we try to treat the string as an array. We can access the string characters just like we would access array values as follows;

let userName = 'cyrus';
console.log(userName[0]); //c

But as much as javascript allows this, it doesn’t allow us to change the characters. Example;

let userName = 'cyrus'; // starts as lowercase
console.log(userName[0]); //Acess the first letter of the name
userName[0] = 'S'; //try change the letter from c to S
console.log(userName); // The username doesn't alter and remains cyrus

I hope the examples above explain clearly why strings are deemed as primitives or unchangeable. One important thing to note is that primitive types are compared by value and are only considered the same when they have the same value. Example;

//numbers
let age = 5;
let number = 5;
console.log(age === number); //true

//null
let name = null;
let user = null;
console.log(user === name);//true

But in strings, this is not so obvious. Javascript considers two strings equal if and only if they have the same length and if the character at each index is the same. This means that in javascript, the string 'Cyrus' is totally different from 'cyrus' Let's prove it.

let userName = 'cyrus';
let account = 'Cyrus';
console.log(userName === account); //false

Also, another important thing to note is that for the strings to be equal they have to be of the same length. Have a look at this example;

let userName = 'cyrus ';
let account = 'cyrus';
console.log(userName === account); //false

This also explains why javascript is referred to as case sensitive - meaning that if both values were treated as variables they would be totally different.

We may expect that the result would be true since all the characters are in lowercase and are the same, but one tiny difference makes them unequal. the length;

let userName = 'cyrus ';
let account = 'cyrus';
console.log(userName.length); //6
console.log(account.length); //5

This means that in the first string, the empty space at the end of the string is counted as a character and hence has a bigger length than the second string. But if every character is the same and the length is also the same then the strings are deemed equal;

let userName = 'cyrus';
let account = 'cyrus';
console.log(userName === account);//true

This concludes the FOURTH part of this amazing blog post series of basic javascript with many more to come. Click here to read the other parts of the series and here.

You can also share this article on your social media to bookmark it for future reference or give access to your friends also working or interested in javascript language. You can follow me on Twitter , where I share countless resources and articles related to javascript and we can become lifetime friends and javascript lovers.

Finally,** THANK YOU for** so much for taking your time to read this article. If you are feeling more generous I'll not stop you from buying me a cup of coffee.

Until the next article, KEEP CODING & SHARING.

My Top 10 Vs-code Extensions

cyrusCodes — Tue, 09 Mar 2021 07:24:52 +0000

VS-CODE is becoming perhaps the most prominent and preferred code editor in modern days, yet proving to be the most underutilized.

This application which is classified as an ide(Integrated development environment ) or simply a code editor like many others, has the ability to install extensions or plugins that basically improve the default application operations to mainly boost its user's productivity.
Some of the reasons behind its growing popularity in the development industry are;

Extensive and precise documentation.
Abundance of resources related to its usability and best practices.
Huge list of extensions
Easy interface customization
Massive and growing web community.
Constant updates and additional features.

In this article, we will group the extensions into two groups namely productivity extensions and Appearance extensions;

1. Productivity Extensions;

These are extensions that improve your productivity and efficiency when coding using vs code and include;

### - Better Comments:-

This extension helps your productivity by Improving your code commenting by annotating with an alert, informational, TODOs, and more! The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into Alerts, Queries, TODOs, and Highlights all in different colors to differentiate between them.

- Gitlens:-

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

- JShint & ESlint :-

JShint extension Integrates JSHint into VS Code. These are extensions associated with javascript and help in code monitoring of the syntax and other errors that may occur in your code. I have written an extensive article on these extensions and their importance and you can find it here..

- Prettier :-

Prettier is an opinionated code formating extension. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. This extension is a must-have if you want to keep your code clean and well arranged for easier readability and maintenance.

- Live Server :-

This extension is amazing, to say the least. I briefly touched on its usability, especially when running javascript or web-based code snippets or projects in this article.. This extension helps launch a development local Server with a live reload feature for static & dynamic pages.

- Visual Studio IntelliCode :-

The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript, and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

- Import Cost :-

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with the babili-webpack-plugin to detect the imported size.

- vscode-faker :-

When coding, you'll probably need some test data related to various topics like people's names, cities, phone numbers, etc. This extension is very helpful by generating fake data for name, address, company, database, date, image, phone to use in your code.

- webhint :-

The Webhint Visual Studio Code extension provides diagnostic data for workspace files based on webhint analysis.

2. Appearance Extensions;

The following will be a list of only three extensions that I've found to be unique and highly customizable to improve the appearance of your vs code application. These boost the appearance as well as your productivity regardless of your choice in coloring or feelings towards light and dark modes.

- Rainbow Brackets :-

This is one of my favorites when it comes to appearance. One of the most utilized symbols in coding are brackets which are of multiple types and it isn't difficult to make a mistake of skipping some and this is what makes this extension so useful. It Provides rainbow colors for the round brackets, the square brackets, and the squiggly brackets.

- Bracket Pair Colorizer :-

This is another extension that is so amazing to have. To locate matching or the pair of a bracket which may have hundreds of lines in between, this extension helps by using the same color for matching brackets making it easier to locate.

- Peacock :-

When I found this extension, I couldn't believe the creativeness of its developer a developer by the name John Papa or at least their pseudo name. This extension Subtly changes the color of your Visual Studio Code workspace which is Ideal when you have multiple VS Code instances.

This concludes my list of the 10 most utilized vs-code extensions in my arsenal. As you have noticed I haven't discussed much on color themes because this is a highly opinionated topic since some developers prefer dark while other light themes. Personally, I'm more productive with dark themes and ill give a list of the best I'm aware of below.

Now, these are worth a look even if you use light themes because most of them have light versions which I imagine are as good as their dark counterparts. They include;

Andromeda
Material theme & Icons
Monokai
Night Owl
Cobalt2
FireFly Pro -A Pure Colorful Dark Theme that Glows in Night, inspired by Fireflies.

I may have gone a bit overboard with the number and given a bonus but they are all useful and make coding very enjoyable.

This concludes or list of extensions that can help improve your productivity and coding experience. id appreciate it if you subscribe to this blog for more posts and tips on coding and tools. You can also share this article on your social media to bookmark it for future reference or give access to your friends. You can follow me on Twitter , where I share countless resources and articles related to web development and we can become lifetime friends.

Finally,** THANK YOU for** so much for taking your time to read this article. If you are feeling more generous I'll not stop you from buying me a cup of coffee.

Until the next article, KEEP CODING & SHARING.

Modern Javascript Basics - Part III

cyrusCodes — Mon, 08 Mar 2021 06:49:43 +0000

1. Drop the use of var in javascript ;

There are various reasons why you should drop the use of var in javascript mostly related to scope as expounded in this article.

Basically, var has a lot of "sinkholes" that have proven to be quite a nightmare especially when used in production code, and it's advisable to instead use let or const. Have a look at this article that differentiates between let and const.

Did you know you can declare the keyword let as a variable using var? ie;

var let = 'cyrusCodes';

Now far from the logic of this, the fact that javascript allows it should scare you away from ever using this keyword for declarations. var basically ignores the cardinal rule of not using reserved words as identifiers, You can find more rules to remember here. I thought that's another good reason why you should drop the use of var and avoid these possible complications.

2. Null vs undefined in modern javascript ;

Null is one of the primitives types in javascript and basically means the absence of value.
undefined means that the variable has never been initialized or declared in the program.
To elaborate on this, we will use an example;

console.log(name);//ReferenceError: name is not defined

This means that our variable name does not exist whatsoever, which should not be mistaken with the primitive type we are discussing of undefined. This is just a javascript error stipulating that we should declare our variables before use.

However, if we correctly declared the variable but failed to give it a value like this;

let names;
console.log(names); //undefined

Then what we have is no longer an error but a primitive type of undefined. This means that the program is aware that the variable exists i.e. it's declared, but it's not assigned to any value or initialized. To confirm this we can use typeof as follows;

let names;
console.log(typeof(names)); //undefined

We can also treat undefined as a value of variables that have not been initialized which means assigning our variable to the value of undefined as follows;

let names = undefined;
console.log(typeof(names)); //undefined

This is unnecessary since declaring our variable without assigning it a value or initializing it gives the same result as we've already covered.

Undefined can also be a result of several operations in javascript which include and not limited to;

The value of an object property that does not exist;

let names = {};
console.log(names.age); //undefined

value of a non-existent array element. Example;

let names = [];
console.log(names[0]);//undefined

Functions that do not explicitly return a value Example;

function user(name) {

}
console.log(typeof(user())); //undefined

Finally the value of function parameters for which no argument is passed as follows;

function user(name) {
    console.log(name);
}
user(); //undefined

Null on the other hand means no value. It's an assignment value and also an object. This means we can assign our variable to null as follows;

let names = null;
console.log(names); //null

If we check the type of null in javascript we get the following results;

let names = null;
console.log(typeof(names)); //object

When it comes to comparing between the two primitive types;

The equality operator considers then equal. Example;

console.log(null == undefined); //true

This simple snippet may have serious implications in your code where you may get the result of one while expecting the other. Example;

let user = null;
let users = undefined;
console.log(user == users);//true

As already discussed, we both know the two are not the same or equal but when you use the equality operator to compare the two in your code, you may spend a significant time trying to find the problem.

That is why To distinguish the two, it's advisable to use the strict equality operator since it can differentiate the two as follows;

console.log(null === undefined); //false

which is the same case in your code as follows;

let user = null;
let users = undefined;
console.log(user === users); //false

In javascript, it's important to differentiate between =(Assignment operator), ==(Equality operator),===(Strict equality operator) and know where best to apply each of these tools. If you are really interested read this article and you'll be surprised at how different and significant each of these tools is in javascript language.

Finally, neither null nor undefined has any properties or methods associated with them, and trying to use any in javascript will result in a type error. Examples;

console.log(null.length); //TypeError: Cannot read property 'length' of null
console.log(undefined.length); //TypeError: Cannot read property 'length' of null

This concludes the THIRD part of this amazing blog post series of basic javascript with many more to come. Click here to read the first article on this series and here to read the second article of the series if you haven't yet. I urge you to subscribe to this blog and get notified anytime a new part is complete.

Finally,** THANK YOU for** so much for taking your time to read this article. If you are feeling more generous I'll not stop you from buying me a cup of coffee.

Until the next article, KEEP CODING & SHARING.

Modern Javascript Basics Part - II:

cyrusCodes — Sun, 07 Mar 2021 07:44:10 +0000

I am a javascript enthusiast, developer, teacher, and a lifetime learner. Javascript is a diverse language and a unique one considering it applies to almost all areas of development be it frontend, backend, desktop, or even mobile app development.

For this reason, I've decided to create a dedicated series of blog posts based on this language which will be all about its syntax, usability, best practices, and most importantly resources as well as lessons and experiences gained as I build my entire development career based on this language.

So join me in this quest if you want to be a lifetime learner, developer, and javascript user, and let's explore this language. You can help by commenting on your opinions, additions, experiences with the language, and most importantly share it across your social media platforms to make it more accessible and useful.

1. Javascript is case sensitive;

const username = 'Cyrus';
const Username = 'James';
let userName = 'Mark';
let UserName = 'Peter';

All the above variable names are considered different variables in javascript language. There are however recommended methods of declaring variables in javascript which mainly are camel case;

const   userName = 'Mark',

Using the underscore;

const  _username = 'Mathew';

and finally using the dollar sign;

const      $username = 'Brown';

2. Multiple vs Single Variable declarations in javascript;

Most javascript developers declare their variables as follows;

const username = 'Cyrus'; //varibale whose value can't be changed / altered
let userName = 'Mark'; //varibale whose value can be  altered

This method is effective in scenarios where there is a limited number of variables to be declared at a particular instance in your code. But it's possible to simplify the code especially when there are multiple variables to be declared by grouping them as follows;

//Varibales whose value cant be changed or altered
const username = 'Cyrus',
    pi = 3.142,
    website = 'cyrusCodes.com';

//or 

//Varibales whose value can be changed or altered
let Username = 'James',
    career = 'Web developer',
    Hobby = ['Reading', 'Writing'];

Note the major differences between the two methods;

The first method is applicable and recommended when there are a few variables to be declared while the second is useful only when there are multiple variables to be declared.
At the end of every variable declaration, the first method terminates the expression with a semicolon while the second method terminates with a comma except the last expression.

All the variables declared under const are constants and cannot be changed throughout the javascript program while all variables declared under let can be altered, therefore it would be a grave mistake to combine the two types.

3. Identifiers in javascript;

Identifiers simply mean names in javascript, might be a variable name, a function name, or any other name of an object in javascript used to identify it.
Examples include;

const userName = 'Mark'; //userName is the varibale identifier
const callUser = function() { // callUser is the function identifier
    console.log(`Hello ${userName}`);
};
callUser();//calling a function => Hello Mark

Several rules must apply when using the identifiers or names in javascript that include;

A name must start with a letter (lower or uppercase), underscore, or dollar sign but subsequent characters can be letters, digits, underscores, or dollar signs. This means that the following are the only ways allowed to start variable names in javascript;

const username = 'cyrus',
    _username = 'James',
    $username = 'Mark';

Digits are not allowed as first characters.
Special keyboard characters are not allowed for use as variable names or in variable names. Examples; (#, ^%@*).
Finally, there is a list of special words also not allowed which is referred to as Reserved words in javascript language which is discussed in the next item.

4. Reserved Words;

These are identifiers or names reserved for use by the javascript language itself and cannot be used to declare variables, classes, functions, or constants.

Examples of these words include; delete, import, continue, debugger, default among others all listed here.

However, even though the use is prohibited for declaration of various items in javascript which includes variables, labels, or function names, they can all be used as object properties as follows;

const user = {
    default: "cyrusCodes",
    while: "Running code",
    do: "Learn javascript",
    delete: "unused code"

};

console.log(user.default, user.while, user.do, user.delete);
//cyrusCodes Running code Learn javascript unused code

Now, I can't find any reason whatsoever one may complicate their code by doing the above since there's a rule call it silent, unsung, or obvious for programmers that states that;

For readable and maintainable code, developers should use descriptive identifiers or names to declare their variables classes or functions. This means that as much as it is not erroneous or prohibited to use unrelated names to identify your variables, it is one of the basic principles every developer should apply when writing their code.

This means avoiding declarations like these;

const a = 'cyrus',
    _b = 'James',
    c = 'Lynda';

This is because no one can tell whether the letters represent names of animals, pets, users, customers, or any other list with a bunch of names. But a descriptive declaration would be as follows;

const userName = 'cyrus',
    fatherName= 'James',
    motherName = 'Lynda';

With no doubt, one can tell exactly what the variable names are describing.

5. Javascript comments;

Javascript supports two methods of commenting mostly differentiated by the size of the comment as follows;

Single line comments; For single-line comments, javascript allows the use of double forward slashes as follows;

// Variable declaration
const userName = 'cyrus';

For multi-line comments the easiest and most effective method of comments is as follows;

/* Variable declaration
const userName = 'cyrus';
*/

This concludes the SECOND part of this amazing blog post series of basic javascript with many more to come. Click here to read the first article on this series if you haven't yet. I urge you to subscribe to this blog and get notified anytime a new part is complete.

You can also share this article on your social media to bookmark it for future reference or give access to your friends also working or interested in javascript language.

You can follow me on Twitter , where I share countless resources and articles related to javascript and we can become lifetime friends and javascript lovers.

Finally,** THANK YOU for** so much for taking your time to read this article. If you are feeling more generous I'll not stop you from buying me a cup of coffee.

Until the next article, KEEP CODING & SHARING.

HOW TO KEEP ON GOING DESPITE DISAPPOINTMENTS

cyrusCodes — Wed, 17 Feb 2021 10:57:35 +0000

How to keep moving forward with your coding journey in the face of disappointments, failure, and other difficulties.

LONG ARTICLE ALERT !!!!

I have previously written a post on lessons I've learned so far on my programming journey here, but I decided to go deeper and elaborate on what keeps me going despite the daily challenges and disappointments. These are the days I find it difficult to remember how to work with arrays or can't remember whether to use let or const and have to dive deep into research and make a whole blog post on it.

The daily fight;

When faced with disappointment, most people take one of two routes; either they quit or keep struggling despite the difficulties which in reality is the lesser taken route. Getting frustrated and suffering mentally is very often especially for programmers which leads to fatigue and burnout. This is partially due to the massive information that developers have to absorb daily to keep up with the ever-developing world of technology.

For a learning programmer, the journey is never smooth. There are disappointments after disappointments. There are times when you’ll try to learn a concept for weeks only to be disappointed in yourself and almost if not give up entirely.

Tip 1

Having to face these disappointments when learning to be a developer, I’ve come to realize there is a third option; taking a small break and revisiting the issue with fresh thought.

Obviously, this is easier said than done especially when you think of all the energy you invested the first time around on the issue but ended up disappointed, the idea of abandonment and quitting seems very alluring. I have had countless such moments and I am sure everybody who aspired to do something great has too. One of my tricks I use to encourage myself to go through it multiple times without giving up is remembering the *feeling of accomplishing the task. *

The anticipation of getting to the other side of that "hill" and looking back at the slippery and dreadful climb I had to endure to get where I am.

I'm sure aim not the only developer who at one moment feels that can solve all world problems with just a few lines of code only to feel like they are a fraud soon to be discovered that they know nothing related to coding.

Tip 2

I have to remind myself that no one will do it for me.

I have to remember that no one can learn on my behalf. No one will work on my projects on my behalf or will have to make all the job applications and go through the dreadful interview processes for me. The harsh reality is that it becomes twice as difficult to solve an issue once you have procrastinated and most likely you’ll give up.

A developers prime time;

Allow me to share a bit about myself and my schedule. I usually prefer to wake up at 4:00 in the morning. I've used the word "prefer" because like any other human, sometimes I fail in this important task. I’ll call this my prime time usually between 4 - 7 am. I can get a lot done during this time because there are mostly no interruptions or any external noises and the whole world is asleep. This is the time I allocate to the disappointing and daunting tasks because I am well equipped mentally to handle them.

It took me a long time to realize this. I had to listen and read multiple articles about the best time possible for a person to increase their productivity and I can tell you for a fact it is different for every individual. Some developers are very productive during the day and others in the evenings while others are night owls - productive throughout the night and then the early risers which I think is the category where I belong.

A developers’ Commitment!

To me, commitment is doing what needs to be done regardless of your current feelings.

Sticking to my schedule sometimes is more difficult than working the schedule itself. There are times I feel so tired to wake up to work on my demanding tasks in my prime time, and I have failed to act accordingly several times but never given up. I usually deploy some simple tactics to keep me committed to my schedule.

## Tip 3: Count to 3;

This is more of a wake-up call to get going. One of the simple tactics is counting from 1 to 3. This usually works, in most cases especially when I’m procrastinating. when you realize you have veered off your schedule, try counting from 1 to 3 and dropping whatever unproductive activity you were doing, and diving deep into your scheduled activity.

When we want to procrastinate we usually tell ourselves that what we are currently doing is also important and will also deliver results which essentially is lying to ourselves because if this were the case, we would have included it in our schedule which we took more time and thinking to create than the random activity we are currently engaged in to avoid the scheduled task.

Tip 4:Fear of breaking the streak;

When I’ve committed to an activity and kept my schedule for some time, I find it difficult to break the commitment.

Breaking the commitment is the first step towards disappointment and the ultimate failure.

This is more of a motivation to get back and work my schedule no matter how bad I feel or dread the activity. Remember getting back at working the scheduled activity is not enough, you have to commit to it and work it diligently otherwise it’ll be a wasted time.

Tip 5:The snapping rubber band;

Most of the time especially during the day, I always have a rubber band on my wrist. Remember, if you took enough time working on your schedule, it eventually becomes part of your routine, and consciously you’ll always be aware when you are procrastinating or avoiding it.

To mitigate this I use the rubber band by pulling it and snapping on my wrist and I’ll stop whatever activity I was using to procrastinate and get back to my scheduled activity. This is very effective especially during the day when there are tons of distractions.

There is nothing that snaps you back to the present faster than a rubber band's snap on your wrist.

The anticipation of results;

Then there is the anticipation of results. I’ve already briefly motioned this using a metaphor of climbing a hill. The feeling of achievement of getting to the top and looking back at what you had to go through to get where you are.

This is a very powerful motivator because it not only shows there is progress but also indicates your schedule is effective and will eventually get you where you need to be.

Tip 6: Read, listen get motivated;

I realized that to keep going and working my schedule, I need more than a count and a rubber band. I needed motivation. I can not insist enough on this. Try going to youtube and just type motivation and you’ll find multiple very nice videos on motivation even some specific to programmers.

There are times when I listened to a video and it resonated with me so well I got back to my schedule instantly energized and eager to work the task at hand. There are reasons why top-performing companies and institutions hire motivational speakers and coaches to talk to their staff. I’ll do more than just tell, here is a list of my top motivators;

There are even amazing channels dedicated to motivation and experience like;

This is among my favorites because it is based on real-life people giving their experiences.

The second part of this is reading. videos are good for short jolts of motivation. But for a detailed and well-crafted process on how to keep you motivated try reading a book, it’ll surprise you.

Here is a list of amazing books you could read to keep you going.;

The Alchemist by Paulo Coelho
Grit: The Power of Passion and Perseverance by Angela Duckworth
Think and Grow Rich by Napoleon Hill
The Subtle Art of Not Giving a F*CK: A Counterintuitive Approach to Living a Good Life by Mark Manson
Who Moved My Cheese? by Spencer Johnson

Take books like an umbrella and a bottle of chilled water that you take with you on a long journey to drench the agonizing sun and the dusty roads towards a blissful town of your goals.

Final word;

To most people, learning new things especially in programming is difficult, tiring, and disappointing, but I'd urge you to keep going, track your progress, keep your schedule, Come up with a plan and most importantly learn how to keep going even in the face of disappointments, failures, and adversity.

Start by doing what's necessary; then do what's possible, and suddenly you are doing the impossible. -Francis of Assisi

THANK YOU so much for taking your time to read this article. I really appreciate your patience and attention throughout the reading. This is just the beginning and a lot more tips and posts related to my development journey as well as technical aspects of it are on the way and to get notified when they do, follow me on Twitter.

If you are feeling more generous I'll not stop you from buying me a cup of coffee. Until the next article, have a look at my previous ones and you may benefit more than you think.

Modern javascript basics Part-I: Type Coercion:

cyrusCodes — Tue, 16 Feb 2021 05:12:03 +0000

This is the first post that forms the beginning of a number of related blog posts on the basics and syntax of the javascript language. These blog posts will dive into a number of small topics that are normally neglected by developers but are crucial to their careers.

The first of these posts will dive into type coercion in javascript.

Type coercion is where the javascript engine has to work with two different datatypes E.g string with a number and has to convert one data type to another ignorer to work with the two.

This conversion has a priority order that begins with stings, Number, and finally Boolean.

1. String coercion;

When presented with an operation with both strings and numbers, javascript converts the number(s) into a string(s) in order to work with two district variables. Example;

// jshint esversion:6
let num1 = 20;
console.log(typeof(num1)); //number
let num2 = " Twenty one";
console.log(typeof(num2)); // string
let sum = num1 + num2;
console.log(sum); //20 Twenty one
console.log(typeof(sum)); // string

From the example above, num1 is of type number while num2 is of type string which is confirmed by using the inbuilt function (typeof()).
When the two are added together, javascript gives priority to the string datatype by converting the first variable (num1) into a string and the result (sum) is a string.

2. Number coercion

The second priority is given to the number datatypes in javascript. This means that when presented with a number and a boolean datatype, javascript converts the boolean datatype into a number and evaluates the equation. Example;

// jshint esversion:6
let num1 = 20;
console.log(typeof(num1)); //number
let num2 = true;
console.log(typeof(num2)); // boolean
let sum = num1 + num2;
console.log(sum); //21
console.log(typeof(sum)); // number

From the above example, the first variable was of type number while the second was boolean. Adding the two distinct variables forces javascript to give priority to the number datatype by converting the boolean into a number in this case true becomes 1 which when added to the first variable which was a number (20) results in a number datatype (21).

THANK YOU so much for taking your time to read this article. A lot more tips and posts related to javascript are on the way and to get notified when they do, follow me on Twitter and I'd really appreciate it. If you are feeling more generous I'll not stop you from buying me a cup of coffee.

Decoding ARRAYS in modern javascript - PART II

cyrusCodes — Mon, 08 Feb 2021 05:27:46 +0000

This is the second part of a series of related javascript posts. If you haven't had a chance to look at the first, click this link and learn about objects in modern javascript.

Working with javascript Arrays;

1. Array definition ;

The line of code below shows how to define an array in javascript language;

const skills = []; /*an empty array*/

An array carries a list of items that appear as follows;

const skills = ["coding", "design"];

2. Accessing all javascript array values;

const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/

3. Accessing javascript array value;

To access any array value in javascript we have to use the index of that particular value in the array. The index starts from 0.

const skills = ["coding", "design"];
console.log(skills[0]); /*coding*/
console.log(skills[1]); /*design*/

4.Getting the number of items in an array;

to know the number of items in an array, we use a very effective inbuilt javascript function called length as follows;

const skills = ["coding", "design"];
console.log(skills.length); /*2*/

This gives the responses to two as the total number of items in the above array.

5. Reassigning an array value;

To achieve this in javascript, we also have to utilize the index of the value as follows;

const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills[1] = "writing"; /* Reassigning value in index 1*/
console.log(skills); /*[ 'coding', 'writing' ]*/

6. Adding a item to a javascript array;

There are many methods of achieving this goal based on various criteria in javascript. The major difference between the methods is that one is based on the index positions while the rest are base on inbuilt javascript functions as follows;

Using of the index positions to add an item into an array in javascript;

const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills[2] = "writing"; /* Addiing a new item to the index 2*/
console.log(skills); /*[ 'coding', 'design', 'writing' ]*/

- This method is very problematic and is not recommended in real projects because it requires you to keep a tab on the last index position and if a mistake is made say.. use an index value that's already available, then the value is just reassigned as already demonstrated. Let's call this reassignment problem.

- The second problem that may occur when using this method is the skipping of index positions. using this method is **skipping of index positions * this is because you can use any index position to add a new item into the array as follows;

const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills[5] = "writing"; /* Addiing a new item to the index 2*/
console.log(skills); /*[ 'coding', 'design', <3 empty items>, 'writing' ]*/

From the example above, the use of index positions to add items in an array presents the risk of having empty arrays like positions 2,3, and 4 in the example.

The second method is the most utilized in javascript which utilizes a predefined javascript function called push.

The most important thing to note about this method is that it adds the array item to the end of the array. The advantage of using this method is that you don't have to keep tabs on the index positions or length of your array because the function automatically adds the item to the last available position as follows;

const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills.push('Blogging');
console.log(skills); /*[ 'coding', 'design', 'Blogging' ]*/

The third method is also a good fit for projects and is also an inbuilt javascript function called unshift. The difference between unshift and push, is that push adds new array items to the end of an array while unshift adds items at the beginning of the array i.e. from index position 0 which pushes the current item in that position to index position 1. Example;

const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills.unshift('Blogging');
console.log(skills); /*[ 'Blogging', 'coding', 'design' ]*/

Unshift inbuilt function added the blogging item at the beginning of the array pushing the previous array item at position 0 (coding) to index position 1.

7. Removing / Deleting items from an array;

There are two major methods of deleting/removing items from a javascript array. Both of these methods are inbuilt javascript functions and the difference is based on the end the removal of items is made from.

Using the **pop function to remove items from an array;

Using this method removes the last item from the array as follows;

const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills.pop();
console.log(skills); /*[ 'coding' ]*/

The second method involves the use of the **shift function to remove an item from the front of an array as follows;

const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills.shift();
console.log(skills); /*[ 'design' ]*/

Remember, there are tons of other operations one can work with when it comes to javascript arrays. This post is meant to highlight the basics and an advanced series is on the way, but in the meantime, this concludes the second part of a blog series of posts that are meant to decode objects and arrays and how one can use a combination of the two. Stay tuned for the third part of the blog series that will explain how to combine arrays and objects in modern javascript.

If you are feeling more generous I'll not stop you from buying me a cup of coffee. Until the next article, have a look at my previous ones and you may benefit more than you think.

Decoding OBJECTS in modern javascript - PART I;

cyrusCodes — Sun, 07 Feb 2021 11:37:56 +0000

Intro to objects;

Some of the most powerful data structures to work within javascript are arrays and objects. Both of these items have a lot in common and also can interact with each other. They both are used to store collections of data in javascript where arrays store lists of data while an object mostly stores properties of an item and its values.

This article will highlight the inner workings of each of these data structures and how they can interact with each other in javascript. This article will also include several javascript code snippets and there are many ways of running them to view the results described in this article.

Working with javascript objects;

1. Object definition ;

The line of code below shows how to define an object in javascript language;

const user = {};//an empty object

An object can also contain properties that appear as follows;

const user = { 
  name: "cyrusCodes",
  proficiency: "javascript",
};

2. Accessing all javascript object values;

const user = {
  name: "cyrusCodes",
  proficiency: "javascript",
};
console.log(user);/*{ name: 'cyrusCodes', proficiency: 'javascript' }*/

3. Accessing javascript object value;

There are two methods of accessing property values in a javascript object either by the use of dot notation (.) or the square bracket notation[].

- Using the dot (.) notation;

This methodology is the most recommended while coding in javascript language and it is utilized as follows;

const user = {
  name: "cyrusCodes",
  proficiency: "javascript",
};
console.log(user.name); /*cyrusCodes*/

- Using the square bracket [] notation;

This methodology uses square brackets to access the property value of the javascript object as follows;

const user = {
  name: "cyrusCodes",
  proficiency: "javascript",
};
console.log(user["proficiency"]); /*javascript*/

4. Reassigning a property value;

To achieve this in javascript, the use of assignment operator **(=) **is required as follows;

const user = {
  name: "cyrusCodes",
  proficiency: "javascript",
};
console.log(user.proficiency); /*javascript*/
user.proficiency = "front-end";
console.log(user.proficiency); /*front-end*/

5. Adding a new property to a javascript object;

In this and coming examples, we will utilize the dot (.) notation in all examples related to javascript objects. In this case, the addition is achieved as follows;

const user = {
  name: "cyrusCodes",
  proficiency: "javascript",
};
console.log(user); /*{ name: 'cyrusCodes', proficiency: 'javascript' }*/
user.email = "cyruscodes@yahoo.com"; /*added property email*/
console.log(user); /*{ name: 'cyrusCodes',proficiency: 'javascript',email: 'cyruscodes@yahoo.com'}*/

6. Removing / Deleting a property from a javascript object;

const user = {
  name: "cyrusCodes",
  proficiency: "javascript",
};
console.log(user);  /*{ name: 'cyrusCodes', proficiency: 'javascript' }*/
delete user.proficiency; /*deleting an object's property*/
console.log(user);/*{ name: 'cyrusCodes' }*/

Thank you so much. Remember, there are tons of other operations one can work with when it comes to javascript objects. This post is meant to highlight the basics and an advanced series is on the way, but in the meantime, this concludes the first part of a blog series of posts that are meant to decode objects and arrays and how one can use a combination of the two. Have a look at this second part of the blog series that explains the workings of arrays in modern javascript. Stay tuned for more updates on this and much more.

Please ensure you follow me on Twitter for more detailed and comprehensive blog posts.

Importance of having a plan when building your Web-development career.

cyrusCodes — Wed, 03 Feb 2021 07:02:05 +0000

Intro to plans and planning;

A plan! Have a Plan! Have a strategy! Have a process and so on. these words or something close to this has been hammered into my head since I could read and understand English.

I have encountered them in schools, books, movies, songs, interviews -- remember "What your five years plan". I am a huge fan of books, soon ill write about my affixation with them perhaps in another post. Back to the point, a fan of books.

I have read multiple quotes about plans and processes and strategies and personally, I think this is one of the most ignored subjects by readers and learners even though it's one of the most publicized besides love and death. I don't understand the human's fascination with death yet terrified by it.

Forgive me. I tend to do that, developed multiple trains of thought but not to worry.. where were we...Ahh yes, quotes and books about plans. There are gazillions of recommendations about plans and even quotes personally I've read a few and I'd recommend the well-known works of *Sun Tzu -"the art of war". * I know I know. it's ancient but it's gold, trust me. It's a work of a military strategist but very applicable to daily life challenges.

There are good publications out there on why plans are good and why they are a waste of time and that people should just be random and wing it. Personally, I just feel offended when someone suggests that one should just handle stuff as they come whatever the reason, living randomly and on the edge and so on.

There are many quotes about plans and their association with goal accomplishment. Whenever I'm tired of reading lengthy materials I like to read quotes and specifically about impactful subjects like planning and goals, you should try it out you'll find very encouraging ones like ;

“A goal without a plan is just a wish.” ― Antoine de Saint

By failing to prepare, you are preparing to fail.” ― Benjamin Franklin,

“Planning is bringing the future into the present so that you can do something about it now.” ― Alan Lakein.

“A man who does not plan long ahead will find trouble at his door.” ― Confucius

“Few people have any next, they live from hand to mouth without a plan, and are always at the end of their line.” ― Ralph Waldo Emerson

“Create a definite plan for carrying out your desire and begin at once, whether you ready or not, to put this plan into action.” ― Napoleon Hill

These are just some of my favorites from my favorite authors and influencers. Clearly making plans is a big deal in our lives.

A man with a plan;

I like making plans. This doesn't mean I always follow them through which is a weakness in most humans, but I like having a plan. There are many reasons for making plans, personally, I'll highlight a few which I find very important;

1. Anticipation;

Plans help anticipate challenges and give time to find solutions. I can not count the number of times I underestimated a task before I realized how huge an undertaking it was after creating a plan. This should be an important point to think about. Have you ever sat down and thought why you have so many unfinished projects?.

Chances are you started so well and motivated and somewhere in the middle you realized a resource, a feature, a requirement is more demanding than you expected and then an evil incarnate called procrastination comes from nowhere, and BOOM! your project becomes just another folder In your laptop to consume space. I only you could have known before starting but wait how could you have, without a plan?

2. Progress tracking;

Tracking your progress is essential. I have given up coding so many times before now because I couldn't see any progress in my process. I elaborate on this as one of the issues I'm really working on in this blog post among other nine practices.

Basically, I came to regret every time quit because after a few months I'd look back at some of the small projects I had created and worked on and I would be shocked. I couldn't believe I had created them myself.

I could see the potential and the growth but the sad part was since I had been inactive for some time, id go back to learning about variables, and functions like a complete beginner.

This time around, I made sure it is different. How tracking my process. How do you ask? You're looking at it or reading it. My blog. I write about everything I learn. I have a plan to build it in my own domain. I never really understood how deep one can understand a subject by writing or teaching it. I have never before related to one of my favorite quotes today;

"When One teaches, two learn" ... Robert Heinlein

3. Direction;

A plan gives you direction. A plan is a definition a step by step process of accomplishing a goal. Have you ever had a look at the website Tutorials Point or W3 schools? if you are a developer and have been doing this for some time I'm sure you have. They are great resources to look up programming concepts especially todo with syntax.

Back in 2015, I used to spend so much time on these websites, but I made no progress whatsoever. Don't misunderstand me, they are great resources and very updated but my problem wasn't with them but lack of direction.

hear me out. One thing these two websites have in common is the vast resources and information which is spread across multiple languages from frontend, backend, to design. I had no plan or any direction back then to what I wanted to learn so id starts a javascript document, get bored, jump to java, get bored, jump to PHP, get bored, and start the cycle all over again. See, no direction.

I had to accept one important reality which every new developer should realize. You can not know everything. I know your favorite online instructor looks like they do, but no one can. Trying to learn everything will waste your time, demotivate you and probably break your mind.

My advice, Specialize. There always will be new languages and new technologies. Just research what you need to build and select a technology to do it. Personally, I undertook javascript and its supporting environment. That's why most of my blogs are veered towards javascript.

4. Work-life balance;

Planning doesn't just have to be about your professional life. You should look into planing your personal life specifically your daily life. I believe true happiness in life heavily depends on an equal balancing of the two aspects, lean on one side the other suffers.

For this reason, I advise having a hobby. I have written about some suggestions in this blog post . Balancing your personal life and work has its advantages and on top of that list is a healthy life. You'll avoid burnout and fatigue which I think are the two biggest demotivators, especially for new programmers.

5. Saves time;

Having a plan saves your execution time because it reduces distractions. You don't have to think about required resources and next steps because that is already covered and all that remains is execution. This will require the help of its brother commitment and close cousin *consistency. *

there are times you will feel like not getting it done, do too. There are times I just listened to the voice in my head that tells me, just take the day off today and you'll get it done tomorrow. in fact it's already noon and this article was to be ready by 10 am, which means tried convincing myself to do it tomorrow and then I looked at my plan and that wasn't part of it so it had to get done.

This is not to say it was easy, but I used an exercise I recently read somewhere. This article or book, sorry not sure which suggested that whenever you don't feel like doing something, try to do it for only 25 minutes. Force yourself to sit for 25 minutes without distractions no matter how uncomfortable it is and you'll see the magic happen. You'll find it hard to stop. I couldn't stop writing this article after the first 10 minutes, try it then take this advice;

“Every minute you spend in planning saves 10 minutes in execution; this gives you a 1,000 percent return on energy!” ― Brian Tracy

6. Experience;

Working based on a plan gives you experience. This can be more helpful than you imaging. I came to realize this when I decided to go as planned and explore functions in javascript. I thought I knew almost everything about it, only to realize how wrong I was.

It turned out to be one of the most detailed and lengthy articles I had to research, learn and write about. Have a look at it here.

Then came the understanding and experience. After this, everywhere I came across a function, I could think about a couple of ways id approach a problem. I was surprised by how much I could recall from what I had learned and written about. Of course, not all of us are blessed with a super identic memory and the ability to recall everything but based on my experience I could recall a better method or solution I previously used.

Were it not for my well-created plan which involved a deep dive into this subject, I doubt I could clearly see my progress as I do.

6. Maintained focus;

To be really good at something you need to really work on it. To be excellent at something you need to have a tunnel vision and a sharp focus towards it. Now and then I meet someone so focused and I am left awed and challenged.

This happened today morning. I met this young music producer who from what I can tell hasn't produced a hit song yet, but the energy, focus, interest, and dedication to his work left me wondering what I can do to improve on my side. I could see, that it won't take long before someone with actual influence in that particular field to notice what I did and give the young man a chance.

All I'm advocating for here is for you to be the number one champion of your work. If you don't find your work interesting enough, nobody else will. My interest in coding runs deep, but don't be fooled, interest alone won't carry the day. You need to focus and work on your plan.

There are a lot of distractions especially in the field of technology. There are so many great courses by very knowledgeable instructors, blogs, videos, and books about every subject you can think of, social media posts of other developers achievements posted all over for you to see, which means maintaining focus on your plan won't be a walk in the park.

My advice you need to focus on your own journey. Like I go into detail in this article , run your own race. In this case, focus on your own plan. This is the reason I haven't shared my plan because it works for me. I don't want to influence you to lean my way because I'd be naive to think that one man's or woman's plan works for everyone but the truth is it doesn't.

“Whenever you want to achieve something, keep your eyes open, concentrate and make sure you know exactly what it is you want. No one can hit their target with their eyes closed.”
― Paulo Coelho, The Devil, and Miss Prym

A learning developer's plan!

As a developer, the habit of making tangible plans becomes quite a tool in your career. Think about it, creating web designs, or mobile applications is all about a plan. Several steps a user to take to get a service delivered or get access to resources from your product. This proves making plans doesn't only impact your learning and programming journey but also your destination when you start practicing professionally.

Plans will teach you how to be professional and act professionally in your career, which includes crucial practices like booking and making appointments on time and well prepared. As long you were well prepared and planned for a meeting, you'll rarely get caught off guard.

Any descent learning institution from a kindergarten to a university follows a well-defined timetable. They may use different names for it like schedule, classes, curriculum among others, but there is always a plan.

This shows how important having a plan is to your growth as a developer. You need to know where you are headed and what you need to accomplish. If possible add a time limit which makes it even better since it now becomes a goal. I'm still struggling with working under the time limit but the point is there is a plan.

I'm not plowing through numerous unrelated resources without a direction. I may not be where I need to be, but I know the way to get there which is important and more helpful than talking around aimlessly hoping to accidentally get there.

If you have no idea where to begin, I have a very nice resource that actually plaid a big role in this year's plan for my programming career. It's a video by a very good online instructor by the name of Brad Traversy, titled; Web development in 2021.

Obviously, it's related to web development but if you lean towards another field, I'm sure with a bit of research you'll find the right materials to aid your plan. You don't have to follow everything in the materials including the suggested video, just use it as a guideline to come up with your special and customer plan to build your career.

The outcome;

There is a very misunderstood quote especially by people who like to wing it instead of making plans, that;

Man makes plans and God laughs.

Now personally and without any judgment think one of the most prolific reasons people don't make plans due to fear of disappointment when the plans don't work out. This quote is related to a certain bible verse I believe and I don't think it speaks against making plans.

This is a great quote that would caution you that no matter how good a plan is, remember it's just a plan. Without action it's nothing and even with action, there is always a chance that the outcome will not always be as planned. This requires constant adjustment and review of your plans. it requires constant change based on the current situation.

you may not get everything you wanted in the plan but that shouldn't be your target from the start. I think you should target to get close enough as you possibly can and to my experience, this turns out to be more than expected.

To close this article ill depart with a few highlights for you as you make your plans;

Don't give up

Keep on learning

Plan your materials and your days

To truly understand, teach!

Follow-through on your plan.

Above all, remember failure is just but a bitter lesson, dust up and keep moving forward.

I'd like you to hear your opinion on this piece. So please share it in the comment section, if possible share it in your social media channels and if you feel generous enough please follow me on Twitter and this blog platform @cyrusCodes

Importance of Variable declaration before use in Javascript

cyrusCodes — Tue, 02 Feb 2021 11:13:58 +0000

I never really understood how important the basics/background/foundation of my development career is until I started missing or making simple errors that one would think are just trivial. These errors end up consuming a lot of time debugging because well, they don't prevent the program from running but just interfere with the accuracy of the results.

Perhaps I'll write an article on this in the future, about how developers especially new to the field rush to learn languages and follow tutorials that promise a full understanding of a language in 10 hours or a week and end up missing tiny yet crucial concepts in coding which become costly in their career - among them, Variable declaration.

Variables;

This is perhaps the most utilized word when learning any programming language. Every developer works with them throughout the day, code, and even your entire development career. The fact is we can't work or do any coding without them. So, today I decided to look at their importance other than the basic every developer is aware of - "holding memory spaces". I wanted to elaborate on the consequences of lousy variable declaration.

If you ask any developer the difference between a local and a global variable, they will have quite an easy time explaining it to you with something like;

Global variables are declared outside a function, can be accessed or used in any function within the program while local variables are declared inside a function and can be used only in that function.

They may even go further and elaborate the whole scenario using the term scope ** referring to **where the variable is visible or accessible. This is all nice and educative but in reality, the practical part of this equation is a bit more complex than this. How? stick with me here. In both definitions of the global and local variables, there is a highlighted name; DECLARED. Declaration makes a huge difference between the two types of variables and in turn, the two types of variables define the accuracy or preciseness of any project.

Note here, I used precise and accuracy because, one may mess the rules of variable declaration and the program will still deliver results, but the issue would be whether the results in question are accurate or precise.

Now a syntax error one can use google,mdn,w3schools, and StackOverflow among other numerous sources to debug quite easily I might add, but when you have problems with variable declaration and scope, which remember is one of the first lessons every developer has to learn, then you are about to have a very difficult time because your programs will always run but the logic part will be No Bueno which is a huge problem because no client wants a product that works but delivers faulty results.

Enough of the literature let's have an example of how this would be problematic in a small program snippet. Now let's assume that you have a program that prints out a bunch of names in an array;

const list = function () {
  names = ["cyrus", "codes", "javascript"];
 console.log(names);
};

Note that the array has not been declared but if you call the function, in javascript the program runs just fine and indeed prints out the list of names, and not declaring doesn't seem to have any huge impact since it prints out the list anyway.

const list = function () {
  names = ["cyrus", "codes", "javascript"];
  console.log(names);
};
list();

Now, remember the list of names is in this case supposed to be a local variable only to be used and accessed within the function. I want you to go outside of the function and try to print out the list;

const list = function () {
  let names = ["cyrus", "codes", "javascript"];
};
list();
console.log(names);

and *ALAS! * We can access a variable that was just meant to be operated on within the function. Let me explain here. In javascript, any locally non-declared variable is treated as a global variable and the same applies in most languages. Now due to data manipulations in your code as you proceed this can be disastrous and since there are no errors here it becomes a huge problem trying to debug it. How to avoid this? let's declare our variable inside the function and see what happens;

const list = function () {
  let names = ["cyrus", "codes", "javascript"];
};

list();
console.log(names);

You'll get a very elaborate error basically indicating that the array names are not defined. The reason for this is a locally declared variable can only be used and accessed locally i.e within the function and like the code above shows, it is impossible to access the variable outside of the function as long as the declaration is done within the function.

If you want to print out the content of the function, declare the function, inside it declare the variables and print its content within the function or perform any other operation you want and then call the function outside to print out the content or give results of its operations.

Failure to declare variables may not be the only pitfall when it comes to the declaration. A function declaration can also be a huge issue if you are not cautious. Have a look at this example;

list = function () {
  // declare function/local variables
  let names = ["cyrus", "codes", "javascript"];
  // print out or perform functional operations
  console.log(names);
};
// call the function
list();


list = function () {
  // declare function/local variables
  let names = ["hash", "node", "works"];
  // print out or perform functional operations
  console.log(names);
};
// call the function
list();

If you run the code, javascript may not produce any errors - why? non-declared functions that end up sharing the same name and in fact, your program will produce two different outputs of a function named list, and assuming you have hundreds of lists then you'll have one heck of a time trying to sort them out.

[ 'cyrus', 'codes', 'javascript' ]
[ 'hash', 'node', 'works' ]

If declared, javascript will not allow the use of the same function name twice, but you have to make this happen by PROPERLY DECLARING YOUR VARIABLES. as follows;

let listName1 = function () {
  // declare function/local variables
  let names = ["cyrus", "codes", "javascript"];
  // print out or perform functional operations
  console.log(names);
};
// call the function
listName1();

let listName2 = function () {
  // declare function/local variables
  let names = ["hash", "node", "works"];
  // print out or perform functional operations
  console.log(names);
};
// call the function
listName2();

Oh, and lastly pay attention to the variable names or any other declared item names because calling non-existent functions and variables isn't a huge leap and all it takes is a difference of one letter or underscore making username a totally different variable from userName or even user_name.

I have really enjoyed creating this article and although lengthy it's a good reminder of how important often overlooked javascript simple syntax can make you a better programmer and hopefully it helps you in your developer career as it has helped me. Share it on Twitter or if generous enough follow me on Twitter and you'll get more insightful content right from where this came from.

Using js linters and strict directive in your javascript code

cyrusCodes — Tue, 02 Feb 2021 11:04:14 +0000

Previous blog posts have highlighted various pitfalls developers should be aware of when coding in javascript. Then there were discussions on various solutions to every issue highlighted.

This post dives deep into some very amazing tools most relevant in recent versions of javascript from es6. These tools are more indulging and proactive when it comes to code monitoring.

Linting Tools:
So what is linting all about?

lint, or a linter, basically is a tool that analyzes your code and basically highlights any errors, bugs, or even syntax errors.

Before we get to look at these tools there are a few highlights that a developer should be aware of when coding with the latest versions of javascript especially when using an ide like vs-code. One of these highlights is that it's always a good idea to make your ide( aware of the version of javascript you are using. for example;

let name = 'cyrus';

The keyword let is fairly new in javascript and is used to declare variables in the latest javascript versions. Now an ide like vs code will highlight it and even provide a warning like this;

'let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). (W104)jshint(W104)

As you can see, in the response a tool called jshint responded but remember the code does not have an error. To mitigate this all you have to do is tell the ide of the js version you are using to code with the following lines of code at the beginning of your js file;

// jshint esversion:6

Once you include this code snippet at the top of your file, as commented as it is, the latest javascript code snippets will not be highlighted as we had in our first example.

There are other tools just like this that even highlight the errors in your code and we may not look at all of them in this post but you should have a look at;

eslint
jslint
jscs

The other tool I'd like to look at is a strict directive in javascript. This is quite an amazing feature that is either utilized to affect your entire .js file or a particular part of the program like a function. Strict directive mode;

Checks for errors, bugs, and issues with your code,
Checks whether there are any undeclared variables,
Checks the use or misuse of reserved keywords in your code.
This feature is particularly useful when you choose to refactor your code. You can use it in various code functions to ensure they execute smoothly and once satisfied apply it to the main .js file.

When placed at the beginning of the javascript file, then all the javascript code in that file runs on strict mode and when it's placed inside a function, all the code inside the function runs on strict mode.

The syntax of placing the directive in your file is quite simple;

'use strict';

placed at either at the top of your .js file or at the beginning of the function. An example where this mode is effective in code is checking for undefined variables;

"use strict";
/* jshint node: true */
let namesList = function () {
  names = ['cyrus', 'codes', 'javascript'];
  console.log(names);
};
namesList();
console.log(names);

Which will highlight the variable name names and indicate that it's not defined with the help of jshint and once you try to run the code, the strict mode will produce a reference error on the same issue;

ReferenceError: names is not defined.
Thank you for taking your time to read this article and hopefully you'll follow me on Twitter and or stick around and have a look at more posts. I'd appreciate the gesture.