DEV Community

Cover image for JavaScript For Noobs : Part - 1
Milan Mohapatra
Milan Mohapatra

Posted on

JavaScript For Noobs : Part - 1

Basics Of JavaScript : " What you need to know to become PRO "

As a developer it is a ritual to say Hello! to world. So, let's learn how to write your first Hello! World in JavaScript

console.log('Hello! Word of Developer')

  • console is a JavaScript object who is identify as console of web.
  • there is a log() whose job is to print output.
  • and you know sentence between " and ' is string.

Eg.

console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')
Enter fullscreen mode Exit fullscreen mode

1. Comments in JavaScript

comments are the most essential part of programming. Because, if you don't know how to comment you are not a developer. In JavaScript we basicity have two types of comments.

  1. Single line comment // this is a single line comment
  2. Multiline comment /* This is a multiline comment This is a multiline comment */

2. Syntax

Every programming language has its own structures and rules to write code so, as JavaScript that called syntax. If you don't follow that syntax you will get error in console.

Tackle that syntactical by solving error is called debugging.

3. Adding JS to web page

There are three way to put your JS in HTML page

by

  • inline JavaScript
  • internal JavaScript
  • external JavaScript

Home Work: google HOW?

NOTES: Do you know you can add multiple JS file in a single HTML page. Yes! we do it externally.

4. Types

  1. Numbers (both Integer and floating point number)
  2. Strings
  3. Booleans (true & false)
  4. Undefined (Not assigned == Undefined)
  5. Null (Empty)

NOTE:

  • null is a default type of objects
  • collection of one or more characters between two single & double quotes, or backticks.

you can check type of datatype by typeof operator

Eg.

console.log(typeof 'Asabeneh') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined
Enter fullscreen mode Exit fullscreen mode

5. Variables

Variables are containers of data. Variables are used to store data in a memory location. When a variable is declared, a memory location is reserved. When a variable is assigned to a value (data), the memory space will be filled with that data. To declare a variable, we mostly use let to create non constant variable and const for constant variable. But we will ignore var due to avoid useless scoping error.

5.1. Variable Naming Rules

  • should not begin with a number
  • not allow special characters except $ & _
  • follows a camelCase convention
  • should not have space between words

Eg.

let firstName = 'Asabeneh'
let lastName = 'Yetayeh'
let country = 'Finland'
let city = 'Helsinki'
let age = 100
let isMarried = true
let age = 100
const gravity = 9.81
const boilingPoint = 100
Enter fullscreen mode Exit fullscreen mode

6. Data Types

data types can be divided into two types

  1. Primitive or inbuilt
  2. Non Primitive or reference type

6.1. Primitive Datatypes

  • Numbers - Integers, floats
  • Strings - Any data under single quote, double quote or backtick quote
  • Booleans - true or false value
  • Null - empty value or no value
  • Undefined - a declared variable without a value
  • Symbol - A unique value that can be generated by Symbol constructor

6.2 Non-Primitive Datatypes

  • Objects
  • Arrays
  • Functions

NOTE: Primitive data types are immutable(non-modifiable) data types. Once a primitive data type is created we cannot modify it.

6.3 What is mutable and Immutable in JavaScript

As we create primitive variable if we want to change the value we have to reassign the value. Modification and reassignment is completely two different things. But in case of object or non-Pre variable there is a allocation of memory and reference is assigned to a variable that's way we can modify the vale of variable without re assigning that is the concept of mutability

NOTES: we do not compare non-pre data types. Do not compare arrays, function or objects. Non-pre values are referred to as reference types, because they are being compared by reference instead of value. Two objects are only strictly equal if they refer to the same underlying object.

7. Math Objects in JavaScript

Math objects has pre defined methods who helps to works with numbers.

Math.PI // 3.141592653589793
Math.round(PI) // 3 to round values to the nearest number
Math.floor(PI) // 3 rounding down
Math.ceil(PI)// 4 rounding up
Math.min(-5, 3, 20, 4, 5, 10) // -5
Math.max(-5, 3, 20, 4, 5, 10) // 20
Math.random() //random num bet 0 to 0.999999
Math.abs(-10) // 10
Math.sqrt(100) // 10
Math.pow(3, 2) // 9
Math.E // 2.718
Math.log(2) // 0.6931471805599453 (log 2 base E)
Math.LN2 // 0.69
Math.LN10 // 2.30 (ln 10)
Math.sin(0)
Math.cos(60)
Enter fullscreen mode Exit fullscreen mode

Eg. generate a random number between 5 to 10 include

console.log(5 + Math.floor(Math.random() * 6))

8. Strings in JavaScript

Strings are texts, which are under single , double, back-tick quote. To declare a string, we need a variable name, assignment operator, a value under a single quote, double quote, or backtick quote.

Note : ' ' space also goes into strings in JS

8.1. String Concatenation

Connecting two or more strings together is called concatenation.

Eg.
let fullName = firstName + space + lastName

8.2. Escape Sequences

\n: new line
\t: Tab, means 8 spaces
\\: Back slash
\': Single quote (')
\": Double quote (")
Enter fullscreen mode Exit fullscreen mode

8.3. Templet Literals

To create a template strings, we use two back-ticks. We can inject data as expressions inside a template string. To inject data, we enclose the expression with a curly bracket({}) preceded by a $ sign.

Eg.

console.log(`The sum of 2 and 3 is 5`)
let a = 2
let b = 3
console.log(`The sum of ${a} and ${b} is ${a + b}`) // injecting the data dynamically
Enter fullscreen mode Exit fullscreen mode

Eg.

let a = 2
let b = 3
console.log(`${a} is greater than ${b}: ${a > b}`)
Enter fullscreen mode Exit fullscreen mode

8.4 String Methods

String has inbuilt some methods who helps to work with strings

str.length
str.charAt(1) // access index 1
str.charCodeAt(5) // access ASCII of chat at index 5
str.toUpperCase() 
str.toLowerCase()
str.substring(0, 5) // 0 to 4
str.split(" ") // return array of splited string wrt space
str.trim(' ') // trim space from beginning and end
str.includes('string') // return true if present
str.replace('strx', 'stry')
str.indexOf('str') // return first occurance
str.lastIndexOf('str') //return last occurance
str.concat(str)
str.startsWith('str') // true if starts with
str.endsWith('str') // true if ends with
str. search('str') //return index
str.match('str') // return array
str.repeat(2) // repeat twice
Enter fullscreen mode Exit fullscreen mode

9. Typecasting in JavaScript

As we know type casting is of two types

  1. External Typecasting
  2. Internal Typecasting

9.1. External Typecasting

To Number

parseInt(str)
Number(str)
console.log(+str)
parseFloat(str)
Number('mil') // NaN

Enter fullscreen mode Exit fullscreen mode

9.1.1. Date to Number

Number(dt)
dt.getTime()
Enter fullscreen mode Exit fullscreen mode

9.1.2. Boolean to Number

Number(true)
Enter fullscreen mode Exit fullscreen mode

9.1.3. To String

String(num)
num.toString()
Enter fullscreen mode Exit fullscreen mode

9.1.4. Date to String

String(dt)
dt.toString()
Enter fullscreen mode Exit fullscreen mode

9.1.5. Boolean to String

String(false)
Enter fullscreen mode Exit fullscreen mode

9.1.6. To Boolean

Boolean(0)
Boolean(1)
Enter fullscreen mode Exit fullscreen mode

9.2 Internal type casting

It happen when one data type is automatically converted to other data type.

Eg.

console.log(10 + '10')  // 20
// string converted to int then added
Enter fullscreen mode Exit fullscreen mode

PART - 2 IS COMING.........

LinkedIn
Twitter

Top comments (0)