How to get started with Javascript- Part One
Tags: javascript, webdev, beginners, tutorial
Published: 2023-06-27 13:38:36

###Introduction

Javascript is a scripting language you can use to create dynamic web pages. It is one of the core languages used along with HTML and CSS, and is supported by modern browsers.
In this beginners series part one, we are going to learn the basics of javascript. Later on, we are going to be advance to even complex topics.
By learning  and completing this series, you will write your first line of Javascript with absolute confidence.

## Pre-requisites
These tutorials do not require a prior javascript knowledge.However, you must have a basic understanding  the following;
- HTML  and CSS. You can start by learning from [mdn docs](https://developer.mozilla.org/en-US/docs/Learn/HTML)

- Basic understanding of linking html file and javascript. Learning that takes few minutes [at w3school] (https://www.w3schools.com/tags/att_script_src.asp)

In this article, we are going to learn about:
#Table of Contents
1.[Add comments in Javascript](#comments)
2.[Declare Javascript Variables](#declaring variables)
3.[Assign one value of a variable to another](#variable reassigning)
4.[Declaring string variables](# Declaring string variables)
5.[Understanding Uninitialized Variables](#uninitialized variables)
6.[ Case sensitivity in Javascript variables](#case sensitivity)
7.[Understand differences between `var` and `let` keyword ](#var and let)
8.[Best practice](#best practice)
9.[Conclusion](#conclusion)

## Add comments in Javascript
Comments in Javascript lines are lines which explain what the code does, and why a particular code was written in a certain way. Comments make  the code more readable.
Another great use of comments is to remove code from execution when debugging scripts.
The following are the two commonly used Javascript comments;

1. Inline comment.
2. - Multiline comment. 

- 1. Inline comment

 To create a single line comment in JavaScript, you place two slashes "//" in front of the code or text you wish to have the JavaScript interpreter ignore. When you place these two slashes, all text to the right of them will be ignored, until the next line.

 
```<script>
alert (“I have comments in my code”);
` //This is an inline comment`

</script>
```
 
The above code displays the following  alert message on the browser. >
`I have comments in my code`
The second line is never executed.


- 2. multiline  comment

 Inline comments are quite useful.However, it can be burdensome to disable long lines of code or insert long-winded comments. For larger comments, you can used multiline comments that begins with `/*` and ends with `*/`

`<script>
alert(“I have multiline comments in my code”);
/* This is multiline code
This is multiline code
This is multiline code
This is multiline code
This is multiline code
This is multiline code
*/
</script>`

The above code displays the following  alert message on the browser.

`I have multiline comments in my code`

## Declare Javascript Variables
In computer science, data is anything meaningful to a computer. Javascript provides eight data types. You can learn about  javascript data types on (https://www.w3schools.com/js/js_datatypes.asp)

To store data in computers, you create a variable that points to the data rather than data itself.
You declare a variable by putting either one of  the following keywords in front of the variable;
`
var
let
const`

For example, you can declare a variable named ` myNumber`  as follows;

```
var  myNumber;
```
 
The above code creates  a variable called `myNumber`.

### Store values with assignment with assignment operator
You can store a value in a variable using the assignment operator  `= `.

```
 var myNumber = 5 ;
```
The above code assigns the value 5 to  `*myNumber*`;

## Assign one value of a variable to another
You can assign the value of a variable to another variable after assigning the value with the assignment operator.

For example, in the above example, `myNumber` variable can be assigned to another variable.

```
 var myNumber = 5 ;
```
You can declare another variable and assign it the value of myNumber.

	

```
var mySecondNumber = myNumber;
```
Now  the variable mySecondNumber contains  the value of  myNumber . 

## Declaring string variables
So far, we have been declaring number variables  in our examples.
You can also declare variables as follows;

```
var myName = “Dennis”;
```

“Dennis”   is referred to as string literal. A string literal is a variable in javascript  containing 0 or more characters. 
String variables in javascript are enclosed with double quotes  “ ” or single quotes ‘ ‘.

## Understanding Uninitialized Variables
When Javascript variables are first  declared, they have a value of `undefined `. If you do mathematical operations on undefined variables, you get a value of `NaN`. If you concatenate two undefined strings, you get  a value of `undefined`. 

For example, the following  variable has a value of undefined. The variable has been declared with no value assigned to it.
`var mysum`;

## Case sensitivity in Javascript variables
In JavaScript all variables and function names are case sensitive. This means that capitalization matters.
`MYVAR` is not the same as `MyVar `nor myvar`. It is possible to have multiple distinct variables with the same name but different casing. It is strongly recommended that for the sake of clarity, you do not use this language feature.

### Best Practice
Write variable names in JavaScript in camelCase. In camelCase, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized.

Example,

```
var someVariable;
var anotherVariableName;
var thisVariableNameIsSoLong;
```

## Understand differences between `var` and `let` keyword 
One of the biggest challenges of using var keywords is that variables can be easily overwritten.
For example

```
var name = “Dennis”;
var  name = “David”;
console.log(name);
```

The above code displays `David ` since `Dennis` has been overwritten.

In small applications, this does not pose a major challenge.However, as the codebase becomes bigger, then this is a big challenge.

The `let keyword ` was introduced in Es6 ( a topic for another day)  to solve this exponential challenge. Variables declared with the `let keyword` cannot be re-assigned.

Replacing the following code with let keywords,

```
let name = “Dennis”;
let  name = “David”;
console.log(name);
```
The following error is thrown in console;
_Uncaught SyntaxError: Identifier 'myName' has already been declared _

## Conclusion
Javascript is used in creating  dynamic websites.The best way to get started with Javascript is to grasp the foundations and basics right front zero level to the most advanced level.
In this article, you learned  what variables are, how to declare and initialize them in Javascript.You also learnt how to use **camelCase** naming convention while working with Javascript variables. 
You can enhance your understanding of the covered concepts by learning  from 
[Mozilla Developers Guide] (https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)



Written by Dennis Mbugua.
[Follow me on Twitter](https://twitter.com/eikev_dennis)