For every language , first we have to learn the basic fundamentals to understand the usage and its practice. JavaScript has no exception, we have to learn fundamentals to start our journey to be a Web Developer.
Fundamentals and core features of JavaScript language
What is a variable? A variable is a container for a value, like a number we might use in a sum, or a string that we might use as part of a sentence.
We can declare a variable using 3 keywords that are var, let, and const. Each keyword is used in some specific conditions.
var – keyword is used to declare variables globally. If you use this keyword to declare a variable then the variable can be accessible globally and changeable also. It is good for a short length of codes, if the codes get huge then you will get confused.
let – keyword is used to declare variables that are block-scoped. Variables defined with the let keyword cannot be re-declared and must be declared before use.
const – ES2015 (ES6) introduced the const keyword to define a new variable. Variables declared using the JavaScript const keyword cannot be re-assigned.
Variables specified using const cannot be re-declared and have block-scope.
| Variable | Explanation | Example |
|---|---|---|
| String | This is a sequence of text known as a string. To signify that the value is a string, enclose it in single or double quote marks. | let myVariable = 'Bob'; orlet myVariable = "Bob"; |
| Number | This is a number. Numbers don’t have quotes around them. | let myVariable = 10; |
| Boolean | This is a True/False value. The words true and false are special keywords that don’t need quote marks. | let myVariable = true; |
| Array | This is a structure that allows you to store multiple values in a single reference. | let myVariable = [1,'Bob','Steve',10];Refer to each member of the array like this: myVariable[0], myVariable[1], etc. |
| Object | This can be anything. Everything in JavaScript is an object and can be stored in a variable. Keep this in mind as you learn. | let myVariable = document.querySelector('h1');All of the above examples too. |
Operators
An operator is a mathematical symbol that produces a result based on two values (or variables). In the following table, you can see some of the simplest operators, along with some examples to try in the JavaScript console.
| Operator | Explanation | Symbol(s) | Example |
|---|---|---|---|
| Addition | Add two numbers together or combine two strings. | + | 6 + 9; |
| Subtraction, Multiplication, Division | These do what you’d expect them to do in basic math. | -, *, / | 9 - 3; |
| Assignment | As you’ve seen already: this assigns a value to a variable. | = | let myVar = 'Bob'; |
| Strict equality | This performs a test to see if two values are equal and of the same data type. It returns a true/false (Boolean) result. | === | let myVar = 3; |
| Not, Does-not-equal | This returns the logically opposite value of what it precedes. It turns a true into a false, etc.. When it is used alongside the Equality operator, the negation operator tests whether two values are not equal. | !, !== | For “Not”, the basic
“Does-not-equal” gives
|
Syntax: let variable_name = value;
let foo = "bar"; // foo is now a string
foo = 42; // foo is now a number
foo = true; // foo is now a boolean
Block Scope – The variables which are declared inside the { } block are known as block-scoped variables. variables declared by the var keyword cannot be block-scoped.
Example: In this example, the num variable is block-scoped and it cannot be accessed outside the block. If we try to access the variable outside the block it throws a reference error.
Let’s experience the usage of data types in practice. Copy & Paste below HTML code into “datatypes.html” file, save it to a folder. Open “datatypes.html” in chrome browser.
<!DOCTYPE HTML>
<html>
<body lang="en">
<script data-two_delay_src='inline' data-two_delay_id="two_66e8ab5d1e220" type = "text/JavaScript"></script>
</body>
</html>
