DEV Community

Cover image for The Fundamental Concept For JavaScript Beginners
Binamin
Binamin

Posted on

The Fundamental Concept For JavaScript Beginners

JavaScript is a programming language used for Web development. It is used alongside HTML And CSS.
Now if you have already learnt HTML and css, you would not have hard time learning JavaScript.
JavaScript is very important and if you are here, it means you really want to learn.
Before we start the content itself, it is good to know what you would be up against.
These are JavaScript Road map.

  1. Introduction to Basics. This include Variables, data types, basic operator
  2. Function and control structure : grasp the concept of function, how they work and their importance, learn about if else statements for decision making and explore loops for repeative task.
  3. DOM Manipulation: understand how JavaScript interact with document object model, learn how select, modify and create HTML, explore event handling and attaching event listener.
  4. Asynchronous JavaScript : Dive into asynchronous programing and event loop and learn about callbacks, their role in managing asynchronous operation
  5. ES6 + Features: study modern JavaScript features like arrow functions, templetes iterates and deconstructing, explore let and cons for variable Declaration and block scope.
  6. Build Projects : apply your knowledge by building simple project and build project like to do list and calculator.
  7. Debugging And Troubleshooting
  8. Libraries and Framework
    9.Read World Applications

    Introduction To Basics

These basics are like data type, variables, basic operation etc.

     **VARIABLES**

in programming, a variable is a container for a value. You can think of variable as a little container for information that lives in a computer memory Information stored in variables such as username, account number or even personalised greetings. 
Enter fullscreen mode Exit fullscreen mode

Variables also provide a way of labelling data with a description name. It is important to note that variables are are not values but they contain values and represent them.
Variables include
1. let
2. var
3. const

1. **Var** 
Enter fullscreen mode Exit fullscreen mode

Before 2015,programmers use to declare only var. It is used in the pre ES-6 version of JavaScript.
You can declare variables using "var"
Example

var myName = "Binamin";
console.log(myName);

//output: Binamin.

In these examples, var short for variable is a JavaScript keyword that create or declare a new variable. MyName is the variable name. Capitilising in this way is the is a standard convention in JavaScript called CAMEL CASING. In camel casing, you group word into one, the first word is lowercase then every other word that follows will have it is first letter uppercase.
=is the assignment operator.
"Binamin" is the value assigned to variable myName
After variable is declared, the string value "Binamin" is printed out to the console.
Rules For Naming Variables

  • variable name cannot start with a number

  • variable name is case sensitive so myName and myname would be a different value

  2. **Let Variable **
Enter fullscreen mode Exit fullscreen mode

Let is the preferred way to declare a variable when it can be re assigned.

Examples 

let food = "chips";
console.log(food);
Enter fullscreen mode Exit fullscreen mode

//output:chips
From this example, we have declared a variable called "Food" using keyword "let" and assign the value "chips" then we log the value of food to the console. It will output "chips"
Another concept we should aware when using let and var is that we can declare a variable without assigning the variable a value.in such case, variable will be automatically initialize with value of undefined.
Examples

let price;
console.log(price);
Enter fullscreen mode Exit fullscreen mode

//output: undefined

 price = 350;
 console.log(price);
Enter fullscreen mode Exit fullscreen mode

//output: 350

 3. **Const Variable**
Enter fullscreen mode Exit fullscreen mode

Just like var and and let, you can store any value in a const variable. The way you declare a const variable and assign a value to it follow the same structure as let and var

  const myName = "Binka";
  console.log(myName);
Enter fullscreen mode Exit fullscreen mode

//output: Binka

However, a const variable cannot be reassigned because it is constant. If you try to reassign, you get type error.
Const variable must be assigned a value when declared. If you try to declare a const variable without value, you will get syntax error.

    **DATA TYPES**
Enter fullscreen mode Exit fullscreen mode

Data types defines the type of values that can be used in your code.
There are several data types in JavaScript which are categorized into two two main group.
Primitive Data type
Reference Data type

**Primitive Data Type **
Enter fullscreen mode Exit fullscreen mode

These include:

  • Number: Represent the numeric values including integers and floating point.
    For instance

    Let age =20;
    let price = 50.87;

  • String: These are primitive data type. There are any groups of characters which include letters, spaces, numbers or symbols sorrounded by single quote or double quotes.

Example

Let Hamy ='where are you from?';
Enter fullscreen mode Exit fullscreen mode
  • Boolean: These are primitive data type. They can be either true or false.
    Example

    let goingHome = true;
    let goingHome = false;

  • Null: is a primitive data type. It represent the intentional absence of values in code. It is represented as a null.

let Brik = null;

  • Undefined : is a primitive JavaScript data value that represent lack of defined value. Variables that are declared but not initialized to a value will have the value of undefined.

    var = a;
    console.log(a);
    //prints: undefined

    *Reference Data Type *

Reference data type in JavaScript are data type that do not directly contain data but instead referenced it by storing memory addresses or reference to data location.
It include:

  • Object:it represent collection of key Value pairs enclosed with curly braces.
    Examples

    let football = {
    England: "Premier league",
    Spain : "La Liga",
    };

  • Array : This one represent ordered list of values enclosed in a square bracket

    Examples

    Let name = [ "Binka", "John","Ankit"];
    console.log(name);
    //output:Binka,John, Ankit.

  • Function: it represent a reusable block of code that can be invoked.

Example

function add (a, b){
return a + b;
Enter fullscreen mode Exit fullscreen mode

}

That's the basics introduction to JavaScript. There are still more that I will cover.

Top comments (3)

Collapse
 
mezieb profile image
Okoro chimezie bright

nice work!!! and we are glad to have you on board.

Collapse
 
binaminbinka1 profile image
Binamin

Thank you

Collapse
 
mezieb profile image
Okoro chimezie bright

you are welcome!!!