Values, Greeting JavaScript: Data Types, Operators and Variables8 min read

In the previous article, we’ve been talking very first lesson on JavaScript that provides you the taste about this language, learn how to interact, run a JavaScript file with the console, what are console.log(), console.warn(), console.error() as well as writing a comment in JavaScript. But do you think these things are a little bit shallow? Today we’re planning to learn the crucial fundamental concepts that not only JavaScript but also many other programming languages that you should acquire first, which are Values, Data Types, Operators, and Variables.

Not going to speechify anymore, straight to the point right now…

Values

In JavaScript, value is literally its meaning – more or less, to be able to work with such quantities of bits without getting lost, we must separate them into chunks that represent pieces of information. are called values. All the values are made by some tiny things, and every value has its type and plays its own roles. When you working with JavaScript, some values could be a number, some values are pieces of text, some values are functions, and so on which are really diverse. Most of the essential chunks will be covered and sumped up in few these lines below.

Data Types and Operators

Number

  • Integer – you can storage whatever integer numbers (positive, zero and negative numbers without fractional component) you want such as 98; 2; 67; – 56 etc… in JavaScript:
console.log(98);
  • Real number: the number with a fractional component such as (9, 23; 4.5, etc…) also can be written and your fractional number should be separated with a dot ( . ), not a slash. If you using slash instead, JavaScript will think that you are doing divide, and the result will be 0.8, not 4.5.
console.log(4.5);

String

In JavaScript, strings are used to presents a text or something you want to express and put out to the screen. They should be written and enclosed in quotes like this ” “, ‘ ‘, ` `

console.log("Here is a string, which is wrapped in a double quote!");
console.log("Here is also a string, which is inside a single quote!");
console.log(`Likely, this text still is a string, with a little different!`); (ES6: not worry about it now)

Choosing ” ” (double quote), ‘ ‘ (single quote), or ` ` it depends on your style, but in some cases you want to use these character inside a string, there are some ways to do this:

As you can see, when you use double quote to create a string, you should use single quote inside it and vice versa to avoid an error:

Another way more optimal to contain a quote in a string is using backslash \ :

No more error, with whatever string styles you want as long as using backslash.

Two or more strings to another can be concatenated by using + operator (see more in operator section below):

console.log("Hello," + " my name is " + "Scary Terry!");
// Hello, my name is Scary Terry!
Bracket notation and the immutable of a string

Bracket notation is a way to get a character at a specific indexwithin a string.

Like most other programming languages, JavaScript starts at 0 rather than 1 also can be called zero-based indexing.

To have you can envision it easily, we have an example like this:

"Snoopy" // the zero index is "S" 

As you can see the zero index is “S”. So if we have a string named Snoopy and assigning it to a variable,firstName, you can get the first letter of this string by using:

var firstName = "Snoopy" // declare a variable, scroll down to see the description about it.
firstName[0] // "S"

Get the second character (“n”) by using firstName[1] and so on…

String values are immutable, which means that they cannot be altered once created. For example:

var greeting = "Hello";
greeting[0] = "J"; // cannot change to "Jallo";
greeting; // still "Hello"

But you still can change the string’s value by assign it to a new value:

var greeting = "Hello, World"
greeting = "Hello, JavaScript!"
greeting; // "Hello, JavaScript!'

Operators and Boolean Values

Arithmetic Operators
  • The addition operation ( + ) is used to plus/add numbers, it’s also can concatenate a string:
console.log(2 + 3); // 5
console.log("The lazy" + " dog"); // The lazy dog
  • The subtraction operator ( – ) is used to subtract numbers, but not being used to for strings:
console.log(6 - 4); // 2
console.log("Hey" - "boyssss") // NaN
  • The multiplication operator (*) multiplies the given numbers:
console.log(6 * 9); // 54
  • The division operator ( / ) is used to divide the given numbers:
console.log(27 / 3); // 9
  • The modulus operator (or division remainder) ( % ) is operated to divide numbers and giving the remainder of the calculation:
console.log(54 % 7); // 5;
console.log(128 % 8); // 0;
  • The exponentiation operator (**) is used to calculate the base to the exponent power, that is, baseexponent:
console.log(2**3); // 8
console.log(11**2); // 121
  • The increment operator (++) is used to increase a number by one. But there are two ways to manipulate this operator. For example, we have two things call “x” which we will use increment operator:
++x (prefix) which means x will return first, then increase by one after.
x++ (postfix) which is increased by one to its value first, then return the result.

(postfix): 
x = 3;
a = x++; // a = 3; x = 4 (return first, then increase.)

(prefix):
x = 3;
a = ++x // a = 4; x = 4 (increase first, then return the value.)
  • Similar to the increment operator, the decrement operator (–) works, but instead of adding number by one, it subtracts it by one:
(postfix):
x = 2;
a = x--; a = 2; x = 1

(prefix):
x = 2;
a = --x; a = 1; x = 1
Boolean Values and Logical Operators

Boolean is a statement with a certain condition, either return true which is something is true or false which is something is false. (just want to lengthen my words, don’t think about it.)

  • Using > which means greater than, < which means less than something:
console.log(69 > 96); // false
console.log(20 > 15.5); // true
console.log(52 < 58); // true
  • Using >= or <= are greater than or equal to and less than equal to something, respectively.
console.log(20 >= 15); //true
console.log(10 <= 11); //true 
  • Other similar operators are == (equal to) and != (not equal to): you can compare strings, numbers, arrays, objects, etc…(don’t worry about arrays or objects now.) Note: !(an exclamation mark) is an operator that flips the value, !true is false, !false is true. If true and false are compared with a number, true should equal to 1 and 0 should false.
console.log("Donald Trump" != "Bernie Sanders"); // true
console.log(20 == 21); // false
console.log(13 != 59); // true
console.log(true == 1); // true
console.log(false == 0); // true
  • Whoo-weee, the && in the bare word we’d say “and”. It will only return true in case both values it’s given are true. Otherwise, false.
console.log(true && true); // true
console.log(true && false); // false
console.log( 23 + 4 * 6 == 382 && 23 > 2 + 4) // false (you can also mix boolean with arithmetic.
  • ||is also a logical operator, called or. Not like the && operator that both values must be true, ||operator just needs one.
console.log(false || false); // false (true not appears here)
console.log(true || false); // true

We’ve listed above some cool things: number, string, boolean, operators(+, -, *, /, ==, >, <, !=, ||, &&). Typically, it’s not possible to convert some of these things together in some other programming languages. However, in JavaScript it is a little bit different, demonstrated by some of the code below:

console.log(92 + "22"); // 9222
console.log(12.5 + "54"); // 12.554
console.log("twenty six" * 2); // NaN
console.log("two" / 2); // NaN
console.log(null * 6); //NaN
console.log("JavaScript" + 4 + "you"); // JavaScript 4 you

NaN stands for not a number.

Variables

We’ve been learning so many things about JavaScript. But what would we do to accumulate these and using them or call them later to save time and avoid a tedious scenario, we need to store it to a variable!

Remember examples of increment and decrement above? Actually, we’ve been created a variable and its name “x” and “a”. In order to create a variable and assign it to a value, the value could be a string, a number, an array, an object or function, etc…(don’t worry about those things now) simply you just pick define a variable’s name that you like (but should be transparent), just simple like this, but I just want to show you a way to declare variable, you shouldn’t try to create a variable by this way:

x = 2 + 3 - 5;
console.log(x); // 0

a = "This is a";
b = " great tutorial, maybe?";
console.log(a + b); // This is a great tutorial, maybe?

c = 2*3;
d = 8 - 4;
sum = c + d;
console.log(sum); // 10

It’s much better if you declare a variable with the var keyword. The difference between defining a variable with var keyword and just variable’s name is var is used to define a local variable which cannot be accessed outside scope but will become global outside of a function, but just variable name is a global variable that everywhere in your program can access it. And I recommend you should not create a variable without a var keyword. It sometimes will lead to unexpected behaviors.

  • Global Variables − A global variable has global scope which means it can be defined anywhere in your JavaScript code.
  • Local Variables − A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

But don’t worry about the local variable and global variable now, we will talk more about it in the next few articles. Now see var keyword:

var someThingSpecial = "A special string";
var anotherSpecialThing = ", really"?;
var exceptionalVariable = someThingSpecial + anotherSpecialThing;
console.log(exceptionalVariable) // A special string, really?

As can be observed, the fundamental developer rules is the way you give variable a name. The first letter of a variable should be a lower letter or a underscore( _ ) letter and after that you should use upper letters in your variable’s name if need to.

Another important thing about 2 ways define a variable above you should notice is, it not just can be assigned, it also can be re-declare, which is:

Re-assign:
var x = 3;
x = 4;
console.log(x); // 4;

Re-declare:
var a = "Whoo-weeeeee!!!";
var a = "Woofffffffff!!!";
console.log(a); // Wooffffffff!

You can also define a variable with some other keywords, which are let and const, but we will talk about it in the ES6 section.

Facebook Comments

Previous Article
Next Article

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Werrick Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Werrick
Guest
Werrick

This post is great! Thank you for this, I hope you can write more often.

Sign up for newsletter

* indicates required

Categories

Archives