Stellar Code

Full-stack Web Development with JavaScript (MERN stack)

JavaScript First Principles: #1. Basic concepts

General

Elon Musk to you: Keep calm and learn JavaScript from first principles (heavily paraphrased).

 

This series span across primary JavaScript up until a deep intermediate level. Series will go on simultaneously alongside MERN-stack related topics. ‘Categories’ will be helpful in filtering out desired content.

Three basic concepts vital to understand this post are:

 

1. Variables

These are symbols that can take on any values. In other words, they can be assigned any value, at any point. Think of a variable as a box, its value will be whatever you put into it. E.g

var phone;

will define phone as a variable. In assigning values, this two are eventually the same:

var phone = "nokia"

and

var phone;
phone = "nokia"

 

2. Data types

The data types in JS are string, numbers, Boolean, objects and arrays. Unlike other languages, we don’t have to specify what data type we are using when we want to use it…we just use it. Allow me:

  • String refers to text. They are surrounded with single or double straight quotes. e.g
    'man' or "man"

    JavaScript tip: never use double quotes inside double quotes or single inside single.

 

  • Numbers are numeric. Its obvious, I know. They could be 1, 2, 3 etc. Unlike strings, numbers are not surrounded with double-quotes when assigned to a variable. e.g
    var age = 23;

 

  • Boolean data have a value of either true or false, there is no in-between. Its important in programming especially when you need to check the condition of things. If something exists, its true …if it doesn’t, its false.

 

  • Objects: In JS, objects are a collection of items in name: value pairs. Interestingly, the value of a name could be a collection of other name value pairs. Objects could be identified by their curly brackets and their items are separated by commas.
    var studentObject = {
        name: "Arya Stark",
        age: 28,    
        usernames: {
            facebook: "Arya Stark",
            twitter: "@arya",
            instagram: "@queen_arya"
        }
    }

    To access a value in the object, writing studentObject.name in a JavaScript interpreter will return “Arya Stark”. (P.S I’ve never watched a full episode of Game of thrones.)

 

  • Arrays: These are a collection items in an indexed order. Unlike objects, the position or order of each item matters, and they are identified with square brackets. E.g
    var pets = ["dog", "cat", "horse", "sheep", "lion", "dinosaur"]

    To access a value in the array, writing pets[0] will return “dog” because array items’ index count from zero. The index count of this array is 0,1,2,3,4,5. So therefore, pets[4] will return “lion”. 🦁

 

3. Operators

There are five types of this: Assignment, Arithmetic, String, comparison and logical operators. They are not as complex as they sound. Allow me again:

  • Assignment operators: they assign a value to something. Usually with an equals-to symbol.
    e.g

    var color = "crimson"

    now makes the value of color to be crimson.

  • Aithmetic operators: sort of only perform math operations.
    e.g

    area = 3 * 2;

    area is now 6. There are several other arithmetic operators such as addition(+), subtraction(-), division (/), multiplication (*), increment (++), decrement (–) and modulus (%). Use google.

  • String operators: a common use of this is for concatenation. This simply means joining two or more strings. So, if I want to say “Hi Leah”, I couls use
    "Hi " + "Leah"

    (Notice the space in “Hi “).

  • Comparison operators: these operators returns a value of true or false. If JavaScript evaluates:
    buy = 3 > 5;

    (Notice the space in “Hi “).

  • Logical operators: these operators combine expressions and return true or false. E.g
    buy= (5 > 3) && (2 < 4);

    returns true.

 

Ok bye 👋 .


Also published on Medium.


Emmanuel Yusufu

Web Developer. Learning enthusiast.