The Basic Foundation of JavaScript Part 4: (Var, Objects, Arrays, Loop and Functions)

In this last chapter, i will be talking about the core principal engine of the JavaScript Language.

However if it’s your first time here, it’s important that you go through the other three basic series where I covered Scope, Primitive Data Types and Operators.

In this last series i will cover Variables, Expression and Statements, Objects, Loop, Arrays and Function.

Variables

Variables are like box of containers, We have at one point been in a position where we ordered a package online, and there was a process to how we do successfully make our order. And get it delivered to us. In other for our goods not to be mismatched, it had to be assigned our name and address, as well as any other information relating to us. These is as a result of ensuring all we ordered for is well packaged in one box. In other for it to get to us safely without been damaged. That is how Variables work, you have to assign it a value for it to be stored and then called.

Variable is described as a place in memory where data is been stored. A variable is described as a storage box where we can put something of value.These values are stored in a computer memory. Var can be declared using var, let and const. Its important that when a variable is declared, it must be assigned a value in other for it to be logged to the console. A variable should always reflect the meaning of its content like labels on boxes. The example which was illustrated above shows a package which is been delivered, however the package has to have a description on it, so the buyer knows its exactly what he ordered for.

There are three basic principle you have to consider when declaring variable.

i) Always ensure to use descriptive names, its name which identifies it. A variable name may contain upper and lower case letters. A variable cannot begin with numbers such as $ or underscore(_).

ii) It must be assigned a value.

iii) Always spell it out, so it communicates to whoever will view your code, what it is about.

Try this in your text editor.

Sometimes in our programs, there are some piece of data which cannot be modified at any point while the code is running. For example a company’s name, a user’s date of birth, or number of hours in a day. To help ensure that we don’t reassign new values in our code to these pieces of data. We make use of const. Why? because const cannot be reassigned a value.

Try it in your text editor.

However, let can always be used to reassigned a new value.

Conditionals

Conditionals can be related to our everyday life. We are always cut up in a position where we have to make a decision, and any decision made is expected to produce a required result. Thats how conditionals work in our programs. it is expected to do something for us, else do something else.

Condition is an expression that evaluates whether something is true or false. When a value of a condition is true we say that the condition declared has been satisfied. In JavaScript, you can represent this secondary check by using an extra if statement called an else if statement.

Try out this code in your text editor to see the result.

However we can also make use of switch statements, in place of If else, its often regarded as the short version. Instead of having to write multiple If else statements. Switch conditions perform the same way as If statement, only difference its written in a much different way. Here is an example below.

Loops

In computer programming a loop is a sequence of instructions that is repeated until a certain condition is reached. Loops is a very essential part of any programming language. A value has to be initialized and then tested, if the value is true it keeps running still its no longer true. Thats how loops work. There are several ways of initializing a loop. But the commonly used is For loop and While loop.

i) For Loop : For loop is the most commonly used , given that its helps to prevents for an infinite loop. A For loop repeats until a specified condition evaluates to false. For loop includes three parts: Initialization, Conditions and Iteration(Increment).

ii) While loop : A While loop is a control flow statement that allows code to be executed repeatedly based on a given Boolean condition.

Try this out in your text editor.

Functions

A function is a piece of program wrapped in a value such values can be applied in order to run the wrapped program. A function is created with an expression that starts with the keyword function. Functions have multiple parameters or no parameters at all. For example, examine the way washing machine works, if you put in one cloth it will only wash that one cloth, but washing machine is structured in a way to take in multiple clothes. So instead of just putting one cloth at a time, rather you input as much as the washing machine can take.

Thats how functions work, they are a usable piece of programs- we can use them anytime we need them in our code. However to get your function to do something for you, you have to invoke or call the function, followed by parentheses with any argument passed into the function.

If you followed through the first series, i talked about Scope-Because that’s the basics in which function is defined. Function is defined in two ways: Local and Global scope. Local scope defined inside of a function, and not accessible outside that function. Global scope, var is accessible anywhere in our code. (Kindly check out my first series on Scope)- Its explains better on Global and Local scope.

There are two ways of declaring a function:

i) Function Expression

You have seen how we create variables to store a value? You can do the same for functions as well. Well, in JavaScript, you can also store functions in variables. When a function is stored inside a variable it’s called a function expression.

Try this example in your text editor

ii) Function Declaration

The function declaration defines a function with the specified parameters. The parameter is listed as a variable after the function name, inside the parentheses. And, if there were multiple parameters, you can just separate them with commas.

Function Declaration

A parameter is always going to be a variable name and appears in the function declaration. On the other hand, an argument is always going to be a value e.g JavaScript primitive data types (Boolean, strings, numbers etc).

Try it on your text editor.

Arrays

Arrays are a powerful and comprehensive tool of JavaScript. Arrays allows us to store multiple values in one variable. Now imagine you want to store multiple data in a variable, such as the number of books you want to read, 100 books before year? The case will be that, you do keep writing and declaring variables until you get to 100. How stressful will these be, right? An array is a data type specifically for storing sequences of values. You can store as much as 1000 values in an array. Thats how powerful arrays are, a very useful tool for storing data. lets declare our first array!

There are several things we can do with our colors arrays illustrated above. We can get a particular value from an array using the index method, loop through each value in an array, modify the value(that is change a particular value)in an array and get the length of an array. Its important to note arrays are zero based- (all numbers starts from 0-upwards).

Remember, we can modify our arrays- but how do you do this? Arrays has some built in functions that enable us to change or add some new values to our program. The two most common methods for modifying an array are push() and pop().

Push

Push methods adds element to the end of an array. For example the color array declared above. Imagine there was a change, we had to add a new color to the array. How do we go about it? You don’t have to start declaring a new array. All you have to use is the push method.

pop

pop() removes element from the end of an array.

Another important point to note is, we can loop through arrays. Given that you want to be able to access and manipulate each element in the array without writing repetitive code for each element.

Array is a good way of storing sequence of data in programs, it ensure for a more organised code.

Objects

Lastly i’m going to be talking about Objects, Objects is a very important aspect of JavaScript. An object holds multiple values of properties, and a property is in relation between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method.

Writing Objects helps us save a collection of data in a data base. For instance, imagine we want to create a user interface account which will have a name, email, age, address etc. Do you think declaring a variable will be a good idea? I don’t think that’s a good idea. Reason been, you will find your self declaring different variables; while you can just create and object that stores all the data in one variable and keep track of the data using a key.

There are some important things you need to remember when you’re structuring an object:

  • The “key” (representing a property or method name) and its “value” are separated from each other by a colon
  • The key: value pairs are separated from each other by commas
  • The entire object is wrapped inside curly braces { }.

You can as well get a particular element from an object using the dot notation

There is still a lot to learn about Objects, kindly visit MDN documentation to get more information.

I hope this article was able to give you basic understanding to JavaScript!

Just in case you missed out on the first three article i wrote on Basic foundation of JavaScript, kindly check them out!

Thank you for reading!

--

--

--

Sharing my Interaction Design and writing story, one post at a time.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Demystifying JavaScript Scope

Leveling Up Your JavaScript (Part 1) — ES6 Edition

Handling Errors in JavaScript

Webpack For Dummies

Remove extra whitespace caused by line break within a button

How to Create Editable DataGrids in a React Redux Application

Easiest Way to Host Your React App (Azure + VS code)

[Part-1] 10 things to ‘really’ understand to become an effective JavaScript developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victoria Agbamoro

Victoria Agbamoro

Sharing my Interaction Design and writing story, one post at a time.

More from Medium

Basics of JavaScript and Version Controlling

Logical Assignment Operators in JavaScript

Javascript OOP with DOM

JavaScript Strings

This a code snippet that shows how you can check the length of a string in Javascript: