JavaScript 101: Ultimate JavaScript Guide for Basics

Examining Basic JavaScript As One Starts their Learning Journey

7 min readMar 4, 2023

JavaScript Overview

In a world of numerous programming languages and the need to remain relevant, one cannot escape coming across JavaScript. On December 4, 1995, while working at Netscape, Brendan Eich was attributed as the primary contributor towards JavaScript development.

With an initial start, JavaScript has become a well-known scripting language with significant impacts due to its wider adoption and increasing application span.

Likewise, the success of JavaScript has not been a one-person endeavor, as hundreds of people have been pivotal in supporting and contributing towards its development and growth, especially by routinely contributing to The ECMAScript standard.

ECMAScript Standards and Good Practices

JavaScript is a general-purpose scripting language. Nonetheless, its success is highly linked to aligning and conforming to ECMAScript specifications.

By explanation, ECMAScript specification forms the epitome and blueprints for scripting language creation, of which JavaScript is a scripting language and is an actual implementation of this blueprint (ECMAScript).

Part 1: Comments in JavaScript

There are two ways one can add comments to their JavaScript code. Notably, a critical aspect of words is that a,s a programmer, they are essential in making one’s JavaScript code more accessible for others to read and understand. Compared to other code, comments are ignored by JavaScript engines.

Single Line Comments// This is a single commentMulti-line Comments
/* 
This is a multline comment and as shown in this section,
it extends into two lines
*/

Writing comments in one’s code helps allow an easier personal understanding of the code in the future in case there is any need for change.

Similarly, this practice is essential in ensuring other software developers or colleagues understand the code during future interactions. Also, with the potential of others continuing with past projects, comments will be beneficial in case one has left their organization or clients work with different developers.

Generally, it is pivotal to use comments to explain the “why” something was done instead of “how” something was done. The code should explain “how” one reads or interacts with it.

Part 2: Naming Variables [with good practice]

Variables, by definition, form containers used for storing values. Hence, to allow proper understanding, readability, and alignment with ECMAScript standards, applying good practices while naming variables in JavaScript is essential.

Remember:
According to the JavaScript language specification, variable names in JavaScript can only start with a letter, underscore (_), or dollar sign ($). They cannot start with a number or any other character, including an asterisk.

As good practice, always consider the following:

No spaces between variable names

Student Name = 'Kingsley';       // Wrong
StudentName = 'Kingsley';        // Right

Begin variable names with a letter, an underscore (_), or a dollar sign ($)

grade
_grade
$grade

Names of variables can only have letters, numbers, underscores, or dollar signs

This are wrong:
      cost.of.gas = 34;
      age-of-parent = 42;
      *interestRate = 5;
      25YearChild = 25;

Careful naming since JavaScript variable names are case-sensitive

Below, Name and name are two different variables
Name = 'Mike Owen';
name = 'Mike Owen';Below, price, Price and PRICE are three different variables
let price = 457;
let Price = 457;
let PRICE = 457;

Avoid Using Keywords or Reserved words in Naming Variables

Certain names/words have other specific meanings in JavaScript, which are vital for the JavaScript scripting language.

These are:

await, break,
   case, catch, class, const, continue,
     debugger, default, delete, do,
       else, enum, export, extends,
         false, finally, for, function,
           if, implements, import, in, instanceof, interface,
             let,
                new, null,
              package, private, protected, public,
            return,
         super, switch, static,
      this, throw, try, true, typeof,
    var, void,
  while, with,
yield

Part 3: Declaring Variables

JavaScript is a dynamically typed language and hence does not require explicit variable declarations before their use.

Nonetheless, it is essential to understand variable declaration and adopt proper practice while writing programs.

One can declare variables using var, let, and const keywords. var examples:

var Age = 22;
var Major = 'Software Development';
var FinalGrade = 'A';
var isMale = false;

Let keyword is used when one envisions variable values changing. Examples:

let MilesPerHour = 120;
let CostOfHouse = 26500;
let GasPrice = 63
let annualIncome = 4500000

Const is used to name variables that will not change in the program, e.g.,

const gasTaxRate = 0.12;
const motherName = 'Elizabeth Holmes';
const Gender = 'M';
const birthWeek = 18;

Part 4: Naming Ideas — camelCase, PascalCase, and Descriptive

To improve one’s program readability, valuable ideas can be used during the variable naming process, including descriptive names, PascalCase, and camelCase.

The below summary shows the application of these features, some of which have already been shown in the above section.

a. Descriptive Naming: It is helpful to ensure that variables are given names describing the information they represent when writing JavaScript programs. By looking at the variable’s name, one should be able to know what it stands for concisely.

To declare age, income and year of experience, below examples can help one easily understand
Age:
        let A = 65;
        let Age = 65;                   // Good
Income
        var I = 2550000;
        var Income = 2550000;          // Good
Years of Experience
        var y = 4;
        var YearsOfExperience = 4;     // Good

From above, although both x and Age represent one's age, using "Ag," “Income,” and “YearsOfExperience” in the variable name makes it easier to understand.

b. camelCase and PascalCase: In camelCase, there is writing phrases without spaces or punctuation, separating words using single capitalized letters, and the first word starting with either case. Examples:

var welcomeMessage = 'Welcome to our university';
var annualIncome = 5400000;
var daysExercising = 12;
var siblingCount = 8

PascalCase also demands that those variables coming from compound words have the first letter of each appended word written with an uppercase letter. Compared to camelCase, in PascalCase, it is a requirement for the first letter to be uppercase as well. The below example shows this;

var ParentAge = 66;
var AnnualIncome = 5400000;
var ExperienceYears = 12;

Part 5: JavaScript Functions

There are several ways to create functions in JavaScript. First, let us understand what a function is:

A function in JavaScript is similar to a procedure — a set of statements that performs a task or calculates a value. But for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and output. To use a function, you must define it somewhere in the scope from which you wish to call it. [Source: LuxAcademy]

When writing JavaScript programs, using functions is essential and holds various benefits.

Generally, program readability is improved by using functions
By using functions, one can be able to reuse code, i.e., the same function can be used in different sections of the program
Programs become easier to run and fast since each code block in the form of functions can be run immediately since specific tasks are divided into functions.

In JavaScript, the ‘function’ keyword [can be] is used to declare a function, i.e.;

function functionName () {
   // body
}

However, for the function to do the intended task, it needs to be “call”ed, as illustrated below:

function welcomeMessage () {
   console.log("Good Morning world");
}welcomeMessage();                        // Function calling// Good Moring world

Let us Discuss Specific Ways of Creating functions in JavaScript

There are several ways to create functions in JavaScript:

Function Declaration:

This is the most common way to define a function in JavaScript. It involves using the function keyword followed by the function name and the function body enclosed in curly braces.

This is what is done above.

function annualCall(dayOfWeek) {
  console.log('All remote workers must be present on ' + dayOfWeek + '!');
}

2. Function Expression:

This involves defining a function as a variable or a constant. It can be named or anonymous.

const annualIncom = function(monthlyIncome) {
  return monthlyIncome * 12;
};

3. Arrow Function Expression:

This is a shorter syntax for defining functions introduced in ES6. It uses the => operator instead of the function keyword and has a more concise syntax.

const annualIncome = (monthlyIncome, months) => monthlyIncome * months;

Another Example:

Suppose we have an array of numbers and want to filter out all the even numbers and then map the resulting array to their squares. We can use an arrow function to achieve this as follows:

const numbers = [1, 2, 3, 4, 5, 6];

const result = numbers
  .filter((number) => number % 2 === 0) // filter out even numbers
  .map((number) => number * number); // map to squares

console.log(result); // [4, 16, 36]

In this example, we define two arrow functions to filter out even numbers and map the resulting array to their squares. The first arrow function takes a number as a parameter and returns a Boolean value indicating whether the number is even or not. The second arrow function takes a number as a parameter and returns its square.

Using arrow functions in this way can make the code more concise and readable, as we do not need to define separate functions or use the function keyword.

4. Function Constructor:

This is another way to create functions in JavaScript using the Function constructor. However, it is less commonly used and can be less efficient than other methods.

const sumItems = new Function('a', 'b', 'return a + b');
console.log(sumItems(1, 2));

// 3

console.log(sumItems(21, 22));

// 43

Remember, these are some of the ways to create functions in JavaScript. However, each method has advantages and disadvantages; the choice of which to use depends on the specific use case and personal preference.

Final Thoughts

Success in the field of programming is pegged on multiple factors. Of these, understanding the fundamental aspects of crucial language is essential. Developed in 1995, with Brendan Eich as one of the key players, JavaScript has become an epitome, with its dozens of application areas.

And just like other global areas that have seen tremendous shifts and change over time, JavaScript has experienced its changes.

As the world evolves, JavaScript continues to transform many areas and has also been essential in modern technologies; growth in Front and Back-en has been vital in developing and supporting the development of Blockchain applications.