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
Basic understanding of linking html file and javascript. Learning that takes few minutes at w3school
In this article, we are going to learn about:
Table of Contents
1.Add comments in Javascript
2.Declare Javascript Variables
3.Assign one value of a variable to another
4.Declaring string variables
5.Understanding Uninitialized Variables
6. Case sensitivity in Javascript variables
7.Understand differences between var and let keyword
8.Best practice
9.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;
- Inline comment.
- - 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.
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 MyVarnor 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
Written by Dennis Mbugua.
Follow me on Twitter
Top comments (0)