DEV Community

loading...
Cover image for (Javascript) My learning journey Part 2: Run code, data type and declare variables

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

ericchapman profile image Eric Chapman ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Naming conventions

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

// Use self descriptive naming
const max1 = 6 // not good
const maxAllowUsers = 6 // good :-)
Enter fullscreen mode Exit fullscreen mode

Comments in JS code

// one line comment
/* Multi lines comments
Can go on more than one line 
*/
Enter fullscreen mode Exit fullscreen mode

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'

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

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`)

Enter fullscreen mode Exit fullscreen mode

Conclusion

That's it for day 2. Tomorrow we will look at if else statements and more... Stay Tune!

Discussion (1)

pic
Editor guide
Collapse
halltech1 profile image
halltech1

This is helpful to me as a beginner