CSFundamental
Published in

CSFundamental

JavaScript, React Tutorial

React Day 1: JavaScript Basics, Variables, Operations and Types

A series on React tutorials.

To learn React, it is not optional to skip JavaScript. So, in the first lesson, we will see some of the basics of JavaScript and will later move forward to React. I will not be working on DOM for a few lessons, let’s get our basics done first, and then we will see what we can build on DOM.

Variables and Operation

You can define variables with var, let, and const keywords. So, variables as name defined them, they vary. They can change values. Those variables that don’t change their values are let or const. The difference is once you define something with const, you won’t be able to change it.

Example:1

let name = 'Ross'
const email = 'ross@test.com'

name = 'Ross Taylor' // ✅
handle = '@ross2@test.com' // ❌ TypeError: Assignment to constant variable.

Now, let’s see some operations:

Example:2

Add two numbers.

var a= 5;
var b = 7;
var sum = a + b;
console.log(sum);
//12

a is defined and assign a value of 5, similarly b with 7, and our sum simply add those two variables. Easy Peazy.

Example:3

Multiply two numbers.

var a= 5;
var b = 7;
var mult = a * b;
console.log(mult);
//35

Example:4

Divide two numbers.

var a= 12;
var b = 7;
var div = a * b;
console.log(div);
//1.71

Types in JavaScript

Six Data Types that are primitive (a primitive is a data that is not an object and has no methods)

Let see one by one:

Integer

var number= 5 ;

String

var name= "John" ;

Big Integer

BigInt is a built-in object that provides a way to represent whole numbers larger than 2^53 - 1

Boolean

var bool = true
var bool2 = false

Null

null is simply the absence of an object or value. It is a little counter-intuitive, null can’t be true or false, because in the order it does be true or false, it will need to be non-null. So, null is like a void.

It is one of JavaScript's primitive values and is treated as falsy for boolean operations.typeof null === 'object'
// true
null === null
//true
null === true
//false
null === false
//false

Undefined

var unDefined ;
unDefined;
//undefined

Symbol Type

Newly introduced type, generally use in the naming variables in a big program to stop name clashing. Every symbol value returned from Symbol() is unique.

let Sym1 = Symbol("Sym")
let Sym2 = Symbol("Sym")

console.log(Sym1 === Sym2)
// returns "false"

tyoeof operator:

we can check the type with the help of typeof operator:

Example: 5

console.log(typeof 82);
number

So, in this tutorial, we went through some of the basics of JavaScript which is necessary to write React applications. In the next lesson, we will see Expressions and Loops. Have a nice rest of the day ( or night).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Saranjeet Singh

Saranjeet Singh

61 Followers

I write tutorials on Python, JavaScript, React, and Django. I write for InPlainEnglish and TheStartUp .