Javascript Fundamentals Part 1

Javascript is case-sensitive

Everything in JavaScript including variables , function names,  class names, and operators are case-sensitive. It means that counter and Counter variables are different.

Comments

JavaScript supports both single-line (//) and block(/**/) comments.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// This is a single line comment
/*
* This is a multiple line
* comment block
*/
// This is a single line comment /* * This is a multiple line * comment block */
// This is a single line comment

/*
* This is a multiple line 
* comment block
*/

Semicolon

Although JavaScript does not require to end a statement with a semicolon (;), it is recommended to always use the semicolon to end a statement which makes your code more readable.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var number1 = 1;
var number2 = 2;
var number1 = 1; var number2 = 2;
var number1 = 1;
var number2 = 2;

Javascript variables

JavaScript variables are loosely typed which means that variables can hold values with any type of data. Variables are just placeholders for values.

To declare a variable, you use the var or let keyword followed by the variable name.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var pointer = "Welcome!";
point = 100;
var pointer = "Welcome!"; point = 100;
var pointer = "Welcome!";
point = 100;

Undefined and undeclared variables

An undefined variable is a variable that has been declared. Because we have not assigned it a value, the variable used the undefined as its initial value.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var undefinedMessage;
console.log(undefinedMessage); // undefined
var undefinedMessage; console.log(undefinedMessage); // undefined
var undefinedMessage;

console.log(undefinedMessage); // undefined

An undeclared variable is the variable that has not been declared.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
console.log(undeclaredVariable); // ReferenceError: undeclaredVariable is not defined
console.log(undeclaredVariable); // ReferenceError: undeclaredVariable is not defined
console.log(undeclaredVariable); // ReferenceError: undeclaredVariable is not defined

Global and local variables

In JavaScript, all variables exist within a scope that determines the lifetime of the variables and which part of the code can access them.

Local variables

Variables declared within a JavaScript function, become locally accessible to the function and only that function.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function sayHi(){
//helloMsg is a local variable to the sayHi() function
var helloMsg = "Welcome!";
console.log("helloMsg: "+helloMsg);
}
sayHi();
console.log("helloMsg: "+helloMsg);//Uncaught ReferenceError: helloMsg is not defined
function sayHi(){ //helloMsg is a local variable to the sayHi() function var helloMsg = "Welcome!"; console.log("helloMsg: "+helloMsg); } sayHi(); console.log("helloMsg: "+helloMsg);//Uncaught ReferenceError: helloMsg is not defined
function sayHi(){
    //helloMsg is a local variable to the sayHi() function
    var helloMsg = "Welcome!";
    console.log("helloMsg: "+helloMsg);
}

sayHi();

console.log("helloMsg: "+helloMsg);//Uncaught ReferenceError: helloMsg is not defined

Global variables

A variable declared outside a function, becomes global which all functions on a web page can access it. 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/*
* Global variables
*/
var message = "Hello";
function sayHello() {
// local variable
message = 'Hi';
console.log(message); // which message?
}
sayHello();// Hi
console.log(message); // Hi
/* * Global variables */ var message = "Hello"; function sayHello() { // local variable message = 'Hi'; console.log(message); // which message? } sayHello();// Hi console.log(message); // Hi
/*
* Global variables
*/
var message = "Hello";
function sayHello() {
    // local variable
    message = 'Hi';
    console.log(message); // which message?
}
sayHello();// Hi
console.log(message); // Hi

If a local variable is not declared, Javascript will create it as a global variable.

But to avoid creating a global variable accidentally inside a function because of omitting the var keyword, you use the strict mode by adding the “use strict”; at the beginning of the JavaScript file (or the function). Note that by using “use strict” modern javascript will be enforced.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script>
"use strict";
window.onload = function() {
}
</script>
<script> "use strict"; window.onload = function() { } </script>
<script>
"use strict";
window.onload = function() {

}
</script>

Javascript Data Types

JavaScript has six primitive data types:

  1.  null
  2.  undefined
  3.  boolean
  4.  number
  5.  string
  6.  symbol – available only from ES6
  7. object

JavaScript has dynamic types. This means that the same variable can be used to hold different data types.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var x; // Now x is undefined
x = 10; // Now x is a Number
x = "Folau"; // Now x is a String
var x; // Now x is undefined x = 10; // Now x is a Number x = "Folau"; // Now x is a String
var x;           // Now x is undefined
x = 10;           // Now x is a Number
x = "Folau";      // Now x is a String

To get the current type of the value of a variable, you use the typeof operator.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let count = 120; // count is a number
console.log(typeof(count)); // "number"
count = false; // count is now a boolean
console.log(typeof(count)); // "boolean"
count = "Hi"; // count is now a string
console.log(typeof(count)); // "string"
let count = 120; // count is a number console.log(typeof(count)); // "number" count = false; // count is now a boolean console.log(typeof(count)); // "boolean" count = "Hi"; // count is now a string console.log(typeof(count)); // "string"
let count = 120; // count is a number
console.log(typeof(count)); // "number"

count = false;   // count is now a boolean
console.log(typeof(count)); // "boolean"

count = "Hi";   // count is now a string
console.log(typeof(count)); // "string"

The null type

Javascript defines that null is an empty object pointer. It is a good practice to assign a variable that later holds an object to null so that you can check whether the object is null or not by using the if statement.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let obj = null;
console.log(typeof obj); // object
if(obj != null) {
// call method of the object
}
let obj = null; console.log(typeof obj); // object if(obj != null) { // call method of the object }
let obj = null;
console.log(typeof obj); // object

if(obj != null) {
   // call method of the object
}

The undefined type

The undefined type is a primitive type that has one value undefined. By default, when a variable is declared but not initialized, it is assigned the value undefined.

The number type

Variables that hold whole number values

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var num = 100;
var dec = 2.5;
var num = 100; var dec = 2.5;
var num = 100;
var dec = 2.5;

The boolean type

Variables that hold true or false

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var isSafe = true;
var isSafe = true;
var isSafe = true;

The NAN type

JavaScript has a special numeric value called NAN, which stands for Not a Number. In fact, it means an invalid number.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
console.log('john'/2);//NaN;
console.log(NAN/2);//NAN
console.log(NAN==NAN);//false
console.log('john'/2);//NaN; console.log(NAN/2);//NAN console.log(NAN==NAN);//false
console.log('john'/2);//NaN;
console.log(NAN/2);//NAN
console.log(NAN==NAN);//false

The string type

In JavaScript, a string is a sequence of zero or more characters. A literal string begins and ends with either a single quote(‘) or double quote (“). A string that starts with a double quote must end with a double quote and a string that begins with a single quote must end with a single quote.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let greeting = 'Hi';
let s = "It's a valid string";
let str = 'I\'m also a string'; // use \ to escape the single quote (')
let greeting = 'Hi'; let s = "It's a valid string"; let str = 'I\'m also a string'; // use \ to escape the single quote (')
let greeting = 'Hi';
let s = "It's a valid string";
let str = 'I\'m also a string'; // use \ to escape the single quote (')

The object type

In JavaScript, an object is a collection of properties, where each property is defined as a key-value pair.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let user = {
firstName: 'Folau',
lastName: 'Kaveinga'
};
let user = { firstName: 'Folau', lastName: 'Kaveinga' };
let user = {
    firstName: 'Folau',
    lastName: 'Kaveinga'
};

 

Null check with ??

The nullish coalescing operator is written as two question marks ??.

The result of a ?? b is:

  • if a is defined, then a,
  • if a isn’t defined, then b.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let collegeName;
console.log("collegeName: "+ (collegeName ?? "no collegeName"));//collegeName: no collegeName
collegeName = "BYU";
console.log("collegeName: ", collegeName ?? "no collegeName");// BYU
let collegeName; console.log("collegeName: "+ (collegeName ?? "no collegeName"));//collegeName: no collegeName collegeName = "BYU"; console.log("collegeName: ", collegeName ?? "no collegeName");// BYU
let collegeName;

console.log("collegeName: "+ (collegeName ?? "no collegeName"));//collegeName: no collegeName

collegeName = "BYU";
console.log("collegeName: ", collegeName ?? "no collegeName");// BYU

 

Source code on Github




Subscribe To Our Newsletter
You will receive our latest post and tutorial.
Thank you for subscribing!

required
required


Leave a Reply

Your email address will not be published. Required fields are marked *