Arrays can be ordered or unordered, but that's another day's topic. The key takeaway is that arrays help developers manage lists of items efficiently.

An array is one of the fundamental data structures in programming. This article assumes that you are already familiar with it. To define it clearly, an array is a sequence of collections of a single data type (in statically typed languages) or various data types (for non-statically typed languages).

For example, if you have an e-commerce website that allows users to create a shopping list, it might resemble the below:

array = ["milk","sugar","banana","apple"]

Without the knowledge of arrays, a developer will be forced to create different variables that will store each item in the list above. This will make these variables harder to maintain and keep track of changes made to each item. The importance of arrays can not be overemphasized.

Now you understand why this data structure, let us look at how they work under the hood each time a developer declares and initializes one.

Before I go further, you should note that different programming languages have their way of storing these values in memory and mutating them. I will give you the general programming concept associated with this data structure.

To understand the array data structure or any data structure, we need to analyze the ways our code will interact with that data structure.

Data Structure Operations

Almost all data structure has common ways you can interact with them. These include:

Read: To simply put this, you are trying to look up a value at a particular index in the array. For example, you take the above list and try to read the value "milk" which is in the first position or index 0 from it. An index is how the computer keeps track of the position of each item in memory.

Search: Searching is an operation that refers to looking for a value within the data structure. In the case of an array, you are looking to see if a certain value is present within it, E.g. Searching to see if "sugar" exists in our example above.

Insert: Inserting refers to updating a data structure. If we decide to update that array above and add "yogurts" we have updated or inserted it in the array.

Delete: The name only gives you an idea. This operation refers to removing an item from our array.

How is an array saved in memory?

When we declare an array, for example

array = ["apples", "bananas", "cucumbers", "dates", "elderberries"]

The above diagram is a visual simplification of computer memory, and each number inside the block represents a memory address. This is how the computer keeps track of its storage.

When you create an array like the one we have above, the computer will look at the number of items in the list and create a sequential memory address to store each value in each memory address. The index variable in the first image is how the computer knows the position of each item. In most programming languages, the index starts at 0. We will adopt the same concept here.

Each item is saved in a memory address under the hood. Try to visualize a memory address as a street number used to identify a house. The index can be visualized the same way with a bit of difference.

An index of an array is like a number that tells us where something is in a list. Imagine a toy box with toys inside. Each toy has its number, and when you have a number, you can find the toy you want to play with. That number is like an index for the toys in the box. The index is the high-level abstraction of the memory address.

Read Operations in Array

When an array is saved, the computer knows which item is in the first position (index 0) by the memory address. So when a programmer tries to get an element in a particular index, say index 2, the computer takes the index and adds it to the base memory address (1010 for this case).

If I want to access the element in index 2

# 1010 + 2 = 1012 

print(array[2])

>>> cucumbers

You can see that when the index was added to the base address of the first item, it was easy to get the memory address that houses that particular value. This operation is so fast you won't even notice. In the computer science concept that measures the speed of operations, we can say that this operation is always constant even if the array size grows X more. So reading in an array happens in constant time ( O(1) )

Search Operations in Array

When you try to search if an item is present in an array, the computer performs two steps to find this item.

1. Iteration

2. Comparison

The computer goes over each item in the array and compares each item to see if it equals the item you are searching for. It returns true when it finds it or false when it doesn't.

This search and comparison always starts from the first index in the array to the last index. Say we have one million items, the program will perform a million searches and comparisons. In the worst-case scenario, the item may be the last item on the list or may not even be present.

While this article is not geared toward how fast our search works, you can intuitively see that our search will take a linear time to complete. It means a search operation in arrays takes longer than a read operation. There are proven efficient ways to search arrays, but that's out of the scope of the article.

Insert Operations in Array

The insert operation involves updating our array. In some cases, we can add elements to the end. Other times, we may add a new element somewhere in the middle or at the start of the array.

If we intend to add an element to a specific index, say index 2, the computer performs three operations:

1. Shifts

2. Insert

3. Update

Under the hood, the computer goes to that particular index, if it's not empty, it shifts every element after that index to the end before inserting the item into that specific index.

As you can see from the images above, Under the hood, the shifts are necessary to insert the new element.

In a best-case scenario, the element will be inserted at the end of the array. Since we consider worst cases as developers, imagine if we want to insert the new element at the beginning. This means that all elements in the array need to be shifted before the insertion.

This is a simple visualization of how insertion in an array works under the hood.

Delete Operations in Array

Deleting an item in an array is similar to insertion. When an element is deleted from the end, the computer frees up that space. However, when we delete an item like "cucumbers" from the array, consider the visual representation of what occurs.

Step 1: We delete the element.

Step 2: "dates" is shifted to the left.

Step 3: "elderberries" is shifted to the left.

As you can see above, the computer performs two operations which involve:

1. The actual deletion of the elements

2. The shifts that occurred to close up the gap

In the worst case, deleting elements from the beginning of the array will make the computer shift all remaining elements to the left.

Conclusion

Choosing a particular data structure to save and manipulate your data depends entirely on the use case. We just studied how the array data structure works under the hood, and now you understand how each operation works under the hood. In future articles, we will explore other data structures and go in-depth on how to use them efficiently. Kudos to getting this far. See you soon.

Photo/screenshot credit: A common sense to data structure and algorithms

Let's share more context on what I mean by impactful projects. These kinds of projects are projects that solve real-life problems. For example, the 17 sustainable development goals that was adopted by the United Nations in 2015 to bring impactful solutions to the world populace.

What is Open Source?

The term open-source refers to software that is available to the public. It means that the code of this software can be seen, modified, and distributed by anyone.

There are Organizations referred to as open-source organizations. These organizations have open-source projects that they duly maintain and manage. While anyone can contribute to these projects, The purpose of the organization is to moderate the contributions made by the public. Imagine these organizations as persons that build software and then ask the general public to help them improve it either by sharing ideas or contributing technically.

Their job is to filter these ideas and technical contributions to make sure it aligns with the project goals.

How Does Open Source Help me build a portfolio?

If you recall, I noted above that these open-source projects are available to the public for contributions. The best way to start is by contributing. These organizations usually have the code on a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere. The most popular of these kinds of platforms are GitHub. You can look through the docs to learn how to get started.

These projects call for people from different skill levels to contribute. They are usually open issues to choose from that will fit your skill set. Even if you don't find any issues you feel comfortable with, research their projects to look for issues you feel need to be attended to and then ask to be assigned.

While working on the issues and getting assigned to more tasks, you are growing technically as well as contributing to a large codebase that will make you stand out in the eyes of recruiters. You can talk about your contributions during interviews or even include these open-source contributions in your Resume with outlines of the impact you made.

Since people from different skill levels are part of the open-source community of contributors, it is an opportunity for you to network and learn from more skilled people than yourself. You also get the chance to have your code reviewed as you contribute. These people will drop constructive feedback that will shape you as a better developer and contributor.

Who can contribute?

The answer is anyone. A basic understanding of the project is what is required. You can contribute through ideas or helping the community as a community manager and write technical content as a technical writer. If you can code even at the most basic level, then you are qualified to start making contributions.

How do I get started?

All you need is to go to the organizational repositories of these open-source organizations on GitHub and check out what project you will be interested in. Then go through their open issues and ask to be assigned.

I contribute to an organization called Layer5. It is an open-source organization that is building a service mesh. You can read more about service meshes in this elaborate article on Service Mesh Fundamentals.

I chose this community because of its uniqueness. If you are like me and like to be commended when you do a good job and to be treated like you are important, even if we are 1 million in the pool, then you should check out this community. I have to be completely honest, they are like family. They give room for anyone to grow from the ground up. You can join their slack workspace and check out their list of projects and the skills required to contribute to each here.

List of Open-Source Organizations to consider.

• Layer5: GitHub
• Thanos: GitHub
• Kubernetes: GitHub
• Karmada: GitHub

The list above is not exhaustive. There are open-source projects that I didn't mention above. You can see more organizations in the Google Summer of Code list of open-source organizations as well as the Linux Foundation Mentorship program.

For juniors looking for paid internships, there are open-source mentorship programs perfect for you. I already mentioned the Google Summer of Code and Linux Foundation Mentorship program..

I will write about how you can get into these programs in the future. For now, do your research, choose a project, and start building.

My advice for anyone just starting, the journey is a marathon, not a sprint. Therefore, take things easy, move at your own pace, don't stop building, and enjoy the process.

Feel free to add more open-source organizations or projects I missed above in the comments. Happy contributing.

While you may be tempted to write a single method that performs all the tasks you want, it is recommended that the best practices should be followed.

Disintegrate giant function into multiple functions so that each one performs a specific action. This simplification helps you write clean and readable code.

Method Chaining

This is a programming approach that helps you call methods on top of each other. This also helps you simplify your code.

With this strategy, you don't have to worry about writing one big function to perform a specific task. You can just write independent functions and chain them. Before we look at examples, let's look at what the this keyword is in JavaScript.

this keyword references the current object in which it is called. When the this keyword is returned in a method, it simply returns an instance of the parent object.

function a () {
   return this;
 }

// In a browser
a() === window // true

// In nodeJs
ab() === global // true

The function above returns true because of its current context which is the window object for the browser and global for nodeJs environments.

Let's look at the use strict mode which returns undefined if the value of this is not set before entering the function.

function a () {
  'use strict'; // see strict mode
   return this;
 }

ab() === undefined; // true

// In a browser
a() === window; // false

// In nodeJs
ab() === global; // false

We have looked at the this in the functional context, now let's understand how this behaves in the JavaScript class context.

The this keyword behaves similarly in classes and functions since classes are like functions under the hood in JavaScript but there are few differences.

Within classes, all properties of the class constructor are added to the this context.

More examples:

class ArithmeticClass {
  constructor() {
    this.value = 0;
  }

// get value
  get getValue() { 
    return this.value
   };

  sum(...args) {
    this.value = args.reduce((sum, current) => sum + current, 0);
    return this;
   }

  add(value) {
    this.value = this.value + value;
    return this;
   }
  subtract(value) {
    this.value = this.value - value;
    return this;
  }
  average(...args) {
    this.value = args.length? (this.sum(...args).value) / 
  args.length: undefined;
    return this;
  }
}


const ArithmeticClass1= new ArithmeticClass();
const firstArithmeticInstance = ArithmeticClass1
  .sum(1, 3, 6)   // => { value: 10 } 
  .subtract(3)   // => { value: 7 }
  .add(4)        // => { value: 11 }
  .getValue        // => 11 

console.log(firstArithmeticInstance) // => 11

This clearly shows you how each method in the ArithmeticClass returns the instance of the class which can be chained to any other method in the class.

While we can write a giant function that takes in a value/values, and the type of arithmetic operation we want to perform e.g. sum, and then probably use the if statement to perform any of the actions we want, Writing it the way we did above simplifies our code, makes it more readable and also, makes it more scalable in the future.

It is never a good feeling to be considered a failure by others. But the question is, are you a failure?

Before we answer this, I want you to understand what defines success.

Many people today compare their success with the success of others. But is that what succeeding is all about? Well, I think we all have different journeys and purposes in this life and should be focused on achieving that.

To get more into perspective, a person may consider owning a house as a measure of success, but that is just perception and not a characteristic of successful people. Don't get me wrong, owning a house is important, but it can only be counted as a criterion for success if it is an individual priority or meets one's personal goals. You can agree with me that Jeff Bezos doesn't count owning a house as success (He has tons).

According to so many sources on a simple Google search, Success is the state or condition of meeting a defined range of expectations. If this is true, then we should be looking deeper at what we call success.

In today's world where we have allowed society and peer pressure to influence some of our actions and decisions, it has become inherent in us to always try to live our lives as expected by others. This has done more damages to our dreams and the values we once held.

To be able to conquer this disease and go forward as independent self-thinking humans, we need to first decide what our goals are and map out a plan of how we want to pursue and achieve them. Else we would remain in the shackle of defining our values by what others think.

In this article, I will be showing you some proven habits you need to develop to help you filter the noise and go forward to succeed by the path you defined for yourself.

Who are you?

If a total stranger meets you on the road and asks you this question, can you answer it without really thinking too hard about it? The problem with so many people today is that they don't even think for themselves. They can't even define who they are, what their goals or purposes are, and why they are living. If you can't figure these things about yourself then, unfortunately, I'd say you are lost.

Allow me to take you on a story ride.

A man set out on a journey to another country to find a hidden treasure on a faraway island. To get to that island he must go across the sea with a small boat he had already built previously in preparation for that journey.

He had to paddle his way to the island. While on the journey, he lost his paddle, and not too long after, the sea tide came and began to move the boat in another direction. Because he has lost his paddle, he was no longer in charge of the direction the boat was going. He was lost forever and was rather taken to another island where wolves ate him.

If you can't define your purpose in life, you are like that man. You had good intentions from the start but allowed the noise around you to change your direction. You need to find your paddle and get back that power to decide your path.

You are different.

The only behavioral characteristics we share as humans are the fact we are higher animals. That is it! nothing more. You can agree with me that even identical twins don't behave the same. They don't talk the same and sure don't share the same fingerprint.

This shows that we were all born different from the beginning and should have different paths.

You need to realize this when defining your path. It is easy to be blown away by the tides of expectations if you lose your paddle. You need to stand firm on your decisions to be able to get to your desired destination.

Some journeys take time.

I understand that as humans, We are impatient beings by nature, and we all want quick results. But there is a phrase that says that "Patience is a virtue". It means you have to develop patience.

In your journey to success, there is no definite time of arrival. Some journeys take time more than others do. That doesn't mean that a journey is more important than the other. We just have different arrival periods and should be patient enough to get to our destination.

If you are not patient enough and decide to follow others on their journey, well you will arrive with them but only to find out that you have been on the wrong journey all this while.

Go all the way.

Have you found your path? have you decided to see it through? if your answer is Yes now this is where you need to be more cautious.

A lot of people start a journey but never get to their destination. The road is rough and bumpy and it is easy to have a rethink and decide to abort. But the journey of life is not for the weak.

You need to be aware that many challenges will make you want to discontinue your journey. You need to hold your paddle tight and never allow the tide to decide your direction. You need to go all the way to the end regardless of what others think. Getting to the end of your well-defined path. This is what I call success.

Conclusion

Your success shouldn't be defined by others. You should be in charge of your life and define what you call success. Getting the world is important but actualizing your dreams is more important. This will make you feel more fulfilled than riding in the best yacht or cruising in a Ferrari.

I will leave you with my favorite quote from the movie three idiots. "Pursue excellence, and success will follow"

We all can agree that all human beings living on earth today were once babies (except we have alien-human living among us. Who knows?😉).

As babies, we had to be catered for by other people. We couldn't do so many basic things ourselves. We didn't even know how useful our hands were and the wonders they can accomplish when put to work.

That means that there was a point in our lives when we knew next to nothing.

But no one remains a baby forever. As we grew, we started learning how to talk, eat, crawl, stand, run, etc. Thinking back, you can't tell how you were able to achieve these feats, considering how difficult and risky it was to learn how to do them. But you did learn them anyways.

Now that you are an adult, you do these things without even thinking about it. You can talk easily and faster too, run for 100m in 9.58 seconds (If you are Usain bolt😁), and jump so high that you may nearly touch the sky. What happened? how were you able to learn these things and master them? Well, the rest of the article will help you answer that.

Learning something new can be daunting at first, especially when you have no prior knowledge or background that you can build on. These have made people grow cold feet and give up on their journey to become a master in whatever they previously set out to learn.

But these kinds of scenarios are not new. To achieve any great feat in whatever you are doing, you have to face challenges to learn. These challenges are what you will later refer to as experiences when you finally conquer them.

Just like the baby example above, there were so many occasions when we fell on the ground while learning how to walk, bruised our knees while learning how to run, and even spoke so many gibberish things before we could say "Mummy" but we kept on trying regardless. In the end, we were able to conquer these little setbacks and grew into experienced adults.

In the same light, being a beginner in the tech space or any other space can have its setbacks. Understanding these setbacks and the way to conquer them is the only way you can move forward.

At the end of this article, you should be able to

1. Understand the problem
2. How to conquer the problem and move forward.

Understanding the problem.

• Unrealistic Expectations.
• Unhealthy Comparison.
• Impostor Syndrome.

Unrealistic Expectations.

When I first started learning JavaScript, I was told by a friend that in six months, I will have learned enough to land me a good job. While these can be true for others, it is not generic to everyone. We all learn differently at a different pace too.

Most beginners start their journey with a roadmap given to them by others. I am not saying that roadmaps are bad, but some of these roadmaps have average completion time expectations attached to them. These expectations sometimes affect the self-confidence of the learner when they are not able to learn what is needed to be learned in that duration.

Unhealthy Comparison

Most people usually compare their success rate with that of other people. While this is not a bad thing if it helps you work hard, it sometimes affects your progress and improvement.

As a beginner to programming, imagine comparing your progress with a full-stack developer who has been coding for five years. This can immediately shut your eyes from seeing the little progress you have made and might even throw you into a depressing state of mind, that you even begin to question your learning abilities.

Impostor Syndrome

This is one of the popular challenges every beginner or learner faces in their journey to mastery. I faced it and sometimes still do but what is it exactly?

According to Wikipedia, " Impostor syndrome is a psychological pattern in which an individual doubt their skills, talents, or accomplishments and has a persistent internalized fear of being exposed as a "fraud". Despite external evidence of their competence, those experiencing this phenomenon remain convinced that they are frauds and do not deserve all they have achieved".

This feeling can come when you are trying to accomplish a task you feel that you are supposed to already know and yet you can't figure it out yourself. Immediately, you start feeling incompetent. What this does is that it introduces self-doubt and therefore affects your progress in your learning journey.

How to conquer the problem and move forward.

We have already spent so much time listing out some of the main problems faced by beginners, now let us see a few points on how these problems can be conquered.

• Set your expectations.
• Be your competition.
• Be consistent.
• Believe in your abilities

Set your expectations.

As a beginner, instead of trying to live up to other people's expectations, it is healthy to have mapped out plans of the milestones you plan to achieve. This will serve as a personal guild for you in your journey. It will also help you check if you are progressing or not and if you need to improve your pace or otherwise.

So for me, when I started out learning JavaScript (Programming language), I had a list of what I wanted to achieve in a month. It wasn't much, but I tried as much as can to make it as flexible as I can. It helped me to focus on my learning. In the end, I was able to achieve my expectations. That boosted my confidence and helped me progress.

Be your competition.

Instead of comparing yourself with other people why not compare yourself to yourself. Ask yourself a daily question like, "What can I do today to be a better version of who I was yesterday in line with my goals"? If you can answer this question and do something to enact the change, you will learn and improve every day.

Be consistent.

If you have ever heard the phrase "Slow and steady wins the race", then you have already met consistency. This phrase simply translates to Consistent, effective effort leads to success.

Cultivating the habit of consistency will go a very long way to help you improve the skills you are learning. Consistency helps you measure success and progress easier.

while learning, instead of going ten hours in a day and then coming back after fours days for another round, why not break those hours in chunks daily. This will help your brain retain more as well as helps you make it a habit and stay consistent. Learning this way will make you more productive too.

Believe in your abilities

We oftentimes doubt ourselves more than other people doubt us. In your journey to mastery, it is normal for you to feel this way especially when you meet a challenge that seems unsolvable or very hard. But instead of having to entertain this feeling for so long and allowing it to affect your progress, I will advise that you always see such problems as an opportunity to learn more. This way, your interest will be spiked to solve that problem. This will also change how you view and tackle the problem.

Every problem you solve gives you an experience that will be needed in the future when you meet a similar problem. So instead of running away or allowing a problem to demotivate you, believe in your abilities and use that as a stepping stone to progress in your learning.

Conclusion

Gaining mastery in anything can be hard at first but always remember that no one became a master without practice, perseverance, and consistency. These three things are the keys to going forward as a beginner. So give yourself some pat on the back for every progress you make. Remember that as a baby you couldn't do a lot but now you can do so many things with ease. These things you learned took time and practice and so will everything we try to learn. So when you start feeling demotivated or having that impostor syndrome, don't forget that Everything is Learnable.

The year 2020 taught me a great deal and I grew so much in my personal development that when I look back, I can't help but wish there would be another 2020.

Now before you go off and criticize me, read this article to the end to better understand the awesome lessons 2020 taught me and how it shaped me technically and otherwise.

The pandemic opportunity.

In my home country Nigeria, the pandemic became very serious around the month of March and that was when the government declared a total lockdown of offices, shops, churches, schools amongst other places in the country that can draw a crowd.

To so many people it was a shutdown, a bad omen, a legit excuse to quit, blame the government for failing the people, and also a good reason to turn to fraud. It was easy to blame others and look for shortcuts to survive. In fact, no one would blame you for becoming a bad guy given the hardship in the country.

At that same time, I just finished my first internship with Dathappy (remote) as a junior machine learning engineer. I had so many gigs coming my way from friends but I couldn't take any. The problem was that those gigs were centered around web development and I knew next to nothing about web development at the time. Did I say I knew nothing about web development? well, I lied.

During my internship with Dathappy we ( me and my team) had to build a front-end for our machine learning model using the python framework Flask to abstracts away the technicalities for our clients during the beta testing. That was when I realized the importance of having a software engineering skill as a machine learning engineer especially if you are going to be working for start-ups.

So while others were looking for shortcuts, I was looking for a way to skill up and become a better developer. I understood that I might not have all the time to myself again once the pandemic blows over. In all the options available, I chose to grow my technical skills.

Understanding self

After my internship with Dathappy which ended around March, I knew the next thing on my radar was to learn front-end development. What I couldn't figure out was how I can achieve that while staying focused.

Being a self-taught developer I knew I could dedicate my time to learning the technologies involved and within a few months, I would be blazing hot as a web developer. Building beautiful websites and taking gigs. As easy as it was to think about the journey I was about to embark on, I knew right away that I wouldn't reach my destination without a push and so I started looking for a web development internship.

The Genesys Opportunity

In the year 2019, while I was still in my 2nd year as a mechanical engineering student, I applied to become a frontend intern at a company called Genesys. It wasn't surprising that I was rejected at my first trial.

Even though so many factors surrounded the rejection, one I can vividly point out was my unpreparedness and also some obligations I had as a university student. But I still didn't fail to try my luck.

Now with the total lockdown in place, I was presented with another opportunity to reapply as a remote frontend intern in the same company which later went on to become my one the best decision I have made so far.

I applied and after the rigorous interviews, I was accepted as an intern. It wasn't easy at all in grasping all the knowledge they tried to pass to us. It was even much harder because it was a remote role and therefore we had to learn a lot on our own. We built some pet projects on the go as we progressed. Some were fun while we had a lot of difficulties figuring out some. Well, no one said programming was easy.

In the space of four months down the line, I have already had hands-on experience with HTML, CSS, JAVASCRIPT, and even the frontend framework REACTJS. To top it off, I learned how to collaborate with team members. It was rather a blessing in disguise for me because if my school was in session, I wouldn't have had the time to fully participate as an intern.

Becoming a DSC Lead

Developer Student Clubs are university-based community groups for students interested in Google developer technologies. Students from all undergraduate or graduate programs with an interest in growing as a developer are welcome. By joining a DSC, students grow their knowledge in a peer-to-peer learning environment and build solutions for local businesses and their community.

Becoming the leader of a community like this was great prestige. I applied the previous year 2019 but was rejected. I felt like I had the world on my shoulders. But the difference this time was that instead of the world, It was the reputation of my school on my shoulders. I will be building a lot of people up to make them become better individuals and also to help them become job-ready after school.

At first, I couldn't figure the best way to go. I knew I wouldn't go far if I wanted to push the community alone all by myself. So I formed a core team who have been supporting me through the journey as a leader.

Summary.

I don't think I can put 366 days in just an article so let me quickly highlight some of my wins and losses that made my 2020.

• I got a Data Analyst Nanodegree from Udacity
• I completed My Machine Learning Internship and earn my first money as a programmer
• I started my web development journey as a frontend engineer
• Became a mentor in Google Africa Developer Scholarship
• I got rejected for a job at Grafana labs
• Missed out on Google Associate Cloud EngineerIng certification for the second time in a role
• I became the DSC lead after my first rejection
• I became an ingressive for good (I4G) lead
• I became a barter Ambassador

Note: Success and failure are measured by the goals you set for yourself so set new goals for yourself and try as much as you can to smash them.

In summary, it was an interesting year for me. Some days Ieft me depressed, some left me happy. But in all, I am thankful for the lessons I have learned and the awesome friends I made in 2020. We move again this year 2021. Happy new year!!!!

Then you need to read this article meticulously because this is definitely the game-changer you need to make you a better developer who writes clean and well structured readable code using functions.

At the end of this article, you should already understand

1. What is a function and how essential it is to programming
2. How to define a function using a variable and built-in function keyword
3. Types of function in JavaScript and what are the differences between them
4. Scoping and how they relate to function

What is a function and how essential is it to programming

The function is the holy grail of programming, the way it helps us abstract away lots of code and saves it in a value is simply amazing.

Let me use a real-life picture to give you a better understanding of what a function is before I go forward to give you a more in-depth explanation of a function programmatically.

Let us take our analogy using a car, imagine the car functions and how each function is abstracted away from the other and yet works simultaneously.

The driver doesn't have to worry about what happens when he matches the break, he knows within himself that measures have been put in place to ensure that the break does its job.

I can go on and start explaining what happens under the hood when a car break is matched, but that would be me flexing my muscles in mechanical engineering. Though by now I think you already got the gist.

Segregating our codes into functions gives us a way to structure our larger program into smaller chunks and make sure that the variables defined within remains local to the function and doesn't interfere with other parts of our programs.

Functions also help also avoid code repetition and flooding our namespace with so many variables.

How to define a function

You now understand what a function is and how useful it is to developers, so let us now look at ways we can define one.

one of the ways we can define our function is by declaring a variable where the value is written as a function.

let's look at an example

let square = function (x) {
  return x * x;
};
console.log(square(2));
// prints 4 to the console

Let me explain what happened in the code above. We declared a function and saved it in a variable name we defined as a square. What it means is that whatever the function returns will be the value saved in our square variable. Our function also takes in an input which is referred to as a function parameter and multiplies that input by itself.

In JavaScript, a function is declared starting with the function keyword. The function body must be wrapped in curly braces and that is where the main action happens. Functions can have multiple parameters or no parameter at all.

Let us look at another way we can define our function with another code example

function greet() {
  console.log("Hello, World");
}

greet();// prints Hello, World

If you understood the first example, this wouldn't be hard to comprehend either. What I did differently here is to start my function declaration with the JavaScript function keyword before its name.

The greet function has no parameter and a return keyword, which brings me to another point. In fact, it was one of the things I struggled with when I was learning JavaScript functions.

I always found myself asking how a return keyword differs from console.log in a function and since I don't want you to pass through the same vicious circle let me elaborate.

Return keyword returns a value that can be saved separately in a variable and used afterward while console.log just prints out stuff and can't hold a reusable value within the function.

Let us look at an example with our square function

let square = function (x) {
  return x * x;
};


let squareValue = square(2)
console.log(squareValue)

// prints out 4 to the console

function greet() {
  console.log("Hello, World");
}

let greetValue = greet();
console.log(greetValue);
// return undefined

I said earlier that functions can be declared with multiple parameters right so let us look at an example with an add function

function add(a, b) {
  return a + b;
}

add(2, 5);
// 7

If you declare a function with two-parameter and finally give it one, it will return the second parameter as undefined, alternative if you declare a function with one parameter and gives it more than one argument, it will use the first argument and ignore the rest

function add(a, b) {
  return a + b;
}

add(2, 5, 7, 7);// 7

Types of functions in JavaScript

Apparently, we have been looking at different types of ways we can write a function above and we have been using one type which is defining a function with the function keywords but let us look at another way we can achieve the same result without the function keyword.

Arrow function

Arrow function was recently introduced in ES6, honestly, I don't see any major advantage of one over the other except for the fact that it deals with this problem when working with JavaScript classes (Classes will be discussed in a future article) but since it's at our disposal, we should also know how it is defined in case we want to use it anytime.

const add = (a, b) => a + b;
add(1, 2);

//prints 3

First, we define our variable which will be the function name, and then the brackets that take in our parameters just like our normal function, and then the arrow before the return body. Don't confuse the arrow with the > sign which means greater than. One good reason I prefer to use this function is that when my argument is one, I can omit the brackets for the parameter and also I don't have to include the return keyword.

const addSelf = (a) => a + a;
addSelf(1);

//prints 2

IIFEs

Immediately invoked functions as they are known is just a convenient way for us to define anonymous functions on the go.

Let me elucidate so you can understand what I mean. There are times you don't want to reuse a function and instead of declaring a function and keeping it in the namespace, you can just declare it and use it on the go. IIFEs gets called after it is declared.

let's see some example

const person = (age) => {
  if (age < 21) {
    (function () {
      console.log("young");
    })();
  } else {
    (function () {
      console.log("old");
    })();
  }
  return age;
};

person(30);


// old
//30

Scoping and how they relate to functions

Now to be able to define useful functions that run without errors, you need to understand scoping and how they can affect the variables in your functions

They are two types of scoping in JavaScript and programming in general.

• Global scope
• Local Scope

All variables in the Global scope can be accessed in all parts of your program while those in your local scope can only be accessed in the scope in which they are defined.

let a = 10;

function scopeSample() {
  let b = 20;
  console.log(a);
}

console.log(b);
scopeSample();

// b not visble in the global scope
// 10

but when there is the same variable name in a different scope, the code will take the one in its innermost scope

let a = 10;

function scopeSample() {
  let b = 20;
  let a = 5;
  console.log(a);
}

console.log(b);
scopeSample();
console.log(a);

// b not visble in the global scope
// 5
//10

Conclusion

By now you should understand what a function means, how useful they are, the different ways you can define them, and how you can prevent running into errors by scoping your variables the right way.

I can tell you that if you understood everything above, then you are on your way to becoming a better JavaScript developer and I am glad to be one of your guides through this journey.

Please I will appreciate your feedback and also topics you would like to write about. Also, share this article if you found it useful. See you soon.

If you are a beginner and you don't understand what a data structure is and the types then click here to get a quick intro to JavaScript data structure and types.

Now, this article is not focused on all the data structures and types that can be found in JavaScript. We will be looking at the array data structure and some of its most useful methods for manipulating it.

At the end of this article, you should already understand

1. What a JavaScript array is
2. When to use an array
3. JavaScript array methods
4. How to manipulate an array using these methods

What is an Array

If you have ever written a manual list of items (this could be a to-do list or a list of stuff you need to get in the shopping mall) before, then understanding what an array is should be easy for you.

An array is a list-like object with so many methods to perform traversal and mutation. Did you get it? haha, I don't think you did so let's make it easy.

Remember that above I described an array as your manual shopping list and it is inevitably logical that we should be able to take out or cancel what we don't want from our list and also be able to add more things to the list right? we can even remove our first item and replace it with another item if we intend to make our list sequential right.

Let us look at some examples to get the idea straight.

How to make a coffee

1. pour hot water inside a cup
2. pour coffee inside the water
3. Stir for 3 second
4. coffee is ready for consumption

This is an example of how we write our manual list and we can decide we no longer want to stir our coffee and remove it or alternatively we may also decide we want to add milk to our coffee and therefore we go ahead and include it in our list.

This is all made possible because we have a means of mutating or traversing our list. Now in JavaScript arrays, this superpower we have on our list is called a method and we have lots of them in JavaScript.

Before we look at the method available for us to use, let us understand when we need to use an array first.

When to use an Array

If you understood what an array is with our list example above, then understanding when to use one will be like understanding how to boil water on a gas cooker.

Working with unstructured data can be difficult. You will agree with me that knowing the best way possible to structure it and refer to it anytime you need it will go along way to help you as a developer and also help you work faster and be more productive.

Now let's say you want to store the names of five students in a class, we can approach it in two ways. One will make our code more readable and hasten our job while the second might make us lose our job sooner.

// Names of the five students in a class

let student1 = 'Jon'
let student2 = 'Kay'
let student3 = 'June'
let student4 = 'Cally'
let student5 = 'Amaka'

console.log(student1)
// prints Jon to the console

Now from the example above, let us say we want to print out all the names of the five students or probably mutate it. That would be one hell of a job and that will probably make you the worst developer to ever walk the earth.

Just to get the sense of what I mean look at the image below

// Names of the five students in a class

let student1 = 'Jon'
let student2 = 'Kay'
let student3 = 'June'
let student4 = 'Cally'
let student5 = 'Amaka'

console.log(student1)
console.log(student2)
console.log(student3)
console.log(student4)
console.log(student5)
// prints Jon, Kay, June, Cally, Amaka to the console

Now let us consider the second way which is the better way to store this kind of stuff

let students = ['Jon','Kay','Cally','Amaka']
console.log(students)
// prints Jon, Kay, June, Cally, Amaka to the console

Just with two lines of code and we achieved the same result effectively. Now, this is one of the use cases where you consider using arrays.

Remember that above, I spoke of some superpowers given to us by JavaScript to do somethings to our arrays right? These superpowers are referred to as array methods.

JavaScript array methods

A method is simply a function that is a property of an object. in other words, methods allow us to get some information from objects. In our context arrays.

Just as we can easily tell the length of our manual list and also remove and add items to the list, we can also use array methods such as length (also be referred to as property), push and slice to perform similar operations on our array.

There are so many array methods to consider but since we won't be covering them in this post, you might as well get acquainted with them here

For this post, we will be considering ways we can do something to each item in our array separately using For Loop as well as some of the most popular methods introduced in ES6 such as Map and filter

How to Manipulate Arrays with these methods

When I started writing JavaScript, I was first introduced to For Loops as a way to iterate over things and I used this extensively on anything I wanted to iterate over, be it a string or an array, for me it was like the holy grail. But I later found a better and cleaner way to do some things without my almighty For Loop.

Let us look at a use case of using For Loop to add '!' to each name in our student array.

Let studentNames = ['Jon', 'Kay','Amaka','Ebuka','King']
for(let i =0; i<studentNames.length; i++){
        studentNames[i] =+'!'
}
 console.log(studentNames)
// ['Jon!', 'Kay!','Amaka!','Ebuka!','King!']

This looks pretty easy and straight forward. All we did was initialized a count

let i = 0

we incremented i

till it was the same length as our array, and for each increase in the value of i we used array indexing and added ! to each element in our array but we can all agree that you need to remember a lot of steps and if we encounter the case of nested arrays in our array, then things can get a little bit complicated easily.

Let us look at another way can manipulate our data using the same example with another array method using our usual for loop

let studentNames = ['Jon','Kay','Amaka','Ebere','Ebuka', 'king']

let newStudent = []
for (name of studentNames){

    newStudent.push(name + '!')
}

console.log(newStudent)
// [ 'Jon!', 'Kay!', 'Amaka!', 'Ebere!', 'Ebuka!', 'king!' ]

This is easier to understand than our first example. We started by initializing a variable newStudent that is an empty array and afterward iterated over our array, and for each item, in our array, we added ! to it and finally used an array method push to add it to our newly created array.

When I started working with array I asked my friend who was a more experienced dev at the time if there was a way I could also keep track of the index of an item in an array while iterating over it and he replied in affirmation. Let us look at it with an example for better clarification.

let studentNames = ['Jon','Kay','Amaka','Ebere','Ebuka', 'king']

newStudent = []
for (name in studentNames){
    console.log(name, studentNames[name])
    newStudent.push(studentNames[name] +'!')
}
console.log(newStudent)

//
'0' 'Jon'
'1' 'Kay'
'2' 'Amaka'
'3' 'Ebere'
'4' 'Ebuka'
'5' 'king'

[ 'Jon!', 'Kay!', 'Amaka!', 'Ebere!', 'Ebuka!', 'king!' ]
//

this is also a clear example and another you can iterate over an array while keeping track of the index. with this method, you can also traverse as well as mutate items in your array.

Before we look at the new way developers do it these days, let us look at one more method we could play with our array with a method known as forEach.

let also see some code samples

newStudent = []
studentNames.forEach(name => {
    newStudent.push(name+'!')
})

console.log(newStudent)

// [ 'Jon!', 'Kay!', 'Amaka!', 'Ebere!', 'Ebuka!', 'king!' ]

forEach method is a very popular way to mutate or traverse over an array. This method takes in a callback function with a parameter that represents a single item in the array and then does something to that item.

It also comes with an additional parameter called index that helps you keep track of the index of your item while iterating over the array

newStudent = []
studentNames.forEach((name ,index ) => {
    newStudent.push(`index: ${index} name: ${name + '!'}`)
})

console.log(newStudent)

// [
  'index: 0 name: Jon!',
  'index: 1 name: Kay!',
  'index: 2 name: Amaka!',
  'index: 3 name: Ebere!',
  'index: 4 name: Ebuka!',
  'index: 5 name: king!'
]

I know you have come a long way getting to this last part of the article and you have taken in a whole lot that needs to be digested. Well, you should pat yourself on the back for getting this far.

Now let us look at the most useful of them. I personally use this method amongst others each time I plan to do something to each item in an array. With your understanding of other array methods, you will see this as a savior and an answer to all your array problems.

So if you are as impatient as me and want to dive right in with me, then let's do it. Yay!!

The array method Map is a holy grail and performs more optimal than the array methods we have seen so far. let us look at an example with the same data

let studentNames = ['Jon','Kay','Amaka','Ebere','Ebuka', 'king']
newStudent = studentNames.map(studentName =>studentName + '!)

console.log(newStudent)

// ['Jon!','Kay!','Amaka!','Ebere!','Ebuka!', 'king!']

Looking at the above code you can agree with me that this second code is more readable and easy to write than the first.

What we did with the code above is we mapped over the array and for each item, in the array, we did something, which is adding ! to the end of each item. We can achieve more with this method but for the purpose of this post, we will use only the example above.

The map method also comes with an index parameter built-in just like we saw in our forEach method example.

The unique advantage of using the Map method is that unlike the other examples that are hardcoded, the map returns a new array which can be saved separated in another variable as you can see in the code snippet above, thanks to ES6 new syntaxes.

From the beginning of this article, we have been talking about how we can change our array or traverse over it.

What if there was a way we can conditionally return some part of our array instead of returning all of them or doing something to some of the items that passed specific conditions only, it will be great right?

Let's say we want to only add ! to the student names that only includes the letter K how can we achieve this? we could start by using one of our array methods and only add ! to an item that contains k and that will work for sure. But how efficient and optimal is that. I can tell you for a fact that for a small program it will run very fast, but as your program gets larger, the runtime increases.

Well, there is a built-in array method that can perform this task for us optimally and also abstracts away a lot of complexities.

Introducing to you the almighty filter method the holy sibling to the map method . Haha! that's just me being playful again

let us look at some example by solving the task above

let studentNames = ['Jon','Kay','Amaka','Ebere','Ebuka', 'king']
filteredStudent = studentNames.filter(studentName => studentName.toLowerCase().includes('k')).map(studentName => studentName + '!')

console.log(filteredStudent)

// [ 'Kay!', 'Amaka!', 'Ebuka!', 'king!' ]

Wow, I am always amazed by the wonders these two methods can do. We simply filtered our array with the filter method and returned only the items in our array that has the letter k and then mapped over each item with the map method and added ! to each.

You should note that this example above are just a mere introduction to these methods because they can really be used to achieve a lot more than what I have just shown above. Some of them can be used as a Higher other function (HOC), but we will discuss that in another article after this one.

Conclusion:

Now that you understand what an array is, how it is used, and how it can be manipulated and mutated, working with arrays will become easier for you.

You shouldn't stop here though, make more research, Google as much as you can and soon you will become a better JavaScript developer who writes clean and readable code. See you again soon