(Javascript) My learning journey Part 2: Run code, data type and declare variables

#javascript #beginners #tutorial

One of my resolutions for 2021 is to deepen my knowledge in JS. That's why I started a complete new training in JS. From completely zero to intermediate.

An essential point to remember a training course is to take notes and discuss the subject with others. That's why every day I will post on dev.to the concepts and notes that I learned the day before.

If you want to miss nothing click follow and you are welcome to comments and discuss with me.

Without further ado here is a summary of my notes for day 2.

How to run JS code?

JS code can be run in the browser within a script tag

<script>
    let number = 10
    console.log(number)
</script>

The script tag can be place in the header or body section of the html page.

If the tag is place in the header, the JS code will be execute before the page is display. This can slow down the speed of initial page display (and frustrate some users).

If the script tag is at the end of the body section, the JS will be execute after most of the page is loaded.

<body>
   ...
   ...
  <script>
    let number = 10
    console.log(number)
  </script>
<body>

So depending on how you want your page to behaviour choose wisely.

JS code can also be place in external file. In that case you can reference your code like this

<script src="main.js">
</script>

You can also use the defer attribute

<script src="demo_defer.js" defer></script>

The script will be downloaded in parallel to parsing the page, and executed after the page has finished parsing

Naming conventions

// camelCase
let firstName = 'Mike'
const displayProduct()

// Use self descriptive naming
const max1 = 6 // not good
const maxAllowUsers = 6 // good :-)

Comments in JS code

// one line comment
/* Multi lines comments
Can go on more than one line 
*/

Data type

In JS everything is ether object or primitive

There is 7 primitives data type : string, number, boolean, undefined, null, symbol and bigint

JS has dynamic typing. We do not have to manually define the data type. Data type are determined automatically

let name = 'Mike'       // string   
let age = 45            // number 
const pi = 3.1415       // number 
let isActive = true     // boolean (true or false)
let job                 // undefined    
let person = {          // Object
    firstName: 'Mike',
    age: 30 }

// To get the variable type use Typeof operator
console.log(typeof firstName) // return string

// Type coercion (type converted automatically)
console.log(firstName + ' ' + age)   // convert age to text automatically

// Be aware, string will remain string
let year = '2020'
console.log(year + 1) // 20201

// Convert to number
year = Number(year)
console.log(year + 1) // 2021
console.log(Number('Mike')) // NaN

// Convert number to string
console.log(String(300)) // '300'

Variables declaration

// Use let keyword for variables that can be change
let userName = 'Mike'

// Use const keyword for variables that never change
const PI = 3.1415

Basic operators

// Basic math operator 
// = + - * /
let sum = 5 + 7
let result = 5 + (10 / 2)

// Assignment operators
num = num + 10
num += 10 // same as num = num + 10
num++ // num = num + 1
num-- // x = x - 1

// Comparaison operators
// > < >= <=
console.log(num > result)
console.log(result <= num)

String concat

const firstName = 'Mike'
const LastName = 'Taylor'

console.log(firstName + ' ' + lastName)
// or use string template literal
console.log(`${firstName} ${lastName}`) // Mike Taylor

// Use template string to make multi-lines string
console.log(`This string is
a multi line
string`)