Learning JavaScript — Part 1

This posting, and subsequent postings relating to this one, aren’t really for the benefit of others, however some people might find the information useful, so rather than making private notes, I thought I’d share them here.

I’m currently learning JavaScript! That might sound funny considering I’ve developed more than a dozen Solidity smart contracts, and a good handful of blockchain DApps!

the problem was, my approach to learning Solidity was all wrong. In hindsight, I should’ve learned a programming language first, so that by the time I got to Solidity, it would’ve made far more sense. I basically learned to run before I could walk!

I’ve chosen JavaScript, because of it’s links to websites, and many of the modern frameworks that are based on JavaScript, such as React, Vue, and also things like Next.js and Node. The are all very closely tied to Web3 and DApps for blockchain smart contracts, so I’m confident the fundamental JavaScript knowledge will prove most useful over the coming years.

Anyway, enough of that…. on with learning!

Variables

people don’t use var any more. Now we use const and let

const — used when a value will never change (e.g. someone’s year of birth) and must be declared with a value immediately.

const yearOfBirth = 1995; (ok)
const yearOfBirth; (not ok)

let — used for when values are expected to change. Does not necessary need to be declared immediately.

let costOfHotelRoom = 129.99; (ok)
let costOfHotelRoom; (no value declared — also ok)

Referencing a JavaScript file

Add to the bottom of the body of the page…

<script src=”script.js”></script>

Operators with assignment

let x = 10;
x += 5; (similar to writing x = x +5)

In this case x would be 15

let x = 5;
x ++;

In this case, x would be 6

let x = 20;
let y = 15;
console.log( x > y);

This would produce “true” in the console log

Operator Precedence

be careful when you try to apply operators to a mixture of values and strings (type coercion!)

This link is good for reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

Template Literals

use back-ticks (`) which will allow you to merge string text with values.

e.g.

const firstName = Bob;
console.log(`Hello, my name is ${firstName}`);

If Else statements

written with a condition in () followed by the result if true…

const x = 15;
const y = 10;
if (x > y) {
  console.log(`x is bigger than y!`);
} else {
  console.log(`x is smaller than y!`);
}

Type conversion

let year = “1991”;
console.log(typeof year);

result would be string

year = Number(year);
console.log(typeof year);

result would now be a number….also remember that the conversion with Number() must use a capital ’N’, and also that ‘typeof’ does not use camelCase.

year = String(year);
console.log(typeof year);

result would now be back to being a string.

Type Coercion (converting one type to another)

the + operator will convert numbers to strings when a string and a number is added together.

e.g.

console.log(“I am “ + 23 + “years old”);

would produce “I am 23 years old” with 23 being converted to a string.

the — operator will convert strings to numbers when a string and a number is added together.

console.log(“25“ - 5);

would produce a number of 20.

Question 1: What value would be printed to the console for the following?

console.log(5 + "6" + 4 + 9 — "4" — 2);

Question 2: What value would be printed to the console for the following?

console.log("10" — "4" — "3" — 2 + "5");

Falsy values

0, NaN, “ “, undefined, Null

note that EMPTY objects and arrays are actually “truthy” values

let array1 = [];
let object1 = {};
console.log(Boolean(array1));
console.log(Boolean(object1));

the result of both would be true.

Equal operators

always use the triple === for strong equality

=== or !==

Logic operators

&& is the “AND” operator

|| is the “OR” operator

const x = 10;
const y = 20;
if (x < y && x > 9) {
console.log("logic A AND B were true!");
}
if (x < y || x > 50) {
console.log("either logic A OR logic B was true!");
}

both instances would print the message to the console log.

Using Switch / Case

Switch is a bit like if else… you define the condition in () after switch, and then you list the case options followed by a colon (:), and then what happens if the case matches. After each set of case options, you “break” to move to the next case. You then define a “catch-all” with a “default” option when all other case options don’t match.

const day = "wednesday";
switch (day) {
  case "monday":
    console.log("go shopping");
    console.log("clean the car");
    break;
  case "tuesday":
    console.log("go swimming");
    console.log("feed the dog");
    break;
  case "wednesday":
    console.log("have a break!");
    break;
  case "thursday":
    console.log("do the laundry");
    break;
  case "friday":
    console.log("paint the fence");
    break;
  default:
    console.log("it's the weekend!");
}

would produce a result of “have a break!” in the console log.

Ternary statements

a bit like an if else, but can be condensed into a single line, providing there is only two options….true or false

the question is followed by the (?) if true, and then the (:) if false

let x = 5;
let y = 10;
x > y ? console.log("x was bigger") : console.log("y was bigger");